网页制作设计报告.docx
《网页制作设计报告.docx》由会员分享，可在线阅读，更多相关《网页制作设计报告.docx（10页珍藏版）》请在冰点文库上搜索。
网页制作设计报告
青岛大学
网页制作实训报告
专业09级电子商务
二0一一四年七月十二日
实训报告任务书
目的:
掌握Dreamweaver8.0在网页设计制作中的运用，学习一些网页制作的基本技术，学会Dreamweaver8.0中所提供的层、框架、模板和库、表单、层叠样式表、行为等各种网页元素的功能和使用方法，对Dreamweaver8.0的高级使用有一个全面的认识。
地点：
青岛大学东校区
内容:
设计一个宣传介绍“江北水乡，运河古城—台儿庄”的相关网站。
经过设计这个网站，体现其独特的水乡魅力，让人们了解“天下第一庄—台儿庄”。
进度:
第1天，明确任务，按照要求创建站点及页面。
第2-5天，创建、编辑页面，书写实训报告。
第6天，页面和实训报告初步实现，迎接老师初步检查。
第7-8天，进一步完善页面和实训报告，力争达到符合要求并完美。
第9-10天，总结设计情况，上交实训报告和课题。
三．网站设计过程3
四．设计风格8
一．网站框架结构图
首页
台儿庄简介
古城文化
古城荣誉
玩在古城
吃在古城
住在古城
购在古城
海峡基地
二．网站设计理念
1.整体理念
古韵简洁，清新舒适，淡雅美观，风格精致，内容充实。
2.网站设计使用技术
使用Dreamweaver8.0设置站点，插入层，插入表格，插入FLASH，CSS技术，插入插件，设置连接，使用了模板。
另外还使用了Photoshop，光影魔术手，画图等修饰了素材。
使用Word修饰字体，并将网站各网页的标题使用了“毛泽东字体”映衬网站整体风格。
三．网站设计过程
1.首页设计过程
首先搜索下载了网站首页设计所需要的相关素材。
然后,首先建立了网站的站点和设计了一个模板，为了营造网站的整体特色，插入了一张金黄色的背景图片作为背景,体现网站整体的古韵典雅的特色。
在主页的设计中,第一行先设计了一个表格并插入了一个网站表头的图片,在第二行插入了一个一行9列的表格,在表格内进行了分类,分别为主页、台儿庄简介、古城文化、古城荣誉、玩在古城、吃在古城、住在古城、购在古城、海峡基地。
之后插入了一个层，在层中插入了一个ＦＬＡＳＨ，在首页中插入了插件，插入了背景音乐。
这样一来可以让网站首页展现出一种古城的魅力风彩，在开始的时候就能给浏览者一种继续浏览的想法，好的网站首页是成功网站的开始。
建立一个合理的站点可以大大减少网站的制作时间，一个好的模板可以将网站整体的特色显现出来。
建立好网页之间的链接将方便浏览者的浏览，使用了CSS技术。
所以首页对于一个网站非常重要。
2.台儿庄简介设计过程
首先搜索网页台儿庄简介所需要的素材，之后在运用所建立模板的前提下再插入表格，在第一行表格内插入一个图片，展现出台儿庄的整体城市景点，还在这个表格里插入一个层，在层中添加一个下雨的FLASH，设置其FLASH参数。
在第二行中插入一个图片，并写入了一些介绍性的文字。
在第三行中插入了一个国家湿地公园的图片，插入了一个层并在层中添加了一个下雨的ＦＬＡＳＨ，设置其ＦＬＡＳＨ参数，在其中也添加了一些文字说明，展现了湿地公园的美丽。
在第三行中主要是写入了一些景点的介绍性文字。
在第四行中插入了一个台儿庄大战纪念馆的图片，并写了一些介绍性文字。
在第五行中插入一个大战纪念碑，并写入了介绍性文字。
在第六行中插入一个层，插入了一个插件，插入了一个背景音乐。
通过文字加图片，使用CSS技术，FLASH动漫的展现，把台儿庄的水上古城和大战故地展现的生动如画。
网页的大标题都使用“毛泽东的字体”展现古色韵味.映衬网站整体风格。
3.古城文化设计过程
首先搜索相关素材，插入了表格，在表格里分别插入了一张代表性的图片，之后在表格里分别插入了层，在层中编写了一些介绍性文字。
展现出运河文化，大战文化，地方文化。
将台儿庄的文化以图文的形式生动的展现出来，之后插入一个层，在层中插入了一个插件，在插件中添加了音乐，使网页有了背景音乐，使用CSS技术。
和主页之间都建了良好的链接。
网页的大标题都使用“毛泽东的字体”展现古色韵味.映衬网站整体设计风格。
4.古城荣誉设计过程
在网上搜集了相关的网页素材，建立了表格，在表格中插入图片，使用Photoshop,画图,光影魔术手等软件修饰照片素材,在图片周围编写了一些介绍性的文字，插入了一个层，在层中插入了ＦＬＡＳＨ插件，在插件中插入音乐，设置了此网页的背景音乐，使用CSS技术。
台儿庄荣誉网页的设计采用愉快的旋律衬托出台儿庄古城未来的发展会越来越好,经济发展在旅游产业的带动下会变得更加强大。
网页的大标题都使用“毛泽东的字体”展现古色韵味，映衬网站整体设计风格。
5.玩在古城设计过程
在网页的布局中采用图文并茂的效果，选择的素材都是在一定程度上能反映出台儿庄古城的特色建筑物。
首先，插入了表格，在第一行中插入了一个叫做参将署的图片，然后，在第一行的表格中插入了一个层，在层中插入了一个FLASH，这个FLASH门窗的开合，表示古城欢迎游客来光临。
第二行插入了古城的一个标志性景点石船舫的图片，并采用文字进行了介绍。
第三行插入图片谢裕大茶行,此为古城茶艺展馆，第四行插入文汇酒楼的图片，文汇酒楼集“运河文化”和“大战文化”于一体，融“齐鲁豪情”和“江南韵致”于一身，是极具人文魅力的旅游目的地，也是沿运独有、世界知名的休闲旅游度假区理想用餐场所,并用文字介绍。
第五行插入图片水陆通街牌坊，并用文字说明.第六行插入图片船形街，此为古城的典型景点，并用图文介绍，在表格中插入层，在层中插入FLASH，设置参数，展现出古城特色。
第六行插入图片天后宫，并采用文字介绍。
第七行插入图片水门，将古城著名景点都給以介绍。
在第八行中插入插件,添加音乐，使用背景音乐。
网页的大标题都使用“毛泽东的字体”展现古色韵味.映衬网站整体设计风格。
6.吃在古城设计过程
搜索素材，使用画图,Photoshop、光影魔术手等软件进行修饰图片，插入两个表格，在表格中插入图片，并采用图片加以文字说明的形式，不但让从观看上看到美味，而且在文字说明中看到其营养价值和食品来源，浏览中介绍，让人未吃先馋。
插入层，插入插件，添加音乐，设置背景音乐。
网页的大标题都使用“毛泽东的字体”展现古色韵味展现整体设计风格。
7.住在古城设计过程
搜索素材，使用画图、Photoshop等软件进行修饰图片。
插入两个表格,在表格中插入图片,而且图片还有文字说明,不但让从观看上看到居住环境的幽美雅静,而且在文字说明中看到其服务特色,浏览中细读,让人未住先感到住宿的舒适。
插入层,插入插件,添加音乐,设置背景音乐。
衬托出一种恬雅的居住环境，网页的大标题都使用“毛泽东的字体”展现古色韵味.映衬网站设计风格。
8.购在古城设计过程
搜索素材，使用画图,Photoshop、光影魔术手等软件进行修饰图片,插入两个表格,在表格中插入图片,而且图片还有文字说明,不但让从观看上看到购物环境的幽美雅静,而且在文字说明中看到其购物的服务特色，浏览中介绍,让人未逛先感到购物的美好。
插入层，插入插件,添加音乐,设置背景音乐，衬托出一种舒适恬雅的购物环境。
网页的大标题都使用“毛泽东的字体“展现古色韵味.映衬网站设计风格。
9．海峡基地
搜索素材,使用画图、Photoshop等软件进行修饰图片,插入一个表格,在表格中插入图片,又在图片背景本身的基础上插入一个层，再添加一个拥有文字的图片,这样使网页拥有文字说明的形式，不但让从观看上看到海峡基地的幽美雅静,而且在文字说明中看到其是中国第一个海峡交流基地,标志性建筑物和背景的相衬呼应,展现两岸友好交流的向往,展现了华夏儿女的心声。
插入层,插入插件,添加音乐,设置背景音乐，衬托出一种恬静优雅的居住环境。
网页的大标题都使用“毛泽东的字体”展现古色韵味，映衬网站设计风格。
四、设计风格
1.色系风格：
所设计的页面背景颜色均以金黄色为主调，主要为了突出该网页“台儿庄古城”的闲适淡雅风格,展现古色美景，安逸生活。
2.图标设计风格：
以古城江北水乡的幽静特色,展现出古城的独特魅力。
3.特效风格：
页面使用了HTML、Flash、Word文字处理，增强了页面的动感，从而使浏览者增加了深刻的印象。
4.架构风格：
每一个页面只是简单的介绍了台儿庄古城的简单信息，为浏览者大体的了解台儿庄的基本情况做铺垫，展现古韵典雅，优美景区——台儿庄。
5.内容风格：
网站主题闲适、内容主题充实、多采。
动态感十足、内容切合度高，文字都是用一些简单易懂的词语，就是为了浏览者了解我所介绍的台儿庄的简单信息。
五、心得体会
在这次网页设计中，我综合运用了以前专业所学课程的理论和实际运用知识，进行这次课程实训设计，从而进一步提高了我的设计能力，巩固扩充了我网页设计等课程所学的内容，更灵活的掌握了网页设计的方法和步骤，懂得了分析软件的综合运用，怎样确定设计方案，了解网页的基本结构，提高了设计能力，熟悉了规范和标准，最重要的是我的独立思考的能力也有了提高。
在这次设计过程中让我觉得自己在平时的观察中不太注意，观察的太少，因此让作为浏览者的我平时在XX浏览中，开始对网站页面排版动态设计开始留意和关注。
现在知道要做好一个网站并不是想象中的那么简单，需要我们平时多积累多操作，一个网站的整体性当然包括色彩图片的搭配，所以还需要提升自己的审美观。
最主要的是设计一个网站必须要先制定一个完整合适的框架图，使浏览者对整个页面有种和谐、简易、明了的感觉。
同时要收集丰富的主题素材，以展示网页的可读性。
由于我的设计能力有限，在设计过程中难免会出现错误，望在此指导老师多多指教，我十分乐意接受您的批评与指正，我将会认真听取您的指正，使我在以后的网页设计中设计的更好。
在此感谢青岛大学给我这次展示制作网页的机会。
六、参考资料
1.教材:
《HTML网页制作》—作者：
王映雪出版社：
清华大学出版社
《网页设计与制作》—作者：
丁淼出版社：
东南大学出版社
《网页特效精彩实例制作》-作者：
张怀志出版社：
人民邮电出版社
《网页制作教程》--作者：
郭初生出版社：
人民邮电出版社
《网页设计艺术》——作者：
郭根生出版社：
齐鲁电子出版社
《网站全程设计技术》—作者：
吴涛出版社：
清华大学出版社
《网页设计与制作》---作者：
任学文出版社：
中国科学技术出版社
《网页设计探索之旅》---作者：
武创、王惠出版社：
电子工业出版社
《网页设计超级梦幻组合》---作者：
杜巧玲出版社：
清华大学出版社
《网页设计教程》---作者：
吴黎兵、罗云芳出版社：
武汉大学出版社
《网页设计三剑客白金教程》---作者：
庄王健出版社：
电子工业出版社
《网页制作技术教程》---作者：
赵小林出版社：
国防工业出版社
2.素材文章：
XX，谷歌，自己编写
3.素材图片：
搜狗，谷歌，XX
指
导
教
师
评
语
评语：
成绩：
指导教师2011年7月15日
审
核
意
见
签章年月日
备注
升级会员 