How To: Edit Your P&L Web Page

This page shows you how you can use a free web-page editor to edit your web pages on the department's web server. It covers:

Installation of the editor
Editing existing pages from P&L computers
Dealing with server-side includes
Creating a new page using a house template
Editing pages from home

Installing First Page 2006 Editor

First Page 2006 is a free HTML editor developed by Evrsoft. This editor has many nice properties, including the ability to edit pages either in WYSIWYG mode or as HTML code. It is one of the few editors that deals properly with the "Server-Side Includes" that we use on our site to provide standardised headers and footers. However to get the most out of this editor you will need to know some elementary HTML. To help you get started, some simple page templates are available.

First Page 2006 can be downloaded from http://www.evrsoft.com/download.shtml

Right click on the "Download" link and save the installer to a folder on your computer. The installer is downloaded as a ZIP file, so you will first need to unpack it; if you have WinZIP or similar on your computer this is as easy as double clicking on the ZIP file in Windows Explorer and selecting 'Extract'. Once you have extracted the .EXE installer, a double click on this file in Windows Explorer will install the program and add an icon to your desktop. After installation you can delete the .EXE file and the .ZIP file for the installer.

When you run First Page 2006 for the first time, it will probably start up in the "Start Manager". If you don't want this, then unselect the option "Show Start Manager at Startup" and click on the button "Create Default Document"

When the First Page editor starts, it will show the HTML view and an automatic preview. You can turn off the automatic preview with a button on the editor window side bar labelled "Toggle Visual Source Engine". At the same time you can turn on word-wrapping with the button labelled "Word Wrap".

First Page 2006 has a number of display configurations. At the start it will be in "Easy" mode, but this can be changed using the "Options" menu.

Some people find that typing on First Page can be a bit slow. If this is a problem then you can speed this up by turning off "auto-tag completion" which can be found on the Options|General program preferences dialog as follows:

How to edit existing pages from P&L computers

The best way to edit pages is to access them on the server over the network directly, rather than by first downloading them with a browser. This ensures that any server-side includes are preserved while editing. Also, this is the only way to edit pages which use PHP. To make this easy, ensure you have bookmarked the departmental server in your "My Network Places" folder. To do this open "My Network Places" on your desktop and under "Network Tasks", select "Add a network place".

When it asks you for an "Internet or network address", type "\\bell\www". When it asks you for a name to give it, you can accept the default (e.g. "www on Samba Server (bell)").

Now start First Page 2006 and navigate to your "www" folder:

Now double click on the HTML file you want to edit and it should appear in the main frame. At the top of the main frame are options to allow you view the HTML Source, Preview the page as it will be displayed, or edit the page Design. The last gives you a WYSIWIG mode of editing - if you prefer that.

If you edit pages and save them the changes will be directly stored on the server and they will become instantly available on the web site. If you want to edit page "off-line", then save the file first to a folder on your computer, then when editing is complete, save it back to "\\bell\www".

How to deal with Server-Side Includes

On the Phonetics & Linguistics web site, we use Server-Side Includes (SSI) to incoporate standard features like the main bar, the side bar and the footer across multiple pages. The basic format for a SSI looks like this in the HTML code:

<!--#include virtual="somefile.html" -->

What happens is that when this page is being sent from our web server, the system includes into the stream of data sent to the user the contents of the included file at this point in your file. The inclusion is done by the server and is invisible to the client browser. Indeed the client will never see the SSI instruction, only the included data.

On a typical P&L web page, there are SSI instructions for the main title, the side bar and the footer. In addition, we also use a common style sheet. So here is the basic template for a web page using SSI instructions. This template assumes that the page will be stored in "\\bell\www".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <link rel="stylesheet" type="text/css"
     href="http://www.phon.ucl.ac.uk/phonetics-layout.css"
     title="Phonetics Stylesheet">
 <title>UCL Phonetics &amp; Linguistics</title>
</head>
<body>

<!-- Header  --><!--#include virtual="../../includes/header_bare.html" -->

<!-- ############## start body text ################## -->
<h1>Web page Template</h1>

<p>Your text goes here.</p>

<!-- ############## end body text ################# -->

