Dreamweaver CS5, the missing manual

Dreamweaver CS5.5: The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo are trademarks of O’Reilly Media, Inc.. Recent and upcoming titles include: Access

Trang 3

Dreamweaver

CS5.5

The book that should have been in the box ®

Trang 5

Dreamweaver

CS5.5

David Sawyer McFarland

The book that should have been in the box ®

Trang 6

Dreamweaver CS5.5: The Missing Manual

by David Sawyer McFarland

Printed in the Unites States of America

Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.O’Reilly Media books may be purchased for educational, business, or sales promotional use Online

editions are also available for most titles: http://my.safaribooksonline.com For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com.

Printing History:

June 2011: First Edition

Nutshell Handbook, the Nutshell Handbook logo, the O’Reilly logo, and “The book that should

have been in the box” are registered trademarks of O’Reilly Media, Inc Dreamweaver CS5.5:

The Missing Manual, The Missing Manual logo, Pogue Press, and the Pogue Press logo are

trademarks of O’Reilly Media, Inc

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O’Reilly Media, Inc was aware of a trademark claim, the designations have been printed in caps or initial caps.While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein

ISBN: 978-1-449-39797-5

[M]

Trang 7

Table of Contents

The Missing Credits xxi

Introduction 1

Part One: Building a Web Page Chapter 1: Dreamweaver CS5.5 Guided Tour 21

The Dreamweaver CS5.5 Interface 21

The Document Window 22

The Insert Panel 25

The Files Panel 29

The Property Inspector 30

The Application Bar 31

Organizing Your Workspace 33

Setting Up a Site 39

Creating a Web Page 43

The Dreamweaver Test Drive 47

Phase 1: Getting Dreamweaver in Shape 47

Phase 2: Creating a Website 51

Phase 3: Creating and Saving a Web Page 52

Phase 4: Adding Images and Text 57

Phase 5: Preview Your Work 63

Phase 6: Finishing the Page 67

Chapter 2: Adding Text to Your Web Pages 75

Adding Text in Dreamweaver 75

Adding Special Characters 76

Line Breaks 77

Nonbreaking Spaces 79

Multiple Spaces 80

Adding a Date to Your Page 81

Trang 8

Copying and Pasting Text 82

Simple Copy and Paste 82

Paste Special 83

Pasting Text from Word: The Basic Method 85

Pasting Text with Word Formatting 87

Pasting Excel Spreadsheet Information 88

Importing Word and Excel Documents (Windows) 88

Selecting Text 88

Spell-Checking 91

About Dictionaries 91

Performing the Check 91

Chapter 3: Text Formatting 95

Paragraph Formatting 97

Paragraphs 98

Headlines 99

Preformatted Text 100

Paragraph Alignment 101

Indented Paragraphs 101

Creating and Formatting Lists 102

Bulleted and Numbered Lists 103

Reformatting Bulleted and Numbered Lists 105

Definition Lists 107

Removing and Deleting List Items 109

Text Styles 110

Chapter 4: Introducing Cascading Style Sheets 113

Cascading Style Sheet Basics 114

Why Use CSS? 114

Internal vs External Style Sheets 115

Types of Styles 116

Creating Styles 117

Phase 1: Set Up the Style 117

Phase 2: Defining a Style 121

Creating a Style with the Property Inspector 121

Using Styles 123

Applying a Class Style 124

Removing a Class Style 126

Applying IDs to a Tag 127

Linking to an External Style Sheet 128

Manipulating Styles 129

Editing Styles 129

Deleting a Style 130

Renaming a Class Style 131

Duplicating a Style 133

Trang 9

Text Formatting with CSS 134

Choosing a Font 134

Changing the Font Size 139

Picking a Font Color 142

Adding Bold and Italic 144

Aligning Text 145

CSS Type Properties in the Rule Definition Window 146

Block Properties 148

List Properties 151

Cascading Style Sheets Tutorial 152

Setting Up 153

Creating an External Style Sheet 153

Editing a Style 155

Adding Another Style 158

Creating a Class Style 160

Attaching an External Style Sheet 163

Chapter 5: Links 167

Understanding Links 167

Absolute Links 168

Document-Relative Links 168

Root-Relative Links 169

Link Types in Action 172

Executive Summary 173

Adding a Link 174

Browsing for a File 174

Using the Point-to-File Tool 177

Typing (or Pasting) the URL or Path 178

Using the Hyperlink Object 179

Adding an Email Link 183

Linking Within a Web Page 184

Method 1: Creating a Named Anchor 184

Method 2: Adding an ID 186

Linking to an Anchor or ID 186

Viewing and Hiding Anchors 187

Modifying a Link 188

Changing a Link’s Destination 188

Removing a Link 188

Styling Links 188

CSS and Links 190

Creating a Navigation Menu 192

Adding a Menu 193

Adding, Editing, and Removing Links 195

Changing the Look of the Navigation Menu 197

Trang 10

Link Tutorial 204

Linking to Other Pages and Websites 204

Formatting Links 206

Adding a Navigation Bar 207

Styling the Menu Bar 212

Submenus and Rollover Buttons 216

Chapter 6: Images 221

Adding Images 222

Adding an Image Placeholder 224

Inserting an Image from Photoshop 226

Method 1: Using the Insert Image Object 226

Method 2: Copying and Pasting from Photoshop 233

Modifying an Image 233

Adding an ID to an Image 234

Adding a Text Description to an Image 234

Changing an Image’s Size 236

Some Properties to Avoid 237

Controlling Images with CSS 238

Wrapping Text Around an Image 239

Adding Borders 241

Background Images 243

Editing Graphics 245

Dreamweaver’s Built-In Editing Tools 246

Setting Up an External Editor 249

Editing Smart Objects 251

Editing Images Pasted from Photoshop 254

Optimizing an Image 255

Image Maps 255

Editing a Hotspot’s Properties 257

Rollover Images 258

Tutorial: Inserting and Formatting Graphics 260

Setting Up 260

Adding an Image 261

Inserting a Photoshop File 262

Inserting a Rollover Image 267

Using Background Images 269

Chapter 7: Tables 273

Table Basics 274

Inserting a Table 275

Selecting Parts of a Table 278

Selecting a Table 278

Selecting Rows or Columns 279

Selecting Cells 280

Expanded Table Mode 280

Trang 11

Formatting Tables 280

Aligning Tables 281

Clearing Height and Width Values 282

Resizing a Table 283

Modifying Cell and Row Properties 284

