Web Authoring Mark Nicholls – ICT Lounge
Total Page:16
File Type:pdf, Size:1020Kb
Section 15: Web Authoring Mark Nicholls – ICT Lounge IGCSE ICT – SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e | 1 Section 15: Web Authoring Mark Nicholls – ICT Lounge 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 12 - 13 Example of the effects of a Style Sheet……………………………………………….……. Page 13 Printing Style Sheet code…………………………………………….………………………….….. Page 14 - 15 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 20 - 24 Accessing HTML code ……………………………..……………………………………………….… Page 20 - 21 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 25 - 28 Inserting a table……………………………………………………………………………….………….. Page 25 Formatting a table (border size, rows/columns, colour etc)…………........... Page 25 - 26 Getting back into table properties……………….……………………………………………. Page 26 Merging table cells………….……………………….……………………………………………..….. Page 26 - 27 P a g e | 2 Section 15: Web Authoring Mark Nicholls – ICT Lounge Resizing table columns and rows………………….…………………..……………………….. Page 28 Inserting and Resizing Images…………………………………………...………………….………. Page 29 - 31 Inserting images……………….…………..………………………………….……………..…………… Page 29 Resizing images………………………………………………………..…………….…………………….. Page 30 - 31 Inserting text from a downloaded file……………………..…………………………………… Page 32 - 33 HTML tags……………………………………………………………………………………………..………….. Page 34 - 35 What are HTML tags?…………………………………………………….………..…………….………. Page 34 Examples of HTML tags…………………………………………………………………….…………. Page 34 – 35 Using HTML tags to set the rest of the styles………………………………………………. Page 35 - 37 Opening existing web pages…………………………………………….…………………………….. Page 38 Using the contents of one web page in another………….………………………….….. Page 39 Hyperlinks………………………………………….……………………………….…………………………….. Page 42 – 45 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 44 – 45 Attaching hyperlinks to images………………………………………………………………...... Page 46 - 47 Anchors (aka Bookmarks)…………………………………………….…………………………………. Page 48 – 50 Creating anchors………………………………………………………………………..….……………...Page 48 Linking to anchors with hyperlinks……………………………………..……..….…………... Page 49 – 50 Editing images in Photoshop………………………………………….…………………………... Page 51 – 54 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 55 – 56 RGB colour codes (web colours)………………………….……….……………………………….. Page 57 – 62 What are RGB colour codes?………………………………………….…..……..….….……..…. Page 57 Examples of some RGB colour codes……………………………….…..……..….…………. Page 57 – 60 How to set and modify RGB colours in style sheets and web pages…….… Page 61 - 62 Printing………………………………………………………………...….……….………………..…………….. Page 63 – 65 Highlighting sections of HTML code……………………………………………...………...… Page 65 P a g e | 3 Section 15: Web Authoring Mark Nicholls – ICT Lounge 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 Section 15: Web Authoring Mark Nicholls – ICT Lounge The FrontPage Menu Bar The menu bar in FrontPage is very similar to the one found in Microsoft Word 2003. 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: Format: New Page Font Styles / Sizes / Colours Save As Background Colours Preview in Browser Style Sheets Insert: Table: Pictures Insert a new Table Hyperlinks Edit existing Table P a g e | 5 Section 15: Web Authoring Mark Nicholls – ICT Lounge Task 1 – Download files to use within the web pages Download the following files from http://www.ictlounge.com/html/webauthoring_2007_download_files.htm 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 Section 15: Web Authoring Mark Nicholls – ICT Lounge 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 Section 15: Web Authoring Mark Nicholls – ICT Lounge 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. 2.2 - 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 Section 15: Web Authoring Mark Nicholls – ICT Lounge 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 Section 15: Web Authoring Mark Nicholls – ICT Lounge 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