lets continue from where we left off the last time.Open up Dreamweaver and click,as usual,on your so named/titled file which is on the extreme right hand panel within your Dreamweaver workstation/interface,and follow the following steps :
1.Within the secondary menu bar there is a main icon named "common" which,when clicked,reveals a sub menu with a list of icons with various functions,and the one that we need to use is the icon named "table". ( Below is how you locate the table icon )
main top menu bar = | file | edit | view | insert | modify | text | commands | site | windows | help |
secondary menu bar ( directly underneath the main top menu bar ) = | insert | common | layout | forms | data | spry | text | favourites |
Click on common and you will see a number of icons appearing directly underneath the common tool bar ( these icons or properties are specific to the common tool bar menu ).Roll your mouse over these icons and stop when you come to an icon named table ( this icon is normally the fourth icon on the list going from left to right ).
2.Click on the table icon,and a table properties box opens up for you to fill in.The first line allows you to set the number of rows and columns that you want your table to have,so put in 5 rows and 2 columns. ( this means that you will have 5 columns and 2 rows within your table )
The next line asks you to put in a table width,so put in 700,and make sure that you choose pixels,not percent,from the drop down or list menu. ( so your table width will be 700 pixels )
Then just click okay ( just ignore the other options within the table property box for the moment ).
You will notice now that a table appears on your dreamweaver template page.This table represents the beginning of the physical formation of your dreamweaver template.
3.Place your blinking cursor within the very top left hand side of the newly formed table,and left click your mouse and drag it horizontally across until the outlines of two columns of the first row are highlighted by a darker colour.
Then ( while the columns are still highlighted ) right click your mouse and this will open up a sub menu.At the very top of this menu you will see an icon named table---this table will have a further menu---choose merge cells from this menu.
The top two columns on the first row of your table have now been merged into one,with a width of 700 pixels.This space is now available for you to insert an image,with an approximate width of 700 pixels.
4.Make sure your cursor is flashing within the very top left hand side of your newly merged first row ( 700 pixels in width ) and go to the very top menu bar,or main menu bar :
| file | edit | view | insert | modify | text | commands | site| windows | help |
click on insert,which will open up a drop down menu,and the icon you choose is image.By clicking image you will have the ability to browse around your files and folders to choose an image.The best place to choose an appropriate image with the appropriate width is in my pictures,naturally enough,so choose your image.You will be asked various questions : (a) this picture or file is outside your root folder would you like to copy it there now ?--your answer is yes,and then just click save.(b) alternate text box opens up--just click okay to this box ( dont fill out anything ).
You have now put an image into your root folder,and this image will appear within the top row of your table.This image will be the main image that appears within your template,as you will come to realize as you gain more experience in building templates.This is the image that you see on the top of every website that you visit and they go through the exact same process,give or take a little.
In order to view how your template will appear on the internet there is an icon in your Dreamweaver workstation which is represented by a small blue globe,and this icon is positioned in the menu beside the code view,split view,design view,title.Just click on it and it will open up a virtual internet,and this is what your template will look like in the real worldwide web.
Okay,I would suggest that you just practise the above process over and over again,until you feel comfortable with making mistakes but,eventually,getting closer to getting it right.( Unfortunately,inserting the right image with the right widths etc is something which can only be professionally done by using adobe photoshop or some similar program,but thats a separate lesson in itself,and I suggest that you dont worry about it at this point).
In my next lesson I will show you how to insert or build a basic navigation menu for your website.
signing out for now top web design,Ireland, ( see relevant links below )
