Basic Web Design using Dreamweaver

By Joseph M. CharninSeptember 10, 2007

Table of ContentsTable of Contents.............................................................................................................................2Introduction......................................................................................................................................3

What is Dreamweaver?................................................................................................................3Getting Started.............................................................................................................................3What will be covered?.................................................................................................................4

Creating Dreamweaver files............................................................................................................4Page properties.................................................................................................................................6

What are page properties?...........................................................................................................6Appearance..................................................................................................................................6Links............................................................................................................................................7Headings......................................................................................................................................7Title/Encoding.............................................................................................................................7

Image placement..............................................................................................................................7Inserting an Image.......................................................................................................................7Placing an Image and Adding a Border.......................................................................................8

Text placement.................................................................................................................................8Formatting Text...........................................................................................................................8Creating a Link............................................................................................................................8

Basic use of tables...........................................................................................................................8Site preview.....................................................................................................................................8

IntroductionWhat is Dreamweaver?

Adobe’s Dreamweaver (previously Macromedia’s Dreamweaver) is a

WYSIWYG1 web design tool for users of all skill levels. Dreamweaver is an all in one

web design tool capable of creating websites and uploading them via FTP2. Dreamweaver

does not assist in the creation of graphics. However, since Adobe purchased Macromedia

all the new versions such as those found in the CS33 suite integrate with Photoshop. This

makes it easier to manage images while working in Dreamweaver, Fireworks, and

illustrator.

Getting StartedWeb design is made simple by this program and allows anyone to create a site

with minimal effort. This reference guide will cover the basics of Dreamweaver but will

not cover the basics of html, style sheets, or template creation.

This reference will give the class of ENC4294 the basic understanding of

Dreamweaver. It is assumed that everyone using this guide already has the basic

understandings of fonts and layout principal such as the use of colors. This guide will

cover creating Dreamweaver files, page properties, image placement, text placement,

basic use of tables, site validation and site preview. The image and Lipsum Ipsum text

referenced in this manual is available under the main discussion for our class in Webct.

Dreamweaver can be purchased via Adobe’s web site for about $398.99 or at the UCF bookstore for

$199.95 with the proof of current student enrollment.

1 What you see is what you get2 File Transfer Protocol is used to connect a users computer to a server in order to upload a website to the web3 CS3 is a bundle of Adobe of products, which includes Dreamweaver, Photoshop, Flash, illustrator, and other software available for designing websites.

What will be covered?

1. Creating Dreamweaver files2. Page properties3. Image placement4. Text placement5. Basic use of tables6. Site validation7. Site preview

Creating Dreamweaver files1. Create a folder named ‘web site’ by right clicking on the Desktop and selecting ‘Create

New Folder’. This is the location you will save your .html files to.

2. Open the ‘web site’ folder and create another folder entitled ‘images’. This is the location you will save images to.

3. Go to the main discussion for our class and download the logo image provided in the Dreamweaver files post.

4. Save this image to the recently created ‘image’ folder.5. Open Dreamweaver by clicking on the Dreamweaver 2004 MX link located on the

Desktop.6. Once Dreamweaver loads you will see the menu below.

7. Click on ‘HTML’ listed under Create New.8. Once the blank .html document loads click on ‘Site’ on the top menu bar and then select

‘New Site…’.

9. Select the ‘Advanced’ button from the top of the new window.10. On the new screen you will need to edit the following fields.

Site Name: This should either be the domain name, company name, or something short and descriptive. For this project please use ENC4294.

Local root folder: Change this to the recently created folder ‘web site’ located on your desktop. To do so click on the folder icon next to the text field to browse to your ‘web site’ folder.

Default images folder: Change this to the recently created folder ‘images’ located on your desktop within ‘web site’. To do so click on the folder icon next to the text field to browse to your ‘images’ folder.

The other options presented are not required when creating files for CD publication.

11. After changing the required fields click the ‘ok’ button located at the bottom of the window.

12. Finally click on ‘File’ from the top menu bar and select ‘Save As’.13. Change the file ‘untitled1.html’ to ‘index.html’ and save the file.

Dreamweaver is now setup and ready to be used.

Page propertiesWhat are page properties?

Page properties control the appearance for all of the fonts, text colors, links, headings, and the background. The title field is also found in this menu and should be changed because it will appear at the top of every browser that views the page. Below is an example of the basic settings, which will affect all text that is not a link. Page properties are being used in place of complicated style sheets commonly known as .css. This section will not cover the ‘Tracing Image’ tab because it is used for more complicated designs and will not affect your web site. The options for background images will also be skipped; these fields should be left blank.

