Legal Aid of Sonoma County

Transcription

1 Legal Aid of Sonoma County Client Manual Prepared by: Jerilynn Johnson, Project Manager/Content Developer Al Shanto, Designer/Programmer Prepared for: Ronit Rubinoff, Executive Director Legal Aid of Sonoma County

2 Introduction: On this CD you will find the following elements 1. A folder called Legal Aid of SC Web site - in this folder all the web pages, images, pdfs, scripts and css files are stored. Make a copy of this folder on your local computer. Open the html files found within this folder when you want to modify the site. Detailed instructions on modifying a web page are listed below 2. A folder called Legal Aid of SC Project Site - in this folder are files which were used to plan your site. You may want to refer to these files if you ever decide to remodel the site. 3. A folder called LegalAidDesignFiles - in this folder are the original PSD, FLA, and AI files used to create the splash page, home page, second level pages, etc. Use these files only if you are experienced with their originating programs, and plan to make design changes to the site (not recommended). 4. A folder called "Scripts" which contains your scripts. 5. A digital copy of this client manual. General Info: Your site is stored at (name of ISP): Sonic.net Your URL is 2

3 Table of Contents: 1. Where are the Pages Stored? 2. List of Folders Included in the Website 3. Where are the html files that form the site stored? 4. Where are the Images Stored? 5. List of Original Artwork 6. Graphical Interface 7. Text specifications 8. To Change Text On One of the Pages 9. To Edit/Add a Picture to the Website 10. To Upload Revised Pages to the Web After Editing 11. To Change the Navigation Bar for the Website 12. Pages That Have Programming Script 13. Listing of Scripts and Programs Created for Website 14. How to Edit Slideshows 15. How to Post a Blog 16. How to Access Google Analytic 17. How to Add a Donate Button 3

4 1. Where are the Web Pages Stored? On the sonic.net server in a folder named: sclaed/legalsc.com 2. List of Folders Included in the Website The following folders are included in the website: 3. Where are the html files that form the site stored? The following files are included in the website and are stored in the html folder (with the exception of the home page which named index.html and is stored right inside the top folder): 4

5 4. Where are the Images Stored? There are two types of images in the site the images such as logos, background images, the header collage, that are part of the page are stored directly in the folder named images. The photographs found on each page are inside the photos folder, which is located inside the images folder. 5

6 5. List of Original Artwork Artwork was created in Illustrator and Photoshop CS4, and Flash CS3. It is located in the LegalAidDesignFiles: 1. The Logo was created in Illustrator CS4 and is located in the logo folder logositegreen.ai 2. The following were created in Photoshop CS4 and are located in the psd folder: The homepage, index.html, including the background, green bars, and the girls a. homepage.psd The girls on the homepage were cut out in this file: a. SisterHugging.psd All 2nd level pages use these files: a. collage.psd b. contentbkgd.psd c. headerbkgd.psd The collage used for the header of the blog: a. blogcollage.psd The button used on gethelp.html and gespanish.html pages: a. languagebutton.psd 3. The following slideshows, which are swf files, were created in Flash CS3 and are located in the flash folder on the Legal Aid disc: 6

7 The slideshow on the donate.html is located in the donateslideshow folder: 1. The donate.fla file is used to create the donate.swf file. 2. The donatepreloader.fla file is used to create the donatepreloader.swf file. The slideshow on the evgolf.html is located in the golfslideshow folder: 1. The golf.fla file is used to create the golf.swf file. 2. The golf PreLoader.fla file is used to create the golfpreloader.swf file. The slideshow on the evlawyers.html is located in the lawyersslideshow folder: 1. The lawyers.fla file is used to create the lawyers.swf file. 2. The lawyerspreloader.fla file is used to create the lawyerspreloader.swf file. 6. Graphical Interface The Legal Aid of Sonoma County website was created in Dreamweaver. The navigation for the site are drop-down navigation menus on top of the page and a navigation bar on the left side of the page for the second and third levels pages for each section which varies by the page. There are text links for the second level pages along the bottom-center of each page. All navigation on the site is created with css styling, located in the legalaid.css file located in the css folder. The drop-down navigation color has a hexadecimal value of #ffffff, a rollover color of #CCCC99, and the background color has a hexadecimal value of # All other links, including the side navigation and the bottom navigation, have a color hexadecimal value of #660066, a hover hexadecimal value of #9F6C46, and a visited hexadecimal value of #6E204B. 7. Text specifications The body text is font family Arial, san-serif. The text size is medium, color is black. The text size for the drop-down navigation and the blog link is 1.1em. The text size for the bottom bar and the text below it is.7em. Page headers, h1 tags, are 1.7em. Back to top links are.9em. 8. To Change Text On One of the Pages We recommend that you use KompoZer to edit your website. Please use this only to edit the text on the page and not the navigation or other page elements. You can download a free copy of this program at 7

