3/11/11 - PART 1    PILAR CHOW
CONTENT• This week we’ve started making the website, and  we’ve used a website which is a really good tutorial  teaching u...
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  folde...
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 ...
STEP 3 – INSERT DIV TAGS• The DIV tag is an HTML tag that acts as a container  for text, images and other page elements. I...
STEP 3 – INSERT DIV TAGS• Afterwards we inserted another tag. In the Insert Div  Tag box, we selected “After start of tag”...
STEP 3 – INSERT DIV TAGS• We kept on adding new div tags one after the other on split  view, and following the tutorial co...
STEP 4 – CREATE A NEW STYLE SHEET• We created a style  sheet, and then used  this code: #container {•    width: 968px;•   ...
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 insert...
WHAT WE’VE PRODUCED AT THE END         OF THE WEEK
Part 1 & 2
Upcoming SlideShare
Loading in …5
×

Part 1 & 2

373 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
373
On SlideShare
0
From Embeds
0
Number of Embeds
86
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Part 1 & 2

  1. 1. 3/11/11 - PART 1 PILAR CHOW
  2. 2. 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.
  3. 3. PART 1: SET UP YOUR SITE AND PROJECT FILES
  4. 4. 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.
  5. 5. PART 2: CREATING THE PAGE LAYOUT
  6. 6. 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
  7. 7. 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.
  8. 8. 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”>
  9. 9. 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:
  10. 10. 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;•}
  11. 11. STEP 5 – ATTACH THE NEW STYLE SHEET• We attached the style sheet to the main page
  12. 12. STEP 6 – ADD THE MAIN IMAGES• We added in the banner, which was a simple process. Following the tutorial, we got this:
  13. 13. 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
  14. 14. WHAT WE’VE PRODUCED AT THE END OF THE WEEK

×