班级网站设计

I 班级网站设计 摘 要 随着 Internet 飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。 Internet 上发布信息主要是通过网站来实现的，获取信息也是要 在 Internet“ 海洋 ” 中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在 Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 关键字 ： 网站设计 班级网站 Dreamweaver II ABSTRACT Along with the rapid development of the Internet, the Internet becomes people to quickly get, release information and the important channel, it in politics, economy, life aspects plays an important role. On the Internet site information release mainly through, but also to obtain information on the Internet Marine according to certain retrieval will need to download information from the web site. Therefore website construction in the Internet application status of the obvious, it has become a government, enterprises informationization construction, which is an important component in the more peoples attention. Key words: website design the class web site Dreamweaver III 目 录 摘 要 . I ABSTRACT . II 第一章绪论 . 1 1.1 选题背景 . 1 1.2 研究的目的及意义 . 1 1.3 设计思想 . 2 1.4 主要研究内容 . 2 第二章 软件介绍及相关术语解释 . 3 2.1 Dreamweaver 简介 . 3 2.2 HTML 简史 . 4 2.3 CSS 样式表 概述 . 4 2.4 CSS 样式表的优势 . 5 2.5 CSS 样式表在 HTML中的实现 . 5 2.6 超链接 . 6 第三章 网站的总体分析与设计 . 8 3.1 网站系统分析 . 8 3.2 主页设计 . 8 3.3 详细设计 . 9 结论 . 23 致谢 . 24 参考文献 . 25 1 第一章绪论 1.1 选题背景 “上溯几十年的历史，电脑的发展走过了艰辛的历程，而在网络产生了以后，电脑才真正实现了最大的优势与价值。如今，网络形成的是一种新兴的文化，塑造的是一批新兴的人类，成就的是一个新兴的社会。它逐渐以它的快捷统率着整个世界通过网页制作的学习，将提高我们的网络知识水平，拓宽知识面，使我们的班级在新文化的簇拥下茁壮成长，造就我们一批新兴的人类！”。 21世纪是网络的时代，是信息的时代，互联网正逐渐地改变我们的生活方式。人们很容易地接受网络知识和在网上得到的信息 。在网络飞速发展的趋势下，各类网站应运而生，学生对此问题有强烈的探究兴趣；学校的校园网建设的完成，学校网站建设也完成了新一轮的更新，而各教学班级网页建设正处于萌芽状态，为了充实学校网站，加强学校班级网页建设，因此我们提出了这样一个课题，同时希望以此为载体，培养学生自主探索，主动提出问题，研究问题，并在一定程度上解决问题的能力，从而在提高学生自主学习，终身学习能力上做一些有益的探索。 班级网站是一个班级与外界交流的窗口，也是本班同学相互联系的平台。在这个毕业离开的季节，希望做出一个特别的班级网站，能够让大家了 解我们的班级，同时也能让同学们在各自离开后能够方便的互相联系。 1.2 研究的目的及意义 1.2.1 研究的目的 随着网络的发展，人们通过网络可以更方便更快捷交流，学习，教育，商业贸易等等。为了促进本班同学能更好的学习交流，感情勾通，快捷通知，搞好班上工作，所以决定开发班级论坛平台给同学们发表建议及意见，提供资源共享，布置班上各种计划和任务，提供更好的学习与交流环境。 2 1.2.2 研究的意义 班级网站的建设有利于家校的沟通 ， 班级网站建设有利于教师信息素养的提高 ，班级网站建设有利于学生信息素养的提高 ， 班级网 站建设有利于学生网络道德教育。班级网站建设有利于信息的积累 ， 班级站建设有利于学生互相学习 ， 班级网站建设有利于班集体的建设 。 1.3 设计思想 通过 班级 网站，全面宣传，展示 班级 风采、优点与特色，发布 班级 的重大活动安排，增强 同学 之间的 相互 联系，提高办事效率。 1.4 主要研究内容 本论文共分为三章，主要内容如下： 第一章主要介绍课题的选题背景，然后分别介绍课题研究的目的和意义， 另外简单的概括一下本文的设计思想；第二章主要是软件的介绍及相关的术语解释，帮助我们更容易的了解网站的制作；第三章主要介绍网站的总 体分析与设计，该网站分为五个页面，主页面和四个链接子页面，然后分别详细的介绍每个页面的设计内容，设计理念，是怎样设计的等等。 3 第二章 软件介绍及相关术语解释 2.1 Dreamweaver 简介 Dreamweaver 是美国 Adobe 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Dreamweaver 特点： 1、 最佳的制作效率 Dreamweaver可以用最快速的方式将 Fireworks， FreeHand，或 Photoshop等档案移至网页上。使用检色吸管工具选择萤幕上的颜色可设定最接近的网页安全色。对於选单，快捷键与格式控制，都只要一个简单步骤便可完成。 Dremweaver 能与您喜爱的设计工具，如 Playback Flash， Shockwave 和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启 Firework或 Photoshop 来进行编辑与设定图档的最佳化。 2、 网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称， Dreamweaver 会自动更新所有连结。使用支援文字、 HTML 码、 HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 3、 无可比拟的控制能力 Dreamweaver是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含 HomeSite和 BBEdit等主流文字编辑器。帧 (frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏 或作未连续之选取。甚至可以排序或格式化表格群组， Dreamweaver 支援精准定位，利用可轻易转换 4 成表格的图层以拖拉置放的方式进行版面配置。 所见即所得 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 CSS 样式表概述 5 CSS 是 Cascading Style Sheet 的缩写，译作“层叠样式表单”。它是一种在网页制作过程中经常用到的技术。 CSS样式表其实是一组样式，它增加了更多的样式定义方法 来辅助 HTML。样式就是用一个指定的名字来标识和保存的一组有关字符和段落格式的选项集合。其实，我们很早就已经与“样式”打过交道了。在 Word的“格式”菜单中的“样式项”里，提供了多种样式，如“标题 1”、“标题 2”、“正文”等。只要选定文字，然后选择不同的样式，所选定的文字就会自动改变字体、字号、对齐方式、字间距等。同样，我们可以通过 CSS来规定网页元素的各种样式，如颜色、位置、大小等。 2.4 CSS 样式表的优势 CSS样式表是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。通过 使用 CSS样式表，不仅可以对文字格式进行设置，还可以更加精确地控制布局、字体、颜色、背景和其他图文效果，从而避免在标识字符和设置段落格式等操作时重复定义需要的样式，提高网页编辑的效率。 2.5 CSS 样式表在 HTML 中的实现 在 HTML网页中加入 CSS并不是只有一种方法，在不同的情况下，可以采用不同的方法，比较常用的有下面几中。 2.5.1 嵌入式样式表 嵌入式样式表的实现很简单，只需在每个要应用样式的 HTML标签后写上 CSS属性即可。例如要设置指定表格中的文字的样式为红色，字号为 10pt，可在当前表 格的 标记内添加下面的代码： 。这种方式主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。嵌入式样式表不能充分体现出 CSS 样式表的优越性，所以应用场合并不多。 6 2.5.2 内联式样式表 若想只对当前页面应用样式，就要使用内联式样式表。所谓内联式样式表就是把样式表定义语句放在标签 和 中，设置时通常放在HTML 代码的 部分。 2.5.3 外 联式样式表 外联式样式表是将指定的样式代码放到一个扩展名为 .css的样式文件中以方便其他网页的调用。这种方式的优点是可以通过一个 .css文件管理网站中的多个网页。如果要对网站中其他页面进行样式引用，可以先把样式用记事本定义成一个“ .css”的文件。例如：打开记事本，将定义的名为 h3的样式代码写到记事本中，保存的文件名为 example.css，代码如下： h3 font-family:”黑体” ； color:green； font-style:italic； 引用时在网页 HTML 代码的 标记 后用 引用这个样式文件，在 部分的相应内容的前后加上 和。 2.6 超链接 超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系 ,这个目标可以是另一个网页 ,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超 链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后 ,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。按照链接路径的不同 ,网页中超链接一般分为以下 3种类型 : 内部链接 ,锚点链接和外部链接。超链接对象：如果按照使用对象的不同，网页中的 7 链接又可以分为：文本超链接，图像超链接， E-mail链接，锚点链接，多媒体文件链接，空链接等。超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个 新的 WWW网站中的网页。网页超链接：网页上的超链接一般分为三种：一种是绝对 URL 的超链接。 URL（ Uniform Resource Locator）就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径。 http:/www.xxx. com/ 第二种是相对 URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去； 还有一种称为同一网页的超链接，这种超链接又叫做书签。颜色：在网页中，一般文字上的超链接都是蓝色（当然，用户也可以自己设置成其他颜色），文字下面有一条下划 线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或 WWW网站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变（默认为紫色）。只有图像的超链接访问后颜色不会发生变化。 8 第三章 网站的总体分析与设计 3.1 网站系统分析 根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站 总体布局如下 ： 3.2 主页设计 每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色， 就网站架构上而言，它代表了网站的第一层架构，首页是打开网站后在浏览器中现实的第一个页面。 9 3.3 详细设计 3.3.1 班级主页 10 班级主页 欢迎来到计信专 101！ 班级简介 最新相册 * 本 学 期 课 程 安 排* 星期一 上午 网站建设与管理 11 班长 :林丹 设计理念 网站 首页是一个网站的入口网页，是网站建站时 树状结构 的第一页，即打开 网站后看到的第一个页面。由于首页是一个网站的第一页，也是最重要的一页 ， 人们都将首页作为体现 班级 形象的重中之重，也是 网站 所有信息的归类目录或分类缩 影。 所以，主页既要简洁清爽又要内容丰富。本次主页设计主要分为七个版块： 首先打开一个空白网页，在页面属性中外观属性设置背景颜色， 然后添加一个一行一列的表格作为总的布局版面，然后在下面的属性栏中插入背景图片 。 12 第一个版块：在刚才的表格中再插入一个一行一列的表格，从插入工具栏中插入图像 ， 让人们一目了然的就看出这是一个班级网站，该图片展示了班级的主题“张扬个性 放飞梦想”，班主任的寄语，四个静净竟敬，体现了同学们在干净的学习环境中安静的学习，即使面对激烈的学习竞争，仍然 保持相敬相爱的团结友情。 第二个板块：插入一个一行五列的表格，作为网站的导航条，分别写上班级主页，班级介绍，班级新闻，班级相册，班级留言，由此就可以看出该网站有五个链接网页，分别详细介绍班级网站的内容。 第三个版块：插入一个一行一列的表格，在表格里输入红色的几个大字欢迎来到计信专 101！这样，浏览网站的人们就能明确的知道这是计信专 101 的班级网站，从而激起想要深入了解该班级的好奇心。 第四个版块：插入一个一行两列的表格，左边的表格是文字介绍，右边是图片介绍。在左边的表格中输入简单的班级简介，用简明扼要的 言语概括一下班级整体形象，让浏览者大体了解一下我们的班级是怎样的一个集体。下面接着介绍班级最新文学，文学不是哲学或宗教，它不提供生存的理论，而是以它对世界的感悟保障人类的精神永远有一个支点，这个支点即理想。不管是在精神迷茫的时候，还是在情绪晦暗的时候，或者在我们陷入迷狂的激动时刻，文学总会给予我们可靠的心灵指引。人们通过阅读，以至聆听和观看文学，领悟到人生或世界的某种真相，点燃起心中生存的信念，寻找到个人的生存目标 从古至今，从中国到外国，概莫能外。文学最可贵之处在于它不管在什么时代什么环境中，总会让人懂 得生活并不是茫无头绪的存在，而是充满着可能性与选择性的生机勃勃的过程。文学是人类价值生长的过程，也是人类文化的镜子，它照耀着人类的灵魂，同时也照耀着人类的行为，使人成为人。所以，文学总是与人的生活融为一体的。 然后接着介绍的是我们的班级目标 班级目标可以让大家 13 拥有共同的追求，能凝聚整个班集体的力量。如果没有班级目标 ,犹如没有罗盘向导的帆船，随波逐流，随时随地都有触礁的危险。爱因斯坦说道： “ 我们体验到一种最美好，最深刻的情感，就是探索奥秘的感觉，谁缺乏这种情感，谁就会丧失神奇的内心的激动能力。 ” 通过设立班集体的探 索目标，激励学生确立明确的奋斗目标，唤起学生为实现目标而不断奋斗的欲望，使学生在完成目标后获得的探索和学习成绩的快乐，也唤醒他们心灵里的自豪感、自尊感和自信感。因此目标是使学生产生克服困难的动力和学习愿望的内在力量的唯一源泉。通过设立班集体的目标，还能够促使学生将对集体的感情上升为对集体的责任，有助于学生集体责任感的形成。当我们有了共同的目标后，我们就拥有了团结奋斗的不懈努力。 最后是我们的誓言，在这三年期间，我们要为我们共同的目标不懈奋斗，我们用青春发下誓言，用我们的热情活力，为我们的青春谱写辉煌的乐章。把 右边的表格拆分成三行，第一行写最新相册，链接到班级相册页面，然后在下面的两行分别插入图片，渲染一下班级的文化氛围。 第五个版块：插入一个两行一列的表格，第一行插入文字本学期课程安排，然后把第二行拆分成三行八列，分别写上这学期的课程表。 第六个版块：插入一个两行五列的表格，然后合并第一列的单元格，插入图片，在各个单元格没分别写上班干部的名字和担任的职务。 第七个版块：插入一个一行一列的表格，然后写上写上班级的网站归属权。 到此，班级主页就算是完成了，整体看上去，对本班级有了个大致的了解，可以看出班级的文化建设 ，课程安排，同学们的活泼热情，班集体的团结和谐。主页采取了图片和文字相结合的原理，图文并茂，更好的传递了我们班级那种蓬勃朝气的青春气息。 14 3.3.2班级介绍 设计理念 这是主页的一个连接，网站的一个子页，主要是详细介绍一下我们的班级。首先打开一个空白的网页，然后在页面属性内设置背景颜色，选取一个活泼可爱的淡粉色 15 作为该网页的背景颜色，给网页增添了不少的朝气。然后插入一个一行一列的表格 在下面的属性栏内添加背景图片，背景图片选取的也是淡粉和淡蓝相结合的带有青春气息的图片。该页面包含三个版块： 第一个版块：插入一个一行一列的表格，设置好长度宽度，然后插入和主页第一板块中一样的图片，目的是和主页保持一致，看上去整齐干净。 第二个版块：插入一个一行五列的表格，作为该网页的导航条，便于链接到网站的各个子页面，想要了解哪个页面的内容，只要单击一下导航条，就会自动链接到想要看到的页面，方便快捷。 第三个版块：插入一个一行一列的表 格，在下面的属性栏中设置它的宽度，然后在该表格内录入详细的班级介绍，简单介绍一下我们的同学，班风，班集体的相处，班级活动，同学们的学习热情等等，班级介绍不在字多，追求一个“精”字。用简单的言语概括出更全面的内容，配以适当的图片和背景，会更加的吸引浏览者的眼球。 16 3.3.3 班级新闻 光荣榜 2012 年 3 月，王洪同学获得系部安全知识技能大赛二等奖。 设计理念 17 这是班级网站的第二个子页面，主要介绍班级新闻。该网页同样和前两个页面一样，首先新建一个空包的页面，在页面属性一栏设置背景颜色，这次的背景颜色换成了淡绿色，给人一种清新的舒畅感觉。然后插入一个一行一列的表格，设置背景图片，该背景图片换成了淡 蓝色的山水图，中间点缀了些星星，使页面看上去简单干净。该页面同样也包含三个版块： 第一个版块：和前两个页面一样，也是插入一个一行一列的表格，然后插入一样的图片。 第二个版块：导航条，用于链接各个页面。 第三个版块：主要介绍班级的最新新闻，基本上也就相当于一个光荣榜，把最近同学们参加了什么活动获得了哪些奖项写在上面，提高一下班级的素质形象，激励同学们踊跃参加班级和学校组织的各项活动，积极的为班集体贡献自己的力量，为班级争光。 该网页设计继续沿着前面的设计风格做的，内容有点过于单调了点，既然是班级新闻，不 应该单单的只是写出了班级的光荣榜，还应该在添加一些同学们发生的生活趣事，学习心得等等，以后会好好地学习，做出更漂亮的网站。 18 3.3.4 班级相册 设计理念 19 该页面是网站的第三个子页面，主要是班级相。首先是新建一个空白网页，在下面的页面属性中设置背景颜色，该背景颜色选取的是亮黄色的，然后插入一个一行一列的表格，同样该页面还是分为三个版块： 第一个和第二个版块 和前面的三个页面一样，图片和布局也是采用一样的来设计，是整个网站浏览起来一目了然。 第三个版块：这个才是该网页设计的重点，插入一个一行十二列的表格，分别插入十二张班级、学校的照片，把表格设置成向右方向滑动的动感相册，简单形象。 班级相 册就像一本完整的书，甚至是一系列的书，记录校园成长的历程。每张 照片都能够配上你亲自书写的画外音，可以是图说，也可以是拍摄时的心情。 班级相册是一 本记录青春和友谊的纪念册，记录的是校园的点点滴滴，记录的是同学之间的友谊。可以说 班级相册 是岁月的写真，记忆的回顾，也是情感的酝酿天地。 班 级 相册就是一段封存的大学生活的记忆，包含了我们大学生活的美好回忆，以后我们或许没有机会再见，但是当我们翻开相册，这些曾经的回忆都会让我们想起以往的种种 ，是我们 回忆往事的载体和线索。 该页面采取动静结合的方式，形象生动的展现了班级相册的内容，看着照片慢慢的往右滑动，一幅幅不同的照片出现在眼前，倍感亲切，放佛又回到了当时的情景。该相册不但有班级活动是拍的照片，还有我们学校的照片，宿舍照片，既能了解了我们的班级同时也看到了学校和宿舍的面貌。 20 3.3.5 班级留言 艾米：你若安好，便是晴天。 /p 设计理念 该页面是网站的最后一个子页面，主要是同学们的班级留言设计。首先新建一个空白网页，在下面的页面属性栏中设置外观属性中的背景颜色，改背景颜色设置成了淡绿色的，代表着我们班级有着像小草一样的旺盛生命力。然后插入一个一行一列的表格，在下面的属性栏中添加背景图片， 背景图片同样是淡绿色的，上面印有四叶草， 四叶草 是国际公认为幸运的象征 ， 它的每片叶子都有着不同的意义， 当中包含了人生梦寐以求的四样东西： 名誉、财富、爱情及健康，倘若同时拥有这些 东西，那就是幸运了 ，我希望我们班的同学都能幸福。该页面同样也被分成了三个版块： 第一个版块：插入一个一行一列的表格，然后在表格内插入图片，设置好高度和宽度。 第二个版块：插入 一个一行五列的表格作为导航条，分别写上班级主页，班级介绍，班级新闻，班级相册，班级留言，然后分别链接到各个页面，设置 CSS 样式 a:link color: #FF0000； a:visited 22 color: #00FF00； a:hover color: #0000FF； a:active color: #FF00FF； 第三个版块：该版块主要是同学们的留言内容，首先插入一个一行一列的表格， ，然后分别插入同学们的留言内容，这些都是同学们发自肺腑的声音，有祝福，有怀念，有梦想 留言是一座光芒四射的灯塔，可以指明前进的方向；留言是一味良药，可以规箴过失，鞭策行动；留言是一部内容丰富的回忆录，它将唤回美好的昨天。荀子说：“赠人以言，重于金石珠玉”，可见，好的留言有其重要意义。好的留言就像春雨甘淋，能滋润心田，激发斗志，激励人，鼓舞人，警示人。 23 结论 21 世纪是信息高 速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且融入我们的生活。 经过了几个月的学习和工作，我终于完成了班级网站设计的论文。从开始接挑战，这也是我在大学期间独立完成的最大的项目。在这段时间里，我学到了很到论文题目到系统的实现，再到论文文章的