csH web workbooks

Explore

csH web workbooks

Brendan McCart

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

colour palettes:

https://color.adobe.com/create/color-wheel⁠

⁠

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

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 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:

https://color.adobe.com/create/color-wheel⁠

⁠

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 (

CtrlP

) instead.