To familiarise University Web administration staff with the capabilities of the University CMS and also introduce concepts of Web marketing.

Transcription

1 Web Training Course: Web Editing - How to use the Content Management System (CMS). Version 1.0 Draft October 2006 Version 1.1 March 2007 Version 1.2 April 2007 Course Rationale: The University is currently rolling out new Web publishing templates to all organisational units. The templates are only editable using our Content Management System (CMS). The CMS is a Web page online editing tool that replaces existing tools used by organisational units, namely (MS FrontPage, Macromedia Dreamweaver and WS-FTP). This tool allows users to quickly, safely, and easily: Change textual content on their Web pages Upload and insert images into editable areas of their Web pages Manage their Web site s side navigation bar Edit Meta Tags (used by search engines for page ranking) Create new Web pages Aims & Objectives: To familiarise University Web administration staff with the capabilities of the University CMS and also introduce concepts of Web marketing. Prerequisites: You are a University Web administrator You are using (or are schedule to use) the University CMS to edit your Web site You have completed the Introduction course to the CMS Course Content: Introduction to the Content Management System (CMS) Web Publishing Use of the Content Management System (CMS) o Creating a Web page with content and images (Exercise 1) o Upload and link to documents (Exercise 2) o Creating links (Exercise 3) o Adding links to the side navigation (Exercise 4) o Deleting content, links, images, Web pages & documents (Exercise 5) o Edit the title, description, and keywords (Exercise 6) Introduction to Web marketing o Search engine optimisation (SEO) 1

2 1. Introduction to the Content Management System (CMS) 1.1. Introduction to the CMS The CMS is a Web page online editing tool that replaces existing tools used by organisational units, (namely MS FrontPage, Macromedia Dreamweaver and WS-FTP). This tool allows users to quickly, safely and easily: o Create new Web pages o Change textual content on their Web pages o Upload and insert images into editable areas of their Web pages o Manage their Web site s side navigation bar. o Edit Meta Tags (used by search engines for page ranking) The URL for the CMS is: Data Flow 2

3 1.3. Explaining the Interface Login Login using the URL and your username and password for the Web server. 3

4 1.3.2 File Structure After you login, the Web page below is displayed. This page is called the File Structure page as it displays the list of the files & folders that make up your Web site. 1: Enter URL of Web site you wish to edit and then select Show Editable Pages 2: Latest CMS News 3: General activity of University CMS users 4: Auto logout display timer 5: Web site File Structure index.html this is your home page and is the Web page you originally work with to begin creating your site. /documents/ - the documents folder which stores all your documents which are other than HTML e.g. PDF, Word, Excel, Power point. /template/ - the contents of the template folder are used by the CMS as the template for creating new Web pages. Functions New File Here New Sub-Folder Here To preview a Web page you must mouse over the HTML file to view it in the Preview Area. To edit a Web page you must click on the HTML file to open the Web page in Edit mode. 4

5 1.3.3 Editable areas After you click on a HTML (.html) file you are then in edit mode. Each Web page is divided into distinct areas to assist when editing and managing your Web site content. Editable Areas: 1: Breadcrumb Trail / Locator 2: Page Body Area for general text and images 3: Web page Footer Press edit button to enter into edit mode for any editable area 4: Navigation 5: Control Panel Note: Each one of your Web pages uses the same navigation and footer areas. Therefore you can update these from any Web page and if you make a change in one Web page it will be reflected in each Web page. 5

6 Control panel, buttons & menus Control Panel Buttons - Edit button - Design view of content in main body area - HTML view of content in main body area 1: The Undo HTML cleaner button is a facility in place to revert back to the page s original state before opening and saving in the CMS. This is necessary as some Web editing tools such as Microsoft Word create additional code that the CMS will attempt to clean up by removing it, however in its attempt to remove the code you may lose some of your page s content. The Undo HTML cleaner button will revert to its original content. 4: The Preview saved Web page button allows you to see the page as it will appear to visitors of the Web site. This button opens a new browser window to display the page. 6

