Building a Web Page Part 2

Lesson Highlights

Inserting an email link
Using clip art or image as a link

Inserting a table
Changing the color/size of a table/cells
Inserting an image in a cell

Splitting cells/Merging cells

Using a basic rollover
Perhaps a simple text or image animation?

Using SOU Graphics

Using FTP

So far you have:

created (or located) your local root folder-called public_html

created or located your index_html page

created an images folder and an extras folder

put images in the images folder

created two web pages

inserted at least one image on one page

linked the two pages together-from the index to page two and from page two to the index.

The index is your home page. That is the place the visitor sees first-and it should best represent your purpose and personality. Keep your audience in mind. For now- your audience is the community of this class-which includes your classmates, cohort mates, and instructors. It will probably take on greater significance for your family, friends and professional contacts as the weeks and months roll on. Think of this website as the place to display assignments in the most clear and interesting manner you can -given your time, interest and skill level. The bottom line for me is: The assignments have to be online, I must be able to read them easily, and the links should work. I call this a web portfolio.

First, let's create a page for each of the assignments listed below.

Pages you'll need

Newsletter link- there are two options to display this- 1. if you save your Word document directly into your PUBLIC_HTML folder, then you just need to make a link to it. 2. You can save your Word document as an html document, which will go into your PUBLIC_HTML folder, and then you link to the html file. See Converting Word to html.

Link to your Google webpage

Photoshop photos- You can display your images any way you wish-but it should be easy to see them, and have clear captions that tell the story of what you did to the photos. Tables work well for this.

CMap- Your concept map will go into one page, and your will link to it.

Powerpoint-You will save your Powerpoint into your PUBLIC_HTML folder and then link to it.

Games Assignment- You wil have one page that describes your games experience and link to the page

Slowmation- Your team will create a slowmation and one member will host the movie on their site. Others will link to it.

Screenshot/Lesson Assignment- This assignment is a 5 screen "How To" using screenshot method as the graphics

Resource Links- via Delicious

Link to your blog- on Blogger.com

Using an image as an email link-

You can make any image a clickable link this way-even to go to one of your other web pages, or to a web

You can even insert .gif animations, and use them as clickable links. I put animations in an assets folder first, even though they are treated like an image in web pages.

Inserting a table

Changing table attributes

First select the table (Click at the border so that the black buttons appear)

The table above has one background image place in it. When it's relatively small, it creates a tiled effect. A larger image would fill in the entire area up to the boundaries of the table.

Rollover Button

These might be considered 'advanced" but it's not that hard to create a rollover button. this is optional but try it if you have the inclination.

A rollover button is one of those buttons that changes when you roll the mouse over it. We will do some that are simple 'off' and 'on'. First, you have to have your rollover images in your assets (or images)folder. I've chosen two from the SOU graphics library, but you can basically use any image as a button. Then go top menu and select Insert>Interactive Images>Rollover image

Browse for the 'Original Image'- that's the image you see BEFORE the mouse rolls over. Browse for the 'Rollover Image'- that's the image you will see AFTER the mouse rolls over. Browse for the page in your site to GO TO when the mouse is clicked. (You can also paste in the URL as an absolute link.)

Test the results on the bar below

This should switch from black to red when your cursor rolls over the bar.

FTP from Dreamweaver (for "advanced" users)

Check for understanding- FTP stands for File Transfer Protocol. You use an application to transfer your files to and from the SOU server (or any server in the world for that matter, if you have access privileges). In our situation, you are logging on to the SOU server from home, and transferring files so you can work on your webpages. Windows Users might try an Open source FTP program. http://www.opensourcewindows.org/ Scroll down to Filezilla. Mac Use can use Fetch- which is free for educational use. http://www.sou.edu/it/mobile/ftp/ftpmac.shtml. SOU computer Services recommends using SOU Anywhere for secured access, but you have to load one file at a time.

The following information uses the FTP function built into Dreamweaver. We'll set this up to transfer Dreamweaver files from SOU to your home, and from home to SOU.

Select Site>Open Site and highlight your site name.

Select Remote Info in left column Select FTP from the drop down buuton on Server Access Type in ftp.sou.edu in the FTP Host box Type in PUBLIC_HTML/ in the Host Directory to send directly to that folder Type in your login and Password Check the box that says Use Passive FTP (if that is an option) (In Dreamweaver 8 leave Secure FTP box unchecked). If you want to access your entire f-drive, you can leave the host directory blank. Click OK

Your Local Folder will appear on the right side. Click on the Connect icon.

After connecting to the SOU server, navigate to your public_html files which should appear on the left side. Make sure your the public folder is highlighted at the top when you are transferring files from your local computer into the public_html folder. From Home to SOU: Highlight the file you want to transfer and click on the UP ARROW=PUT. ALL the images associated with that page will transfer as well, so you won't have to transfer those images individually. From SOU to Home: Highlight the file you want to transfer and click on the DOWN ARROW=GET. In both of the above cases, you should make sure the folder that it is GOING TO is highlighted. If you have set your home computer up with EXACTLY the same structure as SOU (public_html>images &assets folders, then you should be fine) If you have built a page at school, and you want to work on it at home, you open Dreamweaver, you GET it to your home computer, you make your changes, save it on your home computer and then you PUT it back.

Back to Page 1 of Buliding a Web Site

djHome