Website design

web site hosting @ 10000mb.com

Welcome Back

Lesson 1 Tutorial 2

(This is another section I told you about earlier)!
There will be one more, and that is on tables!

In this tutorial we will go about creating the same website with dreamweaver, using PARTS of the same components as we used
in the first tutorial.

I have taken the liberty here to cut, copy and save all the graphic files we used in tutorial one, for this section. It will be much
faster for you than the first tutorial. I wanted to give you a feel of how to start from scratch...so to speak.

Let me start by saying, I have seen and read so many books on building website, that I could be bankrupt by now. What I
always hated let me say it again....I have always hated....is they build totally different pages, and expect a novice person
to understand exactly how to put it together like magic. Many programming books are like that. They tell you do this and that,
and they tie it in with something totally different, so you lose the initial concept of what they are trying to tell you.

My theory is just this. Build the exact same website, but using different concepts or tools to do the exact same thing.

Here we go!

1. Open Dreamweaver
2. You should automatically have a new page.
3. Title the page
4. Insert a layer.
5. Click inside the layer (this will put your banner inside this layer, other than somewhere else on the page)!

You should have learned to do all of this in the 1st tutorial. So far so good? I hope so.

Now we are going to open up our graphic(s), from the beginning.

Click Inside the layer and go up to:

1. Insert
2. Image
3. Click on the Banner.gif graphic

Your page should look like this:

website hosting graphic tutorial 20

We are going to RESIZE that layer, by pointing your mouse to the center square and dragging it up:

website hosting graphic tutorial 21

Your layer with the banner inside should now look like this:

website hosting graphic tutorial 22

O.K. Got it? Great.

Step Two.

Insert another layer and drag the layer over to where the links were on the previous tutorial. You don't
have to put it exactly, remember, it's up to you! You can move your layer around by just draggging it!!!
Now click inside the layer and go up to Insert, and insert the RightSideLinks.gif into this layer.
Your page should now look like this:

website hosting graphic tutorial 23

Now let's use the Rectangular Hotspot Tool...remember that? It looks like this:

website hosting graphic tutorial 24

Click on the links area graphic, and you will see this property box come up.

Link everything together just like in tutorial one, using the rectangle hotspot tool.

NOW SAVE THIS SAME PAGE AS:
1. Home.html
2. Ebay.html
3. Links.html
4. ContactMe.html (add something on there like your email address).
Then close all of these except Home.html

Now insert another layer, and put the car in it. You should be able to do this without much help!

You page should now look like this:

website hosting graphic tutorial 25

Now insert another layer and add some text inside it! And your page will look like this:

website hosting graphic tutorial 26

If everything doesn't quite match up, you can decrease the font size of the text, move a layer around here
and there, whatever makes you feel good.

Then continue through...add text, graphics, of your choice to Ebay.html, Links.html etc!

Always remember when working with layers, to click inside the layer before you put anything in it.
Otherwise, your table or graphics will not be in the layer, and you will not be able to move it around
on the page.

Layer are a great thing.

You can move them around all over the place, by just dragging them!

I will show you what I mean.

I will insert a layer, and click inside it and put the links table in it. Then Move it over to the
LEFT side of the screen instead of the right. Everything moves together! Fantastic!!!
This is a very handy tool!!!!
Remember in our website template this same layer was on the right. I just moved the whole thing
where I want it to be, and now it is on the left. The reason this is a great tool is because you can
make a visual of a page really quickly to see how it is going to look.
Just hit the F12 Key. That brings up your internet explorer, and if you have SAVED THE PAGE...
you will see all of your changes!

That is it! You have now completed tutorial 2 of the basics.

Now let's delve into creating the same website with tables.
Link Here. Tutorial 3!

Website Hosting Link