Tải bản đầy đủ - 0 (trang)
Chapter 11. Under the Hood: HTML

Chapter 11. Under the Hood: HTML

Tải bản đầy đủ - 0trang

Controlling How

Dreamweaver

Handles HTML



This openness lets you write code the way you want, without worrying that Dreamweaver will change it. For example, suppose you have a particular way of formatting

your handwritten code. Maybe you insert an extra hard return after every (table cell) tag, or you like to use multiple tabs to indent nested tags. In cases like these,

Dreamweaver doesn’t rewrite your code to fit its own style—unless you ask it to.



Auto-Fixing Your Code

That’s not to say that Dreamweaver doesn’t ever change your code. In fact, the program can automatically fix errors when you open a page created in another program,

including:

• Overlapping tags. Take a look at this example:

Fix your tags!





This HTML is invalid, because both the opening and closing tags

should appear inside the

tag. Dreamweaver rewrites this snippet correctly:

Fix your tags!





• Unclosed tags. Tags usually come in pairs, like this:

This text is in italic



But if a page is missing the ending tag (This text is in italic), Dreamweaver

adds it.

• Extra closing tags. If a page has an extra closing tag (bold text

), Dreamweaver helpfully removes it.

Note: If you only use Dreamweaver’s Design view to create the HTML for your web pages, you don’t

have to worry about these code-rewriting options. Dreamweaver adds the HTML correctly.



This auto-fix feature comes turned off in Dreamweaver. If you work on a site that was

hand-coded or created by a less capable web-editing program, it’s wise to turn this

feature on, since all those errors are improper HTML that can cause problems for

browsers. (Once upon a time, for example, some web developers deliberately omitted closing tags to save a few kilobytes in file size. Although most browsers can still

interpret this kind of sloppy code, it’s poor practice.)

You can turn on auto-fixing in the Code Rewriting category of Dreamweaver’s Preferences window (see Figure 11-1); turn on “Fix invalidly nested and unclosed tags”

and “Remove extra closing tags.” If you leave these options turned off, Dreamweaver

doesn’t fix the HTML, and there’s no command you can run to fix these kinds of

problems. Instead, Dreamweaver highlights the mistakes in Design and Code views

(skip ahead to Figure 11-5 to get a glimpse of what that looks like).



434



dreamweaver cs5.5: the missing manual



www.it-ebooks.info



Note: The “Warn when fixing or removing tags” option doesn’t really warn you so much as it reports

code that Dreamweaver has gone ahead and fixed. By the time you see the “Warning” message, Dreamweaver’s already rewritten the code in your page. You can’t undo these changes, but you can close the file

without saving them, to retain the old (improperly written) HTML.



Controlling How

Dreamweaver

Handles HTML



Figure 11-1: 

You don’t want

Dreamweaver trying

to “fix” some types of

code. Many serverside programming

languages mix HTML

and server-side code

in a way that confuses

Dreamweaver’s coderewriting tool. The

box to the right of the

“Never rewrite code”

checkbox lists the most

common server-side

file extensions, such as

.php, .asp, and so on.

If you write pages that

end in an extension

not listed—for example

Ruby-on-Rails files end

in .rb—add the extension to this box.



Dreamweaver can also change the capitalization (case) of HTML tags and properties

if you want. For example, you might prefer lowercase letters for tags and properties,

like this:

Click here



Dreamweaver can convert uppercase tags () to lowercase

(and vice versa) when it finds them in pages created by other programs. You can turn

on this feature as described on “Line breaks” on page 77.

Note: If you’re creating XHTML pages (see page 9), you don’t get the option to choose between cases—

by convention, XHTML tags must always be lowercase.



chapter 11: under the hood: html



www.it-ebooks.info



435



Controlling How

Dreamweaver

Handles HTML



Web Application Server Pages

Dreamweaver can leave pages with certain file name extensions untouched—pages

created for web application servers, for example. (Web application servers, covered

in Part Six of this book, process web pages that access databases and other services,

like shopping-cart programs and forms-processing software.) Many of these systems

rely on special code within the HTML of a page—code that Dreamweaver might

“fix,” mistakenly interpreting it as errors in the HTML.

Unless you change its settings, Dreamweaver doesn’t rewrite the code in files whose

names end in .asp (Active Server Pages that run on Microsoft’s IIS Web Server),

.aspx (Microsoft’s .NET technology), .cfm and .cfml (ColdFusion Markup Language

pages that run on Adobe’s ColdFusion Server), .jsp (JavaServer pages that run on any

Java Server), or .php (PHP pages), among others. Nor does it rewrite any code inside

