Learning Web Design Third Edition- P3 ppsx

Part I: Getting Started
6
What Do I Need to Learn?
Because graphics are a big part of web design, even hobbyist web designers
will need to know how to use some image-editing software, at minimum.
If you don’t have visual design experience, you may want to do some personal
research on the fundamentals of graphic design. The following books will
give you a good start on rounding out your design skills.
The Non-Designer’s Design Book, Second Edition by Robin Williams (Peachpit
Press, 2003)
The Non-Designer’s Web Book, Third Edition by Robin Williams and John
Tollett (Peachpit Press, 2005)
Design Basics, Sixth Edition by David Lauer and Stephen Pentak (Harcourt
College Publishers, 2004)
Graphic Design Solutions, Third Edition by Robin Landa (Thomson Delmar
Learning, 2005).
Information design
One easily overlooked aspect of web design is information design, the orga-
nization of content and how you get to it. Information designers (also called
“information architects”) deal with flow charts and diagrams and may never
touch a graphic or text file; however, they are a crucial part of the creation
of the site.
It is possible to find courses specifically about information design, although
they are likely to be at the graduate level. Again, some personal research and
experience working on a team will go a long way toward rounding out this
skill. If you think you may be interested in this aspect of web development,
check out these books:
Information Architecture for the World Wide Web: Designing Large-Scale Web
Sites, Third Edition by Lou Rosenfeld and Peter Morville (O’Reilly, 2006) for
a good overview.
Information Architecture: Blueprints for the Web, by Christina Wodtke (New

Riders, 2002)
Interface design
If graphic design is concerned with how the page looks, interface design
focuses on how the page works. The concept of usability, how easily visitors
can accomplish their goals on the site, as well as the general experience of
using the site, is a function of the interface design. The interface of a web site
Frontend Versus
Backend
You may hear web designers and
developers say that they specialize in
either the
frontend
or
backend
of
web site creation.
Frontend design
“Frontend” refers to any aspect of the
design process that appears in or
relates directly to the browser. This
book focuses primarily on frontend
web design.
The following tasks are commonly
considered to be frontend disciplines:
Graphic design
Interface design
Information design as it pertains
to the user’s experience of the
site
Site production, including HTML

documents, style sheets and
JavaScript
Backend development
“Backend” refers to the programs
and scripts that work on the server
behind the scenes to make web
pages dynamic and interactive. In
general, backend web development
falls in the hands of experienced
programmers, but it is good for all
web designers to be familiar with
backend functionality.
The following tasks take place on the
backend:
Information design as it pertains
to how the information is
organized on the server
Forms processing
Database programming
Content management systems
Other server-side web
applications using Perl/CGI, PHP,
ASP, JSP, Ruby on Rails, Java and
other programming languages.










What Do I Need to Learn?
Chapter 1, Where Do I Start
7
includes the methods for doing things on a site: buttons, links, navigation
devices, etc., as well as the functional organization of the page. In most cases,
the interface, information archictecture, and visual design of a site are tightly
entwined.
Often, the interface design falls into the hands of a graphic designer by
default; in other cases, it is handled by an interface design specialist or the
information designer. Some interface designers have backgrounds in software
design. It is possible to find courses on interface design; however, this is an
area that you can build expertise in by a combination of personal research,
experience in the field, and common sense. You may also find these popular
books on web usability helpful:
Don’t Make Me Think, A Common Sense Approach to Web Usability, Second
Edition, by Steve Krug (New Riders, 2005)
The Elements of User Experience: User-Centered Design for the Web, by Jesse
James Garrett (New Riders, 2002)
Document production
A fair amount of the web design process involves the creation and trouble-
shooting of the documents, style sheets, scripting, and images that make up
a site. The process of writing HTML and style sheet documents is commonly
referred to as authoring.
The people who handle production need to have an intricate knowledge of
HTML (the markup language used to make web documents) and style sheets,
and often additional scripting or programming skills. At large web design
firms, the team that handles the creation of the files that make up the web site

