ltde

exercise - formatting content

step one: site settings
directions Open Dreamweaver Choose Site \| New Site Choose Local Info category Site Name: SSC_Site Local Root Folder: Click the folder icon to select the SSC_Site (found on the Desktop) Click Select Click OK Click Done
step two: find & replace
directions Choose Edit \| Find and Replace In the Find In box, choose Entire Current Local Site Choose Specific Tag from the Search box Choose FONT from box to the right of Search box Click the minus button to the left of the Attributes box In the Action menu, choose Strip Tag Click Find All to get a list of all occurrences of the search string Click the Green Triangle () to return to Find and Replace Click Replace All to replace all occurrences of the search string Close Results window Choose File \| Close
step three: attaching a style sheet
directions Choose Edit \| Preferences OR (Dreamweaver \| Preferences for Mac) From the CSS Styles section, deselect Open CSS files when modified Click OK Open the SSC_Template from the Files tab, it will be found in the templates folder Choose Window \| CSS Styles Click on the All tab Click on the New CSS Rule icon Choose Tag (redefines the look of a specific tag) Choose BODY from the Tag menu Choose (New Style Sheet File) from the Define In: box Click OK Navigate to the SSC_Site folder on the Desktop Filename: type ssc.css Click Save
step four: defining styles
directions Create styles for the following tags listed below. To create a new style, click the New CSS Rule icon body Choose the Type category Choose Arial, Helvetica, sans-serif from the Font List Size: 12 points Color: #FFFFFF Choose Background category Background Color: #003366 Click OK h1 Click New CSS Rule icon () Choose Tag (redefines the look of a specific tag) Tag: H1 Click OK Click on Type category From the Font listing, choose Edit Font List Chose Arial Black from the Available Font List Click << button Choose Arial from the Available Font List Click << button Choose Helvetica from the Available Font List Click << button Choose sans-serif from the Available Font List Click OK Choose Arial Black, Arial, Helvetica, sans-serif from the Font List Size: 20 points Color: #666666 Case: Uppercase Click on BOX category Deselect Same for All box in the Margins section Right Margin: 20 pixels Left margin: 45 pixels Click OK h2 Click New CSS Rule icon () Choose Tag (redefines the look of a specific tag) Tag: H2 Click OK Choose the Type category Choose Arial, Helvetica, sans-serif from the Font List Size: 18 points Color: #CCCCCC Style: Italic Choose the Box category Deselect Same for All box in the Margins section Right Margin: 20 pixels Left Margin: 55 pixels Click OK p Click New CSS Rule icon () Choose Tag (redefines the look of a specific tag) Tag: P Click OK Choose the Type category Choose Arial, Helvetica, sans-serif from the Font List Size: 12 points Color: #FFFFFF Choose the Box category Deselect Same for All box in the Margins section Right Margin: 20 pixels Left Margin: 55 pixels Click OK ul Click New CSS Rule icon () Choose Tag (redefines the look of a specific tag) Tag: UL Click OK Choose the Type category Choose Arial, Helvetica, sans-serif from the Font List Size: 12 points Color: #666666 Choose the Box category Deselect Same for All box in the Margins section Right Margin: 20 pixels Left Margin: 70 pixels Click OK a:link Click New CSS Rule icon () Choose Advanced (ID's, pseudo-class selectors) Selector: a:link Click OK Choose the Type category Color: #999999 Click OK a:active link Click New CSS Rule icon () Choose Advanced (ID's Contextual Selectors, etc) Tag: a:active Click OK Choose the Type category Color: #999999 Click OK a:visited link Click New CSS Rule icon () Choose Advanced (ID's Contextual Selectors, etc) Tag: a:visited Click OK Choose the Type category Color: #336699 Click OK a:hover Click New CSS Rule icon () Choose Advanced (ID's Contextual Selectors, etc) Tag: a:hover Click OK Choose the Type category Color: #666666 Click OK Choose File \| Save Choose Update(or Start) to update dependent files. Click Close Choose File \| Close
	Shortcut: Bearing in mind inheritance rules, it is possible to set the font for the body only. Any font styles which differ from this default body font can be set for a specific tag.
step five: creating custom styles
directions Open *resources.htm* from SSC_Site folder Choose File \| Preview in Browser to preview the page Notice alignment problem with table Close the web browser Click New CSS Rule icon Choose Class (can apply to any tag) Name: datatable Click OK Choose Type category Choose Arial, Helvetica, sans-serif from the Font List Size: 12 point Color: #FFFFFF Choose Box category Deselect Same for All box in the Margins section Right Margin: 20 pixels Left Margin: 55 pixels Click OK Select the problematic table with the Tag Selector Choose datatable from the Class menu in the property inspector Choose File \| Save Click Close
step six: creating a footer library item
directions Click on the Assets tab from the Files window Select the Library icon along the left side Choose New Library Item icon at bottom of the Library window Enter the name Footer and press Enter Double-click on Footer to edit Choose Insert \| Table Rows: 1 Columns: 2 Table Width: 100% Border Thickness: 0 Click OK In the left cell, choose Insert \| Image Navigate to the images folder inside the SSC_Site folder and choose: footer_testtube.gif Enter test tube in the ALT portion of the property inspector Select the table cell by selecting the <TD> in the tag selector Enter Width = 1% in the property inspector Horizontal = Left Vertical = Top Click in the right cell Type Last Updated: Choose Insert \| Date Choose Date format Check Update Automatically on Save Click OK Press Shift-Enter for a line break Type For accessibility question, contact the Webmaster Select the word "Webmaster" Link to *webmaster.htm* file Choose File \| Save Choose File \| Close Click on Files tab Open mission.htm Place cursor at the bottom of the page Press Enter Choose the Assets tab Click once on the Footer library item Click the Insert button at bottom of Library window Choose File \| Save Insert Footer library item on the following remaining pages by repeating the steps above faq.htm hours.htm register.htm resources.htm sitemap.htm staff.htm tutors.htm webmaster.htm

download Exercise File