Foundation Web Design With Dreamweaver 8

by Grannell, Craig

• ISBN13: 9781590595671
• ISBN10: 159059567X
• Format: Paperback
• Copyright: 2006-01-23
• Publisher: Apress

Summary

Dreamweaver has the capability to generate dynamic website code using server-side languages like ASP, PHP, and ASP.NET. But this book focuses on the latest version of Dreamweaver in order to create usable, standards- compliant websites using XHTML and CSS. One of the highlights in the upcoming version is much closer, tighter CSS/XHTML. After a quick preamble about the new version of Dreamweaver, and how CSS and XHTML fit into it, author Craig Grannell looks at web design in Dreamweaver in a simplified, task-based manner. The book is rounded off with a case study, showing how to put it all together.

Table of Contents

About the Author	xi
About the Technical Reviewer	xii
About the Cover Image Designer	xiii
Introduction	xv
Chapter 1: A New Kind of Web Design	1	(14)
About the Internet	2	(1)
A brief history of web design	3	(2)
Creating a website	5	(6)
What is the purpose of the website?	5	(2)
Who will visit the site?	7	(1)
Is there a client involved, and what are its needs?	8	(1)
What content will the site contain?	8	(1)
How will the site be structured?	9	(1)
When is the deadline?	9	(1)
Gathering and organizing content	9	(1)
Creating a site map	10	(1)
Introducing web standards	11	(1)
XHTML	11	(1)
CSS	11	(1)
Summary	12	(3)
Chapter 2: Getting Started with Dreamweaver	15	(24)
What is Dreamweaver'	16	(1)
Creating a new document—the Start Page	16	(1)
Choosing a document to work with	17	(1)
The Dreamweaver interface	18	(19)
What's new?	19	(1)
Menus	19	(2)
Insert bar	21	(3)
Exercise: Customizing favorite objects	23	(1)
The document window	24	(8)
Design view	24	(1)
Resizing windows	25	(1)
Estimating download times	26	(1)
Zooming in and out in Design view	27	(1)
Code view	28	(1)
Split (Design and Code) view	28	(1)
Document window menus	29	(2)
The Properties panel	31	(1)
Other panels	32	(1)
Panel groups	33	(1)
Web page editing preferences	33	(3)
Setting up preview browsers	36	(1)
Keyboard shortcuts	37	(1)
Summary	37	(2)
Chapter 3: Setting Up a Website	39	(16)
Defining a site in Dreamweaver	40	(8)
Exercise: How to set up your website	40	(6)
The Advanced tab	46	(2)
Editing and uploading files	48	(4)
Summary	52	(3)
Chapter 4: Web Page Essentials	55	(36)
Anatomy of a web page	56	(1)
Dreamweaver defaults	56	(3)
Defining the document's character set	58	(1)
Changing the page's title	58	(1)
Editing the head section	59	(4)
Adding keywords and a description	60	(1)
Adding other meta elements	60	(2)
Attaching JavaScript documents	62	(1)
Attaching CSS files	62	(1)
Understanding CSS	63	(4)
The rules of CSS	64	(1)
Tag selectors	64	(1)
Class selectors	65	(1)
ID selectors	65	(1)
Grouped selectors	65	(1)
Contextual selectors	66	(1)
The cascade	67	(1)
Working with CSS	67	(6)
Creating and editing a CSS style	67	(4)
Applying a style	71	(2)
Setting default margins for a web page	73	(2)
Adding backgrounds to web pages	75	(9)
Using CSS to add backgrounds to web pages	75	(1)
Creating Web page backgrounds	76	(16)
Striped background tiles	80	(1)
Drop shadows	81	(1)
Applying watermarks	82	(2)
Adding comments	84	(3)
Adding Design Notes	87	(2)
Summary	89	(2)
Chapter 5: Working with Text	91	(38)
Semantic markup	92	(1)
Adding text elements	92	(3)
Creating paragraphs, line breaks, and headings	92	(1)
Specifying preformatted text	93	(1)
Making text bold and italic	94	(1)
Aligning text	95	(1)
Styling text elements	95	(7)
Using the Properties panel to style text	95	(2)
Using the CSS Styles panel to style text	97	(5)
Exercise: Applying styles to multiple elements and selections	99	(3)
Working with lists	102	(7)
Creating a list	102	(1)
Changing a list's type	103	(5)
Exercise: Styling lists	104	(4)
Creating inline lists	108	(1)
Text styling examples	109	(16)
Sizing text: pixels versus keywords	110	(5)
Exercise: Styling headings and paragraphs	110	(5)
Restyling text using the CSS Styles panel	115	(10)
Exercise: Rapidly restyling headings and paragraphs	115	(2)
Exercise: Creating print-like paragraphs	117	(2)
Exercise: Creating drop caps	119	(3)
Exercise: Creating pull quotes	122	(3)
Fixing text sizes in IE 5 for Windows	125	(1)
Cross-platform issues	125	(1)
Summary	126	(3)
Chapter 6: Working with Images	129	(26)
Choosing formats for images	130	(3)
JPEG	130	(1)
GIF	131	(1)
Transparent GIFs	132	(1)
PNG	132	(1)
Web image mistakes to avoid	133	(2)
Using graphics for body copy	133	(1)
Not working from original images	133	(1)
Using too little contrast	133	(1)
Resizing images using Dreamweaver	133	(1)
Not balancing quality and file size	134	(1)
Using text overlays	134	(1)
Stealing images and designs	135	(1)
Adding an image to a web page	135	(2)
Editing an image	137	(5)
Changing an image's source	137	(1)
Integrating with Fireworks	137	(1)
Cropping an image	138	(1)
Resizing and resampling an image	139	(1)
Setting brightness, contrast, and sharpening	139	(2)
Creating image maps	141	(15)
Exercise: Adding an image map to your web page	141	(1)
Styling images using CSS	142	(10)
Exercise: Adding borders to all web page images	142	(2)
Exercise: Adding a border to a single image only	144	(2)
Exercise: Wrapping text around an image	146	(2)
Exercise: Styling images using contextual selectors	148	(3)
Exercise: Creating a thumbnails area	151	(1)
Summary	152	(3)
Chapter 7: Creating Navigation for Your Website	155	(32)
Navigation types	156	(2)
Inline navigation	156	(1)
Site navigation	157	(1)
Search-based navigation	158	(1)
Creating and targeting links	158	(5)
Absolute links	159	(1)
Relative links	159	(1)
Root-relative links	160	(1)
Targeting links	160	(11)
Exercise: Linking to elsewhere on a web page	160	(3)
Styling links using CSS	163	(1)
Multiple link states: the cascade	164	(3)
Exercise: Creating different link styles in two page areas	165	(2)
Advanced link usage	167	(4)
Exercise: Creating pop-up windows	167	(2)
Exercise: Using links to switch images	169	(2)
Creating navigation bars	171	(14)
Vertical navigation bars	171	(5)
Exercise: Creating and styling a vertically aligned navigation bar	172	(3)
Exercise: Using JavaScript to create collapsible sections	175	(1)
Removing white space in Internet Explorer	176	(1)
Horizontal navigation bars	177	(11)
Exercise: Creating and styling a horizontal navigation bar	177	(2)
Exercise: Creating a "breadcrumbs" navigation area	179	(2)
Exercise: Creating a horizontal navigation bar with rollover images	181	(4)
Summary	185	(2)
Chapter 8: Web Page Layouts	187	(44)
Creating a structure	188	(2)
Box formatting	188	(2)
Creating page layouts in Dreamweaver	190	(20)
Boxouts and sidebars	190	(8)
The float property	191	(1)
Exercise: Creating a boxout	192	(3)
Exercise: Creating a sidebar	195	(3)
Working with columns	198	(12)
Exercise: Creating a two-column layout	199	(3)
Exercise: Adding padding and spacing	202	(2)
Faking column backgrounds	204	(1)
Working with liquid columns	205	(1)
Exercise: Adding padding to liquid columns	206	(1)
Exercise: Creating a three-column layout with fixed sidebars	207	(2)
Exercise: Adding a footer	209	(1)
Working with tables	210	(12)
The Table dialog box	211	(21)
Exercise: Creating and styling a table in Dreamweaver	215	(7)
Adding scrollable areas	222	(6)
Exercise: Using CSS to create a scrolling area	224	(1)
Exercise: Using an iframe to create a scrollable area	225	(3)
Summary	228	(3)
Chapter 9: Getting User Feedback	231	(24)
Using mailto: links	232	(1)
Scrambling addresses	233	(1)
Working with forms	233	(11)
Creating a form	234	(1)
Adding controls	234	(7)
Exercise: Adding controls to a form	235	(6)
Adding a fieldset and legend	241	(1)
Styling a form	241	(3)
Sending feedback	244	(7)
Configuring nms FormMail	245	(2)
Multiple recipients	246	(1)
Script server permissions	247	(1)
Sending form data by PHP	247	(3)
Using email to send form data	250	(1)
A layout for contact pages	251	(1)
Summary	252	(3)
Chapter 10: Putting It All into Practice	255	(46)
Creating website layouts	256	(30)
Exercise: Creating a layout for an online diary or blog	256	(8)
Exercise: Creating a fixed-width, businesslike layout	264	(7)
Exercise: Creating a three-column, liquid website layout	271	(7)
Exercise: Creating an advanced website layout	278	(8)
Introducing templates	286	(13)
Exercise: Creating a template	287	(3)
Exercise: Creating a page based on a template	290	(3)
Exercise: Editing the template	293	(2)
Exercise: Working with embedded templates	295	(3)
Editing template code	298	(1)
Outro	299	(2)
Index	301