网页设计与制作报告文档

《网页设计与制作报告文档》由会员分享，可在线阅读，更多相关《网页设计与制作报告文档（13页珍藏版）》请在金锄头文库上搜索。

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

2、通过综合实训进一步巩固，深化和加强我们的的理论知识与专业技能。（1）、进一步熟悉和掌握网站建设的基本流程和技术规范；（2）、巩固运用Dreamweaver 网页制作软件制作静态网页的知识；（3）、巩固综合运用Dreamweaver 独立设计一个内容完整、图文并茂、技术运用得当的网站；（4）、具备独立撰写实训报告的基本能力；（5）、在网页设计的实践中培养分析问题、解决问题的能力，培养我们的创新能力和团队意识；（6）、培养我们理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心；（7）、为今后从事网站开发、维护和管理奠定基础。3、网站设计的思路利用禅意花园的优秀布局设计，再加入

3、自己的想法和思路。以我美丽的家乡河南鲁山为主题，介绍了家乡的人文 ，经济，美食。并插入音乐，给人以欣赏和聆听的美的体验，以下为具体设计思路：1、站点规划 ，搜集资料 。确定网站主题内容 ，规划站点结构，从网上搜索相关资料（图片、文字等）。2、进行主页设计。构思主页布局，进行主页标题图片的设计，进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。3、图片设计。主页图片设计和其余页面动画设计，充分运用所掌握技术，效果好。4、综合优化。链接正确、得当。5、网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画不丢失。6、音乐的插入。正确插入音乐

4、，调节音乐盒子大小。4、站点地图说明主页简介人文经济物产地理历史山美水美人更美二、使用技术及运行环境的说明（1）、表格的使用设计网页时 ，插入表格的目的一般是为了能在网页中控制文字、图片在网页中的位置。利用表格可以实现不同的布局模式，而且可以保证当浏览器改变页面字体大小时保持页面布局不变 ，这是很重要的，因为网页设计者总是希望自己的作品能够真实地展现在浏览者面前，而利用表格可以确保这种效果。（2）、层的使用在这次网页设计过程中，使用了大量层，因为它灵活好用，可以随便拖动，变大变小都很方便。图层最大的特点是可以重叠，并且可以设置每个图层是否可见，同时也能自定义各图层之间的关系。（3）、运用 Ph

5、otoshop 工具图片的插入和设置背景图像是两个不同的概念，当然可以达到相同的效果，这是很基本的知识运用，也用了很多次，但是当图像较小时在层中插入更方便些，因为作为背景时图片会重复出现造成混乱的局面，但图片过小时，用层将之拉宽大就会使图片变模糊 、严重变形，不但没能美化页面反而带来了负面影响 ，此时借助 Photoshop工具来编辑图片。文本的插入在层内或框架内完成较好，但不能设置为艺术字体，运用 Photoshop 工具来辅助完成，其实很多地方都可以用到 Photoshop 工具特别是一些要表现独特设计画面的地方。（4）、CSS 样式浏览网页时，经常看到网页的导航条是由文字制作的。这是因为

6、文字与图像相比，文字的下载速度更快一些。但加上连接的文字可能会改变它的颜色和样式，和网页整体不协调，所以这次网页设计中利用了 C样式来定义文字的统一样式，并与网页融为一体，让网页看以来更统一。（5）、热点链接在打开带有图片的网页时，有时看到这样的情况：当鼠标指向图片的不同部位是，可以打开不同的超级链接，这种技术我们称之为网页图片热点链接。热点链接经常出现在一个网站的导航页里，热点链接不仅可以将整张图片作为链接的连载体，还可以将图片的某一部分设为链接，这要通过设置影像地图来实现。热点链接的原理就是利用HTML 语言在图片上定义形状的区域，然后给这些区域加上链接，这些区域被称做热点。而在本次设计中

7、，通过利用 Dreamweaver 中的热区制作技术，实现创建热点链接的效果。（6）、框架的使用在网页设计中，框架可以将窗口分割成几个不同的小窗口，各个窗口包含不同的网页，并且在替换窗口中的网页文件时不会影响到其他窗口中的网页。框架最普通的用处就是将页面划分成为一个导航区和一个内容区。框架集是一个使用框架定义网页的文件。框架集中保存了关于页面中的框架尺寸、位置以及每个框架中作为内容载入的所有文件名得信息。用框架制成的网页 ，如 UntitledFrameset-9.html 所示。（7）、文字移动效果在设计网页中插入代码 从右向左移，从而就可以实现文字从右向左移动的效果了。三、课程设计心得与体

