Dreamweaver CS4 Concepts and Techniques Chapter 5 Templates and Style Sheets.

Dreamweaver CS4Concepts and Techniques

Chapter 5

Templates and Style Sheets

http://www.scseries.com/

Chapter 5: Templates and Style Sheets 2

Chapter Objectives

• Describe a template• Create a template• Describe different types of style sheets• Create a Cascading Style Sheet• Apply Cascading Style Sheet attributes to a

template• Create a Web page from a template


Chapter 5: Templates and Style Sheets

Starting Dreamweaver and Opening the Alaska Parks Web Site• Click the Start button on the Windows taskbar• Point to Adobe Dreamweaver CS4 on the Start menu or

point to All Programs on the Start menu, and then point to Adobe Dreamweaver CS4 on the All Programs list

• Click Adobe Dreamweaver CS4 to start Dreamweaver• If necessary, display the panel groups• If the Alaska Parks Web site hierarchy is not displayed,

click the Files panel arrow and then click Alaska Parks on the Files popup menu to display the Alaska Parks Web site hierarchy in the Files panel

3



Starting Dreamweaver and Opening the Alaska Parks Web Site

4



Copying Data Files to the Parks Web Site• Click the Files panel button, and then click the name of the

drive containing your data files, such as Removable Disk (M:)

• If necessary, click the plus sign (+) next to the folder containing your data files to expand that folder, and then click the plus sign (+) next to the Chapter05 folder to expand it

• Expand the parks folder to display the data files• Click the aniak01.jpg image file or the first file in the list to

select it• Hold down the Shift key and then click the logo.jpg image

file, or the last file in the list.• Press CTRL+C to copy the files



Copying Data Files to the Parks Web Site• Hold down the Shift key and then click the logo.jpg image

file, or the last file in the list.• Press CTRL+C to copy the files• If necessary, click the Files panel button, and then click

the drive containing the Alaska Parks Web site. Expand the your name folder and the parks folder. Click the images folder to select it

• Press CTRL+V to paste the image files in the images folder



Copying Data Files to the Parks Web Site



Creating a New Template Document

• Click the Files panel arrow in the Files panel, and then click Alaska Parks, if necessary, to open the Alaska Parks Web site

• Click File on the Application bar, and then click New to display the New Document dialog box

• Click Blank Template and then click HTML template in the Template Type list

• In the Files panel, click the minus symbol (-) next to the images folder to collapse the folder

• Click the Create button to create the template document• If the Insert bar is not displayed, click Window on the

Application bar and then click Insert• If the Common category is not selected, click the Common tab

on the Insert bar



Creating a New Template Document



Saving the Web Page as a Template

• Click File on the Application bar and then click Save to display the Save As Template dialog box

• Type spotlight_monuments in the Save as text box to name the template

• Click the Save button to save the template in the Templates folder

• Click the plus sign to the left of the Templates folder to expand the folder and view the template file name with the .dwt extension



Saving the Web Page as a Template



Adding a Background Image and Title to the Template Page• Click Modify on the menu bar and then click Page Properties to

open the Page Properties dialog box• Click Appearance (HTML) in the Category list, if necessary, and

then click the Browse button to the right of the Background image box to open the Select Image Source dialog box

• If necessary, navigate to the images folder. Click parks_bkg.jpg and then click the OK button to select the background image

• Click the OK button in the Page Properties dialog box to add the background image to the template page

• Click the Title text box on the Document toolbar, delete Untitled Document, and type Spotlight on Alaska National Monuments as the entry

• Press the ENTER key. If necessary, click the document window



Adding a Background Image and Title to the Template Page



Adding the Logo Image to the Template

• Click the Assets tab in the panel groups. If necessary, click the Images icon. Scroll down, if necessary, and click the logo.jpg file to select it

• Drag the logo.jpg image to the upper-left corner of the document window to insert the logo image at the top of the page

