[class information] [photoshop] [html] [theory] [dreamweaver]
[home] [fims] [uwo]

In html: [basic html ] [colors & links] [tables] [fetch]

>>html lessons>digital imaging and web design
munch's the scream - digitally altered





Adding color & links
[p.1] [p.2]

html lessonslink to outline.htmlink to assignments link to schedules link to instructor info

 

 

File structure

File structure is extremely important while you are building your websites. Here are a few guidelines:

1. Break the site into sections, and put each section in its own folder. Essentially this helps you organize the site, and it will also make your web site easier to manage. So, instead of putting all of your page in the top layer of your site, it will be distributed throughout the folders.

2. Have a folder in which you keep your images. Actually, you should have several folders for your images. You should have one folder that houses all of your common images for the site, and then each section should have its own image folder as well. This will also help you organize the site, and it will help immensely when it comes to building your site and updating it.

3. Emulate your eventual file structure as you build. What I mean by this is that you will imagine what your file structure is going to be (this will be part of your site planning process) and make sure that you have it exactly the same on your hard drive or zip disk.

4. Remember that your folder and file names have to be exactly the same as the way you describe them in the code. One character out of place can cause a broken link.

Much more detailed notes are available in the theory section of the website, under Information Architecture.

Linking Images

1) For this lesson, we are going to go back to your zip disk. There, I would like you to create a new folder underneath the "mit220" folder called "images".

2) For each of the three favourite websites you have chosen for your home page, collect a piece of artwork (logo, image, etc.) that you can add to the page.

3) Save them all into the sub-folder called "images"

4) Open up your index.htm page in SimpleText and insert each of the images into your html code.

5) Now, link them all. To link an image, you simply put the <a href> code around the <img src> code. It will look something like this:

<a href="http://instruct.uwo.ca/mit/220"><img src="images/mitlogo.gif"></a>

......> next page

 

 

[class information] [photoshop] [html] [theory] [dreamweaver]
[home] [fims] [uwo]

page created by Mark A. Rayner, ©2003