|
STEP-BY -STEP INSTRUCTIONS #1: ADDING YOUR CUSTOM HEADER TO THE INDEX PAGE OF YOUR WEBSITE. These
detailed instructions will walk you through every step of adding the header
graphic to your index page. We advise you to print these out to refer to as you go. Before you start:
After you have defined your site-(see above), Close Dreamweaver. Part One: Assembling your Graphic Elements Step #1: Obtaining your librarysmc folder from Public The first step to creating or adapting your existing web page to include the header graphic is to locate the folder called "Librarysmc" in the Public folder. Look for the Librarysmc folder in the folder called Web Resources--as follows: Open Public > Web Resources > Librarysmc • For PC users: Right Click and copy the folder to your www folder. • For Mac users: drag the Librarysmc icon to your www folder Make sure there is now a folder in your WWW folder called "Librarysmc". Step#2: Find and copy your Custom Header Graphic Once these design standards are in place, at the top of each index page of a site there will appear a header graphic that shows the name of the department or office, etc. (for more on this see page entitled: "Essential Page Elements") You will need to find and copy your custom header graphic NOW. These custom header graphics are found here. They are divided by Academic Departments, and Services and Offices and listed alphabetically. When you locate your graphic (and click on it to see it) you will save it as an image and place it in your Librarysmc folder as follows: •PC users:Right Click and save image with the name it has been given, (all the images start wi th "wbh") save as a JPEG (*jpg) type to your Librarysmc folder. (It is important not to rename this image, as you'll need to find it later.) •Mac users:For those using Internet Explorer (IE): Hold down mouse and select "Save image to disk:" It will already be saving the image as a jpeg, with the name already given. (all the images start wi th "wbh")--DO NOT RENAME. Locate your directory out on your desktop open it, go into your www folder and find your Librarysmc folder--and click "save". For MAC Netscape users: Hold down mouse and select "save this image as": It will already be saving the image as a jpeg, with the name already given. (all the images start wi th "wbh")--DO NOT RENAME. Locate your directory out on your desktop open it, go into your www folder and find your Librarysmc folder--and click "save". Part Two: Applying your Graphic Elements Now that you have the Librarysmc folder and your custom header image copied (and saved to the Librarysmc folder) in the www folder in your directory, you are ready to apply these elements to your index page. 1.) Launch Dreamweaver--once the dreamweaver application is open, you need to open your site window. 2.) Under Site>Open
Site>select (whatever you named your site when the site was defined*.)
3.) The site window will appear--with your files appearing in alist on the right hand section of the window. 4.) Locate your index (home) page and open it. Once it is open place your cursor in the uppermost right corner of the page. 5.) Open your Properties window - (found under: Window>Properties)--leave this open. 6.) Modify your page properties: Under Modify >Open Page Properties. In the properties window designate the following:
7.) Open Assets window. (found under: Window>Assets) -- this window displays all of your directory assets--including images, library items, links, colors, etc--as signified by the small icons located on the left side of the window. 8.) Recreate your site list:
The "recreate site list" function will scan your directory for all of your assets. You will notice that the assets are grouped by their respective file types--all images in one place, all library items in the library section, etc. regardless of how you have them organized in your www folder. 9. ) Open the Library Assets: On the bottom of the column of icons located on the right side of your assets window, is one that looks like an open book. This denotes your Library assets--where the library items from the LIBRARYsmc folder you coped from Public should reside--open it. You will see that there is a library asset called wbnavigation.top--select it. (In the small scrollable window at the top of the Assets window you will see part of this graphic--it should be an image with a light blue band on top of a dark blue bar with navigation links for the college in place.)
10.) Place the image on top of page: (With the wbnavigation.top item still selected), Drag the selection from the Assets window to the top of your index page--where the cursor is residing. The Header should be at the very top of your page--if there is space above the graphic, and your margins in your page properties were correctly set to "0"-- delete the extra space and the image should be placed correctly. 11.) Detach the library item: You will see that the header image is "grayed out" -- in your Properties window --(this should already be open, but if not it's found under Windows>Properties) it will indicate this is a library item, and will give you the option to "Detach from Original" -- select this option. Note: A warning window will come up saying that "you will no longer be able to update the item automatically"--click Ok This will allow you to add your custom graphic to the image.
12.) Add the custom header image. -- Place your cursor in the light blue area of the graphic. -- Locate your image assets in the Asset Window--(select the image icon at the top of the column of icons) -- Scroll down the list of images to find the image you copied and saved to your directory--Remember: it will start with: "wbh" -- When you locate the image, select it and drag it to the light blue area --(where your cursor resides.) Part One: Reviewing your Work Once the custom graphic is at the top of your screen, you should preview your work in your browser*: You
can do this one of two ways: A. click on the
world icon at the top of your Dreamweaver window and select a browser * If no browsers are listed, you will have to edit your preview browser list--found under Edit>Preferences>Preview in Browser. If
your page looks good, exit your browser. NOTE: If the image is not placed properly at the top of the page--and appears in the wrong location, --don't panic!--You can undo the action by going into the Edit menu and undoing the previous action(s), or if you are completely lost, and have not saved your changes, you can close your page (click Don't Save Changes) and start over from the beginning. If
you need personal assistance, please call x5318, Once
you have completed this process, you are ready to adda graphic to the
top of your remaining web pages. Proceed to: |