[class
information] [photoshop] [html]
[theory] [dreamweaver] In html: [basic html ] [colors & links] [tables] [fetch] |
||||||||||
![]() |
||||||||||
![]() |
Adding color & links [p.1] [p.2] |
|||||||||
|
||||||||||
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> |
[class
information] [photoshop] [html]
[theory] [dreamweaver]
[home] [fims]
[uwo]
page created by Mark A. Rayner, ©2003