Teach Yourself VISUALLY™ Web Design

Table of Contents
A Brief History of the Web ........................................ 4
Understanding Browsers ............................................ 6
Visual Design Tools .................................................. 8
Code-based Tools ..................................................... 9
Graphics Programs ................................................. 10
Understanding the Importance
of Planning Your Site .......................................... 11
Understanding Your Audience .................................. 12
Gather Your Materials ............................................. 13
Plan Your Navigation Structure ................................ 14
Plan Your File Structure .......................................... 15
Chapter 1 The Tools of Web Design and Planning Your Site
Introduction to HTML ............................................. 18
Create Your First Web Page ...................................... 20
Save Your Web Page ............................................... 22
Preview a Page in a Browser .................................... 24
Declare Your Document Type .................................... 26
Add Headings ........................................................ 28
Add Paragraphs ..................................................... 30
Apply Logical Formatting ........................................ 32
Understanding URLs and File Paths ........................... 34
Link to Other Pages in Your Site ............................... 36
Link to Pages on the Web ........................................ 38
Link within a Page ................................................. 40
Link to an E-mail Address ........................................ 42
Link to Other Document Types ................................. 44
Show Tool Tips for Links ......................................... 46

Understanding Image Formats ................................. 50
Legally Acquiring Stock Images ................................ 51
Understanding Image Optimization .......................... 52
Download a Stock Image from the Web ..................... 54
Get to Know the Photoshop Interface ....................... 58
Get to Know the Photoshop Elements Interface .......... 59
Use Photoshop to Fix Colors .................................... 60
Crop and Resize an Image in Photoshop .................... 62
Save an Image for the Web in Photoshop .................. 64
Open an Image for Editing in Photoshop Elements ...... 66
Use Photoshop Elements to Fix Colors ....................... 68
Rotate an Image in Photoshop Elements ................... 69
Crop an Image in Photoshop Elements ...................... 70
Resize an Image in Photoshop Elements .................... 71
Save an Image for the Web in Photoshop Elements ..... 72
Get to Know the Fireworks Interface ......................... 74
Get to Know the Illustrator Interface ........................ 75
Create a Button in Fireworks .................................... 76
Save an Image for the Web in Fireworks .................... 80
Create a Logo in Illustrator ..................................... 82
Save an Illustrator Image for the Web ....................... 86
Add an Image to Your Web Page .............................. 88
Make Your Images Accessible ................................... 90
Use Images as Links ............................................... 92

Table of Contents
Introduction to CSS ................................................ 96
Create an Embedded Style Sheet .............................. 98
Understanding Units of Measurement .......................100
Set the Font and Text Size on Your Page ..................102
Understanding Color on the Web .............................104
Determine a Color Scheme Using Kuler .....................106
Set Text Color .......................................................108
Set a Background Color ..........................................109
Add a Background Image .......................................110
Control Background Image Tiling .............................112
Position Background Images ...................................113
Apply Additional Text Formatting ............................114
Indent and Align Text ...........................................116
Apply Spacing with Padding ...................................118
Control Whitespace with Margins .............................120
Specify Widths......................................................122
Add Borders .........................................................124
Chapter 4 Formatting Your Pages
Style Multiple Elements .........................................128
Format Text with Spans .........................................130
Group Elements with Divs .......................................132
Apply Styles with Classes .......................................134
Apply Styles with IDs ............................................136
Use Contextual Selectors ........................................138
Use Pseudo-Elements .............................................140
Use Pseudo-Classes ...............................................142
Create an External Style Sheet ................................144

Link a Style Sheet to a Page ...................................146
Use the Cascade ...................................................148
Set Up Your Page for CSS Layouts ............................152
Float Elements......................................................154
Use Margins and Padding to Fix Float Problems .........156
Work with Overflow ...............................................158
Chapter 6 Laying Out Pages
Add Data Tables ....................................................162
Format Tables with CSS ..........................................164
Create Complex Tables ...........................................166
Add a Header Row .................................................168
Add Table Sections ................................................170
Add an Unordered List ...........................................172
Add an Ordered List ..............................................174
Style Lists ............................................................176

Introduction to Dreamweaver’s Interface ..................180
Define a Site in Dreamweaver .................................181
Create a New Document .........................................182
Replace the Logo Placeholder .................................184
Replace the Main Content ......................................185
Replace the Content in the Sidebar and Footer ..........186
Add Navigation.....................................................187
Add Images .........................................................188
Insert a Photoshop Image ......................................190
Edit a Photoshop Image in Dreamweaver ..................194
Modify CSS ...........................................................196
Add New Styles .....................................................198
Preview the Page Using Live View ............................200
Preview the Page in a Browser ................................201
Preview the Page in Other Browsers Using
BrowserLab .......................................................202
Chapter 8 Creating a Page Visually in Dreamweaver
Introduction to JavaScript and Ajax ........................208
Embed JavaScript in HTML ......................................210
Write a Function ...................................................212
Change the Visibility of an Object ...........................214
Create a Menu Using Spry .......................................218
Create a Calendar Control with YUI ..........................220
Create an Image Gallery with jQuery ........................222
Create Animation Using Flash Professional ................226
Publish a Flash Movie ............................................230

Add a Flash Movie to Your Page in Dreamweaver ........231
Convert a Video to Flash Video ................................232
Add Flash Video Using Flash Professional ..................234
Add Video with HTML5 ...........................................236
Understanding Web Standards .................................240
Understanding Web Accessibility .............................242
Add Captions and Summaries to Tables .....................244
Create Accessible Table Headings ............................246
Create Accessible Navigation ..................................248
Chapter 10 Making Sites Accessible
Create a Form .......................................................252
Add a Text Field ...................................................254
Add a Label..........................................................256
Add Check Boxes...................................................258
Add Radio Buttons ................................................260
Create a Drop-Down List .........................................262
Insert a Text Area .................................................264
Add a Button to Your Form .....................................266
Group Related Form Elements .................................268

Understanding Dynamic Web Applications ................272
Download and Install WAMP on Windows ..................274
Download and Install MAMP on a Mac ......................278
Create a Basic PHP Page ........................................280
Save and Test a PHP Page ......................................282
Process Form Data .................................................284
Send E-mail with PHP ............................................286
Include External Files ............................................288
Create Your Own PHP Function ................................290
Chapter 12 Creating Dynamic Pages
Understanding Relational Databases ........................294
Create a Database .................................................296
Create a Table ......................................................298
Populate the Table with Data ..................................300
Connect PHP to the Database .................................302
Display the Contents of a Table on a Web Page ..........304
Search the Database ..............................................308
Insert New Data into a Table with PHP .....................312

Find a Web Host ...................................................318
Buy a Domain Name ..............................................320
Publish Your Web Site Using FTP .............................322
Set Up Remote Server Information in Dreamweaver ....324
Upload Your Files Using Dreamweaver ......................326
Understanding Search Engine Optimization ...............328
Use Meta Tags ......................................................330
Use Google Webmaster Tools ..................................332
Create a Sitemap...................................................334
Prevent Pages from Being Listed on Search Engines ...336
Chapter 14 Publishing Your Site and Getting Noticed
HTML Colors............................................ 338
Index ..................................................... 340