an external JavaScript file (a .js file), since it’s common practice to write JavaScript

that creates HTML on the fly—many times this means JavaScript coders add HTML

fragments (incomplete tags and code) to their code. If you edit other types of files

with Dreamweaver and don’t want it interfering with them, add their file extensions

to the “Never rewrite code” list in the Preferences window, as shown in Figure 11-1.



Special Characters and Encoding

The Code Rewriting preferences window also lets you control how Dreamweaver handles special characters, like <, >, &, and “ whenever you enter them into the Property

inspector or a dialog box. (This doesn’t apply, however, when you type these characters in Code view or in the document window in Design view. Dreamweaver always

encodes [page 90] special characters you type directly into a page in Design view;

conversely, it never encodes special characters in Code view.) Some characters have

special meaning. For example, the “less than” symbol (<) indicates the beginning of an

HTML tag, so you can’t just link to a page named bob
browser would read it as the start of a new HTML tag (called zero).

You can avoid this problem several ways. First, whenever possible, avoid strange

characters when you name pages, graphics, CSS styles, or any other object in your

site. Stick to letters, numbers, hyphens, and underscores (_) to make your life easier.

You can also let Dreamweaver encode special characters. Encoding a character simply

means using a code to represent it. For example, you can represent a space as %20,

or a < symbol as <. Thus, the infamous bob
html, and your link works just fine. Other characters like ™ or © are encoded as

™ and © respectively. To set up encoding, choose Edit➝Preferences

(Dreamweaver➝Preferences on the Mac) and select Code Rewriting from the category list. Your options are as follows:

• Special characters. Turn on this checkbox to have Dreamweaver convert the

less than, greater than, &, and * characters to the specially encoded format mentioned above. (This feature has no effect on code you type in Code view, nor on

text that you type into the document window in Design view.)

436



dreamweaver cs5.5: the missing manual



www.it-ebooks.info



Code View



• Do not encode special characters. Select this option, the first of three under

“URL encoding,” to tell Dreamweaver not to touch any web addresses you enter

(in the Property inspector’s Link box, say). (Again, selecting this option has no

effect on links you add in Code view.)

• “Encode special characters in URLs using &#” is the safest choice. It’s especially helpful if you use a language that has a non-Latin alphabet. If you name

your files using Japanese characters, for example, choosing this option translates them into code that successfully transmits over the Internet.

• “Encode special characters in URLs using %” is intended for use with older

browsers (and we’re talking old, as in pre-Internet Explorer 4), so unless you’ve

got a time machine and plan on going back to 1998 to build websites, skip this

option.



Code View

Dreamweaver provides several ways to view a page’s HTML code:

• Code view. In Code view, Dreamweaver displays your page’s raw code, just as

any text editor would.

• Split view. This view displays both the HTML code and the visual design of

the web page (Design view) side-by-side, code on the left, design on the right.

You can reverse this order or stack one view on top of the other from the Code/

Design view menu on the Application bar (Figure 11-2). In addition, if the page

has an external style sheet, you can use Dreamweaver’s Related Files feature

(page 455), to view the CSS code on one half of the document window, and the

visual Design view in the other half.

• Split code view. This option is for serious coding junkies. It lets you view the

code twice, so you can work on two sections of a page at once. This option is

useful for pages with lots of HTML, and can come in handy when you want to

edit the CSS in the region of a page while crafting HTML in the

section. It also works with Dreamweaver’s Related Files feature (page 455): in

Split Code view, you can check the HTML for a web page in one half of the

document window, and the CSS for an external style sheet in the other half (or

the JavaScript from an external JavaScript file for that matter).

• Code inspector. The Code inspector displays your HTML in a floating window so you see your working pages in their full glory rather than have them

cut in half as in Split view. To open the Code inspector, choose Window➝Code

Inspector, or press F10 (Option-F10). If you have multiple monitors, the Code

inspector comes in handy, because you can put your HTML code on one monitor and the document window on the other. Multitasking code warriors can

also use the Code inspector to look at one area of code while using the main

document window to work on another area (though the Split code view works

well for this, too).

The rest of this chapter assumes that you’re using Code view to edit your HTML.



chapter 11: under the hood: html



www.it-ebooks.info



437



Code View



Code

Code/Design

Design



Application Bar



Code/Design view menu



Figure 11-2: 

In Split view (also called

“Code and Design”

view), you can display

raw code right beside

the visual Design view.

Normally, Dreamweaver displays the code on

the left side, and the

visual design on the

right; however, from

the Code/Design view

