Unit 20 - Client Side Customisation of Web...
20
Unit 20 - Client Side Customisation of Web Pages WEEK 5 – LESSON 6 DESIGNING A WEB-SITE
Transcript of Unit 20 - Client Side Customisation of Web...
Unit 20 - Client Side
Customisation of
Web Pages WEEK 5 – LESSON 6
DESIGNING A WEB-SITE
Today’s tasksThis lesson is on the wiki:
Design Exercise (for A3); corporate theme in primary design 3rd November 17
You should already have decided which website you will be designing
from the choices given in ‘Website Options’
Hyperlinks provided to slides with further detail, return by clicking on
‘Today’s tasks’
1. Create a house-style
2. Create a storyboard for each of the 5 pages of the website
3. Create a navigation diagram
4. Choose an appropriate domain name;
5. Create a design table
**Reminder: Unit 20 A1 referral is due on Monday 6th November**
Assignment 1 – P1
In-line
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
molestie eget quam vel venenatis (Fig. 1). Maecenas suscipit, lacus sit
amet laoreet faucibus, urna lorem aliquam quam, pharetra convallis
augue neque eget ante (Fig 2). Vestibulum efficitur felis quam, eget
rhoncus erat rhoncus sit amet.
Fig. 1: Coding showing in-line CSS
<p style = “background: red; colour: white; font-family: times new
roman;”>Neque porro quisquam est qui dolorem ipsum </p>
Fig. 2: Image of web-page using code from Fig:1
Assignment 1 – P2
The Box Model
Padding
Integer scelerisque feugiat magna pretium fringilla. Quisque ornare ligula at
nunc scelerisque egestas( Fig 3). Curabitur dui odio, congue porta mattis
vel, pretium vel arcu. Curabitur sagittis ipsum vel elit elementum, non viverra
erat auctor(Fig 4). Quisque ex felis, posuere sed tempus facilisis, vestibulum
consectetur nisi (Fig 5). Mauris pellentesque sit amet nisi id malesuada (Fig
6). Nunc sed sapien tincidunt, fringilla lacus nec, efficitur ex. Sed sit amet
egestas mi, sed molestie odio.
Assignment 1 – P2
Fig 3: Coding showing 0 padding
<head>
<style type="text/css">
.ex{
width:220px;
padding: 0;
border:5px solid gray;
margin:0px;
}
</style>
</head>
Fig 4: Coding showing selector being
used in html
<div class="ex">The line above is 250px
wide.<br />
Fig: 5: Image showing effect of coding
on web-page
Assignment 1 – P2
Fig 6: Coding showing high amount of padding
<head>
<style type="text/css">
.ex{
width:220px;
padding: 50px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
Fig 7: Coding showing selector being
used in html
<div class="ex">The line above is 250px
wide.<br />
Fig 8: Image showing effect of coding
on web-page
The story so far...
Three methods of writing CSS.
The CSS Box model.
Assignment 3
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 (–blocked CSS )
quicker
less chance of error.
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(1pica = 12pt), pt (1/72 inch), px, em (M), exe
(x), %, rem
Task – House Style
Create a house-style:
Consider
positioning of elements
Colour schemes
Font types
Font sizes
‘standard’ elements that will appear on all pages
This will be the basis for the external style sheet for the site.
The notes will be included in the assignment – “A description of the
house-style including how this will be managed through CSS”
Today’s Tasks
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
Today’s Tasks
Storyboards
The Real Deal
Navigation diagram
Five pages will be simpler!www.tobinkusuma.com
5 page Navigation Diagram
Home
PageName PageName PageName PageName
Today’s Tasks
Domain naming
Find an
appropriate
domain name;
go to UK2.net
obtain a screen-
shot showing the
chosen domain
name for your site
and its current
availability.
Today’s Tasks
Design Table
page name page content images web technologies
Index Logo
List of contents
Search bar
Contact details
Call to action “Visit
Hereford’s famous
Cider Museum…”
4 thumbnails as links
to other pages
HTML5
CSS
Javascript
http://www.cidermuseum.co.uk/
Requires a row for each page; column headings: page name, page content, images,
web technologies
Example reverse-engineered from Hereford Cider Museum site
Today’s Tasks
Assignment 3
Task 1: (P4)
Design a website for either ‘Locked Down Data’, ‘Oink’, Herefordshire Squash, Tennis and Racketball Centre’ or ‘Fabrique au Maroc’. 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 3Task 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’.
