Unit 20 - Client Side Customisation of Web Pages

Unit 20 - Client Side Customisation of Web Pages Week 5 – Lesson 6 Designing a web-site

The story so far... • Three methods of writing CSS. • The CSS Box model. • Fundamentals of scripting languages • Characteristics • Types • issues • Uses • Methods • functions

This assignment • Design and build a website, using CSS and scripting • Test it • Demonstrate good practice • Evaluate your website

Using CSS to control layout • Part of the design process • Advantages • House style • Promotes standardised design throughout a website (good practice) • Easier to maintain – changes to blocked CSS tend to be quicker and with less chance of error.

Task • Create a house-style: • Consider • positioning of elements • Colour schemes • Font types • Font sizes • ‘standard’ elements that will appear on all pages

Design • Screen design or ‘storyboard’ • Should clearly show precise layout • Include • dimensions • Font (family, size, colour) • Colours • Images • Other elements • Will also include notes to ensure clarity

Storyboards

The Real Deal

Navigation diagram www.tobinkusuma.com Five pages will be simpler!

Designing with CSS... Need to design the ‘common’ elements. • Headings • Styling • Fonts • Backgrounds (including images) • Spacing • Margins (paragraph text) • Borders • Padding (table cells) • Measurements: in, cm, mm, pc(1/8 inch), pt (1/12) pc, em (M), exe (x), %

Activity 1 • Create the CSS for the background and fonts for design #1 • Test your css works on a prototype page (HTML) The house style is changing to red. Alter your css, test the new webpage.

Float commands • Browsers read HTML line by line • They stack each element underneath the preceding element: <body> <div> <!– a styled box --!> </div> <div> <!– a second styled box !--> </div> </body> Box 1 Box 2

Float commands • A float command tells the element to ‘float’ to one side and allow the next element to come alongside it. • Possible options are: • float: left; • float: right; • float: none; • There must be enough width in the page/containing element to allow this. Box 1 Box 2

Float commands • Use float commands to create Design #1 http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs

Position property • static; default, elements rendered in order read on HTML • absolute; positionedrelative to 1st other element (not static) • fixed; relative to browser window • relative; relative to where it would appear if static • Inherit: value is same as parent element

Position task • Create a page with nested elements. • Wrapper • Left bar – include links to • absolute • Fixed • relative • Main • Box 1 • Box 2 • Right bar • footer Copy and add position: absolute Change to Position: fixed Change to position: relative Define width, height, left and top margins Background-color color

Layout • .titlep • {border: red solid thin; • Margin: 50%; • Position:fixed/absolute/relative; • Top: 0px;} • .titlec • {border: blue groove; padding: 3cm 6cm;} • Implemented as • <span class=“titlep”>Page Title</span> • <div class=“titlec”>Table title</div>

Element or class • E.g. If you want all paragraphs to have certain formatting specify: p {....} • You can also combine elements: h1, h2, p {...} • Any element can take a class attribute body{...} • But should only be used where necessary.

Class or id • Class can be repeated on a page, an id can only be used once per page • e.g. #maincontent {...} • This is an id it only occurs once on the page .upperrow{...} • This is a class it could be defining the upper row of two alternating rows that will be repeated several times in a table. • IDs give functionality, can be referred to in scripts.

Lists • Websites should be written at a lower complexity than standard text • Users do not want to read huge paragraphs • Make content orderly • Make it easier to read • Make it accessible to more users (good practice)

...lists Two types: • Ordered (numbered) [numbers, roman numerals, alphabetical] • Unordered (bulleted) Style defined in CSS, In HTML <li> tag defines each item

Activity 2 • Using the web-page from activity 1: • Add an ordered list of five fruits to the main body of text • Add an unordered list of three flowers before the first list • Put a line break <br> between the lists

Styling • www.google.com this is a default setting for a hyperlink in PowerPoint; same happens on your web-page. You can use CSS to overwrite these styles to fit with your design. • Anchor links must be overwritten in this order: • a:link {color: value} original colour • a:visited {color: value} after visiting link • a:hover {color: value} mouse hovering • a:active {color: value} is active

Activity 3 • Using the same web-page as activity 1 and activity 2 create buttons based on navigation diagram design #3 • Change the links as follows: • unclicked – black text • hover – larger font • visited – different font • active – background colour - yellow

Navigation Use CSS to create ‘drop-down menus’: • ul style formats whole list • ullistyle formats main list headers • liulstyle formats list sub-headers • ulli a style formats actual list elements • hover and over commands – appearance/disappearance of list items • some browsers (I.E.) do not support hover command – need script to allow it.

Activity #4 • Using prototype website created in other activities add menus given in code “dropdown.html” • Add three more menus for: • flowers • nuts • herbs

Responsive Web Design (RWD) • Easy reading • Easy navigation • Minimum resizing, panning & scrolling • Performs over a wide range of devices www.dreamstime.com

RWD • Adapts layout using: • Fluid, proportion-based grids • Elements must be sized in relative units eg % not absolute units such as pixels • Flexible images • Images sized in relative units (stay within container) • CSS3 media queries • Allow page to use different CSS styles depending on characteristics of the device eg browser width

RWD server elements • RESS work in conjunction with client-side components to produce: • faster-loading sites for cellular networks • Richer functionality/usability

Task • Select a page you have already created using CSS • Attach a ‘bootstrap’ RWD • Adapt the bootstrap to give: • different colours • Different sized elements • Different fonts • etc

Some useful resources for RWD • http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design • http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ • http://www.fastnetwebdesign.co.uk/blog/using-twitter-bootstrap-to-create-a-responsive-web-design-rwd-for-joomla • http://www.onextrapixel.com/2012/11/12/how-to-use-twitter-bootstrap-to-create-a-responsive-website-design/

Assignment 3 - Clients Oink Locked Down Data An IT security consultancy providing advice to business and individuals to protect against a variety of threats to data and systems: Malicious damage Threats related to e-commerce Counterfeit goods Technical failure Human error Theft of equipment • A business selling designer piggy-banks; their customers are children and parents although they hope to develop a corporate line selling their product as promotional items to banks and other financial institutions.

Assignment 3 • Task 1:(P4) • Design a website for either ‘Locked Down Data’ or ‘Oink’. Your design must meet the following specification: • It must contain at least five pages • It must contain at least three different examples of interactivity • The layout must be controlled by CSS and show examples of all three implementation styles (external, in-line, header). • Hints: Consider how you will use CSS from the start. Don’t ignore it at this stage then try to add it in later. Be methodical and thorough. Note: one of the requirements is to include 3 different examples of interactivity; we will explore this next time.

Assignment 3 • Task 1:(P4) • Your design must include the following sections: • A screen-shot showing the chosen domain name for your site and its current availability at www.UK2.net • A navigation diagram (site-map) • A description of the house-style including how this will be managed through CSS • Screen designs (storyboards) for each page detailing how CSS will be implemented (external, in-line, header) and any scripting required • A table of the design describing each page using the headings: page name, description of page content, required images and web technologies used. • Pseudo-code or flow diagrams to show how each interactivity will behave. • Ensure that your design will incorporate ‘good practice’.

Unit 20 - Client Side Customisation of Web Pages