网站设计案例.doc

1 目目 录录 第第 1 章章 网站规划与网页设计网站规划与网页设计 3 第第 2 章章 DIV CSS 布局布局 18 第第 3 章章 网页内容排版网页内容排版 36 第第 4 章章 表格布局表格布局 57 第第 5 章章 模板模板 68 第第 6 章章 布局表格布局布局表格布局 78 第第 7 章章 框架布局框架布局 84 第第 8 章章 浮动框架浮动框架 91 第第 9 章章 图像制作与处理图像制作与处理 98 第第 10 章章 JAVASCRIPT 应用应用 111 第第 11 章章 行为应用行为应用 127 第第 12 章章 层和时间轴动画层和时间轴动画 139 第第 13 章章 ASP 环境配置与表单创建环境配置与表单创建 152 2 第第 14 章章 注册登录注册登录 167 第第 15 章章 网上留言和信息显示网上留言和信息显示 181 第第 16 章章 后台管理系统架设和使用后台管理系统架设和使用 190 第第 17 章章 网站测试完善及发布维护网站测试完善及发布维护 196 3 第第 1 1 章章 网站规划与网页设计网站规划与网页设计 知识能力目标知识能力目标 1 了解网站开发流程 规划的要求 网页设计的原则 2 了解常见网页制作软件特点和用处以及 Dreamweaver 的操作环境 3 会规划网站 建立站点 4 会操作 Dreamweaver 环境 5 能制作简单网页并保存 打开 预览网页 6 会进行本地站点的基本管理 任务描述任务描述 1 1 规划网站 规划网站 从网站的需求分析 主题和内容 名称 整体风格 结构等方面对电子系网 站项目进行整体规划 同时设计出主要网页的版式和网站 Logo 2 2 熟悉网站开发环境 熟悉网站开发环境 启动 Dreamweaver 后熟悉编辑界面上的标题栏 菜单栏 文档工具 文档窗 口 功能面板及状态栏及其功能 3 3 站点管理 站点管理 创建电子系网站站点 并对本地站点进行管理和操作 图 1 1 本地站点效果图 4 4 制作站长简介网页 制作站长简介网页 根据自身具体情况制作站长简介网页 4 图 1 2 站长简介网页效果图 预备知识预备知识 1 1 1 1 网站和网页概述网站和网页概述 1 与网站和网页有关的基本术语 与网站和网页有关的基本术语 WWW是World Wide Web的简称 常称为3W 或 The Web 或 万维网 它是一种建立在Internet上的全球性的 交互的 动态 多平台 分布式的图形信 息系统 遵循HTTP协议 HyperText Transfer Protocol 主要以 超文本 Hypertext 或 超媒体 Hypermedia 的形式提供信息 浏览网页是WWW 操作之一 URL 即Uniform Resource Locator 它是Internet上信息资源的定位方法 Server与Browser 即服务器与浏览器 用户必须通过浏览器连接到Web服务 器上 才能阅读Web服务器上的文件 网站 即站点 是Internet上提供Internet服务的一个位置 该位置由独一 无二的IP地址或域名描述 网页 是指站点中由文本 图像 超链接 动画 声音 视频等内容组成的 文档 Hypertext 超文本 是一种可以指向其它文件的文字或图像 这种功能 5 称为超级链接 HyperLink HTML语言 是用来描述组成网页的各个元素的语言 HTTP Hypertext Transfer Protocol 是一种网络上传输数据的协议 专 门用于传输万维网中的信息资源 ASP页面 包含程序的网页 ASP现已发展成一门技术 该技术提供一个服 务器端的脚本执行环境 可以执行包含程序 由ASP内置对象和编程语言编写 的页面 CSS Cascading Style Sheet 用于控制表格 图片 文本等元素的效果 2 网站建立方式 网站建立方式 建立网站时可使用自己的Web服务器 也可采用托管服务器 因接入互连网 要租用国际信道和电话线 并需建立中转站 购置一系列计算机设备 费用昂贵 故它们由ISP代劳 然后 ISP再向本地用户提供接入服务 ISP是提供接入服务 的中介 托管服务器只是其中的一项服务 如某单位将服务器放在ISP机房由ISP 维护 单位则通过低速线路 64KB 155MB S 进行网站的远程管理与维护 然后单位向ISP交纳计算机机架的空间租用费和分摊的接入费用 还可采用虚拟 主机 即租用ISP硬盘空间 有独立的域名和共享或独立的IP地址 按空间大小 和网络宽带资源收费 优点是费用低 缺点是不支持高访问量 它适用于小型网 站 如企业网站 个人网站也采用虚拟主机或虚拟目录存放到收费或免费的空间 中 也可以拥有独立的域名 3 中小型网站开发的一般流程 中小型网站开发的一般流程 中小型网站开发通常包括3个阶段 1 网站规划与网页设计阶段 网站需求分析 确定网站主题和内容 规划网站的整体风格 规划网站结构 设计页面版式 2 网页制作阶段 页面布局 页面内容排版处理 根据需要实现动态功能 各个网页相链接 3 测试发布与管理维护阶段 网站测试与完善 网站空间申请 发布 推广 网站维护 更新 6 1 1 2 2 Dreamweaver 概述概述 1 1 常用工具简介 常用工具简介 常用的网页制作软件工具有 Frontpage Homesite Hotdog HomePage 常 用于制作包含多个分栏的页面 Dreamweaver系列 Golive等 各有特点 常用的网页素材处理工具有 Photoshop Fireworks Flash LiveMotion FreeHand CorelDraw Illustrator GIF Animator Cool3D Anfy 2 Dreamweaver简介简介 当今 动态网站是Word Wide World上网站发展的必然趋势 如电子商务 虚拟社区等 而Dreamweaver 是Macromedia公司开发的 其最新版本已到9 0 它代表了此领域最先进的设计理念与技术 它不仅可以进行专业网页编辑及版面 设计 还可以轻松地与数据库 ODBC ADO JDBC 连接 几乎不用写一行 代码就能以可视化的方式开发出功能完整的网站应用程序 1 Dreamweaver的具体应用 大型综合网站 企业内部经营管理系统 如销售和库存 员工管理系统 电子商务网站 网上购买 销售 新闻和信息网站 用到信息库 交互式的网上教学网站 选择学习方式 讨论 测试等 企业网站 个人网站 2 Dreamweaver的特性 新颖的操作界面 2种不同风格的界面 分为Dreamweaver工作区 即设计者 HomeSite代码 风格 即代码编写者 切换方法 编辑 首选参数 中 更改工作区 伸 缩自如的功能面板 单击小三角形或快捷菜单可动态地启动 隐藏 打开 关闭 多文档操作界面 编辑界面中整合了多个文档编辑窗口方便切换 插入面板功能丰富 分若干个小类 拥有各种预定义页面布局 执行 文件 新建 后 可看到各种预定义的页面布局和脚本 强大的模板功能 强大的标签编辑功能 内置了标签编辑器 标签检查器 代码片断 支持多种文件类型 强大的动态数据库开发功能 支持ASP JSP ColdFusion ASP NET VB ASP NET C PHP 7 MySQL XML等 提供了全面的HTML ASP JSP CFML等的开发环境 不 需要掌握复杂的程序语言就可打造出专业的动态数据库网站 实现从页面设计师 到网络程序设计师的过渡 任务实现任务实现 1 1 3 3 规划网站规划网站 从网站的需求分析 主题和内容 名称 整体风格 结构等方面对电子系网 站项目进行整体规划 同时设计出主要网页的版式和网站Logo 说明 说明 如何规划网站 在创建网站之前 应合理地进行规划 包括进行必要的需 求分析 策划网站的主题和内容 规划网站的整体风格 结构 设计页面版式等 方面 以避免设计开发的盲目性 网站需求分析网站需求分析 网站是用来向浏览者提供所需信息的 因此 创建网站首先必须要进行网站 需求分析以便明确设计开发网站的目的和用户需求 从而做出切实可行的设计计 划 要弄清开发的网站有哪些类型的用户使用 各个用户又有哪些不同的需求 网站的功能是什么等等 为网站设计提供可靠的依据 确定网站主题和内容确定网站主题和内容 主题是网站所要表达的主要内容 如摄影界大名鼎鼎的色影无忌网站 的主题是关于摄影技术论坛和摄影月赛的 虽没有商业网站的奢 华 却汇集了丰富的人气 同样的主题 可以有不同的立意 设计 主题是网站的灵魂 它决定了网站的内容和风格 内容要为主题服务 尽量 选用与主题相关的内容 如旅游类网站主要介绍旅游景点 旅游线路 旅游价格 旅行社 土特产品等内容 公司网站应介绍公司的理念和特色 管理情况 产品 情况 售后服务等内容 内容较多时应划分成几个板块 如生活 旅游 健康 IT等 既方便设计又方便浏览 主题定位时一般要选择自己最擅长的题材 主题要小而精 切忌兼容并包 主题贵在创新 主题的题材包括网上求职 网上聊天 即时信息 ICQ 网上社区 讨论 邮件列 表 计算机技术 网页 网站开发 娱乐网站 旅行 参考 资讯 家庭 教育 生 活 时尚等 而其中的每一类还可细分 如娱乐类可再分为体育 电影 音乐等 音 乐又可分为MP3 VQF Ra等 各个题材交叉结合又可产生新的题材 如旅游论 坛 旅游 讨论 故题材有成千上万种 网站的名称应与主题紧密相关 要能体现网站主题 响亮的名称能给站点的 推广带来便利 如 闪客帝国 色影无忌 电子邮局 网站名称若 8 能与域名配合 可方便浏览者记忆 有利于提高访问量 如 当当网上书店 8848商城 当选择网站名称时要注意做到易记 健康 特色 除非特别需要 应尽量使 用中文名称以符合中文网站浏览者的特点 规划网站的整体风格规划网站的整体风格 网站的整体风格是网站整体给浏览者的综合感受 它应该是网站与众不同 的特色 包括网站页面字里行间透露出作者或企业的文化品味和行事风格 整体 风格应与网站的主题相匹配 如新浪是很快速的 迪尼斯是生动活泼的 IBM是 专业严肃的 学术机构和政府团体的网站体现出严谨 科学和庄重的气氛 商业 网站体现奢华 班级网站的风格应有一种轻松愉快 生动活泼的气息 不能太严 肃 体育类网站体现运动 个人网站体现个性化 网站的整体创意是网站生存的关键 它是一种灵感 思考的结果 传达信 息的特殊方式 对现有要素的重新组合 如将网络虚拟环境和现实结合起来往往 会有奇思妙想产生 比如在线书店 电子邮局 电子社区 在线拍卖 电子贺卡 等类似主题的网站 网站风格通过各个页面体现 包括页面的版式结构 色彩搭配 图像动画 等 在各页面中最主要的是主页 规划网站结构规划网站结构 制作网站之前最好先对各个页面文件的存放位置 各关键网页之间的关联 尤其是主页与次页 导航机制做一个大致的规划 这种规划应和网站的内容 紧密结合 只有当结构和内容成功结合时 制作出的网站才是受人欢迎的 取任 何一面你都无法留住太过 挑剔 的访问者 在存放位置上 尽量不要将所有的文件都存放在根目录下 可根据网站中各 个文件的性质决定是否分类存放到不同的文件夹中 如图片文件 动画文件 脚 本文件 某一栏目的文件 公共文件等 目录的层次也不宜过深 最好不要超过 四层 合理的目录结构对于网站的维护 扩展 移植有很大的影响 各个网页间的关联从总体上分为三种类型 层次结构 线性结构 网状结构 层次结构 这是架构各网页文档的最简易 最具有逻辑性的方法 适用于在线帮助和教学文档 在该结构中 主页提供了对它以下内 容的总体概况 还定义了一些指向层次结构中更深层次页面的链接 当往上走时获得更加泛化的信息 往下走时获得更具体的信息 如 sina sohu等 线性结构 主页是题目或介绍 而其他的页面则是按照这种结构有 9 序地跟从 一个严格的线性结构中 链接从一个页面到另一个页面 即向前向后 如在线阅读 描述工作过程之类的网站 网状结构 它是一系列具有很少或者根本不具有总体结构的文档结 构 将每个页面系在一起的唯一的东西就是链接 网状结构允许读 者无目的地在内容之中游荡 导航是网站设计不可缺少的元素之一 它不仅仅是信息结构的基础分类也是 浏览者浏览网站的路标 设计导航时要从浏览者使用方便的角度出发 要放置在 明显 易找的区域 让浏览者进入网站第一时间就可以看到它 导航标题应明确 一目了然 文字性标题常是页面内容的概括 而图像性标 题往往更醒目 如搜狐网站用狐狸作为指向搜狐首页的链接图标 导航样式有很多 包括横排导航 竖排导航 多排导航 图片式导航 下拉 菜单导航等 网站导航的表现形式主要有 菜单 站内搜索引擎 当前浏览位置等 菜单 是网站最常见的导航方法 一个好的菜单系统关键在于能适 应网站的层次需要 并且容易让浏览者理解网站的结构 站内搜索引擎 提供了一种主动查询方式 浏览者只要把自己需要 寻找的内容的关键字输入到搜索引擎中 网站将自动地查找出站内 符合条件的页面 这是一种人性化的做法 当前浏览位置 就是在网站的每个页面中加入当前位置的文字说明 并逐级加入链接 一个优秀的网站应该结构清晰 导航简单方便 浏览者能够快速准确地找到 所需信息 站点规划的要决 选择一个好的有创意的域名 如当当网上书店的域名 加快首页的载入速度 如减少不必要的图片动画 尽量不用Java特效 因为Java特效载入时速度很慢 不用框架进行首页的整体设计 总体清晰可见 网页字体大小尽量保持一致 栏目创意吸引人且具有 一定的内涵和针对性 首页不要堆砌太多的内容 如学术机构和政府 团体的网站首页通常简洁明了 分类醒目 提供丰富的学术信息和准 确的信息 机构设置 教学情况 科研动态 录取信息 行业规章 政策法规等 并有信息发布区域 作好站内的内容搜索目录和引擎服务 相关信息要完整 如标题 EMAIL 版权 联络资料等 网页设计的原则与方法 10 网页设计的基本原则 用户至上原则 易用性原则 实用性原则 页面布局类型包括上下型 左右型 杂合型 封面型 Flash动画型 等 页面内容包括文字和图像 文字又分为标题和正文 在编排时 主要考虑以下几点 主次分明 中心突出 大小搭配 相互呼应 图文并茂 相得益彰 适当留空 清晰易读 页面内容分块方法 利用留空和划线进行分块 利用色块进行分块 利用线框分块 网站标志Logo如同商标一样 是网站特色和内涵的集中体现 Logo 标志可以是中文 英文字母 符号 图案 动物或者人物等 标志 的设计创意来自网站的名称和内容 可以分为三个方面 网站有代表性的人物 动物 花草 可以用它们作为设计蓝本 加以卡通化和艺术化 网站有代表性的物品 可以用物品作为标志 用自己网站的英文名称作标志 采用不同的字体 字母的变形制 作标志 网页色彩设计 a 色彩的基本知识 三原色 是指能够按照一些数量规定合成其他任何一种颜色的基 色 所有的颜色其实都是由三原色按照不同的比例混合而来 电 脑屏幕的色彩是由红 绿 蓝三种原色组成 色彩三要素 色相 饱和度和明度 b 颜色由红 绿 蓝三原色组合而成 在网页中采用十六进制对颜色 进行定义 也可使用预设的颜色名称 c 颜色与心里反应 当看到不同的颜色时 会产生不同的心里感觉 这就是一种色彩意向 d 页面色彩的搭配技巧 特色鲜明 搭配合理 讲究艺术性 合理使用邻近色 11 合理使用对比色 巧妙使用背景色 严格控制色彩的数量 网页页面元素设计 a 页面标题设计 页面标题相当于商店的招牌 标题通常位于页面的 上端或中央 清楚明确地表示出来 标题大小 粗细要合适 标题使用鲜艳的色彩 利用空间突出标题 b 页面中文字设计 文字字体的选择 正文文本一般可使用系统默认的中文字体 如 宋体 黑体 楷体 仿宋体 行书 隶书 魏碑 和西文字体 如Times New Roman Arial Impact 若需特殊字体 尽量 用特殊字体式的图片 文字粗细的确定 文字变细会显得十分优美 反之将文字变粗会 显得有力 文字字号的确定 正文文本字号一般设置为12px左右 版权声明 等文本一般设置为10px左右 标题文本一般设置为14px左右 文字的字间距和行间距 字间距和行间距在某种程度上会改变访 问者的阅读心理 c 页面中图像应用 传递信息的视觉要素包括版式 文字 图像 色 彩等 网页中图像在信息传达上应用具备以下功能 要有良好的视觉吸引力 能吸引浏览者的注意力 要简洁明确地传达网站信息 能使人们一目了然地抓住网站信息 的重点 要有强而有力的诱导作用 造成鲜明的视觉感受效果 从观看过 程中产生愿望和欲求 对图像的处理主要包括以下几个方面 图像的外形处理 图像的面积处理 图像的数量处理 图像的背景处理 网页设计的规范网页设计的规范 a 网页版面尺寸规范 网页的宽度 大部分用户仍使用15英寸和17英寸显示器 采用 12 800 600分辨率的用户仍不少 一般按800 600分辨率规格设计 网页的长度 一般不宜超过3屏 最佳长度为1 8 2 5屏 网页文件大小 网站的首页大小 包括所有图像 文本 多媒体 对象 不宜超过30KB 网站的二级页面的文件 包括所有图像 文本 多媒体对象 不宜超过45KB 如果网页大太 网页下载 的速度会变慢 影响浏览速度 广告尺寸 应为标准尺寸 全尺寸banner不超过14KB b 文件夹 文件命名规范 文件夹命名一般采用英文小写字母或中文拼音及缩写 如图形文 件夹命名为image 存放flash文件的文件夹命名为flash 存放CSS 样式表文件的文件夹命名为style或CSS 存放JavaScript脚本的文 件夹命名为JS 存入友情链接的文件夹命名为link 存放indlude 文件的文件夹命名为include等 文件名称统一用小写的英文字母或拼音及缩写 数字和下划线的 组合 主页命名为index htm或index html 主内容页命名为main htm或 main html 1 1 4 4 熟悉网站开发环境熟悉网站开发环境 1 1 安装 安装DreamweaverDreamweaver 双击安装程序后直接安装 安装时默认安装主目录为 c Inetpub wwwroot 也可根据需要更改 其余安装选项按默认选项进行 现设 置安装路径为d dreamweaver 2 2 使用以下方法之一启动 使用以下方法之一启动 DreamweaverDreamweaver 方法一 执行 开始 程序 Macromedia Macromedia Dreamweaver 则打开编辑环境并显示项目选择界面 从而可新建一空白HTML文档进行编辑 方法二 在Windows 窗口或资源管理器中直接启动Dreamweave并载入要编 辑的HTML文档 即右击要编辑的HTML文件 带有浏览器图标 并在快捷菜单中 选 使用 Dreamweaver编辑 命令 3 熟悉 熟悉Dreamweaver编辑界面上的标题栏 菜单栏 文档工具 文档窗口 编辑界面上的标题栏 菜单栏 文档工具 文档窗口 状态栏及状态栏及功能功能面板面板 1 执行 文件 新建 菜单命令新建一个HTML网页文档 标题为 站长简 介 再在当前文档中插入1x1表格 宽760px 居中对齐 在表格中输入 站长 个人档案 并使用状态栏的标记选择器选择该段文本 使用属性面板设置成标题 3 水平居中 13 说明 说明 Dreamweaver 不像一个纯粹的Windows应用程序 它的使用方法同 PageMaker和Photoshop之类的软件类似 而同微软建议的Windows应用程序的外 观标准有一定的差别 事实上 Dreamweaver 应用程序的外观是与其异常灵活的 功能特性分不开的 标题栏可显示正在编辑文档的标题和文件名称 菜单栏包含了所有的操作 命令 位于插入面板下面的文档工具栏包括代码和设计视图选项 标题框 检查 浏览器 文件管理 预览 刷新设计视图 视图选项等 文档窗口显示所创建和 编辑的各个HTML文档内容 状态栏包括如下项目 标记选择器 用于显示插入点位置的HTML源代码标记或选中标记在 文档中对应的内容 例如 鼠标置于文档中某一元素上会在标记选择 器上显示对应的标记 单击标记选择器上的可选中文档所有位 于 body 和 body 标记中的内容 在标记选择器上右键 会出现 快捷菜单 允许对标记做进一步的处理 手形工具 移动滚动条查看文档内容 缩放工具 对当前文档窗口进行缩放 窗口大小 窗口大小弹出菜单当前选项显示当前文档窗口的大小 以 像素为单位 将文档窗口还原后可重新设置其窗口大小 其中的 760 x 420 800 x 600 最大值 指在分辨率为 800 x 600的显示 器上 将浏览器窗口最大后观看到的文档窗口大小 这里已剔除了浏 览器边框尺寸 如要定制窗口大小 则可从文档窗口弹出菜单中执行 编辑大小 命令 文档大小和下载速度 默认状态下 系统假设用户使用56 0KB S的调 制解调器下载当前网页 在 编辑 首选参数 状态栏 中可选择不同 连接速度的调制解调器 在 窗口 菜单中集成了所有的功能面板 可以打开或关闭之 还可以重 新排列组合面板 如可将 历史记录 面板组合到 设计 面板中 它们的存在 极大地方便了网页的编辑和处理 2 执行 查看 网格 显示出网格 菜单命令显示出网格 说明 说明 标尺和网格用于在网页排版过程中对网页元素精确定位用 3 执行 修改 页面属性 菜单命令后在 标题 编码 中设置当前网页 的编码方式为简体中文 说明 说明 14 在网页中 不同的语言文字应该有不同的文字编码方式 中国大陆使用的简 体汉字采用GB2312内码 通称国标码 而港 澳 台地区使用的繁体汉字 则采用BIG内码 通称大五码 如果编码方式设置不对 则在浏览器中不能正 确显示文字 Deamweaver完全支持中文双字节的环境 默认情况下 无需任何设置 即 可进行正确的中文网页创作 若需对某一具体网页进行设置 需在 修改 页面 属性 标题编码 中进行 4 执行 修改 页面属性 菜单命令后在 外观 中设置页面背景为图 像bg gif 说明 说明 当背景颜色和背景图像同时设置时先显示背景颜色 后显示背景图像 因此 当网速较慢时会看到明显的过程 如果背景图像有透明区域 则这些区域中将会 看到背景颜色 其它区域只能看到图像 5 关闭标尺和网格的显示 6 执行菜单命令 修改 页面属性 菜单命令设置当前网页背景 如兰 色 红色等 和字体颜色 如绿色 橙色等 再保存网页为zzjj html 1 1 5 5 本地站点管理与网页制作本地站点管理与网页制作 1 执行 窗口 文件 菜单命令 或按下F8键 打开站点窗口 2 创建站点 确定本地站点的根目录所在位置 即d dzx 若无站点文件夹 请先 创建之 执行 站点 管理站点 菜单命令或从站点窗口的站点下拉列表框中 选择 管理站点 后打开管理站点对话框 然后单击 新建 选择 基本 或 高级 选项卡 按步骤完成站点定义的操作 站点 取名为 电子系网站 说明 说明 站点实际对应的是一个文件夹 是一系列文档的组合 我们所做的所有网 页就保存在这个站点 即文件夹 中 如果不建立站点直接编辑网页 就会给网 页的管理带来困难 同时页面中的有些对象也会无法预览 在 基本 选项卡中 站点定义向导有3项个任务 编辑文件 设置本地 文件夹 测试文件 设置处理动态页的文件夹 共享文件 设置远程站点 其中 测试文件 随着 编辑文件 中定义的不同可能出现也可能不出现 在 高级 选项卡中 本地信息 栏 HTTP地址 文本框中输入的是要 建立的站点的地址 以便Dreamweaver对文档中的绝对地址进行校验 如果目前 尚没有申请域名 则可以暂时输入一个容易记忆的名称 在将来申请域名后 再 15 用正确的域名进行替换 远程信息 栏用于设置远程站点的信息 当Web服务 器运行在本地计算机上时 可不必设置远程站点 在远程信息中当选择 FTP 后有如下选项 使用被动式FTP 因为有些防火墙要求使用被动式FTP 使用防火墙 如果服务器在放火墙后面并且通过防火墙连接到服务器时 使用 使用SSH加密安全登录 适用于Windows用户 使用SSH进行安全FTP身 份验证 存回和取出 中 取出名称 输入取出文件的人员名称 以便让合 作人员知道是谁取出的 电子邮件地址 输入取出人员的电子邮件 地址 在 高级 选项卡中还包括如下设置 测试服务器 用于设置动态网页的执行环境 遮盖 用于在站点操作中排除指定文件上传 设计备注 用于存储与文档相关联的信息 如 源文件信息 文档注释 作者 生成日期 文档设计状态等 站点地图布局 可直观显示站点内各个网页之间的关联 文件视图列 用于设置文件视图显示时列的显示情况 其中的 与设计 备注关联 必须先人工添加一新列才有效 添加后 再从下拉菜单中 选择一个值或输入新值 最后再在站点文件中对应的新列中输入信息 3 从站点窗口的站点下拉列表框中选择需要打开的站点 电子系网站 4 编辑站点 双击站点下拉列表框中的站点或单击站点下拉列表框中的 管理站点 打开 管理站点对话框后更改 电子系网站 中站点文件夹为D盘中以你的学号和名字 命名的文件夹 需先创建该文件夹 说明 说明 管理站点对话框中的 删除 实际上只是删除了 Dreamweaver 同该站点之 间的关系 而实际的本地站点内容并未删除 以后还可以重新创建指向其位置的 新站点 重新对它进行管理 如果希望创建多个结构相同或类似的站点 这时可以执行 复制 即先从 一个基准站点上复制出多个站点 再根据需要分别进行编辑 5 将 电子系网站 导出为外部文件 取名为你的姓名 保存于站点文 件夹中 6 创建文件夹 文件 16 在 电子系网站 本地站点文件列表窗格中 选中子文件夹和文件的创建位 置即根文件夹 再右键选择 新建文件夹 或 新建文件 命令创建子文件夹 xbgk 文件tszy html 说明 说明 如果希望修改文件夹的名称 可以单击文件夹的名称 其文字处于编辑状态 然后输入另外的名称 7 利用剪切 复制 粘贴 重制 拖动等操作复制一下xbgk tszy html 并分别取名为jxgl jgsz html 再将tszy html移入jxgl中 将jgsz html移入 xbgk中 说明 说明 可利用拖动 剪切复制和粘贴 重制操作来实现文件或文件夹的移动 复 制 删除时直接用delete键 剪切 放到剪贴板上 以备粘贴 复制 拷贝到剪贴板上 以备粘贴 重制 不通过剪贴板直接生成一个备份 如果移动或复制的是文件 由于文件的位置发生了变化 其中的链接信息 特别是相对链接 也会相应发生变化 Dreamweaver会提示是否要更新链接信 息 与站点的删除操作不同 对文件或文件夹的删除操作会从磁盘上真正删除 相应的文件或文件夹 8 保存 编辑zzjj html文件 保存当前编辑窗口中的网页文档到d dzx 中 命名为zzjj html 再双击站 点窗口的zzjj html 或执行 文件 打开 菜单命令打开zzjj html 后进行编 辑 网页内容为站长的个人档案 效果图如图1 2所示 9 单击 文件 面板上的 刷新 按钮刷新本地站点文件列表 说明 说明 如果在 Dreamweaver 中或之外 如我的电脑中 对站点中的文件夹或文件 进行了增删 改名等 则需要对本地站点文件列表进行刷新 才可以看到修改后 的结果 自动刷新 在定义站点时的对话框中选中 自动刷新本地文件列表 复选框 手工刷新 单击 文件 功能面板工具栏上的刷新按钮 F5 巩固与拓展巩固与拓展 创建站点 泰职院网站 站点根目录为d tzy 并对泰职院网站项目进行规 划 包括网站需求分析 主题和内容 名称 整体风格 结构等 再创建 17 zzjj html网页介绍你所在的学习小组情况 要求设置标题并使用文字和图像等 方式进行介绍 同时要具有一定的美观效果 归纳总结归纳总结 本章我们学习了网站开发的流程 网站规划的要求 网页设计的原则 对电 子系网站进行了规划 并对通过站长简介网页的制作熟悉了 Dreamweaver 的编辑 环境 创建了本地站点 只有具备了这些基本的知识和技能才能进一步进行后续 网页的设计与制作 分析与思考分析与思考 1 为什么要进行网站规划 直接制作不行吗 2 为什么必须创建站点 其一般步骤是什么 3 页面属性包括哪些内容 在某一网页文档上设置的页面属性是否在另一 网页文档上也反映出来 18 第 2 章 DIV CSS 布局 知识能力目标知识能力目标 1 理解页面布局的类型和方式 2 理解 CSS 的类型 使用方式 样式参数 3 理解 DIV CSS 布局优点 步骤 使用技巧和 HTML 代码 4 能根据需要定义 CSS 样式 5 会使用 DIV CSS 进行页面布局 任务描述任务描述 用 Div CSS 方法在 Dreamweaver 编辑界面中布局电子系网站主页 分为页 头 正文区 页脚 3 个部分 其中 页头包括标志动画区 导航栏 分左右两部 分 和欢迎条 正文区由左右 2 栏组成 左栏包括站内登录区 系部风采区 兄 弟系部链接区 右栏包括系部简介区和新闻区 布局效果图如下 图 2 1 主页的布局效果图 预备知识预备知识 2 2 1 1 页面布局类型页面布局类型 1 页面布局的典型类型 页面布局的典型类型 通常 页面布局 即版面设计 可分为三种典型类型 即左右型 上下型 19 杂合型 左 中 右型 左 中 右型 该结构比较符合浏览者的习惯 且一般左边是目录 中间 或 右边是内容 上 中 下型 上 中 下型 该结构也比较符合浏览者的习惯 功能类似于左 中 右型 杂合型杂合型 前两种页面结构的组合 我们所见到的页面结构大都是杂合型的 还可细分为国字型 同字型 巨字型等 如 新浪网站首页 其它类型其它类型 封面型 Flash动画型等 如中国大众体育的引导页 2 网站中共性页面的布局设计过程 网站中共性页面的布局设计过程 网站中有许多页面 其风格常常是统一的 便于浏览者使用 在进行各个页 面的具体设计排版前 应对这些带有共性的页面进行统一布局设计 这不仅可减 少重复劳动 便于日后的修改维护 也给浏览者一种美的享受 其具体设计过程 如下 先根据站点的内容和风格在纸上进行网站结构布局 再对各网页带共性的部 分进行排版设计并画出草图 再用绘图软件进行排版设计并对色彩 主题做整体 规划 最后送交客户或站点主管审查 在纸上画出草图 在纸上画出草图 直接在网页设计器里边设计排版边写内容 这是设计不出 优秀网页的 此过程包括 尺寸选择 建议使用800 x 600或1024x768的分辨率 造型的选择 在浏览器窗口矩形区域中构思网页的主要结构布局 确定共用文 本和图片的位置 根据布局确定各共用文本和图片的位置 比如页眉 页脚 正 文中如何放置文本图片等 这样 整个站点时尚页面的大概版式就出现了 如 电子系各次页 色彩 主题配置 色彩 主题配置 可利用Fireworks调整颜色 设计图形 并且可以利用层的 功能设计出用纸张无法实现的排版意念 对整个网页的色彩排版有一个总体基调 送审送审 送交客户或站点主管审查 并作为整个站点的制作方案 2 2 2 2 页面布局方式页面布局方式 页面布局的方式包括五种 即Div CSS 表格 布局表格 框架 层 Div CSS 是目前网页布局的主流工具 表格表格 在Div CSS诞生前曾是网页布局的主要工具 布局表格布局表格 是常用的布局工具 使用它布局能对不同对象加以处理 而不用 担心不同对象之间的影响 它在标准视图下会自动转化为表格的 框架 框架 也是常用的布局工具 20 层层 Dreamweaver独有的 Layer 层 功能可灵活自如布局 因层可以方便 地调整大小 移动 精确定位 对齐 嵌套 但页面内容多时反而难以控制且不 便于日后的维护 故层仅作为辅助布局工具使用 在进行页面布局时 需注意以下一些问题 在进行页面布局时 需注意以下一些问题 页面尺寸 页面尺寸 网页的页面尺寸和显示器大小及分辨率有关 一般分辨率在800 x 600的情况下 页面的显示尺寸为 760 x 420个像素 浏览器的工具栏也是影响 页面尺寸的原因 显示全部的工具栏和关闭全部工具栏时 页面的尺寸是不一样 的 在浏览器中一般在窗口左右留有一定的空白以防旧的显示器显示不出全部 内容 故用宽度用760像素而不是800像素 同样 在分辨率是1024 x 768的情况 下 也要考虑这些因素 如中国教育和科研计算机网首页 注意注意 在网页设计中 向下拖动页面是唯一给网页增加更多内容 尺寸 的方法 但是 除非你肯定站点的内容能吸引大家拖动 否则不要让访问者拖 动页面超过三屏 如果需要在同一页面显示超过三屏的内容 那么最好能用锚 记做上页面的内部链接 页头 页头 其作用是定义页面的主题 故常放置站点名称 如在线花店 及图 片 公司标志以及旗帜广告 页脚 页脚 和页头相呼应 用于放置制作者版权信息 公司信息 浏览器分辨率 要求等 图片和文本 图片和文本 是网页的两大基本构成元素 缺一不可 如何处理好图片和文 本的位置成了整个页面布局排版的关键 多媒体 多媒体 指声音 Audio 动画 Flash 视频 Video 等媒体 随着动感 网页的盛行 它们在网页布局排版上将变得更重要 技巧技巧 学习布局排版的最好方法是找一个你认为不错的站点的首页 保存为 HTML文件 再利用网页编辑工具打开它 要所见即所得的软件 就会看到 这个页面是如何布局的 2 3 CSS样式表 样式表 Cascading Style Sheet 使用CSS层叠样式表不仅可保持网站整体风格的统一 而且还能简化许多重 复性的工作 如反复进行相同的字体 颜色 背景 边框等设置 它是网页中某 些元素的一定格式的组合 因此 可定义若干个CSS样式 一个网站可能会应用 一个或多个CSS样式 CSS样式可管理到页面上的所有元素并保持相同风格 可用像素 磅值等为 单位来精确控制各个元素 当CSS保存到外部文件中时 它可被其它网页反复引用 提高了工作效率 任一个 CSS 样式其实就是一个 class 类的定义 样式表会自动生成 class 类的 2 4 Div CSS 布局概述布局概述 21 Div CSS 布局 方式是目前应用 Web2 0 标准设计网页时所使用的主流方 式 Web 标准分三方面 结构化标准 XHTML 和 XML 表现标准 CSS 行为 标准 对象模型 如 W3C DOM 和 ECMAScript 等 Web 标准制定的核心目的是实 现表现 指信息的最终展示效果 如颜色 字号 字体 排版布局等 和内容 指真正的数据信息包括图片等 或结构 内容划分成多块 以 div table p 等 进行 相分离 实现 Web 标准的最终技术手段是使用 XML 但限于技术等条件 目前所使用的 Div CSS 只是 Web 标准中 XHTML CSS 实现方式的一部分 使用 Web 标准设计网页的好处 1 对浏览者而言 页面显示速度更加迅速 可通过样式选择实现换肤 能够提供适于打印的版本 能够支持屏幕阅读机 手持设备 搜索机器人 打印机 电冰箱等 设备 有助于特殊人群如视弱 色盲等人访问 2 对网站管理员而言 更容易被搜索引擎搜索到 改版容易 代码和组件较少 易于维护 因代码简洁 故带宽要求降低 节省运营成本 无需专门制作供打印用的页面 2 5 使用使用 Div CSS 布局页面的步骤布局页面的步骤 Div CSS 布局包括2个部分 即DIV标签对 和对应的 CSS样式 插入Div标签对通过点击插入面板 布局 分类中的按钮进行 同 时要对Div标签命名 即id名 定义CSS样式通过Dreamweaver编辑区右侧的 CSS样式 功能面板进行 该面板上有4个按钮 分别为 附加样式表 用来 链接一个已有的 css文件 新建CSS样式 编辑样式表 删除CSS样式 每个 CSS 样式都有 1 个名称 可以自行取名 但需以 或 开头 也 可以使用现有的标签名 CSS 样式参数共分为类型 背景 区块 方框 边框 列表 定位 扩展 8 大类 每一大类中包含若干可定义的属性和值 任何一个 CSS 样式均由 1 个或多个 属性 值 组成 比如有如下 CSS 样式定义 22 图 2 2 CSS 规则定义对话框 则该 CSS 样式定义在代码视图中的代码为 需要注意的是 8 类参数中的某些属性只有在 IE5 5 以上才支持 对同一元 素 并非所有属性都起作用 布局页面的步骤如下 1 在纸上或绘图软件中画出网页的分块式结构图 2 根据结构图在网页中插入某个 div 标签并给 ID 或类取名 3 定义该 div 标签所用的 CSS 样式 4 重复进行上述 2 3 两个步骤直到布局完成 5 根据布局效果浏览情况决定是否对 CSS 样式进行修改 任务实现任务实现 2 7 DIV CSS 布局布局 1 网页文档初始设置 网页文档初始设置 新建网页文档 index html 标题为 泰职院电子工程系 保存到站点根目录 23 下 设置网页文档中内容居中放置且宽度 760px 文字采用宋体 12px 背景图 片采用方格状小图片 bg gif 顶部和底部距离边界 0px 使用 CSS 样式面板定义 仅对当前网页文档适用的 body 标签样式 body font family 宋体 font size 12px background image url img bg gif width 760px margin top 0 margin right auto margin bottom 0 margin left auto 2 页头布局 页头布局 电子系网站主页采用上 中 下结构布局 分别对应于页头 正文区 页脚 采用 DIV CSS 布局方法实现 页头的布局包含 3 部分 标志动画 导航栏 欢迎条 使用 3 个 div 标签实现 现在网页中至上而下依次插入 3 个互不嵌套的 div 标签 其 ID 分别为 header nav1 nav2 对应的 CSS 样式如下 header height 120px nav1 background image url img ad daohang1 gif height 29px nav2 line height 23px background image url img ad daohang2 gif height 23px 说明 说明 定义 CSS 样式时应先选中需定义 CSS 样式的 Div 标签 可直接在编辑界 面上用鼠标点击 Div 标签的边框 或者通过标签选择器进行 如果定义的 CSS 样式只是本网页使用 而不再使用于本网站中的其它网 页 则可在 新建 CSS 规则 对话框中选择 仅对该文档 24 图 2 3 新建 CSS 规则对话框 仅对该文档选项 否则 应选择 新建样式表文件 然后在随后的对话框中输入要保存的样式表 文件名和保存路径 图 2 4 保存样式表文件对话框 选择器类型 即 CSS 样式类型 中的 类 可应用于任何标签 选项用 于网页中有多个标签需使用同一样式的情况 此时样式名自行命名 并以 开 头 缺省时系统会自动加上的 当网页中某个标签需要应用该样式时 需通过 属性面板进行应用才能看到样式的效果 25 图 2 5 新建 CSS 规则对话框 定义类样式选项 图 2 6 属性面板 应用 CSS 样式 而 标签 重新定义特定标签的外观 选项用于给网页中特定的标签定义 样式 此时样式名只能从下方的下拉列表中选择 也可自行输入标签名 但输入 错误的标签名后所定义的样式没有任何意义 也不能应用于任何网页元素 标 签样式不需通过属性面板应用 它会自动作用于对应的标签 图 2 7 新建 CSS 规则对话框 定义标签样式选项 高级 ID 伪类选择器等 选项用于给网页中有特定 ID 标识的标签 多 个嵌套的类 标签或 ID 标识定义样式 或者给超链接的 4 种状态分别定义样式 ID 样式名以 开头 它也是自动起作用 无需通过属性面板应用 给多个嵌 套的类 标签或 ID 标识定义样式时以空格分隔开各个名称 26 图 2 8 新建 CSS 规则对话框 定义 ID 样式选项 图 2 9 新建 CSS 规则对话框 定义嵌套样式选项 1 图 2 10 新建 CSS 规则对话框 定义嵌套样式选项 2 图 2 11 新建 CSS 规则对话框 定义嵌套样式选项 3 27 图 2 12 新建 CSS 规则对话框 定义嵌套样式选项 4 图 2 13 新建 CSS 规则对话框 定义选择器样式选项 定义 CSS 样式属性时 尽量做到简单 到位 即尽量不要重复定义已经 继承或存在的属性 以免重复定义错了造成前后矛盾 即使不矛盾 也会影响日 后对这些属性值的维护 除非某个属性需要重新设置新值 比如 定义了 body 标签的宽度为 760px 而 nav1 nav2 这 2 个标签上下放置在 body 中 其宽度自 然也是 760px 就无需再定义 nav1 nav2 的宽度属性了 与内容无关的图片应设置成背景图片 使 表现与内容相分离 3 正文区布局 正文区布局 正文区为左右型布局 在页头下方依次插入 2 个互不嵌套的 div 标签 其 id 分别为 left right 对应的 CSS 样式如下 left background color f8f8f8 width 176px height 360px float left margin top 3px right width 576px height 360px 28 float left margin left 8px 说明 说明 默认情况下 互不嵌套的 2 个 div 标签是上下放置 若想左右放置 则可 将它们的 浮动 属性 float 设置为左对齐 left 或右对齐 div 的 padding border margin 属性之间的关系 图 2 15 div 的 padding border margin 属性之间的关系 4 页脚布局 页脚布局 在正文区下方插入 div 标签 其 id 为 footer 对应的 CSS 样式如下 footer height 70px clear left margin top 5px 说明 说明 若想清除前一个 div 标签的浮动属性对当前 div 标签的影响 应该定义 清 除 属性 clear 5 布局效果粗略图 布局效果粗略图 29 图 2 16 主页的布局效果粗略图 6 细化页头 细化页头 在 id nav1 的 div 中插入 3 个互不嵌套的从左至右排列 div 标签 id 为 date1 date2 title 以备显示日期和导航标题 其对应的 CSS 样式为 nav1 date1 text align center line height 29px color FFFFFF background image url img ad daohang3 gif background repeat repeat x width 200px float left nav1 date2 background image url img ad daoh