网站设计综合实践--我的家乡.doc

网站设计综合实践结题报告 院部：信息科学与工程学院 专业：计算机科学与技术 班级： 计科1101班 学号： 姓名： 田艳玲 2014 年 9 月 15 日综合设计主题我的家乡综合设计副题霍州家乡美网站设计思路： 利用Dreamweaver6.0制作一个关于“霍州家乡美”的网站，利用表格、行为、层和链接等网页设计技术设计页面。通过photoshop等对图片进行加工处理，对整个网站的风格进行总体规划。本网站属于简约大方的一类，通过展示出霍州不同的方面给大家以不同的体验。网站功能划分及实现：家乡美网站首页联系我们新 闻旅 游历 史风 景主 页 本网站共分为六个大块：如上图所示，主页、历史、风景、旅游、新闻、联系我们。其中新闻模块由包括文化、城乡、环保、教育、交通和法制等方面。l 概要设计 所有的网页外围都具有一样的框架，只有中间的内容在改变，这样做更加直观。index.html的导航栏有主页、历史、风景、旅游、新闻、联系我们。其中留言板展现了asp的功能。“历史”链接到介绍家乡霍州历史的网页，“风景”制作了关于家乡霍州的风景照片相册，“旅游”介绍了霍州的名胜古迹，以及旅游途中可享受的美食及展示价位和霍州的一些非物质文化遗产，“新闻”显示了霍州最近在文化、城乡、环保、教育、交通和法制等方面发生的事情，“联系我们”链接了asp网页，可以向我们留言，可以实现动态交互。 所用工具：dreamweaver、photoshop等。通过photoshop等对图片进行加工处理，将处理好的图片插入到dreamweaver中，并进行排版等工作，最后编辑文字内容格式，网页制作完毕。l 详细设计 本网站一共有14个页面，每一个页面都能够相互跳转，而不使用浏览器上的后退按钮。除了首页以外每个页面都设置了锚点使其返回顶部。每个页面的字体都是导入的外部样式的字体进行的设置。下面，介绍一下重点几个页面的设计: 1）”主页”： 在主页上，放置了3张霍州特色的风景，并以带有特殊效果的幻灯片形式循环播放，图片左下角有控制图片前后张的按钮，可以点击，实现照片的跳转。其中幻灯片的过渡效果，用了jquery的jquery.jqtransform.js实现。 2）”历史”： 此页面，以左右格式划分开，左边介绍霍州自古以来的历史，右边介绍了霍州的一些地面、气候、自然资源等信息。 3）”风景”： 页面上放置了9张霍州著名的风景，分别是：鼓楼、霍州全貌、霍州署、陶唐峪、千佛崖、七里峪、娲皇庙、教堂和霍州特色院落。每张图片，鼠标悬浮上后，会显示放大镜的标志，点击，将图片放大。同时可以点击左右两侧的箭头观看下一张。Js代码位于touchTouch.jquery.js中。 4）”旅游”： 页面分上下，左右结构。上面的div便签里放置推荐的3个景点。分别用图片显示，同时，用js实现了特殊特效：当鼠标悬浮在图片上时，有类似于翻页的效果，使得在图片的左边出现推荐风景的名称和简介。此效果由jquery中的js实现。同时，下面的div标签又分左右结构，左边添加霍州的美食小吃、参考价格和非物质文化遗产，右边列举出其他。整个页面显得整洁大气，简约。 5）”新闻”： 页面分为左右结构。左边放置霍州的重大图片新闻。右边放置新闻其他方面的链接。每一则新闻的都描述了大概内容。点击“详情”按钮，可以连接至霍州新闻网进行详细了解。对于其他方面的新闻页面，与本页面结构相似。 6）”联系我们”： 这个为asp页面，实现动态交互。在右边的表单中填写姓名、邮箱、以及内容，点击“提交”通过js的合格验证后就可以显示至本页面的论坛中，通过邮箱，本网站的管理员可以联系客户。本网站只有管理员提供网站密码才可删除留言。 关于留言板，它使用access数据库，非本地连接，可以在任何一个地方打开而不存在问题。共有insert，delete，function，config，odbc_contection这么五个asp文件，并且还有一个CSS文件用来设计a标签，body的字体，颜色等样式。同时还有form表单的样式。l 制作步骤 1）素材的准备 网站的排版格式是用Dreamweaver表格画出来的。所使用图片来源有自己在锡林浩特拍摄和网上下载两种途径。由Photoshop处理后插入到Dreamweaver中。还有一些个性化按钮，是经由Flash制作后在Dreamweaver中使用的。 2）网站页面制作使用DW6制作网页。先把素材整理好，把图片整理好放在新建的“图片素材”文件夹下，个性按钮放在新建的“按钮”文件夹中。然后定义站点，选择这个目录，然后就可以方便的使用和处理。制作步骤： （1）启动Dreamweaver。 （2）打开“站点”菜单，选择“新建站点”命令，选择“高级”编辑站点并确定。 （3） 选件“文件”新建html基本页，并保存为“index.html”文件。 （4）建立表格。由于将所要介绍内容分为九部分，因此建立一行九列的表格。 （5）在表格内输入文字内容，并分别创立与子网页的超链接。 （6）表格嵌套完成后开始添加内容： a)点击插入图片，在最上层的表格中插入用Photoshop所裁剪制成的图片 b）添加关于网站主题的文字内容、flash内容以及添加站内索引等相关链接内容 （7）设置页尾。 （8）为所有输入的文字内容进行排版，并最后校对网页内容。 网站设计总结本次网页设计中，我不仅学到了很多关于网页设计方面的知识，也从中学会了关于网络、编程等方面的知识。我学会了运用Dreamweaver软件设计网页，完善网页。在这个过程中，我通过自学教材、上网查询，学习了很多知识，包括网站的排版等等。在设计过程中也出现了很多的问题，但通过看书，上网查询，请教老师等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。在制作网页的过程中也出现了很多问题：如何连接外部js，css。div的布局方式，横向布局。还有css的样式设计，图片大小设置的标签，属性。通过上网查阅资料和查看相关书籍，问题才得以解决。这次作业对于我来说不是一项任务而是一种享受，因为我发现我越来越喜欢它，不管别人说做这件事做到多晚做得有多累，我都没觉得，甚至还越做越兴奋。对于一个女生来说，特别是对于一个对电脑不太感兴趣的女生来说，我觉得这是我最大的收获，我找到了我的兴趣、我的老师，我在计算机专业中找到了方向。通过这次网站设计，既复习了oracle培训中所讲到的网站知识，又学会了Dreamweaver的使用，同时还对上学期的Photoshop有了一定的应用和巩固。很感谢老师能给我们这次机会，当然也发现有很多同学跟我一样喜欢上了它，在这方面也做得比较好，于是我也有一种紧迫感，毕竟现在竞争压力很大，“适者生存，弱者淘汰”是亘古不变的自然法则，我想我应该更加努力，抓住机会把它学通学精。l 参考文献：【1】【2】DreamweaverCS6 网站设计与网站组建 标准教程 清华大学出版社【3】【4】【5】【6】