eyelearn

16/4/09 :: week 3

laura — Thu, 16 Apr 2009 08:06:04 +0000

mini site

lesson content

workflow considerations – saving and previewing pages – switching between applications
inserting and presenting images
setting up root folder and subfolders
linking multiple pages
styling links (CSS)
validating the code

lesson notes

for best workflow – always keep your HTML page open in the browser (Firefox) as well as in TacoHTML
any changes you make in your HTML and CSS will need to be saved before they can be previewed in the browser
to switch between your coding program and the browser – get used to using the keyboard shortcut (hold ‘apple’ key and press tab) – this will save you a lot of time :)
while you are getting used to the CSS properties and rules – go slowly and test/preview as you go on
make sure to keep your HTML code as well as your CSS code as tidy as possible as this will make it easier to spot any problems or coding errors
use the ‘organise tags’ function (top menu > syntax) to keep your HTML code tidy
save – save – save! :-)
images can be either directly embedded into the page via HTML – or used as background images via CSS
any embedded image needs 4 essential elements: the image source, an alt tag (to show alternative text), as well as width and height values
values for image sizes in HTML are specified by measurement in pixel (without adding the unit), ie width=”120″ [NOT: width="120px"]
GIF – use for flat coloured images such as logos (transparency with matte) = safe across all browsers
JPG – use for images with shading such as photos (no transparency) = safe across all browsers
PNG – quality of JPG with transparency (refined transparency) = safe only across modern browsers (IE6 does not support PNGs, need to be replaced with GIFs)

mini site project

↓ Greenpeace
↓ source images

download PDF

net talk

smashing magazine 7 Principles of Clean and Optimized CSS Code
smashing magazine CSS: Techniques, Tutorials, Layouts

CSS inspiration

CSS Zen Garden the beauty of CSS Design
CSS Mania CSS Gallery
CSS Heaven CSS Gallery

9/4/09 :: week 2

laura — Thu, 26 Mar 2009 18:37:18 +0000

intro to CSS

Onto styling your handcrafted XHTML pages – we will work with CSS and the different ways on how you can apply them to your page

lesson content

introduction to CSS syntax
applying CSS styling
CSS selectors
universal settings and resetting styles
styling header and paragraphs(CSS)
inserting and presenting images

lesson notes

CSS allow for easier control of page layout
CSS can be applied in 3 different ways: inline, embedded or external
every XHTML document requires a valid link to the CSS file (consider your file path!)
using 1 external CSS to control the entire website will ensure that the file is loaded when the very first page is viewed, it will then already be in the browser’s memory and speed the loading of other pages up
CSS rules consist of a selector and its properties, always use 1 property with its value per line and complete with the semcolon “;”
you can target each HTML element with CSS and control its appearance
avoid using any styling within the HTML code

download PDF

↓ CSS – overview
↓ CSS – selectors

net talk

alistapart.com Fear of Style Sheets
(by Jeffrey Zeldman)
friendlybit.comBeginner’s guide to CSS
thenoodleincident.comDesign Rant

net references

w3.orgCascading Style Sheets
meyerweb.comthe master Eric Meyer’s test pages
tizag.comintroduction to CSS

2/4/09 :: week 1

laura — Thu, 26 Mar 2009 18:13:11 +0000

introduction to handcoding

For your first lesson we will look at why you should be learning handcoding as you are – and what the advantages of XHTML and CSS websites are.

lesson content

handcoding vs WYSIWYG
HTML and XHTML – differences and implementation
the thing with tables…. advantages of working with CSS
why webstandards are important

lesson notes

handcoding will produce ‘clean’ code without cluttering up the page with unnecessary code
ALWAYS type everything by hand – AVOID temptation to copy & paste
every XHTML document requires a valid DOCTYPE
all tags and properties to written in lowercase (font names and colour values can be an exeption)
all tags must be closed, single tags to contain space and forward slash before closing bracket
by being in complete in control you will be able to create more stable layouts
tables should only be used for tabular data, not layout (major drawback of tables: loading time, placeholder graphics and maintenance)
possible use of multiple style sheet for different purposes, ie browser compatilibilty and printing
webstandards encourage following guidelines to achieve user-friendly and accessible websites

download PDF

net talk

sitepoint.com Why handcode?
boagworld.comHow many people hand code and how many use a WYSIWYG program?
wisdumo.com Handcoding

net references

w3schools.com Introduction To XHTML
4webhelp.net The bridge between HTML and XML…

26/6/08 :: week 8

prisca — Thu, 26 Jun 2008 17:04:09 +0000

practice week :-)

As you didn’t have time to practice this week – we will go through the list styling in detail today.
See last week’s notes for handout and links :-)

19/6/08 :: week 7

prisca — Thu, 19 Jun 2008 17:00:31 +0000

styling lists

Lists are one of the best setup for any CSS designer – very versatile and used for a good semantic page structure. We will have a look at the different types of lists – and set up a categorised menu structure.

lesson content

using lists for menu and submenu structures
styling lists (ol, ul, dl)
list style images
good working practices

lesson notes

considering the box model – any list in itself should be understood as a box – with boxes inside, giving you access to extensive custom styling
lists can not only be used to layout standard listed items but are also suitable for elements such as menus, galleries, tutorials and much more
before deciding which HTML elements to use – consider carefully their context and meaning within the page and site
navigational elements such as the main site menu are a list of site links, therefore using a list is meaningful markup
ul = unordered list, ie each list item will be default be preceded a bullet
ol = ordered list, ie each list item will be default be preceded a number
dl = definition list, the only list which contains 2 list elements: dt = definition term, dd = definition description
lists display slightly offset within your page by default – you will therefore need to use margin to bring the list inline with your overall page content

