web design 101

Web Design101 Foundational skills for

website design

August 22, 2012

Web Design 101 What we’ll do today!

Web page breakdown What are the key parts of a web page?

Web design process Where to start?

Site Organization

HTML The backbone of a web page Links

Imagery for the web

CSS The heart of a web page

Banner and Slideshow Animation Flash and jQuery

FTP Space

Blog options

August 22, 2012 2

Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.

Web Design – a rough sketch You know it. You love it. Now how do you get

on the web? Web Page Coding and Creation (HTML)options

Hand-coding, HTML text editors, WYSWIG HTML software (Dreamweaver)

Vision(sketches or Photoshop)

Content (ideas and tasks and projects)

Server space (web hosting) or blog FTP software (Free or Dreamweaver)

August 22, 2012 3


Web Page Breakdown Page – url, address

Text

Navigation & Links

Images

Interactivity

Animation (motion)

Scripting

August 22, 2012 4


Where to start?

Need or desire to create

Sketches

Develop brand & concept

Work out kinks

Try Variations

Think it through before you code

August 22, 2012


5

Site Organization

File structure organizes assets, and creates url

Create a folder on your desktop

Name it with your name (no spaces)

Within that create 2 folders

Images

Scripts

August 22, 2012 6


yourname images scripts

Site Organization

Your html pages will be at root level of yourname

August 22, 2012 7


yourname images scripts index.html contact.html about.html

portfolio.css home.jpg

Determining urls

August 22, 2012 8


yourname images scripts index.html contact.html about.html

portfolio.css home.jpg

Your domain name is yourname.com

Your home page is www.yourname.com (index.html is hidden)

To get to contact – www.yourname.com/contact.html

To get to about – www.yourname.com/about.html

Keep your site organized!

Always in one root folder

File Management in Dreamweaver a help

Scripts are often generated on the fly, so

be aware of alerts and point them to

script folders.

Dreamweaver can also copy images to a

default folder. Great feature.

August 22, 2012 9


HTML – Hypertext Markup Language

The backbone or skeleton of Web Design

Code evolution

HTML – HTML 4 – XHTML – HTML5

All still in use on current browsers

HTML5 still being incorporated. Simplified

coding that accommodates multimedia

and apps.

August 22, 2012 10


HTML – Hypertext Markup Language

Container based system

August 22, 2012 11


<html>

<head> <title>Your Title Here</title> Scripts, etc, go here…

</head>

<body>Visible Content Goes Here </body>

</html>

Dreamweaver gets you started


August 22, 2012 12


Welcome Screen

Create New

HTML File

Choose Split View


August 22, 2012 13


Code on left

Design on right

Start typing

within the

Body tag

Basic Tags and code – natural flow Be aware of which screen you are on.

Code reacts differently if you enter in on the code side, or the design side.

Get into the habit of typing on code side. <br /> creates a line brake (no close tag)

<p><p/> contains a paragraph (with added space).

Adheres to natural flow from top to bottom No placement at this phase

August 22, 2012 14


Design View – not truly WYSIWIG

To see how your page is looking, it’s best

to view in a browser.

August 22, 2012 15


Save your files as index.html

Design View is frequently not

accurate.

The globe icon allows you to

preview your work in a browser

window. Test in all browsers.

Live View is an option, but has

its limitations.

Note: you are working locally.

Creating a link

Links can be internal or external. External – http://www.google.com

Internal – within site – contact.html

Let’s start with an external link

In the design view of your page, hit a return after your text. Notice the <p> tags that are created.

Type “Take me to google.” Select word “goodle”

August 22, 2012 16


http://www.google.com

August 22, 2012 17


Locate the properties panel.

In Link type google url

http://www.google.com

When you test your page

in the browser, you will have

created a link to google.

Creating a link

Images for the web

At this point we’re ready to add an image

Image formats that are optimized for the

web.

.Jpg – flattens on white – RGB

.Png – transparency – RBG

.gif – transparency – index

All are one layer

August 22, 2012 18


Photoshop’s role in web design Manipulate, slice, crop, and format

individual images

Mock up your site

Analyze layouts and variations

Layered work files - .psd

Never use full Photoshop jpeg as layout

Good web design is efficient design

Html pages use images, html, and css

August 22, 2012 19


Photoshop mock-up analysis

August 22, 2012 20


Images that will be used in page:

Photo of kids - jpg

Logo - png

CSS will handle

Text styling

