《动态网页设计 第六章》由会员分享，可在线阅读，更多相关《动态网页设计 第六章（41页珍藏版）》请在金锄头文库上搜索。
1、河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发教育技术学 动态网站设计与开发The Development and Design of Dynamic Website 梁存良 Xinxiang, Mar. 24th, 2011 Department of Educational TechnologyDepartment of Educational Technology of of Henan Normal University Henan Normal University, , ChinaChina河南师范大学河南师
2、范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发实验一 站点规划及文本网站设计 讲评 u实验目的的实现：p 基本掌握了站点规划的方法和步骤，但分类与命名还应再强化 p 在设计个人简历的过程中，掌握了文本元素的应用 p 掌握了超链接的操作 p 大多数同学较熟练地掌握了网站的上传与维护操作u存在问题：p 课程内容学习时建立不起来知识网络，导致知识点是孤立的，遗 忘很快 p 操作习惯，只需打开四个窗口 p 对中英文编码的认识不够，如ab(英文)，(中文) p 有个别同学上课时不记，实验时不知该做什么！河南师范大学河南师范大学 教育技术学教育技术学
3、技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发内容回顾u超链接 p 超链接基础 URL组成格式 相对URL与绝对URL p 超链接分类1 实体链接 虚链接 p 超链接分类2 网页之间的超链接 页面内的超链接(锚点超链接) 文件下载超链接 Email超链接 空超链接 p 设置步骤 （定义锚点）选中起点对象 属性面板“指向链接”（mailto:邮箱）河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发本节内容u版面布局 p 版面布局基础知识 版面设计 版面设计的要求 版面设计的技术路线 p 表格 表格定
4、位 表格作用 规范数据 页面布局 表格基本知识 行、列、单元格 表格基本操作 表格的行列合并 表格对齐 表格的属性设置 表格嵌套 细线表格 表格运用的注意问题河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发版面布局基础知识u版面设计 p网页的版面设计，是指将文字、图形图像、色彩、动 画、视频多媒体等网页对象的要素，根据特定内容和 主题，在网页限定范围内将设计意图以视觉形式表现 出来。 河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发页面版式设计u页面版
5、式设计就是指采用一种合适的技 术将网页的内容显示在浏览器中。在网页 中可以使用多种方式进行版式设计，以形 成一个统一的站点风格并获得需要的效果 。一般可以用表格、层和框架这三种方式 进行页面版式设计。 河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发版面设计的要求u要求： p从网页技术角度讲，设计者通常是围绕着页面中的导 航栏、图像、动画、正文等内容展开页面布局的。在 页面制作过程中要确定一个页面的布局，应该综合考 虑如何安置页面中的各种内容，比如标题文字、导航 栏、图片、动画、超链接等。 p从审美角度出发，要求设计师运用
6、统一、对比、对称 、均衡等形式原理进行设计，利用网页中的元素构造 出和谐、流畅、自然的网页界面。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发版式的实用功能 u主次分明、重点突出 p应能让浏览者迅速找到网页的主题，并对整个页面 有全面的掌握 u导航清晰、便于浏览 p网页应该具有一致风格的导航系统，为用户浏览提 供方便 u布局合理、逻辑性强 p应能使网页中的各种视觉信息在页面中合理、有序 地排列，既要体现出设计思想，又要符合一般的视 觉原理和思维习惯 河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动
7、 态态 网网 站站 设设 计计 与与 开开 发发版式的审美功能 u统一，是指设计作品的整体性、一致性 。 u分割，是指将页面划分为不同区域，以 便妥善安排各种页面组成元素。 u对比，是指通过合理运用矛盾和冲突， 使设计更加富有生机和活力。 河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发演示页面版式示例河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计
8、与与 开开 发发演示页面版式示例河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发演示页面版式示例河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发演示页面版式示例河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发页面版式示例河南师范大学河南师范大学 教育技术学教育技术
9、学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发版面设计的技术路线u页面布局的技术路线有2个：p表格 学校、事业单位 pDIV+CSS 商业网站 p二者混合 新浪、网易、清华大学、河南师大河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发表格定位u在网页设计中，为了在用户浏览信息时网 页的内容在不同的显示器分辨率、不同的 浏览器中有比较固定的显示效果，常采用 表格定位的方式，让网页信息按照设计人 员预定的位置、版式呈现给用户。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动
10、 态态 网网 站站 设设 计计 与与 开开 发发演示嵌套表格举例河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发表格作用u规范数据u页面布局河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发表格在页面排版中的作用u表格能将页面划分为任意矩形区域，所 以是最常用的一种页面布局工具。实际上 ，在 Internet 上的绝大多数网页都是用表
11、格辅助布局的。 u常用显示器的分辨率对表格宽度的要求 ：760px河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发表格的基本知识u表格 p行 p列 p单元格河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发 表格表格列列行行单元格单元格边框边框cellspacingcellspacingcellpaddingcellpadding河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发表格基
12、本操作u表格基本操作 p插入、删除、选择、合并、拆分、嵌套 p样式：背景颜色、背景图、边框颜色、格式化表格 p排版：对齐河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发表格的行列合并u合并行u合并列河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发表格对齐u表格的页面对齐u表格内容的对齐 p水平对齐 p垂直对齐河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发控制单元格空白uCells
13、pacing属性uCellpadding属性河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发版面设计举例u用DW布局如图所示的网站主页河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发版面设计举例u新闻栏目怎么规划？新闻新闻是拆分还是是拆分还是“ “？” ”河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发嵌套表格u复杂的网页布局需要借助嵌套表格！河南师范大学河南师范大学 教育技术学教
14、育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发演示嵌套表格举例河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发典型主页布局效果图Logobanner主页 nav1 nav2 nav3 nav4 nav5 nav6快捷链接公告新闻或简介友情链接联系方式页脚（版权信息）河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发表格的堆叠与嵌套u使用表格堆叠还是嵌套，要视具体情况而 定，当页面内容较少时，可使用嵌套，当 页面内容较多
15、时，应使用堆叠。河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发表格应用技巧u 综合应用表格的各种属性，可以创建一些 常用的网页效果，例如： p固定效果的行间距 p细线（水平和竖直） p细线表格河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发固定效果的行间距u p p u u例子 p普通动物学网络课程的“教学队伍”栏目主页的最下 粉色表格与上面表格的间距！河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设
16、计计 与与 开开 发发细线（水平和竖直）up pu河南师范大学河南师范大学 教育技术学教育技术学技 术 革 新 教 育动动 态态 网网 站站 设设 计计 与与 开开 发发细线表格u我们常常遇到添加表格边框以区别不同的内容的情况，但 将表格边框宽度“border”设置为“1”时，边框又显得过于突 出，那么，能不能制作细线边框呢？u原理： p 遮挡法 p 属性“cellspacing”表示的是单元格与单元格的间距。在设置整个表格的背 景色时也包含了这个间距，而设置单元格的背景色时却不包含这个间距 ，看到的表格边框线其实就是单元格与单元格的距离所显示的 （控制像 素数就可设计出各种细线表格） u制作方法： p 插入一个一行一列的表格。 p 将表格的“border”、“cellpadding”设置为“0”，“cellspacing”设置为“1”。 p 将表格的“bgcolor”=“#00
