毕业设计（论文）-静态网页班级网站设计.doc

内蒙古化工职业学院毕业设计（论文）用纸班级网站设计毕业论文摘 要班级网站是一个班级和外界交流的窗口，也是本班同学相互联系,交流的平台。本网站的主要功能是能让各类用户在自己的权限范围内方便地管理相应的信息网站在登录界面提供身份验证功能，并且还提供修改密码功能,这都是确保用户隐私的安全性。用户一旦丢失密码，还可以通过管理员把密码取回。网站首页提供一些其他常用网站的链接，让用户方便去这些网站搜集自己所要的信息。班级动态是公布班级里一些重大事务或重要通知的地方。普通用户只可以浏览新闻, 而管理员享有发布、修改、删除新闻的权利。通讯录里是各个用户的资料，可分为：分类查询和总体查询。用户可以给其他任何用户发短信息和邮件。用户还可以在这里修改本人资料。影集里是用户存放照片的地方，用户可以在这里浏览其他用 户上传的照片，或者自己也可以上传照片。管理员享有修改，删除照片的权利。论坛是用来给用户相互交流，高谈阔论的地方。普通用户只能编辑自己的帖子，而管理员则可以编辑任何人的帖子。管理功能是管理员用来管理网站的，在这里，管理员可以增加和删除用户，设置 用户权限。并且可以对网站的数据库进行备份，防止恶意攻击造成巨大损失.最后，关于链接是对整个网站功能的一个大概介绍,相当于是网站的一个简单的使用说明，让用户看了后可以对网站的使用更加得心应手。关键字：网页 dreamweaver 设计 班级 前言网站的定义网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,网页制作是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是internet上宣传和反映企业形象和文化的重要窗口。什么是网页制作网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来；网页制作通常就是将网页设计师所设计出来的设计稿，按照w3c（万维网联盟）规范用html语言将其制作成网页格式。网页设计网页设计是指使用标识语言（markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（gui）的形式被用户所浏览。简单来说，网页设计的目的就是产生网站，什么是网站呢，就是服务器内的一系列网页的组合，终端用户发出请求后服务器通过传输特定的网页向用户传输所需的信息。简单的信息如文字，图片（gif，jpeg，png）和表格，都可以通过使用html/xhtml/xml放置到网站页面上。而更复杂的信息如vector graphics,动画，视频，声频则需要插件程序例如flash, quicktime, java run-time environment,等等，这些插件程序也是通过html/xhtml/xml植入网页的。随着浏览器和w3c(万维网联盟 world wide web consortium)标准一致性的改善，xhtml/xml（可扩展标识语言）与css（层叠样式表）共同用作网页内容的设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。静态网页与动态网页区别通常，网页可以分为静态网页和动态网页。静态网页页面上的内容和格式一般不会改变，只有网管可根据需要更新页面。动态网页的内容随着用户的输入和互动而有所不同，或者随着用户，时间，数据修正等而改变。网页上的内容也可以由用户通过使用客户端描述语言(javascript, jscript, actionscript,）来改变。当然更普遍的是由服务器端的描述语言（perl，php, asp, jsp, coldfusion, 等)进行编译，从而对动态网页的内容进行改变。无论是客户端还是服务器端的改变都需要使用较为复杂的应用软件。随着信息技术的更加专业化，越来越明显的倾向表明，网页设计和网站的发展会逐渐成为两个不同的领域。网页是借助于美术构图与程序互动、动画等方式向大众推广相关信息的媒体，所以网页设计包括了几大部分：版面构图（见平面设计）程序开发（见网页应用程式）网站内容管理（见内容管理系统、资讯架构学） 两种设计模式从前一般网页都使用表格进行排版设计，这样作的优点在于设计制作速度快，尤其在可视化网页编辑器，如microsoft frontpage中，这样设计显得直观而方便，然而这让越来越复杂的版面需要许多不断嵌套的表格设计，致使网页代码变得冗长复杂，使文件体积增大，且不容易被搜索引擎查找。同时，这样做也不利于大型网站的改版工作。 随着主流网页浏览器对css的支援度提高，近年来兴起了一种新的网页设计模式。被业界称为“网页重构”的革命，其核心在于分隔网页的风格和内容(en:separation of style and content)，指标记语言(如html,xml)负责定义页面的内容，但不可以定义任何涉及网站外观(风格)的东西。而网站风格就由另外的css档案负责。在排版方面，新的模式提倡使用由css定义的div进行页面排版，而将表格还原为排列数据的最初功能。这种模式有很多好处，例如可以协助搜寻引擎查找网页的情况，减小文件提及提高浏览速度，且由于一个css档案可以控制多个页面，这也给改版带来了很大方便。由于w3c是该模式极力的倡导者，于是业界鉴定网页是否符合w3c标准，就可以在w3c网站自动检测该网站的情况。这种模式也有缺点，其中一个弱点就是，在不同浏览器出来的效果会有分别，但这种情况主要是由于微软的internet explorer对css文档的支持有众多缺陷造成的。另一方面，开始设计css时，并不能清楚看到目标，因此显得不直观。网页实际是一个文件，他存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（ url ）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前第 13 页 内蒙古化工职业学院毕业设计（论文）用纸目录第一章 需求分析1第二章 软件介绍及相关术语解释22.1 dreamweaver简介22.2 html简史32.3 xhtml42.4 css样式表概述42.5css样式表的优势52.6css样式表在html中的实现52.6.2内联式样式表62.6.3外联式样式表62.7超链接6第三章 网站总体分析与设计831网站系统分析83.2设置首页布局和页面属性83.2.1设置首页布局83.2.2设置首页的页面属性93.2.3 查看和编辑头内容103.2.4 插入图像103. 3创建其它网页11第四章 总结12参考文献13致谢14内蒙古化工职业学院毕业设计（论文）用纸第一章 需求分析随着互联网的进一步发展与成熟，网络的带宽进一步加阔，网络应用也越来越广泛。网页制作更是日新月异，层出不穷。涌现了很多琳琅满目的网站，使得整个互联网多姿多彩。网页功能分析就是以系统的观点，对已选定的对象与开发范围进行有目的、有步骤的实际调查和科学分析。分析的目的就是要弄清楚网页要做什么，最终为后面的设计工作打下基础。需求分析是制作一个网站的第一步。在制作网站之前，首先要了解客户的需要和要求。这些必要的信息包括客户所要表达的理念、界面显示的内容和栏目的要求、网站功能方面的要求等。根据客户的具体情况，需求也会有所差别。本网站是针对班级同学而设计的网站，主要是便于同学联系例如聚会、发布班级信息等系列的通知，同时本网站还针对同学们的需求建立个人信息空间，可以建立个人影集，彰显每个同学的个性与风采，相当于一个“便携式”的聊天平台，无论同学们以后身在那里我们都可以在茶余饭后对我们现在亦或是过去进行讨论，彼此交换心得体会，更加了解班级的概况，关注班级的动态。各个角色功能如下：浏览班级动态、发表论坛、观看发表作品、浏览新闻、浏览班级相册、浏览文学作品、实时留言。该网站主要有六大模块组成，分别为班级论坛，班级作品，班级新闻，班级相册，班级文学，班级留言。用户登录网站index.html页面，即可对该网站进行浏览，index.html主要为大家展示的内容有：班级论坛，班级作品，班级相册，班级新闻，班级留言等功能，在该页面中，用户可以根据导航栏连接到在子页进行浏览第二章 软件介绍及相关术语解释2.1 dreamweaver简介dreamweaver是美国macromedia公司开发的集网页制作个管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨平台限制和跨越浏览器限制的充满动感的网页，其特点有以下几方面：1、最佳的制作效果dreamweaver可以用最快速的方式将fireworks，freehand或photoshop等档案移至网页上，使用检色吸管工具选择荧幕上的颜色可设定最接近网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。dreamweaver能与您喜爱的设计工具，如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在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。 梦幻样版和xml dreamweaver将内容与设计分开，应用於快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出xml内容。 全方位的呈现利用dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态html支援和鼠标换图效果，声音和动画的dhtml效果资料库可在netscape和microsoft浏览器上执行。使用不同浏览器检示功能，dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。2.2 html简史html超文本标记语言（hypertext markup language） 网络的资讯越来越多，网站须有引人注意的外观，才能增加浏览人次，达到宣传的目的。人们开始注意网页的外观，html亦因此变得更复杂、更具弹性。表格，原本是更整齐展现资料的工具，变成了排版工具。css的出现令以表格为基础的外观设计被视为过时。服务器方面的技术亦改变了网络的构造，使用者可以选择其浏览方式、外观。flash的出现为设计师和媒体创作人开创了新路。除了引人的外观之外，亦有一个重要的考虑点：网络无障碍，即使用者能否容易读取资讯。 2.3 xhtml由于xml的可构造性，xhtml 1.0在2000年1月26日成为w3c的推荐标准，即html将会随着时间而淘汰。 外观的影响流动性对固定排版大部分网站设计师原本是每处地方都有绝对限界的平面设计师。可是在网页浏览器，却不能控制某些因素，特别是浏览器的阔度。有些设计师将其网页定义在固定大小的表格中，每部分的宽度都有精确的数据，一般使用确定的值，这就是固定排版了。然而有人认为这不好，因为这种设计罔顾使用者的设定，他们使用流动性排版，网页的宽度使用百分比定义宽度，因此网页会依浏览器的屏幕分辨率而改变，但是流动性的排版对于日益增大的屏幕就不一定合适，因为人的眼睛进行横向阅读时，过长的文字会增加阅读的困难度，反之大约在十几个字即换行的文章，浏览者会更好吸收其内容。 网页制作两种设计模式从前一般网页都使用表格进行排版设计，这样作的优点在于设计制作速度快，尤其在可视化网页编辑器，如microsoft frontpage中，这样设计显得直观而方便，然而这让越来越复杂的版面需要许多不断嵌套的表格设计，致使网页代码变得冗长复杂，使文件体积增大，且不容易被搜索引擎查找。同时，这样做也不利于大型网站的改版工作。2.4 css样式表概述css是cascading style sheet 的缩写，译作“层叠样式表单”。它是一种在网页制作过程中经常用到的技术。css样式表其实是一组样式，它增加了更多的样式定义方法来辅助html。样式就是用一个指定的名字来标识和保存的一组有关字符和段落格式的选项集合。其实，我们很早就已经与“样式”打过交道了。在word的“格式”菜单中的“样式项”里，提供了多种样式，如“标题1”、“标题2”、“正文”等。只要选定文字，然后选择不同的样式，所选定的文字就会自动改变字体、字号、对齐方式、字间距等。同样，我们可以通过css来规定网页元素的各种样式，如颜色、位置、大小等。2.5css样式表的优势css样式表是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。通过使用css样式表，不仅可以对文字格式进行设置，还可以更加精确地控制布局、字体、颜色、背景和其他图文效果，从而避免在标识字符和设置段落格式等操作时重复定义需要的样式，提高网页编辑的效率。2.6css样式表在html中的实现在html网页中加入css并不是只有一种方法，在不同的情况下，可以采用不同的方法，比较常用的有下面几中。2.6.1嵌入式样式表嵌入式样式表的实现很简单，只需在每个要应用样式的html标签后写上css属性即可。例如要设置指定表格中的文字的样式为红色，字号为10pt，可在当前表格的标记内添加下面的代码：。这种方式主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。嵌入式样式表不能充分体现出css样式表的优越性，所以应用场合并不多。2.6.2内联式样式表若想只对当前页面应用样式，就要使用内联式样式表。所谓内联式样式表就是把样式表定义语句放在标签和中，设置时通常放在html代码的部分。2.6.3外联式样式表外联式样式表是将指定的样式代码放到一个扩展名为.css的样式文件中以方便其他网页的调用。这种方式的优点是可以通过一个.css文件管理网站中的多个网页。如果要对网站中其他页面进行样式引用，可以先把样式用记事本定义成一个“.css”的文件。例如：打开记事本，将定义的名为h3的样式代码写到记事本中，保存的文件名为example.css，代码如下：h3font-family:”黑体”;color:green;font-style:italic;引用时在网页html代码的标记后用引用这个样式文件，在部分的相应内容的前后加上和。2.7超链接超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。超链接对象：如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，e-mail链接，锚点链接，多媒体文件链接，空链接等。超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的www网站中的网页。网页超链接：网页上的超链接一般分为三种：一种是绝对url的超链接。url（uniform resource locator）就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径。http:/www.xxx. com/ 第二种是相对url的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去； 还有一种称为同一网页的超链接，这种超链接又叫做书签。颜色：在网页中，一般文字上的超链接都是蓝色（当然，用户也可以自己设置成其他颜色），文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或www网站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变（默认为紫色）。只有图像的超链接访问后颜色不会发生变化第三章 网站总体分析与设计31网站系统分析根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站总体布局如下：班级首页班级论坛班级作品班级新闻班级相册班级文学班级留言3.2设置首页布局和页面属性3.2.1设置首页布局每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视server端的设置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。当然，后缀名为html也是正确的。具体设置方法是：右健单击“檔”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。操作步骤：1、在“插入快捷栏”的“布局”分类中，单击“布局表格”按纽。2、将变成“+”形状的鼠标游标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。（如果绘制的是第一个表格必须从网页的最左上角开始绘制）。表格布局如下图：3.2.2设置首页的页面属性首先双击“檔”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目，首页设置的属性如下图所示：3.2.3 查看和编辑头内容一个网页文件结构上实际是由两部分组成，头（head）内容和主体（body）内容主体内容（body）是文檔的主要部分，也是包含文本和图像等的可见部分。头内容（head）是除文檔标题外的不可见部分，包含有文文件类型、语言编码、搜索引擎的关键的关键词和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键词。3.2.4 插入图像图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。首先将游标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像：图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件，下面的“相对于”下拉表框中，可选择文件url地址的类型，插入logo图像，如图所示:最后单击“确定”按钮，即可完成插入图像的操作。3. 3创建其它网页还有其它的几个网站与主页的制作相同，一个网页是图像和文字的组合。 其他的图像插入和前面的介绍相似。第四章 总结对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是internet的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种it动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“带言人”。我们将什么样的信息传达给浏览者，要讲述什么要的事情，网页在这里起着重用的作用。网页设计是伴随着网络的快速发展而快速兴起.由于人们使用网络的频繁而网页作为上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能