Creating a Simple Web Page in Macromedia Dreamweaver MX 2004

This tutorial was written for a two hour workshop that I will be conducting at the WBITE Conference in Reno Nevada. The tutorial is brief and designed to give the participants an overview of Dreamweaver MX 2004. Participants were also given the book Macromedia Studio MX 2004 Training from the Source as a reference. The book was compliments of Carolyn Anderson at Prentice Hall/DDC Publishing. If you do not have the Macromedia Studio, you can download a free 30 day trial version at Macromedia's web site. Teachers are eligible for great pricing on Macromdia Studio 2004 at Academic Superstore.
Before we begin, let's take a look at the finished product. You can see another possibility of this tutorial here.
Launch Dreamweaver - Start > All Programs > Macromedia > Macromedia Dreamweaver MX 2004

Defining a Web Site

The first step in creating a web site in Dreamweaver is to Define a site. I have detailed information on defining Dreamweaver web sites in my tutorial Defining Sites and File Management in Dreamweaver MX 2004.
Click Site > Manage Sites > New > Site.

Click the Advanced tab and type Simple Dreamweaver in the Site name box.
Click the Browse button next to the Local root folder. Navigate to My Documents. Inside My Documents you should have a folder called My Webs, select the My Webs folder. Inside the My Webs folder, use the Create New Folder icon to create a folder called simpledrm. Select the simpledrm folder and click Select.
Click the Browse button next to Default images folder, navigate to the simpledrm folder and create a new folder called images and select it.
Click OK and click Done.
This process tells Dreamweaver where you will be storing all of your site content. Dreamweaver will then keep track of your content and update files as needed. It will fix broken links when you move or rename a file and it will know which files need to be uploaded when you make changes to your web site. This is a very important step in the web development process with Dreamweaver.
Read More...

Creating a New Document

From the menu, select File > New. Use the settings below to create a basic, XHTML compliant web page.

Click Create after adjusting the settings in the New Document window.
XHTML is the current standard defined by the W3C for web sites. If you're new to developing sites you can learn more about XHTML in the book Web Standards Solutions by Dan Cederholm.
A blank page will appear. Select File > Save. By default, the simpledrm folder should be selected. Type index.html in the File name box and click Save. When you save the main page of your web site you will usually use the file name index.html, index.htm, or default.htm. You will need to check with your web host to see which file name they require.

Giving the Document a Title

The title is used by search engines to help to index your web site. It is also used when someone bookmarks your web site in their favorites. It's important to give your page a meaningful title. The title can be changed in the Document Toolbar which is on by default, but if it is turned off you can access it from View > Toolbars > Document.

Highlight the words Untitled Document and type your page title. For example, this page's title is Simple Dreamweaver MX 2004 Tutorial @ Tinkertech.net.

Changing the Preferences

Before you work with Dreamweaver, you should be sure that the software is set to work with CSS (Cascading Style Sheets). Click Edit > Preferences and click the General Category. The Preferences allow you to make adjustments to the way that Dreamweaver behaves.

There are too many preference settings for me to review in this short tutorial. Take some time to look over the program preferences and use the Dreamweaver Help System (F1) for more information on the options. The Help Index (Preferences) has information on all of the individual category preferences.
In the General Category preferences make sure that the Use CSS instead of HTML tags is checked and click OK. We will explore CSS in greater detail later in the tutorial.

Changing the Page Properties

The Page Properties is used to change fonts, background colors and images, margins, and other page settings.
Select Modify > Page Properties. The Appearance Category is used to change the "default" font for the page, the font size, the text color, background color, background image, and page margins.

Here you can try different settings or use the settings that I used above. I tend to use font keywords (small x-small, xx-small, etc.) instead of pixels. Using keywords allows the end user to resize the text on the page to suit their visual preferences.
Click the Links category Here you can change the link colors (link, visited, hover, and active) and change the link style. You can either use the settings below or try your own.

Click the Headings category
Heading Styles are applied to document headings. There are six heading levels, 1-6, and they work the same as Microsoft Word. Heading 1 applies a large font and bold to the text. Heading 2 is slightly smaller and so on. In the Headings Properties you can change the default font sizes and colors.
Title/Encoding allows you to change the default character encoding and page title. Tracing Images are used to position graphics and text on a page and are beyond the scope of this tutorial. ;)
Click OK to apply your changes.

Adding Content to the Page

We will be using this image roomwview.jpg. Right click the link and select Save Target As. Save the file into your simpledrm/images folder.
Insert the image by clicking Insert > Image. Select the roomwview.jpg file and click OK.
By default, the image will align with the left margin. Click once on the image and look at the Properties panel.

