Links 101

Screen Shot 2018-02-26 at 10.54.30 AMMany of you are having questions about links:

  • Here’s the scoop:
  • Internal Links
  • External Links
  • Hyperlinks

Learn the differences here: Adobe

and here


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


Wednesday, Sep. 19: 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:

Wednesday, Sept. 12: 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.