HIGHER. Computing Science. Web Design & Development Implementation Tasks. Ver 8.9

Size: px

Start display at page:

Download "HIGHER. Computing Science. Web Design & Development Implementation Tasks. Ver 8.9"

Aldous Poole
5 years ago
Views:

1 HIGHER Computing Science MADRAS COLLEGE St. Andrews Web Design & Development Ver 8.9

2 Contents Introduction What s included in this Booklet? 2 Page Web 1 Setting up the Pages for the Student Cooking Website 3 2 Setting up Colours on the Student Cooking Website 7 3 Floating Images on the Student Cooking Website 8 4 Setting up Spacing on the Student Cooking Website 10 5 Sizing Elements on the Student Cooking Website 11 6 Styling the Navigation Bar of the Student Cooking Website 12 7 Creating a Survey Questionnaire for the Student Cooking Website 13 8 Interactive Image Sizes on the Student Cooking Website 14 9 Creating JavaScript Functions to Interactively Change Image Properties Creating Roll-Over Images on the Student Cooking Website Interactive Hidden Content on the Student Cooking Website Creating a Completely Interactive Page on the Student Cooking Website Completing the Student Cooking Website 20 1

3 Introduction What s Included in this Booklet? This task booklet has been created to cover the web design and development implementation section of the Scottish Higher Computing Science course. As you complete the tasks in this booklet you will use the following HTML, CSS and JavaScript to code a complete, interactive website: HTML (page structure) HTML (forms) CSS (appearance & position) CSS (navigation bar) Javascript (mouse events) <header> <nav> <main> <section> <footer> <form> id attribute input - text, number, textarea, radio, submit, select validation - length, presence, range display (block, inline, none) float (left, right) clear (both) margins padding size (height, width) list-style-type:none hover functions onmouseover onmouseout onclick It is assumed when you work through the tasks that you are already familiar with: HTML CSS <head>, <link>, <title>, <body>, <h1> <h2> <h3>, <p>, <div>, <a> <img>, <audio>, <video> <ul>, <ol>, <li> text: font-family, font-size, color, alignment background color 2

4 Implementation Task 1 Setting up the Pages for the Student Cooking Website Your teacher/lecturer will supply you with a Student Cooking Website folder. This folder contain three sub-folders that in turn contain the following files: An additional folder is supplied containing text for the website. When instructed to you may copy and paste the text into each web page you create rather than typing out long paragraphs. 3

5 The student cooking website has the following structure. Home Page Italian Indian Thai Chinese Survey Pizza Basics Three Curry Recipes Red and Green Curries Woks Pasta Basics Spices Explained Stir-fry Ingredients The wireframe below shows the consistent content that will appear on every page in the website. Home Page Cooking for Students cookingbanner.jpg <header> Home Italian Indian Thai Chinese Survey <nav> <main> Links to famous chef s pages <footer> 4

You may use any program you like to edit your web code. The website structure diagram and wireframe should be used to create and save all of the pages in the website. Follow the steps below.

6 Open the Website Template.html file in a suitable editor. Two popular code editing applications are Notepad++ and Brackets (shown on the right). Professional developers often have favourite code editors selected for: the editing facilities they offer their ability to organise the files they are writing and ease of use. You may use any program you like to edit your web code. The website structure diagram and wireframe should be used to create and save all of the pages in the website. Follow the steps below. Step 1 Edit the template file to create the home page. change the title add the name of the CSS file - cookingstyles add the heading of the website shown on the wireframe add the name of the heading/banner graphic shown on the wireframe add the home page (home.html) and the main sub-pages (shown on the structure diagram and wireframe) to the <ul> element find the website addresses for three famous chefs of your choice and add them as hyperlinks to the footer information. Step 2 Save the home page to the HTML folder as home.html. Step 3 Test the home page in a browser to make sure all the content you added displays correctly. 5