When an image is selected, the Properties panel will display editing options for the image. Select the drop down next to align and change the image alignment to Right. This will position the image against the right hand margin of the page.
It is also important to add a meaningful Alt tag. This should include some descriptive text about the image you are including on your web page. The Alt tag is used by browsers for the visually impaired. The Alt text is "read" to the person who is visiting your page. You can instruct Dreamweaver to automatically require Alt tags when you insert an image and other objects by clicking Edit > Preferences > Accessibility.

Fireworks Integration

The image is too large for a logo. Dreamweaver integrates nicely with Fireworks, Macromedia's image editor. To access the Optimize in Fireworks tool, click the icon in the Properties panel. At the Find Source prompt, click Use this File.
The Optimize file dialog box will appear. Here you can change the file format and adjust the quality of the image. The lower the quality setting the smaller the file size. If you set the quality too low, your image quality may deteriorate. You should use the JPEG file format for photos and the GIF file format for images with 256 colors or less or if you want transparency (cartoon drawings, text, images with solid blocks of color).

Click the File tab

Here you can resize the image to absolute pixels or resize by percentage. Set the Scale to % 25 (the lower the number, the smaller the image). Make sure that Constrain is check (this ensures that both the height and the width resize proportionally). Notice that this Optimize window also displays the file size and the estimated download time using a 56K connection. Click Update to update the image. You will be returned to Dreamweaver.
Hey wait a minute, the image didn't resize and now it looks terrible. If you look at the Properties panel you should see a W and an H with some numeric values. Dreamweaver has retained the image height and width from the original image. Notice that the two values are bold. The bold indicates that the values are incorrect. Click the icon to reset the values to the correct size, thereby resizing the image.

Adding Text

Click the upper left corner of the page and type the following:
Room with a View (press Shift+Enter)
Spa and Hotel (press Shift+Enter)
111 Edgewater Drive (press Shift+Enter)
Clear Lake, CA 99999 (press Shift+Enter)
www.roomwithaview.com (press Enter)
Did this happen to you?

The image has moved below the text, but this is easily fixed. Drag the image to the left of the R in Room and the image should position itself directly across from the text.

Adding a Hyperlink

Highlight the text www.roomwithaview.com. The Properties panel will change depending on the object that's selected. Notice that the Properties panel now includes options for formatting text.

In the Link box, type http://www.roomwithaview.com and press Enter. You have created a link!
The formatting tools in the Properties panel should look pretty familiar to you if you use Word or another Word Processing program. Try changing some formatting options for the address text on your page. Be sure to select the text before you change the properties.

Inserting a Horizontal Rule

Click just to the right of the text www.roomwithaview.com and press Enter twice. Click Insert > HTML > Horizontal Rule.
Flash Buttons
Click just below the horizontal rule. Click Insert > Media > Flash Button

Select a style from the style list. Type Home for the Button text. Set the size to 12. Click the Browse button next to Link and select the file index.html. If you are using a different background color on your page, change the Bg color to match the page background. Type index.swf for the file name and click Apply to see your new button in the document. When you're happy with the button appearance, click OK.
Repeat the above process to create the following buttons:

Button Text	Link	Save As
Rooms	rooms.html	rooms.swf
Reservations	reservations.html	reservations.swf
Dining	dining.html	dining.swf
Contact Us	contact.html	contact.swf

Note: Since we have not created the additional files: rooms.html, reservations.html, dining.html, and contact.html, type the file names in the link box.
You can edit the button at any time by double clicking it.
After completing the buttons, save the file by pressing CTRL+S.

Previewing in a Web Browser

To preview your web page in Internet Explorer, press F12 or click File > Preview in Browser > iexplore.exe. F12 is a shortcut you should learn! Be sure to move your mouse over each of the buttons to see the Flash buttons in action.

Looking at the Code

We have done a lot of work up to this point, lets take a look at the underlying XHTML and CSS that Dreamweaver has created.

We are currently working in Design view. First click the Code button to see the code we have created. I prefer to always work in Split view. In Split view you can see both the code and the "design". Click the Split button.

Creating a Style

We're going to get a little fancy now and use CSS, Cascading Style Sheets, to control some of the layout on our page. Dreamweaver has been applying CSS automatically as we have been applying formatting to text in our document.
Before we create some CSS rules, I would like you to change the background color of the page to the same color as your text. This may not make sense right now, but you will see the results in a moment. Modify > Page Properties > Appearance > Background Color. Of course, once you make this change, your text will no longer be visible. Just stay with me for a minute.
You may have noticed that you page looked a little wide when you previewed it in Internet Explorer. We can adjust the width of the page by creating a simple CSS rule. CSS is used to control design and style on a web page. Display the CSS Styles by clicking Window > CSS Styles. This will expand the Design panel on the right-hand side of the screen. Click the New CSS Style Button. Note: The Window menu is used to toggle on and off all of Dreamweaver's panels. Most of the panel groups are located on the right-hand side of the Dreamweaver menu.

