win the $500 poster contest prize

George Brown College’s 17th Annual LABOUR FAIR
Contest open to all GBC students – full-time or part-time

George Brown College’s annual Labour Fair is a week-long event bringing 75+ trade union representatives into the college, to give students a chance to find out more about the occupations they’re training for. The Labour Fair features in-class sessions with union speakers, information displays, videos, music and cultural events. Date and location: All GBC campuses from Monday, March 9 to Friday, March 13, 2009.

Our theme this year:
“Small Victories, Big Gains: Unions in Hard Times”
Despite very tough times, this year the labour movement has had a lot of gains – unionizing a Walmart store, getting agricultural workers & part-time college workers the right to join a union.
We’ll celebrate these gains and explore how these have improved everyone’s working lives!

Here’s what you do to win the $500 poster contest prize:
- Design a colour poster on our theme, “Small Victories, Big Gains: Unions in Hard Times.” Make sure your poster is ready to be printed
- Size should be approximately 11” x 17”
- Highlight the event’s dates and places
- Leave space for the names of 6-10 sponsors and for event details

DEADLINE: Monday, January 19, 2009 (before 3:30 p.m.)
- Drop off your HARD COPY design, marked “To School of Labour”, with your name, phone number, e-mail address & program on the reverse in Room 524A, St James Campus, 200 King St East.
- For more info, to hear more about our theme, or to see samples of previous posters, call Maureen Hynes at 415 5000 x 2549 or drop in at Room 524A, St James Campus or check our website at www.georgebrown.ca/schooloflabour

The Marking Cave

I have entered the marking cave...
While it is dark...there is a light at the opening... and a fire has been lit to keep me warm....

Thank you for the wonderful projects... you have all succeeded to learn a great deal about Web design...
I wish you all well for continued success in your design studies....

Have a great break... see you in 2009.

Be well, happy, and peaceful...
P.E.R.

ps. Please drop by next week to see the remaining presentations...

Web Portfolio Projects due this week.

Be prepared to hand-in your project on a DVD-R or CD-R,
AND be prepared to present your work to the class.

Week 14: FTP

Today we will look at our site through the lens of an FTP program.

FTP (File Transfer Protocol)

http://cyberduck.ch/

Week 13: Form Design

Part 1:


Part 2:

NISOD Student Essay Contest

NISOD Student Essay Contest

The National Institute for Staff and Organizational Development (NISOD) has announced a student essay contest to mark Community College Week.

The winning essay is awarded a total of $3,000US to be shared with the student author, the faculty/staff/administrator featured in the essay and the college.

The essay topic is: Describe your most rewarding learning experience with a faculty, staff or administrator at your community college.

Entries from GBC students will be eligible for 3 prizes of $300, $200 and $100 from GBC's Vice-President Academic's office. Deadline for GBC is December 1, 2008 please send GBC entries to Michael Cooke at mcooke@georgebrown.ca.

More details available at www.nisod.org/student_essay.html

Week 12: Pop Up Windows

This Week :

pop up message
pop up window
place a title in the pop up window
close window, inside the window
moveTo(x,y) location

Week 11: Basic Frameset Example

Basic terminology:
A frameset is a container for frames.
A frame is a container for an html page.

Why Framesets?
This allows content to flow through a web site, while certain areas or frames remain on the screen all the time, other areas are dynamic.
Typically a three-frame-frameset would hold the following content 1) the top frame HEADER or Flash Banner, 2) the side frame nav bar, and 3) the mainFrame content area. When an item is clicked on the nav bar, the content would be played in the content area of the page.

Our basic example has two frames in the Frameset.
• The Frameset file will be saved as index.html.
• The topFrame will hold the HEADER type and the hyperlinks that will cause Page1.html and Page2.html to play in the mainFrame.
• The mainFrame is where Page1.html and Page2.html will flow through.



Another example, but caution... this one uses an earlier version of Dreamweaver.

Week 10: Basic Flash Animation ( swf, mov, animated gif)

Flash is useful for creating animations that can be published as swf files, and exported as mov and animated gif files, for insertion in Dreamweaver created web pages.

A Beautiful Portfolio from a Canadian Photographer

A graceful movement though time:

http://www.ashesandsnow.org/

http://codex.ashesandsnow.org/en/codex.php

enjoy
P.E.R.

Week 10: Web Portfolio & Design Process

Apply the design process to designing a web portfolio.

