FRONTPAGE STEP BY STEP GUIDE

Transcription

1 IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1

2 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page 5 Downloading Files from the Web..... Page 6 Creating a New Folder.... Page 6 Renaming the Folder..... Page 6 Downloading the Files Page 7 Style Sheets... Page 8-20 What is a Style Sheet?... Page 8 How to create a Style Sheet..... Page 8 Specify styles for the Style Sheet.....Page 9-11 Viewing generated code for a Style Sheet.. Page 12 Saving a Style Sheet..... Page Example of the effects of a Style Sheet.. Page 13 Printing Style Sheet code.... Page Attaching Style Sheets to web pages Page 19 Removing Style Sheets from web pages... Page 20 Creating web pages from scratch.... Page 16 Saving web pages.... Page 16 Adding text to web pages. Page 20 Using tags to set styles to text.... Page Accessing HTML code... Page Adding the paragraph <p> tags to the HTML code.. Page 21 Checking that the tag is communicating with the Style Sheet... Page 22 Adding the heading <h1> tags to the HTML code. Page 24 Creating and Formatting Tables.. Page Inserting a table... Page 25 Formatting a table (border size, rows/columns, colour etc)... Page Getting back into table properties.. Page 26 Merging table cells Page P a g e 2

3 Resizing table columns and rows..... Page 28 Inserting and Resizing Images..... Page Inserting images Page 29 Resizing images..... Page Inserting text from a downloaded file.. Page HTML tags.... Page What are HTML tags?..... Page 34 Examples of HTML tags.. Page Using HTML tags to set the rest of the styles. Page Opening existing web pages... Page 38 Using the contents of one web page in another.... Page 39 Hyperlinks.... Page Creating links to web pages stored on our computer.. Page 42 Checking that hyperlinks work by using preview mode.... Page 43 Linking to external websites... Page 44 Opening external websites in a new window.... Page Attaching hyperlinks to images... Page Anchors (aka Bookmarks).. Page Creating anchors......page 48 Linking to anchors with hyperlinks Page Editing images in Photoshop.... Page Opening images in Photoshop Page 51 Resizing image width and height Page 52 Exporting images and colour depths Page 53 Cropping images Page 54 Independent tasks for revision.... Page RGB colour codes (web colours).... Page What are RGB colour codes? Page 57 Examples of some RGB colour codes Page How to set and modify RGB colours in style sheets and web pages. Page Printing Page Highlighting sections of HTML code Page 65 P a g e 3

4 What this guide is for This guide will help you learn how to use Microsoft FrontPage in order to pass unit 15 of the IGCSE ICT syllabus. Unit 15 requires you to be able to design and edit web pages and you will be asked to do this in up to two different ways: Create web pages from scratch Open pre-made web pages and edit them The guide uses the 2007 past paper question as a basis for its activities and tasks but skills you gain will also apply to other past paper questions. How to open FrontPage Click Start Button All Programs Microsoft Office Microsoft Office FrontPage 2003 This will open FrontPage. The program s main screen can be seen below: P a g e 4

5 The FrontPage Menu Bar The menu bar in FrontPage is very similar to the one found in Microsoft Word If you have used Word 2003 before then you should be able to transfer your skills to FrontPage very easily. The screenshot below shows you the menu bar items that you will use most often: File: New Page Save As Preview in Browser Format: Font Styles / Sizes / Colours Background Colours Style Sheets Insert: Pictures Hyperlinks Table: Insert a new Table Edit existing Table P a g e 5

6 Task 1 Download files to use within the web pages Download the following files from to your own work area: SPECIMEN1.TXT SPECIMEN2.HTM SPECIMEN3.HTM SPECIMEN4.GIF SPECIMEN5.JPG SPECIMEN6.JPG SPECIMEN7.CSV 1.1 Downloading Files How to do it If you are asked to download files from a web site you should first create a folder where you can store them. This helps you to quickly find the files whenever you need them. Creating a new folder: 1. Open your web authoring past paper folder 2. Right click in a blank area 3. Click New 4. Click Folder Renaming the new folder: 1. Replace the text New Folder with a more suitable name (I suggest Downloaded Files ) P a g e 6

7 Download the files: 1. Open your Web Browser (Internet Explorer for example) 2. Enter the web address of the website that contains the files to download into the web browser s address bar and then press the Go Arrow 3. Right click each of the files Save target as (if you are using Internet Explorer) Save link as (if you are using Firefox / Chrome) 4. Point each file to save in the new folder you created earlier (Downloaded Files) 5. Click Save 6. Check that each file has saved into the folder P a g e 7

