44238: dynamic web-site development

44238: Dynamic Web-site Development

Common Look-And-Feel

Ian Perry Room: C49

Extension: 7287

E-mail:[email protected]

http://itsy.co.uk/ac/0708/Sem1&2/44238_DWSD/

Ian Perry 44238: Dynamic Web-site Development: Common Look-And-Feel Slide 2

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

Before After


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

Documents

webpage components

common webpage elements

following reusable websiteweb

cssbeforeafterian perry44238

different font

new page

html documents external

html code