See the following links:
Design Process
Portfolio Tip#1
Portfolio Project Specifications

Portfolio Project Process...

Consider the following process when designing and developing the Portfolio Web Site:

Portfolio Project due shortly...

Start the Portfolio Project Today.

View these posts:
Project Specifications
Portfolio Tips

Some examples of Automation in Photoshop

In Photoshop you can automate a batch processing of a series of files.
For example, Photoshop can automate the renumbering of photos. After they are renumbered, you would be able to write some Javascript or some Actionscript to place the pictures on the screen based upon their numerical sequence ( 1,2,3,4,5....).

The following video shows how to automate the renumbering process with a 1-Digital-Serial renumbering:




After renumbering the jpgs, they can be resized using an image processing script, as follows:

Exam Prep Suggestions

Some Tips:

• 198.96.86.36 is the ISP number we are currently using.
• The web site will have three pages.
• All web page graphics will be created in Photoshop layers.
• The slices will need to be saved into a folder called images inside the folder called MIDTERMEXAM
• The MIDTERMEXAM folder resides inside the Sites folder.
• Create a link from the current index file on your web site to the index file located inside the MIDTERMEXAM folder. HINT: You will need to download from the Remote site the current index file (assuming you have one there already) and add a Flash button to link to the MIDTERMEXAM index file.
• READ THE WHOLE EXAM BEFORE BEGINNING.
• sketch out the navigational flow
• Yes, there is a drop down menu on the exam.
• UPLOAD OFTEN. Upload after you create each web page, and test it.
• What do I do first? SUGGESTION: 1. MIDTERMEXAM index page, 2. link from Remote index page to theMIDTERMEXAM index page, 3. main menu 4. drop down menu 5. links between pages 6. meta tags.
• If you find that the Photoshop layer setup is foreign to you, then create your own layers to suit your design process.
• BE SURE TO INCLUDE YOUR PHOTOSHOP FILE on the Remote Site.
• HAND IN THE EXAM SHEET BEFORE LEAVING THE CLASS.
• Practice, Practice, Practice... you have 120 minutes to complete the exam.

Revisit: How to Use the Timeline in a drop down menu

The tutorial on the drop down menu Timeline begins at 1:04 in the following Week #5 Video.
Video content includes the following:
• Insert an APDiv 2
• Add the graphics into the APDiv
• Resize the APDiv
• Drag the APDiv (from the APDiv handle) into the Timeline
• To shorten the time of the show, slide the right keyframe from frame 15 to frame 5
• Assign a Show-Hide Elements Behavior in the "B" Behavior channel of the Timeline to hide the APDiv on frame 5
• Assign Behaviors to the trigger graphic...

Question on Image mapping

You will find image mapping at the 3:45 mark in the video, as covered in week 3 of classes.

What is covered on the Mid-Term Exam?

The mid-term exam will examine only the items we covered in classes over the past seven weeks.
What follows is a list of what was covered in class:

• meta tags (Keywords, Description)
• page wrapper using an APDiv & CSS
• page properties such as title, background, margins
• Creating a SIte Folder and Site Definition setup in Dreamweaver
• Setting up layers in Photoshop for up and over states
• Creating a menu in Photoshop and saving for WEB HTML and images
• Creating slices with guides in Photoshop
• hyperlinking between pages (index.html to menu.html)
• anchors and hyperlinks
• Flash text and hyperlinks
• Flash buttons and hyperlinks
• Email link (mailto)
• Image mapping
• BREAK character (Soft Return)
• Layout with multiple APDivs (absolute positioning)
• Uploading files and folders to Remote Site
• Downloading files and folder from Remote SIte
• File and Folder creation from within the Dreamweaver File Panel
• Using the Timeline and Timeline behaviors in Dreamweaver
• Using the Nav Bar behavior in Dreamweaver
• Setting up layers in Photoshop with trigger up and over, and menu up and over images
• Creating a drop down menu using images from Photoshop, and a Timeline in Dreamweaver
• Writing a javascript function to hide a drop down menu onload

The mid-term exam is designed to test your knowledge and ability to create a web site using the tools and techniques covered during the first seven weeks of class, within a time limit of 100 minutes.

The mid-term exam is an open book exam. You may have notes that you created to assist you.

WACOM Cintiq at Henry's Photographic Show

Building a Web Site using Photoshop

Create all the pages in one Photoshop file, and use grouped layers to hold each page.
For each web page, turn on and off the appropriate groups and layers and SAVE FOR WEB (HTML and images for up state, and images only for over state).

