Create a new XHTML page and attach a CSS file in Dreamweaver Design View.
In this tutorial you will learn how to create a new XHTML page, add title, description, keywords and attach a CSS file all using Dreamweaver GUI.
To create a new file in Dreamweaver you can bring up "New Document" dialog box by:
1. Pressing Ctrl+N on your keyboard
2. Selecting File->New
3. Clicking on 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.
In this example I used the first option (Ctrl+N), made sure "Basic Page" was selected in the "Category" pane
and double-clicked on the HTML.
By default, each new Dreamweaver page is called "Untitled Document". Unless you want to be
one of millions of pages (try googling "Untitled Document") with an exact same title you need to
give your page a unique title that introduces the content of your page.
As you can see adding a title to a page is very easy. All you have to do is replace "Untitled Document" with
your title in the "Title" field of the document window.
Adding keywords and a description
To add keywords and description to your XHTML document select HTML tab in the Insert bar, or if you are
showing your Insert bar as a menu, select "HTML" from the drop-down.
Click on the Head icon to display a menu with many useful options to edit head content. These include:
Meta, Keywords, Description etc.
Each selected option displays a dialog box that you can use to add desired content.
Editing the head section (meta)
Because the head section is not visible in 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 of the document window toolbar and select "Head Content".
Head Content icons display.
When you click on one of these icons the Properties panel displays options that you can edit.
Attaching a CSS file
First we will need to create a CSS file. Using same steps as with creating HTML go to File->New,
select Basic page and CSS, then click Create.
We will attach the file using CSS panel by clicking on the Attach Style Sheet button found at the
bottom of the CSS Styles panel. The Attach External Style Sheet dialog box appears.
The browse button allows you to navigate to the CSS file you want to attach. The two "Add as"
options: 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.
As you can see creating a new XHTML file and attaching a CSS file to it using Dreamweaver is really easy.