CIS 205—Web Design & Development

DreamweaverChapter 2

Chapter 2: Developing a Web Page

• Introduction– Developing a Web page requires several steps• Head content—information used by search engines• Colors—for background and text• Content—text and graphics• Format—fonts and page layout• Links—to other pages in your Web site or other sites• Testing—ensure that all page elements work as intended

Chapter 2: Developing a Web Page

• Understanding Page Layout– Use white space effectively• Too much content on a page can be distracting• ‘White space’ is an area with no text or graphics

– Limit multimedia elements• Too many images, videos, sounds take a long time to load

– Keep it simple• Simplicity that works well is better than complexity w/ errors

– Use an intuitive navigation structure• Users should always know where they are in a Web site

– Apply a consistent theme• Be consistent so your site has a unified look and feel

Lesson 1: Create Head Content

• Creating the Head Content– A Web page has two distinct sections• Head content

– Page title (appears in the browser title bar)– Meta tags (HTML elements that contain information about the page)

• Body– Page content (text, images) that appears to the user in the browser

• Setting Web Page Properties– Background color– Should be light w/ dark text, or dark w/ light text (white is

good)

– Default font– Default link colors (unvisited links and visited links)

Lesson 1: Create Head Content (2)• Edit a page title

1. Start Dreamweaver, click the Site list arrow in the Files panel, click The Striped Umbrella (if necessary)

2. Double-click index.html in the Files panel3. Click View, Head Content in the menu bar (the Meta

and Title icons appear above the page)4. Click the Title icon (the page title appears in the

Property inspector (PI), which can be modified as desired)• The page title also appears in the Document toolbar above

the page• More descriptive words in the page title can assist search

engines5. Save the page if changes have been made

Lesson 1: Create Head Content (3)• Enter keywords

1. Click the Common tab on the Insert bar (below the menu bar)

2. Click the Head list arrow (you’ll have to search for this one) and click Keywords

3. In the dialog box, type beach resort, spa, Ft. Eugene, Florida, Gulf of Mexico, fishing, dolphin cruises • The Keywords icon appears in the Head content section • Clicking the Keywords icon causes the keywords to appear

in the PI• Keywords are important in assisting search engines to find

your web pages• List the most important keywords first

Lesson 1: Create Head Content (4)• Enter a description

1. Click the Head list arrow on the Insert bar and click Description

2. In the dialog box, type The Striped Umbrella is a full-service resort and spa just steps from the Gulf of Mexico in Ft. Eugene, Florida

3. Click OK4. Click the Code button in the Document bar • The title, keywords, and description appear in meta tags in

the HTML code

5. Click the Design button to return to Design view6. Click View on the menu bar, then click Head Content

Lesson 1: Create Head Content (5)• Set the page background color

1. In the menu bar, click Modify, Page Properties2. Click the Background color box and then click the

square in the lower right-hand corner (white)3. Click Apply, then click OK• Clicking Apply lets you see the changes before clicking OK

Lesson 2: Create, Import, and Format Text

• Creating and Importing Text– You can create text on a Web page or import text from

another source, such as a Word document– The fonts you choose for a Web page may not display

correctly on the user’s computer if those fonts are not supported on the user’s computer

• Formatting Text Using the Property Inspector– Text on a Web page should be very easy to read– Format text by selecting it and then using the PI to

change the font type, size, color, etc.

Lesson 2: Create, Import, and Format Text (2)

• Changing Fonts– A font combination is a set of three fonts– If the first font listed is not available on the user’s

computer, the second font will be used, and so on• Example: Arial, Helvetica, sans serif

• Changing Font Sizes– In the PI, you can select a font size from 1 (smallest) to

7 (largest)– You can also select a size relative to the default base

font of 3 (+1 being one size larger, -2 being two sizes smaller, etc.)

Lesson 2: Create, Import, and Format Text (3)

• Formatting Paragraphs– Click on a paragraph to select it– Select a format from the Format list arrow in the PI– Heading 1 is largest, Heading 6 is smallest– A Heading is bold followed by a blank line– Paragraphs can be aligned by clicking an Align button in

