Week #4: Site Map, Mailto, and Image Gallery (using anchors)

For example:
http://www.designportfolio.ca/~graf2024_001/index.html

What's required this week:
• week04.html link on the menu page

• image gallery using anchors


• site map page (sitemap.html)
A site map contains a link to every page in your site.



The text is placed in an apDIv, and formatted using an unordered list.
Open the INSERT menu and click the Text tab to reveal the text format items







• contact page (contact.html) This will have a mailto: Myemail@email.com link



Select the email option under the Common Tab, in the INSERT menu:




• Copyright notice using the special character © represented by "&copy"
Also note that there are hard returns and soft returns:
SHIFT & ENTER/RETURN is a line break or soft return "br"



ENTER/RETURN is a paragraph or hard return "p"



• Be sure the titles of each page have both your name and the title of the content for that page.

Be well.
See you next time.

Week#3: IN-CLASS EXERCISE (5%)

This week we explored transforming text slices created in PHOTOSHOP, into rollovers in DREAMWEAVER.
We also hyperlinked the text slices to go to content pages.

For full marks, your week03 site should have the following features:
• slices for UP (white) and OVER (coloured)
• Six pages (nav bar, five content pages)
• Nav Bar Behaviors for each text menu item, with Rollovers AND Hyperlinks (between the Nav Bar and the content pages)
• meta tags including a title, description, and keywords for each page
• apDiv wrapper for each page
• content pages contain strength descriptions

EXAMPLE:
http://www.designportfolio.ca/~graf2024_001/

Be sure to link week03.html to your menu.html.

Nav Bar HOW TO video

Slicing in Photoshop HOW TO video

Week #3: Slicing & Creation of a Nav Bar

Click on the link to see an example of what we will design this week:
http://www.designportfolio.ca/~graf2024_001/week03.html

NOTE: www.designportfolio.ca SERVER WILL BE DOWN
Friday Sept 18 6:00pm until Monday Sept 21 8:00am.

"How To" videos will arrive over the weekend, on my YouTube Site and through this Blog.

What you might like to do, is prepare an interface in Photoshop to bring to class this coming week.



transforms to:


the hyperlinked page for "Curiosity":

SERVERS DOWN THIS WEEKEND

Just in case you are planning to get & put files to your account this weekend,
the servers will be non-functional Friday Sept 18 at 6pm until Monday Sept 21 at 8am.

THREE PAGE WEB SITE How To

Create a three page web site.

Page 1: Splash page (index.html) containing designer's name, picture, title, and hyperlink to menu.html
Page 2: Menu (menu.html), linking each weekly exercise in the course. Link to week01 (week01.html) and week02 (index.html)
Page 3: week01.html

For example:
http://www.designportfolio.ca/~graf2024_005/


A "How To" video tutorial:


Please note that meta tags are not illustrated in the video.

WEEK#2: IN-CLASS EXERCISE (5%)

Create a three page web site linking index.html, menu.html, and week01.html.

See example: http://www.designportfolio.ca/~graf2024_005/

The Web site must include the following:
• Page wrapper (APDiv with CSS);
• Meta tags for each page: Page Title (your name), and Description (one sentence), keywords (your top five strengths)
• 3 pages (SPLASH, MENU, WEEK01)
SPLASH: (index.html) This is the site splash page with your picture, name, title, and hyperlink to menu.html.
MENU: (menu.html) includes text for 15 weeks. Include also a hyperlink to week01.html and week02 (hint: index.html)
WEEK01: This is last week's index.html page renamed to week01.html
• Titles for each page
• CSS Class created and applied to strengths on week01 page.

WRAPPER How To video

A wrapper is a container, constructed with CSS, to hold the web page content.

WRAPPER:
(4:00)

Week#2: Wrapper, Meta tags...

This week we will construct a basic three page site featuring the following:
• Page wrapper (APDiv with CSS);
• Meta tags: name, description (one sentence), keywords (top five strengths)
• index.html (this is the site splash page) with picture and hyperlink to menu.html.
• menu.html will include a hyperlink to week01.html
• week01.html is last week's index.html page renamed.

WRAPPER:
(4:00)



IN-CLASS EXERCISE (5%)
Create a three page web site linking index, menu, and week01.
See example: http://www.designportfolio.ca/~graf2024_002/
• Page wrapper (APDiv with CSS);
• Meta tags: name, description (one sentence), keywords (top five strengths)
• index.html (this is the site splash page) with your picture and hyperlink to menu.html.
• menu.html will include all text for 15 weeks. Include a hyperlink to week01.html
• week01.html is last week's index.html page renamed.

SITE DEFINITION How To Video

SITE DEFINITION How To Video,
including Get from remote server and Put files to the server:
(7:35)

Root Folder Video

ROOT FOLDER:

WEEK#1: IN-CLASS EXERCISE (5%)

Week#1: Strengths, Picture, Name

See example: http://www.designportfolio.ca/~graf2024_001/

• Get the existing Web page (index.html and images folder) from your Web account
• Change the title tag to your name
• Change the Header to your name
• Add your picture to the Web page
• Add your five top strengths to the Web page
• Save the work
• Put the index.html and dependent files to the Web account by the end of the class session.

Week #1: Intro to Web

The plan for this week:

1. Video
Watch Kevin Kelly video... on the web.

2. Strengths Questionnaire
This questionnaire will find your 24 character strengths. We will use the top five for the WEB SITE PROJECT.
Fill out VIA Signature Strengths Questionnaire.
VIA Signature Strengths Questionnaire

STEPS: Register by filling out a short form, then select VIA Signature Strengths Questionnaire on the site under the heading Engagement Questionnaires:

3. Root Folder
Set up 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).

4. Site Definition
With a Web account number, set up a new site definition using Dreamweaver.

5. Web Page
Create a basic web page, with text and a picture. Upload the page to the Web account.
----------------------------------------------------

WEEK#1: IN-CLASS EXERCISE (5%)
See example: http://www.designportfolio.ca/~graf2024_001/
• Get the existing Web page (index.html and images folder) from your Web account
• Change the title tag to your name
• Change the Header to your name
• Add your picture to the Web page
• Add your five top strengths to the Web page
• Save the work
• Put the index.html and dependent files to the Web account
----------------------------------------------------

HOMEWORK:
• Bring a picture of self (jpeg file) to use in week 02 class exercise.
• Bring top 5 questionnaire strengths and examples of each, from your own life experiences.
• Start gathering portfolio pieces for use in the Web Site Project. Try and locate 10 pieces to include.
• Make notes and know how to set up root folder and site definition using Dreamweaver.
• Eat healthy, get lots of sleep, and start the project today!

Welcome Back!!!

http://www.designportfolio.ca/~graf2024_001/

This week we will learn how to set up a root folder, set up a Site definition, and create a basic web page.