第1讲：网页制作基础知识要点.ppt

1.4 什么是响应式网页——RWD ——几种解决方案 PC –? Mobile –? 响应式：PC Mobile –??无需跳转 ——如何实施？ 首先我们应该遵循移动优先原则，交互设计应以移动端为主，PC则作为移动端的一个扩展； 一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的： 响应式布局 响应式内容（图片、多媒体） ——响应式布局 我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不同尺寸下的位置： ——响应式图片 带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求的图片还是PC上的大图；文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。 ——例子1 ——例子2 ——响应式网页设计的未来？ ——发展历史 HTML 2.0——1995年11月 HTML 3.2——1997年1月14日 HTML 4.0——1997年12月18日 HTML 4.01（微小改进）——1999年12月24日 HTML 5——2014年10月28日 ——编辑方式 一般的文本编辑软件，如：记事本、Word 所见即所得的编辑软件，如：Dreamweaver等 ——网页的基本框架 html head title这里是网页标题/title /head body 这里是网页主体部分，这里可以放很多其他元素的标记，例如：文本、段落、列表、图像等。 /body /html 1.5.2 文本标记、段落标记 文本标记 h1 h2 h3 h4 h5 h6 h7 段落标记 p 1.5.4 横线标记 横线标记 hr 1.5.3 图像标记 图像标记img * 处理原理：浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。 /d/responsive-web-design/ex/ex-site-flexible.html /open-source-projects/smaller-projects/responsive-design-bookmarklet http://ami.responsivedesign.is 响应式网页设计 第1讲 网页制作基础知识（1） 内容提要 本课次内容 1.1 网页制作基础 1.2 网页的基本要素 1.3 网页中的色彩特性 1.4 什么是响应式网页 1.5 HTML语言（1） 1.1 网页制作基础 1.1.1 什么是静态网页 1.1.2 什么是动态网页 1.1.1 什么是静态网页 在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的，一般以.htm、.html、.shtml、.xml等为后后缀。在HTML格式的网页上，也可以出现各种动态效果，如.GIF格式的动画、FLASH、滚动字母等。 1.1.2 什么是动态网页 常见形动态网页是以.aspx.asp、.jsp、.php、.perl、.cgi等形式为后缀，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。 1.2 网页的基本要素 1.2.1 Logo 1.2.2 Banner 1.2.3 导航栏 1.2.4 文本 1.2.5 图像 1.2.1 Logo Logo是代表企业形象或栏目内容的标志性图片，一般在网页的左上角，通常有3种尺寸：88×31像素、120×60像素和120×9像素。 1.2.2 Banner Banner是用于宣传网站内某个栏目或活动的广告。 常见的尺寸是480×60像素或233×30像素。 1.2.3 导航栏 导航栏就是一组超链接，用来方便地浏览站点。导航栏可能是按钮或者文本超链接，是网页的重要组成元素，导航栏一般用于网站各部分内容间相互链接的指引。 1.2.4 文本 网页中的信息主要是以文本为主的，良好的文本格式可以创建出别具特色的网页，激发读者的兴趣。 1.2.5 图像 图像在网页中具有提供信息、展示形象、装饰网页、表达个人情趣和风格的作用。 1.2.6 Flash动画 Flash动画是网页上最活跃的元素，包括GIF动画和FLASH动画。