menu, you can select

“Design view on left” to

switch them. Leave the

Split Vertically option

selected; otherwise

Dreamweaver displays

the code on top and

the Design view on the

bottom, which doesn’t

leave much space to

work on either the code

or the design.

In Split view, when you

select an object in the

visual half (the selected

“Tips for Enjoying Your

Chia” headline, for

example) Dreamweaver

selects the corresponding HTML in the code

half (the highlighted

tag in Code view

in this figure)—a great

way to identify an

object in your HTML.

As you work in one

half of the Split view,

Dreamweaver updates

the other half. Use the

buttons (labeled) in

the Document toolbar

to jump between the

different views. (Notice

that the Tag selector

at the bottom of the

document window

[circled] also identifies

the selected tag.)



438



dreamweaver cs5.5: the missing manual



www.it-ebooks.info



Code View



Dreamweaver gives you three ways to select a view. From the View menu, choose

Code, Split Code, Design, or “Code and Design” (a.k.a. Split view); you can also click

one of the buttons in the Document toolbar; or use the menu in the Application bar

at the top of Dreamweaver. (“Code and Design” view is shown in Figure 11-2.)

Tip: You can quickly jump between Code and Design view by pressing Control+` (on both Windows and

the Mac). In Split view, this shortcut jumps between the two views, so you can insert an image in the

design half of Split view, and then press Control+` to jump right into the HTML for that image in the Code

half of the window. (If you have the Code inspector open, this keyboard shortcut jumps between the Code

inspector and the Document window.)



Code view functions much like a text editor (only better, as you’ll soon see). You can

click anywhere inside the window and start typing in HTML, JavaScript, CSS, or any

other programming code you want (such as ColdFusion or PHP).

You don’t have to type out everything by hand; the Insert panel, Insert menu, and

Property inspector also function in Code view. Use these sources of canned HTML

to combine hands-on HTML coding with convenient, easy-to-use Dreamweaver objects. This trick can be a real timesaver when you need to add a table, which would

otherwise be a multiline exercise in typing accuracy.

You can also select a tag (like an image’s tag) in Code view, and use the Property inspector to modify it.

Note: When you add HTML in Code view, Dreamweaver doesn’t automatically update Design view,

