CIS 205—Web Design &
Development
Dreamweaver
Chapter 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 panel
3. 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
engines
5. 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 fullservice resort and spa just steps from the Gulf of
Mexico in Ft. Eugene, Florida
3. Click OK
4. 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 view
6. 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 Properties
2. 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 PI
3. With the text still selected, click the Size list arrow
and click 2
4. 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 placeholder
3. 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.doc
2. Click the Font list arrow in the PI and click Arial,
Helvetica, sans serif
3. Click the Size list arrow in the PI and click 3
4. Click the Align Center button in the PI, then click
anywhere else on the page
5. 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 bar
1. Select the navigation bar for index.html
2. 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 bar
2. 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 OK
4. 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 EMail 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 panel
1. Click Window on the menu bar, click History
2. Click the History panel options menu (right side of
panel title bar), click Clear History, click Yes
3. Select the horizontal rule (gray line) in index.html
4. 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 Inspector
1. Select the horizontal rule (gray line) in index.html
2. 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 80
5. Click the Refresh button in the Code Inspector
Lesson 4: Use the History Panel and Edit Code (4)
• Use the Reference panel
1. Select the horizontal rule (gray line) in index.html
2. Click the Reference button in the Code Inspector
toolbar
3. The Reference panel opens with information about
the horizontal rule
4. Right-click the Results panel group title bar and click
Close panel group
5. Close the Code Inspector
Lesson 4: Use the History Panel and Edit Code (5)
• Insert a date object
1. 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 list
3. Click the Update automatically on save checkbox, OK
4. 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 toolbar
6. 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 page
1. Click the Restore Down button (just left of the Close
button) on the index.html title bar
2. 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 browser
1. Click the Preview/Debug in browser button on the
Document toolbar, then click a browser
2. Check all the links in the navigation bar of index.html
3. Close the browser window and all open pages