part 3 & 4
DESCRIPTION
TRANSCRIPT
P I L A R C H O W
24/11/11 – PART 3
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