(精品论文)静态网页设计与制作 毕业论文

1 毕业设计（论文）毕业设计（论文） 题题 目目 静静态态网网页设计页设计与制作与制作 学学 号号 姓姓 名名 所所 属属 系系 计计算机信息与工程系算机信息与工程系 专专 业业 计计算机网算机网络络技技术术 班班 级级 指指导导教教师师 学院教务处制学院教务处制 个人静态网页设计 题目静态网页设计与制作 主要内容1 网页设计语言概述 2 网页制作要用的软件 3 内部对象系统的使用 4 WEB 页面信息的交互窗体与框架 5 结论 指导老师评语 成绩指导老师 个人静态网页设计 目目 录录 摘摘 要要.0 第第 1 章章 绪绪论论.1 1.1 INTERNET 的历史和发展.1 1.2 网页概述1 第第 2 章章 开发软件简介开发软件简介 .6 2.1 Dreamweaver 简介 .6 2.2 HTML 语言的简介 7 2.3 Flash 简介 8 2.4 Photoshop 简介 9 2.3 本章小结14 第第 3 章章 网站需求分析网站需求分析 .15 3.1 相关术语及解释.15 3.2 个人网站的由来与发展.15 3.3 我的个人网页的设计与规划.18 3.3.1 我的个人网页的概貌 19 3.3.2 个人网页的设计理念 20 3.4 本章小结19 第第 4 章章 结论结论 .20 致致 谢谢 .21 参考文献参考文献 .22 0 静态网页的设计与制作静态网页的设计与制作 摘摘 要要 本文就网站的设计与制作，以软件工程的方法对全过程进行了分析与研究， 本文的主要工作集中在： 1.对 web 页进行概述，主要是对 internet 的历史和发展作了回顾，并对 WEB 页的定义和特性进行阐述，并对网站设计过程中使用的工具和技术简单的介绍. 2.对网站建设中提及的术语进行简单解释，并对网站的由来和发展进行讨论。 3.对自己设计的网站从设计理念到制作的过程进行详细分析. 4.使用 Dreamweaver+Flash+photoshop 等软件的设计方式进行解析 . 5.就网站的设计与制作提出自己的观点以及建议。 关键词：网站关键词：网站 设计工具设计工具 设计方案设计方案 创意创意 风格风格 个人静态网页设计 1 Static web design and production Abstract This website design and production, with the method of software engineering to process the analysis and research, this paper main work concentrates in: 1. The paper to web page is mainly to the Internets history and development, and a review of the definition and characteristics of web pages is expounded, and the website design process using the tools and techniques of simple introduction. 2. The website construction mentioned in terms of website, and simple explanation of the origin and development are discussed. 3. For the design of your own website from design concept to making process were analyzed. 4. Use Flash +Dreamweaver + photoshop software design methods are analyzed 5. Just website design and facture put forward its own views and Suggestions 个人静态网页设计 2 第第 1 章章 绪论绪论 随着 21 世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越 重要，越来越多的职业需要具有计算机应用技能型人才。掌握计算机是职业的需要， 更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网 页 设计的相关知识。 1.11.1InternetInternet 的历史与发展的历史与发展 Internet 最早来源于美国国防部高级研究计划局 DARPA(Defense advanced Research Projects Agency)的前身 ARPA 建立的 ARPAnet，该网于 1969 年投入使用。 从 60 年代开始，ARPA 就开始向美国国内大学的计算机系和一些私人有限公司提供经 费， 以促进基于分组交换技术的计算机网络的研究。1968 年，ARPA 为 ARPAnet 网 络项目立项，这个项目基于这样一种主导思想：网络必须能够经受住故障 的考验而 维持正常工作，一旦发生战争，当网络的某一部分因遭受攻击而失去工作能力时， 网络的其它部分应当能够维持正常通信。最初，ARPAnet 主要用于 军事研究目的， 它有五大特点： 支持资源共享； 采用分布式控制技术； 采用分组交换技术； 使用通信控制处理机； 采用分层的网络通信协议。 1972 年，ARPAnet 在首届计算机后台通信国际会议上首次与公众见面，并验证了 分组交换技术的可行性，由此，ARPAnet 成为现代计算机网络诞生的标志。 ARPAnet 在技术上的另一个重大贡献是 TCP/IP 协议簇的开发和使用。 1980 年，ARPA 投资把 TCP/IP 加进 UNIX(BSD4.1 版本)的内核中，在 BSD4.2 版本以后,TCP/IP 协议即成为 UNIX 操作系统的标准通信模块。 1982 年，Internet 由 ARPAnet，MILNET 等几个计算机网络合并而成，作为 Internet 的早期骨干网，ARPAnet 试验并奠定了 Internet 存在和发展的基础，较好 地解决了异种机网络互联的一系列理论和技术问题。 个人静态网页设计 3 1983 年，ARPAnet 分裂为两部分：ARPAnet 和纯军事用的 MILNET。该年 1 月， ARPA 把 TCP/IP 协议作为 ARPAnet 的标准协议，其后，人们称呼这个以 ARPAnet 为主干网的网际互联网为 Internet，TCP /IP 协议簇便在 Internet 中进行研究，试验， 并改进成为使用方便，效率极好的协议簇。与此同时，局域网和其它广域网的产生 和蓬勃发展对 Internet 的进一步发展起了重要的作用。其中，最为引人注目的就是 美国国家科学基金会 NSF(National Science Foundation)建立的美国国家科学基金网 NSFnet。 1986 年，NSF 建立起了六大超级计算机中心，为了使全国的科学家、工程师能 够共享这些超级计算机设施，NSF 建立了自己的基于 TCP/IP 协议簇的计算机网络 NSFnet。NSF 在全国建立了按地区划分的计算机广域网，并将这些 地区网络和超 级计算中心相联，最后将各超级计算中心互联起来。地区网的构成一般是由一批在 地理上局限于某一地域，在管理上隶属于某一机构或在经济上有共同 利益的用户的 计算机互联而成，连接各地区网上主通信结点计算机的高速数据专线构成了 NSFnet 的主干网，这样，当一个用户的计算机与某一地区相联以后， 它除了可以使用任一 超级计算中心的设施，可以同网上任一用户通信，还可以获得网络提供的大量信息 和数据。这一成功使得 NSFnet 于 1990 年 6 月彻底取 代了 ARPAnet 而成为 Internet 的主干网。 1.21.2 网页的概述网页的概述 网页，是网站中的一 页 ，通常是 HTML 格式（文件扩展名为 .html 或. htm 或.asp 或.aspx 或.php 或.jsp 等） 。网页通常用图像档来提供图画。网页 要透过网页浏览器来阅读。 网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的 网站就是由网页组成的。如果您只有 域名和虚拟主机而没有制作任何网页的话， 您的客户仍旧无法访问您的网站。 所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用 HTML 等 工具制作的用於展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏 一样，人们可以通过网站来发布自己想要公开的资讯（信息） ，或者利用网站来提供相关的网路 服务（网络服务） 。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享 受网路服务 个人静态网页设计 4 第第 2 章章 开发软件简介开发软件简介 2.2.1 1 Dreamweaver 简介简介 Dreamweaver 是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身 的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网 页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充 满动感的网页。其特点有以下几方面： 1最佳的制作效率 Dreamweaver 可以用最快速的方式将 Fireworks，FreeHand，或 Photoshop 等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安 全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。 Dremweaver 能与您喜爱的设计工具，如 Playback Flash，Shockwave 和外挂模 组等搭配，不需离开 Dreamweaver 便可完成，整体运用流程自然顺畅。除此之外， 只要单击便可使 Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设 定图档的最佳化。 2网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位 置或档案名称， Dreamweaver 会自动更新所有连结。使用支援文字、 HTML 码、 HTML 属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 3无可比拟的控制能力 Dreamweaver 是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步 的设计工具。它包含 HomeSite 和 BBEdit 等主流文字编辑器。帧 (frames)和表 格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、 栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精 准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即 所得 Dreamweaver 成功整合动态式出版视觉编辑及电子商务功能，提供超强的支 援能力给 Third-party 厂商，包含 ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango 与自行发展的应用软体。当您正使用Dreamweaver 在设 个人静态网页设计 5 计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻 样版和 XML Dreamweaver 将内容与设计分开，应用于快速网页更新和团队合作网 页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直 接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确 地输入或输出 XML 内容。 Dreamweaver 还集成了程序开发语言，对 ASP、.NET、PHP、JS 的基本 语言和连接操作数据库，都是完全支持的。 2.22.2 HtmlHtml 语言简介语言简介 HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语 言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本 是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表 格、链接等。HTML 的结构包括头部（Head） 、主体（Body）两大部分，其中头部描述 浏览器所需的信息，而主体则包含所要说明的具体内容。 HTML 文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这 也是 WWW 盛行的原因之一，其主要特点如下： 1 简易性，HTML 版本升级采用超集方式，从而更加灵活方便。 2 可扩展性，HTML 语言的广泛应用带来了加强功能，增加标识符等要求， HTML 采取子类元素的方式，为系统扩展带来保证。 3 平台无关性。虽然 PC 机大行其道，但使用 MAC 等其他机器的大有人在， HTML 可以使用在广泛的平台上，这也是WWW 盛行的另一个原因。 用什么可以编辑 HTML？ HTML 其实是文本，它需要浏览器的解释， HTML 的编辑器大体可以分为三种， 1 基本编辑软件，使用 WINDOWS 自带的记事本或写字版都可以编写，当然， 如果你用 WPS 来编写，也可以。不过存盘时请使用 .htm 或.html 作为扩展名， 这样浏览器就可以解释执行了。 2 半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的 时间内做出 Homepage，且可以学习 HTML，这种类型的软件主要有 HOTDOG，还 有国产的软件网页作坊。 3 所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML 的知识 就可以做出网页，这类软件主要有Frontpage98，DREAMWEAVER。 更更先先进进难难懂懂的的技技术术 X XH HT TM ML L? ? XHTML 中的 X 是可扩展的意思， XHTML 就是可扩展的超文本标记语言，它 比 HTML 有更严格的要求。如果说 HTML 是汉语，那么 XHTML 就是标准普通话。 个人静态网页设计 6 对于现在才刚刚开始学习网页设计的朋友，直接学习XHTML 是最佳的选择。事 实上它也属于 HTML 家族，并且它是基于 XML 的，对比以前各个版本的 HTML， 它具有更严格的书写标准、更好的跨平台能力。由于某些需要，XHTML 将以前 版本的 HTML 能够实现的一些功能交给了 CSS，这意味着你将需要学习两种技术。 但是这确实是 Web 未来发展的潮流。 2.32.3 FlashFlash 简介简介 Flash 的前身是 Future Wave 公司的 Future Splash，是世界上第一个商用的 二维矢量动画软件，用于设计和编辑Flash 文档。1996 年 11 月，美国 Macromedia 公司收购了 Future Wave，并将其改名为 Flash。在出到 Flash 8 以 后，Macromedia 又被 Adobe 公司收购。 ，最新版本为： Adobe Flash CS5。Flash 通常也指 MacromediFlash Player（现 Adobe Flash Player） ，用于播放 Flash 文件。 Flash 的特性： 1.Flash 被大量应用于互联网网页的矢量动画设计。 因为使用向量运算 Vector Graphics的方式，产生出来的影片占用存储 空间较小。 2.使用 Flash 创作出的影片有自己的特殊档案格式 swf， 该公司声称 全世界 97%的网络浏览器都内建 Flash 播放器Flash Player 3.Flash 是 Macromedia 提出的“富因特网应用 ” （RIA）概念的实现平台 . Flash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应 用程序和其它允许用户交互的内容。 Flash 可以包含简单的动画、视频内容、复 杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作 的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也可以通过 添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。 Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。 Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要 的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。 位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。 要在 Flash 中构建应用程序，可以使用 Flash 绘图工具创建图形，并将其 它媒体元素导入 Flash 文档。接下来，定义如何以及何时使用各个元素来创建 设想中的应用程序。 在 Flash 中创作内容时，需要在 Flash 文档文件中工作。 Flash 文档的文 个人静态网页设计 7 件扩展名为 .fla (FLA)。Flash 文档有四个主要部分： 舞台是在回放过程中显示图形、视频、按钮等内容的位置。在Flash 基础 中将对舞台做详细介绍。 时间轴用来通知 Flash 显示图形和其它项目元素的时间，也可以使用时间 轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图 形的上方。 库面板是 Flash 显示 Flash 文档中的媒体元素列表的位置。 ActionScript 代码可用来向文档中的媒体元素添加交互式内容。例如，可以 添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用 ActionScript 向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同 的工作方式。 Flash 包括两个版本的 ActionScript，可满足创作者的不同具体需 要。有关编写 ActionScript 的详细信息，请参阅 “帮助“面板中的“学习 Flash 中的 ActionScript 2.0“。 Flash 包含了许多种功能，如预置的拖放用户界面组件，可以轻松地将 ActionScript 添加到文档的内置行为，以及可以添加到媒体对象的特殊效果。 这些功能使 Flash 不仅功能强大，而且易于使用。 完成 Flash 文档的创作后，可以使用 “文件“发布“命令发布它。这会创 建文件的一个压缩版本，其扩展名为 .swf (SWF)。然后，就可以使用 Flash Player 在 Web 浏览器中播放 SWF 文件，或者将其作为独立的应用程序进行播 放。 2.42.4 PhotoshopPhotoshop 简介简介 在我的主页上，大量的图片用到了PS 软件来处理！经过处理后更能符合网 页上的美观和效果 . Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一，集图像扫描、 编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件， 深受广大平面设计人员和电脑美术爱好者的喜爱。 从功能上看， Photoshop 可分为图像编辑、图像合成、校色调色及特效制作 部分。 图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、 倾斜、镜象、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这 个人静态网页设计 8 在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行 美化加工，得到让人非常满意的效果。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意 义的图像，这是美术设计的必经之路。 photoshop 提供的绘图工具让外来图像与 创意很好地融合，成为可能使图像的合成天衣无缝。 校色调色是 photoshop 中深具威力的功能之一，可方便快捷地对图像的颜色 进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域 如网页设计、印刷、多媒体等方面应用。 特效制作在 photoshop 中主要由滤镜、通道及工具综合应用完成。包括图像 的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技 巧都可藉由 photoshop 特效完成。而各种特效字的制作更是很多美术设计师热衷 于 photoshop 的研究的原因。 2.52.5 本章小结本章小结 本章主要介绍了网页设计与制作的软件的特点及在网页上的用途. 第第 3 章章 网络需求分析网络需求分析 随着网络技术的不断发展，网络应用已经渗透到人类社会的各个角落。作为网 络世界色支撑点的网站，更是人们关注的热点：政府利用网站宣传自己的施政纲领， 日益成为与百姓交流的真通车；企业利用网站宣传自己的形象，挖掘无限商机；个 人利用网站展示个性风采，创建彼此沟通的桥梁。越来越多的人希望拥有网站，开 辟网络世界的一片天地。 面对缤纷灿烂的网络世界，一直以来都想拥有一个属于自己的网站，于是在指 导老师的指导下，我严格按照软件软件工程的思想，一步步实现我的梦想，搭起我 自己的个人网站。 个人静态网页设计 9 3.13.1 相关术语及解释相关术语及解释 CSS：中文翻译为样式表，它的作用简单的说：就是可以使你在通一个页面里使 用不通的超链接样式. 风格：风格是抽象的，是指站点的整体形象给浏览者的综合感受。这个“整体形 象”包括站点的 CI (标志，色彩，字体，标语)，八年布局，浏览方式，交互性，文 字，语气，内容价值，存在意义，站点荣誉等等诸多因素. 创意：这里说的创意是指站点的整体创意， （因为这个创意而产生这个站点或者 相同的内容，推出的创意不同） ，网页的平面设计创意与此处所