Title Details

Starting Up

About Web Design with HTML and CSS Digital Classroom 1

Prerequisites 1

System requirements 2

Understanding menus and commands 3

Understanding how to read HTML and CSS code changes 3

Loading lesson files 3

Video tutorials 4

Hosting your websites 4

Additional resources 5

Lesson 1: Planning Your Website

Starting up 7

The goals of web design 7

The difference between print design and web design 8

The web demands user interaction 10

Defining the user experience 11

User-centered design 11

The stages of the planning process 11

Defining goals and strategy 12

Research 12

Scenarios and characters 13

Information architecture 15

Defining the navigation design of the SmoothieWorld site 16

Rethinking site navigation 18

The role of usability testing 18

Wireframes, prototypes, and mockups 20

The evolving field of interactive prototypes 22

Be creative during the planning process 23

Self study 24

Review 24

Lesson 2: Fundamentals of the Web

Starting up 25

How web pages work 26

The Internet and World Wide Web domain names 26

Domain names and hosting 27

The language of the web 28

The evolution of the web and web standards 28

Separating structure, style, and interactivity 30

Designing for the web 31

Know your audience 31

Know that your site’s viewers are impatient 32

Designing for the screen 32

Understanding how your audience will read your web content 33

Self study 34

Review 34

Lesson 3: Web Design Tools

Starting up 35

Web editors versus WYSIWYG tools 36

Plain text editors 37

Text editors for web design 39

WYSIWYG editors 42

Defining sites in Dreamweaver or Expression Web 45

Obtaining Expression Web or Dreamweaver 45

Creating a new site in Dreamweaver 46

Importing an existing site into Dreamweaver CS5 48

Creating a new site in Expression Web 50

Review 53

Lesson 4: Fundamentals of HTML, XHTML, and CSS

Starting up 55

Web languages 56

Web page structure is based on HTML 56

The details of XHTML syntax 58

Doctype lets the web browser know what to expect 58

The W3C and page validation 59

HTML structure 61

Placing images in HTML 64

The role of CSS 66

Styling a heading 67

Understanding class styles and <span>s 70

Three ways to use styles 71

Internal versus external style sheets 72

Creating an external style sheet 72

What makes styles cascading 74

Self study 75

Review 75

Lesson 5: Graphics, Color, and Transparency

Starting up 77

Optimizing graphics for the web 78

Resizing the image 78

Adjusting the image size 81

Applying the Unsharp Mask filter to an image 84

Selecting the best image format 85

Choosing the right file format 86

Choosing the best file format for your image 86

Saving images as JPEGs 86

Choosing the quality of a JPEG 87

Previewing your image 89

Creating a transparency effect in a JPEG image 90

Saving your settings 92

Saving images as GIFs 93

Optimizing the GIF image 95

Using the color table 97

Adding a matte to a GIF 100

Animating a GIF 101

Saving as a PNG 104

Slicing an image 107

Viewing the completed file 107

Creating slices 108

Changing the attributes of the slices 109

Saving slices out of Photoshop 110

Self study 112

Review 112

Lesson 6: Formatting Text with CSS

Starting up 113

The importance of typography on the web 114

The challenges of fonts on the web 114

Setting a font-family 116

Sizing text with CSS 118

Pixels and points are not the best choices 118

Using a combination of percent and the em measurement 119

Using margins to modify the space between your text 124

Setting paragraph line-height 127

Transforming text with CSS 128

Working with HTML lists 130

Styling HTML lists 133

Self study 138

Review 138

Lesson 7: Introduction to CSS Layout

Starting up 139

Working with a CSS reset file 140

A brief history of layout techniques on the web 142

An overview of page layout options 145

Understanding <div>s: creating a two-column fixed-width CSS layout 147

Understanding the CSS float property 151

Creating columns with the float property 153

Working with the clear property 155

Creating a list-based navigation using floats 155

Adding text styles 158

The effect of margins and padding on your fixed-width layout 160

A review of using margins and padding for layout 167

Styling your footer with a background image 167

Self study 171

Review 171

Lesson 8: Advanced CSS Layout

Starting up 173

Building your page layout 174

Removing the background color 174

Working with CSS background images 177

Using hacks to solve layout problems 180

Enhancing your CSS navigation bar 183

Moving your internal styles to the external style sheet 187

Creating a style for the active page 187

Adding images to your sidebar 189

Working with absolute positioning 190

Self study 194

Review 194

Lesson 9: Browser Compatibility

Starting up 195

Why browser testing is important 196

Are web pages required to look the same in all browsers? 196

Choose the level of browser support you want 197

The special case of IE6 198

Tools to identify browser problems 200

Virtualization solutions for the Mac OS 200

Virtualization solutions for Windows 201

Browser compatibility applications 202

Addressing browser incompatibilities with CSS fixes 204

Addressing Internet Explorer 6

issues with JavaScript 205

Browser incompatibilities in the future 206

Future browser compatibility issues 206

Self study 210

Review 210

Lesson 10: Introduction to Interactivity

Starting up 211

Interactivity on the web 212

JavaScript 212

Adobe Flash 212

JavaScript basics 213

JavaScript events 218

Placing your JavaScript into an external document 220

The Document Object Model 221

JavaScript frameworks 222

Hiding an element with jQuery 223

Adding an event to trigger the show effect 225

Adobe Flash overview 228

Generating code to add Flash movies to a page 229

Integrating Flash into a pre-existing design 232

Inserting Silverlight content into a web page 235

Self study 238

Review 238

Lesson 11: Mobile Design

Starting up 239

The need for mobile-optimized websites 240

How is the mobile experience of the web different than the desktop? 240

Deciding which type of mobile device to target 241

The trouble with style sheets 245

Using CSS3 media queries 246

Self study 254

Review 254

Lesson 12: HTML5 Essentials

Starting up 255

Defining HTML5 255

The motivation behind HTML5 256

HTML5 markup 257

The <video>, <audio>, and <canvas> elements 258

Embed media fi les using <video> and <audio> elements 258

Provide drawing and animation features using the <canvas> element 260

HTML5 markup is still evolving 261

Grouping headings and images 261

Identifying figures and captions 262

Web forms 262

The rest of the HTML5 family 263

Geolocation 263

Web Workers 264

Web Storage 264

CSS3 integration with HTML5 264

How to begin using HTML5/CSS3 266

Starting with an HTML5 foundation 267

Words of encouragement 268

Self study 269

Review 269