Client Manual
Table of Contents |
| Introduction |
| Pictorial Representation of Web Site |
| Web Page Storage |
| Original Art Work |
| Changing the Text |
| Adding Pictures |
| Uploading files in Dreamweaver |
| Changing the Navigation |
Introduction
The new web site for Health Care for All—California will soon be posted at the current domain:
http://www.healthcareforall.org
The client is assuming the responsibility to file transfer all the documents to the current server, The Diamond Lane, because the secure server, Entango, must update its pages first. Then links must be coordinated. Also, a few new document pages must be added. All this will occur by the end of December.
Pictorial Representation of Web Site
The following "storyboard" shows the architecture of the new web site. The web team utilized this image on our project web site throughout the semester. the storyboard shows pictorially all pages of the web site as well as navigation.
Web Page Storage
Below is a table that shows all html files and where they are positioned within the hierarchy of the web site. Because there are over 100 image files, we indicate where they are but have chosen not to list them individually.
| Html Files | 1st | 2nd | 3rd | 4th | Documents |
| index.html | late breaking | ||||
| late breaking | |||||
| late breaking | |||||
| about_us.html | educa_fund.html | ||||
| discussion.html | |||||
| affiliates.html | sonoma.html | ||||
| san_fran.html | |||||
| tulare.html | |||||
| campaign.html | ca_campaign.html | ||||
| single_payer.html | |||||
| hcop_study.html | hcop2_campaign.html | ||||
| hcop2_cuhics.html | |||||
| hcop2_overview.html | |||||
| hcop_stidoes/jt,; | |||||
| hcop2_uhctac.html | |||||
| faqs.html | |||||
| resources.html | |||||
| white_pages.html | |||||
| wp_advantages.fhtml | |||||
| wp_background_history.html | |||||
| wp_effects.html | |||||
| wp_key_functions.html | |||||
| wp_single_payer.html | |||||
| wp_thoughts.html | |||||
| enews_let.html | |||||
| nat_scene.html | |||||
| act_now.html | an_fax_endor.html | ||||
| an_get_endor.html | |||||
| an_join_hca.html | |||||
| an_resolution.html | |||||
| an_step_by.html | |||||
| join_now.html | |||||
| contribute.html | |||||
| calendar.html | |||||
| site_map.html | |||||
| Assets | Templates | none | |||
| Images | .jpg | All gif.jpg and psd files are stored in the image folder | |||
| .gif | |||||
| .psd | |||||
| Css | text.css | ||||
| Library | line of links.lbi | ||||
Original Art Work
The art work can be found in the following files:
index.psd—the home page.
2nd_level.psd—second, third and fourth level pages
march.psd—cutout version of the marchers
Field photo should have been purchased by HCA if these pages are
being uploaded to healthcareforall.org as designed.
Changing the Text
To change the text on one of the pages there are several steps:
Open the page in Dreamweaver and highlight the text to be changed.
The font setting is Arial with a point size of 2 and a hexadecimal
number of 243E90.
You can delete the text or type right over it with the new text.
Save your page and then open your FTP software and reload the page
to the Web.
Adding Pictures
If you want to add a picture to the site, here is how you do it.
Open the picture in Photoshop. The small photos to the right of
each page are 100 pixels across and the length varies. This way
they are all uniform in size. Go to the Image menu and select image
size. Change it to 100 pixels across then click OK. Then go to Save
for the Web and select JPEG. You want the image to be at 2 to 3k
for the load time to be quick. Thesettings should be medium, progressive,
and optimized. Save it in your Dreamweaver file. Close Photoshop
and open Dreamweaver. Open page to be worked on and click Insert
Image. Open your image folder and select the new image. You can
add the new image to a new spot on the page or replace the old one
already there.
Save your page and open your FTP software and reload your page.
Be sure you load the image to the Web as well or your image will
not show.
Uploading files in Dreamweaver
Step
1
Setting up the Ftp Preferences:
a. Go to define sites,
b. and click on edit,
c. highlight Remote Info, and
d. fill in the following boxes
| Server Access – FTP |
| FTP Host URL (no http required) |
| Login Name (as Assigned by Server) |
| Password (Check with Server) |
Step 2.
Connect to the Internet:
a. After connection,
b. click on “connect to the remote host” (this button
is located at the top of the page
to the right side of the site window-looks like two plugs not connected),
and
c. when connected these two plugs will come together and you are
ready to upload.
Step 3.
Uploading Files:
a. Highlight the files (or jpg, gif or css or whatever) you wish
to upload on the local folder side,
b. drag them over to the remote side,
c. Dreamweaver will do the rest, and
d. you will see the files on the remote side.
When the files are uploaded (hour glass will go away) click on the two plugs which will disconnect you from the server. Then you can proceed to the next order of business.
Changing the Navigation
The navigation bar, which contains javascript flyout menus, was
created using Dreamweaver. It has browser and platform compatibility
issues which have been resolved. One of the biggest compatibility
problems has been in IE 5 on the Mac. The navigation will display
at the very bottom of the page instead of on the left (or below
the the banner horizontally on the home page). To avoid this problem,
the layer code (<div> tags) must be placed outside the table
holding all of the main images. Note that these DIV tags contain
table code; that is OK. If you are creating new pages, just make
sure all DIV tags (layers with tables inside) is inserted right
before the closed </body> tag.
IMPORTANT: DO NOT DRAG LAYERS BY HAND.
To add a navigation menu item, you need to select the table inside the layer, and add a row to the table. You would then go to the Insert Menu, choose Interactive Images, and then Rollover image. Choose the appropriate image. If you are adding a new item, you first need to create these images in Photoshop. Make sure the new item is the exact same size as the others.
To modify the flyout menus, you need to display the appropriate
layer. In Dreamweaver, press F2 to display the layers palette. You
will see that the navigation consists of 5 layers. IMPORTANT: DO
NOT CHANGE THE Z INDEX IN THE LAYERS PALETTE. THE MENUCLOSER LAYER
MUST BE ON THE BOTTOM. THE Z INDEX CONTROLS THE BEHAVIOR OF THE
LAYERS.
Highlight men1flyout, men2flyout or men3flyout, depending on which
flyout menu you want to modify. Click inside the layer, and select
the whole table to insert or delete a table row and menu item. Or
delete an image, and go to Insert, Interactive Images, rollover
image to replace a menu item and retain the rollover effect.
From the important warnings, it’s easy to see that editing
this type of navigation menu is a delicate process, especially when
one is new to layers and the like. Therefore, it’s possible
that you may get some undesired results the first few times you
try to edit the menu. If that happens, you may need to build the
menu from scratch.
Here is how to build the menu from scratch if necessary:
1. Go to the Insert menu and choose layer. Name the layer mainmenu in the Properties palette. Give the L and T values 11 and 135, respectively. Make the layer 118 pixels wide, 1 pixel tall.
2. Insert a table inside the mainmenu layer (make sure your cursor is inside the layer, and click on the table icon in the Objects tool bar—or go to the Insert menu and select table.) Make the table 118 pixels wide, 9 rows and 1 column. Currently, there are nine second-level items in the main menu, if you add or delete menu items in the future, the number of table rows needed will change. Right now, the main menu contains a 9 row table.
3. For each menu item in the main menu, click inside each table row and go to Insert-Interactive Images—Rollover Image. Follow the directions in the Rollover Image dialog box, inserting the appropriate images and URLs.
4. Go to the Insert menu and choose Layer. Name this layer (in the Properties palette) men1flyout. L=122, T=165. Make it 94 pixels wide and 1 pixel tall.
5. Insert a table inside the men1flyout layer. 3 rows, 1 column, 94 pixels wide. Assign this hexadecimal to the background color in the Properties palette: #6EA2D7
6. Go to Insert—Interactive Images—Rollover Image for each table row in the flyout menu.
7. Repeat steps 4-6 for men2flyout and men3flyout. Dimensions for men2flyout: L=122, T=187, 94 pixels wide, 1 pixel tall. Dimensions for men3flyout: L=122, T=210, 94 pixels wide, 1 pixel tall.
8. Create a new layer and name it menucloser. L=0, T=0. 500 pixels tall and wide. (Small dimensions for the home page—about 300 pixels tall and wide on the home page menu closer).
9. Gently click inside the menucloser layer and insert a spacer gif that is 500X500 (same dimensions as the layer; smaller for home page).
10. In the Layers palette (press F2 if it’s not showing), drag menucloser to the bottom of the layers list so it has a Z index of 1 (with mainmenu having a Z index of 2, men1flyout 3 and so on)
11. Select the spacer gif inside the menucloser layer. Open the
Behaviors panel (shift+F3), click the + button, and choose Studio
VII/Auto Layers by PVII.
Do not select any layers, just click OK. It seems strange to open
a dialog box and click OK without selecting anything, but that’s
what you need to do. You are telling Auto Layers to hide all layers
in memory. Choose onMouseOver as the event.
NOTE: PVII Auto Layers DOES NOT COME INSTALLED WITH DREAMWEAVER
YOU WILL HAVE TO DOWNLOAD IT OR PURCHASE IT SOMEWHERE. THIS EXTENSION
IS AVAILABLE ON A CD-ROM ACCOMPANYING “DREAMWEAVER 4 MAGIC,”
A BOOK BY AL SPARBER, FROM WHICH THIS FLYOUT MENU LAYER TECHNIQUE
HAS BEEN ADAPTED.
12. Apply PVII Auto Layers to the mainmenu images: HCA Home, Act Now, Join Now, Contribute, Calendar, Site Map. Don’t set any layers to show, just click OK and set the event to onMouseOver.
13. Apply Auto Layers to the images that open flyout menus. Select the image in the main menu, such as About Us, open the Behaviors panel, and choose Studio VII/Auto Layers by PVII. Select men1flyout and menucloser and click the Show Layer button. Click OK and ensure that the event is onMouseOver.
14. Repeat step 12 for the Campaign and Resources items (when you open the Behaviors panel and StudioVII/Auto Layers by PVII, you will select men2flyout and menucloser and click the Show Layer button for the Campaign flyout menu, and men3flyout and menucloser for Resources flyout menu)
And finally, these tips were added by the Designer who worked so hard on the flyouts:
The flyout menus were confusing, but I hope the instructions are
clear enough. I noted what book I had adapted the technique from,
because you will need to install the appropriate Dreamweaver extension.
It was Dreamweaver 4 Magic by Al Sparber, which comes with a CD
containing the extension.
Another great book is the Non Designer's Web Book (Assigned in design
classes at SRJC) by Robin Williams. She gives a lot of great pointers
on layout, and it's a fun book to read.