Skip to content

icon picker
csH web workbooks

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
do task 1 - cooking site

stage 2: colour main areas

CSS file: CSS/styles.css
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)
do task 2 - cooking site

stage 3: position, size, space

3a Positioning (float)
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
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 html mouse events
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 2 save home page
step 3 test 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
pasta basics
woks page
Chinese page
Indian page
Thai page
three curry recipes page
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
) instead.