NUI Galway Web Training Presentation Welcome Objective To provide training on how best to maintain and update University Web pages while also providing an introduction to systems & services provided by the Web Services team Outline 1. Introduction to Web team and services provided Web team Services provided Add-ons provided 2. Web client / server environment Web editing software (MS FrontPage) File transfer software (WS FTP) 3. NUI Galway s Web design layout (Web templates) Structure of Web template 4. How to use the Web template Web formatting Creating new Web pages Editing side navigation & footer Inserting graphics / images Inserting documents (PDFs, MS Word documents, etc) 5. Web publishing How to use file transfer (FTP) software 1
1: Introduction to Web services team and services provided Web services team Cillian Joy, Web Editor Evan Ryder, Web Technologist Web site: http://www.nuigalway.ie/web/ Services provided Web site hosting Web training Automated broken link notification system - 404 email Tools HTML cleaner IP address Header information Add-ons provided Labelled campus map New and recently updated pages list Printer friendly pages RSS reader Search facility Sitemap facility Online survey framework Online tutorial booking system 2
2: Web client / server environment Web client / server environment The computing environment of the Internet is based on the client/server model. A client/server network has two roles for computers: clients and servers. The server is a computer that responds to requests for its services. The client is a computer that requests a service from a server. We install and configure two software applications on client workstations to create, edit and publish Web content. MS FrontPage Web page editor (Create, edits and manages Web pages and Web sites) WS FTP File transfer software (Publishes Web pages) 3
2: Web client / server environment Web editing software (MS FrontPage) 4
2: Web client / server environment File transfer software (WS_FTP) 5
3: NUI Galway s Web design layout (Web templates) Introduction The University uses a specific Web page layout. This Web design / layout has been optimised to reduce file redundancy and to work in-line with the Web policy and standards. We refer to this optimised Web page layout as a Web template. The Web template can be divided into four main sections; Header, Side Navigation, Body and Footer. The Global Header is the main NUI Galway Web logo and primary navigation and cannot be edited. How ever the Local Side Navigation and Footer can be edited. These two sections of the Web template use Web technology called Server Side Includes (SSI). Using the Web template you need only modify both the local navigation file (sidenav.inc) and footer file (footer.inc) once for them to appear on each page on your website. 6
3: NUI Galway s Web design layout (Web templates) The SSI files are stored in the includes folder for your Web site. Modifications you make to any of the SSI files can only be viewed after you upload them to the NUI Galway web server. For the main Web pages, you use MS FrontPage to edit and format the Body area / content. Because each Web site may consist of several Web pages, images and additional files, Web Services provide you with a Web Pack. Each Web Pack contains: one default HTML page with side navigation, index.html A folder for SSIs, includes/ A folder for images, images/ The index.html file is the Web template that we use as our home page and is the basis for other Web pages that we wish to create by saving them as abc.html for example 7
3: NUI Galway s Web design layout (Web templates) Real view of Web template 8
The Web templates are edited using MS FrontPage. Below is a view of index.html (the previous slide) as it is displayed in MS FrontPage. 9
Web Formatting To insert and format content in your Web page, use MS FrontPage When inserting text into FrontPage, be careful not to simply copy and paste directly from MS Word, Emails, etc into FrontPage, as FrontPage preserves the existing content formatting and this creates a lot of unnecessary HTML code There are a number of ways to prevent this: Type text directly into FrontPage Copy the text into Notepad first and then into FrontPage. Notepad will remove the formatting from the text and leave you with clean text ready for copying into FrontPage. Then format in FrontPage. When pasting text into FrontPage use the Paste Special command and then select Normal paragraphs. Then format in FrontPage 10
Web Formatting The Web template has an associated stylesheet which formats the main body text to the standard NUI Galway Web font (type and size). You will also need to add headings to the text to distinguish between sections of a Web page. This can be done in FrontPage be using the Format Bar (see below) Displayed below are the local and the uploaded ( live ) version of the Web page on the Web server. 11
Creating new Web pages Until now we have focused on one Web page, index.html, which functions as your home page To create a new Web page, open an existing Web page eg; index.html. Then, on the File Menu, Select Save As. Finally in the Save As dialog box, enter a File name, e.g. about.html and Select Save This creates a new Web page, while keeping the Web template intact. You can now remove text that is not required in the new Web page and insert your correct text. When naming files, it is best practice to use all lower case letters and if you use more than one word in the file name, separate the words with an underscore _ 12
Editing side navigation & footer As mentioned previously, to edit the side navigation and footer, edit the sidenav.inc and footer.inc files in your includes folder. The side navigation maps to your Web sites sitemap or information architecture. This allows a user to browse your Web site without getting lost. Building on the examples we used before we have a very simple sitemap consisting of just a home page titled Welcome (index.html) and an information page titled About (about.html). We have already created these two pages but we need to add them to the side navigation to make them navigable / accessible. Using FrontPage open the sidenav.inc file located in your Web site s includes folder. 13
Editing side navigation & footer FrontPage may ask you what format you wish to open the file, select HTML 14
Editing side navigation & footer The sidenav.inc is an HTML table, in which you can add, edit or delete rows. Type in the title of the page you have created and then highlight the text you wish to be linked to the page. Eg: About as below. Then select the Insert Hyperlink button on the main menu. Then, in the Edit / Create Hyperlink dialog box, confirm that the correct title is in the Text to display box. Next, to link to the page you have created, enter the page name and full path in the Address box and select OK. 15
- Editing side navigation & footer - Upload live version. - The footer can be edited in the same way. 16
- Inserting graphics / images - Optimise images for the Web site by resizing each image to its optimal width and height dimensions for the specific location where you want to display it on the Web page - Generally images you will be using will be much larger in file size and dimensions than that is required for a Web site. The typical image from a digital camera is ~ 1500px height and ~ 2000px width, with a file size of ~ 500KB. The average file size for a Web image is 20KB - When inserting images into the body of a Web page, you must consider the context of the image. For example, if you want to fill the width of the body area remember that the max body width of the Web template is 480px, so images will have to be smaller than this size (max 450px width) to fit in the body area of the Web pages. - Alternatively, you may want to insert an image next to text. For example, you may want to add staff pictures to the right or left of staff details on a Web page. This requires a smaller image of ~150px width for each staff member. - Images can be optimised (resized and saved) by using PhotoShop, Fireworks, or PaintShop. - Once the images have been optimise for use on your Web site copy or move them to the Web sites images folder (normally c:\website\images) on your pc. - Then, in FrontPage open the Web page into which you want to insert the image. Place the cursor exactly where you want the image inserted. - Next, on the Insert Menu, highlight Picture, and on the Picture submenu, select From File. Then in the Pictures dialog box, browse to the image you want and select the Insert button. 17
- Inserting graphics / images The image is now inserted in the Web page you can also align an image by Right- Clicking it and selecting Picture Properties 18
- Inserting graphics / Images Then on the Appearance tab of the Pictures Properties dialog box, select the alignment option you want, finally select OK 19
- Inserting graphics / Images Remember you will not be able to view your image until both the image and updated Web page have be uploaded to the Web server. This is covered in Web Publishing. 20
- Inserting links to documents (PDFs, MS Word documents, etc) - To add a link to a document (other than HTML), you must first create a documents folder in your website folder (normally c:\website\documents) on your pc. - Then rename and save the document to your documents folder. - Then, in FrontPage open the Web page into which you want to insert the document link. - Provide information regarding document identifying the subject matter, instructions for use, file format, and size. - Then highlight the text where you want to create a hyperlink to the document (normally subject matter text), then create a link to the document you want to add. 21
- Inserting documents (PDFs, MS Word documents, etc) 22
5: Web Publishing - How to use file transfer (FTP) software - The final stage after creating and editing your Web page is to put them on the Web server. WS FTP (software application) is used for this purpose. It is a FTP (File Transfer Protocol) client, which sets up a connection between your computer and the Web server - The default view in WS FTP is to show a split screen with your computer on the left hand side and the Web server on the right-hand side - You can transfer files from left to right (uploading) and from right to left (downloading), using the arrows in the centre of the application 23