A209 Dreamweaver

OneNote     jgibbs@eastleigh.ac.uk     domain 172.16.0.30   totton.org/e   css cheatsheet

Client Side Customisation of Web Pages

Unit 24 OCR as PDF

June 2016 server migration: all ftp info and passwords unchanged except log in username now set as

totton@totton.org

• 9th Dec 2015

  Introduction to the unit requirements and resources:

   

  Unit 24 information

  The aim of the unit is to provide learners with an understanding of the use of CSS (cascading style sheets) and a specific scripting language to create an intuitive and innovative, interactive website. Learners will be able to combine these skills to design, create and test their own micro-site.

  Previous knowledge of HTML would be beneficial before undertaking this unit but not essential. The knowledge and skills learnt from this unit will be useful to anyone looking to move into Web design or software development as a career.

  Learning Outcome (LO) The learner will:	Pass The assessment criteria are the pass requirements for this unit. The learner can:	Merit To achieve a merit the evidence must show that, in addition to the pass criteria, the learner is able to:	Distinction To achieve a distinction the evidence must show that, in addition to the pass and merit criteria, the learner is able to:
  1 Understand the fundamentals of Cascading Style Sheets (CSS) Student submissions on totton.org/e/LO1a.html	P1 explain how HTML files access CSS
  	P2 explain the features of the box model for CSS	M1 discuss benefits of incorporating CSS in web design
  2 Understand the fundamentals of scripting languages Student submissions on totton.org/e/LO2a.html	P3 explain the fundamentals of a scripting language	M2 discuss effectiveness of using client-side scripting to improve functionality
  3 Be able to control the layout of web pages using CSS Student submissions on totton.org/e/LO3a.html	P4 design web pages using CSS to control layout		D1 justify the web design produced using CSS to control layout
  4 Be able to create interactive web pages Student submissions on totton.org/e/LO4a.html	P5 create interactive web pages using CSS and a scripting language		D2 enhance usability of an interactive website with CSS and a scripting language
  	P6 test interactive web pages	M3 modify interactive web pages based on user feedback

   

  Three 'layers' of a Web page:

  1. HTML (Hyper Text Mark-up Language) provides the structural layer - containing headings and text plus a way to insert images, videos and sounds.
  2. CSS (Cascading Style Sheets) provide a presentational layer - positioning, enhancing and keeping the consistency of the pages across your Web site.
  3. JavaScript (padlet) (padlet formatting) provides a behavioural layer - adding interactivity with forms, animations, image swaps, mouse pointer effects, scrolling banners and much more.

RESOURCES

Tutorials
HTML	CSS	JavaScript	JQuery
codecademy.com -   sign up for free			freecodecamp interactive training
Microsoft Virtual Academy		Khan Academy | character	lynda.com/netmag 30-days free

• thesitewizard.com/css/     Allow user to switch CSS using buttons

• HTML Source Introduction to CSS   |  W3 intro to style sheets

• understanding-css-positioning-part-1; part 2; part 3      

  CSS Fundamentals  

Gallery of CSS Web design ideas at csszengarden.com

http://www.mezzoblue.com/zengarden/resources/

• Web fonts from Google and FontSquirrel

net2ftp.com

cssloggia.com  and

WordPress plug-in for CSS animation

Jed's introduction to

opentracker.net/article/hits-or-pageviews

http://www.quirksmode.org/css/cascading/

Webfonts

Tues 16th Dec 2015

Creating and using Favicons , the 16x16 pixel images used in the address bar and bookmarked favourites list.
Design a logotype or photographic image that will work as a tiny square, then upload a jpeg version and receive a zipped version in favicon.ico format, perhaps with an animated .gif variant for Firefox users (they will see the static .ico version otherwise). You can also create a larger icon that iPad and iPhone users can add to their home screen as a short cut to your Web site (it looks like an App).

   using FavIcon from Pics

favicon.co.uk for more information. If you want to make bigger, scaleable icons for Mac or Windows desktops, consider the iconbuilder plug-in for Photoshop from iconfactory.com (but it is overkill for just creating little favicons).

http://www.corelangs.com/css/box/hover.html

Range of Development Tools and resources

notepad   Notepad++ | cheatsheet	Microsoft's Visual Studio Code
BlueGriffon open source	Adobe Dreamweaver    *Set up your site on totton.org
jsfiddle.net | jsfiddle docs | tutorial	Phaser HTML5 + CSS + JavaScript game development
Intro to JavaScript programming	JSbin | Getting started
javascriptkit.com	stackoverflow coders resource
Learn from 12 JavaScript Experts
washington.edu lessons	washington ID and Class intro

• iFrames are now established as the standard way to include a movie clip from YouTube or a map from Google.

alternative iframe-generator

• Framesets seem to help navigation - why and how they are best avoided

useful snippets of CSS:

1. Responsive images can resize to different screen sizes. Here is an example page. Simply paste this code into the <head> of your html document, or add it to your linked external CSS file to instantly make all the pictures on your page(s) scale down as needed for smaller screen sizes:
   <style>
   img {
   max-width: 100%;
   height: auto;
   }
   </style>
   
   
2. To centre a box you need to set margin to auto first: http://www.w3schools.com/css/css_align.asp
   
   
3. add a CSS background colour to your page:
   background-color:<style type="text/css">
   body {
   background-color: #33eeff;
   }
   </style>

• Web colo(u)rs - RGB Hexadecimal colorpicker and named colors - try changing colors at W3Schools (also Websafe Colors 216/256).
• There are 16,777,216 colours using #RRGGBB notation.

(Each colour channel is described using 1 byte of information. Byte can contain 256 different values. So for 3 channels, it's: 256^3 = 16,777,216 = 16M
However, modern browsers support transparency - #AARRGGBB, by similar logic you get: 256^4 = 4,294,967,296 = 4G)

http://www.tmaskall.com/timetable/x3002gen1.htm

https://eastleighac-my.sharepoint.com

Good stock photo sites include: istockphoto.com; www.shutterstock.com; www.corbisimages.com and Adobe has relaunched its own offering, integrated with its CreativeCloud.

Free options include Google advanced image search (hidden under the gear wheel)

 
Set the licensing options at the bottom of the list set to free to use.

Flickr Commons

https://scratch.mit.edu

Swift online - hourofcode

teach.mozilla.org/tools/