Bike Example
stage 1: web layout
read the wireframe design and sample HTML code edit the HTML code in template.html template page is structured using HTML: header, nav, main, section, main, footer elements complete template.html with HTML elements which will appear on all pages as shown in the sample code create the home.html page and copy HTML code from the template, change the page <title> to home create all other pages using the template in the same way: home.html, road.html, track.html, mountain.html, bmx.html understand the workflow for using template and folders
stage 2: colour main areas
use grouping selectors to set colours for page elements(p10) add test content to content-free main area (invisible) (p11) understand the use of grouping selectors, size of empty container elements (zero)
stage 3: position, size, space
default positioning for elements is a vertical stack, top to bottom create horizontal layout (left to right) for the heading and the banner image at the top of the page. edit the CSS code in CSS/styles.css float heading text to appear beside image, html sequence understand behaviour of content - areas - overflow - float - clear - inline - block
do task 3 - cooking website 3b Spacing (margin, padding) add margin for gaps outside and padding to create gaps inside horizontal and vertical space: top, bottom, left and right implementing margin and padding, interaction between elements- annotating the wireframe before coding, syntax and alternative syntax edit the CSS code in CSS/styles.css step1: set top-bottom margins for header, nav, main, footer to create gap above and below step2: use padding (or margins) to create surrounding gap step3: create a gap between sections using margins, (top - bottom margins overlap, collapse) step4: use padding to create a gap surrounding content within sections and footer test and check by viewing the home.html page, look for gaps between elements from padding and margins understand wireframe markup to show gaps, interpret margin / padding alternatives
do task4 - cooking website 3c Size (height and width) managing size of nested elements, setting height/width as px, % body position and width including auto margins edit the CSS code in CSS/styles.css set the sizes of some elements (except nav and main), including body with auto margins understand default sizes, height, width, size units, auto margins
do task 5 - cooking website stage 4: navigation bar
navigation is basically an unordered list of hyperlinks within the <nav> element step1: use child selector to remove bullet decoration, set hyperlink colour to black. step2: use child selector float list items to the left, set the height of the nav element step3: centre and space out the list items by setting a width (since as floated elements they have 0 width) step4: hyperlinks styled as block with padding to create larger clickable target rather than just the text step5: add hover interactive behaviour to hyperlinks to change colour and background do task 6 - cooking website stage 5: form
adding a form as a right hand panel on the home.html page create 3 section elements with HTML and then position them using CSS float and clear wireframe for the form shows form element and inputs including a submit button add html to create form element add html create text input with label add html to create number input with label add html to create set of radio button inputs with labels add html to create drop-down menu input with label add html to create text area input with label add html to create submit button input with label form validation rules for client-side checking text length, number range, presence check, pre-select menu item do task 7 - cooking website stage 6: interactivity using javascript and mouse events
interactivity: change image size, change content style, switch images, hide and show content mouse events are: mouseover, mouseout and click JS example 1: change image size
add javascript code for mouse events directly into html element tag onmouseover="this.style.width='300px';this.style.height='225px'"onmouseout="this.style.width='200px';this.style.height='150px'"do task 8 - cooking website JS example 2: change image size using a js function in a script (internal to HTML or external js file)
create a script with a named function add code to call the function from an html element using a mouse event use this parameter to identify the target of the element do task 9 - cooking website JS example 3: create a image rollover to swap images
do task 10 - cooking website JS example 4: show and hide
use the CSS display property with the values: inline, block and none set up buttons to target different sections to show and hide set initial styles to be shown or hidden add js functions to change the visibility of section elements is id to select section elements do task 11 - cooking website JS example 5: change the style of page elements (size and visibility)
stage 1: set initial id, size and float position stage 2: add mouse events to each section stage 3: create functions to control the size of elements stage 4: control the visibility of elements stage 5: apply the same techniques to the rest of the page stage 6: create a function to return page to normal do task 12 - cooking website Notes for mouse events and for javascript code
stage 7: completing the bike website
create the remaining pages: track racing, mountain bike do task 13 - cooking website Cooking Assignment
task 1 set up the pages
make sure you have completed bike stage 1
step 1 use template to make home page step 4 create all other pages step 5 test all page navigation task 2 set up the colours
make sure you have completed bike stage 2
step 1 set up colour scheme: step 2 add text for testing step 3 set up element colour, using grouping selectors step 4 test pages for colour task 3 float the images
make sure you have completed bike stage 3
step 1 add text and student image step 2 float both text and image step 3 add css to avoid overlap (clear) step 4 test for correct element position step 5 add red and green curries text step 6 apply css to set image size step 7 add div tag to create a content group step 8 set position as per wireframe step 9 test page and correct errors task 4 set up the spacing
make sure you have completed bike stage 3
step 1 plan spacing as per wireframe step 2 apply margins and padding as per wireframe step 3 test page appears as per wireframe task 5 set the element size
make sure you have completed bike stage 3
step 1 use design to apply width and height for elements step 2 test that page displays correctly task 6 set up the navigation
make sure you have completed bike stage 4
step1 set up navigation bar using same techniques as the bike website task 7 make a survey page
make sure you have completed bike stage 5
step1 create and test survey page using the form wireframe and the techniques used in the bike website
task 8 make images interactive
make sure you have completed bike stage 6
step1: add the ready-made code step2: add CSS to set sizes and margins as shown in the wireframe step3: add mouse events to each element step4: test and debug the image interactivity, check css and html code task 9 set up javascript
make sure you have completed bike stage 6
add a script element to the head of the page add 2 functions to change the image size and to return size to normal delete the code used in stage 2 replace the deleted code with function calls solve the problem about avoiding moving the image position task 10 make roll-over images
make sure you have completed bike stage 6
step1: copy the ready-made code for the page step2: add css code to change the size of the images step3: add mouse events and javascript code to create the rollover step4: test and debug the rollover feature task 11 hide and show content
make sure you have completed bike stage 6
add the ready-made code for the page make a class for the images as shown in the design choose one element to show while the rest are hidden when the page loads add java script functions to switch which element is shown as the mouse moves over each image test and debug the interactive feature task 12 make an interactive page
make sure you have completed bike stage 6
copy the ready-made code for the page add the CSS shown in the task add the remaining features as described in the task test the page works correctly, debug task 13 final completion
make sure you have completed bike stage 7
complete the remaining pages as described in the task 
