网页设计课程设计报告.doc

《网页设计课程设计报告.doc》由会员分享，可在线阅读，更多相关《网页设计课程设计报告.doc（13页珍藏版）》请在沃文网上搜索。

1、 摘要：根据本课程设计的要求，我们小组制作我们学院网站，本网站以原版本的学院网材料为内容，融入我们的设计思想进行设计。以简易、求真的切入式创作，主页上嵌入我们学院的图片新闻、新闻动态、通知公告以及学习园地等内容，整个网站采用的是静态网页制作技术。用到文字闪动flash，简单的flash图片自动更换，一些代码制作。本网站制作较为简单，页面简洁直观，方便浏览。关键词：物理与材料科学学院、网站设计目的:（1）进一步熟练掌握软件Dreamweaver等相关网站制作软件的使用，更一步提升网页的熟练设计；（2）由普通的网页设计更进一步专业网站的设计，全面了解专业网站布局与设计，技巧亮点等等。（3）学会运用

2、其他软件处理图片，美化图片。设计技术指标与要求:；（1）运用块模式实现页面文字等浮动效果；（2）利用CSS样式实现网页的美化；（3）利用附加外部CSS样式快速制作出统一风格的网页；（4）利用鼠标经过图片的变换，实现连接。 (5) 运用代码实现图片的来回切换。目录前言11 博客类网站的设计 11.1 设计思想 11.1.1 设计方案11.1.2 设计技术亮点21.2 设计步骤 21.2.1 网站首页的设计21.2.2 简介页页的设计41.2.3 机构页的设计 51.2.4 师资页的设计61.2.5 科研页设计71.2.6 教务页设计81.2.7 招生就业页设计91.2.8 生活页设计91.2.9

3、 版尾设计102 作品测试与验收 103 设计体会 104 致谢 11参考文献 11 XXXX学院本科课程设计报告前言目前，很多人的生活娱乐、工作、学习等方面都比较依赖intenet,而intenet多通过网站来提供这些服务，如在工作中查阅资料、生活交友联系交流等。因此，网站已经成为企业、单位、个人用来宣传、发布信息不可或缺的工具。因此，网页设计与网站建设技术，已经成为一种基本的工作技术。我们学生小组通过大量资料、相关途径了解到，学校网站已经成为学校宣传的一种最为常用工具，也是知识交流流通的有效途径，求学者、可沿者、学者们无不对学校网站进行浏览。学校网站给我们提供一个实用便捷的交流平台，浏览过

4、学校网站的朋友们都知道，学校网站可以将学校内的相关事件、知识、科研进度等等展现于这小小的世界之窗，学校网站让想读大学的同学们更能了解他今后的校园情况（校园风情、师资力量、教学设备等等）受到全国乃至全世界人们的关注。简而言之，学校网站就是一所学校向全世界打开的窗口，受到全世界人们的尊重和监督。本站本着“展现物理与材料科学学院风采”的思想设计而成，主要以通俗简易、简洁明了的特点，为浏览者提供大量的、最新的校园事件、校园文化风情、学院师资以及科研力量等。溶入了块、css、框架、表格、图片播放器等设计技术方法。1 教育类网站的设计1.1 设计思想1.1.1 设计方案以我院的情况分析，便以带有电子版的图

5、片为banner，并带有我们学校的原始banner图像，logo是以物理与材料科学学院字样以及学院网址为logo。内容上以仿造原版学院网的格式，加上框架、css、图片播放器、表格以及块制作浮动文字等设计技巧。内容上有学院简介、学院机构、学院师资、科研、教务等等，内容相对简单，但是很直白，表达出学院该表达、想表达的思想以及内容，加上合理的设计排版上，直观明朗。其流程图如下：物理与材料科学学院主页简介机构师资科研教务招生就业生活学院概况学院历史院长致辞行政机构实验室系设置科研动态科研力量学术讲座教务通知教室课程安排学习园地招生信息就业信息1.1.2 设计技术亮点整个网站以一个A_1.CSS样式规范

6、美化。在之后的页面上直接调出使用A_1CSS，规范整个网站的文字信息。导航条的制作是用鼠标经过图像变化进行设计。此外还采用gif格式图像，以显示文字图像闪动。网站的背景是以浅蓝绿色图片为背景，给人温馨的感觉。1.2 设计步骤1.2.1 学院首页的设计图1上图1为网站中首页所具有顶部部分，在每页顶部中导航条，显示主要的八个标签，方便跳转到其他页面。所采用的技术有：表格规范样式、鼠标经过图像以及Photoshop图片编辑。图片他配，是以带有电路板的钦州学院banner，以一种清新自然的感觉展现在浏览者眼前。网站名称，是以鲜艳的物理与材料科学学院以及我院网站网址为logo，其色调夺人眼球般的显示在版