7 Editable Area menus 21: When editing pages different Styles are available that will format the text on the page to the chosen style. These styles are in place to allow users to change the look of text for different purposes such as short descriptions of photographs or to simply make it different to the normal text. 13: The editor of the page can also undo any of the Styles applied to the page by simply clicking the Cleanup (remove styles) button which will clear the whole page of any styles used. 22: To emphasise headings the user can format the text so it will appear as one of six options available, alternatively you can leave the text as normal paragraph text. The headings available range in size and appearance with Heading 1 being the principal one for page titles and then decreasing in size to Heading 6. These formatting headings should be used most often. 7

8 2. Web Publishing Use of the Content Management System (CMS) 2.1. Creating a Web page with content and images (Exercise 1) Create example Web page for staff information and add content and images Creating new Web pages 1: In the File Structure view, begin creating a new Web page using the New File dialog box by clicking New File Here in the main folder or sub-folder. 2: Enter file name; select the file extension, and select template file. 3: Finally press the Create button to create the new Web page. The new Web page will take less than a minute to create. As it is being created it is being put onto the server. This is referred to as Publishing by the CMS. It is indicated by a timeline, which appears in the lower right hand side of the page. See picture below. Please click 'Show Editable Pages' to refresh your view after ~1 minute to display the newly created page in the Web site s file structure area. This indicates the page is being created and being published on the Web server. Note: You can also use the Create new Web pages facility to copy files. 8

9 Adding or modifying textual content on Web pages 1: To open a Web page in edit mode click on the Web page in the File Structure view 2: Modify the Breadcrumb, header, body area and footer to reflect your Web site s details by clicking edit buttons. 3: Don t forget to Save, this will close all edit boxes and save the Web page. At this stage it is useful to preview your Web site, do this by opening a new browser window and typing the address of your Web site. In the case I m using here it would be You can keep this open while you edit your Web site to preview from time to time. Remember to click the Refresh button on your Web browser as you make changes. The Web page you created will not automatically appear in the side navigation, we will add a link in the side navigation to the Web page later. 9

10 2.1.3 Uploading or inserting images into Web pages You can only insert images into the body area of your Web page. Images must first be optimised for the Web site before you upload or insert. See Appendix A Optimising Images Inserting graphics / images o 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 o 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 o 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. o 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. o Images can be optimised (resized and saved) by using PhotoShop, Fireworks, or PaintShop. o Once the images have been optimised for use on your Web site, copy or move them to a location on your pc. 1: To insert an image, first open the Web page in Edit Mode and open the body area for editing. Then place the cursor in the exact position where you want to insert the image. (Keep in mind you can later align the image to the left or right of the text). 10

11 2: Then click to open the Insert Image dialog box o Images can be inserted using the Library drop down menu, this displays all images that are stored in the images folder of the Web site you are working on, if you have sub folders which subsequently also have image folders, then you will also be able to access those images through the Library drop down menu. Another folder available through the Library drop down menu is NUIG Stock Images which holds many images available for use. o To select an image from the Library simply select the required image from the list available and click the Select button to insert it. o If you have an image saved in a location different to those available in the Library you can Upload an image to the library for use. To do this click the Browse button to locate the image then click the Upload button to put it into the image library. Now follow the same process as above to insert an image from the Library. Aligning graphics / images After you insert the image you can also align it on the Web page. To align the image select the image and the click the Image Properties icon which will open the Image Properties dialog box. Select align to the right, then OK and finally Save in the control panel. This will align the image to the right of the text. 11

12 2.2. Upload documents (Exercise 2) Upload a document and create a link to it Note: In this case documents are defined as any document that is not HTML i.e. PDF or Word documents. You can only upload documents into the /documents/ folder. In the File Structure view, open the /documents/ folder and click Upload a File Here. This action will open the upload file dialog box. The dialog box gives you the option to browse your computer to select a file to upload. Once you have chosen a file, select Upload. This uploads the document to the documents folder. The new document will take less than a minute to appear. Please click 'Show Editable Pages' and then open /documents/ again to refresh your view after 1 minute To create a link to the document from your Web site, you must enter Edit Mode and create a hyperlink to the document. Treating it like an external link (open in new window). When creating links to documents it is advised to give the user as much information as possible before they download or open the document. For example [Document name this text is linked] - (250KB PDF document that opens in a new window) 12

