Web Design with HTML and CSS Jeremy Osborn, Jennifer Smith, and the AGI Training Team
Contents of Web Design with HTML and CSS
- 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 fi les
- Video tutorials
- Hosting your websites
- Additional resources
- Lesson : Planning Your Website
- Starting up
- The goals of web design
- The diff erence between print design
- and web design
- The web demands user interaction
- Defi ning the user experience
- User-centered design
- The stages of the planning process
- Defi ning goals and strategy
- Research
- Scenarios and characters
- Information architecture
- Defi ning the navigation design
- of the SmoothieWorld site
- Rethinking site navigation
- The role of usability testing
- Wireframes, prototypes, and mockups
- The evolving fi eld of interactive prototypes
- Be creative during the planning process
- Self study
- Review
- 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 : Web Design Tools
- Starting up
- 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 CS
- Creating a new site in Expression Web
- Review
- 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 W C and page validation
- HTML structure
- Placing images in HTML
- The role of CSS
- Styling a heading
- Understanding class styles and s
- Three ways to use styles
- Internal versus external style sheets
- Creating an external style sheet
- What makes styles cascading
- Self study
- Review
- Lesson : Graphics, Color, and Transparency
- Starting up
- Optimizing graphics for the web
- Resizing the image
- Adjusting the image size
- Applying the Unsharp Mask fi lter to an image
- Selecting the best image format
- Choosing the right fi le format
- Choosing the best fi le format for your image
- Saving images as JPEGs
- Choosing the quality of a JPEG
- Previewing your image
- Creating a transparency eff ect 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 fi le
- Creating slices
- Changing the attributes of the slices
- Saving slices out of Photoshop
- Self study
- Review
- Lesson : 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
- Starting up
- Working with a CSS reset fi le
- A brief history of layout techniques on the web
- An overview of page layout options
- Understanding s: creating a two-column
- fi xed-width CSS layout
- Understanding the CSS fl oat property
- Creating columns with the fl oat property
- Working with the clear property
- Creating a list-based navigation using fl oats
- Adding text styles
- The eff ect of margins and padding
- on your fi xed-width layout
- A review of using margins and padding for layout
- Styling your footer with a background image
- Self study
- Review
- Lesson : 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
- 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 IE
- Tools to identify browser problems
- Virtualization solutions for the Mac OS
- Virtualization solutions for Windows
- Browser compatibility applications
- Addressing browser incompatibilities with CSS fi xes
- Addressing Internet Explorer
- issues with JavaScript
- Browser incompatibilities in the future
- Future browser compatibility issues
- Self study
- Review
- Lesson : 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 eff ect
- 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
- Starting up
- The need for mobile-optimized websites
- How is the mobile experience of the web
- diff erent than the desktop?
- Deciding which type of mobile device to target
- The trouble with style sheets
- Using CSS media queries
- Self study
- Review
- Lesson : HTML Essentials
- Starting up
- Defi ning HTML
- The motivation behind HTML
- HTML markup
- The