Alignment Properties 284

Table Header 285

A Property to Forget 285

Cell Decoration 285

Setting Cell Dimensions 286

Tips for Surviving Table-Making 287

Adding and Removing Cells 289

Adding One Row or Column 289

Adding Multiple Rows or Columns 290

Deleting Rows and Columns 291

Merging and Splitting Cells 292

Tabular Data 294

Importing Data into a Table 294

Sorting Data in a Table 296

Exporting Table Data 298

Tables Tutorial 298

Adding a Table and Data 299

Modifying the Table 301

Formatting the Table 302

Final Improvements 306

Part Two: Building a Better Web Page Chapter 8: Advanced CSS 313

Compound Selectors 313

Descendent Selectors 315

Styling Groups of Tags 318

Fast Style Editing with the Properties Pane 319

Moving and Managing Styles 323

More About CSS 326

Inheritance 326

The Cascade 329

The Other Side of the CSS Styles Panel 330

Using the Code Navigator 335

Styling for Print 337

Previewing Media Styles in Dreamweaver 339

Tips for Printer Style Sheets 340

Using CSS3 342

The Properties Pane 344

Trang 12

Chapter 9: Page Layout 347

Types of Web Page Layouts 349

Float Layout Basics 351

The Mighty <div> Tag 352

The Insert Div Tag Tool 353

A Simple Example 356

Understanding the Box Model 360

Dreamweaver’s CSS Layouts 365

The Structure of Dreamweaver’s CSS Layouts 369

Modifying Dreamweaver’s CSS Layouts 371

Making General Changes to a CSS Layout 371

Modifying Fixed Layouts 374

Modifying Liquid Layouts 375

Other Styles to Change 376

Absolute Positioning 378

The CSS Positioning Properties 379

Adding an AP Div to Your Page 386

Drawing AP Divs 389

The AP Elements Panel 389

Modifying AP Element Properties 391

Resizing Absolutely Positioned Elements 391

Moving AP Elements 392

Aligning AP Elements 393

Background Image and Color 394

Nesting AP Divs 394

CSS Layout Tutorial 395

Adding Content 399

Fine-Tuning the Layout 400

Adding Styles and Navigation 405

Fiddling with the Footer 407

Chapter 10: Troubleshooting CSS 413

Analyzing CSS with Dreamweaver 413

Editing CSS Properties 415

Analyzing CSS in JavaScript and Server-Side Pages 416

Checking Browser Compatibility 420

Overcoming Common CSS Problems 424

Clearing and Containing Floats 424

Avoiding Float “Drops” 427

Handling Internet Explorer 6 Bugs 429

Double-Margin Bug 429

Other Video Options 707

Part Four: Building a Website Chapter 17: Introducing Site Management 713

The Structure of a Website 714

Setting Up a Site 719

Editing or Removing Sites 724

Exporting and Importing Sites 726

Organizing Site Files 728

Modifying the Files Panel View 729

Adding New Folders and Files 731

Site Assets 737

Viewing the Assets Panel 737

Inserting Assets 739

Favorite Assets 741

Chapter 18: Testing Your Site 745

Site Launch Checklist 745

Previewing Web Pages in BrowserLab 748

BrowserLab Setup 748

Testing Pages in BrowserLab 749

Find and Fix Broken Links 752

Finding Broken Links 753

Fixing Broken Links 756

Listing External Links 757

Orphaned Files 758

Changing a Link Throughout a Site 759

Validating Web Pages 761

Steps for Validating Web Pages 762

Cleaning Up HTML (and XHTML) 764

Site Reporting 767

Download Statistics 770

Trang 17

Chapter 19: Moving Your Site to the Internet 775

Adding a Remote Server 775

Setting Up a Remote Server with FTP or SFTP 777

More Remote Server Options for FTP 781

Setting Up a Remote Server using FTP over SSL/TLS 783

Setting Up a Remote Server over a Local Network 784

Setting Up a Remote Server with WebDAV 785

Setting Up a Remote Server with RDS 786

Advanced Remote Server Settings 786

Transferring Files 788

Moving Files to the Web Server 788

Getting Files from Your Web Server 792

Cloaking Files 794

Check In and Check Out 797

Checking Out Files 798

Checking In Files 802

Synchronizing Site Files 804

Communicating with Design Notes 807

Setting Up Design Notes 808

Viewing Design Notes 810

Organizing the Columns in the Files Panel 810

Creating Custom Columns 812

Part Five: Dreamweaver CS5.5 Power Chapter 20: Snippets and Libraries 819

Snippets Basics 819

Using Snippets 821

Creating Snippets 822

Organizing Snippets 824

Built-In Snippets 825

Library Basics 825

Creating and Using Library Items 827

Adding Library Items to a Page 829

Editing Library Items 830

Renaming Library Elements 831

Deleting Library Elements 832

Snippets and Library Tutorial 832

Creating a Snippet 833

Creating a Library Item 835

Trang 18

Chapter 21: Templates 839

Template Basics 839

Creating a Template 842

Turning a Web Page into a Template 843

Building a Template from Scratch 845

Defining Editable Regions 845

Adding a Basic Editable Region 846

Adding a Repeating Region 848

Repeating Tables 851

Making a Tag Attribute Editable 854

Adding Optional Regions 857

Locking Optional Regions 858

Repeating Optional Regions 858

Optional Editable Regions 859

Advanced Optional Regions 859

Editing and Removing Optional Regions 863

Nested Templates 864

Customizing Nested Templates 867

Using Nested Templates 868

Building Pages Based on a Template 869

Working with Repeating Regions 869

Changing Properties of Editable Tag Attributes 870

Hiding and Showing Optional Regions 871

Applying Templates to Existing Pages 872

Updating a Template 874

Updating Nested Templates 876

Unlinking a Page from a Template 877

Exporting a Template-Based Site 877

Template Tutorial 879

Creating a Template 879

Creating a Page Based on a Template 883

Creating Another Template-Based Page 886

Updating a Template 888

Chapter 22: Find and Replace 891

Find and Replace Basics 892

Basic Text and HTML Searches 892

Phase 1: Determine the Scope of Your Search 893

Phase 2: Specify What to Search For 894

Phase 3: Provide the Replacement Text 895

Phase 4: Choose the Search Settings 895

Phase 5: Take Action 896

Advanced Text Searches 898

Limiting the Search by Tag 898

Limiting a Search by Attribute 899

Advanced Tag Searches 902

A Powerful Example: Adding Alt Text Fast 904

