Part 3 & 4
Upcoming SlideShare
Loading in...5
×
 

Part 3 & 4

on

  • 268 views

 

Statistics

Views

Total Views
268
Views on SlideShare
180
Embed Views
88

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 88

http://s12410iea.blogspot.com 79
http://s12410iea.blogspot.hk 9

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Part 3 & 4 Part 3 & 4 Presentation Transcript

  • 24/11/11 – PART 3 PILAR CHOW
  • CONTENT• This week we’ve gone on to the third part of the tutorial, which is inserting images, links and text into the front page.
  • STEP 1 – INSERT AN IMAGE BY USING THE INSERT MENU• We left two spaces in the left column, and inserted the image.
  • ADDING THE REST ON• We changed the design of the website – added a main image and changed the banner. We used the brushes tool on photoshop to create the effects. But the main image is still the same, with two pictures blended in together
  • STEP 2 – FORMAT TEXT WITH CSS• Firstly we created a new CSS rule, which said that it would apply to all <body> elements. We then changed the font to Trebuchet MS, Arial, Helvetica, sans-serif and changed the colour to black (#000).
  • STEP 3 – FORMAT HEADINGS AND CREATE LINKS• Since we don’t have any text besides our headings, we didn’t do anything to it. So to tag each of the three headings as links, we had to create three different websites which we would design later. We highlighted the text, and browsed for the files. This is the result:
  • PART 4 – ADDING THE MAIN IMAGE TEXT
  • STEP 1 – ADD THE DIV TAG AND TEXT• Firstly we inserted a DIV tag, and created a new CSS rule for it. In this rule, we changed the background to white and made the box 300px wide.
  • STEP 2 – FORMAT THE TEXT• We changed the first line to heading 2, the words to heading 4 and our names to heading 5, so our code looked like this
  • • Then after following the tutorial, we changed the font and sizes of the words in the CSS file.
  • • In the end it looked like this. (the question mark is an accident and we’ve changed it already)
  • STEP 3 – POSITIONING THE DIV TEXT• We used rulers to guide us and help us to know where we would position our text. To do that we clicked inside the top and side ruler and dragged out two green lines each to adjust where our text would go.
  • • And then we readjusted it