DreamWeaver网页设计

电 子 科 技 大 学 毕 业 设 计（论 文） 论文题目：Dreamweaver 网页 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 教学中心： 指导老师： 职 称： 学生姓名： 学 号: 专 业： 电子科技大学制 年 月 日 学 院 毕业设计（论文）任务书 题目： Dreamweaver 网页设计 任务与要求： 1．整理设计思路.熟练掌握Dreamweaver 2．用Dreamweaver进行网页设计 3. 进行论文编写 时间： 年 月 日 至 年 月 日 共 周 教学中心： 学生姓名： 学 号： 专业： 指导单位或教研室： 指导教师： 职 称： 电子科技大学制 2010年 03月 08日 毕业设计(论文)进度 计划 项目进度计划表范例计划下载计划下载计划下载课程教学计划下载 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 日 期 工 作 内 容 执 行 情 况 指导教师 签 字 教师对进度计划实施情况总评 　　　　　　　　　　　　　　　　　 签名 　　　　　　　　　　　　　　　　　　　　　　年 月 日 本表作评定学生平时成绩的依据之一。 摘 要 随着计算机和通信技术的发展，计算机网络迅速发展并得到广泛应用，计算机网络有大有小，一个教室里的计算机可以连成一个计算机网络，一个学校、一个单位、一个城市、一个行业都可以建立自己的计算机网络。Internet是目前世界上最大的计算机网络。 现在，电子信息技术的发展，计算机网络又成为其中的一个新成员——网站，它的加入给媒体家庭增添了新的生机和活力，它不仅给人们提供了无比丰富的信息资源，也使人们获取信息更方便、更快捷。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，下面将具体介绍网页的设计与制作的方法与步骤，使我们大家都能够轻轻松松地设计出自己独具特色的个性化网页来展示自己的风采！下面我们将从网站的策划、布局、制作与管理这几方面来介绍网站的建设和维护。 关键词：站点，编译，插入，链接. Abstract As computer and communication technology, computer networks and the rapid development of widely used computer network are of different sizes, a classroom computer can be connected into a computer network, a school, a unit of a city, an industry can build your own computer network. Internet is the world's largest computer network. Now, electronic information technology, computer network has become one of a new member - website, it's Jiaru to the media, the family added a new vitality and vigor, it does not only provide an extremely rich source of information has made people access to information more convenient and faster. It's political, economic, and other aspects of life play an important role. Therefore the construction site on the status of Internet application is clear, following the specifics of web design and production methods and steps so that we can all breezed design a unique personalized Ziji page to showcase their style! Next we will site planning, layout, production and management of these areas to introduce the site's construction and maintenance. Keywords: site, build, insert, link 目 录 前言…………………………………………………………………………………3 第1章 Dreamweaver 8的简介…………………………………………………4 1.1 功能简介………………………………………………………………4 1.2 创建HTML文档 ………………………………………………………… 1.3 窗口布局………………………………………………………5 1.4 菜单概述……………………………………………………8 1.4.1 插入栏……………………………………………………………11 1.4.2 文档工具栏…………………………………………………………12 1.4.3 状态栏……………………………………………………………13 1.5 设置站点………………………………………………………………13 1.6 页面制作……………………………………………………18 1.6.1 插入标题文字…………………………………………… 1.6.2 设置文字的格式…………………………………………… 1.6.3 设置文字的颜色…………………………………………… 1.6.4 设置网页的标题和背景颜色……………………………………… 1.6.5 超级连接……………………………………………20 1.7 表格设计……………………………………………………………21 第2章 网站的设计和网站的生成……………………………………… 27 2.1 网站设计…………………………………………………27 2.2 站点生成…………………………………………………………27 2.3 生成一个站点主页……………………………………………………28 第3章 网页的制作………………………………………………………… 31 3.1 布局视图………………………………………………………………31 3.2 Dreamweaver 8添加内容………………………………………… 32 3.3 Dreamweaver 8标准视图下工作……………………………… 33 3.4 Dreamweaver 8连接………………………………………… 33 第4章 总结……………………………………………………………………… 37 谢辞 ……………………………………………………………………………… 38 参考文献……………………………………………………………………………39 附录…………………………………………………………………………………40 前 言 Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的，易于被人们所接受的信息检索手段，World Wide Web(简称WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。据估计，目前Internet上已有上百万个Web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的Web站点对于一个机构的发展十分重要。近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在Internet中的广泛应用，Web站点向用户提供的服务将越来越丰富，越来越人性化。 WWW使在全球范围内进行几乎是实时的交互性多媒体信息交流成为可能。与许多正在涌现的技术不同，WWW相当廉价，并且是迄今为止最强大的信息交流工具。对于一个公司来说，它没有理由不在Internet上展示自己。 网站包括： 意大利足球甲级联赛赛程、积分榜、射手榜、十佳球、豪门俱乐部等。 下面将从网站的策划、布局、网站的设计和生成这几方面来建设网站。 第1章 Dreamweaver 8的简介 1.1 功能简介 1.1.1Macromedia Dreamweaver 8简介 Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。 1、灵活的编写方式 Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。 2、可视化编辑界面 Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。 3、功能更多的CSS支持——CSS可视化设计、CSS检查工具 4、动态跨浏览器验证 当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。 5、强大的WEB站点管理功能 6、内建的图形编辑引擎 7、Dreamweaver的集成特性 Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。 8、丰富的媒体支持能力 可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。 9、超强的扩展能力 Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。 1.1.2网页制作常用工具简介 Photoshop：是一款集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件。 Fireworks：是一款网页作图软件，软件可以加速 Web 设计与开发, 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。 Flash：可创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。FrontPage2003：建立和管理专业网站的简易工具。 1.2创建HTML文档 1.2.1 创建HTML文档 打开Dreamweaver 8，单击“文件”--> “新建”-->“常规”命令，在“类别”里选中“基本页”，在“基本页”里选中“HTML”，然后点“创建”，如下图： 图1-1 创建HTML文档 从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。Dreamweaver 8即展开工作区界面（一个空白页）： 图1-2 空白页面 1.2.2 编辑HTML文档 可以在这个空白页添加表格和输入文本进行编辑。如果您要向页面添加图片或其它元素，应先保存这个空白页。选择“文件”>“另存为”，在“另存为”对话框中，浏览到站点本地根文件夹下。填入文件名，保存退出。 1.2.3 标签格式 在HTML文件中，重要的文字部分都由“标签”括起来，这样文字就成了特别的文字，而标签本身则以“<”和“>”标记，标签内的内容称为元素，代表了标签的意义。例如： 标签的名称（Title）用一对尖括号括起来，放在被标记文字的前面，被标记文字的后面，在标签的名称前面加一条斜线，然后再用一对尖括号括起来。这两个标签叫做“始标签”和“终标签”，它们括住的文字称为“内容”，整个标签称为一个“元件”。 1.3 窗口布局 　　Dreamweaver 8提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择“打开最近项目”、“创建新项目”和“从范例创建”。首次启动 Dreamweaver 8时，会出现一个工作区设置对话框（如下图）： 图1-3 布局窗口 您可以从中选择一种工作区布局。选择“创建新项目”，如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如下图： 图1-4 参数设置 图1-5 栏目说明 “插入”栏（如下图）：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。 图1-6 插入窗口 “文档”窗口 显示您当前创建和编辑的文档。 “属性”（如下图）： 用于查看和更改所选对象或文本的各种属性。 图1-7 属性 “面板组”（如下图） 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。 图1-8 面板组 “文件”面板（如下图） 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。 图1-9 站点文件面板 Dreamweaver 8提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。 1.4 菜单概述 本节提供 Dreamweaver 8中各菜单的简要说明。下图为菜单条： 图1-10 菜单条 以下分别叙述菜单选项： 图11 菜单项 图1-11 菜单选项 除了菜单栏菜单外，Dreamweaver 8还提供多种右键显示上下文菜单，您可以利用它们方便地访问与当前选择或区域有关的有用命令。若要显示上下文菜单，右击窗口中的某一项。 1.4.1“插入”栏 “插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。 图1-12 插入栏 某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。 “插入”栏按以下的类别进行组织： “常用”类别使您可以创建和插入最常用的对象。 “布局”类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。 “表单”类别包含用于创建表单和插入表单元素的按钮。 “文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。 “HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 “服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。 “应用程序”类别使您可以插入动态元素，例如 记录 混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载 集、重复区域以及记录插入和更新表单。 “Flash 元素”类别使您可以插入 Flash 元素。 “收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。 1.4.2文档工具栏 文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。 　　工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 图1-13文档工具栏 以下对选项进行说明： 　　显示代码视图：仅在“文档”窗口中显示“代码”视图。 　　显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。 　　显示设计视图：仅在“文档”窗口中显示“设计”视图。 　　标题：允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。 　　没有浏览器/检查错误：使您可以检查跨浏览器兼容性。 　　文件管理：显示“文件管理”弹出菜单。 　　在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。 　　刷新设计视图：当您在“代码”视图中进行更改后刷新文档的“设计”视图。 　　视图选项：允许您为“代码”视图和“设计”视图设置选项。 1.4.3状态栏 状态栏提供与您正创建的文档有关的其它信息。 图1-14 状态栏 标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。 　　窗口大小 弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。 “窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。 1.5 设置站点 　　Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver 8是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。 请执行以下操作： 　　启动 Dreamweaver 8： 　　选择“站点”>“管理站点”（即，从“站点”菜单选择“管理站点”）。 出现“管理站点”对话框。 　　在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框。 　　如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。 图1-15 颜色编辑器 在文本框中，输入一个名称以在 Dreamweaver 8中标识该站点。该名称可以是任何所需的名称。 　 单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器技术。 图1-16 定义站点 选择“否”选项，指示目前该站点是一个静态站点，没有动态页。 　　单击“下一步”。出现向导的下一个界面，询问您要如何使用您的文件。 图1-17 站点文件夹 选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。 在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。 　　单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。 单击“下一步”， 出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。 您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创建网页已经足够了。单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。 图1-18 完成站点设置 单击“完成”完成设置。 随即出现“管理站点”对话框，显示您的新站点。单击“完成”关闭“管理站点”对话框。 　　现在，已经为您的站点定义了一个本地根文件夹。下一步，可以编辑自己的网页了。 1.6 页面制作 现在，以下边的简单网页为例，叙述一下制作过程。 图 1-19 页面设计 首先启动Dreamweaver 8，确保你已经用站点管理器建立好了一个网站（根目录）。 　　为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。 1.6.1插入标题文字 　　进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“ 主页”两个字。字小不要紧，我们可以对它进行设置。 1.6.2设置文字的格式 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。 1.6.3设置文字的颜色 首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。 图1-20 设置字体颜色 1.6.4设置网页的标题和背景颜色 　 　点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图）： 图1-21 页面属性 请在标题输入框填入标题“09/10赛季意甲联赛”。 　　设置背景颜色：　网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。 设计视图状态，在标题“09/10赛季意甲联赛”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。 1.6.5 超级链接 　 作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址……等等。下边我们就来讨论怎样在网页中创建超级链接。 页面之间的超级连接 　　在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。 （1）在网页中选中要做超级链接的文字或者图片。 　 （2）在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。做好超级链接属性面板出现链接文件显示。（如下图）： 图1-22 超级连接 （3）按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。 　　〖提示〗你也可以手工在链接输入框中输入地址。给图片加上超级链接的方法和文字完全相同。 　　如果超级链接指向的不是一个网页文件。而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。 　　超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。例如，在链接框里写上http://www.uestc.edu.cm/那么，单击链接就可以跳转到电子科举大学网站。 1.7 表格设计 　 表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。（看下图）： 图1-23 表格 一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。 （1） 在插入栏中选择按钮或“插入”菜单>选“表格”。系统弹出表格对话框如下图。这些参数我们都已经认识了。行：2。列：2。其余的参数都保留其默认值。 图1-24 插入表格 （2） 在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。（如下图）： 图1-25 调整表格 （3） 在表格的第一格按住左键不放，向下拖拽选中二格单元格。（如下图）： 图1-26 设置表格 第2章 网站的设计和网站的生成 1.1 网站设计 　 网站设计，包含的内容非常多。大体分两个方面： 　 一方面是纯网站本身的设计比如文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等； 　　另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互，制作策划，形象包装，宣传营销等等。 1.2 站点生成 定义站点时，先要指定存储这个站点的所有文件的位置。建立好本地站点并设置好上传方式后，就可以将站点上传到web服务器上，实现自动跟踪、维护链接和相互共享文件了。因此，在制作网页之前，用Dreamweaver 8建立本地站点是一个最好的选择。操作步骤如下： （1）在计算机中创建用作本地站点的文件夹 。把做网页需要的素材和以后生成的文件都放在里面，这样也有利于将来我们更新方便 （2）启动Dreamweaver 8，选择“站点”、“新建站点”菜单，打开站点定义对话框，然后在该对话框中输入站点名称“情云love”，然后单击“下一步”按钮。如下图： 图2-1 定义站点 （3）选择该站点是否使用一种服务器技术。可以根据情况选择，然后单击“下一步”按钮。 （4）选择文件的使用方式，此处选择第一项“编辑我的计算机上的副本，完成后再上传到服务器”，并指定文件存储的位置，最后单击“下一步”按钮。 （5）选择以何种方式连接到远程服务器上，有FTP、本地网络、RDS、SourceSafe 数据库、WebDAV、无这几种连接方式。这里设置为“无”，以后上传站点时再具体设置。再单击“下一步”按钮，出现“总结”对话框，单击“完成”按钮，完成站点的创建。 （6）如果觉得这些设置不合适，或是要添加某些内容，可以从“站点”面板中找到“编辑站点”命令，重新定义或修改站点。 1.3 生成一个站点主页 上面站点的结构已经完成，接着就是生成站点首页，也就是该站点的主页， 网页的制作应从新建网页开始。首先，我们启动Dreamweaver 8之后就会开启一个新的文档，我们就在这个文档上开始制作首页。其次我们就开始定义文档页标题。定义页面的标题可以帮助访问者辨认正在浏览的网页。定义好了后我们就保存它。最后我们开始设置页面属性。建立好站点后，制作页面时，页面属性的设置是相当重要的。页面属性包括页面标题、背景图象、背景颜色、普通文本颜色、链接颜色以及边界宽度颜色等。如下图： 图2-2 页面属性 页面标题确定和命名了网页，背景图象和背景颜色显示了页面的外观，普通文本颜色和链接文本颜色可帮助站点访问者区别普通文本和链接等。所以我们在选择的时候要慎重具体如下： （1）选择“文件”|“新建”菜单，打开“新建”对话框。 （2）在“常规”选项卡的“类别”列表框中选择“动态页”，在“动态页”列表中选择“ASP JavaScript”，然后单击“创建”按钮，创建一个普通页面。 （3）选择“修改”|“页面属性”对话框，或者直接用鼠标右键点击刚建好的普通页面选择“页面属性”对话框，并在该对话框中设置页面属性。设置完所有的页面属性后，单击“确定”按钮。若要保存页面可以选择“文件”“保存”菜单或者直接用快捷键：CTRL+S 保存。 第三章：网页的制作 3.1 设计前的考虑因素 在设计网页之前，首先应该考虑如下因素： （1）总体规划。在制作网页前，先总体规划整个网站的结构，特别要考虑网站的维护与更新是否方便。 （2）网站主题。网站的主题选择不要落俗。现在许多个人主页就像大箩筐，题材包罗万象，内容雷同无味。题材的选择少而精，又能坚持更新话，会很快受到大家都欢迎。 （3）内容第一。内容是至关重要的。内容可以是任何东西，包括文字、图片、视频、声音等，内容一定要跟着这个网站所要提供的信息由关，用户访问站点最终的为了读取其中的内容，其他任何东西都只是背景。 考虑内容时应当注意以下几点： 1） 注重内容的结构。 2） 要把网页做得趣味盎然、引人入胜，但首要的是要让它有用处。 3） 最具价值的站点能让人明白哪些信息可以获取，怎样获取。 4） 页面包含的内容信息量大时，开始设计页面之前就要确定好读者对象，对新手或新的访问者来说，用固定的文件结构并在开始的时候给予说明书有意义的。 3.2 设计过程的考虑因素 在实际设计网页时，应掌握以下几个重点规则： （1）主页的特征。主页是最重要的，因为它是用户对网站的第一印象。如果是新站点，最好在第一页就对这个网站的特点及所提供的内容进行简要的说明和指导，让用户判断是否继续进入。最好第一页就有很清楚的类别选项，而且尽量人性化，让参观者可以很快找到需要的主题。 主页的第一目的是直接回答“这是什么网站”和“这个站点的作用是什么” 这两个问题。主页是站点的标志，它的设计应该与其余网页不同。当然，主页和内部队网页应该有相同的风格，但存在着差别。 对于初次访问者，回答“这个站点做什么”这个问题可能是主页最重要的功能，但对于大多数其他用户，主页最重要的功能是作为站点导航图的入口点。通常，可采用分级目录最高级别的列表形式，根据信息结构，最高级别的人口以不同的形式提供帮助更有意义。 在设计上，画面最好保持干净。若无必要，尽量不要放置大型图形文件或使用不当的程序，因为它会增加下载时间，导致用户失去耐心；画面不要杂乱无序，否则用户会找不到所需要的东西。 （2）主页设计元素。主页上最显著的设计元素应该是站点的名称，另外，站点名称应该在所有内部网页上重复出现。 （3）代表性的页面。制作时不要一起制作许多页面，建议先制作有代表性的一页，将页面结构、图片位置、键接方式都设计周全。 （4）分类。内容分类很重要，可以按主题分类、按性质分类、按组织分类等。在每个分类选项的旁边或下一行，加上这个选项内容的简要说明。 （5）键接。在页面上应该有一些键接帮助访问者来回跳转，总是以相同的格式把这些键接到所有页面上，这样用户就总能知道到哪里去找到它们以及怎样使用它们。 因为使用相对路径容易把一组文件移到另一个地方，且使用相对路径输入量较少，所以一般来说应该使用相对键接。键接到不直接相关的文件使用绝对路径，这样以后要是把源文件移到另外目录下就不需要更改链接了。 3.3 Dreamweaver 8给网页中添加内容 现在我们已经设计好了网页的全局结构，下面就来给页面添加内容，如图像，文本等。 ３.３.１插入图片 下面将介绍在Dreamweaver 8中插入图片的方法：在左上角的菜单条选择“插入”—>“图像”命令，然后在我们指定文件夹里面找到素材，单击选中的图片，如果图像文件不在站点的根目录下，在弹出的对话框中单击“确定”按钮即可。并且网络上用的图片一般是jpg图片，如果不是可以用相关的软件转换为jpg格式，然后在插入到网页中。 3.3. ２调整图像大小 选定图像，图像的四周会出现拖动手柄，将鼠标指针移到手柄上，鼠标指针会变成双向尖头，这时按住左键拖动手柄，就可以改变图像的大小，也可以直接在图像的属性面板中的“宽”和“高”栏中输入图像的宽度和高度值，调整图像的大小。如下图： 图3-1 宽和高 3.3. ３移动图像 选定图像的大小确定以后，就需要将其移动到所需位置上。按住鼠标左键直接拖动即可。如下图： 图3-2 图片的伸缩 ３.３.４预览文档 在Dreamweaver 8的文档窗口中看不到翻转的效果，只有在浏览器中才会显示出效果。可以在Dreamweaver中预览查看它和浏览器相关的功能，而且在预览前不必保存文档。按F12键来预览网页看图片的变化，网页预览完成后关闭浏览器窗口，选择“文件”—> “保存”命令保存刚才对主页文档进行的修改。 3.3. ５插入文本 在图片插入完成后，我们开始来插入文本，我们在“层”里添加文本内容，方法是选择“插入”—>“布局对象”—>“层”。添加需要的文本。如下图： 图３-3　文本内容 ３.３.６设置文字 上面我们已经把文本输入到了“层”里了，现在通过属性面板在设置属性值来设置文字。首先，我们选中要文字，然后可以编译文字的大小、字体和颜色。 在“层”里选中要格式化的文本，在属性面板的“格式”下拉菜单中选择字体也可以采用默认字体。然后可以选择文字的粗体和普通。如果还要格式化其它的可以重复上面的步骤。文本格式化完成后，我们就可以按F12来预览该网页，最后我们关闭浏览器窗口，回到文档当中。编辑其它的文本文档。如下图： 图3-4 3.4 Dreamweaver 8中插入Flash Dreamweaver允许用户在网页中使用外部媒体元素，以利于网页的编辑和生动活泼的页面。以下就详细介绍相关的内容。 插入Flash视频 （1）Dreamweaver MX插入Flash视频。 （2）在插入中选择“媒体”—> “Flash视频”菜单，将视频文件保存到Dreamweaver的站点文件夹中，保存类型为“Flash视频（.flv）” （3） 切换到Dreamweaver应用程序，在网页中确定要插入Flash视频的位置。 （4） 选择“插入”—> “媒体”—> “Flash视频”菜单，或在“插入”面板的“常用”选项卡中单击Flash按钮打开“选择文件”对话框，并在该对话框中选择要插到网页中的动画文件，然后单击“确定”按钮，然后按F12浏览最后保存文件。 以上我们就介绍了网页的制作过程与方法，利用上面的方法，就可以制作出一个网页了，如果要使自己的网页更加精彩和动人的话，可以再加入一些其它的内容在里面来装点你的个性化网页。网页制作实际上包括网页制作和网站维护，由于我们要不断地更新网站的内容，因此网站的维护实际上就是一个不断更新网页内容以及制作的新网页的过程。 第四章 总结 网站的建需要全面的知识。设计网页头脑必须有创新的意识，还要有扎实的专业基础。另外还要学会HTML CSS ASP ISP JAVASCRIPT等语言。还要会用网页制作软件和图片处理软件，对网页的页面进行设计，如Dreamweaver, Fireworks, Flash 目前最高版本已经到了8.0 （我用的是Dreamweaver 8）。 在设计过程中，我不断弥补各种各样的不足，有很多东西都必须从新开始。虽然困难重重，但当我完成的时候，就是非常欣慰。克服了这些困难，我的信心更加十足，也体现了自己在这个小范围的价值。其次，由于这次毕业设计题目的要求，我接到Internet，在整个设计过程中，我所得到的帮助，很多是来之于互联网。在这里，我感受到了一个完全虚拟但又充满人情味的网络世界。以后，我会更好的使用这个极其有用而友好的工具。再次，其实在这个设计过程中，电脑的操作和网络的使用我都得到了最好的锻炼，对计算机词汇的熟练掌握是一个大收获，对互联网从感性认识到理性认识也使我对网络更加了解，对自己更有信心。 总之，网页的设计软件和编程是共同生存的，他们紧密结合一定能设计出更加完美的网页。 谢 辞 毕业设计过程中，遇到了不少困难，得到老师和同学的帮助，为我提供资料，帮助我一步一步排除难题。特别是我的指导老师，给了我很多宝贵的建议和意见以及在设计过程中的指导。在此对他们表达真诚的谢意！ 参考文献 （1）新浪网、搜狐网、百度 （2）网页制作与设计教程，2007年 中国水利水电出版社 杨长兴 陈语林 周诚编 著 附录： 附图一：首页 附图二： 联赛赛程