8 Task 2 Create a style sheet Using a suitable software package, prepare the following styles for use within all pages on this website: h1 dark blue, sans-serif font, 36 point, centre aligned, bold h2 green, serif font, bold, 14 point, left aligned h3 blue, sans-serif font, 12 point, left aligned li blue, sans-serif font, 10 point, bullet points, left aligned p black, sans-serif font, 10 point, left aligned Save the style sheet and attach it to each web page as you create it. 2.1 What is a Style sheet? A style sheet is kind of similar to the master slide on a PowerPoint. Style sheets can be used to specify fonts styles, colours, sizes, alignment, bullet points etc before objects are actually added to web pages. Once the style sheet is applied to web pages, these specifications will automatically be applied to the correct objects. This saves a lot of work and time Creating a Style sheet How to do it: 1. Click the Black Arrow to the right of the Page Icon 2. Click Page 3. Click the Style Sheet tab 4. Choose Normal Style Sheet 5. Click OK P a g e 8

9 2.3 Specifying Styles for the Style Sheet How to do it: At this stage our style sheet is empty. Our next task is to specify the styles required by the question (blue fonts, 36 points in size etc). This is how you do it: Open the style window: 1. Check that the style sheet is open. The name of your style sheet should end with.css (don t worry about the actual name at this point we will choose one when we save later). 2. Click Format 3. Click Style Select the HTML tag you want to apply the style to: 1. Slect the correct HTML tag from the list (h1, h2, li etc) 2. Click Modify P a g e 9

10 Specify the correct styles to the HTML tag: 1. Click Format 2. From the menu select what you would like to change Font --- for font, colour, bold, italics, size Paragraph --- for align left/right/centre Numbering --- for numbers and bullets Specify the font styles using the Font Window: 1. Choose a Font Comic sans = sans-serif font Times New Roman = serif font 2. Choose a Font style (Bold/Italic) 3. Choose a Size 4. Choose a Colour 5. Click OK Specify alignment styles using the Paragraph Window: 1. Click Format 2. Select Paragraph P a g e 10

11 3. Choose the correct Text Alignment 4. Click OK Specify alignment styles using the Numbering Window: 1. Click Format 2. Select Numbering 3. Choose the type of bullet you want Plain Bullets or Numbered Bullets 4. Select the bullet style 5. Click OK Specify alignment styles for the rest of the HTML tags: 1. Your styles list will only show the styles that you have created. 2. To add styles to more HTML tags you need to select HTML tags from the list menu. NOTE: At this stage you would repeat the above instructions add create the styles for the rest of the HTML tags specified in the task P a g e 11

12 2.2 - View the style s code How to do it: Once you have created the styles for each of the tags specified in the question, you should be able to see the HTML code that has been created. The code will be viewable in the style sheet that we created earlier: 2.3 Saving the style sheet How to do it: To save the style sheet for later use you should do the following: 1. Click File Save As 2. Browse to your web authoring past paper folder 3. Name the Style Sheet ( Style will do) 4. Choose CSS Files from the Save as Type: box 5. Click Save P a g e 12

13 6. The style sheet should now be safely in your past paper folder NOTE: We will attach this style sheet to a web page later. Example of what effect a style sheet has on web pages: The images below show you how style sheets effect how web pages look. The first image is before the style sheet is attached to the page. The second image shows the changes that the style sheet has made to the same web page. Notice how the fonts, colours and alignment styles have automatically applied themselves to the objects on the web page. Before the style sheet was attached: After the style sheet was applied: P a g e 13

14 Task 3 Print the style sheet Print a copy of the style sheet that has to be attached to each page as HTML source code. Make sure that your name, candidate number and centre number are printed on the page. 3.1 Printing style sheet code How to do it: To print style sheets you should do the following: Open the style sheet (if you have closed it): 1. Click File 2. Click Open 3. Browse to the style sheet 4. Make sure that Files of type: is set to All Files 5. Click the style sheet 6. Select Open 7. The style sheet will open: P a g e 14

15 Add your name and numbers to the style sheet: 1. Make some room at the bottom of the style sheet 2. Type in the required information (name and numbers) Print the style sheet: 1. Click File 2. Click Print 3. Select the correct printer 4. Click OK NOTE: NEVER print anything without your name and numbers added. P a g e 15

