Creating a web-based activity page: detailed steps

Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2007, 2013
Getting started - Step-by-step (using Dreamweaver CS4):

We will use Adobe Dreamweaver CS4 to create a WWW page.  This handout will walk you through some basic steps of web page creation in order to familiarize you with the possibilities in Dreamweaver. You can download Dreamweaver and use it on a trial basis for a short time if you wish ( Be sure to check out teacher/student pricing. Most web page editing tools work in more or less the same way, so the basic ideas will hold even if you use a different editing program (such as KompoZer : ). First work through these steps, and then move on to your web activity page.  Note that it is possible to select many options using menu items or toolbar buttons, depending on your personal preference.

Before starting, it is a good idea to plan your page carefully by making a storyboard (as you might tell a student to do an outline before writing a paper).  It is possible to copy a page that you like from the Web or from your own past efforts and then use it as a template, making changes to fit your needs. If you do this, be sure to work with a copy so you don't destroy your original. For this exercise, we will simply create a new page from a blank HTML.

Always keep in mind that a web page is a file with HTML code along with any and all other files for media that are included in the page in any way. Indeed, a web page can be thought of as a shell that holds various multimedia files together and displays them in a single window. All of these files need to be placed so the web page can find them. For this reason, you want to create a folder for your web site and put everything needed for the site's pages in this folder. Then, when you move or copy the folder, you are moving everything you need for all the pages in your site.

1. Open Dreamweaver.  Create a New HTML document by selecting File / New / Blank Page / HTML. (Ignore the many other options; we'll keep it simple.)
2. Make sure that you are looking at the Design View (Split view is ok). Type your name, title, department & institution, office location, and telephone number on separate lines. Include Modern Languages Department at SUNY Cortland in your text. Notice how there is a blank line between each of your lines of text. (You could use Shift-Enter for single spacing.)
3. Select your name.
4. Make your name Bold (B) and Italic (I).
5. Next, select your title, office location, telephone number, etc. Make them a bulleted list.
6. That was a bad idea.  Remove the bullets and indent them instead.
7. Make the Classic Toolbar visible by selecting Classic instead of Designer in the upper right of the Dreamweaver window.
8. Select Modern Languages Department. Right click on the highlighted text.  Click on the hyperlink button on the Classic Toolbar and type or paste the URL for the MDL page:
9. Select the words SUNY Cortland. This time put the address (URL) into the the Link box in the Properties window at the bottom of the Dreamweaver window. The results are the same as using the buttons. Copy and paste the URL to make a link:
(You could have also used Insert / Hyperlink.) Dreamweaver gives you different ways to do the same thing.
10. Look at the Title Box at the top of your Document window. Type a new page title, for example, Bob's great and wonderful web page. You could also change the title under Modify / Page Properties / Title Encoding.
11. Modify / Page Properties / Appearance, and change the background color.  Pick a color of your choice, but make it very light. Never use a background color that makes it hard to read your text.
12. Save your page on your USB flash drive or the hard drive. Put it in a folder with the name ICC523-practice, and give your file the filename index.html. (never put spaces in file or folder names for the web.)

Many formatting options are changed using Cascading Style Sheets (CSS). We will create a style class called "add" for our address. Later we'll be able to use this same style wherever we wish.

13. Select your name again. In the Properties box at the bottom of the Dreamweaver window, click on CSS.
14. Change the font from Default Font to Ariel (use the CSS Properties - You'll have to give your new style class a name - let's call it "add").
15. We can change the "add" style in many different ways. Click anywhere in your name to see the "add" style properties again. Change the font to something else.
16. Make your name large. (Use Size in the CSS Properties window. Make is xx-large.)
17. Change the text color to a color of your choice using the color drop down box in the CSS Properties window. Note that as you move the eye dropper, you can select any color inside the Dreamweaver application window. The color is a 6 figure hexadecimal number (that's like having 16 fingers). Red is FF0000 (FF in hexcadeciaml is 255, so this means 255 red, 0 green, 0 blue).
18. Center your name using the alignment icons in the CSS Properties window, just like in a word processor.
19. Apply the "add" style to your phone number. Highlight the number and select the rule or class called "add".
20. You decide that your italic, centered, purple, name looks awful.  Realign the add style to the left margin and remove the italic format.
21. Remove the "add" style from your phone number by setting its class to "none".

22. Make a table by positioning your cursor under your name and clicking on the table button or selecting Insert / Table. Give the table 1 row and 2 columns. Make the table width 95 percent.
23. Select the table, and be sure you have the table and not just one of the cells. Now the Properties windows shows the Table Properties (see below). Align it right. Remove the border line if necessary by changing the the border from 1 to 0 (an invisible table is a good way to control positioning). 

Notice that the buttons at the lower left of the table properties allow you to clear the row heights and column widths, to use absolute sizes (pixels) or to use a percentage.
24. Select your personal information (except your name).  Cut the text (ctrl-x) and Paste it (ctrl-v) into the left pane of your table.
25. Make sure that a photo or image that you want in your page is on your USB flash drive or hard drive in the same folder (icc523-practice) as your index.html page. If you don't have a photo, download one (right-click / save picture as) from anywhere. Remember that everything on a web page has to go in the same folder.
26. Place your cursor in the right pane of your table and click the Image button or select the menu item Insert / Image. Find the file name of the image that you wish to insert.
27. Place your cursor below the table and select Insert / HTML / Horizontal Rule. Insert two, one below the other. Note that you can also insert a variety of other special characters from here. Or you cold use the Horizontal Rule button on the Common Toolbar.
28. Below the line, press the email link button. Type your email address into the Text and Email boxes.

The activity page: mini-project 1

29. A table of contents page named index.html is a good start for your own web site. It can include links to all of the pages that you create. Between your personal information table and your page footer, IOW between your two horizontal lines, type the indented text:

mini-project 1
mini-project 2
powerpoint project
mini-project 3
final project

This will be your index page for the projects you create in this course. 

30. By now you should feel fairly comfortable with basic formatting in Dreamweaver. (Though CSS is probably not so clear yet.) You are ready to create a page with a web-based activity or materials!

Just a note about style: Format to your heart's content, but try to follow basic principles of good style, so don't overdo it.  A left margin tends to look better than text flush against the edge of your browser window.  Items look better if they line up.  Big blocks of text without white space look bad and are difficult to read.  Too many different colors, fonts, text sizes or styles detract from your message. If you have more than 4-5 text styles on a page, you might be going overboard. Use style to enhance your message, not distract your reader.

Return to Syllabus