may be called the “development” or “production” department. In some cases,
the tasks may be separated out into specialized positions for CSS designer,
HTML author/coder, and client-side programmer.
This book will teach you the basics of web authoring, including how to
write HTML documents, create style sheets, and produce web graphics.
Fortunately, it’s not difficult to learn. Once you’ve gotten the fundamentals
under your belt, the trick is to practice by creating pages and learning from
your mistakes. There are also authoring tools that speed up the production
process, as we’ll discuss later in this chapter.
In addition to the HTML document and style sheets, each of the images that
appear on the page need to be produced in a way that is appropriate and
optimized for web delivery. Graphics production techniques are covered in
Part IV.
The topics of information and
interface design are covered in
more detail in my article “Building
Usable Web Sites”, available
as a PDF download at
www.
learningwebdesign.com
.
O n l I n e R e S O U R c e
Part I: Getting Started
8
Do I Need to Learn Java?
Scripting and programming
Advanced web functionality (such as forms, dynamic content, and interactiv-
ity) requires web scripts and sometimes special programs and applications
running behind the scenes. Scripting and programming is handled by web
programmers (also called developers). Developers who specialize in the pro-

gramming end of things may never touch a graphic file or have input on how
the pages look, although they need to communicate well with the informa-
tion and interface designers to make sure their scripts meet intended goals
and user expectations.
Web scripting and programming definitely requires some traditional com-
puter programming prowess. While many web programmers have degrees
in computer science, it is also common for developers to be self-taught.
Developers I know usually start by copying and adapting existing scripts,
then gradually add to their programming skills on the job. If you have no
experience with programming languages, the initial learning curve may be
a bit steep.
Teaching web programming is beyond the scope of this book. It is possible
to turn out competent, content-rich, well-designed sites without the need
for programming, so hobbyist web designers should not be discouraged.
However, once you get into collecting information via forms or serving
information on demand, it is usually necessary to have a programmer on the
team.
Multimedia
One of the cool things about the Web is that you can add multimedia ele-
ments to a site, including sound, video, animation, and Flash movies for
interactivity (see sidebar). You may decide to add multimedia skills to your
web design toolbelt, or you may decide to become a specialist. If you are not
interested in becoming a multimedia developer, you can always hire one.
There is a constant call for professional Flash developers and people who
know how to produce audio and video files that are appropriate for the Web.
Web development companies usually look for people who have mastered the
standard multimedia tools, and have a good visual sensibility and an instinct
for intuitive and creative multimedia design. Professional Flash developers are
also expected to know ActionScript for adding advanced behaviors to Flash
movies and interfaces.

Do I Need to Learn Java?
You’d be surprised at the number of times I’ve heard the following: “I want
to get into web design so I went out and bought a book on Java.” I usually
respond, “Well, go return it!” Before you spend money on a big Java book,
A Little More About
Flash
Adobe Flash (previously Macromedia
Flash, previously FutureSplash) is a
multimedia format created especially
for the Web. Flash gives you the
ability to create full-screen animation,
interactive graphics, integrated audio
clips, even scriptable games and
applications, all at remarkably small
file sizes. Some sites use Flash instead
of (X)HTML for their entire interface,
content, and functionality.
Flash has a number of advantages:
Because it uses vector graphics,
files are small and the movie can
be resized without loss of detail.
Real-time anti-aliasing keeps the
edges smooth.
It is a streaming format, so movies
start playing quickly and continue
to play as they download.
You can use ActionScript to
add behaviors and advanced
interactivity, allowing Flash to
be used as the frontend for

dynamically generated content
or e-commerce functions.
The Flash plug-in is well-
distributed, so support is reliable.
On the downside:
The fact that a plugin is required
to play Flash media makes some
developers squeamish.
Content may be lost for
nongraphical browsers. However,
Flash has many features to
improve accessibility.
The software required to create
Flash content is often expensive,
and the learning curve is steep.
Flash is not appropriate for all sites
and it is not poised to replace
(X)HTML. However, when used well,
it can create a big impact and a
memorable user experience.
For more information, look for
“Adobe Flash” at
Wikipedia.org
.