Trang 19

Chapter 23: Customizing Dreamweaver 907

Keyboard Shortcuts 907

Make Your Own Shortcut Set 908

Changing Keyboard Shortcuts 909

Create a Shortcut Cheat Sheet 912

Dreamweaver Extensions 912

Browse the Exchange 913

Find a Good Extension 915

Other Extension Sources 916

Download and Install Extensions 916

Extension Manager 917

Make Your Own Extensions 918

Part Six: Dynamic Dreamweaver Chapter 24: Getting Started with Dynamic Websites 923

Pieces of the Puzzle 925

Understanding Server Models 926

Picking a Server Model 928

Dynamic Websites: The Setup 929

Setting Up a Testing Server 930

Localhost and the Local Site Root Folder 931

Setting Up Dreamweaver 932

Creating a Dynamic Page 937

Databases: A Quick Introduction 939

Tables and Records 939

Relational Databases 941

Loading a Database 942

Connecting to a Database 946

Exploring the Databases Panel 949

Chapter 25: Adding Dynamic Data to Your Pages 953

Retrieving Information 953

Understanding Recordsets 953

Creating Recordsets 954

Filtering Information 957

Comparison Operators for Filters 959

Getting Comparison Values 960

Advanced Recordsets and SQL 966

Reusing Recordsets 972

Editing Recordsets 973

Deleting Recordsets 973

Adding Dynamic Information 974

The Bindings Panel 975

Trang 20

Displaying Multiple Records 979

Creating a Repeating Table 979

Creating a Repeat Region 981

Editing and Removing a Repeat Region 983

Recordset Navigation 984

Recordset Navigation Bar 984

Recordset Navigation Status 986

Master Detail Page Set 988

Passing Information Between Pages 991

Viewing Live Data 994

HTTP Request Settings 995

Navigating Live View 997

Tutorial: Displaying Database Info 998

Creating a Recordset 998

Editing a Recordset and Linking to a Detail Page 1002

Creating Repeating Regions 1005

Building the Detailed Product Page 1007

Filling in the Details 1010

Operators Standing By 1015

Chapter 26: Web Pages that Manipulate Database Records 1019

Adding Data 1019

Dreamweaver’s Record Insertion Form Wizard 1020

Using the Insert Record Behavior 1024

Updating Database Records 1026

The Update Record Form Wizard 1027

The Update Record Server Behavior 1030

Dynamic Form Fields 1034

Dynamic Text Form Fields 1035

Dynamic Checkboxes and Radio Buttons 1036

Dynamic Menus and Lists 1039

Deleting Records 1042

Tutorial: Inserting and Updating Data 1045

Adding an Insert Product Page 1045

Finishing the Insert Form 1052

Building a Page to Edit Database Records 1054

Creating and Linking to the Delete Page 1061

Chapter 27: Advanced Dynamic Site Features 1067

Password-Protecting Web Pages 1067

The Users Table 1068

Creating a Registration Form 1069

Creating the Login Page 1071

The Log Out User Behavior 1074

Protecting Individual Pages 1076

Trang 21

Additional Data Sources 1077

URL Variables 1079

Form Variables 1080

Cookies 1080

Session Variables 1082

Server Variables 1084

Advanced Server Behaviors 1085

Recordset Paging 1086

Show Region Server Behaviors 1087

Tutorial: Authentication 1091

Building a Login Page 1091

Password-Protecting the Administration Pages 1095

Displaying a Portion of a Page to Logged-In Users 1098

Chapter 28: Server-Side XML and XSLT 1101

Understanding Markup Technologies 1102

Creating Dynamic Pages with XSLT and XML 1103

Inserting and Formatting XML 1107

Inserting a Repeat Region 1110

Inserting a Conditional Region 1115

Using Multiple Conditional Regions 1118

Advanced XSLT Tricks 1119

Sorting Data in a Repeat Region 1119

Using XSLT Parameters 1120

Appendix A: Getting Help 1125

Appendix B: Dreamweaver CS5.5, Menu by Menu 1129

Index 1153

Trang 23

The Missing Credits

About the Author

David Sawyer McFarland is president of Sawyer McFarland Media,

Inc., a web development and training company in Portland, Oregon

He’s been building websites since 1995, when he designed an online

magazine for communication professionals He’s served as the

web-master at the University of California at Berkeley and the Berkeley

Multimedia Research Center, and he’s helped build, design, and

pro-gram numerous sites for clients that include Macworld.com, among others.

In addition to building websites, David is a writer, trainer, and instructor He’s taught

web design at the UC Berkeley’s Graduate School of Journalism, the Center for

Elec-tronic Art, the Academy of Art College, and the Art Institute of Portland He

cur-rently teaches in the Multimedia Program at Portland State University He’s written

articles about web design for Practical Web Design, Macworld, and CreativePro.com.

David is also the author of CSS: The Missing Manual and JavaScript: The Missing

Manual.

He welcomes feedback about this book by email at missing@sawmac.com (If you’re

seeking technical help, however, please refer to the sources listed in Appendix A.)

Trang 24

About the Creative TeamPeter McKie (editor) graduated with a master’s degree from Boston University’s

School of Journalism and lives in New York City, where he researches the history

of old houses and, every once in a while, sneaks into abandoned buildings Email:

pmckie@oreilly.com.

Adam Zaremba (production editor) has a master’s degree from the Editorial Institute

at Boston University He lives in Chestnut Hill, Mass., and has learned that there are three things never to discuss with people: religion, politics, and the Great Pumpkin

Ron Strauss (indexer) specializes in the indexing of information technology

publi-cations of all kinds Ron is also an accomplished classical violist and lives in ern California with his wife and fellow indexer, Annie, and his miniature pinscher,

north-Kanga Email: rstrauss@mchsi.com.

Stacie Arellano (proofreader) is a freelance proofreader/copy editor from

Wiscon-sin with a background in marketing and web development When she isn’t editing, she is working on her fantasy adventure graphic novel at TributeWaters.com Email:

Stacie@StacieArellano.com.

Murray R Summers (technical reviewer) is an Adobe Certified Dreamweaver

De-veloper and Community Professional He has co-authored and contributed chapters

to several books on Dreamweaver, been the technical editor for the last six editions

of the Dreamweaver Missing Manual, and presented at multiple national

conferenc-es His company, Great Web Sights, has been active in web development since 1998 Murray lives in southern Delaware with his wife Suzanne One daughter attends

