《计算机应用技术毕业论文.doc》由会员分享，可在线阅读，更多相关《计算机应用技术毕业论文.doc（15页珍藏版）》请在三一办公上搜索。
1、毕业实训论文题目： 区域卫生信息化与医疗卫生管理系统的安全性分析专 业 计算机应用技术班 级 09计算机学 号 09020104姓 名 还璋文指 导 教 师 李素敏、陈小红2012年 04 月 05日目 录1网页制作的基础知识11.1什么是网页11.2网页的发展历史11.2.1 第一张网页11.2.2 基于表格的设计11.2.3 基于Flash的网页设计21.2.4 动态HTML（DHTML）21.2.5 3DML21.2.6 基于CSS的设计31.3网页的作用31.4 制作工具32网页的制作52.1建立站点和首页52.2 页面的编辑52.3网页格局的设计62.4 文字的插入72.5图像的插入
2、72.6多媒体的插入82.7子页面的创建83网页链接83.1文本链接83.2图像链接83.3邮件链接93.4锚点链接103.5文件下载链接10参考文献11致谢12摘要在现在社会上，电脑的普及，信息的交互，让网络成为了人们不可替代的东西。最近几年，越来越多的人在网络上建立的自己的个人网站，让更多的人们来了解自己，让更多的人民来关注自己，个人网站的已经成为了一种趋势，人们越来越喜欢在网络上展现自己. Internet正在以强大的冲击力影响着人类的生活。Internet的出现和迅速发展， 彻底改变了人们的传统生活方式。Internet现在已经渗透到了人类社会的各个领域， 以及人们的日常生活的各个环节
3、。Internet的迅速普及，正是依靠不计其数、丰富多彩的网站。 网站是由网页按照一定的链接顺序组成。现在有越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。 以这种廉价的方式获取最大的宣传效果。所以说，网页制作已经成为现代社会中人们的一种基本功，越来越多的人希望学习如何制作网页， 同时越来越多的网页制作工具展现在人们面前。在本文中，我会涉及对Dreamweaver软件网页制作的知识的讲解，通过设计的过程来学习先进的技术。关键词：个人网页；Dreamweaver软件；网页制作1网页制作的基础知识1.1什么是网页网页（英文：Web page）是一个文件，他存放在世界某
4、个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。是万维网中的一“页”，通常是HTML格式（文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站1.2网页的发展历史自从第一个网站在上个世纪 90 年代初诞生以来，设计师
5、们尝试了各种网页的视觉效果。早期的网页完全由文本构成，除了一些小图片和毫无布局可言的标题与段落。然而，时代在进步，接下来出现了表格布局，然后是 Flash，最后是基于 CSS 的网页设计。1.2.1 第一张网页1991 年 8 月，Tim Berners-Lee 发布了第一个简单的，基于文本，包含几个链接的网站。原始网页的副本现在仍然在线。它有十多个链接，试图告诉人们什么是万维网。随后的网页都比较相似，完全基于文本，单栏设计，有一些链接等等。最初版本的 HTML 只有最基本的内容结构：标题 (, .)，段落()和链接()。随后新版本的HTML开始允许在页面上添加图片()，然后开始支持制作表格(
6、)。1994 年，万维网联盟（W3C）成立，他们将 HTML 确立为网页的标准标记语言。这一举动阻断了任何独立公司想要开发专利的浏览器和相应的程序语言的野心，因为这会对网络的完整性产生不利的影响。W3C 一直致力于确立与维护网页编程语言的标准(例如 JavaScript)。1.2.2 基于表格的设计 表格布局使网页设计师制作网站时有了更多选择。在 HTML 中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页。表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构。这个时
7、期的网页设计还不太关注语义化和可用性方面的问题，主要还在追求良好的结构美学。同一时期也是大量应用 GIF 占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用 GIF 占位；如微软的“关于 HTML 表格中的 GIF 占位”。第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。另外，某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码（例如每行只有 1px 高却包含了几百列的表格）。即使是稍微复杂一点儿的网页（比如多栏目页面），设计师们都要依赖于表格来创建。1.2.3 基于Flash的网页设计 Flash（最初被称为 FutureSplash Anim
8、ator，然后是 Macromedia Flash，现在叫做 Adobe Flash）开发于 1996 年。起初只有非常基本的工具与时间线，最终发展成能够开发整套网站的强大工具。Flash 提供了大量的远远超过 HTML 所能够实现的视觉表现效果。在 Flash 之前，有 Macromedia Shockwave（之后是 Adobe Shockwave）。Shockwave 用于为 CD-ROM 制作目录和多媒体内容，Shockwave 文件体积庞大，考虑到当时的网络连接以拨号上网为主，应用 Shockwave 还是不够明智的。与之相比，Flash 影片体积小巧，在线应用更加可行。在视觉效果上
9、 HTML 有很多局限性，尤其是早期的 HTML。要实现复杂的设计，人们往往需要制作大量疯狂的表格结构并/或依靠图像占位符（就像某些所见即所得软件所做的那样）。Flash 使创建复杂的，互动性强并且拥有动画元素的网站成为可能。1.2.4 动态HTML（DHTML）在 Flash 初次涉足网页设计领域的同一时期（20世纪90年代末至21世纪初），由几种网络技术（如 JavaScrip t和一些服务器端脚本语言）组成的用于创作互动/动画页面元素的 DHTML 技术的推广，也在如火如荼地进行中。这时，随着 Flash 的发展和 DHTML 的普及，不只是阅读静态内容，还允许用户与网页内容互动的交互页
10、面的概念诞生了。 1.2.5 3DML 3DML 是一个鲜为人知的用于制作三维站点的网页设计语言。由 Michael Powers 编写于 1996 年，3DML 文件实际上由一种非标准的 XML 语言写成。Flatland Rover 是一款独立开发的 3DML 浏览器，尽管还有对应的 Internet Explorer，Netscape Navigator，the AOL browser 和 Opera 浏览器插件，但随着开发进度停滞于2005年，Firefox的插件始终未能问世。现在仍然有应用3DML构建的网站，但如果没有上述浏览器或是相应插件，3DML就是不可见的。3DML曾用于制作称
11、作“Sopts”的世界与场景。3DML真正的杀手锏是比大多数语言都快的3D模型构建速度（就算是Flash也需要打开Flash桌面应用来创建并编辑Flash内容）与更加小巧的文件体积。 1.2.6 基于CSS的设计 CSS设计受到关注始于21世纪初。虽然CSS已经存在很长一段时间了，但是在当时仍然缺乏主流浏览器的支持，并且许多设计师对它很是陌生（甚至感到恐惧）。与表格布局与Flash网页相比，CSS有许多优势。首先它将网页的内容与样式相分离，这从本质上意味着视觉表现与内容结构的分离。CSS是网页布局的最佳实践，与CSS相比表格布局根本不值一提。CSS极大地缩减了标签的混乱还创造了简洁并语义化的网
12、页布局。CSS还使得网站维护更加简便，因为网页的结构与样式是相互分离的。人们完全可以改变一个基于CSS设计的网站的视觉效果而不去改动网站的内容。由CSS设计的网页的文件体积往往小于基于表格布局的网页，这也意味着页面响应时间的改善。虽然首次访问一个网站会下载样式表占用带宽，但CSS会缓存在访问者的浏览器里（默认情况下），这样接下来的访问过程中，网页就都会迅速显示了。1.3网页的作用对于公司：电子商务（当当网）、产品广告、推销产品、技术支持、联系客户。对于政府机构：增加政府形象，提高政府办事透明度，增强社会对政府的监督政策、法规的分布说明。对于教育部门：远程教育（新东方教育在线）、模拟考试、网上辅
13、导、虚拟现实系统，提高整个国民素质水平。对于个人：了解新闻、求学、购物、交友(社区)、工作、自我展示（博客）、谋生（百万网格）等。1.4 制作工具网页编辑的工具有很多，我们一般用比较多的是Macromedia公司的网页制作三剑客来制作网页。三剑客分别为Dreamweaver,fireworks,flash。Dreamweaver是原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamw
14、eaver自MX版本开始，使用了Opera的排版引擎 Presto 作为网页预览Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简 化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。Flash是美国Macromedia公司所设计的二维动画软件，全称Macromedia Flash（被Adobe公司收购后称为Adobe Flash），主要用于设计和编辑Flash文档。
15、附带的Macromedia Flash Player，用于播放Flash文档。2网页的制作2.1建立站点和首页选择“站点”，单击“管理站点”，单击“新建”，填入站点的名称,选择“本地站点”文件名。点击高级设置的本地信息,在右边的面板组中选择“默认图像”文件名，点击保存。如图2.1所示:用右键点击站点，选择“新建文件”，命名为“index”，完成首页的命名。图2.1 站点设置对象2.2 页面的编辑首先双击“index.html”,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框
16、中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。如图2.2所示：图2.2 页面属性2.3网页格局的设计在网页布局中一般采用表格来进行布局。下面简单介绍下表格的布局方式。通过单击“插入”面板中的“常用”选项中的“表格”来打开“表格”对话框，对话框可分为“表格大小”、“页眉”、“辅助功能”三部分。如图2.3所示:图2.3 表格2.4 文字的插入文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，它是最关键的因素。插入文本的两种方式：一种是在网页编辑窗口中直接用键盘敲入文本；另一种是复制文
17、本的方式。直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下：打开文本编辑软件，选中要复制的文本，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。2.5图像的插入图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。首先将游标停留在要插入图像的位置，通过单击“常用”栏中的“图像”的下拉按钮，单击第一个“图
18、像”按钮，随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件。如图2.4所示:图2.4 选择图像源文件2.6多媒体的插入 将光标移到要插入Flash动画的位置，选择“插入”面板中的“常用”选项卡单击“媒体”右侧的命令，再单击第一个“Flash”选项。再从打开选择文件对话框中选择你所需要的Flash动画（*.swf），调整Flash 动画的大小，既可以手动调整，也可以在下面的属性里添上我自己事先设置好的大小，在浏览器中，Flash动画才可以被看到，要想看看效果的话，只有按F12预览下。如图2.5所示:图2.5 选择SWF2.7子页面的创建子网页制作的一般步骤和首页差不多。不过
19、要注意一点,你的首页中有标题的话，那么在子网页中也一定要和首页的位置是一样的,在子网页中一般需要大量的文字叙述或者图片。3网页链接网页的“链接”。“链接”，又称“超链接,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文本链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“锚记链接”、“文件下载链接”等。3.1文本链接“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为
20、文字建立“链接”。将已经制作完成的首页的各个子网页准备好。在Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。观察“属性面板”，其中包括一个“链接”文本框和“目标”文本框。接下来需要把链接的位址加入到文本框中。 在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。（“目标”文本框有四个选项。分别为-blank 、-parent 、-self或 top。）点击“blank”表示链接目标出现在新打开的窗口。还可以设置一些“链接”的属性，单击“属性面板”中的“页面属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜
21、色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在你所链接的文字上时将变成手形，并且浏览器窗口下面的状态区中会显示链接到的网页的位址，单击文字，页面会立即跳转到第1个栏目中，这表示链接已经制作成功了。3.2图像链接“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容，接下来以我的网站为例，讲解如何建立“图像链接”。首先仍然要准备好已经制作完成的首页和各个栏目的页面在Dream
22、weaver中打开网站的首页，之后选取要制作“链接”的图像。观察“属性面板”，在“链接”文本框中输入链接的文字位址。如果有需要，可以在“目标”下拉列表中选择“链接”网页显示的窗口方式，分别为-blank 、-parent 、-self或 top。至此，第1个栏目的图像链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，将鼠标放在“主页”上时将变成手形，同时浏览器窗口下面的状态区中会显示出链接到的网页的地址，并且会显示出“替代”文本“动画制作”，单击文字，页面会立即跳转，这表示链接已经制作成功了。同理，按照以上步骤，再为其它几幅图像制作指向对应栏目的链接。如果有需要，在栏目页
23、面中制作“返回首页”的链接，使得单击后可以跳转回首页。如图3.1所示:图3.1 图像链接3.3邮件链接为了保持访问者与网页制作人员之间的联系，应该建立指向电子邮件的链接。选择要链接的元素。单击“插入”面板“常用”选项卡中的“电子邮件链接”图标，在打开的对话框中输入Email地址就行了。或者在“链接”文本框中输入“mailto:”加上邮件地址也可以的。按下Ctrl+S保存网页，再按下F12预览，单击Email地址，看看能不能跳转到空的网页。如图3.2所示:图3.2 邮件链接3.4锚点链接锚点是在网页文档中设置的标记，这些标记通常放在文档的特定处。锚点链接可以快速将访问者带到指定的位置。创建到锚点
24、的过程分为两步：第一步创建命名锚记；第二步创建到命名锚记的链接。首先将光标放在你想要插入锚点的位置。选择菜单“插入”中的“命名锚记”，在弹出的对话框中输入你想命名的锚记的名称。锚记的名称不能为汉字。单击“确定”按钮。然后在网页文档中选择要建立链接的文本，之后在“属性”面板的“链接”文本中输入“#锚记名称”。按下Ctrl+S保存网页，再按下F12预览，看看单击你所锚点的文本，能不能跳转到你想要的位置。可以的话，至此，整个“锚点链接”的实例就全部完成了。3.5文件下载链接如果链接到浏览器无法打开的文件，例如exe、Zip等文件，那么浏览者在点击这个链接的时候，就会弹出对话框，询问是将文件保存到硬盘
25、的什么地方，这就实现了文件下载的功能。参考文献1.孙东梅，Dreamweaver CS5完全实用手册电子工业出版社，2011-3-92.詹青龙，郭永灿 网页设计与制作清华大学出版社2010-1-13.徐磊 网页制作与网站建设技术大全清华大学出版社2008-9-164.赵丰年网页制作教程(第三版)人民邮电出版社 2006-10-15.孙膺网页设计三剑客标准教程清华大学出版社2010-10-16.姜楠, 完美网页设计与制作,中国青年出版社, 2004年5月7.王映雪等编著作, HTML网页制作,上海科学普及出版社， 20068.雁腾创作室编, 网页制作方法与技巧,机械工业出版社， 20099. E
26、书吧10. 叶青, 网页开发手记: HTML+CSS+JavaScript实战详解,电子工业出版社 ,2011.05致谢在做毕业设计的近几个月时间是我学生生涯中最有价值的一段时光。这里有治学严谨而不失亲切的陈老师，有互相帮助的同学，更有向上、融洽的学习生活氛围。借此论文之际，我想向所有人表示我的谢意。首先感谢老师。本论文是在陈小红老师的指导下修改完成的。在此，要对她的细心帮助和指导表示由衷的感谢。在这段时间里，我从他们身上不仅学到了许多的专业知识，更感受到了他们工作中的兢兢业业，生活中的平易近人。此外，他们严谨的治学态度和忘我的工作精神值得我去学习。感谢我的朋友们，过程中提出了许多建设性意见，并给我解决了一些专业性问题。感谢三年来传授我知识的老师们，更要感谢我的家人对我学业上的支持和鼓励，感谢所有关心帮助过我的人，同时感谢母校.