Do I Need to Learn Java?
Chapter 1, Where Do I Start
9
I’m here to tell you that you don’t need to know Java programming (or any
programming, for that matter) to make web sites.
The following is a list of technologies associated with web development. They
are listed in general order of complexity and in the order that you might want
to learn them. Bear in mind, the only requirements are HTML and Cascading
Style Sheets. Where you draw the line after that is up to you.
HTML/XHTML
HTML (HyperText Markup Langage) is the language used to create web page
documents. The updated version, XHTML (eXtensible HTML) is essentially
the same language with stricter syntax rules. We’ll get to the particulars of
what makes them different in Chapter 10, Understanding the Standards. It is
common to see HTML and XHTML referred to collectively as (X)HTML, as
I will do throughout this book when both apply.
(X)HTML is not a programming language; it is a markup language, which
means it is a system for identifying and describing the various components of
a document such as headings, paragraphs, and lists. You don’t need program-
ming skills—only patience and common sense—to write (X)HTML.
Everyone involved with the Web needs a basic understanding of how HTML
works. The best way to learn is to write out some pages by hand, as we will
be doing in the exercises in this book.
If you end up working in web production, you’ll live and breathe (X)HTML.
Even hobbyists will benefit from knowing what is going on under the hood.
The good news is that it’s simple to learn the basics.
Web-related programming
“languages” in order of increasing
complexity:

HTML/XHTML
Style sheets
JavaScript/DOM scripting
Server-side scripting
XML
Java






A t A G l A n c e
It is common to see HTML
and XHTML referred to
collectively as (X)HTML.
The World Wide Web Consortium
The World Wide Web Consortium (called the W3C for short) is the organization
that oversees the development of web technologies. The group was founded in
1994 by Tim Berners-Lee, the inventor of the Web, at the Massachusetts Institute of
Technology (MIT).
In the beginning, the W3C concerned itself mainly with the HTTP protocol and the
development of the HTML. Now, the W3C is laying a foundation for the future of the
Web by developing dozens of technologies and protocols that must work together
in a solid infrastructure.
For the definitive answer on any web technology question, the W3C site is the place
to go:
www.w3.org
For more information on the W3C and what they do, see this useful page:
www.w3.org/Consortium/

Part I: Getting Started
10
Do I Need to Learn Java?
CSS (Cascading Style Sheets)
While (X)HTML is used to describe the content in a web page, it is Cascading
Style Sheets (CSS) that describe how you want that content to look. In the
web design biz, the way the page looks is known as its presentation. CSS is
now the official and standard mechanism for formatting text and page lay-
outs.
CSS also provides methods for controlling how documents will be presented
in media other than the traditional browser on a screen, such as in print and
on handheld devices. It also has rules for specifying the non-visual presen-
tation of documents, such as how they will sound when read by a screen
reader.
Style sheets are also a great tool for automating production, because you can
make changes to all the pages in your site by editing a single style sheet docu-
ment. Style sheets are supported to some degree by all modern browsers.
Although it is possible to publish web pages using (X)HTML alone, you’ll
probably want to take on style sheets so you’re not stuck with the browser’s
default styles. If you’re looking into designing web sites professionally, profi-
ciency at style sheets is mandatory.
Style sheets are discussed further in Part III.
JavaScript/DOM scripting
Despite its name, JavaScript is not at all related to Java. JavaScript is a script-
ing language that is used to add interactivity and behaviors to web pages,
including these (just to name a few):
Checking form entries for valid entries
Swapping out styles for an element or an entire site
Making the browser remember information about the user for the next
time they visit