16 Task 4 Creating a new web page Using an appropriate software package, create a new homepage called HOMEPAGE.HTM Creating a new Web page from Scratch How to do it: Sometimes your examination task may ask you to start a new web page from scratch. Fortunately this is very easy as shown below: 1. Click the Black Arrow to the right of the Page Icon 2. Click Page 3. On the next screen click Normal Page 4. Click OK 4.2 Save the web page with the correct name - How to do it: To save the web page with a specific name you should do the following: 1. Click File 2. Click Save As 3. Browse to your web authoring past paper folder 4. Name the file HOMEPAGE.htm 5. Make sure that Save as type is set to Web Pages 6. Click Save P a g e 16

17 Task 5 Visualise the layout of the web page HOMEPAGE.htm will have a table and menu options across the bottom. The page should look like this: NOTE: This task is not asking you to do anything other than understand where objects will go. P a g e 17

18 Task 6 Attach the external style sheet created in task 2 to the web page Attach the external style sheet that was saved in task 2 to HOMEPAGE.htm. 6.1 Attaching style sheets to web pages How to do it: A style sheet will only change how a web page looks after the style sheet is linked to the web page. The examples below show you how this is done: 1. Open the web page you want to attach the style sheet to 2. Click Format 3. Click Style Sheet Links 4. Click Add 5. Browse to the style sheet that you want to attach 6. Click the style sheet 7. Click OK 8. Click OK again P a g e 18

19 6.2 Removing style sheets from web pages How to do it: Sometimes you need to remove a style sheet in order to attach a different one. The example below shows you how this is done: 1. Open the web page you want to remove the style sheet from 2. Click Format 3. Click Style Sheet Links 4. Click the style sheet 5. Click remove 6. Click OK P a g e 19

20 Task 7 Add some text to the web page and set text styles In the top left corner add the text Last edited by: and then add your name, centre number and candidate number. Set the text to style p. 7.1 Adding text to web pages How to do it: Adding text to a web page is easy, you just need to make sure that you are typing it in the correct place: 1. Open the HOMEPAGE.htm web page file that we saved in task 4 2. Position your curser in the top left of the web page 3. Type in the required text (Last edited by: name/numbers) 7.2 Setting text styles: - How to do it Accessing HTML code so we can change style of text We need to tell FrontPage that this text is a paragraph. This is so the style sheet can apply the formatting that we set up for the p tag (paragraph tag) in task 2. To do this we need to view the code for our text: 1. Highlight the text and then click the Code tab P a g e 20

21 2. This will take us to the web page s HTML code: Setting the text to style p: Once we have access to the code, we need to surround our line of text (Last edited by ) with something called a tag. Tags are used to instruct web browsers how to display objects on the web page (text styles for example). Tags almost always work in pairs with an opening tag <> and a closing tag </>. The opening tag tells the browser to start applying the style and the closing tag tells it to stop applying the style. The tag we need to surround our text with is the <p> </p> (paragraph) tags. 1. Position your curser to the left of the text 2. Type in <p> 3. FrontPage will automatically assume you also want the closing tag </p>. 4. Move the closing tag </p> to the end of the text P a g e 21

22 Checking that the style sheet has applied the correct formatting: Now that we have surrounded the line of text with the <p> </p> tags, the style sheet can apply the formatting that we set up during task 2. To see if this has happened we need to go back into Design View to see the effects. 1. Click the Design tab 2. This will take us back into Design View and you should notice that the style sheet has indeed altered the text to match the formatting specified in task 2 (black, sans-serif, 10 points, left aligned): Before style was applied After style was applied P a g e 22

23 Task 8 Enter a page heading and set text styles Enter the heading Rootrainer Trees. Set the text to style h1. Adding the heading: Task 8 is almost the same as task 7 apart from different text, different text position and a different set of tags: 1. Open the HOMEPAGE.htm web page file in Design View 2. Position your curser under the first piece of text 3. Type in the required heading (Rootrainer Trees) Accessing HTML code so we can change style of text: 1. Highlight the text and then click the Code tab P a g e 23

24 Setting the text to style h1: 1. Position your curser to the left of the text 2. Type in <h1> 3. FrontPage will automatically assume you also want the closing tag </h1>. 4. Move the closing tag </h1> to the end of the text Checking that the style sheet has applied the correct formatting: Go back into design view and check that the correct formatting has been applied from the style sheet (dark blue, sans-serif, 36 points, centre aligned, bold). Before style was applied After style was applied P a g e 24