• In the Property inspector, click the Alt text box, type Alaska National Monuments logo as the entry, and then press the Enter key

• Click anywhere on the page to deselect the image and then press the Enter key



Adding the Logo Image to the Template



Adding the Monument Name and Monument Description Prompts for the First Two Editable Regions

• Collapse the panel groups, but leave the Property inspector open and expanded

• Type Spotlight on [name of national monument] as the heading prompt below the logo image

• Click the Format button arrow in the Property inspector and apply Heading 2 to the spotlight prompt

• Press the ENTER key to move the insertion point below the prompt

• Type Add short description of monument as the prompt for the second editable region.

• Bold the text, click at the end of the text to deselect it, and then press the ENTER key to move the insertion point below the description prompt



Adding the Monument Name and Monument Description Prompts for the First Two Editable Regions



Adding and Centering a Table as the Third Editable Region• Click Insert on the Application bar and then click Table• Enter the following data in the Table dialog box: 1 for

Rows, 2 for Columns, 70 percent for Table width, 0 for Border thickness, 5 for Cell padding, and 5 for Cell spacing. Type Spotlight on Alaska national monuments as the Summary text

• Click the OK button to add the table to the template• Click the Align button arrow in the Property inspector, and

then click Center to center the table in the document window

• Click the left cell in the table and then drag to select both cells in the table



Adding and Centering a Table as the Third Editable Region• Click the Horz button arrow in the Property inspector and then

click Center• Click the Vert button arrow and then click Middle to apply the

specified attributes to the table cells• Click the left cell in the table and then type Add additional

columns and rows as necessary. Add images and short descriptions of image to each cell in the table. as the prompt, and then click the right cell

• Click Insert on the Application bar, point to Image Objects, and then point to Image Placeholder

• Click Image Placeholder to display the Image Placeholder dialog box

• Type add_image in the Name text box as the prompt



Adding and Centering a Table as the Third Editable Region• Press the TAB key• Type 64 for the Width• Press the TAB key. If necessary, type 32 for the Height• Click the OK button to add the placeholder to the table• Click <table> in the tag selector to select the table and

type spotlight in the Table box to name the table• Press the ENTER key• Click to the right of the table and then press the Enter key

two times to insert a blank line after the table



Adding and Centering a Table as the Third Editable Region



Adding and Centering a Table as the Fourth Editable Region• Click Insert on the Application bar and then click

Table to display the Table dialog box• Enter the following data in the Insert Table dialog

box: 1 for Rows, 2 for Columns, 50 percent for Table width, 0 for Border thickness, 5 for Cell padding, and 0 for Cell spacing. Type Web site links as the Summary text. Click the OK button

• Click the Align button arrow in the Property inspector, and then center the table

• Click the left cell and then drag to select both cells in the table



Adding and Centering a Table as the Fourth Editable Region

• Click the Horz button arrow in the Property inspector and then click Center. Click the Vert button arrow and then click Middle

• Click the left cell and then type Add additional columns as necessary for links as the prompt

• Select the table and name it links. Press the ENTER key

• Press CTRL+S to save the file. If a Dreamweaver warning box is displayed, click the OK button



Adding and Centering a Table as the Fourth Editable Region



Creating the First Editable Region

• If necessary, click the Common tab on the Insert bar

• Click the Property inspector title bar to collapse the Property Inspector

• Click to the left of the heading prompt• Click the <h2> tag in the Tag selector to select

the prompt for the title




• On the Common tab, click the Templates button arrow to open the Templates pop-up menu, and then point to Editable Region

• Click Editable Region to display the New Editable Region dialog box

• Type monument_name in the Name text box to provide a name for the new editable region

• Click the OK button to designate the selected text as an editable region






Creating the Second Editable Region

• Click to the left of the prompt, Add short description of monument, in the Document window

• Click the <p> tag in the tag selector to select the line

• Click the Templates button arrow and then click Editable Region to display the New Editable Region dialog box

