CWP in 90 Minutes

CTS Step-by-Step: Course Web Pages - Page 5

< >

Creating a Web Page in Dreamweaver:

Before you begin creating web pages in Dreamweaver, you should know where you are going to save your web pages on your computer. You need to create a single directory on your computer where you are going to save all of the files associated with your web site. If you have created a Site for your web pages, your local file directory will already be set.

Begin by opening Dreamweaver. If you have Dreamweaver installed on your PC, you can generally start Dreamweaver by clicking on the Start button in the lower left corner of your computer screen, moving the mouse up to Programs, over to Macromedia, and then over to Dreamweaver. On the Macintosh, you will have to locate where you installed Dreamweaver and double click on the Dreamweaver icon.

When you start Dreamweaver, the main window will be a blank Document window. This window will be used to create your web page. Below the Document window, the Properties window should be open. If it is not, go to the menu bar and select Properties from the Window menu.

If you have created a Site for your web pages, make sure the Site window is open and you have selected the appropriate Site. If the Site window is not visible, go to the Site menu, select Open Site..., slide your mouse to the right and select the appriopriate Site for your project.

Let's start by typing in the semester and year the course is being taught in the Document window. The text will appear in the upper left corner of the Document window. To move it to the right and change the font, we'll need to learn about editing text.

Editing text:

Changing the size, typeface and alignment of text is done using the Properties window.

Many of the icons in this window may look familiar to you.

Align the text on the left, centered, or on the right.

Toggle the selected text bold and italic on or off

Change the text color by clicking on the color box

Changing the size, style and typeface of selected text in a web page is a little different than changing it in a word processing document. When you print out a document, you have total control over what the final version looks like. Because users can change the typeface used to display web pages in Netscape or Internet Explorer, it doesn't make sense to spend too much time defining the exact size or face of the text. Instead of exact sizes, text is usually defined by different styles using the first drop-down menu next to Format.

The first drop-down menu for text formatting indicates the general style of the text. None and Paragraph indicate regular-sized text. The Paragraph style puts a blank line before and after the text. While it is possible to have an indent at the start of each line of a paragraph, it is not an easy thing to do and doens't always display correctly on all computer and browsers.

Heading 1 through Heading 6 are used to indicate the importance of the text. Heading 1 produces the largest text and Heading 6 the smallest.

Preformatted text sets the text to a non-proportional typeface. (That means that all of the letters and numbers are the same width.) Use Preformatted text when it is important that columns line up. (Preformatted is great for things like computer programming code.)

Setting the font is a little different for web pages than for word processing documents. Because the pages are not printed out, you have to depend on the viewer's computer having the exact same fonts on their computer as you have on yours. This is usually very likely when you use standard fonts such as Times New Roman, Arial, Helvetica and Courier. If you choose to use a font like Comic Sans or Braggadocio, there is less of a chance that the viewer's computer will have the same fonts.

In general, fonts on web pages are generally selected in font families. For instance, instead of specifying just one type face like Arial, it's better to list a few so the viewer's computer has a better chance of having it. In this case, we might specify Arial or Helvetica or any sans-serif type face.

Font size on web pages is also not as exact as in printed word processing documents. Instead of selecting point sizes for type, it is generally better to enter fonts by more generic sizes: 1 is the smallest type size and 7 is the biggest. You can also indicate that the text should be just one size bigger or smaller than the regular size. This is called relative size (+1 or +2, -1 or -2). While it is possible to select an exact point size, that's generally a bad idea. Think about someone who is visually impaired and needs really large text in order to read the the web page. Setting an exact size of text may make it much more difficult for them to see your weg page. In general, unless you have a specific reason to change the font size, leave it as None.

Highlight the semester and year the course is being taught and edit it until you like the way it looks. In the sample home page shown above, I have selected that the text be right justified and bold. I have changed the font to Arial, Helvetica, sans-serif and I have changed the size of the text to be one smaller than the original text (-1)

Classroom Technology Services (cts@rice.edu)
Educational Technology Services
Rice University, Copyright 1999-2002

Last updated: December 18, 2000

	Align the text on the left, centered, or on the right.
	Toggle the selected text bold and italic on or off
	Change the text color by clicking on the color box

			The first drop-down menu for text formatting indicates the general style of the text. None and Paragraph indicate regular-sized text. The Paragraph style puts a blank line before and after the text. While it is possible to have an indent at the start of each line of a paragraph, it is not an easy thing to do and doens't always display correctly on all computer and browsers. Heading 1 through Heading 6 are used to indicate the importance of the text. Heading 1 produces the largest text and Heading 6 the smallest. Preformatted text sets the text to a non-proportional typeface. (That means that all of the letters and numbers are the same width.) Use Preformatted text when it is important that columns line up. (Preformatted is great for things like computer programming code.)

			Setting the font is a little different for web pages than for word processing documents. Because the pages are not printed out, you have to depend on the viewer's computer having the exact same fonts on their computer as you have on yours. This is usually very likely when you use standard fonts such as Times New Roman, Arial, Helvetica and Courier. If you choose to use a font like Comic Sans or Braggadocio, there is less of a chance that the viewer's computer will have the same fonts. In general, fonts on web pages are generally selected in font families. For instance, instead of specifying just one type face like Arial, it's better to list a few so the viewer's computer has a better chance of having it. In this case, we might specify Arial or Helvetica or any sans-serif type face.

			Font size on web pages is also not as exact as in printed word processing documents. Instead of selecting point sizes for type, it is generally better to enter fonts by more generic sizes: 1 is the smallest type size and 7 is the biggest. You can also indicate that the text should be just one size bigger or smaller than the regular size. This is called relative size (+1 or +2, -1 or -2). While it is possible to select an exact point size, that's generally a bad idea. Think about someone who is visually impaired and needs really large text in order to read the the web page. Setting an exact size of text may make it much more difficult for them to see your weg page. In general, unless you have a specific reason to change the font size, leave it as None.