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 schools.com

List of DIV TAGS: DIV TAGS

(no style sheet)                             (CSS)

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: lynda.com

Adobe help with CSS Layouts

W3schools.com 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: https://www.csstutorial.net

Advertisements

Anatomy of a website: HMTL

Watch some beginning videos here: Adobe

1. What can you do with Dreamweaver
2. Understand the Anatomy of a Website : Link and Link
3. Follow the stages of web design
4. Define a Site

Nav Bars, Divs, Class IDs

Navigation Bar

Exercise: Adding structural elements and links

BEST ONE: Exercise: Styling links and Navigation Menu

https://helpx.adobe.com/dreamweaver/using/div-tags.html

 

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.

DIV TAGS

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. 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
   7. Share feedback from PBSC new site exercise.

 

IN CLASS EXERCISES: 

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

 

 

 

Monday, Feb. 4: Welcome students!

Welcome, students!

I’m looking forward to a great semester with you. Today we will talk about an overview of the whole semester, the syllabus, online tutorials and resources and have a short introductory research project and discussion.

I’m thrilled to be teaching this course as we work our way through the components, terminology and features of Dreamweaver.  Through hands-on lectures, demonstrations, and projects, the student will learn the essential techniques and functions of Dreamweaver. We will apply the principles of design to create effective, efficient and consistent web designs.

Please click here for our syllabus and always refer to this blog for our assignments, video tutorial requirements and due dates. This is our tentative schedule – but again, absolute deadlines + assignments are always going to be posted here. So check back regularly as I build this site.

Things to go over today:

1. Syllabus
2. Schedule (see below)
3. Introductions + special interests
4. Homework:
5. Highly encouraged: Favorite web design book: $11!

Let’s talk about the following questions:

• Why are you here? What are your goals? What is your background?
• What makes a great website? What are things that you think are required, optional and not necessary in a website?
• What is important to you in the Design vs. Function balancing act?
• What is Responsive Design and is it important to you? Is it the future of web design or just a current trend?
• What do you think IS in the future of web design?
• How important is social media in all of this?
• What happens when we Google “Bad Web Design”? 😉

Intro research project:

Find 5 websites that you love + 5 websites that you don’t like – Why?

Plan out and research local redesign. Do you know anyone? This is a great way to learn as well as go to them with a better idea.

Some intro and theory-based links to check out: 

Stages of Web Design

An excellent, current, publication :

Web Design Book of Trends 2013 – 2014  and 2017 (Do you want to be a part of the trends?)

Homework: Check out these tutorials on Adobe.com (we will be revisiting these periodically – bookmark them now!)

SPRING 2019

Hi Students,

In case you are already reading this: we will begin on Monday, Feb. 4 ! See you then.