In the Name box type .content (note: you must include the dot!), select Class for the Selector Type and Define in This document only. Click OK.

Select Box from the Category and set the width to 70 %. Set the Left and Right Margin to auto and set the top padding to 4 pixels.
While we're here, let's get fancy. Click the Background category and set the background color to white. By setting the background color to white in the content area our text should be visible.

Click the Border Category and select a border style, set it to 1 pixel, and pick a color.

Click OK when yo are done.
We created the CSS style, now we have to apply it. We're going to do this in code view to ensure that the style is applied properly.
Click immediately after the opening <body> tag. Type <div class="content">. You will notice that as you type Dreamweaver anticipates what you are trying to code. Dreamweaver will also close the tag by placing a </div> tag immediately after the code we just typed. This is great, but it's in the wrong place. Highlight the </div> and press CTRL+X to cut the code. Move to the bottom of the page and position your cursor just to the left of the </body> tag. Press CTRL+V to paste the closing </div> tag.
Essentially what we have done by creating this CSS style is that we have enclosed our entire page in a box; in CSS this box is called a Div. We gave the div a class or name called .content and adjusted the width of the box/div to 70%. You can adjust this percentage to suit your needs/liking. By setting the left and right margin to auto, our box was centered on the page. We set the background color of the box to white and applied a border to it. Pretty slick, eh? You may want to spend some time trying out some of the different style options.

Exporting the CSS

The CSS has been placed inside our file. It is located within the <head> tag towards the top of the document. You can see it in split or code view.
It is really better to place CSS code into what's called an external CSS file. That way the same CSS code can be reused for multiple pages. When you have multiple pages that use the same CSS code you can update the style by modifying one file. Very cool!
Click File > Export > CSS Styles and name the file styles.css save this file inside your simpledrm folder.
Now we need to remove the CSS code from the index.html page and create a link to our styles.css file. in code view highlight the code starting at the opening tag, around line 6 of your code through the closing do not include the closing </head> tag in the selection. Confirm that you have the correct selection and press Delete.

Attaching a Style Sheet

Now we need to point to the styles.css file. In the Design panel CSS Styles, click the Attach Style Sheet icon .

Click Browse and locate the styles.css file. Click Ok and make sure that Add as is set to Link. Click Ok.
Now the CSS Styles are controlled in one file. You can edit this file at any time via the CSS Styles panel. Select the style you want to modify in the CSS Style panel (see image to the left) and click the Edit Style button .
We will be using the index.html file as a template for the rest of the pages in our site. Six months down the road, you may decide that you would like to use different colors. That's easy, open the index.html file, and edit the .content style. The rest of the pages in your site will automatically update!
In all honesty, I am not fond of the way that Dreamweaver writes CSS code. If you plan to work on a lot of web sites, I would recommend reading The CSS Anthology 101 Essential Tips, Tricks & Hacks by Rachel Andrew. It's an excellent CSS book, filled with 101 wonderful CSS tips!

Content Area

Click after the Contact Us button and press Enter. Type Content goes here and press enter. We are just going to add this placeholder for the time being. If we have time at the end of the session, we will add more content. You should now be able to add paragraphs of text and images to your content area on your own.

Footer Area

Insert another horizontal rule (Insert > HTML > Horizontal Rule) and click below the horizontal rule that was just inserted.
Type the following:
Room with a View (press Shift+Enter)
reservations@roomwithaview.com
Highlight the text reservations@roomwithaview.com and press CTRL+C to copy the text. Click in the link box in the Properties panel and type mailto: and press CTRL+V to paste the email address after the mailto:. Your link box should look like this:

Press the Enter key to confirm the link.
Creating the Remainder of the Site Pages
You've essentially created a template page that can be used for the remainder of your site. Save your file then use File > Save As to save the file with the following file names:

File Names

rooms.html

reservations.html

dining.html

contact.html

template.html

Just repeat the File > Save As process for each file name.
Once all of the pages are created, you can open each page and add the necessary content. You can use the template.html file to add pages in the future.

Using Templates

