DM20  Assignment 1  Web Page Basics

Due Tuesday, January 29

For this assignment you'll use Dreamweaver to add to your home page (index.htm).

In addition, you'll create a second new web page, assign links between the two pages, and add some colors and images.

You'll also use some basic CSS styling and formatting.

Upon completion, you'll upload your files to the web server, check your work online, and then go to the Assignment in Canvas and submit text letting me know you've published your files.


To begin, launch Dreamweaver. Look in the Files panel to make sure your 20web root folder is displayed there. If you're sitting at the same station where you set up your site, it should be there. You can also check by going to the top menu, Site>Manage Sites and making sure your dm20 site is displayed there as well.

If your dm20 site is not displaying in the Files panel - for example, if you're sitting at a different station, you'll need to put a copy of your 20web root folder in Documents at the computer where you currently are and then import the site information. Do not work off a flash drive - Dreamweaver will become confused and that is not a good thing.

So, if it's necessary, go to Site>Manage Sites in DW's top menu, then click the Import Site tab:

import your ste file


With your root folder displayed in the Files panel, click its + sign to open it, then double-click on your index.htm file to open it in the main view in Dreamweaver.

Check to see if you're in "Live" view - Live view has its uses, but for now you need to be in "Design" view.

get out of Live view

Also check the Workspace setting - upper right corner of the interface. You should be in "Standard".

Next, with your index.htm page open in Design view, click the Page Properties button in the Properties panel. The Properties panel is across the bottom of the interface - if it isn't, go to the top menu, Window>Properties - and dock the Properties panel at the bottom of the interface.

In the Page Properties box that opens, with Appearance (CSS) selected on the left as pictured below, choose a font, font size, font color and background color for your webpage:

Page Properties panel

Then click Links(CSS) in the left column of the Page Properties box, and choose the four colors for your links and rollover options.

choose link colors and rollover options

Click OK to close the Page Properties box. And Ctrl S to save your changes (or File>Save).


Next, you'll create a new second page. Go to File>New from the top menu.

In the "New Document" window that opens:

'new document' window

Then go to File>Save from the top menu.
Save this new second page file as aboutme.html (no spaces). And you can leave the "l" in the ".html" - it's only your index.htm page that needs to be .htm without the "l".

Next, in your aboutme.html page, click in the Document Title: field in the Properties panel, where it says "Untitled Document", and type in a title for your web page.
Unlike webpage file names, your Title can have spaces and punctuation.
For example, the title for this page could be   DM20 - About Me   or something similar.

Next, click the Page Properties button in the Properties panel. In the Page Properties box that opens, give this About Me page colors for the background and text, assign colors for links, and choose a font - just as you did with your Home page (index.htm). You can choose the same colors/font/link colors as your home page, or assign different ones.

You should now have two files open, your Home page (index.htm) and your About Me page. You can switch back and forth between multiple pages you have open -- in the upper part of Dreamweaver's interface there's a horizontal bar that shows all files that you have open - you can click on those files' tabs there to bring each one to the forefront when you need to.

With your About Me page in the forefront, in Design View, click in the page and type About Me. Then press Enter to move down a paragraph and Type some text -- a little about yourself and what you hope to achieve with this class, or anything else you want to include.

Include at least one image.

To insert an image (.jpg, .gif or .png), click once in your page where you want the image to go, then from the top menu, Insert>Image.

In the 'Select Image Source' box that opens, navigate to the image you want and click on it, then click OK. Dreamweaver will then give you an alert box, saying "this file is outside your root folder... would you like to copy the file there now?"  Click Yes, and then click Save. 

This is important because if you don't save a copy of your image to your root folder it won't publish correctly when you upload your page to the server.

Look in the source code (Code or Split view) - the tag for the image should be <img src="picturename.jpg"> not <img src="file:///C|/picturename.jpg"> This is what the source code would look like for an image that is not in your root folder - and if you published your web page like this - the browser would be looking for an image on the ///C| drive... and since there is no C drive on the Internet, your picture would not show up in your webpage.

You'll be doing more formatting and styling on the texts (and images) in both of your pages soon, but first, let's link the two pages to each other. 

Linking is, of course, pretty much what makes the World Wide Web what it is - it consists of pages with clickable links in them that lead you to other pages, which in turn have links that you click and are taken to more pages, etc., etc.  So knowing how to assign links is pretty important.  Luckily for us, linking also happens to be one of the easiest things to do in Dreamweaver.


Assigning Links

When assigning links, make sure the "HTML" button is selected, at the far left of the Properties panel (pictured below).

First, bring your index.htm page to the forefront in Design view. Click at the end of whatever text is in there, and press your Enter key to move down a paragraph.  Then type   About Me   This will be the linked text - that is, when it's clicked it will open your About Me page.

Click and drag across the  About Me text to select it. Then click on the 'Point to File' icon in the Properties panel...


...hold down your mouse on it and drag to the aboutme.html file in your Files panel. Release your mouse, and look in the "Link" field in the Properties panel.  Does it say aboutme.html there?  If so - congratulations! You've just made a link.

File>Save, or Ctrl S.


Testing Your Links

Links do not function from the Dreamweaver screen. To test your links, you must use Preview in Browser (aka "Real Time Preview") - its icon is in the lower right of the interface:

Click that Preview icon, choose a browser from the pop-up list, and when your index.htm page opens, click the About Me text - and just like magic, your About Me page opens.

Close the browser and in Dreamweaver, bring your About Me page to the forefront. Click at the end of whatever text is in there and press your Enter key to move down a paragraph.
Then type   Home Page

Click and drag across that  Home Page  text to select it and use 'Point to File' to link it to your index.htm file in your Files panel.

Ctrl S to save, Preview in Browser, and check the links in both of your pages - you should be able to go back and forth between the two pages by clicking the links you created - each page has clickable text that opens the other page.

Next you'll add some formatting/styling to your two pages. For example: centering content, changing font sizes and colors, positioning images with text, etc.   

Continue with Basic Formatting with HTML and CSS