网页设计与制作
南阳理工学院
网页设计与制作程设计
20 年 月 日
课程设计任务书
一、题目：
HTML语言＋DIV＋CSS网站布局设计
二、目的要求：
2.1目的
1、了解网页设计基础知识，熟悉网页设计与制作的流程及方法。 2、掌握网站发布的方法。
3、熟练掌握HTML语言，学会利用CSS样式设计网页,掌握用CSS+DIV制作标准化网页。 2.2要求
做一个个人网站，介绍自己的基本情况。 要求用html+div+css布局设计。
每个页面要求内容、结构、表现相分离。CSS样式表可以用内部样式表和外部样式表，但不能用行内样式表。所有与表现相关的全部用CSS实现。
网站要有名称，名称自定，有logo图片，与网站标语，首页的页脚处要加入版权信息。 在网站中单独做一个页面，页面中包含一个调查表，设计内容为别人对你的网站的评价。 网站目录结构合理，图片放images文件、音乐或歌曲放入 music文件夹等，没有中文和其他特殊字符的文件夹名称或网页文件名。 有网站导航菜单，用列表实现。
网站的栏目应该有：首页、我的家乡、我的大学、关于我、联系方式、网站调查表，如有其他栏目自己增加。每个栏目都要有单独的页面。 站点至少要有二层结构，页面数不得少于5页。
首页命名要规范，存放位置要正确，不可以是zhuye.htm、main.htm、我的主页.htm等。主页文件名应该使用index.htm或index.html。其他文件或文件名命名也要规范，不使用汉字或带有空格的名称。
要仔细考虑网站定位。分析面向的潜在访客群体的需求特点，选择内容和版式。 网站主题突出、内容丰富。
网站风格统一，设计适合于主题的LOGO。
各页面设计合理、美观，有创意。不要太花哨或太孩子气。要有网页平面设计过程，不要只是各种元素的随意拼凑。
各个页面之间的链接要合理有效，路径要正确（相对路径）。 页面制作要简洁、大方、美观、实用。
绝对禁止相互抄袭，一经发现，成绩均为0分。
三、主要内容及实现的功能
本课程的主要内容有网页基础、HTML语言、网页制作工具NVU和Web标准、CSS+DIV网站布局。
通过本课程的学习，实现通过HTML语言＋DIV＋CSS样式表技术来设计和制作网页。
四、设计进程：
1. 设计方案：
(1) 潜在访客群体的需求特点：版式和内容的需求； (2) 站点目录结构图：
(3) 色彩方案：主色调、次色调；
(4) 布局方案：导航和其他网页内容的位置；
(5) 平面设计图：使用gimp绘制网页平面设计图和效果图； 2. 制作网页主页： （1） （2） （3）
切割图片； 录入文字； 制作网页；
3. 制作其他页，完善优化网站： （1）优化代码 （2）优化图片 （3）链接各网页 4. 完善优化网站： （1）测试网站 （2）优化网站
5. 在课程设计之前提交实训报告和作品以及用gimp做的效果图。
五、具体细则
1．可根据推荐的主题选择网站主题或自定义一个网站主题。 2．根据网站主题的特点，完成以下工作。 确定网站的栏目并画出栏目结构图；
色彩搭配根据网站主题特点，确定网站的色彩方案； 根据网站的主题收集资料：文字及图片等；
站点参考结构图
3．对网站整体结构进行设计 确定网站的版式 主页的草图 主页实现的技术 栏目页的草图 栏目页实现的技术
内容页的草图 内容页实现的技术
Gimp实现的首页和栏目页效果图
草图的设计采用gimp来绘制，也可以采用手画（铅笔+白纸），技术可选择采用FLASH动画、多媒体特效、JAVASCRIPT/VBSCRIPT技术、JAVA APPLET等。
4.主页的制作
创建一个本地站点命名为www，站点内包含一个子目录images作为图像文件夹。
修改绘制的主页草图，添加行为，输出为HTML文件。 制作动画，插入到在网页适当的位置。 在网页中录入文字 完成主页设计 5．栏目页及内容页制作
规划栏目页和内容页的样式，可选用模板或框架结构。 根据模板或框架结构生成栏目页及内容页 添加页面链接
检测网页有无垃圾代码，链接是否准确 测试站点 6．站点上传
在http://59.69.145.229上，申请免费个人空间 利用ＦＴＰ工具，上传整个站点 打开浏览器，浏览站点是否有误 7．完成实训报告和提交网站作品 写出实训报告并及时提交网站作品。
提交的内容有：(1)实训报告(2)做好的网站（上传到自己的空间即可）(3)gimp做的网页平面设计图和效果图，要有最原始文档以xcf格式的文档和png格式的图片，包括主页效果图和一个二级页面效果图。
六、主要参考资料：
[1]宋朝东.巧学巧用HTML CSS JavaScript制作网页.人民邮电出版社，2005年6月第1版第4次
[2]李超. CSS网站布局实录.科学出版社，2007年9月第1版第2次
[3]网页设计师:http://www.w3cn.org
《网页设计与制作》课程设计报告单
目录
一、引言 .................................................................................................... 8 二、制作我的主页 .................................................................................... 8 1、构思我的主页面的布局 ................................................................. 8 2、分割图片 ........................................................................................ 8 3、使用记事本书写代码并保存至index.html中 .............................. 8 4、建立style.css CSS文件 .................................................................. 9 三、制作子页面 ......................................................................................10 1.About Me ......................................................................................... 10 2.我的家乡 ......................................................................................... 11 3.我的大学 ......................................................................................... 11 4.联系方式 ......................................................................................... 12 5.网站调查表 ..................................................................................... 12 四、总结 ..................................................................................................13 五、结束语 ..............................................................................................13
一、引言
如今各色各样的网站缤纷多彩，而且网站的功能越来越强大；网页设计技术更新很快。一个网站的寿命仅仅两三年而已，网页设计不同于其他艺术，在模仿加创新的网页设计领域当中，即便是完全自己设计的，也是沿用了人们已经认同的大部分用户习惯，而且这种沿袭的痕迹时非常的明显。
不可否认，国内网页设计环境目前还停留在初级的认知阶段，也就是说，绝大多数人不知道网络的真正的可用之处，你去做一个业务的时候，不得不去做大量的说服教育工作。以乙方的身份去说服甲方，以专业角度去教育非专业认识，结果是可想而知的。也正是这种全体社会普遍的低认知水平，导致了大量网络垃圾的产生。
一个好的界面设计它的界面时弱化的，它突出的是功能，着重体现的是网站业提供给使用者是主要什么。这就涉及到浏览顺序、功能分区等等。
模块化不仅可以提高重用性，也能统一网站风格，还可以降低程序开发的强度。这里就设计一些尺寸、模数、宽容度、命名规范等等知识了，不再冗述。
随着www技术的日益成熟，网页制作技术的逐渐普及与应用，人们的工作，生活和交流方式发生了巨大的改变，网页技术已经成为当代青年学生必备的知识技能。Html是所有的网页技术的核心与基础，不管是在web上发布信息，还是编写可供交互的程序，都离不开html语言的应用。经过一段时间的学习和老师的辅导，对于html语言可以说是有一定的认识，掌握了如何运用以及配合css，帮助进行网页页面美化和页面设计。
二、制作我的主页
1、构思我的主页面的布局
设计好主方案，布局先设置好，设置我的主色调为粉色，紫色。先用gimp作出效果图和网页设计图，像素为960*900，gimp图像中的布局分header、menu、page（left和right）、footer、导航设置为：主页 About Me 我的大学 我的家乡 联系方式 网站调查表。主色调为紫色，粉色。
2、分割图片
做好gimp效果图后，进一步分割图片，使用gimp截图工具将图片保存至网页文件夹images中。
3、使用记事本书写代码并保存至index.html中
书写网站index.html的初步布局
天翼之恋————张毅
* 首页
* About Me
* 我的家乡
* 我的大学
* 联系方式
* 网站调查表
©2010版权所有：张毅
学号：213108016
班级：0821311
4、建立style.css CSS文件
根据网站主业的效果图header,page,footer的宽度首先设置为940px; #header,#page,#footer{width: 940px;}，网站的背景颜色为 background:#ac93a6;设置body居中，进一步设置header，blog，image，page，footer的背景图片，宽度及位置调整合理。导航进一步美化，对于小的错误的地方认真仔细校正。
right部分居右，宽度为690px，字体居中text-align:center;
Left部分居左，宽度为250px；字体颜色为红色，插入我的照片，设置好位置，字体居中，字体大小为15pt。
添加内容，及图片，进一步设置里面的字体，添加图片，设置图片属性。插入背景音
乐，在各个模块中输入网页内容，使网页更充实。布局设置合理，编写代码边调整。
三、制作子页面
建立文件夹other web，用以放置子页面的网页，css样式表，及图图片images
1.About Me
依照主页面的结构，做出效果图，剪切图片到images，用html+div+css语言，仿照主页面调整。
About Me
* 我的主页
* 新浪博客
* 日志
* 音乐盒
* 留言板
©版权所有：张毅
CSS外部样式仿照主页面的设置.最后检查该页面的布局，做进一步调整。
2.我的家乡
1、建立基本框架结构
2、加入背景图片，使网站看起来更加美观 3、插入背景音乐
4、输入家乡基本内容，完善网站 5、加入家乡滚动图片 6、测试网页
3.我的大学
1、建立基本框架结构
2、加入背景图片，使网站看起来更加美观
3、插入背景音乐
4、输入学校基本内容，完善网站 5、加入学校滚动图片 6、超链接至学校主页面 7、测试网页
4.联系方式
1、建立基本框架结构
2、加入背景图片，使网站看起来更加美观 3、插入背景音乐
4、输入联系方式基本内容，完善网站 5、测试网页
5.网站调查表
1、建立基本框架结构
2、加入背景图片，使网站看起来更加美观 3、书写代码建立网站调查表 4、测试网站
将各个子页面链接在一起，子页面关于我，我的家乡，我的大学，网站调查表，内容确定好，用html+div+css语言建立子网页，然后连接在一起，超链接的网址仔细检查，超链接链接正确。，优化网页内容，使网页更合理更美化，测试网站，看各个方面是否可行，背景音乐也添加好。
四、总结
在这次实训中学到很多东西，学到了使用gimp做效果图，还有书写代码做网站等有关做网页的知识。使用html+div+css做网页真的有很多学问，它们能够是网页达到预期的效果，使网页更加美观。
通过这次网页制作实训，掌握了初级的网页制作，已经能够简单的制作一些网页，同时了解到基础分钟要，要经过不停地学习，不停的实践才能够掌握好网页制作这门课程。
五、结束语
这次的网页制作实训收获颇深，一方面掌握了很多实用方便的的工具，例如，notepad++，gimp，CSS等作图工具，这在以后的学习中会经常用到，编辑一些文本，或者程序，编辑图片都会分方便。
最重要的，我对于网页制作的过程了解了不少，现在已能对所学的知识熟练掌握并运用，能够独立的制作出一些简单的页面出来，我们学习的都是最基础的东西，所掌握的也都很有用，网页方面的东西也已经有了自己的认识。在以后的学习中，我也会在努力学习，网页设计真的是一门很有用的课程，在布局方面需要很深的研究。
这次实训结束了，谢谢李秀付老师这几周以来的悉心教导，我会更加努力学习，关于网页设计方面的一些知识，取得更大的进步。
考核内容
指导教师： 成绩：