Open the html files inside your Dreamweaver Site and add the NAV BAR behaviors and drop down menu scripts.

For example, a typical portfolio site might include the following pages:
index.html ( Flash animation)
menu.html (hyperlinked menu to all the pages)
contact.html (name, address, email)
portfolio.html (illustrations, photo gallery, design sketches)
videos.html (process videos, tutorials, animations)
references.html ( at least three references, academic and industry)
resume.html (up-to-date curriculum vitae)

Exam Preparation Exercise

Here's today's challenge:
Create a Web Site in 100 minutes, with the following specifications:
1) (10 marks) Web site will have four pages ( index page, menu page, strengths page, contact page). Each page must include a page wrapper with a width of 760 pixels.
2) (10 marks) Menu is created in Photoshop with the file saved as menu.psd. Menu page will have two links (Strengths, Contact) each with a NavBar Behavior with over and up state. The strengths link will link to the strengths.html page. The contact link will link to the contact.html page.
3) (10 marks) Strengths page will have a drop down menu with three strengths and a link to a description of each. TIP: You can use anchors for the links to the descriptions on this page. The drop down menu is created in Photoshop and must be saved as dropdown.psd.
4) (10 marks) Contact Page will have a picture of self, a working email link, and name information.
5) (10 marks) Each page will have an image map linking back to menu.html.
6) (10 marks) All pages will have meta tags (title with author name, 10 keywords, 1 sentence description of page)
7) (10 marks) Index page will have a Flash Header text and a Flash button hyperlinking to menu.html.
8) (10 marks) The local EXAM Site is set up with the following file names and folders: index.html, menu.html, strengths.html, contact.html, images folder, scripts folder, headertxt.swf, button.swf. All images must be inside the images folder. A folder called PHOTOSHOP will hold the two photoshop files(menu.psd, dropdown.psd)
9) (10 marks) Files are posted to your account (Remote Site) in a folder called EXAM. Place a new link from your Remote Site Account main menu to the index file in the EXAM folder. You can use an image map for this.
10) (10 marks) Everything works perfectly AND all specifications met.

Converting mov to flv & Inserting into HTML page

Some multimedia content for ya!!
Creating a flv (Flash Video Format) from a Quicktime mov file using Flash Video Encoder.
Then, inserting a flv into Dreamweaver and adding a Skin, with auto play and rewind settings.

Flash Video

Flash Video referred to a proprietary file format, having the extension FLV.
The most recent public release of Flash Player supports H.264 video and HE-AAC audio.
Flash Video content may also be embedded within SWF files.
Notable users of the Flash Video format include YouTube, Google Video, Yahoo! Video, Reuters.com, and many other news providers.

Web Site Portfolio Project Specifications

PROJECT DUE DATE: Week 14
CLASS PRESENTATION DATE : Week 15

THEME: “The Medium is the Massage.”

The purpose of this project is to create a Web Site Portfolio that reflects the identity of Me, the Web Designer.

The Web Site Portfolio must include all original work, specifically including the following content and technical specifications:
1) A picture of me, the Web Designer;
2) A description of my identity (five) strengths – in relationship to me as a designer;
3) Working links to at least five Web sites that relate directly to my identity;
4) A Site Map, including working hyperlinks to all page references;
5) At least five examples of my own original designs, with description of techniques, design features, process;
6) A Mailto: linking to the email address of Me, the Web designer;
7) Meta tags for each page – Description and Keywords, and a proper title tag;
8) A custom designed internal or external CSS, including a page wrapper for each page;
9) Use of image maps;
10) Use of a table;
11) Use of rollovers (including Nav Bar Behavior);
12) Drop down menu (using Timeline technique);
13) Evaluations: by self & by another associate;
14) Contact and Project information from the designer: full name, email address, hours worked on the project, date due.
15) All resource files (Photoshop [.psd], Illustrator [.ai], Flash [.fla] text, etc…), and the final Web Site must be submitted on a CD-R, or DVD-R. The Site must be fully functional on the CD-R, DVD-R. Suggestion: Use two folders: one labeled “Working Files” and the other named “Final Site”.

The Web Site will be evaluated according to the following: evidence of creativity, aesthetics, and web design principles, functionality, ease-of-use, and the meeting of all content and technical specifications.

