Presentation on theme: "Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies."— Presentation transcript:
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
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:firstname.lastname@example.org”
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 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
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.
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.
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
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.