• Type monument_description in the Name text box and then click the OK button to name the selected editable region



Creating the Second Editable Region



Creating the Third and Fourth Editable Regions

• Click in the left cell of the first table and then click the <table#spotlight> tag in the tag selector to select the table

• Click the Templates button arrow, and then click the Editable Region command

• Type monument_images in the Name text box, and then click the OK button to add the editable region name




• Click in the left cell of the second table, click the <table#links> tag in the tag selector, and then click the Editable Region command on the Templates pop-up menu to display the New Editable Region dialog box

• Type links in the Name text box and then click the OK button to add links as the editable region name

• If necessary, display the Standard toolbar and then click the Save button






Displaying the CSS Styles Panel

• Click the Expand Panels button to expand the panel groups, and then click the Files tab, if necessary, to display the Alaska Parks Web site

• If necessary, click Window on the Application bar and then click CSS Styles to display the panel group containing the CSS Styles tab

• If necessary, click the CSS Styles tab to display the CSS Styles panel

• If necessary, click the Current button, and then click the Show information about selected property button on the About bar

• If necessary, drag the Properties bar in the CSS Styles panel up to display the Properties section



Displaying the CSS Styles Panel



Adding a Style and Saving the Style Sheet• Click to the left of the text, Spotlight on [name of national

monument], in the monument_name editable region, and then click the <h2> tag in the tag selector to select the heading prompt

• Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box

• Click the Selector Type arrow and then point to Tag (redefines an HTML element)

• Click Tag (redefines an HTML element) to select that selector type

• Click the Selector Name text box and type h2 as the selector name, if necessary



Adding a Style and Saving the Style Sheet• Click the Rule Definition arrow, and then click (New Style

Sheet File) to specify that you want to create an external style sheet

• Click the OK button to display the Save Style Sheet File As dialog box

• If necessary, click the Save in box arrow and then click the parks folder

• Click the File name text box and then type spotlight in the File name text box

• Click the Save as type arrow and select Style Sheet Files (*.css), if necessary

• Click the Save button to display the CSS Rule Definition for h2 in spotlight.css dialog box



Adding a Style and Saving the Style Sheet• Click Type in the Category list, if necessary• Click the Font-family box arrow, and then click Arial,

Helvetica, sans-serif in the Font-family list• Click the Font-size box arrow, and then click 24 in the

Size list• Click the Font-weight box arrow, and then click bolder• Click the Color text box, type #000 for black text, and

then press the TAB key to enter the style definitions• Click the OK button and then click anywhere in the

monument_name editable region to deselect the heading prompt, which displays the new style



Adding a Style and Saving the Style Sheet



Creating a Style for the Paragraph Text

• Click to the left of the prompt, Add short description of monument, and then click the <p> tag in the tag selector to select the prompt

• Click the New CSS Rule button in the CSS Styles panel to display the New CSS Rule dialog box

• Click the Selector Type arrow and then select Tag (redefines an HTML element)

• Verify that the p tag is displayed in the Selector Name text box

• Click the Rule Definition arrow, and then click (This document only)




• Click the OK button to display the CSS Rule definition for p dialog box

• Verify that the Type category is selected• Click the Font-family box arrow and then click

Arial, Helvetica, sans-serif• Click the Font-size box arrow and then click 12




• Click the Font-weight box arrow and then click bold

• Click the Color text box and then type #000 for the color. Press the TAB key to add the CSS Rule Definition Type attributes

• Click the OK button to apply the styles to the current paragraph

• Click to the right of the paragraph and observe the new attributes

• Click the Save button on the Standard toolbar

41






Adding a Background, Border, and Text Color to a Table

• Click in the first cell of the monument_images table

• To select the table, click the <table#spotlight> tag in the tag Selector

• Click the New CSS Rule button in the CSS Styles panel to open the New CSS Rule dialog box

