网页制作课程设计教学文稿

网页制作课程设计设计题目：职业技术学院学生会

系别：职业技术学院

班级：09 计网

学号：092114010028

姓名：谯辉

指导教师：徐老师董老师

2011.7.4—2011.7.15

前言

都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢——对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT 动态，包括等候就业人才的个人简历，我们上做出了突出的贡献。网页是我们在网络上的“代言人”。我们将什么样的信息传达给浏览者，要讲述什么样的事情，网页在这里起着重要的作用。

企业网站在企业的网络营销当中占有及其重要的地位，只要是涉及网络宣传的企业，都应该建立属于自己的个性企业网站。他不仅能够让企业在网络上展示自己的产品，促进实际销售的增长，更能够通过一根网线，向目标客户展示企业自身的形象。

对于企业网站设计的观点，偏重网站的形象设计，即在功能务实、体系完善的情况下，重点结合企业理念打造网站的形象。Logo就能很好的表现企业的形象。企业标志(Logo)是指用于代表企业形象的独特的、有意义的图案，是企业形象识别当中最核心的环节，可用于与企业形象相关的所有环节。由于企业标志所处的特殊地位，决定了其不能够随意更换，因此能否设计一个有内涵、有文化、便于识别的标志，并建立相关的应用系统，关乎到企业长远的发展，不容小视。

建设网站的一般过程包括：前期内容确立、网站架构搭建、创意策划、设计、网站建设。网站的功能版块一般分为首页（含引导页）、新闻部分、产品部分、信息交流部分、定制系统、零散页面等。根据不同的企业需求，各网站的功能版块数量、布局、结构各异。

要做一个有特色的网站，我们首先要熟练的掌握Dreamweaver、Photoshop 和flash等多种制作网页的工具，我们在掌握它的基础上要善于合理的利用这些工具，这样我们相才能做出一个让人看了后感到舒服的网页。

目录

一、实训任务 (1)

二、实习题目 (1)

三、实训目的 (1)

四、实训的要求 (1)

五、实训内容 (2)

（一）选题的基本原则 (2)

（二）效果图 (3)

六、设计方案 (5)

七、网页模版设计 (6)

九、分组实习 (6)

十、实习课时安排 (6)

十一、实习日志 (7)

总结 (9)

附录 (10)

一、实训任务

针对计算机各专业岗位技能要求，进行网页设计与制作项目工作，培养学生计算机操作的能力和用计算机设计网站的基本技能，使学生具备分析问题、用编程思维解决问题的能力，达到计算机初级网页设计员的水平，使学生养成既善于独立思考，又乐于与人沟通、具备团队合作意识的职业素质。

二、实习题目

职业技术学院学生会

三、实训目的

课程设计总的目的在于加深对网页设计与制作的基本知识的理解，网页设计与制作技能综合运用和提高，通过真实工作任务，是学生能设计出有一定水平的网页并解决培养解决实际问题的能力，掌握实际网页设计与制作开发流程和开发方法。

具体的课程设计应达到以下目的：

1．提高学生在实际操作中收集信息，对信息进行价值判断，进行信息整理、加工的能力。

2．在实际的项目任务中培养网页设计方面的素养。

3．在实际的项目任务中使学生网页编程和制作的能力得到提高。

4．培养学生团队协作和人际交往方面的能力。

5. 培养相关知识和技能的综合应用能力。

四、实训的要求

《网页设计与制作》的课程设计课题选择应从专业网站建设的实际出发。具体要求如下：

1. 网站的选题可以是教师的项目，也可以是自选项目。

2. 学生是课程设计环节的主体，教师只起辅助引导、协调作用。

3. 站点设计合理、管理有序、无多余文件和文件夹、大小合适。首页命名要规范，存放位置要正确，不可以是zhuye.htm、main.htm、我的主页.htm等。主页文件名应该使用index或default等。其他文件或文件名命名也要规范，不使用汉字或带有空格的名称。最好是符合各种系统命名规则。

4. 站点至少要有三层结构，页面数不得少于8页；

5. 自选主题，主题内容要合法、健康、实用。

6. 网页要有版权说明；

7. 要仔细考虑网站定位。分析面向的潜在访客群体的需求特点，选择内容和版式。

8. 网站主题突出、内容丰富；

9. 网站与网页风格应该协调一致，网站结构应层次分明，内容重点突出，页面设计要符合追求色彩的搭配、布局和合理性，以及要有一定的创意。

10.各页面设计合理、美观，有创意。不要太花哨或太孩子气。要有网页平面设计过程，

不要只是各种元素的随意拼凑。图片动画选用要适合主题，不要在网页中插入不相干的图片。适用于各种显示器的分辨率和颜色。不要太宽，否则显示器分辨率小时会出现水平滚动条。

