click your mouse for next slide dreamweaver – setting up your page the first way to ensure that...
TRANSCRIPT
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!