Dreamweaver网站设计.docVIP

目录第五章 网页制作25.1.Web简介25.1.1.网站工作机制25.1.2.网站设计流程35.1.3.网站设计原则45.1.4.优秀网站案例解析55.2.Dreamweaver初步85.2.1.Dreamweaver介绍85.2.2.站点的简介和规划135.2.3.创建本地站点145.2.4.使用站点地图175.3.网页设计初步185.3.1.创建文本网页185.3.2.使用表格规划网页布局205.3.3.使用层规划网页布局245.3.4.制作图文混排网页275.3.5.制作超级链接305.4.网页设计进阶325.4.1.制作多媒体网页325.4.2.制作表单网页345.4.3.使用CSS样式365.4.4.使用模板批量制作网页435.5.网站运营及维护455.5.1.站点测试455.5.2.站点管理495.5.3.站点发布51第五章 网页制作本章将介绍使用计算机过程中常用的一系列工具软件。其中包含常用辅助工具、电子邮件客户端软件、多媒体浏览和播放工具、安全软件等。5.1. Web简介Web 是Internet提供的一种服务，通过它可以访问遍布于Internet主机上的链接文档；是存储在全世界Internet计算机中的数量巨大的文档的集合；Web 上海量的信息是由彼此关联的文档组成，这些文档称为主页（Home Page）或页面（Page），它是一种超文本（Hypertext）信息，而使其连接在一起的是超链接（Hyperlink）。 HTML是什么? HTML是Hypertext Markup Language（超文本标记语言）的缩写，它是构成Web页面（Page）的主要工具。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的“母语”。WWW（World Wide Web）所使用的出版语言就是HTML语言。 什么是动态HTML？动态HTML（DHTML）不仅是一种独特的技术、计算机语言或功能集，而是综合了几种不同技术相互作用的方式。动态HTML（DHTML）可以让您使用常规DHTML、脚本文件、文档对象模块、绝对定位技术、动态样式、多媒体过滤器和各种其他技术动态改变HTML在屏幕上显示文本和图像的方式。 什么是Flash? 由Macromedia 公司出品的网页制作“三剑客”软件之一。是一个专业的网页动画制作软件。它生成的动画可嵌入声音、电影、图形等各种文件，另还可与等相结合进行编程，进行交互性更强的控制。5.1.1. 网站工作机制互联网http网页文件图像等www服务器空浏览器返回结果图 5- 1 网站工作机制5.1.2. 网站设计流程网站的整体策划是一个系统工程，是在建设网站之前进行的必要工作。网站建设总体流程一般分为市场调查、市场分析、制定网站技术方案、规划网站内容、前台界面设计、后台程序开发、网站测试、网站发布、网站推广、网站维护等流程。1、 市场调查2、 市场分析3、 制定网站技术方案4、 规划网站内容5、 前台界面设计6、 后台程序开发7、 网站测试8、 网站发布9、 网站推广10、 网站维护5.1.3. 网站设计原则1、 网站设计原则在网站设计阶段应注意尽心筹划、尽量精简、尽量简朴、善用图片、易于漫游、重点突出、循环利用现有信息、保持新鲜感、贯彻诺言、吸引用户。2、 网站的组织结构设计原则在网站组织结构设计时，应考虑网站组织结构良好，对文件、目录等的组织和命名预先规划好。目录结构保证相近内容放在一起；文件、目录命名规范，且不含特殊字符；URL链接方式统一。3、 网页布局原则在网页布局设置时，应注重醒目性、创造性、造型性、明快性、可读性，总结为统一、协调、流动、强调、均衡。5.1.4. 优秀网站案例解析1、 Google中国网站首页特点：谷歌公司的标准主页，醒目的标志、创造性的精简界面、主题功能突出。页面结构：导航栏搜索框导航栏图 5- 2 谷歌首页简洁版2、 iGoogle中国网站首页特点：谷歌公司的另一种首页界面模式，在突出搜索功能的前提下，注重信息显示的多样性、强大的自定义能力。导航栏搜索框自定义信息图 5- 3谷歌首页综合信息版图 5- 4易中天新浪博客3、 易中天新浪博客特点：突出文化氛围、内容清晰、结构简单。文化氛围Banner信息博客内容个人信息4、 淘宝网图 5- 5淘宝网首页特点：目标是尽量多的展示商品，所以结构复杂，且各种多媒体技术应用非常多。Banner导航栏目导航栏、搜索广告内容内容内容内容内容内容公司信息图 5- 6苹果公司首页5、 苹果公司首页特点：追求质量、追求细节。简洁的界面中体现公司的品质追求。导航栏主打产品介绍产品产品图 5- 7魔兽世界首页6、 魔兽世界首页特点：突出内容，以内涵吸引用户。广告浮动游戏Banner广告浮动开通账号首页链接游戏内容5.2. Dreamweaver初步5.2.1. Dreamweaver介绍Dreamweaver 8.0是Macromedia 公司推出的目前最新版本的网页设计软件，站点管理和页面设计是它的两大核心功能，它采用多种先进的技术，易学、易用。只要掌握初步的知识，再加上自己的创意，即可制作出独树一帜的网页。本节重点介绍在Dreamweaver 8.0中如何创建站点并进行站点管理，从而为下一步开发网站做好准备，同时，通过本章的学习使读者熟悉Dreamweaver 8.0界面及运行环境。在使用Dreamweaver开发网站之前，首先需要熟悉一下Dreamweaver的启动及设计环境。通过本节可以使大家了解Dreamweaver 8.0这个网页制作软件的“庐山真面目”，会使后面的学习变得更加轻松，上手更加迅速。1、 Dreamweaver 8.0的启动步骤（1） 单击任务栏“开始”按钮，选择“程序”命令。（2） 将光标向右移动，选择Macromedia文件夹。（3） 将光标再向右移动，单击Macromedia Dreamweaver 8.0图标，Dreamweaver 8.0就被启动了。 图 5- 8“工作区设置”界面 图 5- 9改变工作区2、 Dreamweaver 8.0的工作环境面板组文件面板文档编辑窗口插入面板组文档工具栏标签状态栏属性面板标题栏菜单栏图 5- 10 Dreamweaver 8.0工作界面3、 “插入”面板组 图 5- 11“插入”栏中的选项图 5- 12“插入”栏以标签显示4、 文档工具栏图 5- 13文档工具栏 5、 “属性”检查器图 5- 14图像“属性”检查器6、 文档编辑窗口网页文档编辑窗口是Dreamweaver 8.0的主工作区，在这里可以进行网页的设计制作。（a）文档编辑窗口的缩放图 5- 15最大化文档窗口按钮（b）文档编辑窗口的标题栏（c）缩放工具和手形工具（d）标尺和辅助线7、 面板组Dreamweaver 8.0默认的面板组有以下4个。（a）CSS面板组（b）“应用程序”面板组 图 5- 16 CSS面板组 图 5- 17“应用程序”面板组（c）“标签”面板组（d）“文件”面板组8、 浮动面板组的操作常用的浮动面板组的操作方法如下。（1）展开和折叠浮动面板组图 5- 18重新组合浮动面板图1-18 （2）移动浮动面板组（3）重新组合浮动面板5.2.2. 站点的简介和规划1、 网站网站（英文：Website）是指在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通信工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的信息，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的信息或者享受网络服务。2、 网页网页（英文：Web page）是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。首页，亦称主页、起始页，是用户打开浏览器时自动打开的一个或多个网页。首页也可以指一个网站的入口网页，即打开网站后看到的第一个页面，大多数作为首页的文件名是index、default、main或portal加上扩展名。3、 网站和网页的关系网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何 Web 站点页面之前，要对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。5.2.3. 创建本地站点在Dreamweave 8中可以有效的建立并管理多个站点。搭建站点可以有两种方法，一是利用向导完成，二是利用高级设定来完成。在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。1、 管理站点图 5- 19管理站点选择菜单栏站点管理站点，出现“管理站点”对话框。点击“新建”按钮，选择弹出菜单中的“站点”项。 图 5- 20创建站点图 5- 21创建站点图 5- 22创建站点图 5- 23创建站点到此，我们完成了站点的创建。2、 搭建站点结构3、 文件与文件夹的管理图 5- 24创建站点图 5- 25 文件夹视图5.2.4. 使用站点地图图 5- 26站点地图视图 图 5- 27创建站点地图图 5- 28站点地图配置5.3. 网页设计初步5.3.1. 创建文本网页1、 插入文本2、 设置文本属性图 5- 29文本属性面板图 5- 30调色板3、 编辑字体列表图 5- 31编辑字体列表对话框5.3.2. 使用表格规划网页布局1、 插入表格图 5- 32表格按钮 图 5- 33表格属性设置对话框2、 设置表格属性图 5- 34表格属性3、 设置单元格属性 图 5- 35单元格属性4、 表格的行和列图 5- 36插入行列5、 拆分与合并单元格图 5- 37拆分单元格5.3.3. 使用层规划网页布局1、 创建普通层（1）插入层图 5- 38插入层（2）拖放层图 5- 39拖放层（3）绘制层2、 创建嵌套层图 5- 40嵌套层3、 设置层的属性图 5- 41层属性5.3.4. 制作图文混排网页1、 插入图像图 5- 42插入图像图 5- 43选择图像文件2、 设置图像属性图 5- 44设置图像属性3、 插入其它图像元素图 5- 45插入图像占位符图 5- 46插入鼠标经过图像5.3.5. 制作超级链接1、 超级链接及其分类2、 超级链接的创建图 5- 47在属性面板直接输入要链接的对象图 5- 48在属性面板直接拖曳“指向文件”图标指向要链接的对象3、 超级链接的设置4、 锚记链接（1）插入“锚记”图 5- 49命名锚记对话框（2）锚记链接5、 邮箱链接图 5- 50插入电子邮件链接6、 下载文件链接7、 空链接5.4. 网页设计进阶5.4.1. 制作多媒体网页1、插入Flash动画图 5- 51插入Flash 图 5- 52插入设置透明背景2、插入Flash文本图 5- 53插入Flash按钮3、插入Flash按钮 5.4.2. 制作表单网页1、 插入表单（1）将插入点放在希望表单出现的位置。选择“插入”“表单”，或选择“插入”栏上的“表单”类别，然后单击“表单”图标，（2）用鼠标选中表单，在属性面板上可以设置表单的各项属性。图 5- 54表单属性2、 简单案例（1）新建一个网页文件，选择表单插入栏，插入表单，将光标放置在表单内，插入一个5行2列的表格，将第1、5行合并。分别在第2、3行插入文本字段，在第4行插入文本区域，在第5行插入两个按钮。图 5- 55表单效果（2）制作网页跳转菜单图 5- 56制作跳转表单图 5- 57跳转表单中输入内容5.4.3. 使用CSS样式1、 了解 CSS以下为引用的内容：H1 font-size:16 pixels;font-family:Helvetica;font-weight:bold;2、 在 Dreamweaver 中可以定义以下规则类型:（1） 创建新的样式表选择文件新建。在新建文档对话框中的类别列中选择基本页，在基本页列中选择CSS，然后单击创建。图 5- 58新建CSS文档在样式表中键入以下代码:p font-family: Verdana, sans-serif; font-size: 11px; color: #000000; line-height: 18px; padding: 3px; 图 5- 59浏览、修改CSS内容（2） 附加样式表当您将样式表附加到 Web 页面中时，在样式表中定义的规则将应用到页面上的相应元素。例如，当您将 cafe_townsend.css 样式表附加到 index.html 页时，将根据您定义的 CSS 规则设置所有段落文本(用 HTML 代码中的标签设置格式的文本)的格式。 在文档窗口中，打开 Cafe Townsend 的 index.html 文件。(如果该文件已打开，则请单击它的选项卡。)选择在教程:向页面添加内容中粘贴到页面中的第一段文本。图 5- 60选择要设置CSS的文本在属性检查器中查看，并确保使用段落标签设置了该段落的格式。如果属性检查器中的格式弹出式菜单显示段落，则已使用段落标签设置了段落的格式。如果属性检查器中的格式弹出式菜单显示无或其它内容，则选择段落来设置段落的格式。图 5- 61 设置CSS 对第二段重复第 3 步。在CSS 样式面板(窗口CSS 样式)中，单击位于面板右下角的附加样式表按钮。图 5- 62 点击附加样式表图 5- 63 选择样式（3） 研究CSS 样式面板（4） 创建新的 CSS 规则图 5- 64新建CSS规则图 5- 65 CSS规则定义界面图 5- 66选择CSS设置文本5.4.4. 使用模板批量制作网页1、 建立模板（1）模板页面 （2）设定可编辑区域 2、 使用模板批量制作网页 （1）根据模板新建页面 命令：FileNew From Template。 （2）对一个已经有内容的页面应用模板 命令：ModifyTemplateApply Template to Page。 （3）更新模板以全面更新站点 另外一种方法是执行ModifyTemplateUpdate Pages命令。 5.5. 网站运营及维护5.5.1. 站点测试1、 兼容性测试（1） 打开前面制作的网站的主页，单击“文档”工具栏中的 按钮，在弹出的下拉菜单中选择“设置”。（2） 打开“目标浏览器”对话框，在对话框中选择要检测的浏览器，在右侧的下拉列表中选择对应浏览器的最低版本。单击“确定”按钮，关闭对话框，完成要测试的目标浏览器的设置，如图5-69所示。图 5- 67选择“设置”命令 图 5- 68设置“目标浏览器”对话框（3） 选择“文件”“检查页”“检查目标浏览器”菜单，在“结果”面板组中的“目标浏览器检查”面板中将显示检查结果，如图5-70所示。图 5- 69“目标浏览器检查”面板（4） 单击“目标浏览器检查”面板左上方的 按钮，在弹出的下拉菜单中选择“检查整个当前本地站点的目标浏览器”选项，以对站点中所有Web页面进行目标浏览器的兼容性检查。（5） 单击“目标浏览器检查”面板左侧的 按钮，浏览器中会显示出检查报告，如图5-71所示。图 5- 70显示检查报告（6） 单击“目标浏览器检查”面板左侧的 按钮，可保存检查结果。（7） 双击“目标浏览器检查”面板中的错误信息，系统自动切换至“拆分”视图，并选中有问题的标记。（8） 将有问题的代码修改或者删除，以修正错误。2、 检查网页链接（1） 检查页面链接a) 在Dreamweaver中打开要检查的网页文档（可继续在SM站点中进行操作）。b) 选择“文件”“检查页”“检查链接”菜单，“结果”面板组中的“链接检查器”面板中将显示检查的结果。c) 在“显示”下拉列表中可选择要查看的链接类型。图 5- 71选择要查看的链接类型（2） 检查站点中某部分的链接a) 择“窗口”“文件”菜单，打开“文件”面板。在“文件”面板中选择要检查的文件或文件夹。b) 在选中的文件或文件夹上单击鼠标右键，在弹出的快捷菜单中选择“检查链接”“选择文件/文件夹”菜单，如图5-73所示。 c) 检查结果将显示在“结果”面板组的“链接检查器”面板中。同样地，在“显示”下拉列表中可选择要查看的链接类型。（3） 检查站点范围的链接a) 首先在“文件”面板中选择要检查的站点。b) 右键单击站点根文件夹，在弹出的下拉菜单中选择“检查链接”“整个本地站点”，如图5-21所示。 图 5- 72检查部分链接 图 5- 73检查整个站点范围的链接3、 修复网页链接（1） 在“断掉的链接”列表中，单击“断掉的链接”列中出错的项，该列变为可编辑状态，如图5-22所示。图 5- 74断掉的链接（2） 重新输入链接文件的路径或者单击右侧的 图标，在弹出的“选择文件”对话框中重新选择链接的文档，此处按【Delete】键删除。（3） 下面还有几个文件与其有相同的错误，当修改完上述链接后，系统弹出提示框，询问是否修正其他引用该文件的非法链接。（4） 单击“是”按钮关闭提示框，系统自动修正其他链接。5.5.2. 站点管理1、 申请空间和域名2、 申请空间3、 申请域名（1）域名基础知识域名可分为顶级域名（一级域名）、二级域名和三级域名等。以com、net、gov、edu为后缀的域名称为国际域名。以cn为后缀的域名称为国内域名。（2）申请域名5.5.3. 站点发布1、 设置站点远程信息（1） 启动Dreamweaver后，