• Click the Selector Type arrow, and then click Tag (redefines an HTML element)

• If necessary, type table in the Selector name text box



Adding a Background, Border, and Text Color to a Table• Click the OK button to display the CSS Rule dialog box• Verify that the Type category is selected• Click the Font-family box arrow and then click Arial,

Helvetica, sans-serif• Click the Color text box, type #000, and then press the

TAB key to display the font and selected color• Click Background in the Category list to display the

Background properties• Click the Background-color text box, type #546C8E as

the color, and then press the TAB key to display the background color in the Background color box. Click the Apply button




• Click Border in the Category list to display the Border properties

• Verify that the Same for all check boxes are selected for Style, Width, and Color

• Click the Top box arrow and then click groove• Click the first Width box arrow and then click thick• Click the first text box in the Color area and then

type #000 for the border color




• Press the TAB key to define the attributes• Click the OK button and then click in the First

table• Click <table#spotlight> in the tag selector to

select the spotlight table• If necessary, drag the panels below the CSS

Styles panel to display the Summary for Selection, the About “border” section, and the Properties for “table” section

• Click the Save button on the Standard toolbar

46






Modifying the A:Link Attribute

• Collapse the panel groups to icons• Click the title bar of the Property inspector to display it,

click outside the spotlight table, and then click the CSS button in the Property inspector to display the CSS properties

• Scroll down, and then click anywhere in the links table• Click the Page Properties button to open the Page

Properties dialog box, and then click the Links (CSS) category

