Friday, September 26, 2008

Reminder to self

198.96.86.36/~graf2024_001 to 015 are reserved accounts (for demonstrating weekly exercises).
198.96.86.36/~graf2024_016 to 300 are students accounts

Host: 198.96.86.36
Folder: Sites
Account: graf2024

Wednesday, September 24, 2008

Week 05: Drop Down Menu

This week we will design a drop down menu in Photoshop,
and add behaviours in Dreamweaver to make it interactive.

See On-Line Example

IN PHOTOSHOP ---------------------------------
Prepare the Full Drop Down Menu (with Trigger Image and Menu items).
Layers look like this:
1) up_trigger (UP STATE)
2) over_trigger (OVER STATE)
3) up_dropdownmenu (UP STATE)
4) over_dropdownmenu (OVER STATE)
5) MAIN MENU header (HEADER)
6) Background graphic (GRAPHIC)

When saving for Web, SAVE HTML & IMAGES for the up_trigger only.
All other Saves will be images only.
Be sure to change the name of the file to the layer names, as above.

You should have the following html file when completed:
up_trigger.html

View the tutorial:


IN DREAMWEAVER ---------------------------------
Create a new Site definition, and then open the file named:
up_trigger.html (created from PHOTOSHOP).

Step 1 Wrap menu in APDiv1:
From the Files Panel, double click up_trigger.html to open it in the design view.
Wrap the menu in an APDiv
-------------------------------------

Step 2 Create a new APDiv Layer for the drop down menu:
Create a Layer (APDiv2) to hold the up menu images.
Drag the images from the Files Panel to inside the Layer.
Align the Layer below the Trigger Image.
-------------------------------------

Step 3 Place APDiv2 Layer in Timeline
Select Window > Timelines, and drag the Layer from the Stage to the Timeline
In the Timeline, Select the last keyframe node and move it from frame 15 to frame 5
In the "B" Behavior Layer of the Timeline, on Frame 5, select Behavior > Show-Hide Elements.
and apply the following settings: onFrame5, Layer "APDiv2" (hide)
-------------------------------------

Step 4 Apply the following Behaviors to the Trigger Image:
Select the Trigger image for the first drop down menu.
********* NOTE: Be sure the order is the same as below **********
1) (Behaviors > Timeline) Play Timeline, ... onMouseOut
2) (Behaviors > Show-Hide Elements) Show-Hide Elements (layer "APDiv2" (show), ) ... onMouseOver
3) (Behaviors > Timeline) Go To Timeline Frame (Go to Frame 1) ... onMouseOver
4) (Behaviors > Timeline) Stop Timeline, ... onMouseOver
-------------------------------------

Step 5 Menu item Behaviors:
Select each of the drop down menu items and add behaviors to each of the images:
********* NOTE: Be sure the order is the same as below **********
1) (Behaviors > Timeline) Play Timeline, ...onMouseOut
2) (Behaviors > Timeline) Go To Timeline Frame (Go to Frame 1), ...onMouseOver
3) (Behaviors > Timeline) Stop Timeline, ...onMouseOver
-------------------------------------------

Step 6 CSS Visibility property:
In the CSS Panel, for APDiv2, set the visibility to hidden
Positioning: Visibility: hidden;
IMPORTANT NOTE: Check the code view to make sure the visibility is not set to inherit. Remove the code if it is.
-------------------------------------------

View the tutorial:



Step 7 Set Nav Bar Images:
Add the Behavior "Set Nav Bar Images" for each of the sub menu images.
Window > Behaviors, Set Nav Bar Images
For example:
Element name: upmenu08
Up image: images/up_menu_08.jpg
Over image: images/over_menu_08.jpg
-------------------------------------------

Step 8 Adding the Hyperlinks:
Select the image in the drop down menu and in the Properties Window, include a Linked URL HTML address.
-------------------------------------------

Step 9 Hide the Drop Down on Loading the Web Page
In order to have the drop down menu layer hidden on the loading of the web page, you will need to write a function to trigger this behavior. The function is written in the SCRIPT area of the code, and the function is called in the BODY area of the code.

1. Start with the name:
function init(){
}

2. The script lines can be cut and pasted from parts already existing in the HTML:
You will need two already written function calls MM_preloadImages and MM_showHideLayers.
The function that is doing the work of hiding the APDiv is MM_showHideLayers.
Cut the following lines from the existing html:
MM_preloadImages('images/over_menu_08.jpg','images/over_menu_13.jpg','images/over_trigger_03.jpg','images/over_trigger_04.jpg','images/over_trigger_05.jpg');
MM_showHideLayers('apDiv2','','hide');

