Dreamweaver Week 2

February 17, 2014 § Leave a comment

Today we are going to look out layout of images.

1. We began with loading the Illustrator file that was in the folder. This presented a layout that we were going to use, this is different from last week’s as it’s a bit further.

Image

We have defined a rule for the outer wrapper of the page. Whenever we set the left and right margins to auto the wrapper is then centred to the page, this is no matter what web page it is. The top margin is pretty self-explanatory, as is the margin bottom. We haven’t specified a height because it will grow as content is added to it.

Image

We then talk about the header, this sits inside the Outer Wrapper, because it’s inside we change it to 100%, we can then change the Outer Wrapper size and because everything inside it moves with it, the header will also expand.

Image

The side root folder is in the folder we saved to our desktop. We have to make sure we locate the site. This is mandatory each time we create a site.

Image

We then come up with this box at the side which locates all the pages in the folder.

Image

We opened a new .html page and named it “Index” and had to tell it that the CSS sheet existed.

Image

We used this and selected “Add Style Sheet.” This then showed it worked by changing the screen to grey – what the style sheet told it to do.

Image

Two ways to hold content in .html:
1. A table
2. “Div” container/tags – simply a box”
We are going to create a div for the Outer Wrapper, we want it to take on the rule declared for the “Outer Wrapper.” To code it – we use it inbetween the body tags because that’s visible to the user (head tags are hidden from the user.) Rules are given “ID”‘s by the hashtag.

The code generated a little box but there was nothing in it due to the fact there was nothing in the outerWrapper.

Image

Image

We then created a “div” for the header and typed and the text appeared in the box.

Image

We then had two elements side by side which were wrapped in the content wrapper. We created a content wrapper div and when something inside the main flow they can’t occupy the same horizontal space instead it goes to the next available space which is right underneath the margin. We need to take it out of the document flow in order to sit side by side, this can be done by the “float” command on the style sheet.

We then added more div sheets and previewed it in Safari to check everything was working.

Screen Shot 2014-02-17 at 16.54.23

Screen Shot 2014-02-17 at 16.56.42

We then wanted to add padding to the left sidebar. We then did some maths on the style sheet and took some numbers off the width and height and account for the padding.

We then inserted the thumbnail container. Instead of giving the thumbnail id’s we give them a class because we want to use it more than once.

Screen Shot 2014-02-17 at 17.04.28

We then duplicated the code.

Screen Shot 2014-02-17 at 17.06.21

 

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 Dreamweaver Week 2 at Leo Patterson.

meta

%d bloggers like this: