44238: Dynamic Web-site Development

44238: Dynamic Web-site Development Common Look-And-Feel Ian Perry Room: C49 Extension: 7287 E-mail: I.P.Perry@hull.ac.uk http://itsy.co.uk/ac/0708/Sem1&2/44238_DWSD/

During the Last Lecture • I said that you must: • stop thinking about the development of individual Web-pages, that are then bolted together to form a Web-site. • start designing Web-sites that are composed of a number of re-usable, easily changeable, Web-page components that have the potential to be combined in a variety of ways. • In other words: • start thinking about your Web-sites in much the same way as a Database, where you store things once, and use them many times.

For Assignment 1 • Over the next four weeks, we will explore the following reusable Web-site/Web-page elements, i.e.: • Cascading Style Sheets (CSS) • So that you can apply a ‘Common Look-and-Feel’ to all of the pages of your Web-sites. • Server Side Includes (SSI) • So that you can include ‘Common Web-page Elements’ in your Web-pages.

What is the ‘Problem’? • How often have you thought: • I wish I had made that text bigger, or smaller, or a different font, or a different colour, etc.? • You can, of course: • go back to your HTML editor and apply this new size/font/colour combination. • But, if there are many occurrences of this size/font/colour combination: • you will have to remember to make this change in many places.

What is the ‘Solution’? • Cascading Style Sheets (CSS): • which can be used to apply consistent font face, size, background colour, background image, and other attributes to individual Web-pages, or, more usefully, to whole Web-sites. • With CSS: • you MUST use styles, rather than making local changes to size/font/colour/alignment/etc. • all changes are made in one place, then applied to all occurrences of that style: • within a single HTML document (Embedded CSS). • or, better still, across several HTML documents (External CSS).

Before & After Embedded CSS After Before

How? • An Embedded CSS has been applied within the <head> … </head> section of the HTML document, e.g.: <head> <title>New Page 1</title> <style type="text/css"> p { font-style: italic; color: green; } h1 { font-family: Arial; font-weight: lighter; } h2 { font-family: Courier; color: #FF0000; } h3 { font-family: System; color: rgb(0,0,255); } </style> </head>

Advantages/Disadvantages? • Advantages • Can easily change the way any of the styles look in this HTML document. • E.g. if I decide that I want to remove the ‘italic’ setting from all of the Normal Paragraphs. • I would NOT have to find, and change, every occurrence of a Normal Paragraph within HTML code of the Web-page. • I would simply alter the ‘p’ entry in the Embedded CSS. • Disadvantages • If I wanted to make this change in all of the Web-pages of my Web-site: • It would be faster than not using Embedded CSS, but I would still have to edit every Web-page.

What is the ‘Solution’? • Use an External CSS: • Which can then be applied to multiple Web-pages. • An External CSS: • Is a text file, saved with a .css file extension, which looks the exactly the same as an Embedded CSS, but without the: <style type="text/css"> • and </style> • tags.

External CSS • ext.css (a text file) p { font-style: italic; color: green; } h1 { font-family: Arial; font-weight: lighter; } h2 { font-family: Courier; color: #FF0000; } h3 { font-family: System; color: rgb(0,0,255); } • To link ext.css to a Web-page, all you need to do is put the following code in the <head> … </head> section of that Web-page. <link rel="stylesheet" href="ext.css" type="text/css">

An External CSS in Action!

Advantages/Disadvantages? • Advantages • Only need to build ONE External CSS file: • All ‘h1’, ‘h2’, ‘h3’, ‘p’, etc. styles will always look exactly the same in all of the Web-pages of your Web-site. • Only need to maintain ONE External CSS file: • Can easily change the way any of the styles look, across all of the Web-pages of a Web-site, by editing ONE External CSS file. • Disadvantages • I can’t think of any!

Not just Text Attributes! • Can also use CSS in order to: • set a background colour, or background image, that you wish to apply to all of your Web-pages. • control the way that Hyperlinks are initially displayed, and the way that their appearance changes when the user holds their mouse over, or clicks on them. • or even to position Web-page elements exactly where you want them to appear.

Edit the ext.css file • Adding a background colour, a standard font for all text, and a rollover effect for hyperlinks. body { background-color: silver; font-family: Comic Sans MS; } A:link { text-decoration: underline; color: purple; } A:hover { text-decoration: none; color: lime; } h1 { color: red; } h2 { color: blue; } h3 { color: green; }

See the difference!

Another CSS file • ‘Sub-classes’ can be added in order to be able to modify previously defined styles. h1 { color: red; } h2 { color: blue; } h3 { color: green; } .centre { text-align: center; } .times { font-family: Times New Roman; } .large { font-size: 24pt; }

Now see what happens! <body> <h1>This is Heading 1</h1> <h2 class="centre">This is Heading 2 AND Centre</h2> <h3 class="times">This is Heading 3 AND Times</h3> <p class="large">This is Normal AND Large</p> </body>

Next Week’s Workshop • Task 1 • Build a simple Web-page containing text of a variety of styles, then add an ‘Embedded’ CSS which alters the default properties of these styles. • Task 2 • Build a Web-page that references an ‘External’ CSS. • Task 3 • Build a number of Web-pages that reference the same ‘External’ CSS. • Task 4 • Remove the local font, colour & alignment settings from the HTML tags of a existing Web-page, then develop an ‘External’ CSS file that will re-create the look-and-feel of the original Web-page. • Task 4 • Explore a variety of Web-based resources where you can find out more about Cascading Style Sheets (CSS).

44238: Dynamic Web-site Development