Post on 28-Mar-2015
transcript
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)
DEPARTMENT OF INFORMATION STUDIES
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!
DEPARTMENT OF INFORMATION STUDIES
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!
DEPARTMENT OF INFORMATION STUDIES
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
DEPARTMENT OF INFORMATION STUDIES
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>
DEPARTMENT OF INFORMATION STUDIES
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
DEPARTMENT OF INFORMATION STUDIES
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
DEPARTMENT OF INFORMATION STUDIES
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
DEPARTMENT OF INFORMATION STUDIES
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
DEPARTMENT OF INFORMATION STUDIES
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!
DEPARTMENT OF INFORMATION STUDIES
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!
DEPARTMENT OF INFORMATION STUDIES
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>
DEPARTMENT OF INFORMATION STUDIES
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
DEPARTMENT OF INFORMATION STUDIES
Andy Dawson
That’s all for today…
• Any questions?
• Next session – XML and extensible systemsMore practical work
• Now carry on with your projects!