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 In-line Header }These are sometimes called External }’block’ methods – all the CSS is blocked together.
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> <!– a second styled box !--> </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; positioned relative 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 ul li style formats main list headers li ul style formats list sub-headers ul li 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 Flexible images 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 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. 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
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’.