Adobe Dreamweaver CS3Adobe Dreamweaver CS3

Developing a Web PageDeveloping a Web Page

Planning the Page LayoutPlanning the Page Layout

• Use White Space Use White Space • Limit media objectsLimit media objects• KISSKISS• Use a logical navigational structureUse a logical navigational structure

Home – About Us – Spa – BiosHome – About Us – Spa – Bios

• Consistent ThemeConsistent Theme• CSS and TablesCSS and Tables

• Accessibility IssuesAccessibility Issues

Adobe Dreamweaver CS3 - Illustrated

Creating the Head ContentCreating the Head Content

Web pages consistent of Web pages consistent of 2 sections2 sections::

1.1. BodyBody: contains text, graphics, and links

2.2. Head SectionHead Section: contains head content or the title page and meta tags (HTML codes that include keywords and description of the web site)

Adobe Dreamweaver CS3 - Illustrated

Creating the Head Content (Title Page)Creating the Head Content (Title Page)

Adobe Dreamweaver CS3 - Illustrated

Creating the Meta TagsCreating the Meta Tags

Adobe Dreamweaver CS3 - Illustrated

Setting Web Page PropertiesSetting Web Page Properties

• Background Color – Background Color – contrast contrast background color and textbackground color and text

• Hexadecimal Values Hexadecimal Values represent represent colors #000000, #FFFFFF, #66CCFFcolors #000000, #FFFFFF, #66CCFF• Represents the amount of red, green Represents the amount of red, green

and blue in a colorand blue in a color• Based on16: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, Based on16: 1, 2, 3, 4, 5, 6, 7, 8, 9, A,

B, C, D, E, FB, C, D, E, F

Adobe Dreamweaver CS3 - Illustrated

Setting Web Page PropertiesSetting Web Page Properties

Adobe Dreamweaver CS3 - Illustrated

Creating and Formatting TextCreating and Formatting Text

• Click Click Edit,Edit, click click PreferencesPreferences, click , click the the GeneralGeneral category if necessary; category if necessary; under editing options, under editing options, uncheckuncheck the the option option Use CSS instead of HTML Use CSS instead of HTML tagstags, then click , then click OKOK

• Make sure to do the step above or Make sure to do the step above or the size figures for the fonts will the size figures for the fonts will not show up properly.not show up properly.

Adobe Dreamweaver CS3 - Illustrated

Creating and Formatting TextCreating and Formatting Text

Adobe Dreamweaver CS3 - Illustrated

Adding Links to Web PagesAdding Links to Web Pages

• You will be creating You will be creating hyperlinkshyperlinks from from the index page to the various web the index page to the various web pages. You will link to the web pages pages. You will link to the web pages located in your root folder located in your root folder NOT the NOT the student data filesstudent data files..

• You will also be creating an You will also be creating an email email hyperlink.hyperlink.

Adobe Dreamweaver CS3 - Illustrated

Adding Links to Web PagesAdding Links to Web Pages

Adobe Dreamweaver CS3 - Illustrated

Adding Links to Web PagesAdding Links to Web Pages

Adobe Dreamweaver CS3 - Illustrated

Using the History PanelUsing the History Panel

• The The history panelhistory panel shows the steps shows the steps that you have performed while editing that you have performed while editing and formatting a particular document and formatting a particular document in Dreamweaver.in Dreamweaver.

• In Unit C, they will reference a In Unit C, they will reference a “horizontal rule” “horizontal rule” which is a line that which is a line that is horizontal.is horizontal.

Adobe Dreamweaver CS3 - Illustrated

Using the History PanelUsing the History Panel

Adobe Dreamweaver CS3 - Illustrated

Viewing HTML CodeViewing HTML Code

• Click Click WindowWindow on the menu bar, click on the menu bar, click ReferenceReference, choose the , choose the O’REILLY O’REILLY HTML ReferenceHTML Reference in the Book list if in the Book list if necessary, click the necessary, click the Tag list arrowTag list arrow, , then scroll to and click then scroll to and click HRHR in the Tag in the Tag text boxtext box

• <hr> </hr><hr> </hr>• Automatically updates the date of the Automatically updates the date of the

last time you saved your web site.last time you saved your web site.

Adobe Dreamweaver CS3 - Illustrated

Viewing HTML CodeViewing HTML Code

Adobe Dreamweaver CS3 - Illustrated

Viewing HTML CodeViewing HTML Code

Adobe Dreamweaver CS3 - Illustrated

Testing and Modifying Testing and Modifying Web PagesWeb Pages• Links will not work until you check the Links will not work until you check the

web site in the browser, Internet web site in the browser, Internet Explorer.Explorer.

• Shortcut: Shortcut: F12F12

Adobe Dreamweaver CS3 - Illustrated

Testing and Modifying Web PagesTesting and Modifying Web Pages

Adobe Dreamweaver CS3 - Illustrated