download PDF

↓ styling a definition list to create a menu

net talk

alistapart.com CSS Design: Taming Lists (by Mark Newhouse)
simplebits.com
Styling Nested Lists
meyerweb.comLists and Indentation

net references

w3schools.com CSS list properties
tizag.com CSS Lists
cssbasics.comList Style

16/6/08 :: week 6

prisca — Mon, 16 Jun 2008 17:00:48 +0000

practice session :-)

Just to keep track of our weeks here, Costanza :)
as we postponed the topics for thi ssession to the next lesson – we spent our time talking code and correcting your files. Looking forward to seeing you new version :)

5/6/08 :: week 5

prisca — Thu, 05 Jun 2008 17:00:25 +0000

CSS box model

In this lesson we will look at the famous ‘box model’ of CSS. This is a fundamental principle to understand – once you are happy with this concept – you’ll see that things will become easier :)

lesson content

understanding the CSS box model
working with positioning
setting up site navigation
basic list styling

lesson notes

understand your layout as a collection of boxes – boxes within boxes
use width in combination with margin and padding to set up spacing between the different HTML elements
DIVs should be use to divide content into meaningful chunks, not used as ‘quick fixes’ for layout reasons
understand all standard HTML tags as boxes in themselves
class and IDs can be assigned to a DIV tag as well as most other HTML tags
lists should be used where suitable to display content
site menus are almost always best set up using lists
for horizontal menus – use: “display: inline;” in your CSS (applied to the list item)

download PDF

net talk

alistapart.com From Table Hacks to CSS Layout: A Web Designer’s Journey (by Jeffrey Zeldman)
456bereastreet.comInternet Explorer and the CSS box model
brainjar.comCSS positioning

net references

w3.org Box Model
tantek.com box model hack
thenoddleincident.comlittle boxes

29/5/08 :: week 4

prisca — Thu, 29 May 2008 17:00:41 +0000

creating visuals

Working with Photoshop to create visuals for your site – using CSS to create background images. We will work with selection techniques in Photoshop, use layer masks and optimise and save the images for a webpage.

lesson content

background images with CSS
file formats and PNG warnings
Photoshop selection techniques
working methods in Photoshop

lesson notes

images can be either directly embedded ito the page via HTML – or used as background images via CSS
any embedded image needs 4 essential elements: the image source, an alt tag (to show alternative text), as well as width and height values
values for image sizes in HTML are specified by measurement in pixel (without adding the unit), ie width=”120″ [NOT: width="120px"]
GIF – use for flat coloured images such as logos (transparency with matte) = safe across all browsers
JPG – use for images with shading such as photos (no transparency) = safe across all browsers
PNG – quality fo JPG with transparency (refined transparency) = safe only across modern browsers (IE6 does not support PNGs, need to be replaced with GIFs)
when editing images – always use layermasks to allow for maximum editablilty
always save the working file including all layers (make sure to name your layers for a better workflow)

download PDF

net talk

photoshopsupport.com Selecting & Extracting Hair – Masking Tutorial
flickr.comImproving the Quality of Photos
layersmagazine.comcollected tutorials

net references

bittbox.com The Annoying Phantom Brush
photoshopsupport.com Photoshop Keyboard Shortcuts
good-tutorials.comPhoto retouching

15/5/08 :: week 3

prisca — Thu, 15 May 2008 17:00:53 +0000

handcoding basics

Constanza, as we did not cover the planned content in week 3 – I have just moved all content to week 4 now – leaving you a few notes here on what we covered :-)

lesson content

handcoding with TacoHTML
workflow considerations
saving and previewing pages
switching between applications

lesson notes

for best workflow – always keep your HTML page open in the browser (Firefox) as well as in TacoHTML
any changes you make in your HTML and CSS will need to be saved before they can be previewed in the browser
to switch between your coding program and the browser – get used to using the keyboard shortcut (hold ‘apple’ key and press tab) – this will save you a lot of time :)
while you are getting used to the CSS properties and rules – go slowly and test/preview as you go on
make sure to keep your HTML code as well as your CSS code as tidy as possible as this will make it easier to spot any problems or coding errors
use the ‘organise tags’ function (top menu > syntax) to keep your HTML code tidy
save – save – save! :-)

8/5/08 :: week 2

prisca — Thu, 08 May 2008 17:00:27 +0000

intro to CSS

Onto styling your handcrafted XHTML pages – we will work with CSS and the different ways on how you can apply them to your page

lesson content

introduction to CSS syntax
applying CSS styling
CSS selectors
universal settings and resetting styles

lesson notes

CSS allow for easier control of page layout
CSS can be applied in 3 different ways: inline, embedded or external
every XHTML document requires a valid link to the CSS file (consider your file path!)
using 1 external CSS to control the entire website will ensure that the file is loaded when the very first page is viewed, it will then already be in the browser’s memory and speed the loading of other pages up
CSS rules consist of a selector and its properties, always use 1 property with its value per line and complete with the semcolon “;”
you can target each HTML element with CSS and control its appearance
avoid using any styling within the HTML code

download PDF

↓ CSS – overview
↓ CSS – selectors

homework

↓ Greenpeace
↓ source images

net talk

alistapart.com Fear of Style Sheets
(by Jeffrey Zeldman)
friendlybit.comBeginner’s guide to CSS
thenoodleincident.comDesign Rant

net references

w3.orgCascading Style Sheets
meyerweb.comthe master Eric Meyer’s test pages
tizag.comintroduction to CSS