13 2.3. Creating links (Exercise 3) Create hyperlink from body area of Web page to different Web pages A hyperlink or a link is a reference in one Web page to another Web page or document. Links are used to: o Create links to Web pages in your Web site (Internal Links e.g. creating a link from your index.html to your staff.html Web page) o Create links to Web pages or Web sites outside your Web site (External Links e.g. creating a link from your Web page to or ) o Create links to documents either internal or external to your Web site Inserting links (URL) To create a hyperlink in a Web page you must enter Edit Mode by selecting the file you wish to create the link from. 1: Then select the text that you wished to be linked (Display Text). 2: Click Insert Hyperlink button on the edit menu. 13

14 A link dialog box will open where you enter the link details: Type: Link URL: Web address of the Web page you are linking to Target: For internal links = same frame (_self) and for external links = new empty window (_blank) Title: Descriptive title Internal Link External Link Click OK and then Save on the Control Panel. 14

15 Editing the footer The footer can be edited from any Web page in Edit Mode and the changes made will be reflected in every Web page where that footer is used. In the footer you can enter your Web site s title, your address, phone number, fax and address. To enter an address type the full address (followed by a whitespace to activate the link) i.e. training@nuigalway.ie and then click Save. 15

16 2.4. Adding links to the side navigation (Exercise 4) Create side navigation that links to index page and Web page created in Exercise 1 The side navigation is the main navigation of your Web site and should reflect the structure of your content, i.e. the Web sites sitemap (Discussed in Introductory Course). The side navigation can be edited from any Web page in Edit Mode. Side Navigation Actions (these are accessed using the control panel) o Add or delete links by using the control panel o Move links up or down by using the control panel o Indent or out-dent links by using the control panel Note: You can modify the link display text and link URL by clicking on the link text and inputting the display and URL. Note: To select the side navigation and access the extra functions that appear on the control panel, click on a radio button to the left of a link. You can also click on the text of a link to modify the link. 16

17 Creating Navigation Categories To make sub links you need to sort them into different categories. The category name you choose will not be a link but rather will expand when you click on it to display the subsequent sub links. To create sub links, begin by creating a link as normal and then click the indent button. This displays a prompt box in which you must enter the category name and click OK. The sub link now appears below the category name. Note: You do not need to create an additional Web page for each category. Categories are simply groupings of sub pages or sub links. They are not Web pages. This means that when you click a category, it simply expands to show the list of sub links or sub pages. It does not open a new Web page. You should use the side navigation to create a link to the Web page you have created in Exercise 1 and then open the Web site to test the link. 17

18 2.5. Deleting content, links, images, Web pages & documents (Exercise 5) Deleting content Delete content by entering edit mode and use the mouse to select the content you wish to remove or edit. Then press Delete or Backspace on your keyboard. Deleting links and keep link display text To delete a link and the link s display text, select the text and press delete on your keyboard. To delete a link without losing the link s display text, select the text (or part of the text) that is linked. Then click the hyperlink button, this opens the link dialog box. Highlight the link in the URL text area and press delete on your keyboard. Then click Ok. Deleting images To delete an image click the Insert Image icon. Use the Library drop down menu to select the correct images folder. Then select the required image from the list available and click the Delete button to delete it. Caution: Preview the image in the Preview pane to ensure this is the correct image for deleting as images can not be restored once deleted. Deleting a Web page or document To delete a Web page or document, enter File Structure view. In this view use your mouse hover over the file that you wish to delete. You will notice that after two seconds it will highlight in blue. Then the Delete Selected File button becomes active, click this button to delete the file. After you delete a Web page or a document the Show Deleted Pages button becomes active, this shows you the files or documents you have just deleted and it will hold a copy of them for 2 weeks should you need to retrieve them. 18

19 2.6. Edit the title, description and keywords (Exercise 6) The title, description and keyword are critical aspects of your Web pages and should NOT be ignored. To add or modify these elements enter Edit Mode for a Web page and on the control panel select Search Engine Optimisation. You will notice that the header section of the Web page turns into an editable area where you can enter the title, description and keywords. Note: The description and keywords are only used by search engines to index and rank your Web pages. The title is seen and used by Web site users and should always by filled out in a descriptive but short manner. 19

