View
926
Download
0
Category
Preview:
DESCRIPTION
Rasmussen College offers Web Design Workshop at its Fargo campus. Learn the basics of web design here.
Citation preview
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
Web Page Breakdown Page – url, address
Text
Navigation & Links
Images
Interactivity
Animation (motion)
Scripting
August 22, 2012 4
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
yourname images scripts
Site Organization
Your html pages will be at root level of yourname
August 22, 2012 7
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
yourname images scripts index.html contact.html about.html
portfolio.css home.jpg
Determining urls
August 22, 2012 8
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
HTML – Hypertext Markup Language
Container based system
August 22, 2012 11
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
<html>
<head> <title>Your Title Here</title> Scripts, etc, go here…
</head>
<body>Visible Content Goes Here </body>
</html>
Dreamweaver gets you started
Container based system
August 22, 2012 12
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
Welcome Screen
Create New
HTML File
Choose Split View
Container based system
August 22, 2012 13
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
Design View – not truly WYSIWIG
To see how your page is looking, it’s best
to view in a browser.
August 22, 2012 15
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
August 22, 2012 17
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
Photoshop mock-up analysis
August 22, 2012 20
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
The Cascade
Divs
Basic text styling
Style selectors
Positioning
Floats
CSS – Cascading Style Sheets
August 22, 2012 23
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
Create new CSS Rule Choose Tag
Body
This document only
Hit ok
August 22, 2012 29
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
Flash Animation Add a text layer, position off canvas
August 22, 2012 38
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
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
Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.
Thank you all for coming today! We hope you enjoyed our community web design class
Feel free to email me with any questions at
alex.fogarty@rasmussen.edu
Recommended