Important Notes:
1) Projects are evaluated in class on the due date and must be submitted on CD-R, DVD-R (readable on both MAC & PC).
2) All submissions must be received on the due date.
3) All CD-R, DVD-R submissions (to be accepted) must be labeled with full name, Email address, and date of submission.

Project Tip#1: Menu Sections

When building your menu for your Web Site Portfolio ... Common sections include:

Portfolio: This is the showcase of your work.
About: This can be a bio overview.
Contact: Be sure to make it easy for people to find your contact info.
The Process: Talk about your design process, goals and how you deal with clients.
Case Studies: In a case study section, you can focus on a few clients or projects and discuss the design process. This is effective for showcasing branding jobs or clients for whom you have done several related projects.
Clients: A list of clients, often divided by industry or job type.
Press: Show publications you have appeared in and any awards or honors.
Resume: Depending on the goal of the site, including a standard format resume can be helpful to prospective employers or clients.

http://graphicdesign.about.com/od/buildingaportfolio/ss/web_portfolio.htm

Flash Text, Buttons, Anchors, Email

Week 09: Mid-Term Exam

Here is a sample session for the mid term exam.

Prepare a Web Site with a Drop Down Menu with five items.
Set up a Sites Folder
Set up a SIte Definition
Test the connection.
Create a Web Site with the following specifications:
Create a menu page with a drop down menu.
Each item in the menu will link to a web page.
Each web page will link back to the menu page using an image map.
All pages will have meta tags: a title, keywords and description.
All graphics will go into an images folder at the root level of the web site.
A Spash (index.html) page will link to the main menu.
Include a picture of yourself.
Include your five strengths and a description of each strength.
All files will be posted to a Remote SIte.
Save the menu.psd and all html files to the root folder of the web site

TIME YOURSELF: Try and get all of this finished in 120 minutes.
ALSO: Be sure to take time to back up the work on an external USB or local HARD DRIVE.

Week 08: Mid-Semester Break

Relax...
Practice 20 minutes per day Photoshop and Dreamweaver....

AND

Start the major project.
• Start sketching the interface now!
• Start sketching the navigation map now!
• Start gathering and scanning design work into digital file formats.
• Start a check list of what needs to be done (technical, artistic)
• Plan to attend a help session ( Monday's 11-12, Room 139) to solve any technical design issues.

Week 07: Review For Mid-Term Exam

Please review the following for the Week 09: Mid-Term Exam:
• Site Organization
• Site Definition in Dreamweaver
• How to create a page wrapper using apDiv & CSS
• Inserting meta tags (title, description, keywords)
• Using Photoshop to create slices
• Using the Slice From Guides technique in Photoshop
• Naming files and images correctly in Photoshop Save for Web
• Saving for Web HTML & images - All Slices, Images Only - Selected Slices
• Saving for Web a Drop Down Menu from Photoshop
• Wrapping the table from Photoshop
• Applying Set Nav Bar Behavior in Dreamweaver
• Applying Timeline Behaviors to a drop down menu
• Adding more layers and placing them inside the Page wrapper.
• Creating a trigger and drop down layer for a drop down menu
• Using the Timeline to hide a layer, applying a Behavior in the Timeline
• Connecting and uploading files to the Remote Site
• Creating a navigational structure (index.html, menu.html, and sub-folder pages)
• Using Image Maps
• Create a splash page (index.html) that links to the menu.html.
• Create Flash Text using Dreamweaver
• Create a Flash Button using Dreaamweaver

Practice creating a Site with a drop down menu. Link to two pages using the drop down menu.
index.html
menu.html
page1.html
page2.html
images folder

Week 06: Moving Files AND Flash Text & Buttons

Today we will work on the following:
1) File and Folder management on Remote and Local file areas
2) Flash Text
3) Flash Buttons
4) hypertext & CSS a:link, a:hover, a:visited, a:active
5) anchors (local)
6) anchors (non-local)
7) mailto:

the lesson for week 06:


Files can be dragged directly from the Remote Site to the SItes Folder or to another folder in the Local Files area.
Folders can be created on both the Remote Site and Local Files areas to hold files and folders.

See tutorial below:


Creating Flash Text and Flash Buttons using Dreamweaver.
Both Flash Text and Flash Buttons can be used to hyperlink to another web page.

imagineNATIVE Film + Media Arts Festival, October 15 - 19

Volunteer for imagineNATIVE!
A volunteer orientation session will be held Sunday, October 5 from 4pm-5.30pm at the Al Green Theatre at 750 Spadina Avenue.

