The good news is that Dreamweaver can automatically remove empty tags, combine nested font tags, and otherwise improve messy or unreadable HTML or XHTML code, and more.. For example, you
Trang 1Not all HTML documents are created equal Some HTML documents contain problems with the overall coding; empty tags, individual font tags, improperly implemented tables… the list goes on and on The good news is that Dreamweaver can automatically remove empty tags, combine nested font tags, and otherwise improve messy or unreadable HTML or XHTML code, and more The question to ask is where did this sloppy code come from? Did Dreamweaver generate code that subse-quently must be cleaned up? The answer to that question is no
However, not all the code associated with a particular Web page is generated by Dreamweaver For example, you might switch from Design view to Code view, and enter your own code, or (and this is more likely), you might want to insert an HTML page into your Dreamweaver site that was written by another designer, or generated
by another application If that's the case, Dreamweaver can help you straighten out the code with a click of a button It's really that simple
Cleaning Up HTML
Clean Up HTML or XHTML
Open the Web page you want to
clean up
Click the Commands menu, and
then click Clean Up HTML or
Clean Up XHTML.
Select the Remove check boxes
you want from the following
options:
◆ Empty Container Tags.
Removes tags that have no
content
◆ Redundant Nested Tags.
Removes all redundant
instances of a tag
◆ Non-Dreamweaver HTML
Comments Removes all
comments not inserted by
Dreamweaver
◆ Dreamweaver Special Markup
Removes comments related to
Dreamweaver code for
automatically updating
templates and library-based
documents
3
2
Trang 2Select the Options check boxes
you want from the following
options:
◆ Combine Nested <font> Tags
When Possible Combines two
or more font tags when they
control the same range of text
◆ Show Log On Completion
Displays an alert with details
about the changes made to the
document when the cleanup is
complete A pop-up window
will appear listing what actions
were performed in cleaning up
the document
Click OK to clean up the active
document
Review the clean up summary
results, and then click OK.
6
5
3
4
6
Trang 3If you have a Microsoft Word document saved as an HTML file, you can open it in Dreamweaver, and then use the Clean Up Word HTML com-mand to convert the file into HTML compliant Web pages The Clean Up Word HTML command removes unnecessary HTML code generated by Word Before you convert a Word HTML file to a compliant Web page
in Dreamweaver, it’s a good idea to create a backup of the original Word (.doc and htm) files, because you may not be able to reopen the HTML document in Word once you've applied the Clean Up Word HTML command
Cleaning Up Word
HTML
Clean Up Word HTML
Open the HTML file created in
Microsoft Word 97 or later you
want to use in Dreamweaver
Click the Commands menu, and
then click Clean Up Word HTML.
Click the Clean Up HTML From list
arrow, and then select the Word
version you want to use
Select from the following Basic
options:
◆ Remove All Word Specific
Markup Removes
Word-specific HTML code You can
select the options you want on
the Details tab
◆ Clean Up CSS Removes
Word-specific CSS
◆ Clean Up <font> Tags Removes
HTML tags, converting the
default body text to size 2
HTML text
◆ Fix Invalidly Nested Tags.
Removes the font markup tags
generated by Word
◆ Apply Source Formatting Uses
source formatting in the HTML
Format Preferences dialog box
4
3
2
Trang 4◆ Show Log On Completion
Displays an alert with details
about the changes made to the
document when the cleanup is
complete A pop-up window
will appear listing what actions
were performed in cleaning up
the document
Click the Detailed tab.
Select from the following
Advanced options:
◆ Remove Word Specific
Markup Select to enable the
options
◆ XML from <html> tag
◆ Word meta and link tags
from <head>
◆ Word XML markup
◆ Conditional tags and their
contents
◆ Remove empty paragraphs
and margins from styles
◆ Clean Up CSS Select to enable
the options
◆ Remove inline CSS styles
when possible
◆ Remove any style property
that starts with "mso"
◆ Remove any non-CSS style
declaration
◆ Remove all CSS styles from
table rows and cells
Click OK to perform the
conversion
Review the clean up summary
results, and then click OK.
8
7
6
5
3
4
5
7
6
8
Trang 5When you create accessible pages, you need to associate information, such as labels and descriptions, with your page objects to make your content accessible to all users Web accessibility means that people with disabilities can use the Web In addition, older people with chang-ing abilities due to agchang-ing have better access to the Web Web accessi-bility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities Dreamweaver understands the importance of Web accessi-bility and gives you the means to make your pages more accessible to the handicapped As a matter of fact, Dreamweaver offers screen reader support, keyboard navigation, and operating system accessibil-ity support A screen reader speaks the text that appears on the com-puter screen In addition, it reads non-textual information, such as button labels or image descriptions in the application Dreamweaver supports JAWS for Windows from Freedom Scientific, and Window-Eyes screen readers from GW Micro When designing pages to be compliant with screen readers, understand that the screen reader starts reading in the upper-left corner of the Document window In addition, since the policy on accessibility standards changes every year, Dreamweaver gives you the ability to check your pages against the current standards Whenever you create a new Form object, Frame, Media or Images item, a dialog box appears with accessibility options
Adding Accessibility
Set Accessibility Preferences
Click the Dreamweaver (Mac) or
Edit (Win) menu, and then click
Preferences.
Click the Accessibility category.
Select the items you want to
display accessibility options for:
◆ Form Objects
◆ Frames
◆ Media
◆ Images
Click OK.
4
3
2
1
4 2
3
Trang 6Add Accessibility
Open the Web page with the
accessibility you want to add
Add a specific item to the Web
page (in this example, an image
was added)
Select from the following options
in the Image Tag Accessibility
Attributes dialog box:
◆ Alternate Text Reader
programs use the text to
describe the item to the visually
impaired For example, if it
were a Home button, you might
add the text, Home Page In
addition, the text pops up in a
small window, when the
visitor's mouse hovers over it
◆ Long Description Displays a
file that contains a longer
textual description of the
object For example, you might
have an image of a sunset, and
you want to give visually
impaired readers a more in
depth description Enter the
URL to the file, or click the
folder icon to browse for it
Click OK.
4
3
2
4
4
For spry validation element
3
Did You Know?
You can add accessibility to an
ele-ment If you want to add or modify
accessibility options to an existing
ele-ment, click the object, add the Alt tag
information using the Properties panel,
or right-click the object, and then click
Edit Tag
You can create an accessibility report.