网页设计报告

山西工商学院计算机信息工程学院
2017—2018学年第_一_学期
《网页设计与制作》实践考核报告单
姓名
杨呈锋
学号
2015220140333
班级
15软件设计3班
考核题目
我的个人主页
考核目的
通过设计一个自定主题网站，考核学生对HTML+CSS+JavaScript语言的掌握度，考核学生用DreamweaverCS5编辑网站的能力，包括创建网页，进行定位等的应用实现，以及JavaScript代码实现动态效果。
大作业展示中的网页作品主题明确、布局合理、页面设计得当，方便浏览的人找到想获取的信息。任何一个优秀的网站都有其明确的主题,网站主题的确立应根据网站的用途而定。整个网站需要围绕这个主题,也就是说，在网页设计之前，我们要明确这个网站的建立目的,用来做什么，围绕着这个主题和内容来制作网站所有的页面。明确对网页的制作有着很重要的作用。
作品中的网站外观简洁大方，界面友好易懂，是网页制作初学者的优秀模版。例如网页的布局，素材的管理，代码的简化等等，都可以从中得到许多启发和借鉴意义。目前通过这学期以来老师的悉心教导和学习，已基本掌握网页制作的基础知识。而有关网页内容的设计与编排，还有待更多的实践操作来提高。总的来说，已对网页的制作有一定的认识和基本的了解。从目前学习的进度来看，个人认为老师还可以教授我们“行为的应用”和“基础动态网页”等知识，拓展我们制作网页的知识。在个人的网站建设中，希望加入运用更多更高级的技术来呈现和表达自己网站的主题和内容。例如设计网页中的一些动作和事件，以此来达到更好的表达效果。
2.主页采用div布局，页面要求有Logo、导航栏至少包含4项，有浮动二级菜单，导航栏各项均设置超链接（可为空链接）、以及页脚版权部分，（10分）
3.定义CSS样式及样式表文件，站点下应包含.css文件，使用css样式来控制文字、图片、超链接的效果。（20分）
4.网站网页总数不少于3页，二级页面要有与主页相同的LOGO，网页中所有字体大小为12px，上边距为：0px（20分）
4.页面容量越小越好，别超过75K
有研究显示，如果一个网站页面的主体在15秒之内显现不出来，访客会很快失去对该站的兴趣。当然，也有例外，比如内容实在太精彩，人家不去不行。再像视觉艺术类站点，也不能以“快”为唯一设计标准。不过，即使这类站点，也该在加个导引页，给读者一个提示，别不理睬人家的心情。
三、课程体会
网站的文件管理、素材存放等安排得合理得当，规范有序。文件夹的命名大多使用所用素材名称的拼音，一目了然，见名知意，方便学习者的查询与研究。这种严谨和规范的做法值得日后建设自己的网站时参考和借鉴，对于网站制作的初学者来说具有指导意义。
其次网页在表头下运用了导航菜单。导航菜单是网页设计中不可缺少的重要部分，它提供了页面与页面之间跳转的通道，极大方便了浏览者访问所需的内容。利用它，我们可以快速找到我们想要浏览的页面。学习更多导航菜单的制作，可以优化我们的网页页面，使其更加完善，也能增加美观程度。
7.网站中所有文件名称均为英文。
8.新建一个文件夹，名称：学号+姓名+作品主题，如×××新闻网站（将网站文件夹移入）
评分标准
1.基本要求：主题明确，内容健康。
版面结构：版面结构合理，每个页面都有返回上一级或链接到其他页面的文字。
视觉感受：色彩搭配协调、美观，页面设计规范，没有出现乱码和错误链接。
网站风格：网站具有特色，主题、文字、图像、有创新。（20分）
从新学期开始接触网页设计这门课程以来，已将近学习了一个学期。经过这么长时间的学习，从起初对网页设计的一知半解，到如今已基本掌握网页制作的基本技能，可谓获益良多。作为一门新接触的学科，之前并没有太多的了解，只知道在计算机迅猛发展的今天，网页已成为网络世界中必不可少的一环，网民对于网页的要求也越来越高，因此，学好网页设计这门技术，对于生活在日后计算机主导的世界来说，显得更加重要了。
完成大作业需要事先精心的构思和素材的准备，从一开始网页主题的确定，到主页总体的设计、搜集资料、每个分页面的设计等，我都要一一进行规划，因为如果不规划好，制作过程中就会没有整体思路，网站就会显得缺少整体性，而且不能连贯地制作下去，难以一气呵成。定下框架之后，然后就开始一步一步有条理，有次序地做起来。制作过程中，为了提高工作效率，减少工作时间，还可以利用制作一个网页模版来减少工作量。由于一个网站中大多网页采用相同的表头和底部，仅仅内容有所不同，因此可以通过制作模版来填充多个网页内容，一次来提高网站制作效率。
作品网站“web”中合理运用了网站制作的几个基本技术来构建。首先使用了DIV标签来布局网页，简单方便。DIV标签可以设置一个规定的属性，用于设定表格、画、字规格大小或摆放位置，在网页制作中使用，可以大大减少我们对表格、画、字等的设定工作量，大大提高我们制作网页的效率。同时，也方便我们在完成网页后对部分细节的修改。
网页制作过程中需用到最基本的软件如Dreamweaver、Photoshop。Dreamweaver可以帮助我们快速构建一个初步的网站，之后再在此基础上填补和完善，便可以构建一个完整的网站。Photoshop可以帮助我们快速处理建设网站中所需要用的所有图片素材，修改成我们想要的模样，包括对素材大小、尺寸、美化等处理。若想进一步完善和更好地呈现网站内容，还可以利用Flash软件制作一些相关的小动画和动态图片。由于良好的视觉效果，Flash已被大多数网站广泛应用，借此大大增加网页的艺术效果。
考核要求
1.作品要求原创；（素材自备）
2.主题鲜明，内容健康，创意新颖；
3.网站色彩搭配协调、美观，页面设计规范，没有出现乱码和错误链接；
4.各个页面的文字、图像、动画能够清晰地表达主题；
5.版面结构合理，每个页面都有返回上一级或链接到其他页面的文字；
6.网站文件保存在一个文件夹中，图像文件保存在images文件夹中；
二、设计结果分析（亮点与不足）
1.简明易读
网页设计最重要的技巧，就是网站风格整体清新、简明、易读。看上去就明白是什么内容，信息间相互干扰程度降到最低。注意不要使背景的颜色冲淡了文字的视觉效果，一般来说，浅色背景下的深色文字为佳。
2.网站导航清晰简洁
所有的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识，让人看得明白，千万别光顾花里胡哨的视觉效果，而让人家不知东西南北，造成查看困难。
链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。如果你一定要别出心裁，链接的文本就要想着以什么方式加以突出，比如说加粗体？加字号？两侧加竖标？或者几者兼用。总之，文本链接一定要和页面的其他文字有所区分，给读者清楚的导向。
3.网页风格要统一
其实，这个原则和传统的印刷出版物没什么区别。你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。
任何一门学科的学习都需要我们多加练习实践，才能驾轻就熟，真正掌握这门学科。由于网页设计这门课程的课较少，老师需要在课堂上传授重点知识，因此课堂的实践操作时间
久不可避免地减少，所以课下的及时复习与训练就显得尤为重要了。对于“知识被遗忘”的问题，更是因为在课下没有及时巩固课堂知识所导致。因此想要学好网页设计者们课程，也许并不需要我们像专业课一样投入大量时间跟精力，只要在课堂上抓住老师所讲的重点知识，并在课下及时做好复习跟操练，便可以很好掌握网页设计的基本技能，从而达到课程学习要求。
考核成绩
任课教师签字
5.使用表单设计一个注册网页(15分)
表单中包含：姓名、性别（单选按钮）、密码、确认密码、籍贯（下拉菜单）、兴趣爱好（复选框），备注（文本区域），提交、重置按钮。
6.实践考核报告单内容填写完整，设计及截图清晰，总结分析详细。（15分）。
设计说明：
1、设计构思（包括页面效果截图）
友情链接中可以打开贝克汉姆与摩天轮页面