Basic web sites design using dreamweaver

This is a basic tutorial about web site design:

1. Create a new folder with the name of your project, inside create a folder to keep images, a new one for css, and so on. (further i´ll explain you about those diferents files and formats).








2. Once you have done it, open dreamweaver. Over the right side there is a column with different panels, one of those panels is "files". There you can find "manage sites" and there you will search for "new site".










3. You´ve got two ways to define your site, basic or avanced. We will start with basic, firstable give a name to your site. We don´t have an url yet, so just leave it blank. Then it will ask you about a server technology, choice the first option. About the manage of your files, for this time choice edit local files, and search for the folder. Now we will say we are using "none" remote server connection. Finally click on "done", so there you are, a new site. Must got something like this:












4. Create a new html file. To could see and understand about the code generated, choice the split view.

5. On the upper side of the document you will find the views options, the toolbars, the elements such as tables, images, links, etc. Please explore those options to get an overview of this software.















6. Remember, designing with tables is like playing with a puzzle. You must cut the pieces on your design and then join them inside a table. So, think about a good way to create logical tables, and get the pieces inside. Try to create as few tables as possible, each new table means weight on your files.










7. With our example we will create a table with 2 rows and 2 columns, width= 780 pixels, border=0 and space between cells= 0. By control+j we can define page attributes, such as margins, background or font.















8. Select the first column and define the width on the lower side of the document, we will give 319 pixels because the pencil´s image size defines it. It´s recomendable to defines widths, but not to defines heights, becuase it could generate visualization conflicts.












9. Go to the firts row, set the image "cabezote.jpg" as a background. Include this image in the first cell to define the height of the row.


















10. Include the image "lapiz.jpg" in the first cell of the second row.
















11. One of the ways to solve this design is creating a new table inside the last cell, it will have text, links and the image called badge. Next class we will see it.