Appearance1. Click on ‘Modify’ and select ‘Page Properties’ from the top menu bar.2. By default page properties opens to the ‘Appearance’ tab. Change the font type to

something suitable such as “Arial, Helvetica, sans serif”.3. Set ‘Size’ to one that will appear the most on your site, generally 12 is standard and

should be used for this site.

This setting only affects texts that are not listed as a header or a link. For more information on headers and links please refer to their section below.

4. The text color can be set to any color, but for this exercise please choose black.

5. The background color can be set to any color, but for this exercise please choose white.

6. Finally the margins will control the distance between the site content and the frames of any Internet browser. Set these all to zero for this exercise.

Fonts, text color, and size can be altered while working within any .html file just as they could be in a Microsoft Word document. These settings are used to help create an organized appearance in the final product.

Links1.

Headings1.

Title/Encoding1.

Image placementThis section will cover the basics of inserting an image, positioning it, and applying a

border to it. For this exercise we will use the ENC4294 logo located within your image folder.

Inserting an Image1. Click on ‘Insert’ and then select ‘Image’.2. Select logo.jpg from your ‘images’ folder.3. Use the ‘Alternate text’ field to label pictures. This is an optional step and can only

be seen if the image doesn’t load or if the image is large and takes a while to load. In either case once done leaving it blank or filling it in click on ‘ok’.

Placing an Image and Adding a BorderBy default the logo will be aligned to the top left of the page.

1. Click on the logo so that the properties of the image are displayed.2. By default the box below will be displayed on your screen. To control the position of

the image choose a position from the ‘Align’ field. For now pick any placement.

3. The ‘Border’ field will create a black border around the image. The border is based on pixels and is optional.

These Steps can be performed on any image to achieve the same results.

Text placementThis section will cover the basics of creating a link, formatting text and applying new

attributes besides those set in the page properties. For this exercise you will need to copy the Lipsum Ipsum text that was provided and paste it into your .html document below the logo image. The shortcuts that are used in Microsoft Word will also work within Dreamweaver.

Formatting TextText formatting in Dreamweaver is similar to that of Microsoft’s Word. The

formatting for text can be found within the property box and listed under ‘Text’ on the main menu. For this site we will only cover the basic options.

1. Highlight the two paragraphs so that all of the text is highlighted.2. The property box will now show the basic formatting option for the text. Select

‘Align Left’.3. Type “Welcome to ENC4292” Below the image.4. Highlight “Welcome to ENC4292” and choose ‘Heading 1’ from the ‘Format’ field.

Your page should now look similar to the one below.

Creating a LinkImages and words can be turned into links by highlighting them and placing a

URL into the ‘Link’ field located in the property box.

1. Highlight the words “Lorem Ipsum” at the bottom of the page.

2. Insert this link into the ‘Link’ field without the quotations “http://www.lipsum.com/”.

3. Choose ‘blank’ from the ‘Target’ field. This will cause the link to open in a new window when it is clicked on.

Basic use of tablesTables are used to organize text and pictures. Tables can have borders or be invisible.

The space inside of a table is called cells and these are organized into rows and columns. The following set of instructions will give you a basic understanding of how tables work.

Inserting a Table1. Place the cursor at the top of the page and press enter so that the logo and text are

moved down.2. Click on ‘Insert’ and select ‘Table’.

3. The new window controls the general formatting of table that is about to be inserted. Rows stack up on each other and columns are next to each other. For this exercise Choose three rows by 1 column with a border that is set to two.

4. Make sure the table width is set to “100” percent and not to “800” pixels.5. Click ‘ok’.

Formatting Tables 1. Highlight and drag the logo into the first black box.2. Highlight and move the text into the second box3. Type your name in the bottom box so that your page looks similar to this one.

<Image>

4. Click on any of the black lines that create the new table, this will display the tables properties within the properties box.

5. You can now align the table as you would an image or paragraph. Please center the new table.

6. The Cellpad and Cellspace control the spacing between the context within the tables and the spacing between the cells. The spacing is based on pixels and can help to create white space. For this project they can all be left at 0.

7. You can now use the other features listed under the properties to change border colors and the background colors of the table.

If a single cell is highlighted only that cell and it’s content will be affected.

8. Once you have formatted the table to your liking go to ‘File’ and ‘Save’.

Site previewYou can now preview your website.1. Minimize Dreamweaver and browse to your ‘web site’ folder on the desktop.2. Right mouse click the index.html file and choose to open it with ‘Internet Explorer’.

Your site should look similar to this depending upon how you formatted your table.

<Final Image>