Rob Haddleston - WEB Design - Teach Yourself Visually+CD [2011, PDF, ENG]

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 2 Getting Started with HTML
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
Link a Style Sheet to a Page ................................. ..146
Use the Cascade ................................................. ..148
Chapter 6 Laying Out Pages
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 7 Adding Tables and Lists
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
Chapter 8 Creating a Page Visually in Dreamweaver
Introduction to Dreamweaver’s Interface ................ ..18O
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 .................................... ..19O
Edit a Photoshop Image in Dreamweaver ................ ..194
Modify CSS ......................................................... ..196
Add New Styles ................................................... ..198
Preview the Page Using Live View .......................... ..2OO
Preview the Page in a Browser .............................. ..201
Preview the Page in Other Browsers Using
Browser Lab ..................................................... ..202
Chapter 9 Adding Interactivity and Multimedia
Introduction to JavaScript and Ajax ...................... ..208
Embed JavaScript in HTML .................................... ..21O
Write a Function ................................................. ..212
Change the Visibility of an Object ......................... ..214
Create a Menu Using Spry ..................................... ..218
Create a Calendar Control with YUI ........................ ..22O
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
Chapter 10 Making Sites Accessible
Understanding Web Standards ............................... ..240
Understanding Web Accessibility ........................... ..242
Add Captions and Summaries to Tables ................... ..244
Create Accessible Table Headings .......................... .. 246
Create Accessible Navigation ................................ ..248
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
Chapter 12 Creating Dynamic Pages
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 ...................................... ..28O
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 .............................. ..29O
Chapter 13 Adding Information from a Database
Understanding Relational Databases ...................... ..294
Create a Database ............................................... ..296
Create a Table .................................................... ..298
Populate the Table with Data ................................ ..3oO
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
Chapter 14 Publishing Your Site and Getting Noticed
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
HTML Colors .......................................... .. 338