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.

screen-shot-2014-02-17-at-16-24-00

 

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:

  1. A table
  2. 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.

screen-shot-2014-02-17-at-16-45-15

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:

screen-shot-2014-02-17-at-17-08-17

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Adobe Dreamweaver: Site Layout at Taylor Sim.

meta

%d bloggers like this: