2. 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.
3. STEP 1 – INSERT AN IMAGE BY USING
THE INSERT MENU
• We left two spaces in the left column, and inserted
the image.
4.
5. 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
6. 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).
7. 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:
9. 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.
10. 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
11. • Then after following the tutorial, we changed the
font and sizes of the words in the CSS file.
12. • In the end it looked like this. (the question mark is an
accident and we’ve changed it already)
13. 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.