Step 4 Now save the file you have created over and over again (once for each page in the website structure diagram) each time changing: the page title the file name (Note - the file names you use

7 Step 4 Now save the file you have created over and over again (once for each page in the website structure diagram) each time changing: the page title the file name (Note - the file names you use when you create the main subpages must match the names you used in the <nav> area of the home page. If you use different names navigation hyperlinks will not work) When you have saved each web page your HTML folder should contain 13 separate files (your file names may differ from the picture on the right). You can delete the original Website Template.html file if you wish. Step 5 Open the home page in a browser and test the navigation. As every page is currently identical you will have to look at the URL to confirm that the correct page is showing. If you find you are missing any pages you should ensure you create them now. In later tasks you will be asked to open up these template pages and add content to them. 6

Implementation Task 2 Setting up Colours on the Student Cooking Website Developers often match web page colours to colours that will be found in their website.

8 Implementation Task 2 Setting up Colours on the Student Cooking Website Developers often match web page colours to colours that will be found in their website. This may be a graphic, company logo or even a video. The graphic below is the banner image you added to the cooking website. This could be used to select colours. A bold colour palette using the strongest colours A subtle colour palette using quieter shades Navigate to the CSS folder and open the cookingstyles.css file in an appropriate editor. Follow the steps below. Step 1 Using the w3schools.com CSS Colours page or a suitable colour palette website, find four or five colour values that will work with the cooking banner image. Take a note of the colours (names, rgb or hex values) to use later. Step 2 Step 3 Add a few words of text to the <main> element of the cooking home page. The text will be used simply to ensure you can see any colour that you apply to this element and will be changed to the actual page text later. Using grouping selectors where appropriate write CSS declarations to add background colours and text colours to the following elements. <body> <header> <nav> <main> <section> <footer> <h1> <p> Step 4 Test the home page in a browser. If you are not happy with the colours you selected edit the CSS declarations until you are satisfied with the look of your website. 7

Implementation Task 3 Floating Images on the Student Cooking Website The wireframe for the cooking website shows that the image in the header element is positioned on the right hand side of the page

9 Implementation Task 3 Floating Images on the Student Cooking Website The wireframe for the cooking website shows that the image in the header element is positioned on the right hand side of the page and the text in the introduction paragraph wraps round the student image. Home Page <h1> Cooking for Students cookingbanner.jpg Home Italian Indian Thai Chinese Survey <img> <img> student.jpg Introduction to student cooking website <p> Links to famous chef s pages Navigate to the student cooking website folder and ensure the cookingstyles.css and home.html files are open in an appropriate editor. Follow the steps below. Step 1 Step 2 Step 3 Step 4 Within the <main> element of the home page add a new paragraph element and the student.jpg image. Copy and paste the supplied text for the home page into the paragraph element. You ll find this is in a file called home page intro.txt. Add CSS declarations to float the h1 heading Cooking for Students and both the cookingbanner and student images. Add additional CSS declaration to ensure that all future content placed with <header>, <nav>, <main> and <footer> elements never overlaps into another of these elements. Test the website in a browser to ensure the images are positioned correctly and that the paragraph of text flows around the student image. Fix any errors. 8

10 Floating Images on the Student Cooking Website (task 3 continued) Positioning objects is often not as simple as applying float to a single image or paragraph. More complex layouts often require container element such as <div> or <section> added to code. Containers are used to surround several other elements for the purpose of styling them as a group. In this way the position of multiple objects can be controlled. The wireframe for the Red and Green Curries page is shown. Red and Green Curries Page cookingbanner.jpg Cooking for Students Home Italian Indian Thai Chinese Survey Thai ingredient 160 x 120 Thai ingredient 160 x 120 Thai ingredient 160 x 120 List of common Thai curry ingredients Instructions to make Thai Green Curry Thai Green.jpg 200 x 150 Instructions to make Thai Red Curry Thai Red.jpg 200 x 150 Links to famous chef s pages Ensure the HTML file you created for the Red and Green Curries page in task 1 and the cookingstyles.css files are both open in an appropriate editor. Beware! This task will require a bit of problem solving and some trial and error to get right. Step 1 Step 2 Step 3 Step 4 Step 5 Within the <main> element of the red and green curries page add the supplied HTML code for the page. You ll find this is in a file called red and green curries.txt. Within the new HTML code you will see that each of the five graphics have already been assigned one of two classes called thaiingredient and thaicurries. Add css declarations to resize the images as shown on the wireframe design. Add container elements (<div> </div>) around the content you wish to group. Add additional CSS declarations to ensure the graphics and text are positioned as shown in the above wireframe design. Test the website in a browser to ensure the images are positioned correctly and that the paragraph of text flows around the student image. Fix any errors. 9

11 Implementation Task 4 Setting up Spacing on the Student Cooking Website Below is an annotated wireframe for the home page of the Student Cooking website. The annotations show the spacing required on the website. 30 pixel space to left of website name 20 pixel space between the right hand edge of the student image and the introduction text Home Page 50 pixel space above website name Cooking for Students cookingbanner.jpg Home Italian Indian Thai Chinese Survey Introduction to student cooking website student.jpg no space around banner image in header 20 pixel space between the bottom edge of the student image and any introduction text that wraps round the bottom of the image 10 pixel space above and to to left of chef links Links to famous chef s pages 10 pixel space above and below main content 10 pixel space around the outside of the introduction paragraph Navigate to the CSS folder and open the cookingstyles.css file in an appropriate editor. Follow the steps below. Step 1 Step 2 Step 3 Look carefully at the wireframe above and decide how you are going to implement the spacing noted on the design. You may wish to make notes. Write CSS declarations to implement the margins and padding you require to create the spaces noted on the wireframe. Test the home page of the cooking website in a browser to ensure your CSS declarations work correctly. Fix any errors. 10

12 Implementation Task 5 Sizing Elements on the Student Cooking Website The home page for the student cooking website is shown below. page width pixels header element height - 90 pixels banner image width pixels height - 90 pixels student image width pixels height pixels footer element height - 90 pixels Navigate to the CSS folder and open the cookingstyles.css file in an appropriate editor. Follow the steps below. Step 1 Step 2 Write CSS declarations to implement widths and heights for the website content that repeats across each page. The sizes are noted above. Test the home page of the cooking website in a browser to ensure your CSS declarations work correctly. Fix any errors. 11

13 Implementation Task 6 Styling the Navigation Bar of the Student Cooking Website The home page for the student cooking website is shown below. The screenshot shows how the page will look when the navigation bar has been styled Ensure the cookingstyles.css file in an appropriate editor and the home.html page is open in a browser to test your coding. There are no steps to follow in this task, just an instruction. Using the Implementation Examples booklet and any other references you have access to, implement a working navigation bar for the student cooking website. Ensure that you consider the following when implementing your CSS declarations: the colour of the navigation bar hyperlink text colour (remember the other links in the footer element of each page) hover colour text size text position height of the navigation bar distance between hyperlinks 12

14 Implementation Task 7 Creating a Survey Questionnaire for the Student Cooking Website The student cooking website has a separate Survey page, the purpose of which is to collect information for future site development. A wireframe design for the form is shown below. Personal Details First Name - text input box - max size 20 characters - not required Surname - text input box - max size 20 characters - not required Age < > 40 Would rather not say Favourite Food Drop down menu to pick favourite country on website (Italian, Indian, Thai, Chinese) - required Drop down menu to pick new country on website (Vietnamese, American, French, Spanish) - required Description of new cooking technique request text input box - max 500 characters - not required Please rate the following from 1= poor to 5 = excellent Ease of website use - range from 1 to 5 - required Quality of Information - range from 1 to 5 - required Taste of Recipes - range from 1 to 5 - required Permission for my information to be held and used for future developments Pernission Yes No Submit Ensure the HTML file you created for the Survey page in task 1 is open in a suitable editor. Within the <main> element, write code to implement the above design. You should ensure that: the form is complete and uses appropriate input types client side validation is implemented as noted on the design the survey headings and inputs are positioned as shown on the design 13

15 Implementation Task 8 Interactive Image Sizes on the Student Cooking Website A wireframe design for the <main> element of the Italian page is shown below. The design shows a heading, a flag graphic, a paragraph of text, two hyperlinks and four Italian graphics. The design has been annotated with some margin sizes. Sub Heading - Italian Cooking Paragraph about pizza and pasta. italyflag.png 75x75 <main> element Links to sub-pages for pizza and pasta margin of 50 pixels above each image italy1.jpg 140 x 140 italy2.jpg 140 x 140 italy3.jpg 140 x 140 italy4.jpg 140 x 140 margin of 40 pixels between each image Ensure the HTML file you created for the Italian page in task 1 and the cookingstyles.css file is open in a suitable editor. Follow the steps below. Step 1 Step 2 Within the <main> element of the italian page add the supplied HTML code for the page. You ll find this is in a file called italy.txt. Within the new HTML code you will see that each of the four italy images have already been assigned a class called italianimages. Add css declarations to the cookingstyles.css file to: size the four italy images add margins as noted on the wireframe design. Step 3 Add onmouseover and onmouseout events to each image. The events should make each image grow by an additional 30 pixels when the mouse passes over them, shrinking back to 140 x 140 when the mouse passes out of the image. Step 4 Test the Italy page of the cooking website in a browser to ensure your CSS declarations, element events and JavaScript code all work correctly. Fix any errors. 14

Implementation Task 9 Creating JavaScript Functions to Interactively Change Image Properties Before you start this task ensure that you have successfully completed task 8.

If the mouse is moved back and forth across the images it produces an unwanted jerky movement as the images themselves jump left and right.

16 Implementation Task 9 Creating JavaScript Functions to Interactively Change Image Properties Before you start this task ensure that you have successfully completed task 8. In this task you are going to fix the following problem. As each image grows in size (when the mouse passes over them), all the images to the right of the larger one are pushed to the right. If the mouse is moved back and forth across the images it produces an unwanted jerky movement as the images themselves jump left and right. The page would be more userfriendly if one image increased in size without any of the other images moving. Ensure the HTML file you created for the Italian page in task 8 is open in a suitable editor. Before you solve the above problem you should complete the following tasks: Add a <script> element to the <head> of the Italian page. Add two functions to the <script> element. One function to increase the size of the images to 170 x 170 and another function to return the images to 140 x 140. Delete the task 8 JavaScript code from the element events as shown below. Now add two function calls. One to each function you created earlier, within the <script> element. Think about the problem described above. Find and code a solution that will allow each graphic to change size without moving the position of any other graphics. If you require a clue, look carefully at the gaps between the images in screenshot shown to the right. 15

Implementation Task 10 Creating Roll-Over Images on the Student Cooking Website A wireframe design for the <main> element of the Stir Fry Ingredients page is shown to the right. prawns.

17 Implementation Task 10 Creating Roll-Over Images on the Student Cooking Website A wireframe design for the <main> element of the Stir Fry Ingredients page is shown to the right. prawns.jpg 290x150 soysauce.jpg 290x150 greenbeans.jpg 290x150 List of common stir fry ingredients Stir-fry Meal Combination of ingredients 1 Stir-fry Meal Combination of ingredients 2 Ensure the template HTML file you created for the Stir Fry Ingredients page in task 1 is open in a suitable editor. Follow the steps below. Step 1 Step 2 Within the <main> element of the Stir Fry Ingredients page add the supplied HTML code for the page. You ll find this is in a file called stir fry ingredients.txt. Within the new HTML code you will see that the three ingredient images at the top of the <main> element have already been assigned a class called imagestirfry. Add css declarations to the cookingstyles.css file to resize the three images as noted on the wireframe design. Step 3 The images folder contains the graphic files shown on the right. Three of these files are used as the original three ingredient images. The other three should be used as roll-over images. Add onmouseover and onmouseout events to each image. Add JavaScript code to each event to create interactive roll-over images. Step 4 Test the Stir Fry Ingredients page of the cooking website in a browser to ensure your CSS declarations, element events and JavaScript code all work correctly. Fix any errors. 16

Implementation Task 11 Interactive Hidden Content on the Student Cooking Website A wireframe design for the <main> element of the Spices Explained page is shown below. Spices Explained chilipowder.

18 Implementation Task 11 Interactive Hidden Content on the Student Cooking Website A wireframe design for the <main> element of the Spices Explained page is shown below. Spices Explained chilipowder.jpg 180x150 cumin.jpg 180x150 cinnamon.jpg 180x150 cloves.jpg 180x pixel margin around the outside of each spice image. fenugreek.jpg 180x150 Spice Name cardamom.jpg 180x150 nutmeg.jpg 180x150 mustardseeds.jpg 180x150 When the mouse passes over each image the text should change to match the image. History of the spice Uses of the spice Repeat eight times, once for each spice. Only one should be visible at any one time. Ensure the template HTML file you created for the Spices Explained page in task 1 is open in a suitable editor. Within the <main> element of the page add the supplied HTML code for the page. You ll find this is in a file called spices explained.txt. Your task is to: Create a class for the images and style them as shown on the design. Ensure that only one of the <section> elements is displayed when the page loads. Create JavaScript functions that will display the matching text when the mouse passes over one of the eight images. Test the page and fix any errors. The completed page should look similar to the one shown above. 17

19 Implementation Task 12 Creating a Completely Interactive Page on the Student Cooking Website A wireframe design for the <main> element of the Pizza Basics page is shown. Left hand side contains images with text labels. Images and labels shown should match the selected instruction. Images and labels should be initially hidden. When and instruction is clicked the images on the left should change to match the instruction. When the mouse moves away from an instruction the images and labels should be hidden again. Heading - How to Make a Pizza pizzaimage.jpg 100x70 image label pizzaimage.jpg 100x70 image label Heading - Making a Pepperoni Pizza Instruction 1 Instruction 2 Instruction 3 Instruction 4 Instruction 5 Instruction 6 Instruction 7 Instruction 8 When an instruction is clicked, the text should turn blue to highlight that it has been selected. Ensure the template HTML file you created for the Pizza Basics page in task 1 is open in a suitable editor. Within the <main> element of the page add the supplied HTML code for the page. You ll find this is in a file called pizza basics.txt. Add the following class and h4 declarations to the cookingstyles.css file:.pizzaimage {width:100px;height:70px;margin-left:10px; margin-top:10px;margin-right:10px} h4 {font-size:12px;margin-bottom:5px;margin-left:10px} Your task is to implement this page. The page should contain the following interaction: When the page loads, show the heading and text instructions but hide all the left hand sections containing the images and their text labels. An example is shown on the next page. When one of the cooking instructions is clicked, the instruction text should be highlighted blue and the matching images for that instruction should be displayed. An example is shown on the next page. When the mouse moves away from the selected instruction the page should reset to the original view (no images showing and all black text with no blue highlights) Ensure you carefully test the page as you complete this task. 18

20 Example screen shots showing the Pizza Basics page when loaded and when an instruction is clicked. Page View After Loading When Instruction 5 is Clicked 19

21 Implementation Task 13 Completing the Student Cooking Website The following highlighted pages of the Student Cooking Website have been completed so far. Home Page Italian Indian Thai Chinese Survey Pizza Basics Three Curry Recipes Red and Green Curries Woks Pasta Basics Spices Explained Stir-fry Ingredients The sub-pages still to be completed are: Indian food Thai food Chinese food The second level pages to be completed are: Pasta Basics Three Curry Recipes Woks Your final task is to: Open each unfinished page in turn. Copy the supplied text into the main section. Code the page according to the supplied annotated wireframe. Test each page. You will find all the necessary wireframe designs on the following pages. 20

Task 13 - Completing the Student Cooking Website (continued) Home Page Italian Indian Thai Chinese Survey Pizza Basics Three Curry Recipes Red and Green Curries Woks Pasta Basics Spices Explained

22 Task 13 - Completing the Student Cooking Website (continued) Home Page Italian Indian Thai Chinese Survey Pizza Basics Three Curry Recipes Red and Green Curries Woks Pasta Basics Spices Explained Stir-fry Ingredients Pasta Basics Page A wireframe design for the <main> element of the Pasta Basics page is shown below. Add the HTML provided (pasta basics.txt) to the <main> element and implement this page using the design below. 10 pixel space above each image. 30 pixel space between the three images. 10 pixel space to the left of this image. spaghetti.jpg 190x120 penne.jpg 190x120 fusilli.jpg 190x pixel space to the left text. Numbered list used for instructions. 10 pixel space to the left text. Bulleted list used for instructions. Instructions for cooking pasta. How to make a simple tomato Sauce pixel space between images and the two text sections. 20 pixel space between the two text sections. 10 pixel space to the right text. 21

23 Task 13 - Completing the Student Cooking Website (continued) Home Page Italian Indian Thai Chinese Survey Pizza Basics Three Curry Recipes Red and Green Curries Woks Woks Page Pasta Basics Spices Explained Stir-fry Ingredients A wireframe design for the <main> element of the Woks page is shown below. Add the HTML provided (wok.txt) to the <main> element and implement this page using the design below. Text flows around the Gap between image and wok image. text is 20 pixels. 10 pixel space above text. Heading - Choosing a Wok. 10 pixel space left of text. Text - advice on choosing a wok wok.jpg 300x200 Gap between image and text is 20 pixels. 20 pixel space between the text sections. Heading - Taking care of a Wok Text - Instructions on how to look after a wok Heading - Using a wok Embedded wok video 22

24 Task 13 - Completing the Student Cooking Website (continued) Home Page Italian Indian Thai Chinese Survey Pizza Basics Three Curry Recipes Red and Green Curries Woks Chinese Page Pasta Basics Spices Explained Stir-fry Ingredients A wireframe design for the <main> element of the Woks page is shown below. Add the HTML provided (chinese.txt) to the <main> element and implement this page exactly as shown in the design. Do not fix any errors you may think there are in the design as these will be used as discussion points in booklet 3 - testing and evaluation. Heading - Chinese Cooking Text - An outline of Chinese cooking 10 pixel space around every side of this content. Links to wok and stir fry ingredients pages. Heading - Free Guide to Stir Fry Cooking Text - Instructions to complete the form below for a free guide. Would you prefer a paper or copy of the guide? paper please complete Address - text input box - max size 50 characters - required or Surname - text input box - max size 20 characters - required Street - text input box - max size 30 characters - required Town - text input box - max size 30 characters - required What type of wok have you experience of using? Drop down menu to pick favourite country on website (Steel, Aluminium, Flat-Bottom, Round-Bottom, Double-Handle, Single-Handle) User can select multiple options. All options should be visible. 23

25 Task 13 - Completing the Student Cooking Website (continued) Home Page Italian Indian Thai Chinese Survey Pizza Basics Three Curry Recipes Red and Green Curries Woks Pasta Basics Spices Explained Stir-fry Ingredients Indian Page A wireframe design for the <main> element of the Indian page is shown below. Add the HTML provided (indian.txt) to the <main> element and implement this interactive page using the design below. 10 pixel space around text. Heading - Indian Cooking Text - An outline of Indian cooking. On mouse over swap image with indian3.jpg. indian1.jpg 150x300 Links to Three Curries and Spices Explained pages. On mouse out swap back to original image. On mouse over swap image with indian4.jpg. indian2.jpg 150x300 24

26 Task 13 - Completing the Student Cooking Website (continued) Home Page Italian Indian Thai Chinese Survey Pizza Basics Three Curry Recipes Red and Green Curries Woks Thai Page Pasta Basics Spices Explained Stir-fry Ingredients A wireframe design for the <main> element of the Thai page is shown below. Add the HTML provided (thai.txt) to the <main> element and implement this interactive page using the design below. Gap between image and text is 10 pixels. Heading - Thai Cooking Text - An outline of Thai cooking. thai1.jpg 300x pixel space around text. 10 pixel space between images. Link to Red and Green Curries page. thai1.jpg 90x90 thai2.jpg 90x90 thai3.jpg 90x90 thai4.jpg 90x90 Interactivity: When the user clicks on one of the small 90x90 images the larger graphic should change to match that graphic. The large image should remain changed until another of the small images is clicked. 25

27 Task 13 - Completing the Student Cooking Website (continued) Home Page Italian Indian Thai Chinese Survey Pizza Basics Three Curry Recipes Red and Green Curries Woks Three Curry Recipes Page Pasta Basics Spices Explained Stir-fry Ingredients A wireframe design for the <main> element of the Three Curry Recipes page is shown below. Add the HTML provided (three curries.txt) to the <main> element and implement this interactive page using the design below. Three button graphics centred on the page. 10 pixel space between the three button graphics. Heading - Three Indian Curry Recipes 10 pixel space around text. Text - Please select one of the curries below. chickenbutton.jpg 120x50 Heading - Curry Name vegbutton.jpg 120x50 Text - Instructions on how to make the above curry. lambbutton.jpg 120x50 photo of curry 300x200 Gap between image and text is 20 pixels. Different image for each curry: chickencurry.jpg vegcurry.jpg lambcurry.jpg Gap between image and text is 20 pixels. Interactivity: When the user clicks on one of the button graphics the section below should change. Each section should contain a heading, a picture of the curry and a set of instructions on how to make the curry. Curry recipe 1 should be displayed when the page loads. 26

Higher Computing Science

Higher Computing Science Web Design & Development Booklet 2A (of 3) Implementation Examples Contents Introduction Page What s included in this Booklet? 3 Implementation Stage 1 - Website Layout 4 Coding