Creating a Website: Advanced Dreamweaver

Size: px

Start display at page:

Download "Creating a Website: Advanced Dreamweaver"

Juliet Jennings
6 years ago
Views:

Creating a Website: Advanced Dreamweaver Optimizing the Workspace for Accessible Page Design 1. Choose Edit > Preferences [Windows] or Dreamweaver > Preferences [Macintosh].

1 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

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.

2 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

3 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 popup menu. 3. Enter your message in the Message text box. 4. Click OK. Information Technology Services, UIS 3

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.

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

4 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

5 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, and are empty tags, but the tag in some text is not. Redundant Nested Tags removes all redundant instances of a tag. For example, in the code this is what I really wanted to say, 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,  would be removed, but  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 Tags When Possible consolidates two or more font tags when they control the same range of text. For example, big red would be changed to big red. 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

6 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 Example: 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]. <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

7 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. For example, you can set margins, borders, float text around other text, and so on. A major advantage of CSS styles is that they provide easy update capability; when you update a CSS style, the formatting of all the documents that use that style are automatically updated to the new style. Three Types of Styles External CSS are collections of CSS styles stored in a separate, external file.css file (not an HTML file). This file is linked to a one or more page pages in a website using a link in the head section of a document. Internal [or Embedded] CSS are collections of CSS styles included in a style tag in the head portion of an HTML document. Inline styles are defined with specific instances of tags throughout an HTML document. Longhand CSS Shorthand CSS H1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none H1 { font: bold 16pt/18pt Arial } } Information Technology Services, UIS 7

8 Creating a New Cascading Style Sheet 1. In the CSS Styles panel [Window > CSS Styles], click the New CSS Style button [+] located in the lower right area of the panel. The New CSS Style dialog box appears. Attach Style Sheet opens the Attach External Style Sheet dialog box. Select an external style sheet to link to or import into your current document. New CSS Rule opens the New CSS Rule dialog box. You use the New CSS Rule dialog to select the type of rule you are creating--for example, to create a class style, redefine an HTML tag, or to define a CSS selector. Edit Style Sheet opens the CSS Rule Definition dialog box. Edit any of the styles in the current document or in an external style sheet. Delete CSS Rule removes the selected style from the CSS Styles panel, and removes the formatting from any element to which it was applied. If the name of the Cascading Style Sheet is selected, this option becomes Unlink CSS Stylesheet. 2. Define the type of CSS style you want to create: To create a custom style that can be applied as a class attribute to a range or block of text, select Class, and then in the Name text box, enter a name for the style. NOTE: Class names must begin with a period and can contain any combination of letters and numbers [for example,.heading1]. If you do not enter a beginning period, Dreamweaver automatically enters it for you. To redefine the default formatting of a specific HTML tag, select Tag, then in the Tag field, enter an HTML tag or select one from the pop-up menu. To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute, select Advanced, then in the Selector text box, enter one or more HTML tags or select one from the pop-up menu. The selectors [known as pseudo-class selectors] available from the pop-up menu are a:active, a:hover, a:link, and a:visited. 3. Select the location in which the style will be defined in the Define In: section. To create an external style sheet, select (New Style Sheet File). To embed the style in the current document, select This Document Only. Information Technology Services, UIS 8

9 4. Click OK. 5. Define a location to save the style sheet on your computer. 6. The CSS Rule Definition dialog box appears. Select the style options you want to set for the new CSS style. Font sets the font family [or series of families] for the style. Browsers display text in the first font in the series that is installed on the user s system. Size defines the size of the text. You can choose a specific size by selecting the number and the unit of measurement, or you can choose a relative size. Pixels as a unit work well to prevent browsers from distorting your text. Style specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. Line Height sets the height of the line on which the text is placed. This setting is traditionally called leading. Select Normal to have the line height for the font size calculated automatically, or enter an exact value and select a unit of measurement. Decoration adds an underline, overline, or line-through to the text, or makes the text blink. The default setting for regular text is None. The default setting for links is Underline. When you set the link setting to none, you can remove the underline from links by defining a special class. Weight applies a specific or relative amount of boldface to the font. Normal is equivalent to 400; Bold is equivalent to 700. Variant sets the small caps variant on text. Dreamweaver does not display this attribute in the Document window. Please note that not all browsers support the variant attribute. Case capitalizes the first letter of each word in the selection or sets the text to all uppercase or lowercase. Color sets the text color. 7. When you are done setting style attributes, click OK. Information Technology Services, UIS 9

The CSS Style Panel in Current Mode In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS properties for the current selection in the

10 The CSS Style Panel in Current Mode In Current mode, the CSS Styles panel displays three panes: a Summary for Selection pane that displays the CSS properties for the current selection in the document, a Rules pane that displays the location of selected properties (or a cascade of rules for the selected tag, depending on your selection), and a Properties pane that lets you edit CSS properties for the rule applied to the selection. The Summary for Selection pane displays a summary of CSS properties and their values for the item currently selected in the active document. The summary shows the properties for all rules that directly apply to the selection. Only set properties are shown. The properties are arranged alphabetically. The Rules pane displays two different views About view or Rules view depending on your selection. In About view (the default view), the pane displays the name of the rule that defines the selected CSS property, and the name of the file containing the rule. In Rules view, the pane displays a cascade, or hierarchy, of all rules that apply directly or indirectly to the current selection. (The tag to which the rule directly applies appears in the right column.) You can toggle between the two views by clicking the Show Information and Show Cascade buttons in the upperright corner of the Rules pane. Information Technology Services, UIS 10

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually