Select Page
Digital Imaging IV
Class 05: Intro to Web Design

Topics

    • Web Design
    • Web Technology
    • Dreamweaver
    • Basic Webpage Lab

High Five

Web Design Lecture

Web Design

Web Design

Web design involves the planning, production, and application of websites. It is more concerned with the visual aspects and usability of the final webpages. Sometimes web development is also incorporated when specific features are required for a project.

Web Design Article

Web Technology

Webpage Code Languages:

A webpage that is viewed in your browser uses three primary technologies (although others may be used):

HTML
Hypertext Markup Language
Coding language that allows you to markup text to be formatted similar to something like Microsoft Word. It is also used embed and link other elements such as other text documents, images, video, etc.
CSS
Cascade Style Sheets
Coding language that selects HTML elements and applies design rules to them like color, size, and font-family.
JavaScript
A broad and common Scripting language that is capable of producing complex functions to allow for animation, interactivity, and more.

above is the typical file/folder structure

HTML Syntax:

HTML is made up of elements

An element is made up of an opening tag, then content, then a closing tag. Some elements are open elements and only contain an opening tag with properties attached. Think of tags as containers. They tell you something about the information that lies between their opening and closing tags. It is also posssible and often necessary to nest elements inside each other in order to group them for design applications.

A basic webpage is simply a collection of elements.

Element

<p>this is a paragraph</p>

opening tag content closing tag
index.html
<!DOCTYPE html>
<html>  
  <head>
    <title>this is the title</title>
    <meta name=“description” content=“basic HTML structure” />
  </head>

  <body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>
    <h1>This is the first “level” main heading</h1>
    <p>This is a paragraph</p>
    <h1>This is the second “level” heading</h1>
    <p>Another paragraph? Oh wow!</p>
    <h1>This is the third “level” heading</h1>
    <p>I think you get it now</p>
  </body>
</html>

above is a very basic html webpage

Cascade Style Sheet (CSS)

CSS is a coding language used to apply design attributes to HTML elements. It may target elements by type, position, or name (id or class). Position, sizing, typeface, color, and other basic design properties may be applied to the HTML.

HTML = Text, Content, Structure
CSS = Formatting, Design

Including CSS (Internal)

This is best for single web pages.
Will load faster for single page since it will load right in the page.
This is generally easier to code since it is all in one document.
This is not really considered best practice.

<style>
Tells the browser this is where the style sheet starts.
type
Tells the browser that this is CSS code.
<style type="text/css">
  body {
    font-family: arial;
    background-color: rgb(185.179.175);}
  h1 {
  	color: rgb(255.255.255);}
</style>

This would be placed inside the <head> element at the top of the HTML document.

CSS Rules

Each visual description statement is a CSS rule.

CSS rule

p { font-family: arial; }

CSS Rule contains two parts: a selector and a declaration

 p { font-family: arial; }

selector declaration

CSS Properties consist of two parts: a property and a value.

 p {  font-family:  arial;  }

property value

Selectors

Selectors may be an HTML element, multiples, descendants, class, or ID.

Universal Selector:
*
Applies to all elements
Type Selector:
h1, p, ul, etc.
Matches element names
Class Selector:
.note, .page, etc.
Matches class attribute after dot(.)
ID Selector:
#introduction, #top, etc.
Matches id attribute after the # symbol
Child Selector:
li>a, h1>p, etc.
Matches direct child of the specified element
Descendant Selector:
p a, ul li, etc.
Selects all descendants of specified element
Adjacent Selector:
h1+p, p+ul, etc.
Selects the next element after the specified element
General Sibling Selector:
h1~p, p~ul, etc.
Matches an element that is a sibling of another but does not have to be directly preceding it

Selecting Specific Elements:

Sometimes you may want to apply styling to multiple blocks or just a single word. For this you can add some identifiers and group elements for that the CSS rule may select.

ID Attribute:
id
Used to uniquely identify an element from other elements. This is invaluable when using CSS to format your HTML document.
<h1 id="mainHeading">Super Awesome Sandwiches</h1>
Class Attribute:
class
Class is similar to id except that it is meant to be used to identify multiple elements.
<h1 id="mainHeading">Super Awesome Sandwiches</h1>
<p class="foodDes subs">We have great subs!</p>
<h2>Check out all of our options</h2>
<p class="foodDes">We have over a dozen to choose from</p>

Box Model:

CSS imposes an imaginary box around each element. You may change the box, the area around the box, inside the box, and the content within the box.

CSS Properties:

There are many CSS properties you may define. Broadly they fit into these categories:

  • Positioning (translate, scale, rotation, etc.)
  • Spacing (margin, padding)
  • Border (color, style, thickness, etc.)
  • Background (color, image)
  • Text Properties (color, font, alignment, size, etc.)
  • Others (animation, interaction, shadows, etc.)

You can view a more complete list with examples on the w3Schools site here:

browser view

margin

outline

border

padding

height

content
width

Dreamweaver

Adobe Dreamweaver:

Dreamweaver: is a proprietary web development tool originally created by Macromedia and acquired by Adobe in 2005.
Dreamweaver facilitates writing the code used for the web. It also has some templates, shortcuts, and visual interfaces that make the whole process more efficient and user friendly. This is a very robust piece of software with loads of aides but like the rest of the Adobe Creative Cloud applications it is subscription based. 

Basic Webpage Lab

Basic Webpage:

As an introduction to Adobe Dreamweaver as well as basic HTML & CSS you will produce a simple webpage. In Dreamweaver you will use the various tools as well as the WYSIWYG interface to create most of the code necessary for a functional webpage.

You will be graded on the following:
  • Basic Document & File Structure:
    • Master folder created with correct sub folders.
    • All files named and placed correctly.
    • Basic HTML and CSS structure produced.
  • Basic Content:
    • Well-written text with no grammar mistakes.
    • Images scaled, and adjusted for the page.
  • Element Formatting:
    • HTML and CSS rules are created and applied correctly.
  • Aesthetic:
    • Strong use of HTML and CSS to produce a cohesive color scheme, appropriate typography, and composition.
    • Appealing design with professional craftsmanship throughout.
Resources:
Assignment Video Tutorials
You may watch these tutorial videos below to help you complete your assignment.
Assignment Lab Materials
You may download the lab materials here: N/A

Assignment Video Tutorials

Wait! Before you go!

Did you remember to?

  • Read through this webpage
  • Watch the videos
  • Basic Webpage Lab on Blackboard