20 3: Introduction to Web marketing Search engine optimisation (SEO) SEO allows you to increase the number of visitors being directed to your Web site through the major search engines. There are a wide variety of factors to take into consideration when optimising your Web site. What search engines like o Relevant keywords o Page titles o Page text (HTML) o Navigation, internal links, sitemaps o Popularity o Age Essentially: established Web sites that are well organised and well-managed. Considerations: Write useful, interesting and unique content that is specifically geared towards the target audience. Incorporate the key search terms and phrases in the first paragraph of the page. The first 500 words are typically indexed by search engines and your Web site s ranking is based on this indexing. Do NOT use search engine tricks and other tactics that will only lead to negative traffic and potential banning of the site from any search engines. Always check for spelling and grammar. If the content has misspellings and poor grammar the Web site and organisation will appear unprofessional and may sway people away. HTML Tags Certain HTML tags impact how a search engine or directory indexes and categorises a Web site. These tags are found within the <head> tags of a web page. The most important of these tags are <title>, <meta>, and heading tags. 20

21 Title Tag The Title element stores the title of the document. A well written document title should be short and specific to the document's content. A good length for a document title is around sixty characters and it should include specific keywords found in the content. The text is you place in the <title> tag appears in the title bar of the browser when a Web page is viewed. This is displayed across the top of the browser. Below is an example of a title tag: <title>an Introduction to Search Engines</title> Meta Tags Meta tags specify metadata which is information about the document rather than the document content. The Meta element can be used to include name/value pairs describing properties of the document, such as author, expiry date, a list of key words etc. Meta tags have never been a guaranteed way to gain a top ranking on crawler-based search engines. The most valuable feature they offer a Web site owner is the ability to control to some degree how their Web pages are described by certain search engines. The following is a list of popular meta elements that impact the way a Web site is indexed and ranked. Meta Name Content Value Description Description Keywords site dependant site dependant Included below are a few examples of <meta> tags: This tag is a summary of a web page's content that can be displayed in search engine results. Several major engines, and a lot of minor ones, use this tag in this manner. The content can be up to 1024 characters long, most search engines will cut off the displayed description somewhere between 100 and 200 characters. This tag provides a list of specific keywords and phrases that define the content and purpose of the web site. <meta name="description" content=" National University of Ireland, Galway (NUI Galway / NUIG / UCG) - an information resource for prospective and current students including research and faculty > <meta name="keywords" content="diploma, masters, doctorate, study, studying, distance, learning, higher, education, undergraduate"> Once the meta tags have been created and the document uploaded to the server, an analysis can be done using some of the tools provided in the tools and resources section below. 21

22 Heading Tags HTML has defined six heading levels that are intended to signify the relative importance of a defined section. These tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The <h1> element represents the most important, whereas <h6> represents the least. Search engines use heading tags as part of the indexing algorithm. Correspondingly the greater the heading tag, the more relevant the search engine considers it. What can we do? Using the CMS we can: - Add descriptive but short titles to every page - Add descriptive but short descriptions to each page - Add descriptive keywords (separated by commas) to each page - Use formatting headings <h1><h2><h3><h4><h5><h6> for heading text. Tools and resources All tools and services listed here are free, only a few require registration. Google Information for Webmasters This includes vital information on submitting your site to Google, PageRank information, do's and don'ts, and detailed design and content guidelines. Meta Tag Generator Meta Tag Generator is a basic tool that will help write meta tags in HTML quicker and easier. Crawler Alert This is a free system that will whenever a search engine spider/bot is detected on a site. Very useful to find out when a site is going to be indexed. Wordtracker Keyword services for professional search engine optimisation 22

23 Appendix A - Optimising Images 1. Introduction 2. How to optimise an image 3. Crop an image 1: Introduction The objective of this document is to inform University Web administration staff of how to optimise an image for use on the University s Web sites. 1.1 What is an optimised image? An optimised image is when an image s file size is reduced so it will load on the Web site in the quickest possible time. Note: Reducing the file size will not be evident by simple resizing the image s width and height proportions, it needs to be sufficiently Optimised. 1.2 File sizes A byte is commonly used as a unit of storage measurement in computers, regardless of the type of data being stored. A kilobyte is 1,024 bytes. The University s Web sites should use the average file size of images at 20kb (20480 bytes) as a rule of thumb. To determine an image file size simply right click on the image and choose Properties to see the size details on that image. A typical digital camera image is 500kb which is roughly 1500px height by 2000px width. A pixel (px) is a single point in a graphic image and can be used for measuring the height and width of images. 1.3 Maximum image widths for University Web sites The body area width of the University Web template is 480px. No image can have a width larger than this. Full width If an image is to be displayed the full width of a University Web page than the image width should be 450px (images of buildings or graphs). Smaller images If an image is to be inserted aligned to the left or right of existing text then the suggested width for the image is 150px (images of staff members). 23