the PI

• Using HTML Tags Compared to Using CSS– So far, you are using HTML tags to format text– Later, you will use CSS to format Web pages (preferred)

Lesson 2: Create, Import, and Format Text (4)• Enter text

1. In index.html, position the insertion point directly at the end of the paragraph (after “You won’t want to go home.”)

2. Press [Enter] and type The Striped Umbrella• This creates a new paragraph following a blank line

3. Hold [Shift] and press [Enter], then type 25 Beachside Drive• This creates a line break without creating a new paragraph

4. Add this text using line breaks after each line:• Ft. Eugene, Florida 33775• 555.594.9458

Lesson 2: Create, Import, and Format Text (5)• Format Text

1. Select the entire address and phone number just entered

2. Click the Italic button in the PI3. With the text still selected, click the Size list arrow

and click 24. Save you work and close the document

Lesson 2: Create, Import, and Format Text (6)• Save an image file in the assets folder

1. Open dw2_1.html from your Data Files and save it as spa.html in the striped_umbrella folder, overwriting the existing file.

2. Click the Spa image broken link placeholder3. Click the Browse for File icon next to the Src textbox

in the PI, navigate to the chapter_2 assets folder in your Data Files

4. Click the_spa.jpg, click OK, then click on the page• A copy of the_spa.jpg is now in the assets folder in the Files

panel

Lesson 2: Create, Import, and Format Text (7)• Import text

1. Click Edit on the menu bar, click Preferences, then click General in the Category list

2. Verify that the Use CSS instead of HTML tags check box is NOT selected, click OK

3. Click to the right of the spa graphic on the spa.html page and press [Enter]

4. On the menu bar, click File, point to Import, click Word Document

5. Navigate to the chapter_2 folder in your Data Files and double-click spa.doc

6. Click Commands on the menu bar, click Clean Up Word HTML (make sure all check boxes are checked)

7. Click OK, then click OK again

Lesson 2: Create, Import, and Format Text (8)• Set text properties

1. Select all the text imported from spa.doc2. Click the Font list arrow in the PI and click Arial,

Helvetica, sans serif3. Click the Size list arrow in the PI and click 34. Click the Align Center button in the PI, then click

anywhere else on the page5. Click on the text Spa Services, click the Format list

arrow in the PI, click Heading 4• Click the Code button to view the HTML, then click Design

