Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives The Student will: The Student will: have a basic understanding of Dreamweaver have a basic understanding of Dreamweaver have a basic understanding of the features that are common to most web authoring software programs. have a basic understanding of the features that are common to most web authoring software programs. know how to create common HTML or XHTML elements using Dreamweaver rather than writing code know how to create common HTML or XHTML elements using Dreamweaver rather than writing code

Dreamweaver We will look at a few features of Dreamweaver (and other web authoring software): We will look at a few features of Dreamweaver (and other web authoring software): Different Views Different Views Adding Text Adding Text Creating Links Creating Links Adding Images Adding Images

Dreamweaver Views Like most Web Authoring Software Dreamweaver provides different views of the web page: Like most Web Authoring Software Dreamweaver provides different views of the web page: Design view - This is typically the default view, which is a blank screen on which you type, paste, or insert content. This is very similar to a word processor screen. Design view - This is typically the default view, which is a blank screen on which you type, paste, or insert content. This is very similar to a word processor screen. Code view - Allows you to view and work directly with the HTML code. Code view - Allows you to view and work directly with the HTML code. Split - Both of the above views are displayed simultaneously in separate windows. Split - Both of the above views are displayed simultaneously in separate windows.

Creating Headings and Subheadings In Design View, Dreamweaver is very similar to word processing software. You use the format menu to set fonts, styles, and even heading levels. In Design View, Dreamweaver is very similar to word processing software. You use the format menu to set fonts, styles, and even heading levels. Default is a paragraph Default is a paragraph

Inserting Links Add links to the web page using Insert | Hyperlink Add links to the web page using Insert | Hyperlink Two ways to insert a link: Two ways to insert a link: 1. Select text first and then Insert | Hyperlink 2. Insert | Hyperlink and then enter the text

Inserting Links Each item on a page has properties. You can add links in the properties panel. Each item on a page has properties. You can add links in the properties panel. This is the properties tab for an image: This is the properties tab for an image: Add a link here

Inserting Links If you want the link to open the page in a new window find Target set it to _blank If you want the link to open the page in a new window find Target set it to _blank

Adding Images You add an image to a document by selecting Insert|Image You add an image to a document by selecting Insert|Image A dialog box will appear, prompting you for the location of the image. A dialog box will appear, prompting you for the location of the image. After you have inserted the image into your webpage, you can edit its attributes in a Properties panel. After you have inserted the image into your webpage, you can edit its attributes in a Properties panel. For example, you can change the image's height and width, put a border around it, make it into a link, and add alternate text for users who can't see the image. For example, you can change the image's height and width, put a border around it, make it into a link, and add alternate text for users who can't see the image.

Summary Dreamweaver is a web authoring program Dreamweaver is a web authoring program In Design view Dreamweaver works much the same a word processing program In Design view Dreamweaver works much the same a word processing program Dreamweaver will generate both HMTL and CSS code Dreamweaver will generate both HMTL and CSS code

Rest of Today Download the instructions for Homework 7-1 Download the instructions for Homework 7-1 Complete the assignment and show me the result. Complete the assignment and show me the result.