8、会这次网页设计实战篇以介绍我的家乡为主题的个人网站设计完成后，我收获了很多，感触也很深。我最大的感受就是理论不用于实践终究是理论 ，说得难听点那根本就是纸上谈兵，止于理论的学习，将来是没多少成绩的，有前途发展的话也必将是少了更为之锦上添花的一笔。当然也深刻认识了一点，那就是我们所学的知识虽说是很基础很根本，但没有根基怎么能建好别墅呢?所以说基础知识是很重要的， 我们在学习过程中不能小看而去忽略它，它是一笔财富，能引导我们看得更远飞得更高。通过这次设计，我发现一个很普遍的问题 ：我们往往是眼高手低，学习这些知识时觉得它就是小菜一桩 ，但现在真的验证了“看花容易绣花难” 这句话，当我们着手实践时就

9、不像我们想象中的那么简单了，每一个细节都需要注意，稍有不慎页面就在预览中变了样，因此更需要我们细心和耐心地去完成 ，也就两个字概括 认真，只有认真对待才会从骨子里学到东西，才学到心里去了。我觉得这次确实是很有意义的一次检测，本来自我感觉良好的， 结果实战时还是存在很多问题的，平时学起来觉得很轻松就以为掌握了所学知识，但现在都忘记很多细节是怎么样的了，因此开始着手时有些障碍，但我下定决心把以前的实验内容都温习一遍，遇到不懂的就及时查资料，比如翻阅资料书，百度，也可以请教同学，一起讨论，相互学习，于是最后也如鱼得水，水到渠成，因此得到一个非常重要的结论只要自己想学只要自己有那份执着与毅力 ，虚心的

10、请教，勤于查阅相关资料就一定会有收获的，真的当今没有什么知识是用不着的，在哪，哪里都是知识，只要自己持有高度的学习热忱。当然，我们在学习过程中一定要及时巩固、练习，掌握了也不一定熟悉，熟能生巧啊！我们应该吸取这个教训，否则即使我们最终达到了目的，但我们走了很多弯路，而不是事半功倍的结果了。不过最终， 经过长久的坚持与不断的琢磨，看到了自己辛苦后的成果，尽管这还有很多不足，但看着它我心里充满着喜悦，一分耕耘一分收获，这永远是真理。完成自己的作品后我也观赏了其他同学的作品，对比起来，各有千秋，当然能从其中发现很多值得我去学习的地方，比如说有的页面布局很好，有的页面内容很充实，看起来很有感觉，也可以

11、称之为网站了。从对比中，我学到了很多，能让我扬长避短，吸取他人之精华，去除他人之糟粕。这次作业对于我来说不是一项任务而是一种享受，因为我发现我越来越喜欢它，不管别人说做这件事做到多晚做得有多累，我都没觉得，甚至还越做越兴奋。对于一个女生来说，特别是对于一个对电脑不感兴趣的女生来说，我觉得这是我最大的收获，很感谢老师能给我们这次机会，我想我应该更加努力，抓住机会把它学通学精。四、主页说明主页主要从五个方面来介绍了家乡，简介、人文、经济、物产。其中人文又分山美和水美两个部分。以下为主页图片和相关代码：主页图片主页相关代码五、分页说明分主要是从家乡简介的地理优势和悠久而历史文化来介绍的，还有河南鲁山

12、的山美。例如：国家 5A 级景区尧山，4A 级画眉谷， 3A 级景区好运谷等。水美。例如：龙潭峡，鲁山森林湾水上乐园，通天河景区，亚龙湾水上乐园，鲁山黄姑浴温泉，还有冬季的天龙地滑雪世界。最后的物产介绍了具有代表性的全虫、张良腰带、猴头菌、桐油、青花瓷等。还有美食：揽锅菜、羊肉烩面、羊杂汤等。二级页面相关图片二级页面部分代码六、版权说明所有素材图片均为以我美丽的家乡河南鲁山为主题的网站所有，收集整理而来，素材图片的版权归 网络 15-2 班作者：孙淑宇所有，本站仅做个人收藏展示，不提供高分辨率商业图片。本站图片素材只供大家欣赏和个人作品制作使用，严禁用作商业用途！ 如有侵犯您的版权，请来信告知，我将立即撤消！（百度）所有提供下载的软件和资源均为软件或程序作者提供和网友推荐收集整理而来，仅供学习和研究使用。如有侵犯你的版权， 请联系我，本站将立即改正。(百度)不保证提供的下载资源的准确性、安全性和完整性；下载后请自行检查是否带有病毒，同时百度也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。本站所有页面的版式、程序、内容版权均为以我美丽的家乡 河南鲁山为主题的本站所有，未经授权，不得用于任何站点。未经以我美丽的家乡河南鲁山为主题的网站许可，任何个人、商业网 站不得复制或仿造本网站内容，凡未经许可擅自转载均会被视为侵权行为。