动态网页设计 第七章

《动态网页设计 第七章》由会员分享，可在线阅读，更多相关《动态网页设计 第七章（70页珍藏版）》请在金锄头文库上搜索。

1、河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发教育技术学 动态网站设计与开发The Development and Design of Dynamic Website 梁存良 Xinxiang, Mar. 30th, 2011 Department of Educational TechnologyDepartment of Educational Technology of of Henan Normal University Henan Normal University, , ChinaChina河南师范大学河南师

2、范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发实验二页面规划与布局 讲评u实验目的： p掌握了表格的插入、属性设置等常规操作 p能够运用表格的堆叠或嵌套有效地规划与布局页面 p掌握了常用表格技巧（行间距、细线表格、细线和颜 色条）操作u存在问题： p依内容确定是运用表格的堆叠或嵌套，嵌套层次尽量 要少 p根据实际需要运用表格技巧 p单一表格的结构尽量整齐 p用表格有效地规划与布局页面还需在实践中强化=“0“ =“#0000FF“=“#0000FF“河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站

3、设设 计计 与与 开开 发发内容回顾u版面布局 p 版面布局基础知识 版面设计（是根据特定内容和主题用页面元素表现设计意图） 版面设计的要求（构造出和谐、流畅、自然的网页） 版面设计的技术路线（表格、DIV+CSS及二者混合） p 表格 表格作用（规范数据和页面布局） 表格基本操作（插入、删除、合并、拆分、对齐、各种属性设置等 ） 表格嵌套和堆叠 表格技巧（行间距、细线表格、细线和颜色条） p 用表格规划页面的常用方法 一个表格内嵌入多个表格。适用于：单屏页面，内容比较少的情况 。 多个表格堆叠，再嵌入表格。适用于：多屏页面，内容比较多的情 况。河南师范大学河南师范大学 教育技术学教育技术学技

4、 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发静态网页设计知识体系u第一： p Dreamweaver基本操作、站点规划（结构和导航清晰 ）u第二： p 文本网站（主题明确） p 超链接（人机交互方便，链接无误）u第三： p 版面布局（表格）（布局设计） p 层与框架u第四： p 多媒体对象（完美运用各种形式表现主题，不包含美工设计）u第五:(动态部分) p 表单（人机交互）来源：来源：全国中小学电脑制作活动评比指标全国中小学电脑制作活动评比指标河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发本节