Instead of using the Save As method to create additional pages, you can create a template from your original index.html file. Templates in Dreamweaver are similar to templates in Microsoft Word and other Office applications. Templates are used to create a fixed page layout; the web designer can create a template file that users can then add content to. The web designer can control which parts of the template can be modified by the user. Templates also allow the Web Designer to quickly update content across an entire web site. For example, the company email address changes. The designer can open the original template file, update the email address, save the template file and Dreamweaver will prompt to update all of the files attached to the template. This feature combined with the use of CSS to control style can save countless hours.
By default a file based on a template can not be edited. I know this may seem strange, but it's designed this way to help to protect the layout of the page from users inadvertently modifying the site design. Web Designers then define what are called Editable Regions where they want users to be able to modify content. When users create and modify files based on templates, they can only modify areas of the file that the web designers has defined as editable. Web designers then have control over important aspects of the site such as layout, navigation menus, scripts, and source code. Also the areas that are not defined as "editable" can be modified by the original template file. When you have a larger site this can save hours of time because you can open the template file, make a change, and update the rest of the pages in the site.
To create an Editable Region, select the area that you want your users to be able to edit (change or add content). For example, select the text "Content Goes Here" on the index.html file. Select Insert > Template Objects > Editable Region. Click OK to the conversion screen and give the region a meaningful name and click OK. A blue border with the region name will appear around the selected text.

Repeat this process for any other areas of the page that you want users to be able to modify.
Click File > Save As Template and give the template a meaningful name and click Save and Yes to the Update Links prompt.
To use the template, click File > New and select the Templates tab. In the Templates For box select the Simple Dreamweaver site and then select the template you created. Make sure that the update box is checked and click Create.
You will only be able to add text to areas where you created editable regions, the rest of the page will not be able to be modified. If you want to update the rest of the page you will need to open the actual template file located in a new folder called Templates in your Dreamweaver site (Files panel). The template file will have a *.dwt extension. Double click the DWT file, make the desired changes, click File > Save. Dreamweaver will then prompt you to Update the rest of the pages based on the template, click Yes/Update.
To learn more about Dreamweaver templates click Help > Using Dreamweaver > Search > templates.

Accessing your Pages with the Files Panel

The Files panel (Window > Files) displays all of the files in your web site.
Disclaimer: It's 1:15 a.m., I'm tired and my Files panel does not look exactly like yours. I think you can get the general idea by looking at my sample image. ;) Forgive me.
You can open a file for editing by double clicking the file name in the Files panel. You can also use this panel to rename, copy, delete, and upload files. For more information on file management and uploading web sites with Dreamweaver and the Files panel, review this tutorial I wrote.
You will need to have a web host in order to upload your web pages. Your school may provide you with space if you're creating a site for your classroom. I personally use f2o.org for my hosting. They have a basic account that's $7.00 per month and their customer service is wonderful! Tell them I sent you. Again, when you're ready to upload, review this tutorial I wrote.

Getting Fancy

I created a variation of this tutorial. You can see the new version here. The new version was created with a second div called banner placed at the top of the page.
I first inserted the full sized image that I wanted to use for my banner in the page (try to use an image that is around 1024 pixels wide). Turn your rulers on by clicking View > Rulers. I selected the image and clicked the crop tool in the Properties panel. This placed a bounding box around the image. You should see four handles, one on each side of the image. Drag the handles until you get the desired image size (1024 width x 160 height, you will need to use the rulers to measure the cropped image size) and double click in the middle of the image to perform the crop. The image below illustrates the resizing handles (circled) and where you should double click (green X). Once you have completed the crop, click once on the image and make a note of the height and the width of the image in the Properties panel; you will need this information for the CSS code.

Cropping permanently alters the image, you should make a backup copy of the image, right click the image in the Files panel and select Edit > Duplicate, before you perform a crop.
Once the cropping was completed, I deleted the cropped image from the page by clicking once on the image and pressing the delete key.
Here is the CSS code that I used to display the image in the banner:
.banner {
width: 70%;
margin-right: auto;
margin-left: auto;
border: 2px solid #000000;
background-image: url("images/80infeb.jpg");
background-repeat: repeat;
background-position: center center;
background-color: #ADADAD;
padding-left: 8px;
padding-right: 8px;
margin-bottom: 3px;
height: 168px;
}
A background image was used in the above example; try to use a wide image to avoid repeating of the image in the banner like mine is in the example (I used what I had with me). The code that varies from the content div code is in bold. You will need to adjust the height of the banner class to match the height of the image that you use. Note: To prevent repeating of the image you could set the width of the banner class and the content class to the same pixel width as the image instead of using a percentage.
I placed the following div in the line above the content div in the HTML file:
<div class="banner">&nbsp;</div>

Posted in: All