Preface
What is a Browser?
Who Should Read This Book
What You’ll Learn from This Book
How You’ll Learn to Build Your Website
HTML, Markup, CSS — Welcome to Your First Bits of Jargon!
Building the Example Site
What This Book Won’t Tell You
What’s in This Book
Where to Find Help
The SitePoint Forums
The Book’s Website
The SitePoint Newsletters
The SitePoint Podcast
Your Feedback
Acknowledgements
Conventions Used in This Book
Markup Samples
Tips, Notes, and Warnings
1. Setting Up Shop
The Basic Tools You Need
Windows Basic Tools
Mac OS X Basic Tools
Beyond the Basic Tools
Windows Tools
Mac OS X Tools
Not Just Text, Text, Text
Windows Tools
Mac OS X Tools
Online Tools
Creating a Spot for Your Website
Windows
Mac OS X
Summary
2. Your First Web Pages
Nice to Meet You, HTML
Anatomy of a Web Page
Viewing the Source
Basic Requirements of a Web Page
The Doctype
The html Element
The head Element
The title Element
meta Elements
Other head Elements
The body Element
The Most Basic Web Page in the World
Headings and Document Hierarchy
Paragraphs
For People Who Love Lists
Commenting Your HTML
Symbols
Diving into Our Website
The Home Page: the Starting Point for All Websites
Splitting Up the Page
Linking Between Our New Pages
The blockquote (Who said that?)
The cite Element
strong and em
Taking a Break
Summary
3. Adding Some Style
What is CSS?
Inline Styles
Adding Inline Styles
The span Element
Embedded Styles
Jargon Break
Why Embedded Styles Are Better Than Inline Styles
External stylesheets
Why External Stylesheets Are Better Than Embedded Styles
Creating an External CSS File
Linking CSS to a Web Page
Starting to Build Our Stylesheet
Stylish Headings
A Mixture of New Styles
A New Look in a Flash!
A Beginner’s Palette of Styling Options
Recap: the Style Story so Far
Looking at Elements in Context
Contextual Selectors
Grouping Styles
Which Rule Wins?
Recapping Our Progress
Styling Links
Class Selectors
Styling Partial Text Using span
Summary
4. Shaping Up Using CSS
Block-level Elements versus Inline Elements
Block-level Elements
Inline Elements
Inline Begets Inline
Inline Elements Can Never Contain Block-level Elements
Styling Inline and Block-level Elements
Sizing Up the Blocks
Setting a Width
Setting a Height
Adding Borders to Block-level Elements
Example Borders
Styling Individual Sides of an Element
Shorthand Border Styles
Border Styles You Can Use
Shaping and Sizing Our Diving Site
Adding Padding
Introducing Padding to the Project Site
Margins
The Box Model
Positioning Elements Anywhere You Like!
Showing the Structure
Absolute Positioning
Other Layout Options
More Absolute Positioning
Relative Positioning
Floated Positioning
Styling Lists
Summary
5. Picture This! Using Images on Your Website
Inline Images
Anatomy of the Image Element
Web Accessibility
JPEG versus GIF versus PNG
Transparency
PNG: King of Transparency
Adding an Image Gallery to the Site
Updating the Navigation
Adding the New Gallery Page
Adding the First Image
Formatting the Picture Using CSS
Captioning the Picture
Basic Image Editing
Image Cropping
Special Effects
Resizing Large Images
Other Software
Filling up the Gallery
Sourcing Images for Your Website
Background Images in CSS
Repeated Patterns
Nonrepeating Images
Shorthand Backgrounds
Fixed Heights and Widths
Setting a Background for Our Navigation
Summary
6. Tables: Tools for Organizing Data
What is a Table?
Anatomy of a Table
Styling the Table
Borders, Spacing, and Alignment
Making Your Tables Accessible
Linearization
summary
Captioning Your Table
Adding an Events Table
Stylish Table Cells
Advanced Tables
Merging Table Cells
Advanced Accessibility
Summary
7. Forms: Interacting with Your Audience
Anatomy of a Form
A Simple Form
The Building Blocks of a Form
The form Element
The fieldset and legend Elements
The label Element
The input Element
The select Element
The textarea Element
Submit Buttons
The Default Control Appearance
Building a Contact Page
Editing the Contact Us Page
Adding a form and a fieldset Element
Styling fieldset and legend with CSS
Adding Text Input Controls
Tidying Up label Elements with CSS
Adding a select Element
Adding a textarea Element
Adding Radio Buttons and Checkboxes
Completing the Form: a Submit Button
Processing the Form
Signing Up for Form Processing
Inserting the Form Code
Feedback By Email
Summary
8. Interacting with Social Media
But Facebook is the Internet, right?
Go Where the Audience Is
A Two-pronged Attack: Facebook and Twitter
Setting Up a Facebook Page
Adding a Like Box to Your Site
Let’s Sprinkle on Some Twitter Glitter
Adding Your Twitter Updates to the Site
Getting a Follow Button
Updating from a Twitter Client on Your Smartphone
But the Page Looks Really Messy Now!
Get Twitter to Update Facebook to Update Your Site
Now the Training Wheels Are Off …
Get Smart!
Summary
9. Launching Your Website
The Client—Server Model
Web Hosting Jargon
Hosting Your Website—Finding Server Space
Free Hosting—with a Catch!
Free Hosting—with a Domain Name at Cost
What is Web Forwarding?
The Downsides of Web Forwarding
Paying for Web Hosting
Hosting Essentials
FTP Access to Your Server
Adequate Storage Space
A Reasonable Bandwidth Allowance
Hosting Nice-to-haves
Email Accounts
Server Side Includes (SSIs)
Support for Scripting Languages and Databases
Pre-flight Check: How Do Your Pages Look in Different Browsers?
Uploading Files to Your Server
FTP Settings
Uploading with FileZilla for Windows
Uploading with Cyberduck—Mac OS X
Other Uploading Tools
Where’s Your Site At?
Checking Links
Validating Your Web Pages
Promoting Your Website
Submit Your Website to Search Engines
Tell Your Friends and Colleagues
Craft an Email Signature with Your Website Details
Post on a Related Forum
Link Exchange
Summary
10. Enhancing the Site with HTML5 and CSS3
HTML5: A Brief History
CSS3 —CSS2 —what’s the difference?
CSS3: Not Yet Universally Supported
The Good News on CSS3
Look at All Those Sharp, Pointy Corners!
The Details in the Shadows
From box-shadow to text-shadow
We Don’t Serve Your Type Around Here!
Other CSS3 Features to be Aware of
IE as a Second-class Citizen
Summary
11. Adding Interactivity with jQuery
JavaScript? jQuery? What’s the difference?
Standard JavaScript versus jQuery: A Simple Example
How do I get jQuery and use it?
Hang On a Moment!
jQuery: Primed and Ready For Action
Using jQuery on the Project Site
Setting Up References to jQuery
Adding Default Form Value
Showing the Picture Gallery’s Captions on Hover
Summary
12. What to Do When Things Go Wrong
Prevention
Keep Multiple Browsers Open While Developing
Validate HTML and CSS as You Go
Learn About Known Browser CSS Bugs
Prepare Your Browser for Battle—with Extensions!
Inspecting Problems with Firebug
Web Developer Toolbar
Disable CSS
Disable JavaScript
Outline Elements on the Page
Hide Images or Reveal alt Attributes
View Information about CSS and JavaScript
And So Much More …
How to use XRAY
Summary
13. Pimp My Site: Cool Stuff You Can Add for Free
Getting the Low-down on Your Visitors
Choosing a Statistics Service
Registering a Google Account
Adding the Statistics Code to Your Web Pages
A Search Tool for Your Site
Searching by Genre
Enhancing Search Further with jQuery
Discussion Forums
Summary
14. Where to Now? What You Could Learn Next
Improving Your HTML
The Official Documentation
Other Useful HTML Resources
Advancing Your CSS Knowledge
The Official Documentation
The Ultimate CSS Reference
HTML Dog
CSS3.info
CSS Discussion Lists
The CSS Discuss List’s Companion Site
Learning JavaScript
Becoming a jQuery Guru
Improving Website Performance
Learning Server-side Programming
Scripting Languages in Brief
Learning PHP
Summary
Index
· · · · · · (
收起)
