Get aquainted with the top menu bar in Dreamweaver. The following functions listed under each heading will be of use to you in this tutorial.
File: New, Open, Save, Import/Word HTML, Preview in Browser
Edit: Paste, Paste HTML, Find and Replace
View: Code, Deisgn, Visual Aids
Insert: Image, Table, Email Link, Hyperlink, Named Anchor
Modify: Page Properties
Text: Check Spelling
Site: Site Files
For every new document you start from scratch, you will slect File/ New. You will select Basic Page/ HTML most of the time. The other features you might use are Basic Page / HTML Template & CSS Style Sheets / CSS.
Dreamweaver make sit easy for you to set up one design and attach multiple page to a template. For instance, the template might contain just the heading image and the main links. The only thing that might change is the body of the document. You would want to create a template and base all subsequent pages off of the template. To add more links to the main links, you only add them in the template and all the subsequent pages can be updated automatically.
Viewing Design & Code
It can be very useful to view the HTML code and the design simultaneously. You also have the option to just view the code or just view the design.
Choose View/Code and Design
The page properties can be set from Modify/Page Properties. Here you can change the title, background, font, and link colors. This is added in the body tag. This is not the same as style sheets but does control the page's main properties like style sheets.
If you are just creating a couple of linked pages, the Page Properties option
might be the easiest way for you to control the look of the page.
If you are creating a web site, learn how to work with Cascading Style Sheets in Dreamweaver™.
Properties dialog box
The properties dialog box is located at the bottom of the program and enables you to control the font face, size and color. If you don't see it, you need to click on the arrow next to Properties to expand the tab. From here you can create bold or italiacs, align text, create a link, and create bulleted and number lists. You can use the blockquote indentation to indent text.
You can import Word HTML from File/Import/Word HTML. This is appropriate if you saved a Word™ document out of Microsoft Word as an HTML file.
You can copy and paste text from a word document into Dreamweaver but it will not maintain the formatting applied in the word processing program.
See this Formatting text tutorial.
To create a link,
- Type the link text
- Highlight the text you want to make a link
- In the properties dialog box type the name of the document including the .htm suffix into the link box
- Or click on the folder and locate the document you wish to link to.
To add an image, Choose Insert/Image.
The image needs to located in the root of the site. The document does not embed the image but references it within the code.
Insert the image and select it. In the Properties dialog box, you can change the width & height. You can also link the image and change its border properties.
Setting up a Web Site
The folder where you place all your html files becomes the root of the site. Everything that you link to needs to be in the root of the site or on another server.
In Dreamweaver, before you begin creating a site, you need to Define the site.
Choose Site/ Define Site. This section will take you through a series of questions about your site. This tutorial will take you through the steps of defining your site. There is also another quick Definine Your Site tutorial.
Note: When I create web sites, I do not let Dreamweaver automatically put files on the server. We will do this manually in the next step. If you do not know the server information, choose the option to Edit locally, then upload to remote server.
Once you have defined your site, you can do the following:
- Create a site template
- Create individual pages from the template
- Save all the files in the root directory
- Link to images in the document
- Create links within the site and to other servers