department of information studies andy dawson lis1510 library and archives automation issues further...
TRANSCRIPT
![Page 1: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/1.jpg)
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)
![Page 2: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/2.jpg)
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!
![Page 3: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/3.jpg)
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!
![Page 4: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/4.jpg)
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
![Page 5: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/5.jpg)
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>
![Page 6: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/6.jpg)
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
![Page 7: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/7.jpg)
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
![Page 8: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/8.jpg)
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
![Page 9: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/9.jpg)
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
![Page 10: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/10.jpg)
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!
![Page 11: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/11.jpg)
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!
![Page 12: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/12.jpg)
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>
![Page 13: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/13.jpg)
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
![Page 14: DEPARTMENT OF INFORMATION STUDIES Andy Dawson LIS1510 Library and Archives Automation Issues Further features of XHTML – Stylesheets and CSS Andy Dawson](https://reader036.vdocuments.us/reader036/viewer/2022082805/5515dbda550346d46f8b4aba/html5/thumbnails/14.jpg)
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!