• Click the Link color box and then point to white (#FFF)• Click white to add the color




• Click the Rollover links color box and then click yellow (#FF0)

• Click the Visited links color box and then click red (#F00)• Click the Active links color box and then click white (#FFF)• Click the Underline style arrow and select Hide underline

on rollover• Click the OK button to add the link attribute to the

template• Click the Save button on the Standard toolbar to save

your changes






Creating the Aniakchak National Monument Spotlight Web Page

• Close the spotlight_monuments.dwt file. Expand the panel groups

• Click File on the Application bar and then click New

• Click Blank Page in the New Document dialog box, verify that HTML is selected in the Page Type column, and then click the Create button

• Click the Save button on the Standard toolbar and then save the page in the parks folder. Use aniakchak.htm as the file name



Creating the Aniakchak National Monument Spotlight Web Page



Applying a Template to the Aniakchak National Monument Web page

• Double-click the CSS Styles tab to collapse the panel

• Click the Assets panel tab in the Files group panel

• Click the Templates icon in the Assets panel• Click spotlight_monuments to select the template• Click the Apply button to apply the template• Collapse the panel groups



Applying a Template to the Aniakchak National Monument Web page



Adding the Monument Name and Monument Description to the Aniakchak National Monument Web Page

• If necessary, click anywhere on the document. Move the mouse pointer over the page and note that in the non-editable sections, such as the logo image, the pointer changes to a circle with a line through the middle

• Select the text and brackets, [name of national monument], in the monument_name editable region

• Type Aniakchak National Monument as the monument name




• Select the prompt, Add short description of monument, in the monument_description editable region

• Type the following text: Aniakchak Caldera is six miles across and 3,000 feet deep. The area originally was a 7,000 foot mountain. The caldera was created by a volcanic eruption approximately 3,500 years ago, which caused the mountain to collapse






Adding Rows to the Monument_images Table

• Click in the left cell of the monument_images table• Click Modify on the Application bar, point to Table,

and then point to Insert Rows or Columns to highlight the command

• Click Insert Rows or Columns to display the Insert Rows or Columns dialog box

• Double-click the Number of rows text box and then type 2 for the number of rows

• Click the OK button to add the two rows to the monument_images table



Adding Rows to the Monument_images Table



Adding Images to the Monument_images Table

• Click the title bar on the Property inspector to collapse it

• Expand the panel groups to display the Assets tab• Select the text in row 1, column 1 of the monument_

images table and then press the DELETE key to delete the placeholder text

• Click the Layout tab on the Insert bar, and then click the Expanded button to switch to Expanded Tables mode

• Click the Images icon in the Assets panel




• Drag the aniak01.jpg file to row 1, column 1 of the monument_images table

• Click to the right of the image• Hold down the SHIFT key and then press the

ENTER key to insert a line break• Type Smoky morning as the description• Press the TAB key to move the insertion point to

row 1, column 2 to select the image placeholder




• Press the DELETE key to delete the image placeholder and then drag the aniak02.jpg file to the cell

• Click to the right of the image• Hold down the shift key and then press the

ENTER key to insert a line break• Type Riverside as the description• Add the four other images and descriptions to the

monument_images table as indicated in Table 5–2 on the next page




• Collapse the panel groups, and then click the title bar of the Property inspector to expand it

• Click each image and add the Alt text for each image as listed in Table 5–3






Adding the Links to the Links Table and Adding Image Borders

• If necessary, scroll down to display the links table. Select the text in the left cell of the links table and then press the DELETE key to delete all of the text from the cell

• Type Home as the text link in the left cell and then select the text

• In the Property inspector, click the HTML button and then click the Link text box

• Type index.htm as the link, and then press the tab key to add the link to the home page and center it in the cell

• Click anywhere in the Home link to deselect the text• Click the right cell in the links table. Type Aniakchak

National Monument as the text for the link and then select the text




• Click the Link text box in the Property inspector and then type http://www.nps.gov/ania/index.htm as the entry

• Click the Target box arrow and select _blank• Click anywhere in the links table to deselect the text Exit the

Expanded Tables mode• Scroll to the top of the page and select the Smoky morning

image• Click the Border box in the Property inspector and type 4 to

add a border• Press the TAB key to apply the border, and then click anywhere

in the monument images table to deselect the Smoky morning image




• Select each of the other images and apply a 4 pixel border, and then resize each image so it has a Width of 375 pixels and a Height of 285 pixels

• Click the Save button and then view the page in your browser

• Close the browser window




68



Adding a Link from the Index Page to the Aniakchak National Monument Page

• Expand the panel groups and then click the Files tab• Open the index.htm page• Scroll down, and then click to the right of the Alaska

National Historical Sites link in the links table, press the SPACEBAR, and then insert a vertical line

• Select the space and line you just typed, and then delete the historical_sites.htm text in the Link box if necessary, to make sure the previous link does not continue to the new one

• Insert a space after the vertical line, and then type Featured Monument as the link text




• Select the text and then drag aniakchak.htm from the Files panel to the Property inspector Link text box

• Click the Save button on the Standard toolbar, and then press the right arrow key to deselect the text

• Press the F12 key to preview the index.htm page in your browser

• Scroll down and then click the Featured Monument link to view the Aniakchak National Monument Web page




• Verify that the Aniakchak National Monument Web page links work.

• If instructed to do so, print a copy of the Aniakchak National Monument Web page and submit it to your instructor.

• If instructed to do so, upload your Web site to a remote server

• Close the browser






Closing the Web Site and Quitting Dreamweaver

• Click the Close button on the upper-right corner of the Dreamweaver title bar to close the Dreamweaver window, the document window, and the Alaska National Parks Web site

• If you have unsaved changes, click the Yes button in response to the Dreamweaver prompt



Chapter Summary

• Describe a template• Create a template• Describe different types of style sheets• Create a Cascading Style Sheet• Apply Cascading Style Sheet attributes to a

template• Create a Web page from a template


Dreamweaver CS4Concepts and Techniques

Chapter 5 Complete

Templates and Style Sheets


Date post:	25-Dec-2015
Category:	Documents
Upload:	theodore-harrison
View:	216 times
Download:	0 times

Dreamweaver CS4 Concepts and Techniques Chapter 5 Templates and Style Sheets.

Documents