WEBSITE PUBLISHING I

Stuff you need to read

mary rachel — Tue, 27 Apr 2010 00:23:15 +0000

ARTICLE you need:

Creating a Successful Online Portfolio http://www.smashingmagazine.com/2008/03/04/creating-a-successful-online-portfolio/

HANDOUTS you need:

How to build your own div layout

Easy JavaScript Web Gallery

LINKS about TYPOGRAPHY you need:

http://fonttester.com

http://www.typetester.org

http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

STEPS FOR STYLING TEXT:

STEP 1:
Create new HTML file and attach a CSS stylesheet.

STEP 2:
Assign h1, h1, etc. to some of your text.

STEP 3:
Define the tag.
1. “Create New CSS Rule”

2. Select “Tag” in the CSS Dialog Box

3. Select or type “body”

STEP 4:
Style your h1, h2, etc.
1. Place cursor somewhere on h1, h2, text.

2. “Create New CSS Rule:

3. Select “Compound, based on your selection:

4. It should say “body h1.”

WEEK ELEVEN : Begin Portfolio Site + Dom…

mary rachel — Mon, 19 Apr 2010 01:29:52 +0000

I. Review process to get own website: DOMAIN NAME and HOSTING PACKAGE

whois.net
Questions for web service providers:

How much server space do they offer?
How is their tech support?
What is their payment plan? (per month? per year?)
Any bells and whistles?
What is their reputation? (google!!)

Recommendations from web colleagues:

godaddy
lunarpages
hostmonster
hostrocket
fatcow

II. BEHAVIORS IN DREAMWEAVER:
Goodies in Behaviors Panel
Sprys: what the heck are those??
(Chapter 14: Building Dynamic Pages with Spry) pgs 373 through 397

Widgets
Modifying CSS
“comments” in the code
Inserting Content

III. WORK PERIOD for those who still need help.

HOMEWORK: bring in final mockup or what you have started in Dreamweaver for review by your peers. (PHASERS or html) (DUE NEXT WEEK, Apr 19th)

Suggestions:
1. Research other photographers’ websites for photo gallery ideas. http://colum.edu/photography is a good place to start. Your faculty’s sites. If you see a gallery you like bring in the site next week or email me.
2. Assemble portfolio(s) content
3. Look over any marketing materials you have designed for other classes or for yourself.
Logos? Fonts? Colors? Style?
4. When doing your mock-ups think about how you want your resume formatted. If you have a resume bring it in next week.
5. Next week we will look at off-the-shelf-publishing. WordPress sites and projects such as Indexhibit.

FIVE RULES OF WEBSITING: (FROM A MARKETING STANDPOINT)
http://www.grantasticdesigns.com/5rules.html#download

Week 10 Notes

mary rachel — Mon, 05 Apr 2010 22:02:59 +0000

Presentations of found Portfolio Sites + Intro to Javascript/XML Image Galleries (APRIL 5th)

DOWNLOAD Week10handouts

I. PRESENTATION of found Portfolio Sites.
II. INTRODUCTION to Javascript and Flash Image Galleries:

Simpleviewer and Autoviewer: http://www.simpleviewer.net/products/
Lightbox gallery http://www.huddletogether.com/projects/lightbox2/
Galleries in Photoshop, Lightroom, and Bridge

Where to find things for free.

Google
http://adobe.com/extensions

III. TIPS FOR BUILDING YOUR GALLERY PAGES

STEP 1. Research gallery templates and look at examples. When you decide on one download it and read the instructions.
STEP 2. Process your images. What size will work best with your website? Do you need to cre ate thumbnails? Save JPEGS from RAW, TIFF, or PSD files whenever possible. JPEGS are “lossy,” meaning everytime you save as a jpeg the image loses quality.
STEP 3. Create web page for gallery.
STEP 4. Put it all together.

HOMEWORK:
Assignment 7: Make 2 layouts in photoshop of ideas for your (FINAL PROJECT) portfolio site.
Make them different from each other. Save them as jpgs and print as phasers to present for feedback
from the class. Upload jpgs to your homepage. DUE week 12, April 19th

Things to start thinking about:
What kinds of pages do you want on your site? Bio, resume, links, etc?
Should you Blog? Twitter? Facebook? Linkedin?

Next week we will be going over how to purchase domain name and hosting packages. If you would like to bring your credit card, we will walk through the process together.

Portfolio Site Discussion

