> Projects > Using Dreamweaver to Create
a Web Page
Using
Dreamweaver to Create a Web Page
For Dreamweaver CS3 for Windows
Dr. Linda M. Perry
See also links to Adobe's video tutorials on Dreamweaver CS4
Once
you've planned your tables, you can start laying out your web page on
Dreamweaver. This exercise will get you familiar with the steps you'll
need to take to set up your web site. Before you start, create
a folder for this exercise and make sure the art for this exercise,
baughman.jpg and thumbbaughman.gif that you created in the
Preparing Web Graphics exercise,
is in the same folder into which you will save these Dreamweaver files.
Items to be typed or selected are presented here in bold.
- Open Dreamweaver.
Note the dialogue box with all its features. (The best way to learn
how to use these features is to experiment and play. Select Create
New > HTML. (Once
the document is created, you can access it next time by choosing it
under the Open a Recent Item list.) The first time Dreamweaver is opened,
it will default to
Design View. Change the view so that you can see the code as you create the page. There are several ways to do this, including a tab on the tool bar above the layout screen. This tool bar shows icons fro Code, Split and Design. Click Split. Alternatively you can select View > Code and Design from the main menu. Notice that the Code View clearly shows that the document is not yet titled. In the same tool bar as above, type the title of the document in the browser's title bar; for this exercise, type: The Baughman Center.
- Select Text
> CSS Styles > New. In the dialogue box, selefct Class, name
the style sheet serif and choose New Style Sheet file. In the next diaglog
box, save as serif in the same folder into which the Dreamweaver
file will be saved. In the CSS Rule Definition for .serif in serif.css
choose the Category Type (on the left), then on the right, the
Font: Times New Roman, Times, serif; Size: medium; Height,
Weight and Variant: all normal; Case: capitalize; and
Color to black. For Background, we'll use Dreamweaver's
default white Backgound. Note the other variables for future reference,
and click OK. This will create a document called serif.css that can
be linked to any documents in the folder that you want these styles
to be on. (Note: If you do not want to use a style sheet, you can set
the type style in the Properties window.)
- Let's change the
colour of links from the default blue and purple. In the Code
view, find the body tag, click in after the word body and type: link="#993333"
vlink="#993333" alink="#330000" before the closing tag. (Note
the body tag for this tutorial as an example: link="#663300"
alink="#996633" (active link), and vlink="#663300"
(visited link) and note also that they are browser-safe colours. Check
the Barebones
Guide to HTML for information on codes for links. Click Refresh
in the Properties dialogue box at the bottom of the screen. The
properties dialogue box is customized for each of Dreamweaver's features.
You'll use it a lot. If it isn't open, you can make it visible by selecting
Window > Properties.
- To name the
file, select Save As and give the file a short name (under
15 characters) with no spaces and all lowercase letters. For this exercise,
save the file as graphics.htm. (For your website, your homepage
should be titled index, and other pages should have logical titles
such as About Us.) Now you should see a tab at the top of the layout
window that says: graphics.htm. (These tabs are handy when you
are working on several pages within a web site, so that you can easily
navigate them.) Note: Dreamweaver can add the .htm or .html extension
automatically as long as "Save as type" is set to All Documents
or HTML documents, but it defaults to the html extension.
- We first want
to enclose the whole page in a table to control the width of the page.
(Be sure to read "Make a Table" in chapter 3 of the Williams
book, as well as "Fun with Tables" in chapter 13.) To insert
the table for this exercise, click in Design view and select Insert
> Table. In the Table dialogue box, set the overall table to
1 row, 1 column, Table width: 750 pixels (to accommodate
the space taken up by the browser window, using the preferred 800 by
600 aspect ratio. (The number of rows and columns for the overall table
for your web page will be determined by your design and table plan.)
Set Border thickness to 0 so that the border is invisible.
Click OK. Although the border will not show on the web page,
you can see it in design view. While it is highlighted, go to the Properties
window and change Align to Center. Notice that you if you were
to make the border visible, you could have it show in colour by clicking
in the Brdr color box, which brings up a swatch of browser-safe
colours. Likewise, you can add a background colour to a table or just
(a) selected cell(s) by clicking in Bg color. To
control placement for complex designs we have to nest tables within
tables. To do that, click the cursor inside the table you just created.
Select Insert > Table and select 1 Row and 2 Columns.
This time, we want the table to fill the width of the overall table,
so we change the Width to 100 percent. Cell padding will
give your page a little margin. For this exercise, set Cell padding
to 5. (See Creating
Web Tables for an explanation of how cell spacing, cell padding
and border width affects the look and/or function of a table.)
- Now you are ready
to enter content on your page. For this exercise, click in the left-hand
cell of the inside table and type this:
The Baughman Center
The Baughman Center is located on the west bank of Lake Alice in Gainesville, Florida. The thumbnail photo of the Baughman Center, at right, is a link to a view of the center from Lake Alice's observation deck near Cory Village.
- Now click in the
right-hand cell and select Insert > Image. Select thumbbaughman.gif.
In the Image Tag Accessibility Attributes dialogue box, write in the
Alternate text: The Baughman Center. (You can also put this in
the Properties box called Alt.) In the Properties window, type
1 in the Border box type. In the Link box type baughman.htm.
Click off the image but in the cell and change the Cell Vertical
alignment to Top.
Click in the left cell and do the same thing so the content is aligned
at the top.
- Let's make a small
change to the layout. First find the code for the first table in the
design view. Find the first <td> tag next to the second table's
tag. Highlight
and cut The Baughman Center title and paste it into the design
view between the <td> and second table tag.
It should look something like this in design view:
<table width="750" border="0" align="center" >
<tr>
<td>The Baughman Center<table width="100%" border="0" cellpadding="5">
Click Refresh in the Properities window. The title should appear in the main table above the nested table. Highlight The Baughman Center title. In the Properties window click the B tab (for bold) and the centering icon. Delete all the extraneous space from above the paragraph so that the top aligns with the top edge of the image.
- Highlight Baughman
Center in the first sentence. In the Link input box of Properties,
type baughman.htm and click back in the design window. The words
you highlighted should now appear as a link. Save. Your web page
should look like this.
- Now let's
create a second page. Go through the steps outlined above to create
a simple page with one overall table. Save it as baughman.htm
and give it the title, The Baughman Center. Type this: The
Baughman Center is ideal for meditation, quiet reflection or study.
Enter a paragraph return. Insert baughman.jpg, give it an alt
tag and a border of 1. Put in another paragraph return.
(Note: paragraph returns in Dreamweaver create a <p> tag for a
new paragraph, which creates a double space between paragraphs or elements.
For a single line space, hold down the shift key when you use the paragraph
return, for the <b> or break tag.) Type this: See a Panoramic
view inside the Baughman Center and highlight that text. Click in
the Link box of the Properties window and type: http://virtualtour.ufl.edu/pano/baughman.htm.
Click in the Target box and select Blank. In Design view, add
about 15 paragraph returns (to simulate a page filled and made long
with text) so that the page is too long to show on the monitor without
scrolling. Type: Back to Graphics on the Web, highlight that
text and type graphics.htm in the Link box of the Properties
window. Below that type: Back to top, highlight that and type
#top in the Link box. At the top of the page select Insert
> Named Anchor and type top in the dialogue box. Your
finished page should look like
this.
- The two pages you created should now be linked together. Test them in a browser to assure they are linked. Also test the link with the absolute address, which should open in a new browser window, and test the Back to Top link. Make adjustments to the Dreamweaver files as necessary
NOTE: For your website project, create a folder for it and give it a name that you would want in its URL. More complex websites will have an additional folder inside that folder called "images" for all your art files. These two folders must be created and the images you plan to use must be in the images folder before you begin building your webwsite, as Dreamweaver will map pathways to wherever the art, etc., was located when you inserted the files. Be sure to name the file for your project's home page "index," so browsers can automatically open that page when the URL contains only the folder name; e.g., lindaperry.us/nm3217.
Adobe's video tutorials on Dreamweaver CS4.
Learn Dreamweaver CS4 - Getting Started: 01 What is Dreamweaver? <http://tv.adobe.com/#vi+f1592v1759>
Learn Dreamweaver CS4 - Getting Started: 02 Defining sites <http://tv.adobe.com/#vi+f1592v1758>
Learn Dreamweaver CS4 - Getting Started: 03 Rapidly building layouts <http://tv.adobe.com/#vi+f1592v1757>
Learn Dreamweaver CS4 - Getting Started: 04 Adding text and images <http://tv.adobe.com/#vi+f1592v1756>
Learn Dreamweaver CS4 - Getting Started: 05 Styling text <http://tv.adobe.com/#vi+f1592v1753>