网页设计与制作报告
- -
理工大学
课程设计说明
（2015 —2016 学年第一学期）
课程名称：网络前端技术应用
班级：网络15-2 班_
学号：——————____
姓名：______淑宇__
成绩：_________________
目录
第一章主题说明 (2)
1、主题说明 (2)
2、设计的目的 (2)
3、设计的思路 (2)
4、站点地图说明 (3)
第二章使用技术及运行环境的说明 (3)
1、表格的使用 (3)
2、层的使用 (4)
3、运用Photoshop工具 (4)
4、CSS样式 (4)
5、热点 (4)
6、框架使用 (5)
7、文字移动效果 (5)
第三章课程设计的心得与体会 (5)
第四章主页说明 (7)
第五章分页说明 (9)
第六章说明 (11)
我美丽的家乡--鲁山
一、主题说明
1、主题说明
主题：我美丽的家乡鲁山
2、设计的目的
通过综合实训进一步巩固，深化和加强我们的的理论知识与专业技能。
（1）、进一步熟悉和掌握建设的基本流程和技术规；
（2）、巩固运用Dreamweaver网页制作软件制作静态网页的知识；（3）、巩固综合运用Dreamweaver独立设计一个容完整、图文并茂、技术运用得当的；
（4）、具备独立撰写实训报告的基本能力；
（5）、在网页设计的实践中培养分析问题、解决问题的能力，培养我们的创新能力和团队意识；
（6）、培养我们理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心；
（7）、为今后从事开发、维护和管理奠定基础。
3、设计的思路
利用禅意花园的优秀布局设计，再加入自己的想法和思路。以我美丽的家乡—鲁山为主题，介绍了家乡的人文，经济，美食。并插入音乐，给人以欣赏和聆听的美的体验，以下为具体设计思路：
1、站点规划，搜集资料。确定主题容，规划站点结构，从网上
搜索相关资料（图片、文字等）。
2、进行主页设计。构思主页布局，进行主页标题图片的设计，进行主页其余图片的设计和页面容的录入，最后进行主页的整体优化设计。
3、图片设计。主页图片设计和其余页面动画设计，充分运用所掌握技术，效果好。
4、综合优化。正确、得当。
5、测试并递交。在浏览器中对完成的逐页打开测试，包括正确与否，页面打开时间，图片和动画不丢失。
6、音乐的插入。正确插入音乐，调节音乐盒子大小。
4、站点地图说明
二、使用技术及运行环境的说明
（1）、表格的使用
设计网页时，插入表格的目的一般是为了能在网页中控制文字、图片在网页中的位置。利用表格可以实现不同的布局模式，而且可以保证当浏览器改变页面字体大小时保持页面布局不变，这是很重要的，因为网页设计者总是希望自己的作品能够真实地展现在浏览者面前，而利用表格可以确保这种效果。
（2）、层的使用
在这次网页设计过程中，使用了大量层，因为它灵活好用，可以随便拖动，变大变小都很方便。图层最大的特点是可以重叠，并且可以设置每个图层是否可见，同时也能自定义各图层之间的关系。（3）、运用Photoshop工具
图片的插入和设置背景图像是两个不同的概念，当然可以达到相同的效果，这是很基本的知识运用，也用了很多次，但是当图像较小时在层中插入更方便些，因为作为背景时图片会重复出现造成混乱的局面，但图片过小时，用层将之拉宽大就会使图片变模糊、严重变形，不但没能美化页面反而带来了负面影响，此时借助Photoshop工具来编辑图片。文本的插入在层或框架完成较好，但不能设置为艺术字体，运用Photoshop工具来辅助完成，其实很多地方都可以用到Photoshop工具特别是一些要表现独特设计画面的地方。
（4）、CSS样式
浏览网页时，经常看到网页的导航条是由文字制作的。这是因为文字与图像相比，文字的下载速度更快一些。但加上连接的文字可能会改变它的颜色和样式，和网页整体不协调，所以这次网页设计中利用了CＳＳ样式来定义文字的统一样式，并与网页融为一体，让网页看以来更统一。
（5）、热点
在打开带有图片的网页时，有时看到这样的情况：当鼠标指向图片的不同部位是，可以打开不同的超级，这种技术我们称之为网页图
片热点。热点经常出现在一个的导航页里，热点不仅可以将整图片作为的连载体，还可以将图片的某一部分设为，这要通过设置影像地图来实现。热点的原理就是利用HTML语言在图片上定义形状的区域，然后给这些区域加上，这些区域被称做热点。而在本次设计中，通过利用Dreamweaver中的热区制作技术，实现创建热点的效果。（6）、框架的使用
在网页设计中，框架可以将窗口分割成几个不同的小窗口，各个窗口包含不同的网页，并且在替换窗口中的网页文件时不会影响到其他窗口中的网页。框架最普通的用处就是将页面划分成为一个导航区和一个容区。框架集是一个使用框架定义网页的文件。框架集中保存了关于页面中的框架尺寸、位置以及每个框架中作为容载入的所有文件名得信息。用框架制成的网页，如UntitledFrameset-9.html所示。（7）、文字移动效果
在设计网页中插入代码，从而就可以实现文字从右向左移动的效果了。
三、课程设计心得与体会
这次网页设计实战篇——以介绍我的家乡为主题的个人设计完成后，我收获了很多，感触也很深。
我最大的感受就是理论不用于实践终究是理论，说得难听点那根本就是纸上谈兵，止于理论的学习，将来是没多少成绩的，有前途发展的话也必将是少了更为之锦上添花的一笔。
当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很