which can be disconcerting when you work in Split view. (After all, how would Dreamweaver display a

half-finished tag like this:
press F5, to update the visual display.



Figure 11-3: 

After you change

code on the Code side

of Split view, click the

Refresh button in the

Property inspector to

update Design view.



To help you navigate your code, Code view provides several visual cues. They include:

• Syntax coloring. Dreamweaver displays different elements in different colors.

Comments, for example, are gray; text is black; most HTML tags appear in blue,

though form tags are orange, image tags are purple, and links are green. You can

change any of these colors, and even specify unique colors for different types of

tags, using the Preferences window (see Figure 11-4).



chapter 11: under the hood: html



www.it-ebooks.info



439



Code View



Figure 11-4: 

From the Preferences window

(Edit➝Preferences in Windows,

Dreamweaver➝Preferences on

a Mac), you can control the color

Dreamweaver uses to display HTML,

CSS, and script code in Code view.

To do so, select the Code Coloring

category, and then select the type of

document you’re working on—HTML,

CSS, PHP, or whatever—and click Edit

Coloring Scheme. In the Edit Coloring

Scheme window (shown here), select

an item whose color you want to

change—Library Item or HTML Form

Tags, for example—and set a text

and/or background color using the

color boxes. You can also make the

code bold, italic, or underlined using

the appropriate formatting buttons.



To really make a tag stand out, you can underline, boldface, or italicize it, and

even give it a background color. Dreamweaver offers separate color schemes for

25 types of documents, such as CSS, ASP, and XML files. (But do you really need

different colors for HTML forms in JavaScript files, HTML pages, and PHP

pages? You be the judge.)

• Bad code highlighting. When you type incorrect code (say an opening tag

without a closing tag, or improperly nested tags), Dreamweaver highlights it

in yellow (circled in Figure 11-5), but only if you turn on the Highlight Invalid

Code option (View➝Code View Options➝Highlight Invalid Code) or click the

Highlight Invalid Code button in the Coding toolbar (see Figure 11-6).

• Templates. Uneditable regions in pages that Dreamweaver templates create

(Chapter 21) appear in light gray. You can’t actually change this code in Code

view. This coloring scheme is a little confusing since Dreamweaver also displays HTML comments (see page 444) in gray, and you can edit those. You can

change either color, however, as shown in Figure 11-4.



440



dreamweaver cs5.5: the missing manual



www.it-ebooks.info



Code View



Figure 11-5: 

Dreamweaver highlights

incorrect HTML in bright

yellow in Code view (like

the tags circled

in this figure). If you

click the yellow area, the

Property inspector reveals

the mistake. In this case, a

tag is improperly nested—

part of it lies outside

the

tag. (In Design

view, on the other hand,

Dreamweaver indicates

mistakes by showing the

HTML tag—
for

example—in front of a bright

yellow background.)



Figure 11-6: 

Code view provides easy access to common

code-writing commands in the Coding toolbar

(left edge). Using the toolbar, it’s easy to wrap

a selection of HTML in an HTML comment,

hide code you don’t want to see or edit, or

turn on and off Code view options like linenumbering and highlighting invalid code.



Open documents

Open code navigator

Collapse tag

Collapse selection

Expand all

Select parent tag

Balance braces

Show line numbers

Highlight invalid code

Word wrap

Display syntax errors

Apply comment

Remove comment

Wrap tag

Recent snippets

Move CSS rules

Indent Code

Outdent code

Format source code



chapter 11: under the hood: html



www.it-ebooks.info



441



Code View



• Browser compatibility highlighting. Much to the anguish of web designers,

browsers sometimes react differently to CSS formatting. What looks great in

Firefox may crumble in Internet Explorer 6. Dreamweaver’s Browser Compatibility Checker alerts you to possible cross-browser CSS problems. When

you see a squiggly line underneath code—like the one underneath the tag
class=“tagline”> in Figure 11-5—Dreamweaver is telling you there’s a potential

problem. You only see the squiggly lines if you first run the Check Browser

Compatibility command as described on page 420.

• Library Items. Code from Library items (Chapter 20) has a light yellow background.

You can also control the following Code view display features from the View➝Code

View Options submenu:

• Word Wrap. This option makes long lines of code wrap (at the window’s edge)

to the next line, so you don’t have to scroll horizontally to see it all. This option

affects only how Dreamweaver displays the line; it doesn’t actually change your

code by introducing line breaks. Dreamweaver turns this option on by default.

• Line Numbers. Automatic line-numbering can come in handy when you use

Dreamweaver’s Browser Compatibility Checker (see page 420), or when you encounter an error in a page containing JavaScript (like the kind used in Dreamweaver’s Spry widgets) or server-side code (such as the code you’ll create in Part

Six of this book). In Code view, you can also click a line number to select the

entire line, which is a great way to delete or cut a line of code. Normally, Dreamweaver displays line numbers, but if you don’t see them in Code view, click

the “Show line numbers” button in the Coding toolbar (Figure 11-6) or choose

View➝Code View Options➝Line Numbers to turn them on.

• Hidden Characters. Some characters you type on a keyboard don’t show up onscreen: the end of a line, created by hitting the Enter or Return key, for example.

Occasionally, these hidden characters can cause big trouble. When you work

with dynamic, server-side web pages (described in Part Six), for example, you

might find some cool code on the Web, and copy it to your own page. Sometimes copying and pasting code from a web page introduces hidden characters

that prevent the code from working. Turning on the Hidden Characters option

helps ferret out problem characters so you can eliminate them. Spaces appear as

dots, paragraph breaks as paragraph symbols, and tabs as a set of double arrows

(see Figure 11-6).

• Highlight Invalid Code. This option is the on/off switch for highlighting bad

HTML in Code view (see Figure 11-5). Dreamweaver normally turns this option

off, but it’s a good idea to turn it on: go to View➝Code View Options➝Highlight

Invalid Code.

• Syntax Coloring. This option turns tags, comments, and text into colorful (and

informative) text (see Figure 11-4). Dreamweaver turns this option on by default.



442



dreamweaver cs5.5: the missing manual



www.it-ebooks.info



Code View



• Auto Indent. When you work with nested HTML tags, it’s often helpful to press

Tab to indent each level of nested tags, making it easier to identify large blocks

of HTML (such as a table and all its contents). The Auto Indent option carries

the same size indent onto the next line when you hit return or enter.

Suppose you hit the Tab key twice, type a line of code, and then hit return.

Dreamweaver puts the insertion point on the next line, indenting it two tabs. To

outdent, press the Backspace key. Dreamweaver normally turns this option on.

• Syntax Error Alerts in Info Bar. This feature benefits JavaScript and PHP programmers. When you turn it on, Dreamweaver highlights potential syntax errors in both languages (meaning it signals typos or improper code) and displays

a yellow info bar at the top of the document window. You can also turn this

feature off and on from the Coding toolbar (Figure 11-6).



Coding Toolbar

Dreamweaver includes a handy toolbar on the left edge of the document window

in Code view that makes many basic hand-coding tasks go much more quickly. If

you don’t see it, turn it on by choosing View➝Toolbars➝Coding, or by right-clicking

(Control-clicking) on another toolbar, such as the Insert or Document toolbar, and

then, in the pop-up menu, selecting the Coding option. Use the same technique to

close the toolbar if you don’t use it.

The toolbar’s buttons duplicate tasks and preference settings from other parts of

Dreamweaver. Here’s a quick rundown, with brief explanations of what the buttons

in Figure 11-6 do and, when applicable, a cross-reference to a more detailed description of the tool or action:

• Open Documents. This pull-down menu displays all your open documents so

you can switch among them. Since it’s actually easier to click a document’s tab

at the top of the document window, you probably won’t use this button much.

• Open code navigator. The code navigator lets you see which CSS styles affect

the currently selected HTML. If you have no HTML selected, the navigator displays the HTML tag in effect at the cursor location. It also lets you jump quickly

to the code in a style sheet so you can edit the CSS. Read more about this feature

on page 335.

• Collapse Full Tag/Collapse Selection/Expand All. These three buttons work

with Dreamweaver’s Code Collapse feature described on page 450. They let you

collapse (and expand) multiple lines of code, essentially hiding those lines onscreen so you can concentrate on another piece of code.

• Select Parent Tag. This handy feature lets you quickly select the tag that surrounds your current selection. Say you select the text inside a link (
) tag, or

just click inside that tag, and your cursor’s blinking happily. Click this button,

and Dreamweaver selects the entire
tag and all its contents. Click it again,

and you select that link’s parent tag. This button gives you a quick way to select

the tag you’re currently working on. If you really want to be productive, the

keyboard shortcut Ctrl+[ (-[) is quicker.

chapter 11: under the hood: html



www.it-ebooks.info



443



Code View



• Balance Braces. If you do a lot of programming in JavaScript or a server language like PHP, ColdFusion, .NET, or Java Server Pages, this button helps you

find the matching brace ({ or }) in a chunk of program code—actually this tool

selects all the code between an opening and closing brace, but doing so lets you

identify where the braces begin and end. Just click to the right of an opening

brace ({), and then click this button to find the closing brace. To find a closing

brace’s mate, click to the left of the brace, and then click this button. You can also

find matching parentheses this way. The keyboard shortcut—Ctrl+’ (-’)—is

even faster.

• Apply/Remove Comments. Comments let you include helpful notes in your

code, which don’t appear when a browser displays the page. For example, you

may want to leave explanatory notes in your HTML code to help future generations of web developers. Or you might put a comment before a

tag that

explains what should go inside it—“Put corporate logo and navigation bar here.”

People frequently use comments to mark the end of a page section—“End of

navigation bar.” These buttons let you add or remove comments to HTML, CSS,

JavaScript, PHP, and VBScript code, as demonstrated in Figure 11-7.

Tip: You can easily turn style properties on and off in Cascading Style Sheets by taking advantage of

“comment” behavior. Open a CSS file, select a property inside a style, and stick a pair of comment tags

around it (/* at the beginning, */ at the end). When you preview a page that uses the style, you see the

style minus the property you “commented out,” as programmers call it. This maneuver lets you add a new

style and preview it, temporarily hiding the effect of one or more other style properties without permanently deleting them. It’s also a great help in debugging problematic styles. In fact, it’s so useful the CSS

Styles panel provides a button that makes it easy to turn style properties on and off (see Figure 9-27).



Figure 11-7: 

The Coding toolbar lets you wrap HTML, CSS, JavaScript, and other program code within comment

characters. Just select the code you wish to turn

into comments, click the Apply Comment button

(circled), and then select the type of comment you

want to add. Use the HTML comment option to

hide HTML code; the /* */ option to hide multiple

lines of CSS, JavaScript, or PHP code; the // option

to hide each line of JavaScript or PHP code; and

the ‘ option to hide VBScript code.

The last option, Apply Server Comment, hides

server-side code like that described in Part Six;

use this option to comment-out both HTML and

server-side programming code in one step. To

remove a comment, select all the code (including

the comment markers), and then click the Remove

Comment button (hidden in this figure; it’s just

below the Apply Comment button).



444



dreamweaver cs5.5: the missing manual



www.it-ebooks.info



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 11. Under the Hood: HTML

Tải bản đầy đủ ngay(0 tr)

×