25 Task 9 Laying out the page with a table Below the heading, create a table which has 4 rows and 2 columns. Merge the cells to create the table as shown to the right: Set the cell padding for the table to 3. Set the cell spacing for the table to 5 Set the width of the table to 100% Set the table border to 2. Set the table background colour to light yellow. 9.1 Creating and formatting a table How to do it: Tables are used to provide the layout for a web page. Tables can be formatted to alter row / column numbers, background colours, widths, border thickness etc. Inserting the table: To insert a new table you would do the following: 1. Click Table 2. Click Insert 3. Click Table Formatting the table: 1. In the table properties window you can set all of the required table formatting such as: Row and column numbers Width (in percent) Cell Padding / Cell Spacing Border size and Background colour 2. When you have set the table up correctly click OK P a g e 25

26 Your table will be inserted into the HOMEPAGE.htm web page: Getting back into table properties at a later time: You can get back into table properties at any time by: 1. Right click the table 2. Select table properties This is useful if you need to correct mistakes or add / remove rows and columns. 9.2 Merging (joining) table cells How to do it: The image in task 9 requires us to merge (or join) some of our cells so that we are left with the correct layout. P a g e 26

27 To merge table cells you should do the following: 1. Highlight the cells across the top row of the table 2. Right click anywhere in the highlighted section 3. Select Merge Cells 4. Repeat for the other sections that require merging. Your table should look like this when you are finished: P a g e 27

28 9.3 Resizing columns and rows How to do it: Table columns and rows can be resized to help layout the page exactly. In the image on task 9, cell D was wider than cells B and C. To resize columns / rows you should do the following: 1. Click the border of the row / column and hold the mouse button down 2. Drag the border to the size you want 3. Your table should look like this when you are finished: P a g e 28

29 Task 10 Importing an image Import the image SPECIMEN4.GIF and place it in cell D Set the height to 250 pixels and maintain the aspect ratio Make sure that the whole image is visible Importing and Resizing images How to do it: Inserting / Importing images in FrontPage is very easy. You just have to make sure that you have the image on your computer, ready to import. You SHOULD NOT try to copy and paste images in FrontPage. Importing the image: To insert an image into FrontPage you would do the following: 1. Position your mouse curser into the location where you want the image to appear (cell D in the table) 2. Click Insert 3. Click Picture 4. Click From File 5. Browse to the folder we created in task 1 (Downloaded Files). 6. Click on the SPECIMEN4.GIF image 7. Click Insert 8. The image will be inserted into cell D P a g e 29

30 Resizing the image: When an examination question asks you to resize an image it will also specify whether or not you should maintain aspect ratio. Maintaining Aspect Ratio Resizing the image whilst keeping the correct dimensions Image in correct proportions Not Maintaining Aspect Ratio Resizing the image whilst distorting the dimensions Image distorted The task wants us to resize the image to 250 pixels high and maintain aspect ratio. To do this you should: 1. Right click the image 2. Select Picture Properties 3. Find the Size section 4. Make sure the Keep aspect ratio box is ticked 5. Set the height of the image to 250 pixels 6. Click OK NOTE: If you needed to distort the image for any reason you would simply uncheck the Keep aspect ratio box before setting a new height. P a g e 30

31 Your web page should look like this now: P a g e 31

32 Task 11 Insert text that has been supplied to you in a downloaded text file Using the contents of the file SPECIMEN1.TXT: Place the text Our company.. to the customer. into cell A. Place the text Plants for all..evergreen. into cell B. Place the text You can contact us in many ways. into cell C. Place the text Through our website..of our services. into cell E Inserting text that has been supplied to you How to do it: Sometimes you are asked to use text that has been supplied to you within one of the documents that you download at the start of the question paper. In this case we need to get our text from the file named SPECIMEN1.TXT that we downloaded back in task 1. This is how you do it: Open the text file: 1. Open your downloaded files folder 2. Open the file named SPECIMEN1.TXT Select and copy the correct piece of text: 1. Select the line of text Our company..to the customer. 2. Right click it and the select Copy P a g e 32

33 Paste the text into the correct section of the web page: 1. Position your curser into cell A of the table 2. Right click and the select Paste 3. Repeat for the rest of the information 4. Your completed task should look like this: P a g e 33

