week 1
Introduction to Unit.
Unit 20: Client Side Customisation of Web Pages
Unit code: Y/601/7660
QCF Level 3: BTEC National
Credit value: 10
Guided learning hours: 60
Aim and purpose
The aim of this unit is to ensure learners understand the fundamentals of cascading style sheets and scripting languages and are able to develop the skills required to implement web pages using these tools.
Unit introduction
There is an increasing expectation that website design will adhere to web standards and that websites will consist of sophisticated, interactive web pages. This requires website designers and creators to be familiar with standard tools, techniques and languages in order to create such websites. In particular, web standards are beginning to expect mark-up to be done in XHTML, layout to be controlled by cascading style sheets (CSS) and client side interactivity by a scripting language such as JavaScript or VBScript. XHTML is a stricter version of HTML and adheres to XML standards. CSS and JavaScript or VBScript are powerful scripting languages used to create sophisticated layouts and interactivity on web pages, respectively.
A key feature of CSS Java/VBScript is that the script (code) is stored on the clients’ system rather than on host server systems. As they do not need to interact with a web server, this can save resources and network bandwidth. CSS are capable of creating complex, sophisticated layouts which are easy to maintain and update across the whole website or individual pages. Java/VBScript is able to validate information that users enter into a form before it is sent to a web server for processing. This specialist unit is an introduction to the creation of web pages with some compliance with web standards.
Layout will, therefore, be controlled by CSS, and interactivity controlled by a client side scripting language such as JavaScript or VBScript. Learners will develop an understanding of the fundamental characteristics of CSS and a chosen scripting language. Learners will develop web pages with sophisticated layouts in which calculations can be performed by combining the two tools.
Learning outcomes
On completion of this unit a learner should:
1 Understand the fundamentals of cascading style sheets (CSS)
2 Understand the fundamentals of scripting languages
3 Be able to control the layout of web pages using CSS
4 Be able to create interactive web pages.
Describe the difference between a designer and a developer.
Research and find out what skills are needed when applying for these types of jobs.
Take a screenshot of three websites' home pages and print them out. Label them in different colours to show which parts are the responsibility of the designer, which are of the developer and which are both. What does this tell you about the two roles?
The art of design - Consider the Typography and iconography that is used in and on a webpage.
How to create your own web server on a USB stick
The following site details how you can create a portable web server on your USB, please read carefully and make any backups on your USB stick. I cannot be held liable if you loose any data following this tutorial.
Characteristics of CSS: CSS frameworks; box model eg width, margins, padding, border, content area,
There are a number of CSS frameworks that are available today, these enable for fast and rapid development of sites using a set of pre-set key words that have associated styling. the list below identifies the most common.
- Twitter Bootstrap.
- Foundation 3.
- Skeleton.
- YAML 4.
- Tuktuk.
- Gumby.
- Kube.
- Groundwork.
Investigate these frameworks and try some of the templates that have been made available, you will be able to download these to your PC's for free, some of the packages offer Minified versions of scripts, this is in an effort to reduce the footprint of the file, thus reducing the file size which enables faster loading.
inline, block; selectors eg type, class, ID; accessing CSS from HTML eg in-line, embedded, external
What is inline?
What is block?
Selectors
- ID
- class
CSS access
- Inline
- External
- embedded
CSS Implementation
Box Model
- Describe the four parts of the box model.
- Describe the three parts of selectors.
CSS & It's Implimentation
Now that you have seen the implementation options in our Prezi, reproduce this on your computer using an editor of your choice, please try not to use Dreamweaver.
Create each example of how to use CSS in HTML.
Print each example and annotate them to show how the CSS links to the HTML.
Compare the two methods of accessing external CSS.
Implementation of blinking text in CSS and Javascript
Mobile Responsive Web!
What is it, Why and when
What can you view a website on?
Create a simple one-page web page that is responsive to the window that it is viewed in.
Helpful people:Chris Coyier
In 1994, Berners-Lee founded the World Wide Web Consortium at the Laboratory of Computer Science (LCS) at the Massachusetts Institute of Technology in Boston.
Last Updated
2018-04-16 13:27:00
Links to Learning Outcomes |
Links to Assessment criteria |
|
|---|---|---|
|
LO 1 Understand the fundamentals of cascading style sheets (CSS)
|
P1 explain how HTML files access CSS P2 explain the features of the box model for CSS M1 assess different implementation styles of CSS |
English
Key terms
House style- a design theme carried throughout a website or even a business, eg letters, faxes, emails, web pages, etc.
CSS- stands for cascading style sheets. lt is a form of web language which standardises the layout throughout a website.
Style- a group of formatting decisions to be applied together as defined in the CSS For example, to have text display as red and centred could be a style.
Tags- elements of web page code, either in HTML or CSS. Usually they are written between angle brackets, < and >,to indicate that they are code words.
Head -the head of the web page, the part of the code where all the styling and other invisible parts are written.
Body- the part of the code where all the elements that are visible on the web page are coded.
Pixel perfect- a term used in the design field
Selector- similar to the title of the style.
Property- what is being changed.
Value- the amount the property is being changed.
Maths
Language of Maths
1.Read, write, order and compare numbers
2.Discuss negative numbers in practical contexts
3.Write out figures in words
How 2's Coverage
Clarifying Learning Objectives - Using coloured discs and/or peer explanation, check to ensure that learners have understood the learning objectives.
0
Files that support this week
http://prezi.com/mjtjyrrc8izi/unit-10-client-side-customisation-of-web-pages-lesson-01/
Week 1←
PrevWeek 2←
Prev→
Next→
Next
