Web Design Digital Classroom by Osborn, Jeremy -- Read -- Imperial Library of Trantor

Index

Cover Opening Pages Table Of Contents

Table Of Contents

Starting Up

About Web Design with HTML and CSS Digital Classroom Prerequisites

System requirements

Understanding menus and commands Understanding how to read HTML and CSS code changes Loading lesson files

Downloading and copying the lesson files to your hard drive:

Video tutorials Hosting your websites Additional resources

DigitalClassroomBooks.com Seminars, conferences, and training Resources for educators

Lesson 1

Lesson 1: Planning Your Website

Starting up The goals of web design

The difference between print design and web design The web demands user interaction Defining the user experience User-centered design The stages of the planning process Defining goals and strategy Research 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

Self study Review

Lesson 2

Lesson 2: Fundamentals of the Web

Starting up 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

Self study Review

Lesson 3

Lesson 3: Web Design Tools

Starting up Web editors versus WYSIWYG tools

Plain text editors Text editors for web design WYSIWYG editors

Defining 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

Review

Lesson 4

Lesson 4: Fundamentals of HTML, XHTML, and CSS

Starting up 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

Self study Review

Lesson 5

Lesson 5: Graphics, Color, and Transparency

Starting up 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 color 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

Self study Review

Lesson 6

Lesson 6: Formatting Text with CSS

Starting up 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

Self study Review

Lesson 7

Lesson 7: Introduction to CSS Layout

Starting up 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 floats 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

Self study Review

Lesson 8

Lesson 8: Advanced CSS Layout

Starting up Building your page layout

Removing the background color

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

Self study Review

Lesson 9

Lesson 9: Browser Compatibility

Starting up 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

Self study Review

Lesson 10

Lesson 10: Introduction to Interactivity

Starting up 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

Self study Review

Lesson 11

Lesson 11: Mobile Design

Starting up 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

Self study Review

Lesson 12

Lesson 12: HTML5 Essentials

Starting up 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 Self study Review

Appendix

CSS Properties and Values

Name Possible Values Default value

About the Author

About the Authors Acknowledgments

Credits

← Prev
Back
Next →

← Prev
Back
Next →