Web Design with HTML and CSS Digital Classroom: Book Summary| Download Free Book PDF

Lesson 1: Planning Your Website

• The goals of web design

• The difference between print design and web design 

• The web demands user interaction

• Defining the user experience

• User-centred design

• The stages of the planning process

• Defining goals and strategy

• Scenarios and characters

• Information architecture

• Defining the navigation design of the SmoothieWorld site

• Rethinking site navigation

• The role of usability testing

• Wireframes, prototypes, and mockups

• The evolving field of interactive prototypes

• Be creative during the planning process

Lesson 2: Fundamentals of the Web

• How web pages work

• The Internet and World Wide Web domain names 

• Domain names and hosting

• The language of the web

• The evolution of the web and web standards 

• Separating structure, style, and interactivity

• Designing for the web

• Know your audience 

• Know that your site’s viewers are impatient 

• Designing for the screen

• Understanding how your audience will read your web content

Lesson 3: Web Design Tools

• Web editors versus WYSIWYG tools 

• Plain text editors

• Text editors for web design

• WYSIWYG editors 

• Defi ning sites in Dreamweaver or Expression Web 

• Obtaining Expression Web or Dreamweaver

• Creating a new site in Dreamweaver

• Importing an existing site into Dreamweaver CS5 

• Creating a new site in Expression Web

Lesson 4: Fundamentals of HTML, XHTML, and CSS

• Web languages

• Web page structure is based on HTML 

• The details of XHTML syntax

• Doctype lets the web browser know what to expect

• The W3C and page validation

• HTML structure 

• Placing images in HTML

• The role of CSS

• Styling a heading

• Understanding class styles and <span>s

• Three ways to use styles

• Internal versus external style sheets

• Creating an external style sheet 

• What makes styles cascading

Lesson 5: Graphics, Color, and Transparency

• Optimizing graphics for the web

• Resizing the image

• Adjusting the image size

• Applying the Unsharp Mask filter to an image

• Selecting the best image format

• Choosing the right file format

• Choosing the best file format for your image

• Saving images as JPEGs

• Choosing the quality of a JPEG 

• Previewing your image

• Creating a transparency effect in a JPEG image

• Saving your settings

• Saving images as GIFs 

• Optimizing the GIF image

• Using the colour table

• Adding a matte to a GIF 

• Animating a GIF

• Saving as a PNG

• Slicing an image

• Viewing the completed file

• Creating slices 

• Changing the attributes of the slices

• Saving slices out of Photoshop 

Lesson 6: Formatting Text with CSS

• The importance of typography on the web

• The challenges of fonts on the web

• Setting a font-family 

• Sizing text with CSS 

• Pixels and points are not the best choices

• Using a combination of percent and the em measurement

• Using margins to modify the space between your text

• Setting paragraph line-height

• Transforming text with CSS

• Working with HTML lists 

• Styling HTML lists 

Lesson 7: Introduction to CSS Layout

• Working with a CSS reset file 

• A brief history of layout techniques on the web 

• An overview of page layout options 

• Understanding <div>s: creating a two-column

• fixed-width CSS layout

• Understanding the CSS float property

• Creating columns with the float property 

• Working with the clear property

• Creating a list-based navigation using fl oats

• Adding text styles 

• The effect of margins and padding

• on your fixed-width layout

• A review of using margins and padding for layout

• Styling your footer with a background image

Lesson 8: Advanced CSS Layout

• Building your page layout 

• Removing the background colour

• Working with CSS background images

• Using hacks to solve layout problems

• Enhancing your CSS navigation bar

• Moving your internal styles to the external style sheet

• Creating a style for the active page

• Adding images to your sidebar

• Working with absolute positioning 

Lesson 9: Browser Compatibility

• Why browser testing is important

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

• Choose the level of browser support you want

• The special case of IE6

• Tools to identify browser problems

• Virtualization solutions for the Mac OS

• Virtualization solutions for Windows

• Browser compatibility applications

• Addressing browser incompatibilities with CSS fixes

• Addressing Internet Explorer 6

• issues with JavaScript

• Browser incompatibilities in the future

• Future browser compatibility issues 

Lesson 10: Introduction to Interactivity

• Interactivity on the web

• JavaScript

• Adobe Flash

• JavaScript basics

• JavaScript events

• Placing your JavaScript into an external document

• The Document Object Model 

• JavaScript frameworks

• Hiding an element with jQuery

• Adding an event to trigger the show effect

• Adobe Flash overview

• Generating code to add Flash movies to a page

• Integrating Flash into a pre-existing design

• Inserting Silverlight content into a web page

Lesson 11: Mobile Design

• The need for mobile-optimized websites 

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

• Deciding which type of mobile device to target 

• The trouble with style sheets

• Using CSS3 media queries

Lesson 12: HTML5 Essentials

• Defining HTML5

• The motivation behind HTML5

• HTML5 markup

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

• Embed media files using <video> and <audio> elements

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

• HTML5 markup is still evolving

• Grouping headings and images 

• Identifying figures and captions

• Web forms

• The rest of the HTML5 family

• Geolocation 

• Web Workers

• Web Storage 

• CSS3 integration with HTML5

• How to begin using HTML5/CSS3

• Starting with an HTML5 foundation

• Words of encouragement