P I L A R C H O W

3/11/11 - PART 1

CONTENT

• This week we’ve started making the website, and we’ve used a website which is a really good tutorial teaching us how to make a website from scratch. In this powerpoint we’ve shown that we’ve done the first two parts of the tutorial.

PART 1: SET UP YOUR SITE AND PROJECT FILES

STEP 1 -

• Firstly, we downloaded a zip file with necessary things for the website making. We put it into our sites folder. Afterwards, we created a new site and defined a local site folder.

PART 2: CREATING THE PAGE LAYOUT

STEP 2 – CREATE AND SAVE A NEW PAGE

• We set the page type and the layout, and also changed the title of the website that the people will see

STEP 3 – INSERT DIV TAGS

• The DIV tag is an HTML tag that acts as a container for text, images and other page elements. It is the basic building block of CSS layout. You place div tags on the page, add content to them, and use CSS to position them. First we added a div tag and changed the ID to container.

STEP 3 – INSERT DIV TAGS

• Afterwards we inserted another tag. In the Insert Div Tag box, we selected “After start of tag”, and then chose <div id=“container”>

STEP 3 – INSERT DIV TAGS• We kept on adding new div tags one after the other on split

view, and following the tutorial correctly I ended up with this:

STEP 4 – CREATE A NEW STYLE SHEET

• We created a style sheet, and then used this code: #container {

• width: 968px;• background: #000;• margin: 0 auto;• padding-left: 10px;• padding-right: 10px;• overflow: hidden;• }

STEP 5 – ATTACH THE NEW STYLE SHEET

• We attached the style sheet to the main page

STEP 6 – ADD THE MAIN IMAGES

• We added in the banner, which was a simple process. Following the tutorial, we got this:

STEP 7 – POSITION THE COLUMNS

• We positioned the columns right next to each other on our index page. To do that we inserted “float” right after the semi colon, and inserted “left” afterwards

WHAT WE’VE PRODUCED AT THE END OF THE WEEK