8 Editing a Page 1. Double-click on the html file that you wish to edit 2. The easiest way to edit the document is with the preview window within the Kompozer software. Use the code window to do edits only if you are comfortable with HTML coding. To find the preview window either choose View > Preview or choose the preview tab under the document. 3. When you re done editing the file, select SAVE from the FILE menu. 4. Preview your edits in the Firefox web browser. Since Firefox is probably not your default web browser, find the file on your computer, right click on the file icon, and choose Open With > Firefox. *You may also be able to click the browse button in Kompozer, but if it doesn t work use the previous method. 5. Validate your page by using the Web Developer toolbar we will help you install. From the Web Developer toolbar, choose Tools > Validate Local HTML. If you see the screen with the green bar (see below for a sample picture), you re ready to move to the next step and upload your page to the server. If you see any other screen, there is something wrong with your page that will need to be corrected before it can be uploaded. The webpage will tell you what the error is, but unless you understand HTML, it may be difficult to understand what it means. 8

9 6. When you re satisfied with your edits upload to the server using the directions for uploading to the server in section 10 of this manual. Important Notes about editing text in Kompozer: 1. To change words on the page, you can delete the current word and type the new word just as you would in a word processor. 2. To make text bold or italic Use the buttons with the exclamation symbol or double exclamation symbol DO NOT USE THE BOLD AND ITALIC BUTTONS!!! Highlight the text you want to be bold or italic then press the single! button for italic or the double!! button for bold. Please do not use ANY of the buttons in this row For Italic For BOLD 3. To create a new section of text on the page: a. Create a new header i. Check the size of the other headers on the page to verify your new header will be the same size to do this just click on a current header that is the same size as the one you want to create and look at the toolbar to see if it is a heading 2 or heading 3 (the picture above currently says Body Text in the place where you should be looking) ii. Put the cursor on the page where you want your new header iii. On the toolbar choose heading 2 or heading 3 depending on step i. above iv. Type your new header text b. Create your new paragraph text i. Put your cursor under the new header, choose paragraph on the toolbar ii. Type the new paragraph text 9. To Edit/Add a Picture to the Website: 1. Open Photoshop, any full version from CS up. 2. Open the picture you want to add or replace. 3. From the File menu choose Save for Web and Devices 4. In the dialogue box that appears, change the image dimensions. Make sure the dimension proportion lock is on, then change the largest dimension to 400px. Adjust the quality value to 65. Click Save. 5. In the dialogue box that appears, choose the location you wish to save the file to, and then name the file to match the name of the image on the page where you wish this image to go. 9

10 10. To Upload Revised Pages to the Web After Editing 1. Download Filezilla by going to this URL and clicking on the top link: 2. Once installed, go to File>Site Manager and click on new site. a. The host is ftp.sonic.net b. Login type is normal c. Legal Aids username is sclaed, the password is tetu65 3. On the same screen, click Connect. In the future you can use the button to reconnect to the last used server. 4. Find the legalaidsc.com folder- this is the folder where all of your files will be stored. Once inside, navigate to the html folder, this is where you will place all of your edited html files. On the left side of the screen navigate to where the html file on your computer is stored. Once you find it, drag it over to the html folder on the right side of your screen. Your Computer The Server 10

