动态网页设计第七章.pptVIP

教育技术学动态网站设计与开发 The Development and Design of Dynamic Website 实验二页面规划与布局 讲评 实验目的： 掌握了表格的插入、属性设置等常规操作 能够运用表格的堆叠或嵌套有效地规划与布局页面 掌握了常用表格技巧（行间距、细线表格、细线和颜色条）操作 存在问题： 依内容确定是运用表格的堆叠或嵌套，嵌套层次尽量要少 根据实际需要运用表格技巧 单一表格的结构尽量整齐 用表格有效地规划与布局页面还需在实践中强化 内容回顾 版面布局 版面布局基础知识 版面设计（是根据特定内容和主题用页面元素表现设计意图） 版面设计的要求（构造出和谐、流畅、自然的网页） 版面设计的技术路线（表格、DIV+CSS及二者混合） 表格 表格作用（规范数据和页面布局） 表格基本操作（插入、删除、合并、拆分、对齐、各种属性设置等） 表格嵌套和堆叠 表格技巧（行间距、细线表格、细线和颜色条） 用表格规划页面的常用方法 一个表格内嵌入多个表格。适用于：单屏页面，内容比较少的情况。 多个表格堆叠，再嵌入表格。适用于：多屏页面，内容比较多的情况。 静态网页设计知识体系 第一： Dreamweaver基本操作、站点规划（结构和导航清晰 ） 第二： 文本网站（主题明确） 超链接（人机交互方便，链接无误） 第三： 版面布局（表格）（布局设计） 层与框架 第四： 多媒体对象（完美运用各种形式表现主题，不包含美工设计） 第五:(动态部分) 表单（人机交互） 本节内容 多媒体对象 图像基础 图像基础(图像分类、像素和分辨率、颜色、颜色模式、文件格式) 网页图像基础（图像格式、网页颜色、图像搜集、图像使用） 网页中使用图像原则 使用图像(插入图像、 制作图像效果、图像链接、网站相册等） 其它多媒体对象在网页中的应用 视频 动画 图像基础 计算机图像分为两大类 位图图像 矢量图形 图像基础 计算机图像分为两大类 位图图像 位图是指以点阵方式保存、由像素点组合而成的图像，主要用于保存各种照片图像。具有色彩丰富、过渡自然的图像效果；在保存位图时，计算机需要记录每个像素点的位置和颜色，所以图像像素点越多（分辨率高），图像越清晰，文件就越大。 一般来说，我们能直接通过照相、扫描、摄像得到图形都是位图图像。 但是位图的缺点也很明显，一是文件容量较大，二是放大图形并不能增加图形的点数，因此就可以看到其不光滑的边缘和明显的颗粒，质量不容易得到保证。 常用的位图软件有Photoshop, Firework,Cool3D,Painter等 矢量图形 图像基础 计算机图像分为两大类 位图图像 图像基础 计算机图像分为两大类 位图图像 矢量图形 由一系列数学公式表达的线条所构成的图形；与分辨率无关，图形的线条非常光滑、流畅，将图形放大到任意程度，其线条依然可以保持良好的光滑性及比例相似性，图形整体不变形；矢量图形文件所占空间较小。编辑这种矢量图形的软件通常称为绘图程序（draw program），如Autodesk公司开发的 AUTOCAD软件，它特别适于绘制机械图，电路图等。 工程设计图、图表、插图经常以矢量图形曲线来表示。 常用的矢量绘图软件AutoCAD,CorelDraw,Illustrator,Freehand等 矢量图的不足：当图变得很复杂时，计算机就要花费很长的时间去执行绘图指令才能把一幅图显示出来。对于一幅复杂的彩色照片，恐怕就很难用数学来描述，用矢量图来表示。 图像基础 计算机图像分为两大类 位图图像 矢量图形 图像基础 像素和分辨率 像素大小：指位图在高、宽两个方向的像素数。 图像分辨率：指打印图像时，在每个单位长度上打印的像素数，通常以“像素／英寸”（pixel/inch，ppi）来衡量。 像素和分辨率 图像基础 显示器分辨率：在显示器中每个单位长度显示的像素或点数，通常以“点／英寸”（dot per inch --dpi）来衡量。显示器的分辨率依赖于显示器尺寸与像素设置，个人计算机显示器的典型分辨率通常为96dpi。 图像基础 颜色代表含义 红色：代表热情、奔放、喜悦、庆典 黑色：代表严肃、夜晚、沉着 黄色：代表高贵、富有 白色：代表纯洁、简单 蓝色：代表天空、清爽 绿色：代表植物、生命、生机 灰色：代表阴暗、消极 紫色：代表浪漫、爱情 颜色的运用 不仅包括正确地选择单色，还包括正确地搭配几种颜色。在搭配颜色时，可以从颜色的面积大小、颜色差异性方面考虑。 在统一中求变化，在变化中求统一是颜色搭配的原则与基准。 常见颜色搭配 暖色系搭配：红色与黑色、黄色与红色 冷色系搭配：绿色与白色、蓝色与白色 多色搭配方法：通常在一个设计作品中所应用的颜色种类不应该多于三种或四种。 非彩色系搭配：非彩色系的颜色是指黑、白、