| |
| |
| About the Author | |
| |
| |
| About the Technical Reviewer | |
| |
| |
| About the Cover Image Designer | |
| |
| |
| Introduction | |
| |
| |
| |
| A New Kind of Web Design | |
| |
| |
| About the Internet | |
| |
| |
| A brief history of web design | |
| |
| |
| Creating a website | |
| |
| |
| What is the purpose of the website? | |
| |
| |
| Who will visit the site? | |
| |
| |
| Is there a client involved, and what are its needs? | |
| |
| |
| What content will the site contain? | |
| |
| |
| How will the site be structured? | |
| |
| |
| When is the deadline? | |
| |
| |
| Gathering and organizing content | |
| |
| |
| Creating a site map | |
| |
| |
| Introducing web standards | |
| |
| |
| XHTML | |
| |
| |
| CSS | |
| |
| |
| Summary | |
| |
| |
| |
| Getting Started with Dreamweaver | |
| |
| |
| What is Dreamweaver? | |
| |
| |
| Creating a new document-the Start Page | |
| |
| |
| Choosing a document to work with | |
| |
| |
| The Dreamweaver interface | |
| |
| |
| What's new? | |
| |
| |
| Menus | |
| |
| |
| Insert bar | |
| |
| |
| Exercise: Customizing favorite objects | |
| |
| |
| The document window | |
| |
| |
| Design view | |
| |
| |
| Resizing windows | |
| |
| |
| Estimating download times | |
| |
| |
| Zooming in and out in Design view | |
| |
| |
| Code view | |
| |
| |
| Split (Design and Code) view | |
| |
| |
| Document window menus | |
| |
| |
| The Properties panel | |
| |
| |
| Other panels | |
| |
| |
| Panel groups | |
| |
| |
| Web page editing preferences | |
| |
| |
| Setting up preview browsers | |
| |
| |
| Keyboard shortcuts | |
| |
| |
| Summary | |
| |
| |
| |
| Setting Up a Website | |
| |
| |
| Defining a site in Dreamweaver | |
| |
| |
| Exercise: How to set up your website | |
| |
| |
| The Advanced tab | |
| |
| |
| Editing and uploading files | |
| |
| |
| Summary | |
| |
| |
| |
| Web Page Essentials | |
| |
| |
| Anatomy of a web page | |
| |
| |
| Dreamweaver defaults | |
| |
| |
| Defining the document's character set | |
| |
| |
| Changing the page's title | |
| |
| |
| Editing the head section | |
| |
| |
| Adding keywords and a description | |
| |
| |
| Adding other meta elements | |
| |
| |
| Attaching JavaScript documents | |
| |
| |
| Attaching CSS files | |
| |
| |
| Understanding CSS | |
| |
| |
| The rules of CSS | |
| |
| |
| Tag selectors | |
| |
| |
| Class selectors | |
| |
| |
| ID selectors | |
| |
| |
| Grouped selectors | |
| |
| |
| Contextual selectors | |
| |
| |
| The cascade | |
| |
| |
| Working with CSS | |
| |
| |
| Creating and editing a CSS style | |
| |
| |
| Applying a style | |
| |
| |
| Setting default margins for a web page | |
| |
| |
| Adding backgrounds to web pages | |
| |
| |
| Using CSS to add backgrounds to web pages | |
| |
| |
| Creating Web page backgrounds | |
| |
| |
| Striped background tiles | |
| |
| |
| Drop shadows | |
| |
| |
| Applying watermarks | |
| |
| |
| Adding comments | |
| |
| |
| Adding Design Notes | |
| |
| |
| Summary | |
| |
| |
| |
| Working with Text | |
| |
| |
| Semantic markup | |
| |
| |
| Adding text elements | |
| |
| |
| Creating paragraphs, line breaks, and headings | |
| |
| |
| Specifying preformatted text | |
| |
| |
| Making text bold and italic | |
| |
| |
| Aligning text | |
| |
| |
| Styling text elements | |
| |
| |
| Using the Properties panel to style text | |
| |
| |
| Using the CSS Styles panel to style text | |
| |
| |
| Exercise: Applying styles to multiple elements and selections | |
| |
| |
| Working with lists | |
| |
| |
| Creating a list | |
| |
| |
| Changing a list's type | |
| |
| |
| Exercise: Styling lists | |
| |
| |
| Creating inline lists | |
| |
| |
| Text styling examples | |
| |
| |
| Sizing text: pixels versus keywords | |
| |
| |
| Exercise: Styling headings and paragraphs | |
| |
| |
| Restyling text using the CSS Styles panel | |
| |
| |
| Exercise: Rapidly restyling headings and paragraphs | |
| |
| |
| Exercise: Creating print-like paragraphs | |
| |
| |
| Exercise: Creating drop caps | |
| |
| |
| Exercise: Creating pull quotes | |
| |
| |
| Fixing text sizes in IE 5 for Windows | |
| |
| |
| Cross-platform issues | |
| |
| |
| Summary | |
| |
| |
| |
| Working with Images | |
| |
| |
| Choosing formats for images | |
| |
| |
| JPEG | |
| |
| |
| GIF | |
| |
| |
| Transparent GIFs | |
| |
| |
| PNG | |
| |
| |
| Web image mistakes to avoid | |
| |
| |
| Using graphics for body copy | |
| |
| |
| Not working from original images | |
| |
| |
| Using too little contrast | |
| |
| |
| Resizing images using Dreamweaver | |
| |
| |
| Not balancing quality and file size | |
| |
| |
| Using text overlays | |
| |
| |
| Stealing images and designs | |
| |
| |
| Adding an image to a web page | |
| |
| |
| Editing an image | |
| |
| |
| Changing an image's source | |
| |
| |
| Integrating with Fireworks | |
| |
| |
| Cropping an image | |
| |
| |
| Resizing and resampling an image | |
| |
| |
| Setting brightness, contrast, and sharpening | |
| |
| |
| Creating image maps | |
| |
| |
| Exercise: Adding an image map to your web page | |
| |
| |
| Styling images using CSS | |
| |
| |
| Exercise: Adding borders to all web page images | |
| |
| |
| Exercise: Adding a border to a single image only | |
| |
| |
| Exercise: Wrapping text around an image | |
| |
| |
| Exercise: Styling images using contextual selectors | |
| |
| |
| Exercise: Creating a thumbnails area | |
| |
| |
| Summary | |
| |
| |
| |
| Creating Navigation for Your Website | |
| |
| |
| Navigation types | |
| |
| |
| Inline navigation | |
| |
| |
| Site navigation | |
| |
| |
| Search-based navigation | |
| |
| |
| Creating and targeting links | |
| |
| |
| Absolute links | |
| |
| |
| Relative links | |
| |
| |
| Root-relative links | |
| |
| |
| Targeting links | |
| |
| |
| Exercise: Linking to elsewhere on a web page | |
| |
| |
| Styling links using CSS | |
| |
| |
| Multiple link states: the cascade | |
| |
| |
| Exercise: Creating different link styles in two page areas | |
| |
| |
| Advanced link usage | |
| |
| |
| Exercise: Creating pop-up windows | |
| |
| |
| Exercise: Using links to switch images | |
| |
| |
| Creating navigation bars | |
| |
| |
| Vertical navigation bars | |
| |
| |
| Exercise: Creating and styling a vertically aligned navigation bar | |
| |
| |
| Exercise: Using JavaScript to create collapsible sections | |
| |
| |
| Removing white space in Internet Explorer | |
| |
| |
| Horizontal navigation bars | |
| |
| |
| Exercise: Creating and styling a horizontal navigation bar | |
| |
| |
| Exercise: Creating a "breadcrumbs" navigation area | |
| |
| |
| Exercise: Creating a horizontal navigation bar with rollover images | |
| |
| |
| Summary | |
| |
| |
| |
| Web Page Layouts | |
| |
| |
| Creating a structure | |
| |
| |
| Box formatting | |
| |
| |
| Creating page layouts in Dreamweaver | |
| |
| |
| Boxouts and sidebars | |
| |
| |
| The float property | |
| |
| |
| Exercise: Creating a boxout | |
| |
| |
| Exercise: Creating a sidebar | |
| |
| |
| Working with columns | |
| |
| |
| Exercise: Creating a two-column layout | |
| |
| |
| Exercise: Adding padding and spacing | |
| |
| |
| Faking column backgrounds | |
| |
| |
| Working with liquid columns | |
| |
| |
| Exercise: Adding padding to liquid columns | |
| |
| |
| Exercise: Creating a three-column layout with fixed sidebars | |
| |
| |
| Exercise: Adding a footer | |
| |
| |
| Working with tables | |
| |
| |
| The Table dialog box | |
| |
| |
| Exercise: Creating and styling a table in Dreamweaver | |
| |
| |
| Adding scrollable areas | |
| |
| |
| Exercise: Using CSS to create a scrolling area | |
| |
| |
| Exercise: Using an iframe to create a scrollable area | |
| |
| |
| Summary | |
| |
| |
| |
| Getting User Feedback | |
| |
| |
| Using mailto: links | |
| |
| |
| Scrambling addresses | |
| |
| |
| Working with forms | |
| |
| |
| Creating a form | |
| |
| |
| Adding controls | |
| |
| |
| Exercise: Adding controls to a form | |
| |
| |
| Adding a fieldset and legend | |
| |
| |
| Styling a form | |
| |
| |
| Sending feedback | |
| |
| |
| Configuring nms FormMail | |
| |
| |
| Multiple recipients | |
| |
| |
| Script server permissions | |
| |
| |
| Sending form data by PHP | |
| |
| |
| Using email to send form data | |
| |
| |
| A layout for contact pages | |
| |
| |
| Summary | |
| |
| |
| |
| Putting It All into Practice | |
| |
| |
| Creating website layouts | |
| |
| |
| Exercise: Creating a layout for an online diary or blog | |
| |
| |
| Exercise: Creating a fixed-width, businesslike layout | |
| |
| |
| Exercise: Creating a three-column, liquid website layout | |
| |
| |
| Exercise: Creating an advanced website layout | |
| |
| |
| Introducing templates | |
| |
| |
| Exercise: Creating a template | |
| |
| |
| Exercise: Creating a page based on a template | |
| |
| |
| Exercise: Editing the template | |
| |
| |
| Exercise: Working with embedded templates | |
| |
| |
| Editing template code | |
| |
| |
| Outro | |
| |
| |
| Index | |