Web Design 101

August 22, 2012

Web Design101
Foundational skills for
website design

2 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

Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.

3 August 22, 2012

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)


4 August 22, 2012

Web Page Breakdown
 Page – url, address
 Text
 Navigation & Links
 Images
 Interactivity
 Animation (motion)
 Scripting

5 August 22, 2012

Where to start?
 Need or desire to create
 Sketches
 Develop brand & concept
 Work out kinks
 Try Variations
 Think it through before you code


6 August 22, 2012

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
images scripts
yourname

7 August 22, 2012

Site Organization
 Your html pages will be at root level of yourname

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

home.jpg portfolio.css

8 August 22, 2012

Determining urls

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

home.jpg portfolio.css

 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


9 August 22, 2012

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.

10 August 22, 2012

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.


11 August 22, 2012

HTML – Hypertext Markup Language
 Container based system <html>

<head>

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

</head>

<body>Visible Content Goes Here

</body>

</html>


12 August 22, 2012

Dreamweaver gets you started
Welcome Screen
Create New
 Container based system HTML File


13 August 22, 2012

Choose Split View
Code on left
Design on right

 Container based system
Start typing
within the
Body tag


14 August 22, 2012

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


15 August 22, 2012

Design View – not truly WYSIWIG
 Tosee how your page is looking, it’s best
to view in a browser. 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.


16 August 22, 2012

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”


17 August 22, 2012

Creating a link
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.


18 August 22, 2012

Images for the web
 Atthis 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


19 August 22, 2012

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


20 August 22, 2012

Photoshop mock-up analysis
Images that will be used in page:
Photo of kids - jpg
Logo - png

CSS will handle
Text styling
Transparent background colors
Gradients (new browsers)


21 August 22, 2012

Bring images into your web page
 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.


22 August 22, 2012

CSS – Cascading Style Sheets
 The Cascade
 Divs
 Basic text styling
 Style selectors
 Positioning
 Floats


23 August 22, 2012

CSS – Cascading Style Sheets
The Cascade  Styles have
precedence
 External Style Sheets
 An external style sheet
 Mystyle.css can be overridden by
an embedded style.
 Embedded Style
 An embedded style
 In <head> section of page can be overridden by
an inline style.
 Inline style
 In line with text


24 August 22, 2012

Divs
<div class="greenbox”>
 Stands for Division
 Creates area of content
 Similar to an envelope
 With instructions
 Instructions come from styles </div>

 In line with text


25 August 22, 2012

Green Box Div
Code in <body> CSS code in <head>
<div class="greenbox”> <style type="text/css">
Any text .greenbox
</div> {
background-color: #0C3;
height: 200px;
width: 200px;
border: thin solid #060;
Any text color: #FFF;
}
</style>


26 August 22, 2012

Div creation - Selectors
 We just made a class style  Important to remember
 Create the div

 Class is a type of selector  Create the style
 Style must be applied
 Four types of selectors to the div
 Class – anytime, anywhere
 ID – once on a page
 Tag – redining html tag
 Compound - contextual


27 August 22, 2012

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


28 August 22, 2012

Create new CSS Rule
 Choose Tag
 Body
 This document only
 Hit ok


29 August 22, 2012

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

30 August 22, 2012

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
 Select your type
 Create new div
 Wrap around selection
 Apply centertext Copyright Rasmussen, Inc. 2011. Proprietary and Confidential.

31 August 22, 2012

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

32 August 22, 2012

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
 .centertext img
 Select Box
 Float - right

33 August 22, 2012

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.


34 August 22, 2012

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.

35 August 22, 2012

Animation
 Flash
 Timeline based
animation program that
generates shockwave
animations
 jQuery
 Javascript frameworks
library of animation
 Referenced through
script links and css.


36 August 22, 2012

Flash Animation
 An easy banner add
 Create a new actionscript file in
Flash
 Set the canvas size to 500x100
 Fill base with color


37 August 22, 2012

Flash Animation
 Add a text layer, position off canvas


38 August 22, 2012

Flash Animation
 Go to Frame 30  Select CTL Return to test
 Add keyframe - hit F6 swf file
 Change position of text
at 30 frames.
 Fill base with color
 Save file


39 August 22, 2012

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

40 August 22, 2012

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


Web Design 101

More Related Content

Viewers also liked

Similar to Web Design 101

More from Rasmussen College

Recently uploaded

Web Design 101