Click your mouse for next slide

Dreamweaver – Setting up your Page

• The first way to ensure that you have a consistent design is to use table to set up your page

• Tables create a grid and into this grid you can put your picture in one cell and the text in another

• The advantage of using the table is that your various elements will line up neatly.

• There are two types of tables: Standard and Layout.

• We will be using Standard layout tables.

• When we finish you should have a screen like this one.

Click your mouse for next slide

Dreamweaver –

• The first step is to start up Dreamweaver and go to the Site menu.

• Open up the site you created in the first lesson.

• When you see your files in the pane on the right hand side, double click the index file

Click your mouse for next slide

Dreamweaver –

• Your page should open up but all that should be visible are the links you created in that first lesson or two.

• Go to the Insert menu and choose table.

Click your mouse for next slide

Dreamweaver – • You will get a dialogue box

which asks you to set a bunch of options.

• The ones you should set are the number of rows (horizontally) and the number of columns you will need vertically.

• To do this it is wise to map out your page on a piece of paper ahead of time.

• You FST thoughtfully used a drawing program because he is so artistically challenged!!

• For this type of web page I would need 3 rows and two columns.

• You always need the maximum number of columns and then you can get rid of the ones you don’t need.

Click your mouse for next slide

Dreamweaver –

• So I enter 5 rows and 2 columns in the dialogue box.

• The Borders value should be 1 to make a visible border or 0 to make an invisible border which Dreamweaver will represent with some dotted lines which don’t get printed in the web version.

• So here’s what I get when I click OK.

• Now we have to make some changes in the cells.

Click your mouse for next slide

Dreamweaver –

• The first drag across the top two cells

• Then look at the Property Inspector bar at the bottom of the screen.

• If your Inspector is not visible hold Ctrl and press F3

Click your mouse for next slide

Dreamweaver –

• Now click the merge columns button

• This is the itsy bitsy little button in the lower left hand corner of the screen your see pictured here

• Poof! Now you have merged the top two columns and have your single bar going across the top.

• Don’t worry about it being so skinny, it will grow to fill whatever is put in it.

Click your mouse for next slide

Dreamweaver –

• Now let’s make one bar going down the right hand side

• We will do it the same way except now we will merge the second, third and the fourth cells on the left

Click your mouse for next slide

Dreamweaver –

• Now re-arrange the size of the cells.

• To do this place your mouse on the wall of a cell and drag it until it has the space you want

• Here I have already adjusted the wall on the bottom line and I am dragging the middle wall to the left.

• You know you are ready to drag when your mouse cursor changes to a little double line either horizontally or vertically

Click your mouse for next slide

Dreamweaver –

• Hoo-oo-wee, wasn't that fun?

• Now we are ready to put stuff into the table

• But that’s enough for now.

• Click here for the big fun assignment.

Click your mouse for next slide

Super Giant Big Fun Assignment

• On a sheet of paper with your own little pen or pencil, draw a diagram of how you want your web page to look. You don’t have to pick my design – I won’t be offended or flattered. Choose one you like – you’re going to have to live with it.

• Then insert an index page into your index page so that it is in roughly the same shape as your diagram.

• Proudly display both to FST so he can TICK YOU OFF!