Presentation is loading. Please wait.

Presentation is loading. Please wait.

Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.

Similar presentations

Presentation on theme: "Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies."— Presentation transcript:

1 Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies

2 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

3 The Dreamweaver Workspace

4 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.

5 Design and Code View

6 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

7 Property Inspector for Text

8 Changing Text Color

9 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 “”

10 Adding a Hyperlink

11 Absolute Hyperlinks Absolute Hyperlinks list the entire URL. For example: – – Add these URLs into the Link text box on the Property inspector.

12 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 box on the Property inspector. –To link Index.html to Resume.html, enter WorkFolder/Resume.html into the Link box on the Property inspector. Index.html Home.html Resume.html WorkFolder

13 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.

14 Page Properties dialog box

15 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.

16 Using Tables to Control Layout

17 Insert Table dialog box

18 Property inspector for a Table

19 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

20 Inserted Image

21 Image Maps

22 Rollovers

23 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.

24 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.

25 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.

Download ppt "Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies."

Similar presentations

Ads by Google