34 Task 12 Use tags to attach our style sheet to the text items in the table Set the text: Our company.. to the customer. as style h2 Plants for all soil types: as style p. acid as style li alkaline as style li neutral as style li and all types of plants: as style p deciduous as style li coniferous as style li evergreen as style li You can contact us in many ways. as style h2 Through our website..of our services. as style h Using HTML tags to set styles How to do it: What are HTML tags? In tasks 7 and 8 we used 2 different tags to change how some of the text on our web page looked. The tags used in those tasks were the <h1> </h1> tag and the <p> tag. Tags are used to alter how items on our web pages look and they can also be used alongside style sheets to specify exact font styles, colours, sizes etc. Tags almost always work in pairs with a start tag <> and a close tag </>. Common tags that you should know include: Tags Meaning Example <h1> </h1> Heading 1 (large heading) <h1> Text </h1> <h2> </h2> Heading 2 (sub heading) <h2> Text </h2> <h3> </h3> Heading 3 (small sub heading) <h3> Text </h3> <li> </li> List (like bullet lists) <li> Text </li> <p> </p> Paragraph <li> Text </li> <br> Line break (move text to next line) Text <br> <b> </b> Bold <b> Text </b> <i> </i> Italic <i> Text </i> P a g e 34

35 Examples of the effects of HTML tags: Examples of the HTML tag coding: Using HTML tags to set the styles required by task 12: To set the rest of the tags required by the question you should do the following: 1. Highlight the text that needs to be set to style <h2> 2. Access the web page HTML code by clicking the Code tab 3. Surround the line of text with the <h2> </h2> tags 4. Click design to check that the tag has set this line of text to style h2: P a g e 35

36 Tag has allowed the style sheet to apply the h2 style to the text. My text has changed to green, serif font, bold, 14 point size and left aligned. Repeat for the rest of the required tags: 1. Repeat this with all of the other tags required for task Your finished task should look like this: Correct styles applied to the text on the HOMEPAGE.htm file. SCREENSHOT OF HTML TAG CODING ON NEXT PAGE: P a g e 36

37 P a g e 37

38 Task 13 Open an existing web page and use it s contents on HOMEPAGE.htm Open SPECIMEN3.HTM. Place the contents of SPECIMEN3.HTM below the table of HOMEPAGE.HTM to create a menu The menu should be inserted as a new table with a border size of 0 Set the text to style h Opening SPECIMEN3.HTM and moving contents How to do it: Opening the specimen3.htm web page: Sometimes your examination task may ask you to open existing web pages that have already been started. To do this you need to find files with the.htm extension (.htm is the file name given to web pages): 1. Click File 2. Click Open 3. Browse to the web page file (.htm) that you want to open (SPECIMEN3) 4. Click the file 5. Click Open 6. This will open the SPECIMEN3.HTM file: P a g e 38

39 Place the contents of SPECIMEN3.HTM below the table in HOMEPAGE.HTM: This task requires us to simply copy the table found in SPECIMEN3.HTM and paste it into the correct position underneath the table in HOMEPAGE.HTM. 1. Select the table in SPECIMEN3.HTM 2. Right Click 3. Select Copy 4. Position your curser under the table in HOMEPAGE.HTM 5. Right Click 6. Select Paste 7. The table from SPECIMEN3 will appear underneath the main table in HOMEPAGE: P a g e 39

40 Use table properties to check that the table borders are set to 0: The question said that the menu table borders should be set to 0. To do this we need to access Table Properties: 1. Select the new table 2. Right click 3. Select Table Properties 4. Find the Borders Property and ensure that it is set to 0 5. Click OK Use HTML tags to set the table s text to style h2: 1. Highlight the text that needs to be set to style <h2> 2. Access the web page HTML code by clicking the Code tab 3. Surround the text with the <h2> </h2> tags P a g e 40

41 4. At this stage your web page should look like this: P a g e 41

42 Task 14 Create hyperlinks from text Create a hyperlink from the menu item Try Bonsai to link to the file SPECIMEN2.HTM Create a second hyperlink from the menu item Order Form to point at the following website: The website should open in a new window called _external 14.1 Linking to web pages we have created How to do it: The first hyperlink is going to be inserted onto the text Try bonsai. The hyperlink will take us to a web page that we have already downloaded called SPECIMEN2.HTM. This is how you can add a hyperlink to link to web pages we have saved on our computer: 1. Highlight the text Try Bonsai 2. Click Insert 3. Click Hyperlink 4. Browse to the SPECIMEN2.HTM file 5. Click the SPECIMEN2 file 6. Click OK 7. Check that the link has been set (it should turn blue and underlined): P a g e 42