3. The function when completed looks like this:
function init(){
MM_preloadImages('images/over_menu_08.jpg','images/over_menu_13.jpg','images/over_trigger_03.jpg','images/over_trigger_04.jpg','images/over_trigger_05.jpg');
MM_showHideLayers('apDiv2','','hide');
}

4. Be sure the function is placed inside the SCRIPT area of the code. See below:
script type="text/javascript"
!--
function init(){
MM_preloadImages('images/over_menu_08.jpg','images/over_menu_13.jpg','images/over_trigger_03.jpg','images/over_trigger_04.jpg','images/over_trigger_05.jpg');
MM_showHideLayers('apDiv2','','hide');
}
//--
/script

5. The function call, is placed inside the body tag:
body onLoad="init()"

6. Look at the On-Line example code - In the Brower select VIEW > VIEW SOURCE On-Line Example . Examine the function init() and the body onLoad.

At this point the drop down menu should be working. Be sure to save the file and put it to your web site.

Have a great day.

-------------------------------------------


OTHER NOTES Setting The Timeline Delay:
1) You may change the timing in the Timeline by changing the number of frames per second.
2) You may also drag the end Keyframe to add or reduce the number of frames in the delay.

WEB TUTORING & HELP FROM PROFESSOR

Monday's, Room 139, 11am-12pm

I am looking for another time... stay tuned!!!

Saturday, September 20, 2008

Week 04: Guide Slices & Layers

SLICES FROM GUIDES
Last week we learned how to create slices for a web page using the slice tool and then use the Divide feature to have Photoshop create more slices either horizontally or vertically.

This week we will use guides to determine the slice dimensions.


LAYERS
This week we use APDIV layers in web design.

Positioning Settings:
APDiv Wrapper: set to relative positioning.
All APDivs within the wrapper: set to absolute positioning

Z-index:
Higher numbers place the layer on top of the layer with the lower number.
For example: A layer with Z-index 2 will be stacked above a layer with Z-index 1.

Page Properties:
Set background graphic or colour
IMPORTANT NOTE: Set the margins: top, bottom, left, right to 0.

Saturday, September 13, 2008

Site Organization

Create a Sites folder and in it place an images folder, and the index.html file ( this will be the site intro file).
Create folders for all the sub pages, for example: week01, week02, etc.... Each of these folders will have an images folder and an index.html file.

Friday, September 12, 2008

Week 03: Nav Bar, Image Map, Site Map

You guessed it...
Finally we get to create a site with all the work we have been doing for the past two weeks...
Each weekly exercise will become it's own web page, with a main menu connecting them together.

IT'S TIME TO GET ORGANIZED !!!

FILE ORGANIZATION:
We will organize our files in a hierarchical pattern.
Think root, parent, child.
1) HOME PAGE: Let's imagine the home page (index.html) as the intro screen for the site.
The navigation page or what we will call the main menu (menu.html) for our site will be linked to this page. An images folder will hold the images for the index.html and the menu.html.
2) SUB-PAGES: In our case, these will be the exercises we do each week. Organize these pages into FOLDERS (week01, week02, week03, etc...) Each of these folders will have their own images folder and index.html file.

Try this:
Create a Sites folder and in it place an images folder, and the index.html file ( this will be the site intro file).
Create folders for all the sub pages, for example: week01, week02, etc.... Each of these folders will have an images folder and an index.html file.



IN PHOTOSHOP:
We will slice up a main menu image in Photoshop and save for the web the image slices and html TABLE.

The following video will demonstrate how to slice an image:



IN DREAMWEAVER:
Using the images and html TABLE generated from PHOTOSHOP, we will create a navigation bar (NavBar) to hyperlink between pages.
We will also use an image map to create a hyperlink from all the sub-pages to link back to the main menu.

The following video will demonstrate how to set up the NavBar and image mapping:

Thursday, September 11, 2008

Wednesday, September 10, 2008

Week 02: Page Wrapper & Meta Tags



In this tutorial thedigitalprofessor will demonstrate the following:

1) how to set up a page wrapper using CSS & a DIV tag;
2) creating a title for the page;
3) adding meta keywords
4) adding meta description
5) inserting a graphic
6) viewing a txt file in the code view
7) using the BR as a soft return
8) adding ALT text to a graphic
9) adding a hyperlink

Have a great day...

Saturday, September 6, 2008

How To Write a Meta Tag

How to Set Up A Page Wrapper

This video reviews how to set up a Site Definition,
then shows how to set up a page wrapper, and edit the page title.

Creating A Page Wrapper Using Dreamweaver

A wrapper is a CSS (Cascading Style Sheet), designed to contain the entire page.

The following code is the outer wrapper for this blog page:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
}

Wednesday, September 3, 2008

Create a Site Definition

Monday, September 1, 2008