Clemson University, and the other is a skilled web developer (carolinawebcreations.

biz) His two sons live and work in Virginia Beach.

John C Bland II (technical reviewer) is the founder of Katapult Media Inc., which

focuses on desktop, mobile, and web development Through Katapult, John works

diligently on FastKast (http://fastkast.com), which powers numerous low- to profile media players He is a coauthor of ColdFusion Web Application Framework

high-for ColdFusion 9 and Flex 4 in Action As an Adobe Community Professional, John

continues give back to the community that helped mold him into the developer he is

today John blogs regularly at www.johncblandii.com.

Acknowledgments

Thanks to all of those who have helped with this book (and all of my books over the years): my students, colleagues, and the wonderful people at O’Reilly But thanks, most of all, to my mom for all the many gifts she gave me This book is dedicated in loving memory of her

—Dave McFarland

Trang 25

The Missing Manual Series

Missing Manuals are witty, superbly written guides to computer products that don’t

come with printed manuals (which is just about all of them) Each book features a

handcrafted index and cross-references to specific pages (not just chapters)

Recent and upcoming titles include:

Access 2007: The Missing Manual by Matthew MacDonald

Access 2010: The Missing Manual by Matthew MacDonald

Buying a Home: The Missing Manual by Nancy Conner

CSS: The Missing Manual, Second Edition, by David Sawyer McFarland

Creating a Website: The Missing Manual, Third Edition, by Matthew MacDonald

David Pogue’s Digital Photography: The Missing Manual by David Pogue

Droid X: The Missing Manual by Preston Gralla

Dreamweaver CS4: The Missing Manual by David Sawyer McFarland

Dreamweaver CS5: The Missing Manual by David Sawyer McFarland

Dreamweaver CS5.5: The Missing Manual by David Sawyer McFarland

Droid 2: The Missing Manual by Preston Gralla

Droid X: The Missing Manual by Preston Gralla

Excel 2007: The Missing Manual by Matthew MacDonald

Excel 2010: The Missing Manual by Matthew MacDonald

Facebook: The Missing Manual, Third Edition, by E.A Vander Veer

FileMaker Pro 10: The Missing Manual by Susan Prosser and Geoff Coffey

FileMaker Pro 11: The Missing Manual by Susan Prosser and Stuart Gripman

Flash CS4: The Missing Manual by Chris Grover with E.A Vander Veer

Flash CS5: The Missing Manual by Chris Grover

Flash CS5.5: The Missing Manual by Chris Grover

Google Apps: The Missing Manual by Nancy Conner

Google SketchUp: The Missing Manual by Chris Grover

iMovie ’09 & iDVD: The Missing Manual by David Pogue

iMovie ’11 & iDVD: The Missing Manual by David Pogue and Aaron Miller

iPad: The Missing Manual by J.D Biersdorfer

Trang 26

iPhone: The Missing Manual, Fourth Edition, by David Pogue iPhone App Development: The Missing Manual by Craig Hockenberry iPhoto ’09: The Missing Manual by David Pogue and J.D Biersdorfer iPhoto ’11: The Missing Manual by David Pogue and Lesa Snider iPod: The Missing Manual, Ninth Edition, by J.D Biersdorfer and David Pogue JavaScript: The Missing Manual by David Sawyer McFarland

Living Green: The Missing Manual by Nancy Conner Mac OS X: The Missing Manual, Leopard Edition by David Pogue Mac OS X Snow Leopard: The Missing Manual by David Pogue Microsoft Project 2007: The Missing Manual by Bonnie Biafore Microsoft Project 2010: The Missing Manual by Bonnie Biafore Motorola Xoom: The Missing Manual by Preston Gralla Netbooks: The Missing Manual by J.D Biersdorfer Office 2007: The Missing Manual by Chris Grover, Matthew MacDonald, and E.A

Personal Investing: The Missing Manual by Bonnie Biafore Photoshop CS4: The Missing Manual by Lesa Snider Photoshop CS5: The Missing Manual by Lesa Snider Photoshop Elements 8 for Mac: The Missing Manual by Barbara Brundage Photoshop Elements 8 for Windows: The Missing Manual by Barbara Brundage Photoshop Elements 9: The Missing Manual by Barbara Brundage

PowerPoint 2007: The Missing Manual by E.A Vander Veer Premiere Elements 8: The Missing Manual by Chris Grover QuickBase: The Missing Manual by Nancy Conner QuickBooks 2010: The Missing Manual by Bonnie Biafore QuickBooks 2011: The Missing Manual by Bonnie Biafore

Trang 27

Quicken 2009: The Missing Manual by Bonnie Biafore

Switching to the Mac: The Missing Manual, Leopard Edition by David Pogue

Switching to the Mac: The Missing Manual, Snow Leopard Edition by David Pogue

Wikipedia: The Missing Manual by John Broughton

Windows XP Home Edition: The Missing Manual, Second Edition, by David Pogue

Windows XP Pro: The Missing Manual, Second Edition, by David Pogue, Craig Zacker,

and Linda Zacker

Windows Vista: The Missing Manual by David Pogue

Windows 7: The Missing Manual by David Pogue

Word 2007: The Missing Manual by Chris Grover

Your Body: The Missing Manual by Matthew MacDonald

Your Brain: The Missing Manual by Matthew MacDonald

Your Money: The Missing Manual by J.D Roth

Trang 29

Websites continue to evolve, growing in scope and complexity every year,

with new features popping up all the time to make the Web look and

work better Even people building personal websites use various

pro-gramming languages and server technologies to dish up content

Throughout its history, Dreamweaver has managed to keep pace with this changing

landscape, and Dreamweaver CS5.5 is no exception It’s capable of doing more than

any previous version of the program Whether you want to create database-enabled

PHP pages, use Cascading Style Sheets (CSS) for cutting-edge design effects, dip

into the dynamic world of JavaScript, explore HTML 5 and CSS3, build websites

for mobile devices, use content management systems like WordPress or Drupal, or

simply stick to straightforward HTML pages, Dreamweaver has just about all the

tools you need

Any enterprising designer can create web pages, Cascading Style Sheets, and even

Ja-vaScript programs with a simple text editor In fact, Dreamweaver CS5.5’s powerful

text editor lets you handcraft basic text files or complex database-driven pages But

why go to all that trouble when you can use Dreamweaver’s visual approach to

page-building, where you use friendly buttons, dialog boxes, and panels to create beautiful

and complex websites That way, you can let Dreamweaver tackle the bothersome

chore of writing the underlying HTML code, making creating beautiful and complex

websites so much easier Whether you’re new to building web pages or a hard-core,

hand-coding HTML jockey, Dreamweaver is a powerful tool that lets you build

web-sites quickly and efficiently, without compromising the quality of your code

Trang 30

What Dreamweaver Is All About

Dreamweaver is a complete website development and management program It works with web technologies like HTML, XHTML, CSS, JavaScript, and PHP.Dreamweaver’s Cascading Style Sheet support lets you create fast-loading, easily modified pages, while its unique “Spry” technology provides one-click access to complex, interactive layout options like drop-down menus

Dreamweaver also includes plenty of tools for managing websites once you build them You can check for broken links, use templates to streamline site-wide page changes, and reorganize your site in a flash with the program’s site management tools

Note: Get used to the acronym CSS, which you’ll encounter frequently in this book It stands for

Cascad-ing Style Sheets, a set of rules you write that dictate the look of your pages Dreamweaver includes advanced CSS creation, testing, and editing tools.

Dreamweaver’s also a serious tool for creating dynamic (database-driven) websites

You can now turn your company’s database of products into an easily updated online catalog—or turn that cherished recipe collection into an online culinary resource for

an adoring public You can even create web pages that let you update and delete tabase records, while keeping designated areas of your site secure from unauthorized visitors Best of all, Dreamweaver does the programming for you

da-If you’ve never used Dreamweaver before, but you’ve built one or more sites, you won’t have to start over again to use Dreamweaver It happily opens web pages and websites created in other programs without destroying any of your carefully hand-crafted code

Why Dreamweaver?

You can find other web design programs on the market—dozens of them, in fact But Dreamweaver is one of the leaders, thanks to key benefits like these:

• Visual page-building If you’ve spent any time using a text editor to punch

out HTML code for your web pages, you know the tedium involved in adding even a simple photograph When your boss asks you to add her photo to the company home page, you launch your trusty text editor and type in something

like <img src=“images/staff/bigcheese.jpg” width=“100” height=“150” alt=“The

Boss”> Not only is this approach prone to typos, it also separates you from what

you want the page to look like.

Dreamweaver, on the other hand, gives you a visual approach to building web

pages, called Design view If you drag an image to your budding web page in Design view, Dreamweaver displays the picture on the page Just as a word processor displays documents as they’ll look when you print them out, so

Trang 31

Dreamweaver gives you a close approximation of what your page will look like

in a web browser (and Dreamweaver’s Live View feature actually does display

the page in a web browser—and right inside Dreamweaver!)

• Complex interactivity, simply You’ve probably seen web pages where an

im-age (on a navigation bar, for example) lights up or changes appearance when

you move your mouse over it Dynamic effects like this—mouse rollovers,

alert boxes, and navigational pop-up menus—usually require JavaScript

pro-gramming, a language browsers understand While JavaScript can do amazing

things, it requires time and practice to learn

Dreamweaver includes an easy-to-use JavaScript-based technology called the

Spry Framework With Spry, you can easily create interactive, drop-down menus

(Chapter 5), add advanced layout elements like tabbed panels (Chapter 14), and

add sophisticated form validation to prevent site visitors from submitting forms

without the proper information (Chapter 13)

• Solid code Every now and then, even in Dreamweaver, you may want to put

aside the visual view and look at a page’s underlying HTML You may want

to tweak the code that Dreamweaver produces, for example, or wonder how

Dreamweaver codes

Adobe realizes that many professional web developers do a lot of work “in the

trenches,” typing HTML, CSS, and JavaScript code by hand In Dreamweaver,

you can edit its raw HTML to your heart’s content Switching back and forth

between the visual mode—called Design view—and Code view is seamless and,

best of all, nondestructive Unlike many visual web page programs, where

mak-ing a change in the visual mode stomps all over the underlymak-ing HTML,

Dream-weaver respects hand-typed code and doesn’t try to rewrite it (unless you ask

it to)

You can even use “Split view” to see your HTML code side-by-side with a

rep-resentation of your final page, and you can switch between Code and Design

view In addition, Dreamweaver can open many other types of files commonly

used on websites, such as external JavaScript files (.js files), so you don’t have

to switch to another program to work on them Dreamweaver’s “related files”

toolbar lists all JavaScript, CSS, or server-side files the current document uses

For hand-coders, this feature means that editing a page’s CSS or JavaScript is

just a click away (instead of a time-draining File➝Open hunt for that danged

file) Chapter 12 has the full scoop on how Dreamweaver handles writing and

editing code

• Site management tools Rarely will you build just a single web page More

of-ten, you’ll create and edit pages that work together to form part of a website Or

you may be building an entire website from scratch

Either way, Dreamweaver’s site management tools make your job easier They

automate many of the routine tasks every webmaster faces, from managing

links, images, pages, and other media to working with a team of people and

Trang 32

moving your site onto a web server Part 4 of this book looks at how weaver helps you build and maintain websites

Dream-• Database-driven Websites Data makes the world go round Whether you’re a

human-resource records manager or a high school teacher, you probably keep track of a lot of information Today, companies and individuals store reams of information in database systems like MySQL, Microsoft Access, and Oracle 10g Dreamweaver can help you bring that information to life, from retrieving it—such as listing the latest items in your company’s product catalog—to updating and editing it online, without having to learn a lot of programming Part 6 of this book offers a gentle introduction to building dynamic websites

UP TO SPEED

Hand Coding vs WYSIWYG Editors

Creating web pages in a text editor was long considered the

best way to build websites The precise control that

hand-written code gave you over HTML was (and often still is)

seen as the only way to assure quality web pages.

Pro site developers championed hand-coding because

many visual page-building programs add unnecessary

code—code that affects how a page appears and how

quickly it downloads over the Internet.

But hand-coding is time-consuming and error-prone One

typo can render a web page useless.

Fortunately, Dreamweaver creates solid code even in a

visu-al environment Since its earliest incarnation, Dreamweaver

has prided itself on its ability to produce clean HTML and

its tolerance for code created by other programs—including

text editors In fact, Dreamweaver includes a powerful

built-in text-editbuilt-ing mode that lets you freely manipulate the

HTML of a page—or any other code, including JavaScript,

Visual Basic, XML, PHP, and ColdFusion Markup Language.

But the real story is that the code Dreamweaver produces

when you work in Design mode is as solid and

well-written as hand-hewn code Knowing this, feel free to take

advantage of the increased productivity that er’s visual-editing mode brings to your day-to-day work with its one-click objects, instant JavaScript, and simplified layout tools Doing so won’t compromise your code, and will certainly let you finish your next website in record time Honestly, no web design program is really WYSIWYG (“what you see is what you get”) Because every brows-

Dreamweav-er intDreamweav-erprets the HTML language slightly diffDreamweav-erently, web design is more like WYSIRWYGOAGD: “what you see is roughly what you’ll get, on a good day.” That’s why Dream- weaver’s Live View and integration with Adobe Browserlab (a browser-testing service) can help you make sure your

pages really look the way you want them to.

Finally, if you have experience hand-coding HTML and CSS, you’ll be pleasantly surprised by Dreamweaver’s powerful text-editing capabilities In fact, even though Dreamweaver

has a reputation as a visual web page editor, it’s also one

of the best text-editing programs on the market Many provements made in Dreamweaver CS5.5 were designed specifically for people who spend time looking at raw HTML, CSS, JavaScript and PHP code.

im-• Have it your way As if Dreamweaver didn’t have enough going for it, the

pro-gram’s engineers have created a completely customizable product, or, as they

call it, an extensible program Anyone can add to or change Dreamweaver’s

menus, commands, objects, and windows

Trang 33

Suppose, for example, that you hardly ever use any of the commands in the Edit

menu By editing one text file in the Dreamweaver Configuration folder, you

can get rid of unwanted menu items—or even add commands of your own

cre-ation This incredible flexibility lets you customize Dreamweaver to fit the way

you work, and even add features that Adobe’s programmers never imagined

Best of all, the Adobe Exchange website includes hundreds of free and

commer-cial extensions for Dreamweaver See Chapter 23 for details

What’s New in Dreamweaver CS5.5

If you’ve never used Dreamweaver before, see Chapter 1 for the grand tour If you’re

upgrading from Dreamweaver CS3 or some other version, you’ll find that

Dream-weaver CS5.5 offers a host of new features:

• HTML5 is touted by everyone from AT&T to Google to Newsweek as the next

big thing (described in more detail on page 10) It’s the first major change to

HTML in years and promises to make building powerful web applications

eas-ier Dreamweaver CS5.5 provides basic support for HTML5 That means it

un-derstands the new HTML5 tags, and provides code-hinting support as you type

those tags in Code View (code-hinting lets you type a few letters of a tag and

then select the tag you’re after from a pop-up menu—in other words, less

typ-ing, fewer typos, faster web page building.) Unfortunately, code-hinting is only

helpful if you type HTML by hand If you prefer using Design view and clicking

buttons on a user-friendly palette of HTML options, you’ll have to wait for the

next version of Dreamweaver

• CSS3 is, like HTML5, a new (and evolving) standard for web designers It

promises many new formatting controls to make HTML look beautiful,

includ-ing drop shadows for text, rounded corners on boxes, background gradients,

borders made of graphics, and even animated transitions from one set of CSS

properties to another Dreamweaver CS5.5 adds code-hinting for CSS3, and

adds many CSS3 properties to the CSS Styles panel

• Mobile Web Design iPhones, iPads, Android, WebOS, tablets, and other

mo-bile devices are popping up like weeds Web developers need to know not only

what their site looks like in the many different browsers, but also customize

their sites to work on mobile browsers Dreamweaver CS5.5 adds several tools

to help The multiscreen preview feature lets you preview a page at different

resolutions to simulate the small screen of a handheld device, as well as the

larger screen of a desktop computer In addition, Dreamweaver CS5.5’s new

CSS3 “media query” support means that you can easily craft different versions

of a site’s CSS styles to match the display capabilities of different devices For

example, you can apply one set of styles when a visitor uses a browser that has

at least 960 pixels of space to display a page, and a different set of styles when

there’s only 320 pixels of space (such as on a mobile phone)

• Mobile Application Development Dreamweaver CS5.5 includes built-in

sup-port for jQuery Mobile and Phonegap—two programming technologies that

Trang 34

• W3C Validator Dreamweaver CS4 and earlier had a built-in HTML validator

to make sure that your page’s HTML was sound Unfortunately, it didn’t work that well, and Adobe removed it in Dreamweaver CS5 Fortunately, they decid-

ed to bring back an HTML validator in Dreamweaver CS5.5, and this time they used the esteemed validator supplied by the World Wide Web Consortium (the W3C), the group responsible for creating HTML Now you can check a page’s HTML with Adobe’s online validator without leaving Dreamweaver Now you can be sure that your HTML is up to code

• jQuery Code Hinting jQuery is a JavaScript “library”—basically just a bunch of

JavaScript code—that greatly simplifies writing JavaScript programs that work across all major web browsers jQuery is the Web’s most popular JavaScript li-brary, used on about a quarter of all websites To make JavaScript programming with jQuery easier, Dreamweaver CS5.5 adds code-hinting for jQuery to save your tired fingers from excessive typing

HTML, XHTML, CSS, and JavaScript 101

Underneath the hood of any web page—whether it’s your uncle’s “Check out this summer’s fishin’” page or the front door of a billion-dollar online retailer—is noth-ing more than line after line of ordinary typed text You embed simple commands, called tags, within this text Web browsers know how to interpret these tags to prop-erly display pages

When you create a page with tags in them, the document becomes known as an HTML page (for Hypertext Markup Language) HTML is still at the heart of most

of the Web

The HTML code that creates a web page can be as simple as this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www w3.org/TR/html4/loose.dtd">

The first line of code above:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www w3.org/TR/html4/loose.dtd">

Trang 35

is called a “doctype” and it simply identifies what flavor of HTML you used to write

the page There are two common doctypes—HTML 4.01 and XHTML 1.0—and

each has two styles: strict and transitional Dreamweaver can create any of these

types of HTML documents—you simply tell it which flavor you want when you

cre-ate a new web page (see page 43) and Dreamweaver handles the rest

Dreamweaver even lets you use the latest, greatest, and simplest doctype, from

HTML5 It replaces the extraneous code of earlier doctypes with much simpler and

straightforward code:

<!DOCTYPE HTML>

Yep, that’s it HTML5 is intended to be much easier in many ways, and Dreamweaver

CS5.5 provides support for this not-yet-approved, new version of HTML

But no matter which doctype you’re interested in, it’s important that you always use

one, because without it, different browsers display CSS differently, and your pages

will look different depending on your visitor’s browser Today’s browsers support

parts of the cutting-edge HTML5 doctype

Fortunately, you won’t have to worry about doctype compatibility as long as you

cre-ate your pages in Dreamweaver

Of Tags and Properties

In the preceding example—and, indeed, in the HTML code of any web page you

examine—you’ll notice that most commands appear in pairs surrounding a block of

text or other commands

These bracketed commands, like the <p> command that denotes the beginning of a

paragraph, constitute the “markup” part of HTML (hypertext markup language) and

are called tags Sandwiched between brackets, tags are simply instructions that tell a

web browser how to display a page

The starting tag of each pair tells the browser where the instruction begins, and the

closing tag tells it where the instruction ends A closing tag always includes a

for-ward slash (/) after the first bracket symbol (<), so the closing tag for the paragraph

command above is </p>

Fortunately, Dreamweaver can generate all these tags automatically You don’t have

to memorize or even type them in (although many programmers still enjoy doing so

for greater control) Behind the scenes, Dreamweaver’s all-consuming mission is to

convert your visual design into underlying code like this:

• The <html> tag appears once at the beginning of a web page and again (with

an added closing slash) at the end This tag tells a browser that the information

between these two tags is written in HTML, as opposed to some other language

All the contents of the page, including any other tags, appear between these

opening and closing <html> tags

Trang 36

If you were to think of a web page as a tree, the <html> tag would be its trunk Springing from the trunk are two branches that represent the two main parts of any web page: the head of the page and the body

• The head of a web page contains the title of the page (“Izzie’s Mail-Order

Pen-cils”) It may also include other, invisible information (such as search keywords) that browsers and search engines use You surround the head section with opening and closing <head> tags

In addition, the head section can include information that browsers use to mat the page’s HTML and to add interactivity You can store CSS styles and Ja-vaScript code in the head, for example, or you can embed links to external CSS and JavaScript files there In fact, the interactivity you’ll see in Dreamweaver’s Spry widgets (Chapter 14) work with the help of JavaScript code stored in sepa-rate files on a server; the link to these files resides in the page’s head section

for-The body of a web page, identified by its beginning and ending <body> tags,

contains all the information that appears inside a browser window—headlines, text, pictures, and so on When using Dreamweaver’s Design View, the blank white portion of the document window represents the body area It resembles the blank window of a word-processing program

Most of your work with Dreamweaver involves inserting and formatting text, tures, and other objects in the body portion of a document Many tags commonly used in web pages appear within the <body> tag Here are a few:

pic-• You can tell a web browser where a paragraph of text begins with a <p> ing paragraph) tag, and where it ends with a </p> (closing paragraph) tag

