网站前台课程设计报告

你的名字 2022-06-15 10:58 210阅读 0赞

** **

**黄淮学院信息工程学院2014级**

**       网页设计**

**课**

**程**

**设**

**计**

**报**

**告**

**题    目：New系统**

**姓    名：**

**班    级：**

**学    号：**

**指导教师：**

**完成地点：1\#608机房**

**完成时间：2016年12月20日**

**目  录**

1 网页概述 ......................................................................................................1

1.1网页简介 .................................................................................................1

1.2  网页组成 .................................................................................................1

1.3网页设计思想...........................................................................................1

2 网页设计思路................................................................................................1

2.1网页设计背景...........................................................................................1

2.2素材收集 ..................................................................................................1

3 网页内容简介................................................................................................1

3.1网页功能简介...........................................................................................1

3.2网页主要内容描述 ...................................................................................1

3.3网页的浏览 ..............................................................................................1

4 网页设计 .....................................................................................................1

4.1网页结构..................................................................................................1

4.2网页制作环境...........................................................................................1

5 网页制作 ......................................................................................................2

5.1 素材的加工制作........................................................................................2

5.2网站的建立 ..............................................................................................2

5.3 网页设计 ..................................................................................................2

6 设计体会 ......................................................................................................2

致谢 ................................................................................................................2

一、网页概述

1.1 网页简介

网页，是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。网页说具体了是一个html文件，浏览器是是用来解读这份文件的。  本次网页设计，主要用HTML语言编写，利用Dreamweaver8.0作为开发工具。

1.2网页组成

①首页②资讯③原创④服务⑤Linux⑥联系⑦更多。

导航栏如图所示![Center][]

1.3网页设计思想

本网页使用Dreamweaver8.0作为设计工具，采用多重链接的方式展示几个方面，力求界面简洁明了的同时，设计中插入了一些特效，以提高可观赏性。在制作过程中力求综合运用所学计算机技能，充分发挥本人的专业特长，使能够通过网页上图片展示和文字介绍。各个网页之间通过超链接相互联系。

二、网页设计思路

2.1 网页设计背景

由于因特网的开放结构，对多数用户来说，已不满足于浏览别人制作的网页，而要自己制作网页发布到因特网上，所以网页制作不仅是专业人员的工作，已成为普通人的生活和工作需求。

2.2 素材收集

文字与图片是构成一个网页的两个最基本的元素。可以简略的理解为：文字，就是网页的内部实质意义；图片，就是网页的美容护肤品。除此以外，网页的元素还包括动画、音乐等等。

三、网页内容简介

3.1 网页功能简介

本网页使用超链接，即把一个网页与一个网页连接起来，能够实现在“IE”浏览器中快速、全面地展示。

3.2 网页主要内容描述

本网站分成多层链接关系，主要实现如下功能：可以在浏览器中快速切换。网站上包含很多关于Windows系统和Linux系统的知识，比如主页包含纯净版系统的下载链接、Windows系统的资讯、各种系统教程、![Center 1][] 相关链接中附带了linux系统的163开源镜像下载地址，除此之外还有激活工具的下载链接。

这些链接虽然链接到外部网站，但值得一提的是，系统的下载链接都是小编精心找的纯净版系统下载链接，可以放心下载哟。资讯页面包含许多Windows资讯，以及论坛进入链接。![Center 2][]

服务页面通过精心设计，给人一种舒适的浏览体验。Linux页面通过CSS+Div布局。 联系页面包含了我们的联系方式。更多页面包含了许多资讯新闻以及论坛。![Center 3][]

3.3网页的浏览

本网页在任何Windows环境下均可以打开浏览，只要双击“网页课程设计”文件夹下的首页.html，便可打开主页，点击其中的任意一个超级链接，便可继续浏览其它页面。网页左上方的logo当你点击便会回到主页。![Center 4][]

四、网页设计

4.1 网页结构

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。

4.2  网页制作环境

此网页主要利用Dreamweaver8.0作为开发工具，Dreamweaver是一款集网页制作和管理网站于一身的所见即所得网页编辑器，它是一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它的主要优点是制作效率高网站管理非常灵活方便，视觉化编辑与原始码编辑同步的设计。

五、网页制作

5.1 素材的加工制作

网页制作之前要收集好相关的素材，对收集的素材进行分类管理，如可分为：文字素材、图像素材、视频素材、动画素材等。并且对素材进行加工处理，以适合网站主题。如果没有合适的素材，还要自己用相关软件进行网页素材制作。一个好的网页除了需要有好的内容外还要有好的美工，网页元素的制作是美工工作的重点。

5.2网站的建立

①.搭建站点利用D的站点建立向导建立名为“New

系统”的站点，并对站点进行初步设置。②.站点目录网站的目录是指建立网站时创建的目录。例如：建立了根目录和images子目录。目录结构的好坏，对浏览者来说并没有什么太大的感受，但是对于站点本身的管理维护，内容未来的扩充和移植有着重要的影响。

5.3 网页设计

当确定了栏目和版块、确定网站的目录结构和链接结构、确定网站的整体风格创意设计、获得并制作了足够丰富的素材，就可以着手进行页面设计了。根据本次设计选题的背景、主题思想，将本次设计的重点内容确定为：主页设计、资讯、原创、服务、Linux、联系、更多。

六、设计体会

经过一段时间的设计制作，“New系统”网页系统基本设计完毕，其功能基本符合设计要求，在设计过程中，遇到了不少的问题，比如，素材加工方面，由于自身所学的知识技巧不足以满足设计构思所要达到的效果，因而一些用于表现网页特效功能而加以引用的flash动画需要从网络资源中下载获取；网页制作方面，Dreamweaver软件进阶程度较低，在应用表格进行布局时，如果结构复杂，尤其要嵌套表格时，较难控制格局，容易出错，等等。这些问题，指导老师给予耐心细致的指导和帮助而得以解决，同时也提醒我需要在今后提高专业技术素质，更需要加强软件应用能力的训练。

通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识，在此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！

做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。

总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。

致谢

网站设计从选题、构思、素材加工到完成设计以及最后的反复修改，都得到老师的悉心指导。老师和善达仁，治学严谨，对我辈爱护有加，多次询问设计进程，并为我指点迷津，帮助我开拓思路。可以说，网页设计的字里行间，无不倾注着老师的精力和心血。在这里谨向老师致以最诚挚的感谢！还要感谢14级的同学们，在这段时间的学习过程中，他们都给予我无私的帮助。愿他们拥有美好的未来。

[Center]: /images/20220615/35e414e533d94025b6e738eb265c5c03.png
[Center 1]: /images/20220615/609a39b857c14895a114d895339aad46.png
[Center 2]: /images/20220615/3487c1a829a044fa8c91424519eaa3a9.png
[Center 3]: /images/20220615/df79c0b47ccf4d45a9c1cb48d41d2c14.png
[Center 4]: /images/20220615/86899e49375445a6b30a9281baaeafd7.png