猫咪之家萌宠网站设计报告.docxVIP

网站设计制作报告 网站名称 猫咪之家的萌宠网站的设计与制作 所在班级 学生姓名 指导老师 完成日期 目录 TOC \o 1-1 \h \u 一、 网站题目 3 二、 网站描述 3 三、 网站规划 3 四、 网站效果 3 五、 网站制作部分 4 六、 实训中碰到的问题及如何解决的 17 七、 实训总结 17 猫咪之家萌宠网站设计报告 实训题目 猫咪之家网站的设计与制作 网站描述 宠物网站是一个介绍宠物起源、基因、影响、特征、习性、行为、驯养、图册的网站。网站集中主要展示了宠物日常生活的方方面面，让访客更能深入了解宠物。同时，宠物网站里的每一个网页都采用了统一的设计风格，以加强网站整体统一的宣传效果。最重要的是做出明星网站独特的风格，更能吸引浏览者的眼球。 网站规划 网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。 网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。 网站素材方面：计划收集各大平台好看的宠物图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。 网站文件方面：网站系统文件种类包含：html网页文件、css样式文件、js特效文件、images图片文件； 其中： （1）html文件包含：index.html首页、view1-8.html二级页面、view9.html留言页面； （2）css文件包含：common.css首页样式； （3）js文件包含：rotate.js首页动态轮播特效文件（只运用在首页）。 网站效果 网站设计方面：计划实现简洁大气的网页设计效果。 网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交本地验证功能。 网站制作部分 网站首页设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。 设计初期，网页的布局已经确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 网站详情页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 网站详情页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 网站详情页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 网站详情页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 网站详情页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 网站详情页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 网站详情页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。 注册页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。 登录页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。 实训中碰到的问题及如何解决的 实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。 实训总结 通过这次网页设计制作实训，我已经能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很