Monday, Feb. 25: Intro CSS + Continue building up blocks of your webpage

This slideshow requires JavaScript.

Hey students,

Last week you worked really hard to complete your Photoshop mockup, blocked out your webpage and we did some practice HTML… We are still getting used to the interface.

Today’s task: more work with basic HTML, DIVS + CSS styling

Check out all of these links and videos.

We are going to watch and do this exercise in class: Layout and style web pages with CSS


HTML Training: 

This info on HTML is the easiest to follow: HTML from ADOBE.COM

HERE is a link to lots of different basic HTML codes: W3


(no style sheet)                             (CSS)


This week we are going to talk extensively about CSS (Cascading Style Sheets) vs. HTML.

EXCELLENT: Adobe help with CSS Designer – including access to sample files to practice with!

Understanding CSS style sheets

Adobe CSS help

Easy to understand step by step tutorial of setting up CSS style sheet.

CSS Basics:

Adobe help with CSS Layouts is a great resource for information as well. Here is a link to CSS Intro

HOMEWORK: read Chapter 5 + 6 in PDF textbook on the left column

Watch these for additional help: Don’t Fear the Internet

And look at this:

Nav Bars, Divs, Class IDs

Navigation Bar

Exercise: Adding structural elements and links

BEST ONE: Exercise: Styling links and Navigation Menu


CSS Sidebars

DIVs – What are they?


Class IDs

DIVs vs. Class

  • Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of “comments” or a certain list style to use for related links.Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.Furthermore, note that classes are often used to define behavioral styles in addition to visual ones.
  • Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one “main” div on the page.Examples of ids are: main-content, header, footer, or left-sidebar.

A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.


Difference between Div and Class


Monday, Feb. 18: Lab Day – From Photoshop to Dreamweaver + Managing Sites

This slideshow requires JavaScript.

Hey students,

Last week we focused on discussing your favorite and least favorite website designs, as well as our research and development phase + wire framing.

This week: continue planning and creating a mock-up in Photoshop as well as getting all of your copy organized.

“More than one way to mock up a webpage”

Technical Demo: Defining a site + designating your image folder, Managing a Site + file organization, index.html, “Blocking out a Webpage”, setting Page Properties with CSS, intro to DIV tags

We are going to do this “mocking up a webpage in HTML” together today

adding text

We are also going to be doing more “Intro to Dreamweaver” – getting used to the interface, managing your site, starting CSS and beginning to design our webpage. . .  This is a process. Be patient with the process. Now is the time to allow yourself to click every button to see what it does, toggle back and forth between code, split and design view, and scoot around the interface to experiment with every option. This intro assignment is to practice!

Let’s get back to work.


Navigation Bar Resources: w3schools.    sticky nav,    another,

Managing fonts:

Next week: Extensive lecture on CSS.



Project One: Product Redesign

This slideshow requires JavaScript.

Redesign website. This could be a restaurant you frequent, a personal website for someone you know who has a service to offer (designer, plumber, hairstylist, anything). This will not be a responsive design as I would like you to get comfortable with other skills before we get there… This project is our intro project, our longer webpage will focus on responsive design.

WEEK TWO: Research/Planning + Wireframe Stage

Written Design Brief:

What is your product/Company?

What is the company mission?

Who is the target audience?

Wireframe of 1st and 2nd level pages

Use assets/components : See this project as a way to practice beginning web design in Dreamweaver. I’d like to see basic layouts with image and text, divs, experimenting with CSS. Remember: The more time you spend planning, the more cohesive and functional your website will be.

See these great links for ideas on “What makes good website design?

5 Simplicity in Design Tips

Smashing Magazine – 10 Principles of Effective Web Design

Good Design – Dieter Rams

9 Essential Principles

Today’s class technical demonstrations + discussions:

    1. What is Wireframing? Wireframing + Planning stage
    2. Plan out your website mockup in Photoshop. Set folders for all pages and export all images for web. Remember: The more time you spend planning, the more cohesive and functional your website will be. Areas to think about : (And look at this: Anatomy of a Website) Header, Navigation, Heading 1, Heading 2, Paragraph, Footer and images. What is on your Navigation Bar? (“About”; “Locations”; “Portfolio”; “Contact”, etc.)
    3. Setting up a Photoshop Mockup – using the extract menu from home and here
    4. Launching a starter page in Dreamweaver (I’d recommend working in “Split” view so you can work visually with your imagery, but also start wrapping your head around code – Defining the Site
    5. I’ll demo basic concepts today – but mostly we are in the planning stage
    6. Share feedback from PBSC new site exercise.



Setting up HTML

Adding content


And look at this: Anatomy of a Website

Also: Look at the DEVELOP menu (View Page Source) 

In your redesign: things to think about: 

Four keys to Designing Connections: 1. Color 2. Logo  3. Type  4. Shape

See this article in Smashing Magazine for 10 Principles of Effective Website Design

Also this one for The Best Designs

Are you thinking in advance as to how to alter your website for IPad or IPhone viewing? Check this handy link for all pixel dimensions of standard screen sizes. 

See this link for Google Web Fonts