mary rachel — Tue, 30 Mar 2010 18:53:37 +0000

Find 2 portfolio sites to discuss in class next week

1. a site that is successful; easy to navigate, elegant design, good work

2. a site that does not work; ugly, difficult to know where you are, the content is mysterious, etc.

Be prepared to discuss in class.

Week 9 Notes

mary rachel — Tue, 30 Mar 2010 18:51:04 +0000

DOWNLOAD Week9handouts

Hi everyone.

I’ve attached the handouts from last night’s class. Nothing has really changed on the schedule except that I have modified some of the class topics to be more relevant to your professional, online presence. Yes…these days web portfolios go beyond just having a site. We’ll work on the big picture including your brand, blogging, and social media. Exciting!

Per the class schedule, NEXT WEEK you should bring in 2 portfolio sites. A good one and a bad one. This exercise will not only help some of you get the credit you need to have a higher grade, but it will also get your wheels turning on your own site. We will move on to photo galleries. Bring some images if you would like to practice.

Wednesday (tomorrow) I will be meeting some of you in the Digital Lab from 10:30am to 12pm and 1pm-2pm. If you are still lost on your midterm site please come. They MUST be finished by the weekend to receive any credit whatsoever. We’ve been working on our midterm sites for 5 weeks now, starting with the Mid-term Mockup which was due Week 7. So it is time to commit to some time outside of class and get this done. Upon completion I guarantee that you will then have enough basic knowledge to move on to the good stuff. But the only way to learn is by doing the work.

For those of you who got your site done or had minor glitches, enjoy your week of research. If you want to re-design some parts we can talk about extra credit.

Hang in there,
mrf

Week 8 Notes

mary rachel — Mon, 15 Mar 2010 22:21:17 +0000

Work in class on midterm sites / Continue One-on-One’s (MAR. 15th)

Working with Templates, Navigation Options, Tables, Library Items

WORKING WITH TEMPLATES: Chapter 15

Dreamweaver

Other people’s templates

NAVIGATION OPTIONS: Chapter 13

Links and Rollovers
Insert Navigation Bar
Behaviors panel

TABLES IN DREAMWEAVER: Chapter 10

Structuring content
Inserting Rows and Columns

LIBRARY ITEMS: Chapter 15

Creating

Other things we put in our Library:

Favicon pgs 156-157

Creating favicon.ico http://tools.dynamicdrive.com/favicon

Inserting

Making a “Snippet”

Meta Tags pgs 85 -86

description

keywords

EXTRAS:

Adding a Photo Gallery (for now)

Image Size

Adobe Bridge web gallery
Lightbox gallery http://www.huddletogether.com/projects/lightbox2/

Adding video (for now)

Youtube http://www.thesitewizard.com/faqs/youtube-video-dreamweaver.shtml
.flv’s & .mov’s pgs 160-164

Spry Drop-Down: pgs 378-381 (for now)

http://visibleranking.com/2009/05/create-drop-down-menu-with-dreamweaver.php
How to edit the Drop-down: http://help.adobe.com/en_US/Dreamweaver/

Image Mapping (mostly done in Flash these days)
http://en.wikipedia.org/wiki/Image_map
http://commons.wikimedia.org/wiki/Commons:Image_map_resources

HOMEWORK:

Finish your Midterm site. Critique AFTER SPRING BREAK!!

Requirements for midterm site:

1. 5-10 pages linked
2. rollovers
3. css linked stylesheet
4. navigation bar or system that is easy to navigate
5. design of site that is distinctive

**Note: You can still make a distinctive design by modifying a template. Chapter 15: Making Life Easier

Week 7 Notes

mary rachel — Thu, 11 Mar 2010 22:07:10 +0000

Putting it all together in Dreamweaver (MAR 8th)

Merging your Mock-up with Dreamweaver using Slicing, Smart Objects, and Copy & Paste

DOWNLOAD Week7handouts

SLICING

Settings
Types of Slices: User, Auto, Layer-Based

USER and LAYER-BASED Slices

Creating
Adjusting
Deleting
Combining
Naming

EXPORTING Slices for Dreamweaver

User Slices only
All Slices + HTML

MERGING PHOTOSHOP WITH DREAMWEAVER
SmartObjects

Creating
Editing

Copy & Paste Technique

IN-CLASS:

Start working on your midterm. We have already gone through the preliminary Site Planning Stage. Next:

Decide how you want to organize your files. Structure and organization is the key!!
Prepare the assets you will be using in Dreamweaver. This can start with slicing your mock-up and working on other items in Photshop.
Start bringing these elements into Dreamweaver. If divs are still confusing you (which is ok) can use a template from Dreamweaver. You might also want to try the SmartObject or Copy and Paste technique.

Begin INDIVIDUAL MEETINGS / Show me your Mock-Up

Due Monday March 29th (Monday after Spring Break)

Requirements for midterm site:
1. 5-10 pages linked
2. rollovers
3. css linked stylesheet
4. navigation bar or system that is easy to navigate
5. design of site that is distinctive
**Note: You can still make a distinctive design by modifying a template. Chapter 15: Making Life Easier, UsingTemplates, Libraries, and Snippets

RESOURCES:

Creating your own CSS Layouts:
http://www.maxdesign.com.au/articles/css-layouts/
Exporting your Mock-up into a CSS Layout with Fireworks
http://www.adobe.com/newsletters/edge/june2009/articles/article6/index.html?trackingid=ETHYB
(there are many tutorials on how to do this online)
Textbook:
Chapter 5: Including Images and Media

HOMEWORK:

Continue working on your site and mock-up for next week. I will expect you to have your design and concept for all of your pages. We will be constructing our layouts next Monday!

NEXT WEEK:

Creating our layout in Dreamweaver and Navigation Options: show and hide, vertical gallery, thumbnail contruction, image mapping

Many of you will want to incorporate these navigation items into your site. You can jump ahead and lay the groundwork by preparing some of these items in Photoshop. I encourage you to start planning for these by reading: Chapter 13: Using Behaviors and Navigation Objects

CSS Layout Templates (Divs!!!)

mary rachel — Thu, 11 Mar 2010 02:33:58 +0000

http://www.maxdesign.com.au/articles/css-layouts

http://www.csszengarden.com/

Week 6 Notes

mary rachel — Wed, 10 Mar 2010 23:20:04 +0000

CSS in Dreamweaver + Planning your site

DOWNLOAD Week 6 handouts

Information Architecture and Usablility Principles:
Defining your goals/Audience and competitors/Site content/Site structure/Visual design
Discuss Information Architecture: Sketching your skeleton, mapping of navigation
Client Questionnaire + Proposal/Contract/Timeline

Designing pages in Photoshop to create for web in Dreamweaver

CSS in Dreamweaver

Non-CSS Dreamweaver
Using text from Microsoft Word
Link Target

Basic CSS

Page Properties
Applying Styles in CSS Styles Panel
CSS Rule Dialog Box

Selector
ID
CLASS

Simple CSS Layout

AP Div
CSS Box model

Margin
Border
Padding
Content

External Stylesheets

Creating
Linking
Saving

HOMEWORK

Assignment 5 : Midterm Mock-up. (PHASER PRINTS + link pdf to website) + first meeting with “client” next week.

READ and apply the following principles to your Midterm Mock-up.
Information Architecture Tutorial
http://www.webmonkey.com/design/site_building/tutorials/tutorial1.html
Web Usability from “Don’t make me think” by Krug:
http://www.sensible.com/chapter.html
NOT REQUIRED but I’d highly recommend you re-design your homepage so you get some practice.

RESOURCES

The following chapters cover the CSS we did today.
Chapter 7 Styling Page Content
Chapter 8 Positioning Page Content
Chapter 9 Managing Styles
How to link an external stylesheet
http://www.webmonkey.com/webmonkey/reference/stylesheet_guide/
Resource for building div layouts:
http://www.maxdesign.com.au/articles/css-layouts/
Examples of “metaphor”
http://netdiver.net/imaginative/

Midterm

mary rachel — Mon, 01 Mar 2010 00:30:11 +0000

Your First Site

Do a site about a cause that is important to you. It can be political, personal, whimsical, whatever interests you. This is not a portfolio site. This is a practice site about a subject of your choosing. It will be due after Spring Break { week 9 }

Requirements:

1. “Look and feel” of site to reflect content
2. 5-10 pages linked
3. Consistency of design
4. Rollovers
5. CSS style sheet linked within site
6. Navigation that is clear and easy to use
7. Contains a list of some sort: ordered or unordered

You will be graded on conceptual follow through (making the site look like your original concept) and technical expertise (including as much of the technology we have learned in this class so far as you can)