JavaScript is a language that is commonly used to manipulate the elements
on the web page or certain browser window functions. There are other web
scripting languages, but JavaScript (also called ECMAScript) is the standard
and most ubiquitous.
You may also hear the term DOM scripting used in relation to JavaScript.
DOM stands for Document Object Model, and it refers to the standard-
ized list of web page elements that can be accessed and manipulated using
JavaScript (or another scripting language). DOM scripting is an updated term
for what used to be referred to as DHTML (Dynamic HTML), now consid-
ered an obsolete approach.
Writing JavaScript is programming, so it may be time-consuming to learn if
you have no prior programming experience. Many people teach themselves
•
•
•
The Web Design
Layer Cake
Contemporary web design is
commonly visualized as being made
up of three separate “layers.”
The content of the document with
its (X)HTML markup makes up
the
Structure Layer
. It forms the
foundation upon which the other
layers may be applied.
Once the structure of the document
is in place, you can add style sheet
information to control how the

content should appear. This is called
the
Presentation Layer
.
Finally, the
Behavior Layer
includes
the scripts that make the page an
interactive experience.
N ot e
When this book says “style sheets” it
is always referring to Cascading Style
Sheets, the standard style sheet language
for the World Wide Web.
Do I Need to Learn Java?
Chapter 1, Where Do I Start
11
JavaScript by reading books and following and modifying existing examples.
Most web-authoring tools come with standard scripts that you can use right
out of the box for common functions.
If you want to be a professional web developer, JavaScript is the first scripting
language you should learn. However, plenty of designers rely on developers to
add JavaScript behaviors to their designs. So while JavaScript is useful, learn-
ing to write it is not mandatory for all web designers. Teaching JavaScript
is outside the scope of this book; however, Learning JavaScript by Shelley
Powers (O’Reilly, 2006) is certainly a good place to start if you want to learn
more.
Server-side programming
Some web sites are collections of static (X)HTML documents and image files,
but most commercial sites have more advanced functionality such as forms

handling, dynamically generated pages, shopping carts, content management
systems, databases, and so on. These functions are handled by special web
applications running on the server. There are a number of scripting and pro-
gramming languages that are used to create web applications, including:
CGI Scripts (written in C+, Perl, Python, or others)
Java Server Pages (JSPs)
PHP
VB.NET
ASP.NET
Ruby on Rails
Developing web applications is programmer territory and is not expected of all
web designers. However, that doesn’t mean you can’t offer such functionality to
your clients. It is possible to get shopping carts, content management systems,
mailing lists, and guestbooks as prepackaged solutions, without the need to
program them from scratch.
XML
If you hang around the web design world at all, you’re sure to hear the acro-
nym XML (which stands for eXtensible Markup Language). XML is not a
specific language in itself, but rather a robust set of rules for creating other
markup languages.
To use a simplified example, if you were publishing recipes, you might use
XML to create a custom markup language that includes the elements <ingre-
dient>, <instructions>, and <servings> that accurately describe the types of
information in your recipe documents. Once labeled correctly, that informa-
tion can be treated as data. In fact, XML has proven to be a powerful tool for
•
•
•
•
•

•
Ajax for
Applications
The latest web technique to create
a big stir is
Ajax
, which stands for
Asynchronous JavaScript and
XML
.
Ajax is a technique for creating
interactive web applications. The
significant advantage to using
Ajax for web applications is that it
allows the content on the screen to
change instantly, without refreshing
the whole page. This makes using
the application more like a desktop
program than a web page because
controls react instantly, without all
that pesky waiting for server calls
and page redraws.
As a beginner, you aren’t likely to
be writing Ajax-based applications
right off the bat, but it is useful to
be familiar with what it is and what
it can do.
To learn more, I recommend
searching for “Ajax” at
Wikipedia.