The imagineNATIVE Film + Media Arts Festival, October 15 - 19, is an international festival that celebrates the latest works by Indigenous peoples at the forefront of innovation in film, video, radio, and new media. The screenings, parties, panel discussions, and cultural events attract and connect filmmakers, media artists, programmers, and industry professionals from Canada and around the world.

WE NEED VOLUNTEERS!

As a non-profit charitable organization, we depend on the support of volunteers. As well as being a lot of fun, volunteering can provide a way to gain valuable experience and meet key players in the entertainment industry while helping out a community-oriented organization and supporting Toronto's art scene.

We are seeking enthusiastic volunteers to fill a number of positions before and during the festival, October 15 - 19. Some positions include:

- Guest Relations
- Airport Greeters
- Theatre Ushers / Ticket-Takers
- Workshop Attendants
- Party set-up
- Office Prep (pre-festival)

ImagineNATIVE volunteers are rewarded for their hard work with a Festival Pass, which gives access to festival screenings, special presentations, workshops, and parties.

If you are interested in volunteering please contact: Amy Rouillard, Volunteer Coordinator, web volunteer@imagineNATIVE.org
http://www.imagineNATIVE.org

IMPORTANT NOTICE: Account Access Problem Solved

For example:
MESSAGE READS: Safari could not open the page http://198.96.86.36:16080/~graf2024_025/Week05/up_trigger.html because the server stopped responding.

SOLUTION: Remove the port number :16080 from the url.
Use: http://198.96.86.36/~graf2024_025/Week05/up_trigger.html.
***** Be sure all the hyperlinks ( NAV BAR links) do not include the port number :16080.

Thanks.
P.E.R.

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

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!!!

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.

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.

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:

How to Get and Put Files to the Remote Site

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...

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;
}

Create a Site Definition

Seligman speaks at TED Conference

Believe in the Impossible: The Web is only 5000 days old

Photoshop tutorials

http://ca.youtube.com/view_play_list?p=ACEE27F331523446

Flash tutorials

http://ca.youtube.com/view_play_list?p=A6E5FB31FA1DBDD6

Dreamweaver tutorials

http://ca.youtube.com/user/infoweblink
http://ca.youtube.com/view_play_list?p=6AB99A9D9B942950

PHP tutorials

http://ca.youtube.com/user/Grollon999

Week 01: Questionnaire & Web Site Set Up

What we did in class today:
1) Viewed the Kevin Kelly video about the Web being just 5000 days old, and what the next 5000 days may become. WE are ONE.
http://graf2024.blogspot.com/2008/08/web-is-only-5000-days-old.html

2) Filled out the VIA Signature Strengths Questionnaire
The results of this questionnaire will be used in the design of the WEB SITE PROJECT.
This questionnaire will find your 24 character strengths. We will use the top five for the WEB SITE PROJECT.
STEPS: Register by filling out a short form, then select VIA Signature Strengths Questionnaire on the site under the heading Engagement Questionnaires: VIA Signature Strengths Questionnaire

3) Each student received a 3 digit (for example: 002) web account number.

4) The web site address for this site will be
http://198.96.86.44/~graf2024_???/
OR try using: http://www.designportfolio.ca/~graf2024_???/

5) Learned the value of creating a root folder to hold all the project files. Inside this folder, there will be a folder named "images" to hold the image files (jpg, gif, png).

6) Set up a new site using Dreamweaver, entered FTP information (Host, FTP Login, Password) and downloaded from the remote site already existing files to our local root folder. Then we made a change and uploaded the changes to the remote site. We then viewed the changes on the site through a browser.

7) Worked with the "Files Panel" in Dreamweaver: toggled remote and local views, "get files", "put files", opened and closed connections.
----------------------------------------------------



What's due for next class:
1) Bring a picture of self (jpeg file) to use in week 02 class exercise.
2) Bring top 5 questionnaire strengths and examples of each from your own life experiences.
3) Start gathering portfolio pieces for use in the Web Site Project. Try and locate 10 pieces to include.
4) Know how to set up root folder and assign a local root folder for a site using dreamweaver.
----------------------------------------------------

Other things I should do this week:
• Check out YouTube, ... try searching with the words Dreamweaver, Web tips, HTML
• Bring headphones to each class.
• View the YouTube video's on this site.
• Eat healthy, get lots of sleep, and start the project today!