book

Web Design with HTML and CSS Digital Classroom

by Jeremy Osborn, Jennifer Smith, AGI Creative Team

November 2014

Intermediate to advanced

224 pages

English

Wiley

Read now

Unlock full access

Table Of Contents
Starting UpAbout Web Design with HTML and CSS Digital ClassroomPrerequisitesSystem requirementsUnderstanding menus and commandsUnderstanding how to read HTML and CSS code changesLoading lesson filesDownloading and copying the lesson files to your hard drive:Video tutorialsHosting your websitesAdditional resourcesDigitalClassroomBooks.comSeminars, conferences, and trainingResources for educators
Lesson 1: Planning Your WebsiteStarting upThe goals of web designThe difference between print design and web designThe web demands user interactionDefining the user experienceUser-centered designThe stages of the planning processDefining goals and strategyResearchScenarios and charactersInformation architectureDefining the navigation design of the SmoothieWorld siteRethinking site navigationThe role of usability testingWireframes, prototypes, and mockupsThe evolving field of interactive prototypesBe creative during the planning processSelf studyReview
Lesson 2: Fundamentals of the WebStarting upHow web pages workThe Internet and World Wide Web domain namesDomain names and hostingThe language of the webThe evolution of the web and web standardsSeparating structure, style, and interactivityDesigning for the webKnow your audienceKnow that your site’s viewers are impatientDesigning for the screenUnderstanding how your audience will read your web contentSelf studyReview
Lesson 3: Web Design ToolsStarting upWeb editors versus WYSIWYG toolsPlain text editorsText editors for web designWYSIWYG editorsDefining sites in Dreamweaver or Expression WebObtaining Expression Web or DreamweaverCreating a new site in Dreamweaver Importing an existing site into Dreamweaver CS5Creating a new site in Expression WebReview
Lesson 4: Fundamentals of HTML, XHTML, and CSSStarting upWeb languagesWeb page structure is based on HTMLThe details of XHTML syntaxDoctype lets the web browser know what to expectThe W3C and page validationHTML structurePlacing images in HTMLThe role of CSSStyling a heading Understanding class styles and <span>sThree ways to use stylesInternal versus external style sheetsCreating an external style sheetWhat makes styles cascadingSelf studyReview
Lesson 5: Graphics, Color, and TransparencyStarting upOptimizing graphics for the webResizing the imageAdjusting the image sizeApplying the Unsharp Mask filter to an imageSelecting the best image formatChoosing the right file formatChoosing the best file format for your imageSaving images as JPEGsChoosing the quality of a JPEGPreviewing your imageCreating a transparency effect in a JPEG imageSaving your settingsSaving images as GIFsOptimizing the GIF imageUsing the color tableAdding a matte to a GIFAnimating a GIFSaving as a PNGSlicing an imageViewing the completed fileCreating slicesChanging the attributes of the slicesSaving slices out of PhotoshopSelf studyReview
Lesson 6: Formatting Text with CSSStarting upThe importance of typography on the webThe challenges of fonts on the webSetting a font-familySizing text with CSSPixels and points are not the best choicesUsing a combination of percent and the em measurementUsing margins to modify the space between your text Setting paragraph line-height Transforming text with CSSWorking with HTML lists Styling HTML lists Self studyReview

Lesson 7: Introduction to CSS LayoutStarting upWorking with a CSS reset fileA brief history of layout techniques on the webAn overview of page layout optionsUnderstanding <div>s: creating a two-column fixed-width CSS layoutUnderstanding the CSS float property Creating columns with the float propertyWorking with the clear propertyCreating a list-based navigation using floatsAdding text stylesThe effect of margins and padding on your fixed-width layoutA review of using margins and padding for layout Styling your footer with a background imageSelf studyReview
Lesson 8: Advanced CSS LayoutStarting upBuilding your page layoutRemoving the background colorWorking with CSS background imagesUsing hacks to solve layout problemsEnhancing your CSS navigation barMoving your internal styles to the external style sheetCreating a style for the active pageAdding images to your sidebarWorking with absolute positioningSelf studyReview
Lesson 9: Browser CompatibilityStarting upWhy browser testing is importantAre web pages required to look the same in all browsers?Choose the level of browser support you wantThe special case of IE6Tools to identify browser problemsVirtualization solutions for the Mac OSVirtualization solutions for WindowsBrowser compatibility applicationsAddressing browser incompatibilities with CSS fixesAddressing Internet Explorer 6 issues with JavaScriptBrowser incompatibilities in the futureFuture browser compatibility issuesSelf studyReview
Lesson 10: Introduction to InteractivityStarting upInteractivity on the webJavaScriptAdobe FlashJavaScript basicsJavaScript eventsPlacing your JavaScript into an external documentThe Document Object ModelJavaScript frameworksHiding an element with jQueryAdding an event to trigger the show effectAdobe Flash overviewGenerating code to add Flash movies to a pageIntegrating Flash into a pre-existing designInserting Silverlight content into a web pageSelf studyReview
Lesson 11: Mobile DesignStarting upThe need for mobile-optimized websitesHow is the mobile experience of the web different than the desktop?Deciding which type of mobile device to targetThe trouble with style sheetsUsing CSS3 media queriesSelf studyReview
Lesson 12: HTML5 EssentialsStarting upDefining HTML5The motivation behind HTML5HTML5 markupThe <video>, <audio>, and <canvas> elementsEmbed media files using <video> and <audio> elements Provide drawing and animation features using the <canvas> elementHTML5 markup is still evolvingGrouping headings and imagesIdentifying figures and captionsWeb formsThe rest of the HTML5 familyGeolocationWeb WorkersWeb StorageCSS3 integration with HTML5How to begin using HTML5/CSS3Starting with an HTML5 foundationWords of encouragementSelf studyReview
AppendixCSS Properties and ValuesNamePossible ValuesDefault value
About the AuthorsAcknowledgments
Credits

Overview

"An invaluable full-color training package for Web design

Web design consists of using multiple software tools and codes-such as Dreamweaver, Flash, Silverlight, Illustrator, Photoshop, HTML, and CSS, among others-to craft a unique, robust, and interactive websites. This book teaches you how to effectively use all the major tools involved in web design to create a site that is both attractive and functional.

You'll go beyond the basics to learn best practices of good web design so you can go from the drawing board to a successful site.

Combining full-color, step-by-step instructions with lesson files and video training from web experts is like having your own personal instructor guiding you through each lesson-but you work at your own pace!

Discusses properties of good web design and best practices for building a site that is both attractive and functional

Offers clear instruction that makes learning complicated tasks less intimidating

Demonstrates how to approach site design concept creation and bring a vision from the drawing board through to full and dazzling operability

Combines a full color step-by-step instructional book along with lesson files and video training from web design experts

This training package takes you beyond the basics in a series of easy-to-absorb, five-minute lessons. "

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Start your free trial

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage, Sixth Edition

Publisher Resources

ISBN: 9781118094280Purchase book Other

Web Design with HTML and CSS Digital Classroom

by Jeremy Osborn, Jennifer Smith, AGI Creative Team

Overview

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

You might also like

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage, Sixth Edition

Jump Start Responsive Web Design

Styling Web Pages with CSS: Visual QuickProject Guide

Training Guide: Programming in HTML5 with JavaScript and CSS3

Publisher Resources

Overview

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,and much more.

You might also like

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage, Sixth Edition

Jump Start Responsive Web Design

Styling Web Pages with CSS: Visual QuickProject Guide

Training Guide: Programming in HTML5 with JavaScript and CSS3

Publisher Resources

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.