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 3 – HTML and CSS

DEMO – CSS Layout

Layout Basics

 

Positioning a Block

 

Styling the Box

 

Tips

  • If you add the overflow:hidden property to the containing CSS div element in CSS–the background color will stretch to include floated elements.
  • If you add margin:0px to the header(h1, h2 ect.) and body elements in CSS you will get rid of extra space between elements.

 

 

Lecture:

DEMO – Introduction to Photoshop

Follow these tutorials from Adobe TV.

Photoshop basics

DEMO – Creating and Inserting Background Images

Follow these tutorials from me and Adobe TV.

 

DEMO – Creating a background image

 

Adding shapes, lines and patterns

 

Saving the image for the web

 

Inserting backgrounds into CSS

Leave a comment

Filed under Classes

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

Week #1 – Welcome to Web Design!

Checking out the code

What was discussed in class today:

We started with what we’ll cover this semester (see syllabus). Then went on to “about the instructor”. Attendance, homework and class policies. Student introductions. Brief review of necessary software and useful tools. Introductory explanation of terms used in web design and HTML.

Setting up a Flickr account. This is where you will submit all your assignments 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 can keep track of your progress in this class via Thinkwave. Your instructor will email your user name and password to the email address you provided in class. Please make sure she has your most current email address.

What you absolutely NEED to know:

Be prepared for class. Each week you should have with you:

  1. Notebook
  2. Pen or pencil
  3. USB drive (no less than 8GB) or other removable storage device.
  4. Sketchbook

Assignment:

Styletile

Create a speculative styletile as per directions using Google drawings and share with cartoongoddess@gmail.com. It should include a recent photo of you, 4 square color swatches, both color and pattern elements. Assignment details can be found in web design class Thinkwave.

Homework:

  1. Get inspired (Flickr) – for collecting ideas. Find two (2) samples of eye-catching images and upload. Can be anything, whatever inspires you. Jot down ideas and comments in description panel! You will be expected to update this WEEKLY.

Comments Off on Week #1 – Welcome to Web Design!

Filed under Classes