Creating a new page and attaching a CSS file in Dreamweaver

Dreamweaver intro tutorial on how to create a new XHTML page, attach a CSS file, add title, description, keywords to it.

To create a new file:

1. Press Ctrl+N on your keyboard
2. Select File->New
3. Click the HTML link on the start up page.
4. Or you could start with a default blank XHTML file by right-clicking on your site
   in the Files Management panel.

Select "Basic Page"  tab->HTML from the Page Type and "none" for Layout column.

Adding title, keywords and a description

By default, each new Dreamweaver page is called "Untitled Document". Unless you want to be one of millions of pages with an exact same title, (try googling "Untitled Document") you need to give your page a unique title that introduces the content of your page.

1. Replace "Untitled Document" with your title in the "Title" field of the document window.
2.  Click the "Head" icon inside the "Insert Panel" and select meta tags you want to add to the Head section of the page.

Editing the head section (meta)

Because the head section is not visible in the Design view we need to open the "Head Content" toolbar. And of course there are couple of ways to that:

• Press Ctrl + Shift + H
• Go to View->Head Content

Or click on the View Option button (1)  of the document window toolbar and select "Head Content".  Head Content icons (2) will display. When you click on one of these icons the Properties panel displays (3) options that you can edit.

Attaching a CSS file

To create a CSS file use same steps as with creating HTML page. Go to File->New, select Basic page and CSS, then click Create.

To attach it to your HTML document click the Attach Style Sheet button from the CSS panel.

Attach External Style Sheet dialog box appears.

The browse button allows you to navigate to the CSS file you want to attach. You have two ways to attach a CSS file: Link and Import.

• Link method is understood by all browsers, even the once that can't render CSS.
• Import method is only understood by more modern browser, which basically "hides" the CSS from the browsers that don't render it well.

Media field enables you to target a style sheet at specific media i.e. screen, print, projection, all etc.

Click OK after you are done with this dialog and your style sheet is attached.

And you are done!