[ Not for Circulation ] Creating a Website: Advanced Dreamweaver Optimizing the Workspace for Accessible Page Design 1. Choose Edit > Preferences [Windows] or Dreamweaver > Preferences [Macintosh]. The Preferences dialog box appears. 2. Select Accessibility from the Category list on the left. The Preferences dialog box displays accessibility options. 3. Select the objects you want to activate Accessibility dialog boxes for. NOTE: Accessibility attributes automatically appear in the Insert Table dialog box when you insert a new table. 4. Click OK. For each object you select, an Accessibility dialog box prompts you to enter accessibility tags and attributes when you insert that object in a document. Information Technology Services, UIS 1 [ Not for Circulation ] Using the Hyperlink Command 1. Place the insertion point in the document where you want the hyperlink to appear. 2. Select Insert > Hyperlink. The Hyperlink dialog box appears. In the Text text box, enter the text to appear as a hyperlink in the document. In the Link text box, enter the name of the file to link to, or click the folder icon to browse to and select the file. In the Target pop-up menu, select the window in which the file should open in the Target text box. _blank loads the linked file into a new, unnamed browser window. _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window. _self loads the linked file into the same frame or window as the link. This target is the default, so you usually do not need to specify it. _top loads the linked file into the full browser window, thereby removing all frames. In the Title text box, enter a title for the hyperlink. In the Access Key text box, enter a keyboard equivalent (one letter) to select the hyperlink in the browser. In the Tab Index text box, enter a number for the tab order. 3. Click OK. Information Technology Services, UIS 2 [ Not for Circulation ] Attaching a Behavior to Text You cannot attach a behavior to plain text. Tags like p and span do not generate events in browsers, so there is no way to trigger an action from those tags. However, you can attach a behavior to a link. Therefore, to attach a behavior to text, the easiest approach is to add a null link [that does not point to anything] to the text, then attach the behavior to the link. Note that if you do this, your text will appear as a hyperlink. Attach a Behavior to the Selected Text 1. In the Property Inspector, enter javascript:; in the Link text box. Be sure to include both the colon and the semicolon. NOTE: You can instead use a number sign [#] in the Link text box if you want. The problem with using a number sign is that when a visitor clicks the link, some browsers may jump to the top of the page. Clicking the JavaScript null link has no effect at all on the page, so the JavaScript approach is generally preferable. 2. With the text still selected, choose Window > Behaviors. 3. Select an action from the Actions pop-up menu, enter parameters for the action, and select an event to trigger the action. Attach a Popup Message to Text 1. Select an object and open the Behaviors panel. 2. Click the Plus (+) button and select Popup Message from the Actions pop- up menu. 3. Enter your message in the Message text box. 4. Click OK. Information Technology Services, UIS 3 [ Not for Circulation ] Inserting Media Objects You can insert Flash movie or object, QuickTime and Shockwave movie, Java applet, ActiveX control, or other audio and video objects in a Dreamweaver document. 1. Place the insertion point in the Dreamweaver document where you want to insert the object. 2. Insert the object by doing one of the following: . In the Common category of the Insert bar, click the Media button and select the button for the type of object you want to insert . Select the appropriate object from the Insert > Media submenu. 3. Locate your object on your computer in the Select File or Insert Flash dialog box. 4. Click Choose or OK. 5. The Object Tag Accessibility Attributes dialog box appears if you have activated the dialog box in Preferences 6. Complete the dialog box and click OK. Information Technology Services, UIS 4 [ Not for Circulation ] Debugging Your Code Dreamweaver can automatically remove empty tags, combine nested font tags, and otherwise improve messy or unreadable HTML or XHTML code. 1. Open a document: . If the document is in HTML, select Commands > Clean Up XHTML. 2. In the dialog box that appears, check the box for any of the options. Empty Container Tags removes any tags that have no content between them. For example, <b></b> and <font color="#FF0000"></font> are empty tags, but the <b> tag in <b>some text</b> is not. Redundant Nested Tags removes all redundant instances of a tag. For example, in the code <b>This is what I <b>really</b> wanted to say</b>, the b tags surrounding the word really are redundant and would be removed. Non-Dreamweaver HTML Comments removes all comments that were not inserted by Dreamweaver. For example, <!--begin body text--> would be removed, but <!-- TemplateBeginEditable name="doctitle" --> would not, because it is a Dreamweaver comment that marks the beginning of an editable region in a template. Dreamweaver Special Markup removes comments that Dreamweaver adds to code to allow documents to be automatically updated when templates and library items are updated. If you select this option when cleaning up code in a template-based document, the document is detached from the template. Specific Tag(s) removes the tags specified in the adjacent text box. Use this option to remove custom tags inserted by other visual editors and other tags that you do not want to appear on your site (for example, blink). Separate multiple tags with commas (for example, font,blink). Combine Nested <font> Tags When Possible consolidates two or more font tags when they control the same range of text. For example, <font size="7"><font color="#FF0000">big red</font></font> would be changed to <font size="7" color="#FF0000">big red</font>. Show Log on Completion displays an alert box with details about the changes made to the document as soon as the cleanup is finished. 3. Click OK. Depending on the size of your document and the number of options selected, it may take several seconds to complete the cleanup. Information Technology Services, UIS 5 [ Not for Circulation ] Setting Meta Properties A meta tag is a head element that records information about the current page, such as the character encoding, author, copyright, or keywords. These tags can also be used to give information to the server, such as the expiration date, refresh interval, and PICS rating for the page. [PICS, the Platform for Internet Content Selection, provides a method for assigning ratings, such as movie ratings, to web pages. Attribute specifies whether the meta tag contains descriptive information about the page [name] or HTTP header information [http-equiv]. Value specifies the type of information you are supplying in this tag. Some values, such as description, keywords, and refresh, are already well defined [and have their own individual Property inspectors in Dreamweaver], but you can specify practically any value [for example, creationdate, documentID, or level]. Content is the actual information. For example, if you specified level for Value, you might specify beginner, intermediate, or advanced for Content. Setting Keywords Properties Many search-engine robots read the contents of the Keywords meta tag and use the information to index your pages in their databases. Because some search engines limit the number of keywords or characters they index, or ignore all keywords if you go beyond the limit, it is a good idea to use just a few well-chosen keywords. Setting Description Properties Many search-engine robots read the contents of the Description meta tag. Some use the information to index your pages in their databases, and some display the information on the search results page [instead of displaying the first few lines of your document]. Some search engines limit the number of characters they index, so it is a good idea to limit your description to a few words [for example, Pork barbecue catering in Albany, Georgia, or web design at reasonable rates for clients worldwide]. Example: <HEAD> <TITLE>Information Technology Services</TITLE> <META name="description" content="Information Technology Services's primary goal is to support and promote the effective integration of technology in teaching and learning at UIS."> <META name="keywords" content="Information Technology Services, Media Lab, University of Illinois at Springfield"> </HEAD> Information Technology Services, UIS 6 [ Not for Circulation ] Understanding Cascading Style Sheets Cascading Style Sheets [CSS] are a collection of formatting rules that control the appearance of content in a web page. With CSS styles, you have great flexibility and control of the exact page appearance, from precise positioning of layout to specific fonts and styles. CSS styles let you control many properties that cannot be controlled using HTML alone. For example, you can assign custom list bullets and specify different font sizes and units (pixels, points, and so on). By using CSS styles and setting font sizes in pixels, you can ensure a more consistent treatment of your page layout and appearance in multiple browsers. In addition to text formatting, you can control the format and positioning of a block-level element in a web page.