24 1.4 File formats When working with images on the University Web site one of two formats should be chosen for the image. Depending on the amount of colours in use on the image and the type of image it is (photo, logo, graph) a format should be chosen accordingly. JPEG A jpeg is a common image format and should be the used for images like photos, art, or any image that contains many colours or shading. The filename should be something like image_name.jpg. PNG A png is an image format that should be used for logos, screenshots, or any image that has few colours. The file name should be something like image_name.png. File naming convention - Use all lower case characters - Use an underscore _ to denote a new word - Do not use illegal characters like! $%^&*()?><@# ;: For example: web_training_cms.pdf 24

25 2: How to optimise an image This outlines how would use Macromedia Fireworks 8 to optimise an image. Contact Computer Services User Support to obtain this software For this example an image will be optimised as a jpeg to use on a Web page. We will then use the CMS to upload and insert the image. 2.1 Launch Fireworks and open the image you want to optimise. To open an image, choose File, Open and browse to where the image is located, then click Open. This image is so large in height and width (3072px x 2048px) the whole picture is not visible. 25

26 2.2 Choose Modify, Canvas and Image Size This opens an Image Size properties box. Here make sure that Constrain proportions is checked, this ensures that when you change the width of the image that the height will change in relation to this and vice versa. When constrain proportions is selected it is indicated by the padlock sign. Image dimensions may not be pixels by default so select this using the drop down menu. For this image we want it to cover the full width of the Web page. As stated earlier we know it must be 450px in width to do this, so type this value into the width text area. The height value will update also, now press OK. Alternatively enter 150px into width text area if the image is for insertion beside text. These measurements are guides so follow as needed. Now the image is fully viewable at 100% with the dimensions of 450px x 300px. 26

27 2.3 Optimise the image using the Optimise panel. If the panel is not available choose Window and Optimise to view the panel. Make sure JPEG is selected from the file format menu and begin to reduce the quality of the image gradually using the quality menu in the Optimise panel. Reduce it by 10 to see the difference by either typing in the number or using the drop down button to the left to reduce using scale. Now preview the new version of the image using the Preview button. Use the 2-Up button to see the difference between the quality of this image and the original quality. When previewing the image here information is available at the bottom of the image regarding file size and download time, for this image it is now at 51.17k filesize and the download time is 8 seconds. When the Optimised image shows no visible degradation lower Quality settings can be entered to achieve a smaller file size and faster download time. Further changes in quality can be made until the desired filesize has been reached. Use the 4-Up button to view all changes however by default the 4-Up window displays the current Optimised settings for the three Optimised versions. Try additional Quality settings as needed until you are satisfied with the balance of file size and image quality. The desired filesize for University Web site images is 20k. When you have determined the appropriate Quality setting, select the Optimised image with that setting applied and then click the Preview button. Note: Quality level set to 70 gives a good balance of image quality versus filesize. This setting should be normally used. 27

28 2.4 Save the image. To do this choose File Save As When saving ensures the Save as type has been set to the necessary format, for this it is a JPEG. Then click Save. The image is now saved to the location you specified and can be uploaded from here to the CMS as needed. 28

29 3: Crop an image Note: Sometimes you may have pictures that need to be cropped. This may be because one item in the picture is all that is needed. This can be done in Macromedia Fireworks Launch Fireworks and open the image you want to crop. 3.2 Select the Crop tool as highlighted in diagram; use this tool to draw a box around the item you want to select in the image. This will give you a black dotted line, simply double click inside this box and the image is cropped. 3.3 Now select the Pointer tool near the Crop tool and return to Step 1 for How to Optimise 29