44238: dynamic web-site development common web-page elements ian perry room:c48 extension:7287...

44238: Dynamic Web-site Development

Common Web-page Elements

Ian Perry Room: C48

Extension: 7287

E-mail:[email protected]

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

Ian Perry 44238: Dynamic Web-site Development: Common Web-page ElementsSlide 2

Remember?

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.


Where are we up to?

Over the past two weeks, we have had a look at: Cascading Style Sheets (CSS)

Which can be used to apply a ‘Common Look-and-Feel’ to multiple Web-pages.

This week, and next, we will turn our attention to: Server Side Includes (SSI)

Which allow you to include ‘Common Web-page Elements’ within multiple Web-pages.


What is the ‘Problem’?

Web-site Developers often have to make quite large changes in the structure & presentation of a Web-site, e.g.: Adding/Removing items from a Web-site’s

main navigation system. If the Web-site they are currently working

on is composed of many Web-pages: This may prove to be a very time

consuming, and error-prone, task.


What is the ‘Solution’?

Server Side Includes (SSI) which can be used to develop common

structural elements, that can be ‘included’ in multiple Web-pages.

For Example: a common page header. a set of navigation links. a common page footer.


What is the ‘Solution’?

Server Side Includes (SSI), i.e.; to deliver the relatively static elements of

Web-pages. Pre-built SSI elements can be used, and re-used;

to make the task of constructing Web-sites a much easier/faster process.

With SSI, ‘mistakes’ in overall structure and presentation of a Web-site can easily be rectified without having to re-edit multiple Web-pages.

All the Web-site Developer needs to do is to change the content of ONE SSI file, in order for this change to be apparent in ALL of the Web-pages that ‘include’ this SSI file.


How does SSI Work?

To use SSI effectively you need to be able to separate: the static, re-useable, common

elements that you wish to appear on all of your Web-pages.

From: the content of individual Web-pages.


How does SSI Work?

SSI files tend to be quite simple HTML documents, however, they DO NOT usually include any; <html>…</html>, <head>…</head>, or <body>…</body> tags.

SSI only ‘works’ from a Web-sever! You CAN NOT see the effect of SSI by

looking at your Web-pages locally.


Where might we use SSI?

Suppose we wanted to construct a series of Web-pages that had this general structure?

These elements will be common to all Web-pages.

Each Web-page will, however, have some unique Web-page Content.

Organisation Name & Logo

Web-page Content

Navigation System

Web-site Author

SSI is REALLY simple!

All you need to do is: Build the simple text/HTML files that

are to be ‘included’, e.g.:top.txt, nav.txt & bot.txt

Build each Web-page:with the unique Web-page Content only

Insert the following code where you wish one of these common SSI elements to appear, e.g.:


Common Web-page Elements

top.txt <h1 align="center">Organisation Name &

Logo</h1>

nav.txt <p align="center"> <a href="one.asp">Page One</a> | <a href="two.asp">Page Two</a> | <a href="three.asp">Page Three</a> </p>

bot.txt <h3 align="center">Web-site Author</h3>

one.asp

<html> <head> <title>SSI - Page One</title> </head> <body>  <hr>  <hr> <h2 align="center">Page

One</h2> <hr>  </body></html>

You CAN NOT see the effect of SSI by looking at your Web-pages locally.

as SSI only ‘works’ from a Web-sever!

So, to test that one.asp looks OK, you must copy all of the files, i.e.:

one.asp, top.txt, nav.txt & bot.txt.

to a remote Web-server, then load one.asp from that remote location.


And this is what you should see!

<html> <head> <title>SSI - Page Three</title> </head> <body>  <hr>  <hr> <h2 align="center">Page

Three</h2> <hr>  </body></html>

<html> <head> <title>SSI - Page Two</title> </head> <body>  <hr>  <hr> <h2 align="center">Page

Two</h2> <hr>  </body></html>

Repeat the process fortwo.asp & three.asp


I use SSI a lot!

See if you can spot where SSI has been used for these Web-sites: itsy.co.uk

http://itsy.co.uk/

Kimberworth Insurance Bureau Ltd. http://kimberworthinsurance.co.uk/

Leek Educational http://leekeducational.com/

Sun Organics http://www.sunorganics.co.uk/


You MUST use SSI for Ass 1

The ‘PQR Travel’ Web-site has several opportunities where SSI would provide an ideal solution. Some of these ‘opportunities’ are more

obvious than others. Look carefully for these opportunities;

and use SSI in order to include as many common Web-page Elements as you can.


Next Week’s Workshop

Task 1 Download a number of files (both Images and Web-pages) for

use in later Tasks. Task 2

Build some ‘common’ Web-page elements, that will be used to deliver the Page Header, Navigation System, & Signature Block for a small Web-site (see Task 3), and to convert the Web-pages dowloaded during Task 1 in to Active Server Pages (ASP).

Task 3 Modify the Active Server Pages from Task 2, so that they

include (using Server Side Include statements) the common Web-page elements that you also created during Task 2.

Task 4 Re-work the Web-site created during Task 3 so that it

employs CSS (for a common look-and-feel), as well as SSI (in order to include common Web-page elements).

44238: dynamic web-site development common web-page elements ian perry room:c48 extension:7287...

Documents

series of web

multiple webpages

common webpage elementsslide

website developers

webpage components

static elements of web

common elements

common page footer