43 14.2 Using preview mode to test the hyperlink How to do it: In order to test that the hyperlink works we need to find the HOMEPAGE.HTM file and double click it. Double clicking the file will open it in Preview Mode. This shows us how the web page would look and work as if it was actually online. This is how you do it: 1. Save the HOMEPAGE.HTM file 2. Browse to the folder that contains the HOMEPAGE.HTM save file 3. Double click the file 4. Click your hyperlink 5. Check that it takes you to SPECIMEN2.HTM NOTE: You can also click F12 from within FrontPage to preview your web pages. P a g e 43

44 14.3 Linking to external web pages in a new window How to do it: You can also create links that take you to external web pages. External web pages are those that belong to someone else and are already online and available to view. We link to external websites using their URL (web address). External websites are usually opened in a new window. This is how you do it: Creating the link: 1. Highlight the text Order Form 2. Click Insert 3. Click Hyperlink 4. Enter the address of the website into the Address: Box (address given in task 14 question) Making the external website open in a new window named _external: 1. Click Target Frame P a g e 44

45 2. In the Target Setting box, type _external 3. Click OK 4. Click OK again 5. Save HOMEPAGE.HTM 6. Open the web page in Preview Mode and test that the link opens the correct website and that it opens in a new window: Hyperlink takes us to an external website External website opens in a new window New hyperlink P a g e 45

46 Task 15 Attach hyperlinks to images Create a hyperlink from the image of a tree on HOMEPAGE.HTM. The hyperlink should direct the user to the following website: The website should open in a new window called _external 15.1 Attaching hyperlinks to images How to do it: Hyperlinks do not need to be text based. You can also attach hyperlinks to images and these will direct the user to other web pages when the image is clicked. In this example I am going to use an image to link to an external website. This is how you do it: Creating the link: 1. Click the image of a tree that we inserted into HOMEPAGE.HTM 2. Click Insert 3. Click Hyperlink 4. Enter the address of the website into the Address: Box (I m just linking to the same external web page as in 14.3) P a g e 46

47 Making the external website open in a new window named _external: 1. Click Target Frame 2. In the Target Setting box, type _external 3. Click OK 4. Click OK again 5. Save HOMEPAGE.HTM 6. Open the web page in Preview Mode and test that the link opens the correct website and that it opens in a new window: Hyperlink takes us to an external website Image based hyperlink External website opens in a new window P a g e 47

48 Task 16 Using anchors (aka bookmarks) Type the text Top of page at the very bottom of HOMEPAGE.HTM Create an anchor named top which takes the user to the top of the page whenever the above text is clicked Creating anchors / bookmarks How to do it: Anchors / bookmarks are special types of hyperlinks that help you navigate around the same page. They are different from normal hyperlinks because they are not used to link one web page to another. For example in this task we are going to use an anchor that will take us from the bottom of the web page, to the top whenever the text that the anchor is attached to is clicked. This is how to do it: Create the anchor: 1. Open HOMEPAGE.HTM 2. Position your mouse curser at the top left of the web page 3. Click Insert 4. Click Bookmark 5. Name the anchor top 6. Click OK 7. The anchor will insert itself into the top left of the web page: P a g e 48

49 Add the text top of page to the web page: 1. Position your curser underneath the menu table 2. Type the text Top of page Use a hyperlink to connect the Top of page text to the anchor: 1. Select the text that you have just added (top of page) 2. Click Insert 3. Click Hyperlink 4. Click Bookmark 5. Click the bookmark that you named top 6. Click OK 7. Click OK again P a g e 49

50 Preview the web page to check that the anchor is functioning: 1. Save HOMEPAGE.HTM 2. Open the web page in Preview Mode and click the text Top of page to check that the anchor is working properly. If everything is correct, the text should be set as a hyperlink (blue and underlined) and the link should move you to the top of the page when it is clicked: P a g e 50

51 Task 17 Editing images using Adobe Photoshop Open the file SPECIMEN5.JPG in a suitable application. Change the width to 40 pixels and its height to 60 pixels. Ensure that the colour depth is 256 colours (8 bit colour) Save the file as SPECIMEN5.GIF. Open the file SPECIMEN6.JPG in a suitable application. Crop the plant pot out of the bottom of the image. Save the file as SPECIMEN6.JPG (replace original file). The image editor that is used in my school is currently Adobe Photoshop but this will vary from school to school. Photoshop can be used to open and edit all the main types of images including:.jpg.gif.png 17.1 Opening images in Photoshop How to do it: 1. Click the Start Button 2. Click All Programs 3. Click Adobe Photoshop In Photoshop click File Open 5. Browse to the file you wish to open (Specimen 5.jpg) 6. Click the file and then select Open P a g e 51