org
. The Ajax listing provides a solid
explanation as well as a list of links to
Ajax resources.
Part I: Getting Started
12
What Do I Need to Buy?
sharing data between applications. Despite the fact that XML was developed
with the Web in mind, it has actually had a larger impact outside the web
environment because of its data-handling capabilities. There are XML files
working behind the scenes in an increasing number of software applications,
such as Microsoft Office, Adobe Flash, and Apple iTunes.
Still, there are a number of XML languages that are used on the Web. The most
prevalent is XHTML, which is HTML rewritten according the the stricter rules
of XML. There is also RSS (Really Simple Syndication or RDF Site Summary)
that allows your content to be shared as data and read with RSS feed readers,
SVG (Scalable Vector Graphics) that uses tags to describe geometric shapes,
and MathML that is used to describe mathematical notation.
As a web designer, your direct experience with XML is likely to be limited
to authoring documents in XHTML or perhaps adding an RSS feed to a web
site. Developing new XML languages would be the responsibility of program-
mers or XML specialists.
Java
Although Java can be used for creating small applications for the Web
(known as “applets”), it is a complete and complex programming language
that is typically used for developing large, enterprise-scale applications. Java
is considered one of the “big guns” and is overkill for most web site needs.
Learn Java only if you want to become a Java programmer. You can live your
life as a web designer without knowing a lick of Java (most web designers
and developers do).

What Do I Need to Buy?
It should come as no surprise that professional web designers require a fair
amount of gear, both hardware and software. One of the most common
questions I’m asked by my students is, “What should I get?” I can’t tell you
specifically what to buy, but I will provide an overview of the typical tools
of the trade.
Bear in mind that while I’ve listed the most popular commercial software
tools available, many of them have freeware or shareware equivalents which
you can download if you’re on a budget (try CNET’s Download.com). With
a little extra effort, you can get a full web site up and running without big
cash.
What Do I Need to Buy?
Chapter 1, Where Do I Start
13
Equipment
For a comfortable web site creation environment, I recommend the following
equipment:
A solid, up-to-date computer. Windows, Linux, or Macintosh is fine.
Creative departments in professional web development companies tend
to be Mac-based. Although it is nice to have a super-fast machine, the
files that make up web pages are very small and tend not to be too taxing
on computers. Unless you’re getting into sound and video editing, don’t
worry if your current setup is not the latest and greatest.
Extra memory. Because you’ll tend to bounce between a number of applica-
tions, it’s a good idea to have enough RAM installed on your computer
that allows you to leave several memory-intensive programs running at
the same time.
A large monitor. While not a requirement, a large or high-resolution moni-
tor makes life easier. The more monitor real estate you have, the more
windows and control panels you can have open at the same time. You can

also see more of your page to make design decisions.
Just make sure if you’re using a high-resolution monitor (1280 × 1024 or
1600 × 1200), that you design for users with smaller monitors in mind.
Most professional web sites these days are designed to fit in an 800 ×
600 monitor as the lowest common denominator. Also keep in mind that
when working in high resolution, the text and graphics may look smaller
to you than to users with lower resolutions or larger pixel size. Be sure to
take a look at your pages under a variety of viewing conditions.
A second computer. Many web designers find it useful to have a test
computer running a different platform than the computer they use for
development (i.e., if you design on a Mac, test on a PC). Because browsers
work differently on Macs than on Windows machines, it’s critical to test
your pages in as many environments as possible, and particularly on the
current Windows operating system. If you are a hobbyist web designer
working at home, check your pages on a friend’s machine.
A scanner and/or digital camera. If you anticipate making your own graph-
ics, you’ll need some tools for creating images or textures. I know a
designer who has two scanners: one is the “good” scanner, and the other
he uses to scan things like dead fish and rusty pans. Because web graph-
ics are low resolution, you don’t need a state-of-the-art, mega-pixel digital
camera to get decent results.
Software
There’s no shortage of software available for creating web pages. In the early
days, we just made do with tools originally designed for print. Today, there are
wonderful tools created specifically with web design in mind that make the
Run Windows on
Your Mac
If you have a Macintosh computer
with an Intel chip, you don’t need
a separate computer to test in a

