Week+5

In this lesson you will be introduced to Dreamweaver CS3 by building a sample web page and by learning how to do the following: save the document modify the page title change the text headings insert text from an external document add foreground and background images link to other pages in your site select and modify CSS styles preview your page in a browser ||
 * create a new starter page

You will be using the Lessons/Lesson01 file [|CIB_Ch1.pdf]. As you work on this lesson you will overwrite the start file. If you need to start again or restore the start files, you will need to copy them again from the CD. Save these files to a main folder called **Lessons** in a sub folder called **Lesson01**: [|index_final.htm] [|information.htm] [|vacation.rtf]; and another subfolder called **Images**: [|full_beach.jpg] [|cloud_header.jpg] [|beach_birds_view.jpg]

Selecting a CSS starting point
Adobe Dreamweaver provides different starting point files, all with different layouts. In this lesson you'll create the starting point that you will be modifying throughout the lesson. > > Dreamweaver does allow you to create a wide range of page types; HTML is the type commonly used for building standard Web pages. Your new page will appear in the document window. If necessary, click Design to switch to Design view rather than Code or Split view.
 * 1) Start Adobe Dreamweaver CS3
 * 2) Choose File > New.
 * 3) In the New Document dialog box, select the blank page category, if necessary, from the first column.
 * 4) In the page type column, select HTML.
 * 1) In the Layout column, select two column fixed, left sidebar, header and footer, and the 12th sample in the list. The preview in this layout uses a padlock symbol to indicate that the width is set; other layouts allow for the width to expand or contract with the browser window.
 * 2) Leave all other options at their default setting and click Create. See Picture Above.

Saving Your Page
Once you've created your page it's a good idea to save it right away. > In the File name field, enter ** index.html **. Click Save.
 * 1) Choose File > Save. Alternatively, you can press Ctrl+S (Windows)
 * 2) When the Save As dialog box appears, navigate to the Lesson01 folder and open it.

Modifying the page title
The page title on a web page is displayed in the browser's title bar. Page titles are one of the key elements used by search engines like Google to index websites. It's important to always change Dreamweaver's default page title of //Untitled Document// to a pertinent phrase. >
 * 1) In the Title field of the Document Toolbar, select the placeholder text, Untitled Document, and press delete.
 * 2) Enter **Vacation Palace** and press Enter (Windows).

Changing headings
Placegolder headings are easily modified in Dreamweaver: by default, Dreamweaver is in text editing mode. >
 * 1) Double-click the placeholder text Header and enter the following phrase: **your vacation wonderland awaits...**. Dreamweaver provides a number of ways to select text that parallel word processing software, like double-clicking a single word.
 * 2) Place your cursor in front of the placeholder text Main Content and drag it across the phrase. With the text selected, enter the following phrase: **Where your're royalty.** Use the click and drag method to select any range of text in Dreamweaver.
 * 1) Choose File>Save

Inserting Text
Paragraph text is just as easy to update as heading text. In addition to manually entering text, Dreamweaver provides a robust engine for pasting text copied from other sources, like Microsoft Office products, while retaining as much of the formatting as desired. >
 * 1) Place your cursor in front of placeholder text H2 level heading and drag it to the end of the following paragraph so that both the heading and paragraph are selected. Press delete (Windows) to remove the selection.
 * 2) Navigate your way to your Lessons folder and open Lesson01>vacation.rtf.
 * 3) When the file opens, select all the text and press Ctrl+C (Windows) to copy it to the clipboard.
 * 4) In Dreamweaver triple click the placeholder paragraph below the header, **Where you're royalty**, and press Control+V (Windows) to past the text from the clipboard.

Adding New Images
Inserting images and graphics in Dreamweaver is very straightforward. Once on the page image properties, like alighnment, can be adjusted through the Property inspector. > Place your cursor at the start of the second sentence in the main content paragraph that starts with the phrase "Stroll our..." and click images in the Insert bar.
 * 1) Select all the content in the sidebar, including the placeholder header Sidebar1 Content and the two subsequent paragraphs. Press Delete (Windows) to remove the placeholder text.
 * 2) In the Tag Selector, located at the bottom of the Document window, select and press delete to remove the remaining HTML tag.
 * 3) From the Common category of the Insert bar, click the Images menu button and choose Image from the list.
 * 4) In the Select Image Source dialog box, navigate to lesson01>images>beach_birds_view.jpg. Click OK to confirm your choice.
 * 1) In the Select Image Source dialog box, select full_beach.jpg and click OK.
 * 2) If the Property inspector is not visible, choose Window>Properties.
 * 3) With the newly-inserted image selected, choose Right from the Align option list in the Property inspector. Text flows around images alighned to the left or right.
 * 4) Choose File>Save

Linking to other pages
Paragraph the formatting as desired

Selecting and modifying CSS styles
Paragraph the formatting as desired

subhead
more text

subhead
more text

subhead
more text

subhead
more text

Previewing your page in a browser
Paragraph the formatting as desired