52 17.2 Resizing image width and height How to do it: Open the Image Size menu: 1. Click Image 2. Click Image Size Resize the image: 1. Uncheck the Constrain Proportions tick box 2. Enter 40 into the width box 3. Enter 60 into the height box 4. Click OK NOTE: We need to uncheck the Constrain Proportions tick box before we enter the new width and height because this image was required to be distorted when compared to it s original size. If we were required to keep the original dimensions we would have ticked the Constrain Proportions box Original Image 40 Resized Image P a g e 52

53 17.3 Setting image colour depth to 256 colours and saving the file as SPECIMEN5.GIF How to do it: Colour depth is the number of colours that each pixel in an image can be: 8 bit colour (used by GIFs) = each pixel can be any of 256 colours 24 bit colour (used by JPGs) = each pixel can be any of 16,800,000 colours To ensure that our image colour depth is set to 256 colours (8 bit) we simply need to save the image as a GIF. This is how you do it using Photoshop: 1. Click File 2. Click Save for Web 3. This will take you to the Export menu 4. Select the file type of GIF 5. Make sure that the number of colours is set to Click Save 7. Point the file to be saved in your Downloaded Files folder. 8. Make sure the file is named Specimin5.GIF 9. Check the Downloaded Files folder to make sure that the image has saved in the correct place: P a g e 53

54 17.4 Cropping images in Photoshop How to do it: If you are asked to crop, you will need to remove certain parts of an existing image and then resave. In this case we are being asked to crop out the plant pot part of the SPECIMEN6.JPG image. This is how you crop an image using Photoshop: Open the image and access the edit pictures menu: 1. Open SPECIMEN6.JPG in Photoshop 2. Click the Crop option which you can find on the tools menu bar to the left. Crop out the correct part of the image: 1. Drag the crop tool around the image 2. Use the crop handles to remove the pot from the bottom of the image 3. Click the tick button to make the crop permanent Save the image with the correct file name and with a file type of.jpeg: 1. Click File and then Save for Web 2. Select the.jpeg file type 3. Name the image SPECIMEN6 4. Click Save 5. Overwrite the old version of the image P a g e 54

55 Independent work - Opening an existing web page and editing Open the file SPECIMEN2.HTM. Import the image SPECIMEN6.JPG into the right cell of the table. Resize the image SPECIMEN6.JPG to 250 pixels wide and maintain the aspect ratio. Replace the text Candidate name (at the top of the page) with your name, centre number and candidate number. Replace the text click here (at the bottom of the page) with the image SPECIMEN5.GIF. Make this image a link to open the file HOMEPAGE.HTM in the same window. Save the file as SPECIMEN2.HTM (replace original file). Now let s see what you have remembered. You should be able to carry out the above tasks by yourself. If you run into trouble you can always refer back to the tasks in this guide that cover the above problems. After you have completed this task, SPECIMEN2.HTM should look like this: P a g e 55

56 Independent work - Create a second style sheet for use with SPECIMEN2.HTM Create a second style sheet named style2 Set the following styles: h1 50% red, sans-serif font, 36 point, centre aligned, bold, underlined h3 75% blue, serif font, 12 point, left aligned li 50% blue, sans-serif font, 10 point, bullet points, left aligned p Full green, sans-serif font, 10 point, left aligned Save the style sheet with the name suggested above Attach the style sheet to SPECIMEN2.HTM. READ ME: See if you can create and attach this style sheet independently. Notice how the colours in this task are not as straight forward as red, green, blue etc. You are sometimes required to use precise shades of colours. For help with these colours read pages below. SPECIMEN2.HTM should look like this when you have created the style sheet and attached: P a g e 56

57 RGB Colour Codes (Web Colours) What are RGB colour codes? Web colours are made up of 3 main primary colours. We call these RGB. Red Green Blue All colours used on web pages are made up of different combinations of RGB. The code used to create these colours is called hexadecimal and it is broken down as follows: #RGB Each primary colour can be assigned 2 digits or letters to determine what level of that colour to use. R G B Examples of some of the main RGB Colour Codes By entering different values into the Red, Green and Blue sections of the hexadecimal code we can create any colour from 16 million possibilities. Fortunately you do not need to remember many of these. The RGB colour code values that you need to understand are as follows: FF = 100% of the colour (maximum) C0 = 75% of the colour 80 = 50% of the colour 40 = 25% of the colour 00 = 0% of the colour (none) P a g e 57

