How to update the Fay Johns website Contents
How to update the Fay Johns website Contents Page Overview 1 Accessing the Content Management System 1 Editing the Artist’s Details 2 Add an Artwork - Resize the image - 2-5 Complete the Add an Artwork form View / edit the Artworks - Overview - - Edit Text Reserved Sold Delete Change the image 5-6 Editable Pages – Home Page - - Overview Save a backup Restore a backup Editing the text 7-8 How to use the Text Editor - - Add new text Delete text Format text Font and font size Coloured text Bullet points Add a hyperlink to an external website Add a link to another page on the site Insert a table Delete a table Save changes 9 - 12 Adding pictures to the Editable Pages - - Resize the image Upload the image Add the image to the page 12 - 13 Changing the date on the website 13 Logging off 13 (c) WesternWeb Ltd 2011 How to update the Fay Johns website Overview The website is built around a content management system which enables you to add new artworks and to view and edit existing artworks. You can also update the home page and change the date displayed on the website. Accessing The Content Management System 1. To access the content management system, open Internet Explorer and enter the following web site address: www.fayjohns.co.uk/data/admin/admin_page.php or click on the (c) symbol at the bottom of the home page (http://www.fayjohns.co.uk/) 2. A dialogue box appears asking for a user name and password which have been supplied separately. IMPORTANT NOTE: The username and password should be kept secure to avoid unauthorized access to the administration pages. 3. Enter the username and password and click OK. 4. The Main Menu appears as shown below. © WesternWeb Ltd 2011 1 Editing your details Click on the ‘Edit Artist’s Details’ link on the Main Menu and the page illustrated on the right appears. The text in the boxes can be edited. To save the changes, click on the Save button. A message will appear confirming that the changes have been made and with a link back to the Main Menu. Add an Artwork Prepare the image First, in order to ensure the best image quality and quickest download time, the image needs to be resized and step by step instructions are given below. The picture should be a digital image saved as a jpg. The file size should not exceed 40KB and an image width not exceeding 500 pixels would best suit the layout of the website. You may already have a graphics programme which you can use to resize the image but if you do not, you can download IrfanView which is a free basic graphics programme. It can be downloaded from www.irfanview.com The instructions below explain how to use IrfanView to resize images. Step 1 Open Irfanview and click on the File menu and on Open to display the Open dialogue box. Click on the down arrow and select Desktop from the drop down list. Then click on ‘Fay’s Artwork’ and then click on the name of the image file you wish to resize and click on the Open button. Step 2 Depending on the size of the image, you may need to Zoom Out to see the whole image on your screen. To do this, click on the Zoom Out icon on the IrfanView toolbar along the top of the screen. You may have to click the Zoom Out icon several times before you can see the whole image on your screen. Step 3 Remove any unwanted areas from the image by cropping. To crop, point with the mouse to the top left corner of the area you want to keep and then, holding down the left mouse button, drag diagonally to create a rectangle around the area you want to keep. Note that the dimensions of the crop rectangle are displayed in the title bar. Click on the Edit menu and on Crop Selection. This crops the picture (you may need to Zoom Out again to view the whole image on your screen). © WesternWeb Ltd 2011 2 Step 4 Next, to resize the image, click on the Image menu and on Resize/Resample to open the dialogue box shown on the right. Make sure that the ‘Set new size’ option is selected In ‘Units’, ‘Pixels’ should be selected. Make sure that the ‘Preserve aspect ratio’ checkbox is ticked. Then enter the required width e.g. 350 and click OK. As aspect ratio is preserved, when you enter the width, the height is entered automatically to ensure that the image remains in proportion. Step 5 Having resized the image, you may find it necessary to sharpen the image. This can be done by clicking on the Image menu and then on Sharpen. If you wish to undo this effect, click on the Edit menu and Undo. Step 6 If the image is dark, you may wish to lighten it. This can be done by clicking on the Image menu and then on ‘Enhance colors’. The dialogue box shown on the right appears. Slide the arrow in the Brightness row slightly to the right and the effect will be shown in the ‘New Image’ in the dialogue box. When you are satisfied with the result, click OK. If you wish to undo this effect, click on the Edit menu and Undo. Step 7 Save the image Click on the File menu and on Save As to open the Save Picture As dialogue box. The Save In box on your computer normally shows ‘My Documents’ and the folder ‘Pictures for Website’ will be listed. Click on ‘Pictures for Website’. Then in the ‘File Name’ box type a suitable file name, e.g. Summer Pansies Small, to help you identify the file when you come to upload it to the website. In the ‘Save as type’ box click on the arrow and select ‘JPG – JPEG Files’ Click on the Save button . © WesternWeb Ltd 2011 3 Complete the Add an Artwork form Once you have saved the resized image, you are ready to add the artwork to be displayed on the website. Click on the ‘Add Artwork’ link on the Main Menu and the form shown below appears for you to complete. Click on the Browse button to open the ‘Choose File to Upload’ dialogue box. The Look In box normally displays My Documents. In the list of files and folders in My Documents, click on the ‘Pictures for Website’ folder. Then find the image file you wish to add and click the Open button. If you do not know the price, leave the price box blank and POA will be displayed on the web site by default. An example of a completed form is shown below. © WesternWeb Ltd 2011 4 When you have completed the form, click on the Submit button. If you have failed to enter all of the mandatory fields, a message will appear reminding you to do so. If you have entered all the required fields, the page illustrated below will appear confirming that the image has been uploaded and that the new artwork has been added – it will now be displayed on the live website. The image and details of the artwork will also be displayed. If you want to make any changes, click on the link to ‘Main Menu’ and click on the ‘View/Edit Artwork’ link. Editing an artwork is explained below. View/Edit the Artworks To view or edit an artwork, click on the ‘View/Edit Artwork’ link on the Main Menu and the page illustrated on the right appears listing the artworks each with Edit Text, Edit Image, Reserved, Sold and Delete Artwork buttons. Instructions on how to use these buttons are given overleaf. © WesternWeb Ltd 2011 5 The Edit Text button The Edit Text button takes you to another page illustrated on the right. The text in the boxes can be changed. To save the changes, click on the Save button. The page then displays the amended entry. The Reserved button This is a quick way of changing the status of the picture to Reserved. The word ‘RESERVED’ is then displayed before the price on the live website. The Sold button This is a quick way of changing the status of the picture to Sold. The word ‘SOLD’ is then displayed instead of the price on the live website. The Delete button The Delete button deletes the artwork permanently – a warning message appears when you click on the Delete button giving you the chance to Cancel if you do not want to continue with the deletion. The Edit Image button The Edit Image button opens a form which enables you to change or delete the image of the artwork. (You cannot use this page to edit the text.) Remember to use a prepared image file in ,jpg format, not exceeding 40KB and being, preferably, 350 pixels wide. For instructions on resizing images, see pages 2 - 3. Use the Browse button to locate the prepared image file in your computer file system and click on the Change Image button. A message will appear confirming that the picture has been changed and displaying the new image along with the artwork details. Note: If the image you have selected exceeded the permitted file size, it will not be uploaded. Note: if you click on the Change Image button without choosing an image using the Browse button, the current image (if any) will be deleted. © WesternWeb Ltd 2011 6 Updating the Editable Pages Any pages listed in the Editable Pages section on the Main Menu are editable. Currently there is only one editable page – the Home Page. To update the Home Page, click on the Home Page link in the Editable Pages section of the Main Menu. This opens a page showing the existing content of the editable page. Save a backup It is a good idea to save a backup of the page before you edit it. To do this, just click on the Save Backup button. Each backup is automatically given an ID number and the date and time of the backup is recorded. Click on the View Backups button to view a list of the backups as illustrated on the right. The most recent backup is always at the top of the list. There is a Delete backup button to enable you to delete old backups if you wish. To view the contents of a backup, click on the View backup button for the relevant © WesternWeb Ltd 2011 7 backup. This opens the page illustrated below which contains the option to overwrite the existing page with the backup by clicking on the Restore backup button. Tips on using the Backup Facility Save a backup before you edit the page. If, after changing the page, you want to go back to the previous version, use the View Backups button to look at the list of backups for that page. The most recent backup is at the top of the list. Click on the View backup button to look at the backup to make sure it is the one you want to go back to. Then click on the Restore button – once you have clicked on the Restore button the existing content of the page is overwritten and cannot be recovered unless you had saved a backup of it before doing the restore. Editing the page When you have created a backup, click on the Edit Page Content button to open the text editor. General instructions on using the text editor and on formatting text and using other features of the text editor are given overleaf. Warning: Do not copy and paste direct into the text editor from a Word or other document – see overleaf for further instructions. © WesternWeb Ltd 2011 8 How to use the text editor to edit text The text displayed in the text editor can be edited as follows: Warning: Do not copy and paste direct into the text editor from a Word or other document – instead copy and paste into Notepad (Programs/Accessories) and then copy and paste from Notepad into the text editor. To add new text, click with the left mouse button where you want the new text to appear and type in the text. If you want to move down to a blank line, press the Enter key on your keyboard. Note: if you do not want to leave a blank line above the new line, hold down the Shift key (located below Caps Lock on the keyboard) as you press the Enter key. To delete existing text, select the text you want to delete and press the Delete key on your keyboard. To format existing text, select the text you want to edit and click on the relevant icon on the text editor toolbars Text colour Bold Italics Underline Undo button Left – Centre – Right Alignment Bullets Numbered List Insert Table Tips: Avoid using underlining as visitors may think the underlined text is a link. Avoid overuse of CAPITALS or italics, as the text may be difficult to read. To change the font and font size The 'Select Font' and the 'Size' drop down lists provide a range of web safe fonts and sizes for you to use. (Remember to select the text before you click on the 'Select Font' or ' Size' drop down arrow.) NOTE: There is no need for you to change the font or color in the text editor as the editable page on the live website will automatically take care of this. The font used on the website is Verdana size 2 Note: If you are just viewing these lists and wish to close the list, simply click on the drop down arrow again. © WesternWeb Ltd 2011 9 To change the text colour To change the colour of text, select the text and click on the text colour icon. Click on the colour of your choice. Note: the blue text colour used on the website is #333399 The text colour used in the Home Page is black #000000 and this colour will be applied automatically unless you override it by choosing another colour. To add bullet points This is easy to do using the bullet point icon on the text editor toolbar. - To create a list with bullet points, first type the list in the text editor with each line as a separate paragraph. (i.e. you use the Enter key at the end of each line). Then select the list and click on the bullet point icon. - To remove a bullet point, click in the line with the bullet point and then click on the bullet point icon on the toolbar. - If you want to add bullet points to an existing list of bullet points, click at the end of the last line of bullet points and press the Enter key. This creates a new line starting with a bullet point. Just type in the text you want next to the bullet point. To add a hyperlink to an external website: Type the text you want to use as a link, e.g. Plymouth City Council, and highlight that text. Then click on the hyperlink icon and a dialogue box will appear as shown on the right. Enter the address of the website page you want to link to (include http://) and select _blank from the Target drop down list. Click Submit. Note: it is important to select the target _blank as this ensures that the website you link to opens in a separate window. © WesternWeb Ltd 2011 10 To add a hyperlink to another page on the website: First, you need to know the address of the page you wish to link to. The best way to find out the address is to go to the page on the website and copy the address from the browser e.g. http://www.fayjohns.co.uk/enquiries.php Then return to the text editor and type the text you want to use as a link, e.g. contact me, and highlight that text. Then click on the hyperlink icon and a dialogue box will appear as shown on the right. Paste or type in the address of the website page you want to link to (include http://) in the URL field. e.g. http://www.fayjohns.co.uk/enquiries.php Leave the target as no target as you do not want the page to open in a separate window. Click on the Submit button. Using tables in the text editor Tables are a useful way to place text and images side by side. When a table is inserted, the borders of the table and the columns are shown in the text editor as dashed lines. These dashed lines do not appear on the live web page – they are only visible in the administration pages so that you can see what you are doing. (Note also that the font size displayed in tables in the text editor is larger than the font actually shown in the table on the live website.) The table structure cannot be altered after the table has been inserted so if you are creating a new table, make sure that you know how many columns and rows you will need before you insert the table. To insert a new table: Click in the text editor where you want the table to appear. Click on the table icon and a dialogue box appears as shown below. You need to enter values for the Rows, Cols, Padding, Width and Alignment. A typical setting would be: Row 1 Cols 2 Padding 5 Width 100% Alignment Centre (Note: it is best to specify a width of 100% - if you do specify a width in pixels do not exceed 560 pixels as otherwise you may distort the overall page structure.) Click the Submit button and the table will appear with dashed lines showing the borders (as mentioned above these dashed lines do not appear on the live web page). © WesternWeb Ltd 2011 11 Once you have inserted the table, you can click in a cell in the table and enter text. You can also insert a picture – see below for further instructions. Note that as soon as you enter text or insert an image in the first cell, that cell may extend in width, pushing the other cell(s) to the right. When you enter text or an image in the other cell(s), the column widths will readjust automatically. When placing images side by side in columns in a table, bear in mind that the maximum recommended width for the table is 560 pixels. To delete a table, click on the dotted border of the table. A frame of white boxes appears round the table to indicate that it is selected. Then click on the Delete key on the keyboard. Saving the changes When you have completed the changes, click on the Save button. A message box appears confirming that if you click on the OK button the changes will go live on the website. If you are happy with this, click on the OK button. If you do not want the changes to go live, click on the Cancel button – you can then continue editing the page or you can leave the text editor without making any changes by clicking on the Main Menu link at the bottom of the text editor. When you have saved the changes, a page is displayed showing the contents of the page. If you want to make further changes, click on the ‘Return to Edit’ link at the bottom of the page. - Adding images to an editable page Prepare the Image You can add pictures to an editable page (i.e. the Home Page) but the pictures need to be resized first. The picture should to be a digital image saved as a jpg. The file size should not exceed 50KB and it is recommended that the image should measure no more than 300 pixels wide. See pages 2 and 3 for instructions on resizing pictures. Upload the Image Once you have a prepared image file saved on your computer, the next step is to upload it as follows. 1. Click on the link ‘Upload an Image’ link on the Main Menu. 2. This link opens the form illustrated below. Note: If you try to upload an image file which exceeds the permitted file size, a message will appear stating that the image has not been uploaded. 3. Use the Browse button to locate the prepared image file on your computer and click on the Upload button. 4. A message will appear confirming that the image has been uploaded and displaying it together with details as to its unique file name, dimensions and file size. © WesternWeb Ltd 2011 12 A list of all uploaded images is displayed if you click on the ‘View Uploaded Images’ link in the Main Menu or above the text editor. Any image which is on the list of uploaded images can be inserted into an editable page. Insert the image into the editable page using the text editor. Open the text editor for the page Click on the ‘List of uploaded images’ button above the text editor and find the image you want to insert. Make a note of its name – this will be a unique number, which was automatically assigned to it when the image was uploaded, followed by the file extension e.g. .jpg Click in the text editor where you want the image to appear (this may be in the cell of a table, see page 11, or it could be in a blank line between two paragraphs of text). Click on the Insert Image icon and the dialogue box shown on the right will appear. Insert the Image URL – this is the name of the image file (don’t forget to include the correct file extension e.g. .jpg). Then type in Alternate Text (i.e. a short description of the image – this is read by Google when searching for key phrases as well as by software for the visually impaired) Then click Submit and the image should be displayed in the text editor. (If it does not appear, you may have made a mistake in entering the file name and extension. In that case, click on the image and press the Delete key on your keyboard and try again.) Remember to include the correct file extension eg .jpg If you wish, you can centre align the image using the alignment icons on the text editor toolbar. Remember to save your changes so that the picture appears on the live website. Changing the date on the website A date appears at the foot of the pages on the live website. It is advisable to change this date every time you update the website as this shows that the website is being regularly maintained. To do this, click on the ‘Change Date on Website’ button on the Main Menu. Logging off Remember to close your browser (e.g. Internet Explorer) when you finish using the Website Administration Pages as those pages remain accessible without entering the password until your browser is closed. © WesternWeb Ltd 2011 13
© Copyright 2024