<!-- Footer --><!--#include virtual="../../includes/footer_bare.html" -->

</body></html>

There is one final thing you need to do. You need to tell First Page where it can find the folder called "../..". You do this in the "Options|General Program Preferences" dialog, as follows:

Click on the "Add" button and fill in the details as shown above (substituting your name for mine!).

How to create a new web page using departmental styles

A template which contains the basic elements of the house style can be found at ftp://ftp.phon.ucl.ac.uk/pub/template/basic.html. To download and use this as the basis for a new page, right-click on the link and choose "Save Target As ..." to save the file under a new name in your "\\bell\www" folder.

Now you can edit the file as above, to add your own content.

If you would like to add a sidebar to the page, you can either include a standard sidebar or build your own. To add a standard sidebar, you will need to change the SSI statements used to include the header, sidemenu and footer from the default used in the template. To make a page that looks like it fits under the "About Us" heading for example, you would use these SSIs:

<!--#include virtual="../../includes/headers/header_dept.html">
<!--#include virtual="../../includes/sidemenus/sidemenu_dept.html">
...
<!--#include virtual="../../includes/footer.html">

If you want to "roll your own" sidemenu, I suggest you get a copy of an existing sidemenu file from the server and edit it. You can then save this in "\\bell\www" and include it with an SSI that has virtual="mysidemenu.html".

Editing web pages from home

When you edit pages from home, you can still use First Page and the SSI statements, but you also need to deal with copying the files to and from the server. This section will show you one way to achieve this.

To copy files between your home machine and "\\bell\www" the best way at the moment is to use a file copy program that supports "ssh" protocol. A relatively easy to use program is WinSCP, available from http://winscp.net/eng/download.php:

Download and install this program, then when it starts, select "New Session" and enter the server details and your log-in, as follows:

Now "Save" the session details and "Login". Then you can set the left pane to display a suitable folder on your home computer, and the right pane to display the files in your web space on the server:

Here, I am using a folder "c:\www\www.phon.ucl.ac.uk\home\mark" on my computer, and the remote address is "/web/www_phon/home/mark". You can even save these folders as part of the session in WinSCP, so that the program starts up in these automatically.

To download a file from bell to your home computer, find the file in the right-hand pane and click on it. Now click on the button on the lower toolbar labelled "F5 Copy" to download the file.

To upload a file from your home computer to bell, find the file in the left-hand pane and click on it. Now click on the "F5 Copy" button to upload the file.

You can download and upload multiple files, by first selecting multiple files in one pane.

You can now install and use First Page 2006 to edit the files on your home computer. However you will need to set up the "server mapping" differently. Under "Options|General Preferences", add a Server mapping that is analogous to the following:

Remember that any files that you change will need to be uploaded to the server for them to appear on the web site.

Frequently Asked Questions

How can I make my home page accessible as
http://www.phon.ucl.ac.uk/home/fred/
rather than
http://www.phon.ucl.ac.uk/home/fred/home.htm ?
Save the main page with the name "\\bell\www\index.html" rather than "\\bell\www\home.htm".
When no file is given in the URL, the server automatically provides the file called "index.html".

Why do some paragraphs in the house style start at the left edge of the page rather than the left margin?
Because they have not put within "paragraph" tags. In the HTML, ensure that each paragraph starts with "<p>".

Why is the right edge of my page cut off when I print to A4 in portrait layout?
The widest page that can be printed on A4 is about 650 pixels. If you have any tables or graphic elements, make sure that they do not widen the page beyond 600 pixels or so.

What tools did you use to write this page?
I used First Page 2006 as suggested in the text. To capture the images, I displayed the dialog boxes and pressed [Alt+Print Screen], then pasted the window into a new image using Paint Shop Pro. I also used Paint Shop Pro to crop the images, before saving them in PNG format directly to the server.

Why can't I just use Microsoft Word on the files stored on the server directly?
Microsoft Word is fine for simple pages containing just text, but it does not handle more complex pages very well. It makes significant changes to the HTML coding used on pages, and this can break their design and operation. Even though our current house style does not use particularly complex HTML, styles sheets or JavaScript coding, our pages do not display correctly once they have been edited by Word.