网页设计与制作报告

《网页设计与制作报告》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、桂林理工大学课程设计说明（2015—2016学年第一学期）课程名称：网络前端技术应用班级：网络15-2班_学号：——————____姓名：______孙淑宇__成绩：_________________12目　录第一章网站主题说明21、主题说明22、网站设计的目的23、网站设计的思路24、站点地图说明3第二章使用技术及运行环境的说明31、表格的使用32、层的使用43、运用Photoshop工具44、CSS样式45、热点链接46、框架使用57、文字移动效果5第三章课程设计的心得与体会5第四章主页说明7第五章分页说明9第六章版权说明11我美

2、丽的家乡--河南鲁山12一、网站主题说明1、主题说明网站主题：我美丽的家乡河南鲁山2、网站设计的目的通过综合实训进一步巩固，深化和加强我们的的理论知识与专业技能。（1）、进一步熟悉和掌握网站建设的基本流程和技术规范；（2）、巩固运用Dreamweaver网页制作软件制作静态网页的知识；（3）、巩固综合运用Dreamweaver独立设计一个内容完整、图文并茂、技术运用得当的网站；（4）、具备独立撰写实训报告的基本能力；（5）、在网页设计的实践中培养分析问题、解决问题的能力，培养我们的创新能力和团队意识；（6）、培养我们理论联系实际的工作

3、作风、严肃认真的科学态度以及独立工作的能力，树立自信心；（7）、为今后从事网站开发、维护和管理奠定基础。3、网站设计的思路利用禅意花园的优秀布局设计，再加入自己的想法和思路。以我美丽的家乡—河南鲁山为主题，介绍了家乡的人文，经济，美食。并插入音乐，给人以欣赏和聆听的美的体验，以下为具体设计思路：112、站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。2、进行主页设计。构思主页布局，进行主页标题图片的设计，进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。3、图片设计。主页图片设

4、计和其余页面动画设计，充分运用所掌握技术，效果好。4、综合优化。链接正确、得当。5、网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画不丢失。6、音乐的插入。正确插入音乐，调节音乐盒子大小。4、站点地图说明主页经济人文物产简介地理历史水美山美人更美二、使用技术及运行环境的说明（1）、表格的使用设计网页时，插入表格的目的一般是为了能在网页中控制文字、图片在网页中的位置。利用表格可以实现不同的布局模式，而且可以保证当浏览器改变页面字体大小时保持页面布局不变，这是很重要的，因为网页设计者总是希望自

5、己的作品能够真实地展现在浏览者面前，而利用表格可以确保这种效果。12（2）、层的使用在这次网页设计过程中，使用了大量层，因为它灵活好用，可以随便拖动，变大变小都很方便。图层最大的特点是可以重叠，并且可以设置每个图层是否可见，同时也能自定义各图层之间的关系。（3）、运用Photoshop工具图片的插入和设置背景图像是两个不同的概念，当然可以达到相同的效果，这是很基本的知识运用，也用了很多次，但是当图像较小时在层中插入更方便些，因为作为背景时图片会重复出现造成混乱的局面，但图片过小时，用层将之拉宽大就会使图片变模糊、严重变形，不但没能美化

6、页面反而带来了负面影响，此时借助Photoshop工具来编辑图片。文本的插入在层内或框架内完成较好，但不能设置为艺术字体，运用Photoshop工具来辅助完成，其实很多地方都可以用到Photoshop工具特别是一些要表现独特设计画面的地方。（4）、CSS样式浏览网页时，经常看到网页的导航条是由文字制作的。这是因为文字与图像相比，文字的下载速度更快一些。但加上连接的文字可能会改变它的颜色和样式，和网页整体不协调，所以这次网页设计中利用了CＳＳ样式来定义文字的统一样式，并与网页融为一体，让网页看以来更统一。（5）、热点链接12在打开带有图

7、片的网页时，有时看到这样的情况：当鼠标指向图片的不同部位是，可以打开不同的超级链接，这种技术我们称之为网页图片热点链接。热点链接经常出现在一个网站的导航页里，热点链接不仅可以将整张图片作为链接的连载体，还可以将图片的某一部分设为链接，这要通过设置影像地图来实现。热点链接的原理就是利用HTML语言在图片上定义形状的区域，然后给这些区域加上链接，这些区域被称做热点。而在本次设计中，通过利用Dreamweaver中的热区制作技术，实现创建热点链接的效果。（6）、框架的使用在网页设计中，框架可以将窗口分割成几个不同的小窗口，各个窗口包含不同的

8、网页，并且在替换窗口中的网页文件时不会影响到其他窗口中的网页。框架最普通的用处就是将页面划分成为一个导航区和一个内容区。框架集是一个使用框架定义网页的文件。框架集中保存了关于页面中的框架尺寸、位置以及每个框架中作为内容载