




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 第25章 第2节 《关注家庭生活安全》教学设计-2024-2025学年初中生物八年级下册同步教学(苏科版)
- 收纳师实际案例分析试题及答案
- 第九课 感受城市的心情(教案)2023-2024学年四年级下册信息技术河大音像版
- 2024年CPBA过程优化试题及答案
- 小自考汉语言文学考试内容试题及答案
- 小自考行政管理不同题型技巧解析试题及答案
- 市场营销数字化转型分析试题及答案
- 小自考个人复习思路试题及答案
- 小自考汉语言文学2024年掌握技巧试题及答案
- 考试期间如何处理焦虑与压力试题及答案
- 排水管道检测
- 五、董仲舒思想
- 颅高压幻灯片
- 六年级数学试卷讲评课教学设计(共16篇)
- 钢沉井制造及安装专项施工方案电子
- 虞大明教学实录——《刷子李》
- 第二代身份证号码验证器
- 市场调查与预测复习资料
- 施工组织设计双代号时标网络图
- 财政部金融企业不良资产批量转让管理办法(财金[2012]6号)
- 办公建筑设计规范2019
评论
0/150
提交评论