Transparent background colors

Gradients (new browsers)

Bring images into your web page

August 22, 2012 21


Add a jpeg to your

image folder Simply copy it to this folder or

drag it in

Place cursor in design view

Insert menu> common tab > tree icon

Navigate to your images folder

and choose image file.

CSS – Cascading Style Sheets

August 22, 2012 22


The Cascade

Divs

Basic text styling

Style selectors

Positioning

Floats

CSS – Cascading Style Sheets

August 22, 2012 23


The Cascade

External Style Sheets

Mystyle.css

Embedded Style

In <head> section of page

Inline style

In line with text

Styles have

precedence An external style sheet

can be overridden by

an embedded style.

An embedded style can be overridden by an inline style.

August 22, 2012 24


Stands for Division

Creates area of content

Similar to an envelope

With instructions

Instructions come from styles

In line with text

Divs <div class="greenbox”>

</div>

August 22, 2012 25


Green Box Div

Any text

<div class="greenbox”> Any text

</div>

<style type="text/css"> .greenbox { background-color: #0C3; height: 200px; width: 200px; border: thin solid #060; color: #FFF; } </style>

Code in <body> CSS code in <head>

August 22, 2012 26


Div creation - Selectors

We just made a class style

Class is a type of selector

Four types of selectors

Class – anytime, anywhere

ID – once on a page

Tag – redining html tag

Compound - contextual

Important to remember

Create the div

Create the style

Style must be applied to the div

August 22, 2012 27


Text Styling with CSS Let’s put a paragraph of text

into our body.

We’re creating a new style that

redefines the body tag.

Go to lipsum.com for dummy text

Paste into body. Remove any <p>

</p> tags

Create new style in the CSS styles

panel

August 22, 2012 28


Create new CSS Rule Choose Tag

Body

This document only

Hit ok

August 22, 2012 29


Redefine type in the body tag Change type

formatting options

Font family

Font size

Color

Etc.

Hit OK

Type will update

You’ll now have CSS

code in your head

section

August 22, 2012 30


Position type on page Right now your type has no form, and you have no ability to

control it.

It needs to be in a div and

that div needs a style

Create new style

Name it centertext

Class selector

This document only

Select your type

Create new div

Wrap around selection

Apply centertext

August 22, 2012 31


Now let’s define centertext Look for centertext in style panel list of styles. Doubleclick

In Box

Width 400, Height 300

Padding 10 - on all sides

Margin - Right and Left Auto

Don’t close yet!

In Positioning

Set position to relative

Hit ok

Div should pop center and

text should be contained

August 22, 2012 32


Let’s put an image in the div Bring an image into the div. Placed right before the text.

Click on the image in the

design view.

Create a new class

The one we want should

come up automatically.

Pseudo

This document only

.centertext img

Select Box

Float - right

August 22, 2012 33


End Result While we haven’t been able to

explore a variety of layouts, it’s

important to know that the

types of selectors , positioning,

and floats are at the heart of

placing your content on the

web page.

August 22, 2012 34


Create a quick nav bar Let’s add some links

underneath our text.

Type out the following

Home | Page2 | Page3

Make each a link

Create a new div around the

links named navdiv.

Click one any link text and

create a new style.

Creating styling for any link

within navdiv.

Padding – 20 on right.

Animation

August 22, 2012 35


Flash Timeline based

animation program that

generates shockwave

animations

jQuery Javascript frameworks

library of animation

Referenced through

script links and css.

August 22, 2012 36


Flash Animation An easy banner add

Create a new actionscript file in

Flash

Set the canvas size to 500x100

Fill base with color

August 22, 2012 37


Flash Animation Add a text layer, position off canvas

August 22, 2012 38


Flash Animation Go to Frame 30

Add keyframe - hit F6

Change position of text

at 30 frames.

Fill base with color

Save file

Select CTL Return to test

swf file

August 22, 2012 39


Paid Web Hosting If you’d like to have a domain name and space for a

site, you will need to work with a web hosting service.

Many companies streamline the process of registering a

domain name and providing space.

My recommendations

Ipage.com

Godaddy.com

Blogs

Blogs are a great way to establish an online presence,

and don’t require a lot of technical knowhow.

My recommendations

Tumblr.com

Blogger

WordPress

August 22, 2012 40


Thank you all for coming today! We hope you enjoyed our community web design class

Feel free to email me with any questions at

[email protected]

mailto:[email protected]

web design 101

Technology