5、内容u多媒体对象 p图像基础 图像基础(图像分类、像素和分辨率、颜色、颜色模式、文件 格式) 网页图像基础（图像格式、网页颜色、图像搜集、图像使用 ） 网页中使用图像原则 p 使用图像(插入图像、 制作图像效果、图像链接、网 站相册等） p 其它多媒体对象在网页中的应用 视频 动画河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发图像基础u计算机图像分为两大类 p位图图像 p矢量图形河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发图像基础u计算机图像分为

6、两大类 p位图图像 位图是指以点阵方式保存、由像素点组合而成的图像，主要 用于保存各种照片图像。具有色彩丰富、过渡自然的图像效 果；在保存位图时，计算机需要记录每个像素点的位置和颜 色，所以图像像素点越多（分辨率高），图像越清晰，文件 就越大。 一般来说，我们能直接通过照相、扫描、摄像得到图形都是位 图图像。 但是位图的缺点也很明显，一是文件容量较大，二是放大图形 并不能增加图形的点数，因此就可以看到其不光滑的边缘和明 显的颗粒，质量不容易得到保证。 常用的位图软件有Photoshop, Firework,Cool3D,Painter等 p矢量图形河南师范大学河南师范大学 教育技术学教育技术学

7、技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发图像基础u计算机图像分为两大类 p位图图像位图放大后会出现锯齿现象 河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发图像基础u计算机图像分为两大类 p位图图像 p矢量图形 由一系列数学公式表达的线条所构成的图形；与分辨率无 关，图形的线条非常光滑、流畅，将图形放大到任意程度， 其线条依然可以保持良好的光滑性及比例相似性，图形 整体不变形；矢量图形文件所占空间较小。编辑这种矢量 图形的软件通常称为绘图程序（draw program），如Autodesk

8、公司 开发的 AUTOCAD软件，它特别适于绘制机械图，电路图等。 工程设计图、图表、插图经常以矢量图形曲线来表示。 常用的矢量绘图软件AutoCAD,CorelDraw,Illustrator,Freehand等 矢量图的不足：当图变得很复杂时，计算机就要花费很长的时间去执行 绘图指令才能把一幅图显示出来。对于一幅复杂的彩色照片，恐怕就很 难用数学来描述，用矢量图来表示。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发图像基础u计算机图像分为两大类 p位图图像 p矢量图形矢量图放大到任意程度，都不会失真河南师范大学河南师

9、范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发图像基础u像素和分辨率 p像素大小：指位图在高、宽两个方向的像素数。 p图像分辨率：指打印图像时，在每个单位长度上打印 的像素数，通常以“像素英寸”（pixel/inch，ppi）来 衡量。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发像素和分辨率河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发图像基础u显示器分辨率：在显示器中每个单位长度显示的 像

10、素或点数，通常以“点英寸”（dot per inch - dpi）来衡量。显示器的分辨率依赖于显示器尺寸 与像素设置，个人计算机显示器的典型分辨率通 常为96dpi。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发图像基础u颜色代表含义 p红色：代表热情、奔放、喜悦、庆典 p黑色：代表严肃、夜晚、沉着 p黄色：代表高贵、富有 p白色：代表纯洁、简单 p蓝色：代表天空、清爽 p绿色：代表植物、生命、生机 p灰色：代表阴暗、消极 p紫色：代表浪漫、爱情河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态

11、态 网网 站站 设设 计计 与与 开开 发发颜色的运用p不仅包括正确地选择单色，还包括正确地搭配几种颜 色。在搭配颜色时，可以从颜色的面积大小、颜色差 异性方面考虑。 p在统一中求变化，在变化中求统一是颜色搭配的原则 与基准。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发p暖色系搭配：红色与黑色、黄色与红色 p冷色系搭配：绿色与白色、蓝色与白色 p多色搭配方法：通常在一个设计作品中所应用的颜色种类 不应该多于三种或四种。 p非彩色系搭配：非彩色系的颜色是指黑、白、灰。 p同色系搭配：指通过调整同一种颜色的明度、饱和度和色

12、 度等属性值获得的一系列不同的颜色，将这些颜色相互搭 配。常见颜色搭配河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发颜色模式u颜色模式用来确定如何描述和重现图像的 色彩。u常见的颜色模型包括HSB（色相、饱和度 、亮度）、RGB（红色、绿色、蓝色）、 CMYK（青色、品红、黄色、黑色）和Lab 等。因此，相应的颜色模式也就有RGB、 CMYK、Lab等。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发（1） RGB颜色模式u利用红（Red）、绿（Gr

13、een）和蓝（Blue）三种 基本颜色进行颜色加法，可以配制出绝大部分肉 眼能看到的颜色。彩色电视机的显像管，以及计 算机的显示器都是以这种方式来混合出各种不同 的颜色效果的，图RGB颜色模式uPhotoshop将24位RGB图像看作由三个颜色通道组 成。这三个颜色通道分别为：红色通道、绿色通 道和蓝色通道。其中每个通道使用8位颜色信息 ，该信息由从0255的亮度值来表示。这三个通 道通过组合，可以产生256*256*256=16，777，216 余万种不同的颜色。在Photoshop中用户可以很方 便地从不同通道对RGB图像进行色彩处理。图1-9 RGB颜色模式河南师范大学河南师范大学 教育

14、技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发u下面是RGB颜色模式所表示的几种特殊颜 色：uR255， G0， B0 表示红色；uR0， G255， B0 表示绿色；uR0， G0， B255 表示蓝色；uR0， G0， B0 表示黑色；uR255， G255， B255 表示白色。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发（2）CMYK颜色模式u是一种基于印刷的色彩模式，由分色印刷时所使用的纯青色C，洋红M， 黄色Y，黑色K四种颜色组成。 uCMYK模式在本质上与RGB

15、颜色模式没有什么区别，只是产生色彩 的原理不同。由于RGB颜色合成可以产生白色，因此，RGB产生颜 色的方法称为加色法。而青色（C）、品红（M）和黄色（Y）的色 素在合成后可以吸收所有光线并产生黑色，因此，CMYK产生颜色的 方法称为减色法，即减色模式。 uCMYK模式中每一种色彩都有0%100%的浓淡变化，但由于黑色仅仅 是为了印刷原理才加进的，因此它能表达出来的色彩是100*100*100=1， 000，000种，并且由于油墨等的限制，它能表达的颜色比RGB模式少得 多，而且由于CMYK模式本身不发光的缘故，也没有RGB模式看起来鲜 艳明亮， 但它的优点也非常明显，CMYK模式是印刷模式，任何平 面设计作品，要进行打印或者印刷，都必须要分色为CMYK四色，虽 然目前的平面设计软件支持直接从RGB图像分色为CMYK四色片， 但这种分色过程会造成大量的色彩丢失（这很好理解，因为RGB能 显示的色彩远多于CMYK），你做得很漂亮的东西也许印出来效果一 塌胡涂，和你想象的效果相差甚远。为了保证你的作品所见即所得， 你最好在定稿前转为CMYK模式，在屏幕上看看效果，如果不理想， 就更换一些色彩。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动