1 / 12

Intro to Dreamweaver

Intro to Dreamweaver. Web Design Section 8 -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: have a basic understanding of Dreamweaver

adina
Télécharger la présentation

Intro to Dreamweaver

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Objectives • The Student will: • have a basic understanding of Dreamweaver • 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

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

  4. Dreamweaver Views • 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. • 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.

  5. 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. • Default is a paragraph <p>

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

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

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

  9. Adding Images • You add an image to a document by selecting Insert|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. • 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.

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

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

  12. tools.html

More Related