11.各个页面之间的链接要合理有效，路径要正确（相对路径）；

12.注意网站的大小，图片保存格式和图片大小要合适；

13. 代码结构清晰，无垃圾代码

五、实训内容

（一）选题的基本原则

（1）选题应反映本专业的培养目标，符合专业综合训练的要求。

（2）选题要有利于深化所学的专业知识和拓展所学的知识面。

（3）选题的难易程度和工作量要适当，保证在规定的时间内，在教师的指导下，经过努力能够完成。

（二）效果图

成员介绍

活动记实

六、设计方案

1.该网站是一个关于学生会的网站，版式主要为“顶部框架”和“顶部和嵌套的左侧框架”，

该网站主要介绍学生会相关简介、活动记实、光荣榜、部门简介等内容。

2.站点目录结构图如下：

3.设计分工：

黄婷婷：主页设计、留言板设计、总体排版、协助所以组员完成素材收集处理及设计。

张清合：子网页一和子网页二设计及相关资料收集处理。

陈伟：子网页三设计及素材收集整理。

谯辉：子网页四和子网页五设计及协助素材收集整理。

建站成员

黄婷婷(092114010015) (组长) 陈伟(092114010003)

张清合(092114010051) 谯辉(09211401002

七、网页模版设计

（1）重要信息尽可能出现在用户最关注的位置；

（2）网页宽度定位适应当前主流屏幕分辨率模式；

（3）保持整站CSS风格一致；

（4）超级链接有下划线或颜色的明显指示；

（5）整个网站中在新窗口打开或原窗口打开网页的规则一致；

（6）网站首页字节数不宜过大；

八、必须克服的问题

（1）网站规划和栏目设置要合理：主要表现在栏目设置不应有重叠、交叉、或者栏目名称意义不明确，容易造成混淆，使得用户难以发现需要的信息，避免栏目过于繁多和杂乱、网站导航系统混乱；

（2）网页信息量足够：包括两种情况：一种页面上的内容，或者将本来一个网页可以发布的内容不可分为多个网页，而且各网页之间必须有相互链接，不需要再次点击主页；

另一方面是尽管内容总量不少，但有用的信息少，笼统介绍的内容多；

（3）栏目层次过深。重要的信息应该出现在最容易被用户发现的位置，应尽可能缩短信息传递的渠道，以使企业信息更加有效地传递给用户；

（4）网站有利于促销：通过网站向访问者展示产品、对销售提供支持，有多种具体表现方式，如主要页面的产品图片、介绍、通过页面广告较好体现出企业形象或者新产品信息、列出销售机构联系方式、销售网店信息等，或者具有积累内部网络营销资源和拓展外部网络营销资源的作用。

九、分组实习

（1）以小组为单位完成，1个主页面，至少7个子页面

（2）每个小组所有同学讨论后，推荐一名同学为该组组长

（3）组长职责：仅在本次设计过程中起组织、统领、协调作业

（4）书写完成计划书由组长牵头，根据本组同学的情况进行合理的分工

十、实习课时安排

1. 设计方案：（从第一天到第二天，最后一节课验收）

(1) 潜在访客群体的需求特点：版式和内容的需求；

(2) 站点目录结构图：

(3) 色彩方案：主色调、次色调；

(4) 布局方案：导航和其他网页内容的位置；

(5) 平面设计图：使用Fireworks绘制网页平面设计图；

2. 制作网页主页：（从第三天到第四天，最后一节课验收，可以提前验收）

(1) 切割图片；

(2) 制作动画；

(3) 录入文字；

(4) 制作网页；

3.制作其他页，完善优化网站：（第五天，最后一节课验收，可以提前验收）

(1) 优化代码

(2) 优化图片

(3) 制作留言板

(4) 链接各网页

4. 完善优化网站：（第六天，最后一节课验收，可以提前验收）

(1) 测试网站

(2) 优化网站

(3) 制作动态效果

5. 撰写课实习报告。（第10天，最后一节课验收）

实习报告必须认真撰写并打印成稿，每人一份，严格按规范要求，电子档要交。十一、实习日志

7月4日星期一

今天是第一天实习，这个星期的任务是制作网页。制作网页是这个学期才新开设的课程，虽然不是很陌生，但是对于整个网站的设计，很多网页中的技巧和特效还是很陌生。我们才走入这门课，需要更多的时间去查阅知识和积累网页的感想。今天的任务就是分组，然后大家团结合作制做出精美的网站页面。在分组的问题上有些困难是大家自由组合，弄了半天才找到合适的组员。我们不仅要自己做自己的网页，还得寻找合适的项目，制定详细的计划实施。在分工上我们也很快达到了一致，分配好了每个人的任务。然后就开始出去寻找需要的素材，并且拍摄回来制作。

7月5日星期二

今天是实习的第二天，今天我们的任务就是学整个实习计划，然后把实行计划交给老师，然后收集素材，整理素材。

7月6日星期三

我在网上参考别人的网站，感觉好美。但是自己无能为力的样子，比如Photoshop来PS 图片真的很美，用flash来制作动画也真的很好看，用代码来编写网页等等，我都无能为力。因为我不会这些，感觉真的有些失落的样子。是自己学的太少了，只是初步的学者，如果自己想做出漂亮的网页出来，还得多了解了解，多学习不是坏事。我的网页都还没着手做呢，但是内容还是收好了些。

7月7日星期四

今天，我万分焦急，因为时间已经过去了好几天，我的网页还没有开始做，最后总结也

不的不开始做了，在我不断的努力下，我花了一天的时间，把关于我们做出来了，虽然感觉很累，但是成功后的感觉又让我十分高兴，一天又这样过去了。

7月8日星期五

今天又是美好的一天，我今天的任务就是，修改关于我们和活动记实的构思和做一部分活动记实，一天就这样过去了。

7月11 星期一

今天我依旧按时来到机房，我又开始了我一天的忙碌，在我坚持了一天后，我做的活动记实终于做玩了，做完后我心里十分的高兴。

7月12 星期二

今天我们的实习已经是倒记实了，我今天的任务主要是写实习报告，通过我一天的奋斗的我实习报告终于做完了，终于我们的实习已经大功告成了。

7月13星期三

呵呵，今天是最后一天了，就是叫实习报告了。

总结

通过本次实训，我收获颇丰，学到了很多知识，特别是提高了综合分析应用的能力。

实训过程是繁琐的，但同学们都表现得很积极，不怕课程难，相互帮助一起分析。很多同学甚至吃了饭就一头扎在实训中。任课老师也非常认真负责，细心指导，一点一点解答同学们的疑惑，直到同学们理解了为止。在实训中，分析、讨论、演算，机房里充满了浓浓的学习气氛。

此次实训培养了同学们耐心的工作作风，增强了同学们的合作意识，提高了大家的应用分析能力。

按照实训计划安排与目的要求，Dreamweaver与Photoshop我还欠缺的技能与方法，而且，在今后的生活中我更需要努力练习学习使自己趋于完善。

与平时上课相比，我认为本次实训我老师与同学真正融合在一起，同学们不懂就问，老师也耐心讲解，实在让我感动。通过本次实训，我使自己许多不足之处得到了弥补，真正收获到了自己想要学习的东西。

总结这次实训，这次我们组职业技术学院学生会网页能这么顺利的完成，离不开老师的帮助和小组成员的努力。虽然这次实训我们小组只有4人，但是我们是一个有效率、有组织、有团队精神的小组，有效率在于小组制作网页中分工明确、讨论有目的；有组织在于小组成员能按时、有质量的完成自己的分工任务，值得一提的是这次网页开发的大部分时间在实训教室而我们小组成员还从未擅自旷课、上课迟到、早退等违纪行为；有团队精神在于我们小组实训过程中的共进退，从不因为自己分工任务提前完成而拉下其他组员，我们意识到小组是一个有组织、有记录、有共同目的的集体而不是一个由分散的个人组成的团体，在这次实训中之所以提出小组分工这是锻炼小组组员的个人能力培养，而帮助有困难的组员这充分培养了组员之间的默契和团队协作能力。

我相信在今后的学习与生活中，我们会做的更好。还有对于一直陪伴我们的老师，我问一些最基本的常识题，他不但没有小看我，反而耐心为我讲解，我对老师的崇敬之情难于言表。我会继续努力，相信一定我们的未来会更好。

这次是我们这学期的第二个实训，也是自己做投入、最用心的一次实训。此次网页实训是以掌握制作网页技能实训技能为主，而这次实训不仅掌握了利用Dreamweaver网页的制作技术而且还制作出了自己的成果，自己非常高兴。经过这次实训，我领悟到任何东西都要“学以至用”，学习了还不行还要看自己掌握了没，掌握了还不行还要看自己熟练了没，熟练了还不行还要做出一定成果。即将毕业，能接受这么一次有意义的学期实训感觉很充实通过这次实训，我深深体会到此次实训的重要性，更深刻体会到理论联系实践的重要性和必要性，使我感到高科技、新知识的力量。这次实训过程中，得到了学校领导的大力支持，给我提供了舒适的工作学习环境，也得到了老师的精心指导，在此表示衷心的感谢！

附录

老师评语：

老师签名：

时间：