Creating Web Pages with Dreamweaver

Web Pages with Dreamweaver 4 Tutorial: Tips and Tricks

1. Site Manager
2. Creating Web Pages
3. Page Layout
4. Inserting text & pictures
5. Using templates & Libraries
6. Using Server Side Includes (SSI)
7. Using Cascading Style Sheets
8. Testing

Site Manager

The Site Manager is where you'll get an overview of the entire site.

1. Create the folder in which you will store all your project files. Create an 'images' folder within and transfer all the sliced images to this folder.
2. Open Dreamweaver
3. Open the Site Manager [Window>Site Map]
4. Define a new site [Site > Define Sites>New]
5. Fill in your Project Name in the box provided for 'Site Name'.
6. Use the yellow folder icon next to the 'Local Root Folder' box to browse for the project folder you had created.
7. You should be able to see the 'images' folder in your site manager.
8. Next you will create web pages you need for the site.

Creating Web Pages

1. Create the HTML homepage [File > New File]
2. A new HTML file named untitled.htm will appear in the site manager.
3. Rename it to index or default. Keep the .htm file extension.
4. Double click the file to open it.
5. Change the HTML page title to something more appropriate like Homepage [ Modify > Page Properties >Title]
6. Similarly create all the other HTML pages you need.
7. Next step is to creating web pages layout.

Page Layout

1. The key thing to understand about designing your pages in HTML is that your layout is structured within tables and cells. Analyze your layout on paper. Superimpose tables over it using the number of rows and columns that you will need.
2. Now start creating your tables. You can use pixels or percentages to define the width and height. If you have more that 1 column make sure the widths of all the columns add up to the width of the table. [Insert > Table]
3. The Properties Inspector is extremely useful for editing the properties of any element in your page. To edit the properties of a table simply select the table and open the Properties Inspector. [Window > Properties]
4. Try and create separate tables as much as possible. This is because a table will load only once all the elements within it have loaded.
5. Explore creating the layout you designed using tables. You can give background colors, create tables within tables, specify the alignment of the content within the cell etc. So go ahead and try it out.

Inserting Text and Pictures

Once you've created the basic structure of the page using tables, rows and columns, the page is ready for content.

You can type in text just as you would in any text editing software. Many times content is provided in Word documents. If you would like to retain the formatting, you can save the Word.doc as an Html/ web Page. This will create and HTML page. You can then open this html page in Dreamweaver, clean up Word HTML [Commands > Clean up Word HTML], copy the content and paste it [Edit>Paste HTML] into your HTML page.

You can Insert images [Insert>Image]. You can also position them :

1. Click on the image.
2. Open the Properties Inspector. Select the required alignment from the 'align' drop down menu. You could also set the alignment of the cell in which the image will be placed.

Using Templates and Libraries

If all or many of the page in your web site will have the same look and feel (which is usually the case), it is advisable to use templates & libraries for easy updating.

1. Open the page that you created & save it as a template [File>Save as Template]
2. This will create a .dwt file in a Templates folder in your root directory.
3. Decide on the areas of the template that will change from page to page. e.g.. Content. If there is any existing content in this area you can delete it and make that area an editable region and give it a name e.g. 'content'. [Modify > Templates > New editable region]. If you would like an editable region to have an item e.g.. Banner ad by default but you would like to change it in certain pages as well. You can select that item and make it an editable region.
4. Libraries are bits of html

   p

   ages that can be reused in many pages. This is especially useful for reusable items like submenus. [Window > Library . Click on the small arrow on the top and select 'New Library Item, form the drop down menu. Once created, click the 'insert button to reuse it other pages.

Using Server Side Includes (SSI)

Includes are like library items. The advantage is that when you make a change to an include you don't have to update all the pages that access it. The changes will automatically get reflected in them. Therefore you do not have to upload all the pages that use the include every time you make a change, only the include itself.

To create an include:

1. Copy the part of the page that you would like to make into an include.
2. Create a new html page [File > New]
3. Go into the HTML code and delete all the default code that Dreamweaver puts in.
4. Paste the code that you had copied previously make sure all links are relative to site root. Finally save this file in an 'Includes' folder.

To insert an include into a page:

1. Rename the file extension to .shtml
2. Click where you would like to insert the include and Insert > Server Side Include.

Using Cascading Style Sheets (CSS)

Style Sheets are another extremely useful feature that will speed up you work and help you to easily update your site.

The best way to use it is by creating an external .css file and linking it to your Template.dwt. This way you can make changes to your .css file and the changes will be reflected in all the pages using it. On a live site you just need to upload the .css file and nothing else.

1. Open the template.dwt. Click Window > CSS Styles. Click on the 'New Style' icon.
2. Give your style a name e.g. .title, Define in: New Style Sheet File
3. Give your preferences and save the .css file. I usually save it in the root directory.
4. Redefining HTML tags are also extremely useful.
5. To apply the style, select the text, select the style in the CSS panel and 'Apply'

Testing

After applying the template to all the pages, inserting the content into editable regions, inserting images and applying CSS styles. You would have probably linked all the pages together in the template itself (navigation) using an include.

Once the site is complete you are ready to upload it to your server and go live. Before that however, you should test the site to in various browsers, at least Netscape and Internet Explore to make sure it is working all right. If you use Site Relative paths (as you must in includes) the Preview in browser feature will not work. You will need to test on a web server.

Other tools that Dreamweaver provides :

1. In Site Manager: Site > Check Links Sitewide
2. In Document Window: Text > Check Spelling