LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS

DEPARTMENT OF INFORMATION STUDIES

Andy Dawson

LIS1510 Library and Archives Automation Issues

Further features of XHTML – Stylesheets and CSS

Andy DawsonAndy Dawson

Department of Information Studies, UCLDepartment of Information Studies, UCL (University of Malta 2010)


Andy Dawson

What we will be covering today

• A very quick look at most of the advanced elements of the XHTML workbook:– Image maps

– Tables

– Forms

– Frames

• Stylesheets in a little more detail• Using colour values in XHTML and stylesheets• More practical work on your projects!


Andy Dawson

Image maps

• A method for making areas of images “clickable”

• Client-side processed• Overlays an invisible “grid” on your image –

the image map• Map definition and image are quite separate• Always remember to provide a textual

alternative!


Andy Dawson

Tables

• a useful facility– for tables of information – for laying out some page designs without CSS

• Tables need to be specified carefully– Cells of data, within rows, within a table– Tables are not automatically reconciled!

• Best to create blank tables “in reverse” and then populate with data


Andy Dawson

A simple table<table>

<tr><td>Row 1, Col 1</td><td>Row 1, Col 2</td>

</tr><tr>

<td>Row 2, Col 1</td><td>Row 2, Col 2</td>

</tr></table>


Andy Dawson

Forms

• A tool for gathering information from users

• Provides specific prompts for information

• Data is then sent somewhere (usually to a computer process)

• Can’t really do much without server-side processing


Andy Dawson

Frames

• Screen split into independent sections– a different document displayed in each section– frame loading and the target atttribute

• Now deprecated by W3C– bookmarking problems– Tables and CSS quite often used to mimic

some effects of frames without the drawbacks


Andy Dawson

Stylesheets

• A definition of a document’s appearance: – typeface, size, colour for headings and text – line spacing, margin widths on all sides– spacing between headings … and much more!

• Specified at the beginning of a document by linking or embedding, or inline use

• Written in various special languages, e.g. CSS1


Andy Dawson

Stylesheets• Promotes the separation of form and content• Allow Web designers to ensure consistency

across a site’s pages• Specific elements of the overall stylesheet

can be overridden locally (cascading)• Use of stylesheets is recommended by the

World Wide Web Consortium• Stylesheets can be used with modern

(IE5+ or Netscape 4+) graphical browsers


Andy Dawson

Some basic stylesheet elements• Linking to external stylesheets:

– <link href="special.css“ rel="stylesheet” type="text/css">

• Syntax– TAG { property : value; }– <TAG style=“property:value;property:value;”> … </TAG>

• Some common propertiesfont-family : font-size : font-style : font-weight : color : background-color

• See handbook, cribsheet and the W3c website (www.w3.org) for further information – stylesheets are very useful!


Andy Dawson

Local and Inline style

• Any tag can be given a “one-off” application of style with a style attribute

• Classes can be established to modify tags repeatedly but irregularly

• Blocks of a page can be changed with <div> and <span> tags

• Always remember principles of inheritance!• Order – most local takes precedence!


Andy Dawson

An example embedded stylesheet<html><head><style type="text/css">

body {color : #000000; font-family : arial; sans-serif; font-size : 13px;}

p {color: #ff0000;}.special {color : #00ff00;}

</style></head><body>

<p> This paragraph is black text… </p> <p class="special">This paragraph is green text!</p>

</body></html>


Andy Dawson

A note about colours• The Hexadecimal RGB triplet

• RGB colour mixing

• Hexadecimal representation

• How to work out your colours• Palette tools, e.g.

http://www.linkline.com/personal/jkun/palette.htm

• Websafe colour charts:www.lynda.com/hex.html


Andy Dawson

That’s all for today…

• Any questions?

• Next session – XML and extensible systemsMore practical work

• Now carry on with your projects!

LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS

Documents

Transcript of LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS