GDES 46

Intermediate Web Design with Dreamweaver and CSS - Spring 17 - Section 54045

Weekly Instructions

Week 1 - Jan. 30

Online/at home

  • Watch the video Introduction to the Dreamweaver interface - Duration 27:22
    • You do not have to turn anything in for this video, but you are responsible for knowing the content, so make sure to go through the process in the video
  • Watch the video on Creating a site in Dreamweaver - Duration 23:52
    • You do not have to turn anything in for this video, but you are responsible for knowing the content, so make sure to go through the process in the video

Lab

  • Introductions, syllabus, logins, etc.
  • Look at work
  • Take the opening day survey in Canvas under the lessons tab
  • Day 1 in person Questions

Week 2 - Feb. 6

Online/at home

Lab

Week 3 - Feb. 13

Online/at home

Lab

  • Hot studio videos
    • Design
    • Build and Transfer
  • Finish review of Canvas Discussion Forum on web design criteria and resources
  • Intro Quick Project
    • Project 1: Quick project.
      • Create 3-4 linked web pages about the artist of your choice.
      • You can include biographical information and images of the artwork.
      • Try to make the style of the site reflect the style of the artist.
      • Bring in actual files to turn in. You will be graded on whether you fulfilled the requirements, as well as the design.
      • Do sketches, wireframes and comps(optional) first
      • You can use Dreamweaver starter templates as a starting point if you wish
      • Bring in your 3-4 wireframes in 2 weeks
        • Wireframes due in class Feb. 27
        • Project Due in class March 6 (Don't wait until next week to get started on production)
  • Do a content inventory/list for the site
    • Share in a group for feedback
  • Do information architecture for the site
  • Work on Quick Project 1 thumbnails
  • Quick look at mybalsamic for the wireframes
  • Start on Wireframes for Project 1 - Due next class
    • You can use Balsamic for the wireframes. I have made accounts for everyone.
    • Look at Axure in class
    • Bring your 3-4 wireframes next class to discuss. Bring the files as images. You do not have to print them.
  • Work on Projects 1 and 2 in Adobe Dreamweaver CC - The Professional Portfolio

Week 4 - Feb. 20 - No in Person Class - Work at home - see below

Online/at home

  • Watch the video Text in Dreamweaver - Duration 31:52 - revised 2-17
  • Watch the video The CSS Designer Panel in Dreamweaver - Duration 39:51 - revised 2-17
    • Assignment: For this video, follow along with the video and recreate the page done in the video.
    • Download the start files here
    • Due in the drop box in Canvas under the lessons tab before the next class meeting.
  • Review image file formats for the web here
  • Bring in your 3-4 wireframes for The Quick Project next week
    • Wireframes due in class Feb. 27
    • Project Due in class March 6
    • Don't wait until next week to actually start production on pages
  • Message Assignment: Log into Canvas, click on the discussions link and reply to the discussion "Well Designed Websites" with the URL of a site you think is well designed, and give me 3 reasons why. Also describe who you think the target audience is.
  • Work on Projects 1 and 2 in Adobe Dreamweaver CC - The Professional Portfolio

Lab

  • No in person lab this week - holiday
  • Work at home on the Quick Project
  • Work on Projects 1 and 2 in Adobe Dreamweaver CC - The Professional Portfolio

Week 5 - Feb. 27

Online/at home

Lab

  • Review Dreamweaver built in templates
  • Look at wireframes in groups
  • Work on Quick Project
  • Work in project check for Quick Project
  • Look at wireframes with Mark
  • Watch Adobe video on Layer Comps in Photoshop duration 6:26
  • Play with Layer Comps in class
  • Intro Project 2: Personal Project
  • Work on Projects 1 - 3 in Adobe Dreamweaver CC - The Professional Portfolio
  • Work on Personal Project
    • Work on Personal Project Concepts and Thumbnails
    • We will look at these next week in class

Week 6 - March 6

Online/at home

Lab

  • Go over some well designed sites
  • Review Project 1 in class
  • Look at 2017 Salary Guide
  • Look at thumbnails/sketches for the Personal Project
  • Review for Quiz next week
  • Photoshop Artboards for Comps
  • Review lessons 1-2 from Adobe Dreamweaver CC - The Professional Portfolio
  • Work on wireframes for the Personal Project

Week 7 - March 13

Online/at home

Lab

Week 8 - March 20

Online/at home

Lab

No Class March 27 - Spring Break

No videos this week. Personal Project due Monday, April 3 in class.

Week 9 - April 3

Online/at home

Lab

Week 10 - April 10

Online/at home

Lab

  • Look at the rest of the Personal Projects
  • Work on Group Project
    • See Requirements here
    • Group Project Proposals in class May 1
    • Group Project Due for testing May 15
    • Group Project Final Version Due May 22
  • Review CSS Box Shadows
  • Review CSS Gradients
  • Review CSS Background Images
  • Go through Project 8 - Bootstrap Responsive Page in class from Adobe Dreamweaver CC - The Professional Portfolio
  • Work on Redesign Project

Week 11 - April 17

Online/at home

Lab

Week 12 - April 24

Online/at home

Lab

  • Redesign Project Due
    • See week 9 for requirements
  • Work on Group Project Presentations
  • Look at Redesign Projects
  • Work on Group Project
    • See Requirements here
    • Group Project Proposals in class May 1
    • Group Project Due for testing May 15
    • Group Project Final Version Due May 22

Week 13 - May 1

Online/at home

Lab

  • Presentations today!
  • 1 hour at the beginning of lab to prepare for presentations
  • Work on Group Project
  • If time:
    • Intro to Sketch 3
    • CSS Animation examples
    • Full screen background video example
    • Using CSS Perspective example
    • Rounded Images with CSS example

Class Links

Outside Links