Chapter 3

Dreamweaver: Part I

The Web Warrior Guide to Web Design Technologies

Objectives

• Use the editing features of the Dreamweaver Web authoring tool

• Create hyperlinks to link pages together on the Web

• Create and control page properties such as colors and backgrounds

• Use tables and table attributes to control layout of Web pages

• Use and manipulate images on your Web pages

The Dreamweaver Workspace

Changing Views

• Design View - To view your design as it appears on the Web.

• Code View - To view your source code.

• Design and Code View - To view the source code and design at the same time.

Design and Code View

Text Properties

• Type text directly into the work area.• Change text using the text Property inspector.• Using the Property inspector you can change:

– Format

– Font

– Size

– Color

– Style

– Alignment

– Lists

Property Inspector for Text

Changing Text Color

Hyperlinks

• Hyperlinks let you link to other Web pages.• Web addresses are determined by Universal

Resource Locators (URLs).• Create hyperlinks by entering URLs into the Link

text box on the Property inspector.• Links can be absolute or relative.• To create a link to an email address, enter

“mailto:username@place.edu”

Adding a Hyperlink

Absolute Hyperlinks

• Absolute Hyperlinks list the entire URL. For example:– http://www.macromedia.com

– http://www.microsoft.com

• Add these URLs into the Link text box on the Property inspector.

Relative Hyperlinks

• Relative hyperlinks list a partial URL, because they are relative to other pages on a Web site.

• Example: Index.html and Home.html are in the same folder. A subfolder called WorkFolder contains the file Resume.html.– To link Index.html to Home.html,

enter Home.html into the Link boxon the Property inspector.

– To link Index.html to Resume.html, enter WorkFolder/Resume.html into the Link box on the Property inspector.

Index.htmlHome.html

Resume.html

WorkFolder

Page Properties

• To access, use Modify then Page Properties in the Menu bar, or press Ctrl+J.

• Setting the Page Properties lets you set title, colors, backgrounds, and default link colors for the entire Web page.

• This saves time because you do not have to set them individually for each item of text on the page.

Page Properties dialog box

Tables• Tables are very important! You cannot control

layout without using tables.

• To insert a table, use the Insert Table button on the Insert bar Common tab and enter attributes in the Insert Table dialog box. You can alter the attributes later using the Property inspector.

• A table width designated as a % will display as a % of the browser window. A table designated in pixels will be an absolute pixel size.

• Setting the border equal to 0 can hide your table.

• Tables can be nested.

Using Tables to Control Layout

Insert Table dialog box

Property inspector for a Table

Images on the Web

• Images on the Web include drawings (.gifs), photos (.jpgs), image maps, or rollovers.

• To insert an image use the Insert Image button on the Insert bar Common tab.

• The image properties can be set using the Image Property inspector. Properties include:– Link

– Width and Height

– Alternate Text (essential for blind Web users)

– Creating an Image Map

Inserted Image

Image Maps

Rollovers

Summary

• Dreamweaver is a WYSIWYG authoring tool that generates HTML and JavaScript code.

• The main panels you use to create Web pages are the Insert bar and the Property inspector.You can find other panels on the Window menu on the menu bar.

• You use the Property inspector for basic text manipulation such as changing fonts, sizes, justification, and text color. Using the Property inspector, you can also create hyperlinks to other Web pages.

Summary

• The Insert bar is used to insert various elements into a Web site. Several panels in the Insert bar can be viewed by clicking the tabs at the top of the work area.

• Using the Common panel in the Insert bar, you can insert images, rollovers, tables, and horizontal rulers.You can also create a hyperlink to an e-mail address and insert Web page elements created by other applications such as Flash, Java, and Fireworks.

Summary

• To change page attributes, use the Page Properties dialog box, which is available from the Modify menu.You can select and use color swatches for the page attributes, default text, links, and active and visiting links.

• Dreamweaver provides easy access to Code and Design views of the Web document as well as split-screen shared Code and Design views.