I. Introduction to Dreamweaver MX
Dreamweaver MX is a program that allows you to quickly and easily create and manage static and dynamic websites. This documentation walks you through creating a simple web page with links and graphics. The first thing you need to do is download the files that will be referred to in this documentation.
If you do not already have Dreamweaver, a 30-day trial can be downloaded and installed from the Macromedia's website: http://www.macromedia.com/software/dreamweaver/trial/
Student Computing's Beginning Dreamweaver MX documentation can be found here: http://www.csuchico.edu/stcp/workshops/dreamweaver_i.html
II. Integrating tables
A. Creating a New Table
1. Click on the main Frame, select Insert > Table or in the Options window, click on the table icon.
2. An Insert Table box will appear. In the Rows and Columns fields, enter the value “2”.
3. Change Width to "75" and Pull-down Menu to the right of the Width field to “Percent". This will automatically adjust the table's width to be 75% of the current browser window, regardless of window size or screen resolution.
4. Enter the value "2" in the Border field. When you are done, click OK. The table should look like the one below:
B. Formatting the Table
When you have inserted the blank table, click on any cell in the table. The Properties window will now change to a Table Properties window. From here, you can make changes to your table affecting the border, background and alignment of the table and the style of text used in the table. Below is an image of what the Table Properties window looks like.
1. Table Borders
To change the color of the table border, highlight the entire table, then click on the gray box to the right of Brdr. A color palette will appear; drag your mouse over the desired color and click on it.
2. Background (bg)
To set a solid background for the table, highlight the entire table, then click on the gray box to the right of the bottom Bg. If you want to set an image as a background, highlight the entire table, then click on the yellow folder to the right of the top Bg field. A Select Image Source box will appear; locate the image you want to use as the background then click Select.
3. Table Alignment
To center the table, select Modify > Table > Select Table from the Menu Bar, then change the Align Pull-down Menu to “Center”. To center the objects in each cell, highlight the entire table, then click on the center alignment button in the upper right corner of the Table Properties window or change the Pull-down Menus of the Horz and Vert fields to “Center” and “Middle”, respectively.
4. Text Formatting Within a Table
In the first cell, type your name then highlight it and change the font, size and color of the text from the Table Properties window.
III. Frames
For this exercise, we will create a web page containing two vertical frames with their dimensions being 25% and 75%, respectively, of the browser window.
1. To insert the left frame select Insert > Frames > Left from the Menu Bar.
2. The screen will be split into two vertical frames. To access the Frames management window, select Window > Frames from the Menu Bar. The Frames management windows is split into two vertical frames named leftFrame and mainFrame, respectively. These names will be used to specify link targets.
3. The Properties window now changes into a frames properties window. From this window, change the value of Scroll to “Auto” so that this frame has automatic scrolling.
A. Editing Individual Frames
To edit the page and text properties for individual frames, you must click on the frame to put the attention on it. You can then modify the page and text properties by selecting Modify > Page Properties from the Menu Bar.
B. Setting Link Targets
We will create a list of links in the left frame that will target the main (right) frame. Because the main frame is the target, the links will load in the main frame. In the left frame, create a link for http://www.csuchico.edu. To create a link, highlight the text you want to link; then, from the Properties window, type the url into the Link field. To set the main frame as the target for the link, from the Properties window, specify the Target as "mainFrame".
C. Saving Frames as Pages
In addition to the root page, you must save each frame as an individual page.
1. To save the left frame, click on it and select File > Save Frame from the Menu Bar. A Save As box will appear, save the frame under the file name "left.html".
2. Next, save the main frame under the file name "main.html".
3. Finally, save the root page by selecting File > Save All Frames from the Menu Bar. Save all frames under the file name "frames.html".