Windows environment. It is now
possible to run Windows right on
your Mac.
Apple offers the free Boot Camp, as
part of the Leopard OS X release,
that allows you to switch to
Windows on reboot.
There is also Parallels Desktop for
Mac, a commercial program that
allows you to toggle between
operating systems easily. For more
information see
www.parallels.com
.
Both options require that you
purchase a copy of Microsoft
Windows, but it sure beats buying a
whole machine.
Part I: Getting Started
14
What Do I Need to Buy?
process more efficient. Although I can’t list every available software release
(you can find other offerings as well as the current versions of the following
programs in software catalogs), I’d like to introduce you to the most common
and proven tools for web design. Note that you can download trial versions
of many of these programs from the company web sites, as listed in the At a
Glance: Popular Web Design Software sidebar later in this chapter.
Web page authoring
Web-authoring tools are similar to desktop publishing tools, but the end
product is a web page (an (X)HTML file and its related style sheet and image

files). These tools provide a visual “WYSIWYG” (What You See Is What You
Get; pronounced “whizzy-wig”) interface and shortcuts that save you from
typing repetitive (X)HTML and CSS. The following are some popular web-
authoring programs:
Adobe (previously Macromedia) Dreamweaver. This is the industry stan-
dard due to its clean code and advanced features.
N ot e
Since acquiring Dreamweaver, Adobe has discontinued GoLive, its own advanced
WYSIWYG editor. As of this writing, the last version, CS2, is still available for pur-
chase.
Microsoft Expression Web (Windows only). Part of Microsoft’s suite of
professional design tools, MS Expression Web boasts standards-compli-
ant code and CSS-based layouts. Microsoft no longer offers its previous
web editor, FrontPage, which was notorious for proprietary and sloppy
code.
Nvu (Linux, Windows, and Mac OS X). Don’t want to pay for a WYSIWYG
editor? Nvu (pronounced N-view, for “new view”) is an open source tool
that matches many of the features in Dreamweaver, yet is downloadable
for free at nvu.com.
HTML editors
HTML editors (as opposed to authoring tools) are designed to speed up the
process of writing HTML by hand. They do not allow you edit the page visu-
ally as WYSIWYG authoring tools (listed previously) do. Many professional
web designers actually prefer to author HTML documents by hand, and they
overwhelmingly recommend the following four tools:
TextPad (Windows only). TextPad is a simple and inexpensive plain-text
code editor for Windows.
What Do I Need to Buy?
Chapter 1, Where Do I Start
15

Adobe (Macromedia) HomeSite (Windows only). This tool includes short-
cuts, templates, and even wizards for more complex web page authoring.
BBEdit by Bare Bones Software (Macintosh only). Lots of great shortcut
features have made this the leading editor for Mac-based web develop-
ers.
TextMate by MacroMates (Macintosh only). This advanced text editor fea-
tures project management tools and an interface that is integrated with
the Mac operating system. It is growing in popularity because it is easy to
use, feature-rich, and inexpensive.
Graphics software
You’ll probably want to add pictures to your pages, so you will need an image-
editing program. We’ll look at some of the more popular programs in greater
detail in Part IV. In the meantime, you may want to look into the following
popular web graphics–creation tools:
Adobe Photoshop. Photoshop is undeniably the industry standard for image
creation in both the print and web worlds. If you want to be a professional
designer, you’ll need to know Photoshop thoroughly.
Adobe (Macromedia) Fireworks. This web graphics program combines a
drawing program with an image editor and vector tools for creating illus-
trations. It also features advanced tools for outputting web graphics.
Adobe Photoshop Elements. This lighter version of Photoshop is designed
for photo editing and management, but some hobbyists may find that it
has all the tools necessary for putting images on web pages.
Adobe Illustrator. This vector drawing program is often used to create illus-
trations. You can output web graphics directly from Illustrator, or bring
them into Photoshop for additional fine-tuning.
Corel Paint Shop Pro (Windows only). This full-featured image editor is
popular with the Windows crowd, primarily due to its low price (only $99
at the time of this printing).
Multimedia tools

Because this is a book for beginners, I won’t focus on advanced multimedia
elements; however, it is still useful to be aware of the software that is available
to you should you choose to follow that specialty:
Adobe (Macromedia) Flash. This is the hands-down favorite for adding
animation, sound, and interactive effects to web pages due to the small
file size of Flash movies.