58 Examples of pure RGB Colour Codes Pure colours use 100% (FF) Pure RED is FF,00,00 (100% RED, no GREEN, no BLUE) Pure GREEN is 00,FF,00 (no RED, 100% GREEN, no BLUE) Pure BLUE is 00,00,FF (no RED, no GREEN, 100% BLUE) Pure BLACK is 00,00,00 (no RED, no GREEN, no BLUE) Pure WHITE is FF,FF,FF (100% RED, 100% GREEN, 100% BLUE) R G B F F F F F F Example of Pure RED Pure red RGB colour code: FF, 00, 00 (100% RED, no GREEN, no BLUE) Example of Pure GREEN Pure green RGB colour code: 00, FF, 00 (no RED, 100% GREEN, no BLUE) P a g e 58

59 Example of Pure BLUE Pure blue RGB colour code: 00, 00, FF (no RED, no GREEN, 100% BLUE) Examples of darker Colour Codes Darker colours use 50% (80) Dark RED is 80,00,00 (50% RED, no GREEN, no BLUE) Dark GREEN is 00,80,00 (no RED, 50% GREEN, no BLUE) Dark BLUE is 00,00,80 (no RED, no GREEN, 50% BLUE) R G B Example of Dark RED Dark red RGB colour code: 80, 00, 00 (50% RED, no GREEN, no BLUE) P a g e 59

60 Example of Dark GREEN Dark green RGB colour code: 00, 80, 00 (no RED, 50% GREEN, no BLUE) Example of Dark BLUE Dark blue RGB colour code: 00, 00, 80 (no RED, no GREEN, 50% BLUE) And so on. The other possible shades of RGB colours that you may be asked to create are summarised below: 75% of the colour (C0) 25% of the colour (40) RED : C0,00,00 RED : 40,00,00 GREEN : 00,C0,00 GREEN : 00,40,00 BLUE : 00,00,C0 BLUE : 00,00,40 P a g e 60

61 How to set RGB colours for a style sheet or web page: The following method works for both style sheet colour choices or if you were altering the colour of text on a normal web page: On a style sheet: 1. Open or create the style sheet 2. Click Format 3. Click Style 4. Select the tag which requires the colour change 5. Click Modify 6. Click Font 7. Open the More Colours window from the colour menu: On a normal HTML web page: 1. Select the text you wish to apply the colour to 2. Click Format 3. Click Font 4. Open the More Colours window from the colour menu (see screenshot above): Select the colour you want: 1. Click the colour you want 2. Click OK P a g e 61

62 Example of modifying a colour by manipulating the RGB code: The RGB colour code in this example is: 80, FF, 40 This combination gives me a light green colour I am going to remove the green value completely to see what colour I am left with. After removing the green value completely my RGB colour code is now: 80, 00, 40 This leaves us with a mixture of RED and BLUE but no GREEN. This combination has given me a DARK PURPLE colour: P a g e 62

63 Task 18 Print web pages in both browser view and HTML code view Print HOMEPAGE.HTM as it is viewed in your browser. Print a copy of HOMEPAGE.HTM source code. Use a highlighter pen to show the area of the source code which attaches the first style sheet to the web page. Repeat the above tasks for SPECIMEN2.HTM. Examination questions always require you to print off 2 versions of your web pages: 1. A copy of the web page as it appears in a browser 2. A copy of the HTML source code Printing web pages as they appear in a browser How to do it: 1. Open HOMEPAGE.HTM in preview mode (double click the icon in your folder or press F12 from within FrontPage. 2. Click File 3. Click Print 4. Select the correct printer 5. Click Print NOTE: Check that your printout is complete and that your whole web page can be seen clearly. P a g e 63

64 Printing web page HTML code How to do it: 1. Open HOMEPAGE.HTM in FrontPage 2. Click the Code tab 3. Click File 4. Click Print 5. Select the correct printer 6. Click OK P a g e 64

65 Highlighting sections of HTML source code How to do it: Sometimes examination questions ask you to highlight key sections of the HTML code of your web site. For example task 18 requires you to highlight the section of HTML code that attaches the first style sheet to the web page. This is how you do it: 1. Take a highlighter pen 2. Take the printout of your HTML source code 3. Find the section of the code that attaches the style sheet to the web page (it will be near the top in the <HEAD> </HEAD> section. 4. Use the highlighter pen to colour in the code. Section of HTML code to highlight NOTE: To find the style sheet link in the code you should look for the name of your style sheet. For example my style sheet was called STYLE.CSS. Repeat steps for SPECIMEN2.HTM.. END OF GUIDE P a g e 65