MAT 153 Web Design 1 - Orientation Presentation
Download
Report
Transcript MAT 153 Web Design 1 - Orientation Presentation
Web Design I
Building Your First Site,
Soup to Nuts
This is Not an Easy Course
• We will create highly customized, highly
compatible, and highly optimized web sites
• This is not a simple process
• We will be creating and editing HTML
markup language
• There are extensive procedures that should
be followed closely for success
Updated 1/22/2012
Scott Nelson, Instructor
[email protected]
2
My Credo
I am on-fire for Web Design. My commitment to
you, as a student in my class and a fellow traveler
on this great blue ship that sails around the mighty
sun, is that I will match your effort.
If you have the desire to successfully complete this
course, I want to make sure you achieve that goal,
even if it is not on time. I believe it is far more
important for you to understand and complete the
assignments than to meet a deadline (be aware
that your customer may not feel the same).
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
3
Music Trivia
• Who wrote the classic song, Dream Weaver?
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
4
Music Trivia
• Who wrote the classic song, Dream Weaver?
• Gary Wright
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
5
This Presentation
•
•
•
•
•
•
•
Welcome and about the course
Web Design Santa Barbara
Pipeline
Moodle
Baseline knowledge
First Assignment
Looking at Web Sites in a New Way
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
6
About Your Instructor
• Scott Nelson
• Web Design Instructor at SBCC since 1996
• Designing Websites since 1994
• Webmaster for the City of Santa Barbara since
1999
• MIDI and Computer Music since 1985
• Computer Programming since 1983 (Machine,
Assembly, Fortran, JavaScript, Perl, VBScript, C#,
VB.NET)
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
7
Welcome to Web Design I
•
•
•
•
•
•
Instructor: Scott Nelson
Course: MAT153 Web Design 1
CRN: 58377: Wednesday 5:00 to 10:00 PM
CRN: 58378: Online
Class Assistant: None
Transferable: CSU
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
8
Contact Information
• Scott Nelson, Instructor
This is the order in which I will respond…
– Moodle Ask a Question Forum
(Always start here)
– Moodle Email
(for more private communication)
– [email protected]
– Web Design Santa Barbara Contact Web Form
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
9
Online Office Hours
• Adobe.com
– Screen
Sharing
– Voice
– Chat
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
10
What you Need
• Headset with headphones
and a microphone, just like you might
you use for Skype™.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
11
Instructions
• Open the link below:
• http://connectnow.acrobat.com/WebDesignSB
• Select Enter as a
Guest
• Type in your First
and Last Name, and
then click on the
Enter Meeting button.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
12
Before You Begin Viewing
• The first time you connect, you will be
prompted to install the Adobe Connect client
on your computer. If you have never
participated in an online meeting, you might
want to explore the Quick Start Guide prior to
participating.
• Get a Quick Start Guide
http://seminars.adobe.acrobat.com/vqsparticipants/
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
13
Online Office Hours
• 7:00 p.m. to 8:00 p.m. (PT)
–
–
–
–
–
–
–
–
–
Monday, January 30, 2011
Monday, February 13, 2011
Monday, February 27, 2011
Monday, March 12, 2011
Monday, March 19, 2011
Monday, April 9, 2011
Monday, April 30, 2011
Monday, May 7, 2011
Monday, May 14, 2011
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
14
Course Description
• Covers the process of designing web sites:
communicating with clients, information
architecture, production schedules and
contracts, designing interfaces, developing
content, and understanding the job market.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
15
Course Attendance
• This course can be taken fully-online
• I take classroom attendance
• Let me know via Moodle email if you will be
missing a class in order to be excused
• It is my experience that students who attend
class regularly do better that those who do
not
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
16
Desktop Applications
• Adobe Acrobat 9 or X Professional
Adobe Bridge CS4/CS5
• Adobe Dreamweaver CS4/CS5/CS5.5
• Adobe Photoshop CS4/CS5
• A word processing application
– Microsoft Office Word
– Open Office Writer
– Google Documents
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
17
Is this Course Software Dependent?
• This course is designed around industrystandard graphics and web applications.
• I consider is virtually impossible to
satisfactorily complete this course without the
specified Adobe Web Desktop Applications
• If you will be designing web sites, you will
need to own these applications
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
18
What Software do I Really Need?
• Adobe Photoshop CS4 or CS5
• Adobe Dreamweaver CS4, CS5 or CS5.5
• Adobe Bridge CS4 or CS5
(Web Photo Galleries were moved from
Photoshop CS4 to Bridge CS4)
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
19
Creative Suite 5.5 Web Premium
• Education
Version
~$355
(plus
tax &
shipping)
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
20
What if I Can’t Afford CS5?
• No worries!
• The Adobe CS5 Applications are all available
for your use in the Digital Arts Center
• You may also download 30-day, fullyfunctional trial versions for the last month of
the semester from the Adobe web site
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
21
Can I Use Older Versions?
• Photoshop
– Yes. Though the procedure is written around
Photoshop CS4 and CS5, we really use no new
functionality
– There will be differences in the click-by-click
procedures
– Photoshop CS3 is the oldest version that will
support the procedures
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
22
Can I Use Older Versions?
• Dreamweaver CS4 and CS5
– The course has been design for CS4 and CS5
– Recommendation
• If you intend to use an older version at home, plan to
do your major development in class and in the DAC
and then make minor edits and add content at home
• Adobe Dreamweaver CS5 HTML5 Pack
– Download and install
– http://labs.adobe.com/technologies/html5pack/
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
23
Course Documentation
• Class documentation is written for CS5
• CS4 procedures may not utilize new features
in CS5
• I will work on updating CS5 procedures
throughout the semester
Word Processing
•
•
•
•
You will need a word processing application
Microsoft Office Word or equivalent
Google Documents will also work
Documents and forms are available on the
Web Design Santa Barbara site in:
– Microsoft Word 2003
– Microsoft Word 2007 – 2010
– Adobe Acrobat PDF
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
25
Skills Advisory
• Eligibility for English 100 and 103
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
26
Basic Computer Skills
• Basic computer skills are a requisite for the
class along with experience with either
Microsoft Windows or Apple Mac/OS
• COMAP101 or any other basic computer
skills course is a good place to start
• You do not need experience with Photoshop
or Dreamweaver if you follow the instructions
provided in this course
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
27
Required Materials
• There is no required text book to
purchase for this class
• All materials are provided online
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
28
Suggested Materials
• If you are completely new to Photoshop or
Dreamweaver,
I would like to
suggest a
month
subscription to
Lynda.com.
http://lynda.com
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
29
Film & Stage
• From the stage play and movie Rent, who
wants “to go out tonight” really bad?
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
30
Film & Stage
• From the stage play and movie Rent, who
wants “to go out tonight” really bad?
• Mimi
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
31
Instructors Work Due Folder
• Do not put assignments into the Instructors
Work Due folder on the DAC network
servers!
• I have not, do not, and will not look there for
assignments.
• Any questions?
• All assignments are submitted through
Moodle
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
32
Course Stipulations
• It is your responsible to drop this course if
you feel it necessary
• Negligence to drop within the appropriate
timeframe will result in a failed grade
• You may this this course Pass/No Pass,
however you are responsible for meeting all
SBCC filing deadlines
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
33
Web Applications
• Pipeline
– Email
– School information
• Moodle
– The course web application
• Web Design Santa Barbara
– Class assets
– Written evaluations
– Your connection to MAT153 documentation after the
semester is over
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
34
Physics
• What did Lisa Randall find?
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
35
Physics
• What did Lisa Randall find?
• The 11th dimension
– Gravity dominates
– Leaks into our “brane”
– Unifies other theories
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
36
Web Applications
Online Class Resources
Pipeline
• City College Home Page
http://www.sbcc.edu
• Pipeline link
• Login
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
38
Finding Moodle
• City College Home Page
http://www.sbcc.edu
• Pipeline link
• Log in to Pipeline link
• Click on the Class tab
• Click on the Log into Moodle link
• Click on the MAT153 link
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
39
Moodle Welcome
• Click on the MAT-153-nnnnnn-Web Design
1 link
(where nnnnnn is the course CRN number)
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
40
MAT153 Moodle Home Page
•
•
•
•
•
•
View Course Modules
Get Help
Ask a Question
Syllabus
Calendar
Twitter Feed
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
41
Ask a Question Forum
• Post Any Question
– This is your first an best option for positing a question
– Question should
be web-related
– Students are
encouraged to
reply and assist your
fellow students
– View the threads to
find solutions
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
42
Syllabus
• This is the roadmap to the course
• There is one Module
per week
• Due dates
• Assignments and
requirements
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
43
Moodle Email
• Use this link to
communicate
with me
• This is for more
personal issues
• Ask a Question
Forum is the best
and first resource
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
44
View Course Modules
• The entire course will be here
• Click on a link
to view that
module
• Modules are
clearly marked
with dates
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
45
Course Calendar
•
•
•
•
•
Assignments
Discussions
Important Dates
School Deadlines
Office Hours
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
46
Twitter
• http://Twitter.com/WebDesignSB
• I post reminders
• Notices of when
grading is done
• I tweet when an
email is too much
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
47
Course Menu
• Gradebook
• Assignments
• Forums
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
48
Gradebook
• 6 Assignments (840 Points)
• 11 Discussions (110 Points)
• 11 Exercises
(Extra Credit 130 Points)
• Final Presentation
(50 Points)
• Showcase Entry
(Extra Credit 30 Points)
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
49
Assignments
• Assignments will be given weekly. Late
assignments may be penalized
• Due dates will be posted in the course
modules and in the syllabus.
• Assignments may be submitted in the
following formats
– Adobe Acrobat PDF (I vastly prefer PDF)
– Microsoft Office Word 2003, 2007 or 2010
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
50
Discussions
• 12 Discussions
• Due on Sundays by Midnight
• Graded on the following:
– Length: at least one paragraph
– Discussion of all points given (you must discuss
each question or topic)
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
51
Assignments
• Submitted via Moodle in
the submit assignments
section, no other
submissions will be
accepted
• Due on Sundays by 11:55
p.m.
• Late submissions may be
penalized.
• You may submit
discussions and
assignment as early.
Updated 8/13/2011
• Graded on completion of
steps outlined in each
module, in order to receive
full credit you must
complete each step as
outlined (there is no
allowance for creativity
here, you are being
assessed on how well you
follow instructions and
thereby your understanding
of the tools used)
Scott Nelson, Instructor
[email protected]
52
Assignments
• Assignment 01 – Orientation
– Introduction to Moodle
• Assignment 02 - Web Site Interview
– Interview Worksheet
• Assignment 03 - Project Proposal
– Web Site Proposal - Midterm
• Assignment 04 - Design Comps
– Design Comp Examples for Scott's Place on the Web!
• Assignment 05 - Progress Check
• Assignment 06 - Final Project Web Site
– This is the culmination of the class. Every student should be able to
produce a web site to these specifications.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
53
Project Proposal
•
•
•
•
Written “Scope of Work” document
Will serve as the Roadmap for the site
Required to get a job
Deliverable in PDF
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
54
Final Project Web Site
• Your final project for this class will consist of
a website that you develop using the tools
you learned in this class.
• If you already have a website that you wish
to upgrade or redo you can use that as well.
• You may use this web site for another class,
only if the other instructor is agreeable
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
55
Final Project Web Site
• Site should be hosted
• If you do not have a web site host, one will
be provided for you at no charge to you
• Five page minimum
• CSS Layout
• ADA Compliant
• More requirements on the site
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
56
Example Web Site
• Scott’s Place on the Web
http://www.ScottsPlaceOnTheWeb.com/
http://Demo7.ScottsPlaceOnTheWeb.com/
http://Demo8.ScottsPlaceOnTheWeb.com/
• Use these sites as benchmarks
• All assets for this class are geared toward
making a site such as this
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
57
The Final Presentation
• During the final class period
– For online students this is due in written form
• Projects must be complete and uploaded
prior to class
• Each student will present their web site to the
class
– Presentation is part of the grade
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
58
Exercises
•
•
•
•
These were added in Spring 2012
Very helpful and useful for MAT154
You may use them to get extra credit
The are outside the scope of the Interface
Design Procedure
• I strongly encourage you to complete the
exercises
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
59
Film & Stage
• From the DreamWorks movie, Over the
Hedge, who lost his nuts?
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
60
Film & Stage
• From the DreamWorks movie, Over the
Hedge, who lost his nuts?
• Hammy
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
61
Web Design Santa Barbara
• Web Design Santa Barbara
http://www.WebDesignSB.com/
• All class assets
• Your scores and cumulative grade are
kept here, not in Moodle
• Available after class is done
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
62
Design Procedure Videos
• Instructional videos are available for this
course
http://www.WebDesignSB.com/Resources/Videos/
• Videos follow the Interface Design Procedure
• Videos are considered a supplemental aid to
this course only and are not required
• These videos are not captioned
– The written procedures in electronic form are
considered as Accessibility accommodations
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
63
Assignments &
Grading
Making the Grade
Course Requirements
• Students are required to read the posted
lecture notes
• Students will observe the submission dates
and deadlines as designated in the syllabus
• My weekly emails and other periodic
communications are considered required
reading
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
65
Reading / Exercises
• You will be asked to complete the assigned reading
each week. This means that you should first, read
the assigned pages completely and then do the
exercises provided.
• If you have any question about the tools or topics,
post them in the “Ask a Question” forum. This way
the whole class can benefit from the question and
answer exchange. Many times your questions will
be already answered here.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
66
Content and Copyrights
• Content development is important to understand, not only in
terms of who will be developing the content for your project,
but as to who owns the stuff.
• I am not an attorney, and I am not offering any legal advice.
I suggest that if you have specific questions about copyright
law, you seek the advise of a copyright attorney.
• That said, there is a common misconception that just
because you are a student, working on a class project, you
have the right to violate copyright law. Let me assure you,
this is not the case. If you use copy written material for
this class, you must receive permission to use it.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
67
Where to Find What’s Due
• Your Moodle Home Page is the place!
– Date the Module
starts
– Link to Required
Reading
– A list of what
Discussions and
Assignments are
due each week
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
68
Production Resources
• Production Resources Indicator
– No project has a consistent amount of weekly hours and resources
throughout the life of the project
– The Production Resources indicator is provided to help you budget
your time over the semester, and anticipate “crunches”
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
69
Production Resources
– Use this chart as a guide to the approximate number of hours you
will need to put in outside of class time during this week to complete
the assigned homework: reading, discussions and assignments. This
is only an estimate. The actual hours you require to complete the
assigned tasks may be more or less than this estimate.
– Online students will probably spend more hours per week as there is
no in-class time to work on assigned tasks.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
70
Scoring
Assignment 1 - Orientation
30
Assignment 2 - Web Site Interview
30
Assignment 3 - Project Proposal
120
Assignment 4 - Design Comps
120
Assignment 5 - Progress Check
40
Assignment 6 - Final Web Site Presentation
30
Post Discussion
11 @ 10 points each
Web Site Project
520
SoMA Showcase Entry (Extra Credit)
Total
Updated 8/13/2011
110
Scott Nelson, Instructor
[email protected]
30
1,030
71
Grading
• A
– 900 to 1000
• B
– 800 to 899
• D
– 600 to 699
• F
– Below 600
• C
– 700 to 799
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
72
Acronyms
• For what are TLA and FLA acronyms?
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
73
Acronyms
• For what are TLA and FLA acronyms?
• TLA is an acronym for Three Letter Acronym
• FLA is a TLA for a Four Letter Acronym
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
74
My Availability
• I have a day-job, and do not check-in until
after work on some weekdays
• I am not always available on the weekends
– When I am, I will make an effort to check-in with
class
• The class tutor has been asked to check-in
on the “Ask a Question” forum on weekends
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
75
Late Work
• I accept late work, for partial credit
• Late work is scored at my discretion
• However, do not show-up at the final exam
period and expect to start your web site
• The best policy is to keep up with the class!
I Make Mistakes
• I want you to have the grade you earn
• If you find a discrepancy, please let me know
Las Vegas
• What is the Cirque du Soleil show at the
Mirage?
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
78
Las Vegas
• What is the new Cirque du Soleil show at the
Mirage?
• Love
– Inspired by the Beatles
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
79
Moodle
The Orientation Module
Accessing Class Resources
• Accessing Santa Barbara City College
Online Class Resources is a document that
will instruct you on how to access Moodle
and Web Design Santa Barbara. Click on the
link below, or select, copy and paste the
entire URL into the Address field in your
browser.
•
http://www.WebDesignSB.com/Resources/Documentation/SBCC/Accessing_Cla
ss_Resources/
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
81
Mandatory Orientation
• Assignment 1 and Discussion 01 are
together considered to be “Mandatory
Orientation”
• If you do not complete Mandatory Orientation
by the published due dates, you will be
dropped form the class
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
82
Due This Week
• Assignment 1 – Orientation
– Part 1 - Update Your Moodle Profile
– Part 2 - Send Me a Moodle Email
– Part 3 - Submit the Assignment
• Discussion 01 - Introduction
– In this discussion, you will become familiar with the
Moodle Forum service by introducing yourself to the
rest of the class.
• Both due Sunday, August 28 before 11:55 p.m.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
83
What’s in a Web Site?
Looking at the Internet in an
Analytical Way
Basic Level
• A web site is a collection of files: text, image
and media
• These elements are related to each other via
links
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
85
Page Elements
•
•
•
•
Header
Navigation
Content
Footer
– Last Updated
– Contact Information
– Text Mirror Links
– Accessibility Compliance Statement
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
86
Content Organization
• Top-level Categories (3 to 7)
• Sub-categories
– Sub-levels
• At what level is the content?
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
87
Common Site Elements
•
•
•
•
•
Home page
Content pages (often called Interior pages)
Contact page
Search
Site map
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
88
Home Page Types
• Splash Page
– Scott's Place on the Web! with a splash page
and 6 second auto-refresh
• Top Level Navigation
– Google is a good example
• Full and Deep Navigation
– Microsoft Network (MSN) is a good example
• Launch Page
– Palmasoft, Inc.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
89
Navigation Goals
• Clearly communicate the top-level categories
of your site
• Make it easy for visitors to transverse the site
• Provide a consistent look and feel throughout
the site
• Create a unique site brand throughout the
site
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
90
Navigation Types
•
•
Main Navigation
Main navigation includes the toplevel categories for the web site.
There are generally 3 to 7 categories
in a site.
Sub-Navigation
Sub-navigation allows you to
subdivide top-level categories into
subsections or areas. For larger
sites, where there are initially more
than 7 main categories, several "toplevel categories can be demoted and
grouped into a single top-level
category.
Updated 8/13/2011
•
•
•
Asset-based
Asset-based navigation is generally
used in a web gallery. This is where
thumbnails are linked to a single
specific image asset or embedded
object, such as a video stream or
Flash presentation.
Global
Global navigation allows visitors to
single-click to any major page on the
site. Global navigation is generally
reserved for Home Page Full and
Deep navigation and Site Maps.
Metaphor
Metaphor uses, in general, 3-D
imagery to provide the context for
navigation.
Scott Nelson, Instructor
[email protected]
91
Navigation Positions
•
•
•
•
Left, Vertical
Top, Horizontal
Right, Vertical
Bottom, Horizontal
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
92
Interface Functionality
• Fixed
Specific pixel width - centered (very popular,
this is the one we will use)
• Pros / Cons
– Full background color on columns is easy to
achieve (faux columns)
– Easy to know exact dimensions for elements
within the main content area and avoid float
drop*
– Columns do not expand with increased text size
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
93
Interface Functionality
• Liquid
Overall width and columns based on
percentage of user’s viewpoint
• Pros / Cons
– Allows for creative use of headers - repeat on X
axis or show more when browser is wider
– Background column color more challenging
(liquid faux columns)
– More difficult to know exact dimensions for
elements to avoid float drop - use min-width
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
94
Interface Functionality
• Elastic
Width based on user’s default text size
• Pros / Cons
– Layout and columns expand with text size
changes not browser width
– Allows for creative use of headers- repeat on X
axis or show more when browser is wider
– More difficult to know exact dimensions for
elements to avoid float drop - use min-width
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
95
Interface Functionality
• Hybrid
Overall width based on percentage, while the
side columns are based upon em’s
• Pros / Cons
– Column widths expand with increased text size
– Allows for creative use of headers - repeat on X
axis or show more when browser is wider
– Still challenging to know exact dimensions for
elements to avoid float drop - use min-width
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
96
Interface Functionality
• Absolutely Positioned
Fixed, pixel-based width (this is generally a bad
idea to use Absolutely Positioned CSS)
• Pros / Cons
– Float drop not a problem since there is no floating
– Headers and footers are simple due to set width
– Columns are absolutely positioned and taken out of the
flow of the document - footer will not “see” them
– Areas do not expand to fit the content
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
97
Interface Choices for Class
• 3 Column Fixed, Header
and Footer
– This template will render
a nicely centered, web
page with banner at the
top, top-horizontal
navigation or left-vertical
navigation, and footer at
the bottom of the page.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
98
What is CSS?
• Cascading Style Sheet
• CSS is a series of formatting rules that define
the attributes and position of elements on the
web page
• Cascading because there is a hierarchy and
order to how the formatting rules are followed
• CSS is very powerful and gives the web
designer almost the same formatting control
as the print designer
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
99
Why CSS Templates?
• Dreamweaver CSS Templates give you a
great start
• CSS Templates are highly customizable
• CSS Templates are highly compatible crossbrowser and cross-platform
• CSS template allow a single site to be render
differently on multiple devices such as
screen, mobile and print
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
100
Why CSS Templates?
• All the MAT153 documentation is written for
these interfaces
• If you choose a different approach, it will be
far more difficult. Especially, if this is your
first site, I strongly urge you to choose one of
the two recommended templates.
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
101
Zoology
• What is a pregnant gold fish called?
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
102
Zoology
• What is a pregnant gold fish called?
• A twit
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
103
Let’s Looks at Some
Sites
The Good, the Bad and the Ugly
Discussion
• I chose some arguably world-class sites
• Let’s apply some of the concepts we
discussed to the following sites
• Don’t worry if you don’t understand some (or
all) of the concepts now, we will be delving
into each in more depth in the next few
weeks
• Try to apply these concepts to sites as you
surf the web this semester
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
105
Google
• http://www.Google.com/
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
106
CNN
• http://www.cnn.com/
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
107
Arizona High Power Rocketry Association
• http://www.ahpra.org/
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
108
Los Angeles Design Studio
• http://www.LADesignStudio.com/
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
109
Wynn Las Vegas
• http://www.WynnLasVegas.com/
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
110
Keys to Success
Suggestions to Succeed in
this Course
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
111
Successful Behaviors
• Ask questions if you do not understand
– Ask a Question Moodle Forum
– Office Hours
– Others probably have the same question, but may
be afraid to ask
• Stay in touch with the course
– Do not let a week go by that you do not check-in with
Moodle
• Keep-up with the syllabus
– Do not fall behind
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
112
Follow Instructions
• If this is your first site, do not think outside
the box
– Follow the Interface Design Procedures
– Follow the suggestions,
rather than trying to be
innovative
– Read and meeting
assignment standards
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
113
Utilize Resources Provided
• Every Assignment has an example
– Use them
• There are extensive written resources
– Read them
• There are instructional videos available
– View them
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
114
Above All, Have Fun
• Web design should be a passion, not a chore
• Look for the good in every challenge
• Capitalize on your errors and learn from
them
• Design from your heart!
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
115
Your Marching Orders
• Complete Assignment 1 – Orientation
• Complete Discussion 01 – Introduction
• Start viewing web sites in terms of the
elements from which they are built
• Think about the name, title for subject of your
web site project for this class
Updated 8/13/2011
Scott Nelson, Instructor
[email protected]
116
Thank You!
That wraps it for tonight.
Thanks for your attention!