动态网页设计第6章.pptVIP

教育技术学动态网站设计与开发 The Development and Design of Dynamic Website 实验一 站点规划及文本网站设计讲评 实验目的的实现： 基本掌握了站点规划的方法和步骤，但分类与命名还应再强化 在设计个人简历的过程中，掌握了文本元素的应用 掌握了超链接的操作 大多数同学较熟练地掌握了网站的上传与维护操作 存在问题： 课程内容学习时建立不起来知识网络，导致知识点是孤立的，遗忘很快 操作习惯，只需打开四个窗口 对中英文编码的认识不够，如ab(英文)，ａｂｃ(中文) 有个别同学上课时不记，实验时不知该做什么！ 内容回顾 超链接 超链接基础 URL组成格式 相对URL与绝对URL 超链接分类1 实体链接 虚链接 超链接分类2 网页之间的超链接 页面内的超链接(锚点超链接) 文件下载超链接 Email超链接 空超链接 设置步骤 （定义锚点）选中起点对象 属性面板“指向链接”（mailto:邮箱） 本节内容 版面布局 版面布局基础知识 版面设计 版面设计的要求 版面设计的技术路线 表格 表格定位 表格作用 规范数据 页面布局 表格基本知识 行、列、单元格 表格基本操作 表格的行列合并 表格对齐 表格的属性设置 表格嵌套 细线表格 表格运用的注意问题 版面布局基础知识 版面设计 网页的版面设计，是指将文字、图形图像、色彩、动画、视频多媒体等网页对象的要素，根据特定内容和主题，在网页限定范围内将设计意图以视觉形式表现出来。 页面版式设计 页面版式设计就是指采用一种合适的技术将网页的内容显示在浏览器中。在网页中可以使用多种方式进行版式设计，以形成一个统一的站点风格并获得需要的效果。一般可以用表格、层和框架这三种方式进行页面版式设计。 版面设计的要求 要求： 从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画、正文等内容展开页面布局的。在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。 从审美角度出发，要求设计师运用统一、对比、对称、均衡等形式原理进行设计，利用网页中的元素构造出和谐、流畅、自然的网页界面。 版式的实用功能 主次分明、重点突出 应能让浏览者迅速找到网页的主题，并对整个页面有全面的掌握 导航清晰、便于浏览 网页应该具有一致风格的导航系统，为用户浏览提供方便 布局合理、逻辑性强 应能使网页中的各种视觉信息在页面中合理、有序地排列，既要体现出设计思想，又要符合一般的视觉原理和思维习惯 版式的审美功能 统一，是指设计作品的整体性、一致性。 分割，是指将页面划分为不同区域，以便妥善安排各种页面组成元素。 对比，是指通过合理运用矛盾和冲突，使设计更加富有生机和活力。 演示——页面版式示例 演示——页面版式示例 演示——页面版式示例 演示——页面版式示例 页面版式示例 版面设计的技术路线 页面布局的技术路线有2个： 表格 学校、事业单位 DIV+CSS 商业网站 二者混合 新浪、网易、清华大学、河南师大 表格定位 在网页设计中，为了在用户浏览信息时网页的内容在不同的显示器分辨率、不同的浏览器中有比较固定的显示效果，常采用表格定位的方式，让网页信息按照设计人员预定的位置、版式呈现给用户。 演示——嵌套表格举例 表格作用 规范数据 页面布局 表格在页面排版中的作用 表格能将页面划分为任意矩形区域，所以是最常用的一种页面布局工具。实际上，在 Internet 上的绝大多数网页都是用表格辅助布局的。 常用显示器的分辨率对表格宽度的要求：760px 表格的基本知识 表格 行 列 单元格 表格基本操作 表格基本操作 插入、删除、选择、合并、拆分、嵌套 样式：背景颜色、背景图、边框颜色、格式化表格 排版：对齐 表格的行列合并 合并行 合并列 表格对齐 表格的页面对齐 表格内容的对齐 水平对齐 垂直对齐 控制单元格空白 Cellspacing属性 Cellpadding属性 版面设计举例 用DW布局如图所示的网站主页 版面设计举例 新闻栏目怎么规划？ 嵌套表格 复杂的网页布局需要借助嵌套表格！ 演示——嵌套表格举例 典型主页布局效果图 表格的堆叠与嵌套 使用表格堆叠还是嵌套，要视具体情况而定，当页面内容较少时，可使用嵌套，当页面内容较多时，应使用堆叠。 表格应用技巧 综合应用表格的各种属性，可以创建一些常用的网页效果，例如： 固定效果的行间距 细线（水平和竖直） 细线表格 固定效果的行间距 table width=100% border=0 align=center cellpadding=0 cellspacing=0 tr td height=6px /td /tr /table 例子