11 4. Disconnect from the server when you are finished uploading files. Please note: The reverse process can be done to download files from the server to your computer. This will need to be done anytime after somebody else has uploaded new html files to the server. Choose the html file folder on the server and drag it onto your computer on the left hand side of the screen. 11. To Change the Navigation Bar for the Website We do not recommend that you change the navigation bar unless you feel you have a good understanding of css and drop-down menus. 12. Pages That Have Programming Script The home page and all second level pages of the website use javascript in the header of the document to open links in a new window, and immediately above the closing body tag for Google Analytic, to track web traffic. The pages with slideshows all use javascript for the swf files and to display the screen reader captions. These pages are donate.html, evlawyers.html, and evgolf.html. All slideshow swf files themselves use both javascript and actionscript, located in their respective swfscripts folder. 13. Listing of Scripts and Programs Created for Website The programs are written in javascript and actionscript. Programs/Files: analytics.js The code for Google Analytic tracking. caption.js Contains method to display captions for screen reader. donate.js, golf.js, lawyers.js Contains slideshow swf file parameters. AC_RunActiveContent.js Detects flashplayer versions. ImageLoader.as A class for converting images to a movie clip. ShowManager.as Verifies html page is ready, and sends calls and callbacks to the documents javascript. ShowMessageEvent.as Formats captions for sending in arguments to document javascript. 11

12 14. How to Edit the Slideshows. It is a good idea to make a backup copy of the folders before you start. The first image must be changed programmatically within the Flash fla file, as well as physically in the swfimages folder. An image can be switched for one already in the show by simply naming a formatted image with the same name and placing it in the swfimages folder for the appropriate slideshow. Changing the order of images in the slideshow can be accomplished by simply changing the names of the images. Formatting an Image 1. Open Photoshop, any full version from CS up. 2. Open the picture you want to add or replace. 3. Crop the image to the dimensions of 400px by 267px. 4. From the File menu choose Save for Web and Devices 5. Adjust the quality value to 65. Click Save. 6. In the dialogue box that appears, choose the location you wish to save the file to, and then name the file to match the name of the image in the slideshow where you wish this image to go. All images must be of the dimension 400px by 267px to fit within the borders of the slideshow. Editing the Xml File This should only be attempted by individuals trained in Flash and xml. Be sure to use Dreamweaver, Notepad or another text editor to edit the xml file. Do not use WordPad, or any other word processor. KompoZer will not open an xml file. If you want to add or delete the total number of slides within the slide show, you will need to edit the xml file. Within the site folder, navigate to and open the xml file in a text editor. Within the xml file, each image s information is contained within a module as shown below. Each image needs one of these modules. To add more images to the slideshow, copy and paste one of these modules below another module, and edit the specifics for the individual image. The first line of the code pictured above is the relative path to the image. Images are numbered in sequential order, such as for the donate slideshow: d1.jpg, d2.jpg, etc., or for the golf slideshow: g1.jpg, g2.jpg, g3.jpg, etc. The second line of the code contains the caption for the image. It will not display on the page, but screen readers will read these captions for the hearing impaired using these devices. This is necessary 508 compliance. 12

13 Changing the first image within the fla file The first image is placed on the stage of the fla file, and is a graphic symbol called img0. Its alpha value is set to 1. After the images are loaded, the alpha value is set to 0. This is used to prevent a blank screen while loading. To change this first image, open the fla file for the slideshow, then delete the symbol img0 from the library by dragging it to the trash. Import a formatted image to the library (see the above instructions regarding formatting), press F8 to open a dialogue box for converting the jpg to a symbol, choose graphic for the type of symbol, and give it a name of img0. Then drag the symbol onto the stage, and align it with the stage. Publish the file. The first image will appear but the slideshow will not play. Ignore this. It is because the relative path to the xml file is not correct from this location. Save and close the file. Then copy the swf file and paste it in the appropriate slideshow folder within the images folder. Then test the slideshow by opening the html page the slideshow is located on. The slideshow should play after the images load. 15. How to Post a Blog. 1. Go to this URL: 2. Under the category of Meta, click Log in. The username is: legalaidsc The password is: legaleagle1 3. On the top bar, click the New Post button. 4. Enter a title in the box at the top of the page. 13

14 5. Enter the content of your blog in the box below the title box. 6. Press the Publish button on the right side of the page. To watch a free tutorial video about posting a blog, visit: and click on the How to write a Post link. 16. How to Access Google Analytic. Go to this URL: lytics%2fsettings%2f%3fet%3dreset%26hl%3den-gb The username is: sclaks@sonic.net The password is: legaleagle Click on the View Report link. 14

15 17. How to Add Donate Buttons. To add a PayPal Donate button to a html page, add the following html code to the source file: Note: it would be best to copy this code from the donate.html file, and then paste it in the desired location. 15