Adobe Dreamweaver: Site Layout
17/02/2014 § Leave a comment
Today, Ste took us a little further regarding site layout and planning. We began by opening up the software, creating a new HTML site and connecting our desktop folder to the file. He drafted an Illustrator page for us to use as a guide whilst creating the site which made it a lot easier to code and visualise.
When out file was set-up we saved it as usual (index.html) and the connected our stylesheet (courtesy of Ste!) so that the code we typed in would change our actual site. There are 2 ways to hold content in HTML:
- A table
- A DIV – container/tags
We then created a DIV for the outer wrapper – To code for this we use it in between the ‘body’ tags as that’s what is visible to the user (whereas head tags are hidden from the user) Again, rules are directed by ID tags.
In order for our elements to sit side by side we need to take it out of the document flow and to do this we used the ‘float’ command that we’re all ever so familiar with. To check that all this was working, we saved it and previewed it in Safari. The next step was to add some padding to the sidebar and some thumbnail containers to give a style to the site: