html5与css网页设计基础terry felke-morris著课件英文chapter

1、Basics of Web DesignChapter 8More on Links, Layout, and MobileKey Concepts1Copyright 2016 Pearson Education, Inc., Hoboken NJLearning esCode relative hyperlinks to web pages in folders within a websiteConfigure a hyperlink to a named fragment internal to a web pageConfigure images with captions usin

2、g the HTML5 figure and figcaption elements Configure a collection of images to float across a web pageConfigure web pages with new HTML5 section, hgroup, article, aside, and time elementsApply techniques to ensure backward compatibility with older browsers.Configure web pages for printing with CSSDe

3、scribe mobile web design best practicesConfigure web pages for mobile display using the viewport meta tagApply responsive web design techniques with CSS3 media queries and flexible images2Copyright 2016 Pearson Education, Inc., Hoboken NJMore on Relative LinkingJavelinaHomeWeekend Events3Relative li

4、nks from the canyon.html page in the rooms folderCopyright 2016 Pearson Education, Inc., Hoboken NJLinking to Fragment Identifiers A link to a part of a web pageAlso called named fragments, fragment idsTwo components:The element that identifies the named fragment of a Web page. This requires the id

5、attribute. . 2. The anchor tag that links to the named fragment of a Web page. This uses the href attribute. Back to Top4Note the use of the # in the anchor tag!Copyright 2016 Pearson Education, Inc., Hoboken NJSkip to Content5Copyright 2016 Pearson Education, Inc., Hoboken NJHTML5 Figure and Figcap

6、tionElements Island Lighthouse, Built in 1870 6Copyright 2016 Pearson Education, Inc., Hoboken NJFloating ImagesHTML: Golden Gate BridgeCSSfigure float: left; width: 230px; padding-bottom: 10px; background-color: #EAEAEA; figcaption text-align: center; font-style: italic; font-family: Georgia, serif

7、; 7Copyright 2016 Pearson Education, Inc., Hoboken NJMore HTML5 ElementsSection Elementindicates a portion or “section” of a document, like a chapter or topicArticle Elementindicates an independent entry, like a blog posting, that can stand on its ownAside Elementindicates a sidebar or other tangent

8、ial contentTime Elementrepresents a date or time8Copyright 2016 Pearson Education, Inc., Hoboken NJHTML5 Compatibility with Older BrowsersCSSheader, main, nav, footer, section, article, figure, figcaption, aside display: block; HTML5 Shim (aka HTML5 Shiv) 9Copyright 2016 Pearson Education, Inc., Hob

9、oken NJCSS Styling for PrintCreate an external style sheet with the configurations for browser display.Create a second external style sheet with the configurations for printing.Connect both of the external style sheets to the web page using two elements.10Copyright 2016 Pearson Education, Inc., Hobo

10、ken NJPrint Styling Best PracticesHide non-essential contentExample: nav display: none; Configure font size and color for printingUse pt font sizes, use dark text colorControl page breaksExample: .newpage break-before: always; 11Copyright 2016 Pearson Education, Inc., Hoboken NJMobile Web Design Bes

11、t PracticesThree Approaches to Mobile Web:Develop a new mobile site with a .mobi TLDCreate a separate website hosted within your current domain targeted for mobile usersUse CSS to configure your current website for display on both mobile and desktop devicesCopyright 2016 Pearson Education, Inc., Hob

12、oken NJ12Mobile Web LimitationsSmall Screen SizeLow bandwidthLimited fontsLimited colorAwkward controlsLimited processor and memoryCost per kilobyteCopyright 2016 Pearson Education, Inc., Hoboken NJ13Design Techniques for Mobile WebOne column designAvoid floats, tables, framesDescriptive page titleD

13、escriptive heading tagsOptimize imagesDescriptive alt text for imagesEliminate unneeded imagesNavigation in listsProvide “Skip to Content” hyperlinkProvide “Back to Top” hyperlinkNotice the overlap between these techniques and designing to provide for accessibility?Copyright 2016 Pearson Education,

14、Inc., Hoboken NJ14Design Techniques for Mobile WebSingle column designAvoid floats, tables, framesDescriptive page titleDescriptive headingsOptimize imagesDescriptive alt text for imagesEliminate unneeded imagesNavigation in listsEm or percentage font size unitsCommon font typefacesGood contrast bet

15、ween text and background colors Provide “Skip to Content” hyperlinkProvide “Back to Top” hyperlinkNotice the overlap between these techniques and designing to provide for accessibility?Copyright 2016 Pearson Education, Inc., Hoboken NJ15Viewport Meta TagDefault action for most mobile devices is to z

16、oom out and scale the web pageViewport Meta TagCreated as an Apple extensionto configure display on mobile devices Configures width and initial scale of browser viewport16Copyright 2016 Pearson Education, Inc., Hoboken NJTelephone & Text Message HyperlinksTelephone SchemeCall Many mobile browsers wi

17、ll initiate a phone call when the hyperlink is clicked.SMS SchemeText Many mobile browsers will initiate a text message to the phone number when the hyperlink is clicked.17Copyright 2016 Pearson Education, Inc., Hoboken NJResponsive Web DesignTerm coined by Ethan MarcotteProgressively enhancing a we

18、b page for different viewing contextsTechniques:Fluid LayoutCSS3 Media QueriesFlexible Images18Copyright 2016 Pearson Education, Inc., Hoboken NJCSS3 Media QueriesMedia Query Determines the capability of the mobile device, such as screen resolutionDirects the browser to styles configured specificall

19、y for those capabilitiesLink Element Example:CSS Example:media only screen and (max-width: 480px) header background-image: url(mobile.gif); 19Copyright 2016 Pearson Education, Inc., Hoboken NJFlexible ImagesEdit HTML: remove height and width attributesCSS:img max-width: 100%; height: auto; 20Copyrig

20、ht 2016 Pearson Education, Inc., Hoboken NJTesting Mobile Display OptionsTest with a mobile deviceEmulators Opera Mobile Emulator MobilizerOpera Mini SimulatoriPhone EmulatorTest with a Desktop BrowserInstall an iOS or Android SDK21Copyright 2016 Pearson Education, Inc., Hoboken NJCSS Debugging Tips

21、Manually check syntax errorsUse W3C CSS Validator to check syntax errors Configure temporary background colorsConfigure temporary bordersUse CSS comments to find the unexpected/* the browser ignores this code */Dont expect your pages to look exactly the same in all browsers!Be patient!22Copyright 2016 Pearson Education, Inc., Hoboken NJSummaryThis chapter expanded your CSS and HTML skillset.You coded relative hyperlinks to web pages in folders within a website.You coded a hyperlink to a named fragment