Skip to main content

Teach Yourself VISUALLY Web Design

Teach Yourself VISUALLY Web Design

Rob Huddleston

ISBN: 978-1-118-03639-6

Nov 2010

368 pages

Select type: E-Book



The mechanics of Web design made easy for visual learners

An effective Web site combines good graphic design principles with a functional user interface. This colorful, step-by-step guide shows visual learners how to plan, develop, and publish a site, all with easy-to-follow lessons. Each task is illustrated with screen shots accompanied by numbered steps. You’ll learn all the tools and techniques for creating great-looking Web sites that users will love.

  • Good Web design incorporates basic graphic design principles as well as the techniques required to make a site easy to navigate and user-friendly
  • Those who learn best when someone shows them how will quickly get up to speed with the full-color screen shots and step-by-step illustrations in this visual guide
  • Covers planning a site, creating eye-popping content with popular Adobe tools, building in functionality with HTML and CSS, testing the site, taking it live, and keeping it up to date
  • Companion Web site features code and design examples for experimentation

If you find learning easier when someone shows you how to do something, you’ll quickly learn to build Web sites with Teach Yourself VISUALLY Web Design.

Related Resources


Request an Evaluation Copy for this title

Chapter 1: The Tools of Web Design and Planning Your Site.

A Brief History of the Web.

Understanding Browsers.

Visual Design Tools.

Code-based Tools.

Graphics Programs.

Understanding the Importance of Planning Your Site.

Understanding Your Audience.

Gather Your Materials.

Plan Your Navigation Structure.

Plan Your File Structure.

Chapter 2: Getting Started with HTML.

Introduction to HTML.

Create Your First Web Page.

Save Your Web Page.

Preview a Page in a Browser.

Declare Your Document Type.

Add Headings.

Add Paragraphs.

Apply Logical Formatting.

Understanding URLs and File Paths.

Link to Other Pages in Your Site.

Link to Pages on the Web.

Link within a Page.

Link to an E-mail Address.

Link to Other Document Types.

Show Tool Tips for Links.

Chapter 3: Creating Images.

Understanding Image Formats.

Legally Acquiring Stock Images.

Understanding Image Optimization.

Download a Stock Image from the Web.

Get to Know the Photoshop Interface.

Get to Know the Photoshop Elements Interface.

Use Photoshop to Fix Colors.

Crop and Resize an Image in Photoshop.

Save an Image for the Web in Photoshop.

Open an Image for Editing in Photoshop Elements.

Use Photoshop Elements to Fix Colors.

Rotate an Image in Photoshop Elements.

Crop an Image in Photoshop Elements.

Resize an Image in Photoshop Elements.

Save an Image for the Web in Photoshop Elements.

Get to Know the Fireworks Interface.

Get to Know the Illustrator Interface.

Create a Button in Fireworks.

Save an Image for the Web in Fireworks.

Create a Logo in Illustrator.

Save an Illustrator Image for the Web.

Add an Image to Your Web Page.

Make Your Images Accessible.

Use Images as Links.

Chapter 4: Formatting Your Pages.

Introduction to CSS.

Create an Embedded Style Sheet.

Understanding Units of Measurement.

Set the Font and Text Size on Your Page.

Understanding Color on the Web.

Determine a Color Scheme Using Kuler.

Set Text Color.

Set a Background Color.

Add a Background Image.

Control Background Image Tiling.

Position Background Images.

Apply Additional Text Formatting.

Indent and Align Text.

Apply Spacing with Padding.

Control Whitespace with Margins.

Specify Widths.

Add Borders.

Chapter 4: Advanced CSS.

Style Multiple Elements.

Format Text with Spans.

Group Elements with Divs.

Apply Styles with Classes.

Apply Styles with IDs.

Use Contextual Selectors.

Use Pseudo-Elements.

Use Pseudo-Classes.

Create an External Style Sheet.

Link a Style Sheet to a Page.

Use the Cascade.

Chapter 6: Laying Out Pages.

Set Up Your Page for CSS Layouts.

Float Elements.

Use Margins and Padding to Fix Float Problems.

Work with Overflow.

Chapter 7: Adding Tables and Lists.

Add Data Tables.

Format Tables with CSS.

Create Complex Tables.

Add a Header Row.

Add Table Sections.

Add an Unordered List.

Add an Ordered List.

Style Lists.

Chapter 8: Creating a Page Visually in Dreamweaver.

Introduction to Dreamweaver's Interface.

Define a Site in Dreamweaver.

Create a New Document.

Replace the Logo Placeholder.

Replace the Main Content.

Replace the Content in the Sidebar and Footer.

Add Navigation.

Add Images.

Insert a Photoshop Image.

Edit a Photoshop Image in Dreamweaver.

Modify CSS.

Add New Styles.

Preview the Page Using Live View.

Preview the Page in a Browser.

Preview the Page in Other Browsers Using BrowserLab.

Chapter 9: Adding Interactivity and Multimedia.

Introduction to JavaScript and Ajax.

Embed JavaScript in HTML.

Write a Function.

Change the Visibility of an Object.

Create a Menu Using Spry.

Create a Calendar Control with YUI.

Create an Image Gallery with jQuery.

Create Animation Using Flash Professional.

Publish a Flash Movie.

Add a Flash Movie to Your Page in Dreamweaver.

Convert a Video to Flash Video.

Add Flash Video Using Flash Professional.

Add Video with HTML5.

Chapter 10: Making Sites Accessible.

Understanding Web Standards.

Understanding Web Accessibility.

Add Captions and Summaries to Tables.

Create Accessible Table Headings.

Create Accessible Navigation.

Chapter 11: Adding Forms to Your Site.

Create a Form.

Add a Text Field.

Add a Label.

Add Check Boxes.

Add Radio Buttons.

Create a Drop-Down List.

Insert a Text Area.

Add a Button to Your Form.

Group Related Form Elements.

Chapter 12: Creating Dynamic Pages.

Understanding Dynamic Web Applications.

Download and Install WAMP on Windows.

Download and Install MAMP on a Mac.

Create a Basic PHP Page.

Save and Test a PHP Page.

Process Form Data.

Send E-mail with PHP.

Include External Files.

Create Your Own PHP Function.

Chapter 13: Adding Information from a Database.

Understanding Relational Databases.

Create a Database.

Create a Table.

Populate the Table with Data.

Connect PHP to the Database.

Display the Contents of a Table on a Web Page.

Search the Database.

Insert New Data into a Table with PHP.

Chapter 14: Publishing Your Site and Getting Noticed.

Find a Web Host.

Buy a Domain Name.

Publish Your Web Site Using FTP.

Set Up Remote Server Information in Dreamweaver.

Upload Your Files Using Dreamweaver.

Understanding Search Engine Optimization.

Use Meta Tags.

Use Google Webmaster Tools.

Create a Sitemap.

Prevent Pages from Being Listed on Search Engines.

HTML Colors.


Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Chapter 13
Chapter 14