44238: Dynamic Web-site Development Common Web-page Elements Ian Perry Room:C48 Extension:7287

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 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.

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 3 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.

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 4 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.

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 5 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.

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 6 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.

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 7 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.

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 8 How does SSI Work?  SSI files tend to be quite simple HTML documents, however, they DO NOT usually include any; …, or … tags.  SSI only ‘works’ from a Web-sever! You CAN NOT see the effect of SSI by looking at your Web-pages locally.

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 9 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

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 10 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.:

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 11 Common Web-page Elements  top.txt Organisation Name & Logo  nav.txt Page One | Page Two | Page Three  bot.txt Web-site Author

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 12 one.asp SSI - Page One Page One  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.

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 13 And this is what you should see!

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 14 SSI - Page Three Page Three SSI - Page Two Page Two Repeat the process for two.asp & three.asp

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 15 I use SSI a lot!  See if you can spot where SSI has been used for these Web-sites: itsy.co.uk Kimberworth Insurance Bureau Ltd. Leek Educational Sun Organics

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 16 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.

Ian Perry 44238: Dynamic Web-site Development: Common Web-page Elements Slide 17 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).