GorillaAgent
New Member
Dream Weaver Tutorial: Beginners, Where to begin?
DreamWeaver is a huge leap when coming from designing a website or 2 in a WYSIWYG program. Where you were once used to drawing text boxes and creating shapes any old place you wanted to, you now have to look at the blank screen starring wondering how to make your first box.
Well then it dawns on you, "I am playing in a different arena now." Well this short article may or may not help you understand how to navigate your way through this transition.
What to do first is draw out what you want. Even if you have this thought of what you want in your head. You know a rough sketch of general placement. Header here, footer there, menu bar over here.
Now what we have to do is look at how we are going to contain this stuff you have draw out here. In other words those boxes you used to draw in publisher or coffeecup now have to be <div> tags or you can do what I do and create tables.
This is what you do:
Well lets say for example purposes that you have a header and footer and on the left hand side you have a vert. bar you are going to put buttons in and a login etc.
So what you have here is a need for three horizontal tables. Width size will be 100%. The size at 100% will stretch the table to the size of the window it is being viewed in. You can also use a percentage as a width size when you place a table inside another table to make the width a percentage of the size of the table it is conatained in. I will get to that more in detail in a minute. This table (container ) is your header. Then create another table at 100% for the content area. And one more for the footer area.
Now for the header we cannot just create any shape inside dreamweaver so what is most practiced is the importing of a picture. Most make the header in photoshop. Or if you want you can use background colors in the tables to create colored boxes.
So now you have the three main areas but you wan to add text and images to the main content area in between the header and footer. So this is where you create 1 more table inside the '100%' table you hav already made. The size should be the same size as the header image. Most pages are viewed in a browser at 1250 width (pixels) so I would make a header that is 800 to 1000 on most, but each project can be different, all up to you. So now you have made the table inside the main container and set the width at 1000 to make this even numbers. Make sure to center it, and the header and footer images as well. By making tables inside the 100% tables we will stay centered no matter what browser or what width they are viewed in. So this new table inside the main container area with a width of 100 pixels should be made into let's say 2 columns. One collumn for the vertical menu bar on the left side for the buttons etc. and the other for the content area. Now that you have made the table go into the table with the cursor and press the "split" view just above the ruler in the left upper corner. There will be 3 options "code","split", and "design" these are the different viewing formats to create and edit your sites in. Any ways go into the split view and use the cursor to locate where you are in the code screen. Click on the cursor in the code portion of the split screen and find the you are in. Below this
You should have 2 sections of <td>td> tags. These are the columns. Inside the <td> without the / in it. you are going to put this: <td width="15%"> for the first one, and <td width="85%"> for the second one. What this does is creates two columns in the table and one will be 15% of the total 1000 pixel width and the other 85% of the width. Now here is where you can keep it simple and ad your content to these areas. Or you can get more creative. One way to get creative is to split these content areas up into more areas to be more precise where you put content. So what you do is right click and go to 'tables' then to 'split cell'. Split the cell on the left, the small one with the buttons into 2 rows. This will divide the area into 2 rows one you can add buttons the other a login area.
This technique is just one way to design in dreamweaver. I find this to be the easiest way to transcend into this program from a drag and drop method of previous designs.
Good luck hope this helps!
If you get frustrated, run out of time, or just do not want to design your own site anymore. We design sites for as little as $99. ( http://thegorillaadagency.com )
DreamWeaver is a huge leap when coming from designing a website or 2 in a WYSIWYG program. Where you were once used to drawing text boxes and creating shapes any old place you wanted to, you now have to look at the blank screen starring wondering how to make your first box.
Well then it dawns on you, "I am playing in a different arena now." Well this short article may or may not help you understand how to navigate your way through this transition.
What to do first is draw out what you want. Even if you have this thought of what you want in your head. You know a rough sketch of general placement. Header here, footer there, menu bar over here.
Now what we have to do is look at how we are going to contain this stuff you have draw out here. In other words those boxes you used to draw in publisher or coffeecup now have to be <div> tags or you can do what I do and create tables.
This is what you do:
Well lets say for example purposes that you have a header and footer and on the left hand side you have a vert. bar you are going to put buttons in and a login etc.
So what you have here is a need for three horizontal tables. Width size will be 100%. The size at 100% will stretch the table to the size of the window it is being viewed in. You can also use a percentage as a width size when you place a table inside another table to make the width a percentage of the size of the table it is conatained in. I will get to that more in detail in a minute. This table (container ) is your header. Then create another table at 100% for the content area. And one more for the footer area.
Now for the header we cannot just create any shape inside dreamweaver so what is most practiced is the importing of a picture. Most make the header in photoshop. Or if you want you can use background colors in the tables to create colored boxes.
So now you have the three main areas but you wan to add text and images to the main content area in between the header and footer. So this is where you create 1 more table inside the '100%' table you hav already made. The size should be the same size as the header image. Most pages are viewed in a browser at 1250 width (pixels) so I would make a header that is 800 to 1000 on most, but each project can be different, all up to you. So now you have made the table inside the main container and set the width at 1000 to make this even numbers. Make sure to center it, and the header and footer images as well. By making tables inside the 100% tables we will stay centered no matter what browser or what width they are viewed in. So this new table inside the main container area with a width of 100 pixels should be made into let's say 2 columns. One collumn for the vertical menu bar on the left side for the buttons etc. and the other for the content area. Now that you have made the table go into the table with the cursor and press the "split" view just above the ruler in the left upper corner. There will be 3 options "code","split", and "design" these are the different viewing formats to create and edit your sites in. Any ways go into the split view and use the cursor to locate where you are in the code screen. Click on the cursor in the code portion of the split screen and find the you are in. Below this
You should have 2 sections of <td>td> tags. These are the columns. Inside the <td> without the / in it. you are going to put this: <td width="15%"> for the first one, and <td width="85%"> for the second one. What this does is creates two columns in the table and one will be 15% of the total 1000 pixel width and the other 85% of the width. Now here is where you can keep it simple and ad your content to these areas. Or you can get more creative. One way to get creative is to split these content areas up into more areas to be more precise where you put content. So what you do is right click and go to 'tables' then to 'split cell'. Split the cell on the left, the small one with the buttons into 2 rows. This will divide the area into 2 rows one you can add buttons the other a login area.
This technique is just one way to design in dreamweaver. I find this to be the easiest way to transcend into this program from a drag and drop method of previous designs.
Good luck hope this helps!
If you get frustrated, run out of time, or just do not want to design your own site anymore. We design sites for as little as $99. ( http://thegorillaadagency.com )