Category Archives: Uncategorized

Week #14 – Templates, Widgets, Batch Review and CSS

  • Create a page with navigation (widget) and editable regions to save as a template (.dwt).
  • Use Photoshop to write a custom action to batch resize your images.
  • Open Bridge, duplicate your batch image folder, select the images and use tools > batch to apply the action you wrote.
  • Set up either an accordion widget or tabbed panels.
  • Drag your resized images from Bridge to your widget in Dreamweaver.
  • Tweak the CSS to customize the look and feel of your selected widget.

screen-shot-2016-12-16-at-10-36-58-am

Leave a comment

Filed under Uncategorized

Week 6 – Working with CSS

DEMO – Adding custom fonts and lists to CSS

Follow these tutorials.

Adding a custom google web font

Inserting and Styling Lists

 

Using classes to specify custom fonts

Adding fake links

  • hint–if you use a # instead of a url, you will create something that looks like a link but doesn’t link to any content

  • hint–this helps you style links before you link them

 

Lecture: Choosing a display and accent type

DEMO –Positioning in HTML & CSS: Part 1

Follow these tutorials.

Review Layout Basics (optional)

Assignment:

Create a wireframe using Google Drawings

screen-shot-2016-10-13-at-9-39-42-pm

Leave a comment

Filed under Uncategorized

Week #5 – Imagery and DIVs

Review: Design Principles
Please review the following lectures. The visual design of each assignment is a large part of your grade. I am looking for the principles and concepts that are outlined in these lectures.
Color:
Choosing a color scheme (Links to an external site.)
Choosing the chroma & value
Choosing a dominant color
Imagery  – Intro
Adding texture (Links to an external site.)
Adding pattern (Links to an external site.)
Type
Choosing a text typeface (Links to an external site.)
Styling a text typeface (Links to an external site.)

Review: Technical Skills
Please review these demonstrations. For the next project you will be expected to know the skills included in these demonstrations. Let me know if you have any questions about any of the skills.
HTML & CSS
Demonstration: Html Basics
Demonstration: Intro To Css
Demonstration: Css Layout
Demonstration: Creating And Inserting Background Images
Demonstration: Creating And Inserting Content Images

Photoshop
Demonstration: Introduction To Photoshop

Leave a comment

Filed under Uncategorized

Week #4 -Working with Content

DEMO – Creating and Inserting Content Images

Some tutorials:

Preparing the image in Photoshop

Saving the image for the web (review)

Inserting an image into HTML

Code

Sample Page

To see the code: right-click in the page and select “View Source” (IE) or “View Page Source” (Firefox), or similar for other browsers. This will open a window containing the HTML code of the page.

 

DEMO – Uploading your website

FTP Software

How to upload your files

  • Uploading your files – link T/K
  • Fixing common problems – what to do about misplaced images, css, folders, etc. link T/K

Leave a comment

Filed under Uncategorized

Week #2 – Intro to HTML & File Structure

Lecture: How the web works

DEMO – Getting setup

File Directory: 

File structure Rules:

  1. File names have no spaces or strange characters
  2. File names are lower case
  3. All files in folder named project1_website
  4. Folders named images, fonts, js inside project1_website folder
  5. All images are inside the images folder
  6. External stylesheet called project1.css
  7. All css in external file
  8. No psds uploaded
  9. All pages titled
  10. All images have alt text

Resource: How to use W3 schools:

https://youtu.be/YYjK4qH1wSg

DEMO – Working with the text editor

https://youtu.be/QJEFNxvs8IQ

Assignment:

Create a very basic HTML page.

Content Requirements: (minimum)

  • 1 title
  • 1 line of text in all caps, in a color other than black.
  • 3 paragraphs of lorem ipsum. Usetags for each paragraph.
  • 1 image <img src=””>
  • 1 hyperlink <a href=”(the URL for your link” title=”” target=”_blank”>
  • Name the file “firstHTML_yourname.html”

Homework:

Set up a Flickr account. This is where you will share all your screenshots and store images that inspire you. Tags, sets, groups and other aspects of Flickr will be explained. Our Flickr group pool: duCret Web Design Class. You will be expected to update this weekly.

Leave a comment

Filed under Uncategorized