Recent Updates Toggle Comment Threads | Keyboard Shortcuts

  • mary rachel 6:23 pm on April 26, 2010 Permalink | Reply  

    Stuff you need to read 

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

     

  • mary rachel 7:29 pm on April 18, 2010 Permalink | Reply  

    WEEK ELEVEN : Begin Portfolio Site + Dom… 

    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

     

  • mary rachel 4:02 pm on April 5, 2010 Permalink | Reply  

    Week 10 Notes 

    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:

    Where to find things for free.

    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.

     

  • mary rachel 12:53 pm on March 30, 2010 Permalink | Reply  

    Portfolio Site Discussion 

    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.

     

  • mary rachel 12:51 pm on March 30, 2010 Permalink | Reply  

    Week 9 Notes 

    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

     

  • mary rachel 4:21 pm on March 15, 2010 Permalink | Reply  

    Week 8 Notes 

    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
    • Meta Tags pgs 85 -86
    • description
    • keywords

    EXTRAS:

    Adding a Photo Gallery (for now)

    • Image  Size

    Adding video (for now)

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

    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

     

  • mary rachel 4:07 pm on March 11, 2010 Permalink | Reply  

    Week 7 Notes 

    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:

    1. Decide how you want to organize your files. Structure and organization is the key!!
    2. Prepare the assets you will be using in Dreamweaver.  This can start with slicing your mock-up and working on other items in Photshop.
    3. 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

     

  • mary rachel 8:33 pm on March 10, 2010 Permalink | Reply  

    CSS Layout Templates (Divs!!!) 

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

    http://www.csszengarden.com/

     

  • mary rachel 5:20 pm on March 10, 2010 Permalink | Reply  

    Week 6 Notes 

    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/

     

  • mary rachel 6:30 pm on February 28, 2010 Permalink | Reply  

    Midterm 

    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)

     

← Older posts

c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Reply
e
Edit
o
Show/Hide comments
t
Go to top
l
Go to login
h
Show/Hide help
shift + esc
Cancel