1 / 11

Dreamweaver – Setting up your Page

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

lydia
Télécharger la présentation

Dreamweaver – Setting up your Page

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 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

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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! Click your mouse for next slide

More Related