6. Select the heading Spa Services, click the Text Color button in the PI, then click dark blue (#000066)

7. Click File on the menu bar, click Save, and close

Lesson 3: Add Links to Web Pages

• Adding Links to a Web Page– Hyperlinks (links) allow the user to download (display)

pages in the current Web site or other Web sites– Links are created by selecting text or an image on a

page and setting a path to the desired page– A broken link results from an error in setting the path– A page should also contain a point of contact for users

to contact the company or web site administrator– A mailto: link is a common point of contact

• Using Navigation Bars– A navigation bar is a set of links to the main pages of a

Web site (usually at the top or side of the main pages)– The navigation bar can be text or images

Lesson 3: Add Links to Web Pages (2)• Create a navigation bar

1. Open the index.html page and click to the left of the text About Us – Spa – Café

2. Type Home – before this text and – Activities following in order to create a navigation bar

• Format a navigation bar1. Select the navigation bar for index.html2. Click the Format list arrow and click Heading 4

Lesson 3: Add Links to Web Pages (3)• Add links to Web pages

1. Double-click Home in the navigation bar2. Click the Browse for File icon next to the Link text

box in the PI and navigate to the striped_umbrella root folder• Verify that the Relative to: list is set at Document

3. Click index.html in file list of the dialog box, click OK4. Repeat Steps 1-3 above to create links for the other

words in the navigation bar corresponding to the appropriate files in striped_umbrella

Lesson 3: Add Links to Web Pages (4)• Create an email link

1. Place the insertion point after the phone number in index.html and insert a line break (press [Enter])

2. In the Common tab section of the Insert bar, click the Email Link button

3. In the Text text box type Club Manager and in the E-Mail text box type manager@stripedumbrella.com, click OK

4. Select the email link and format it as size 2, italic, Arial, Helvetica, sans serif font

5. Save index.html

Lesson 3: Add Links to Web Pages (5)• View the linked pages in the site map

1. Click the Expand to show local and remote sites button on the Files panel• If a site map doesn’t appear, click the Site Map button list

arrow in the tool bar, click Maps and Files

2. Click View on the Files panel menu bar, point to Site Map Options, click Show Page Titles

3. Click the first Untitled Document page in the site map, click the page title, and type About Our Property, then press [Enter]

4. Repeat Step 3 for the other untitled pages using The Sand Crab Café and Activities at the Striped Umbrella

5. Click the Collapse button in the tool bar

Lesson 4: Use the History Panel and Edit Code

• Using the History Panel– The History panel allows you to undo mistakes by

displaying your edits in a chronological list• Click Window on the menu bar, click History

– Each task you perform is called a step– A slider on the left allows you to undo and redo steps

• Viewing HTML Code in the Code Inspector– The Code Inspector displays HTML code in a separate

window– JavaScript code in a Web page adds dynamic content

such as rollovers or interactive forms

Lesson 4: Use the History Panel and Edit Code (2)

• Use the History panel1. Click Window on the menu bar, click History2. Click the History panel options menu (right side of

panel title bar), click Clear History, click Yes3. Select the horizontal rule (gray line) in index.html4. In the PI, type 90 in the W text box, click the list

arrow next to the W text box, click %• Note the most recent steps in the History panel

5. Click the History panel options menu, click Close panel group

Lesson 4: Use the History Panel and Edit Code (3)

• Use the Code Inspector1. Select the horizontal rule (gray line) in index.html2. Click Window on the menu bar, click Code Inspector

(or press [F10])3. Click the View Options list arrow on the Code

Inspector toolbar, then click Word Wrap• In fact, you may want to have all items in View Options

checked (except perhaps Hidden Characters)

4. In the Code Inspector, select 90 and change it to 805. Click the Refresh button in the Code Inspector

Lesson 4: Use the History Panel and Edit Code (4)

• Use the Reference panel1. Select the horizontal rule (gray line) in index.html2. Click the Reference button in the Code Inspector

toolbar3. The Reference panel opens with information about

the horizontal rule4. Right-click the Results panel group title bar and click

Close panel group5. Close the Code Inspector

Lesson 4: Use the History Panel and Edit Code (5)

• Insert a date object1. Select the text January 1, 2010 in index.html and

press [Delete]2. Click the Date button on the Insert bar (Common tab)

and click March 7, 1974 in the Date format list3. Click the Update automatically on save checkbox, OK4. Click the Split button in the document toolbar• Today’s date is displayed due to adding a date object

5. Click the Design button in the document toolbar6. Save index.html

Lesson 5: Modify and Test Web Pages

• Testing and Modifying Web Pages– Whenever you modify a Web page you should test it• Test it in a browser, check whether all graphics display

properly, proofread all text for errors, test all links

• Testing Using Different Browsers and Screen Sizes– Test Web sites in Internet Explorer and Mozilla Firefox

using the Preview/Debug in Browser button in the document toolbar

– Test different screen sizes using the Window Size menu in the document status bar

• Testing a Web Page as Rendered in a Mobile Device– Test what a page would look like in a Blackberry (for

example) using the Preview/Debug in Browser button

Lesson 5: Modify and Test Web Pages (2)

• Modify a Web page1. Click the Restore Down button (just left of the Close

button) on the index.html title bar2. Click the Window Size list arrow on the status bar

and click the 600 x 300 size• The majority of screens are 1024 x 768 or higher

3. Click the Window Size list arrow and click the 760 x 420 size

4. Click the Maximize button on the index.html title bar

Lesson 5: Modify and Test Web Pages (3)

• Test Web pages by viewing them in a browser1. Click the Preview/Debug in browser button on the

Document toolbar, then click a browser2. Check all the links in the navigation bar of index.html3. Close the browser window and all open pages