7、头上。导航条是以鼠标经过图像来设计的，八个导航标签共使用到十六张图片，这十六张图片是经过Photoshop编辑以形成两两相似却有别的效果，相似的原因是这十六张图片是以同一张背景制作，而且其色调与网站的背景图有色调上的一致性；不同之处在于文字的颜色显示，鼠标经过前是以黑色显示，鼠标经过之后是以显眼的红色显示，各个标签之间加以短小的绿色图片区分，增强的了浏览者的点击欲望。版头部分代码如下图（一）图（一）图2首页内容如上图2。主要采用多重表格来实现页面的有效合理布局，并采用CSS规范整个页面的文字设置。整个首页页面绝大部分是用以显示最新学院动态新闻标题，给浏览者以了解相关学院相关信息事件，为增强浏览

8、者浏览欲望奠定坚实基础。页面中共有八个链接可以实现有效的连接到该网站的正文页面。一处位于右边标题前的闪动小图标，该图标采用gif闪动书图标，其色调为非常暖和的品红色调，而翻动的书本形式则预示着“点击便可翻看文章内容”， 达到了点缀的效果 。二处位于近日要闻后的“more”按钮，该按钮也是采用gif格式图标。三处位于左边的相册，图像浏览器以自动轮回播放的形式进行展示着相册的内容，相片展示时间间隔为三秒，这三秒的时间间隔非常适合人的浏览视觉。从中可以看到 物理与材料科学学院的部分成员。中间部分放置着最近将在钦州举行的第十二届区运会的祝福语，该图片是采用文字与图片相结合的方式。体现着对运动会的关注。

9、在中间以下部分是两个栏目，通知公告栏和学习园地。分别记录着学院的通知和学习的技巧、方法。1.2.2 简介页的设计在此页面中共包含学院概况、院长致辞以及学院历史的链接，此版面的设计目的是为了介绍我学院的相关硬件设施。让浏览者对我院能有最大体，最初步的了解。此页面运用了框架等设计技术，把学院概况、院长致辞、学院历史的显示内容显示到版面的左边。框架以三体为一的形式展现，在各个版面的内容都是与另外两版面分开，这可以方便修改更新。图3概况页内容如上图3。简介页面的设计是采用多重表格加以规范整个页面的整洁性，采用css样式规范了文章内容。该页面给人一种简约的印象，这个正是教育类网站需要的，庄严而不失活力。

10、点击右边的目录可以看到左边链接到相应的页面。里面有学院的概括，院长致辞和学院的相关历史。让浏览者更容易了解到学院的成长和发展的方向。在每个目录中均可以链接到对应的文章中，且每篇文章均自己生成一个页面。在右下角还有学院的联系方式，方便联系学院。概况页的部分代码代码如下： 1.2.3 机构页的设计在此页面上共显示了如下内容：行政机构、院系设置、实验室以及行政机构的详细内容。内容上显示出了各个部门的详细联系方式以及地址，浏览者能以最直接的方式联系相关部门负责人，便于交流和申请。院系设置的内容折包含我学院的所有专业，在相关专业上点击可以了解到相关专业的详细信息，如：培养目标、学制、学习年限等等内容。实

11、验室则显示着我院实验室的发展状况与发展的目标，让浏览者能更加了解和相信我院的信息与能力。本页面也是使用了表格、框架的手段，保证了页面的工整性和美观性以及便于更改更新等等功能。三个版面也是独立分开的，点击相关信息链接可将各个链接的详细信息显示于框架的右边。图4机构页的页面如上图4。该页显示了三大机构的组成，分别为：行政机构、院系设置、实验室。页面的左侧展现的是这三个机构的内容。采用的是链接方式，每个大机构下有两个以上的组成机构。当浏览者点击其中一个机构的时候，右侧会出现相应的信息，可以从中了解到行政机构中包含的内容，设有院长室、学院办公室、教务办公室、学生工作办公室，办公室的负责人在里面可以看到

12、，使人一目了然。院系设置和实验室也是使用了同样的方法设计。部分代码的截图如下图（二）所示。图（二）1.2.4 师资页的设计该虽然文字不多，但是页面采用多重表格布局，比较合理的展现了学院师资力量的基本信息，并加以css样式规范文字信息。学院老师的总数以及职称都可以再该页面中看到。从老师的能力中还可以看到学院将要发展的方向。学院教师学源结构呈现多元化的特点。师资页的部分内容如下图（5）图（5）师资力量页的部分代码如下：1.2.5 科研页的设计这个页面的设计是采用了多重表格加以规范整个页面的整洁性，采用css样式规范了文章内容。这个页面展示给人的是科学研究成果，对于一个实践性很强的学院，这无疑是非常