(open-• The <strong> tag emphasizes text The text between an opening and closing

<strong> tag shows up as boldface type The HTML snippet <strong>Warning!</strong> would tell a web browser to display the word “Warning!” in bold type

on the screen

• The <a> tag, or anchor tag, creates a link (hyperlink) in a web page A link, of course, can lead anywhere on the Web How do you tell the browser where the link should point? Simply give address instructions to the browser inside the

<a> tags For instance, you might type <a href=“http://www.missingmanuals.

com”>Click here!</a>.

The browser knows that when your visitor clicks the words “Click here!”, it

should go to the Missing Manuals website The href part of the tag is called, in Dreamweaver, a property (you may also hear the term attribute), and the URL (the Uniform Resource Locator, or web address) is the value of that property In this example, http://www.missingmanuals.com is the value of the href property.

Fortunately, Dreamweaver exempts you from having to type any of this code and

provides an easy-to-use window called the Property inspector for adding properties

to your tags and other page elements To create links the Dreamweaver way (read: the easy way), turn to Chapter 5

Trang 37

Note: For a full-fledged introduction to HTML, check out Creating a Website: The Missing Manual For a

primer that’s geared to readers who want to master CSS, pick up a copy of CSS: The Missing Manual And

if you want to add interactivity to your web pages (beyond the cool, ready-to-use features that

Dream-weaver offers), you might be interested in JavaScript: The Missing Manual End of advertisements: now

back to your regularly scheduled book.

XHTML, Too

Like any technology, HTML has evolved over time Although standard HTML has

served its purpose well, it’s always been a somewhat sloppy language Among other

things, it allows uppercase, lowercase, and mixed-case letters in tags (<body> and

<BODY> are both correct, for example) and permits unclosed tags (so that you can

use a <p> tag without a closing </p> tag to create a paragraph) While this flexibility

may make page-writing easier, it also makes life more difficult for web browsers,

smart phones, and other technologies that must interact with data on the Web

Ad-ditionally, HTML doesn’t work with one of the hottest Internet languages: XML, or

Extensible Markup Language (see “Storing Data in an XML File” for a quick intro

to XML)

To keep pace with the times, an improved version of HTML, called XHTML, was

introduced back in 2000 and you’ll find it used frequently on many sites (in fact,

XHTML is just an “XML-ified” version of HTML) Dreamweaver CS5.5 can

cre-ate and work with XHTML files as well as plain HTML If you understand only

HTML, don’t worry—XHTML isn’t a revolutionary new language that takes years to

learn It’s basically HTML with somewhat stricter guidelines For example, here’s the

HTML from “HTML, XHTML, CSS, and JavaScript 101” on page 6:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

Written in XHTML, that code would look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Hey, I am the title of this Web page.</title>

Trang 38

Notice that everything below the <head> is nearly the same as the HTML page The

doctype that begins the page, however, is different from that of the earlier example

It looks basically the same, but, in this case, it merely says that the page uses a ticular brand of HTML called XHTML, and more specifically a type of XHTML called Transitional 1.0 (Don’t worry—Dreamweaver automatically writes all this code when you create a new XHTML page.)

par-As you can see, the XHTML code used to make the page is much like the HTML code To make an XHTML file comply with XML, however, you have to keep a few strict rules in mind:

• Begin the page with a document-type declaration and a namespace That’s

the first few lines in the code above They simply state the type of document you’re writing and point to files on the Web that contain definitions for this type

of file A doctype isn’t actually required for regular HTML, but it is for XHTML However, a document-type declaration (or DTD) is important for both HTML and XHTML since it affects how web browsers display a page—stick with any of the DTDs Dreamweaver writes and you’ll be OK

• Tags and tag attributes must be lowercase Unlike in HTML, typing the tag

<BODY> in an XHTML file is incorrect It must be lowercase, like this: <body>

• Quotation marks are required for tag attributes For example, a link

writ-ten like this: <a href=http://www.missingmanuals.com> is valid in HTML, but doesn’t work in XHTML You have to enclose the value of the href property in quotation marks: <a href=“http://www.missingmanuals.com”>.

• All tags (even empty ones) must be closed To create a paragraph in XHTML,

for example, you must begin with <p> and end with </p>

Of course, as with everything in life, there are exceptions Some tags don’t come

in pairs They’re called self-closing tags, and the line break tag is one example

To indicate a self-closing tag, you must include a backslash at the end of the tag, like this: <br />

If all this seems a bit confusing, don’t worry Dreamweaver automatically follows all these strict XHTML rules, so creating an XHTML page in Design view won’t feel one bit different from creating an old-style HTML page (For more information on cre-ating an XHTML page in Dreamweaver, see “Creating a Web Page” on page 43.) In fact, with just a couple of exceptions, it doesn’t really matter which version of HTML

or XHTML you use—pick one and let Dreamweaver take care of the rest

And HTML5, As Well

When the W3C—the group responsible for many Internet technologies—introduced XHTML, the web development community heralded it as the next big thing, and an intermediate step in the transition to XML as the prime language of the Web Histo-

ry has shown that prediction to be a bit grandiose As it turns out, the complexity of moving to XML has kept browser manufacturers from following the XML path the World Wide Web Consortium laid down In fact, the W3C closed down the XHTML

Trang 39

working group in favor of the new version of HTML, called HTML5—actually a

move away from XML and back to plain old HTML, albeit an enhanced version

of the language Since all browser manufacturers support HTML5 (and since some

browsers already support parts of the standard), HTML5 is the next big thing Even

mainstream news outlets like Time, Newsweek, and CNN routinely drop “HTML5”

into their technology reporting

HTML5 isn’t some radically new technology In fact, unlike XHTML, which was

intended to foster a new way to build web pages, HTML5 is about making sure the

web continues to work as it always has Most of the basics of HTML are still in place;

HTML5 adds a few new elements, meant to support the way web designers currently

build websites In HTML5, the <header> tag, for example, can contain the content

you’d usually find at the top of a page, such as a logo and site-wide navigation links;

the new <nav> tag encloses the set of links used to navigate a site; and the <footer>

tag houses the stuff you usually put at the bottom of a page, like legal notices, email

contacts, and so on

In addition, HTML5 adds new tags that let you insert video and audio into a page,

and new form tags that add sophisticated form elements, like sliders and pop-up

date pickers, as well as built-in browser support for form validation to make sure

visitors correctly fill out your forms Unfortunately, browser support for these new

features isn’t consistent and it’s difficult to use the new tags without some pretty

elaborate workarounds

But new tags are just one small part of the HTML5 story HTML5 originally started

life as a product of the Web Hypertext Application Technology Group (WHATWG),

which wanted to create a version of HTML that provided the tools needed to build

powerful, browser-based applications like Gmail So, much of HTML5 is devoted to

powerful (and complicated) technologies like Canvas (for drawing pictures and

dia-grams on a web page), data storage (for storing information like game scores,

prefer-ences, notes, and so on on a visitor’s computer), drag and drop functionality, “web

workers” for making JavaScript programs run faster and more efficiently, and “web

sockets” for streaming data from a web server All these technologies are promising,

but browser support for them varies In addition, Dreamweaver doesn’t provide any

easy-to-use tools to tap into these complicated technologies, so you’re a few years off

from being able to easily include most HTML5 functionality on your sites

Add Style with Cascading Style Sheets

HTML used to be the only language you needed to create web pages You could

build them with colorful text and graphics, and make words jump out using different

fonts, font sizes, and font colors But today, you can’t add much visual stimulation

to a site without CSS CSS is a formatting language that lets you design pages with

sophisticated layouts and enhanced text It provides site-wide design consistency for

headings and subheads, for example, creates a unique-looking sidebar, adds special

graphics treatment for quotations, and so on

Trang 40

From now on, think of HTML as merely the scaffolding you use to organize a page It helps identify and structure page elements Tags like <h1>, <h2>, and <title> denote

headlines and assign them relative importance: a Heading 1 is more important than

a Heading 2, for example (and can affect how a search engine like Google adds a page

to its search listings) The <p> tag indicates a basic paragraph of information Other tags provide further structural clues: for example, a <ul> tag identifies a bulleted list (to make a list of recipe ingredients more intelligible, for example)

Cascading Style Sheets, on the other hand, add design flair to that highly structured

content, making it more beautiful and easier to read Take a look at the CSS Zen

Gar-den site, for example (www.csszengarGar-den.com) Each of the striking, very different

websites profiled there use the same underlying HTML The only difference among them—and the sole reason they look so different in style and design—is that each uses a different style sheet Essentially, a CSS style is just a rule that tells a browser how to display a particular element on a page—to make an <h1> tag appear orange,

36 pixels tall, and in the Verdana font, for example

But CSS is more powerful than that You use it to add borders, change margins, and even control the exact placement of an element on a page

To be a successful web designer, you need to get to know Cascading Style Sheets You’ll learn more about this exciting technology throughout this book

Add Interactivity with JavaScript

A normal web page—just regular HTML and CSS—isn’t very responsive: about the only interaction visitor have with the page is clicking a link to load a new page JavaScript is a programming language that lets you supercharge your HTML with animation, interactivity, and dynamic visual effects It can also make a web page more useful, by supplying immediate feedback to visitors For example, a JavaScript-powered shopping cart can instantly display a total cost, with tax and shipping, the moment a visitor selects a product to buy; or JavaScript can produce an error message immediately after someone attempts to submit a web form that’s missing information.JavaScript’s main selling point is immediacy It lets web pages respond instantly to your visitors’ actions: clicking a link, filling out a form, or merely moving the mouse around the screen JavaScript doesn’t suffer from the frustrating delay associated with “server-side” programming languages like PHP, which rely on communication between a web browser and a remote web server—in other words, JavaScript doesn’t rely on constantly loading and reloading pages It lets you create pages that look like and respond with the immediacy of a desktop program

If you’ve visited Google Maps (http://maps.google.com), you’ve seen JavaScript in

ac-tion Google Maps lets you zoom in on a map to get a detailed view of streets, and zoom out to get a birds-eye view of how to get across town, the state, or the nation, all the while working from the same page While there have been lots of map sites before Google, they always required reloading multiple web pages (a usually slow process) to get to the information you wanted

Định dạng
Số trang	1.210
Dung lượng	35,21 MB