13、重要的。所以在这个页面中可以看到学院最新的科研动态以及有关学术交流的讲座，无论是在科研还是讲座中都会得到很多有用的知识。还有的就是学院的科研力量，当点击进入后，可以看到许多学院经验丰富的科研教师。每个老师都能独挡一面。科研页图见下图6图（6）还可以通过代码查看，科研页的部分代码如下图（三）：图（三）1.2.6 教务页的设计教务页给我们展示的是教务的相关通知以及公告，在该页上可以通过点击左边的标题来查看里面的内容。教务通知是有关教师的通知。教师可以通过里面了解学院的计划和安排。教室课程安排中可以看到老师上课的地点和时间。学习园地是为学生开辟的版块，学生在上面可以了解到很多方面的知识。学习园地上更

14、新的是一些与当下考试紧密联系的内容，比如四、六级和考研等相关的知识。在学习园地里面还可以方便的看到下一篇和上一篇的标题。1.2.7 招生就业页的设计页面的左面用大标题分为两个大模块，招生信息和就业信息。招生信息又由2011年本专科招生计划和2011年函授招生计划组成。就业信息是由学院就业信息和学院教职工招聘组成。这两个版块针对的对象也是不一样的。招生信息是针对刚刚高考结束的学生，方便他们了解学院的招生计划，让他们填志愿的时候更加踏实。而就业版块却是针对即将毕业的学生和有意向到学院应聘的教师。大四的学生可以在这个页面中浏览自己感兴趣的就业信息，老师也会在这个版块中发布一些招聘信息，方便学生浏览。

15、同时学生还可以看到有关的就业政策。其设计版面如下：1.2.8 生活页的设计 生活页是记载着学生生活中的点点滴滴，左边是学生们参加的一些活动的剪影，该版块是利用图像浏览器以自动轮回播放的形式进行展示着相册的内容。中间是一张带过渡色的图片，给人一种睿智的色彩。图片下设有三大版块，分别是分团委、学生会，电子科技协会，机电设计与创新协会。分团委和学生会分管着学生的工作，在他们的栏目中可以看到学生会参加的活动以及组织的活动。电子科技协会是物理与材料科学学院乃至学校的一级协会，他多次代表学校参加国家级的赛事，并且活的骄人的成绩。在他的板块中也可以看到最近参加的比赛。设计与创新协会是针对学院的学生而设立的，

16、它可以培养学生的动手操作能力，让学生的理论知识能够在实际操作中得到证实。以下是该页面的截图，如图（7）图（7）1.2.9 版尾设计在整个网站中都显示着同样的版尾，部分使用框架设计的页面版尾显示的形式略有差异。版尾上显示着与我学院或与我校有关联的友情链接，这些链接都是站外链接。此外，在尾部的最末端打出了该网站的所有权，并附带上相应的版权号。 该部分的设计运用了表格欲与规范与美化，并且调用主页部分的css样式规则，以使整个网站的规范化与一致性。版尾的设计如下：2 作品测试与验收作品的测试与验收实质就是做完作品设计后测试作品，看看是否按设计要求实现相关的功能。我们小组在本次设计作品到完成过程中花费了

17、较多的时间，参考了较多相关的网站，最终能够按时完成，并测试，整体上实现功能，成功通过了老师的验收。3 设计体会在设计的过程，我了解了许多关于网站的知识，首先在设计之前需有方案，有整体的布局，流程分析，也懂得相关专业网站设计步骤。同时了解到自己在网页设计方面知识欠缺，许多知识点都还没有熟练运用，今后一定要在网页设计上多花点功夫，争取有进一步的提高，同时也很感谢老师的教导与支持。4 致谢 在设计制作该网站的时候得到了班里同学的大力支持，同学们给予了相关制作网站和图片处理软件的基本使用方法，以及Q群里同学们，同学们上转的材料对我们有相当大的作用。得到如此的帮助，我们才得以如此顺利的完成。参考文献1 冯志强.Dreamweaver cs4网页设计与网站建设标准教程.北京：清华大学出版社，2010.102邹文波. Web应用程序开发教程.北京：人民邮电出版社，2009.3 陈笑. Dreamweaver 8，Photoshop CS 2，Flash 8 网页制作实用教程M.北京：清华大学出版社，2006.4 聂小燕. 中文Dreamweaver8网页制作11日通M.上海：机械工业出版社，2007.11