网页实践设计说明书要求.doc

幽灵隧道网站设计说明书姓 名： 罗其其 学 号： 20121290124 班 级： 12电商1 指导教师： 李淑娟 完成日期： 2013.7.1 设 计 要 求考核目的通过课程设计，考查学生对dreamweaver网页设计的综合应用能力，要求学生能够独立制作出独特的网页作品，突出强调知识的系统性与制作方法的实用性。考核项目要求1、制作主题明确，内容健康。2、网页色彩搭配协调，布局合理。3、创意新颖，风格独特，具有现实意义。4、网站的层次结构和链接结构合理。5、整体效果好，实用性较强。6、站点命名准确，网站的可移植性强。7、网站必须由作者本人亲自构思，采集素材，整理加工，不得抄袭他人作品。目录一、规划网站11、策划网站主题22、确定网站风格23、构思网站栏目结构24、规划网站目录结构和链接结构35、设计主要页面的布局3二、准备素材31、准备文本32、准备logo33、准备图片及按钮44、准备动画45、建立库项目5三、创建网站51、创建本地站点52、网站目录结构的搭建5四、网站首页的设计与制作61、网站首页的布局设计62、编辑CSS样式文件73、编辑美化网站首页7五、制作二级栏目网页和内容网页81、制作模板82、制作基于模板的二级栏目网页83、制作框架网页8六总结910幽灵隧道网站设计说明书一、规划网站1、策划网站主题网站主题：幽灵隧道 因为自己比较喜欢看小说，一直也想创办一个自己的小说网站，所以这次便想用自己的所学，按照自己的思路规划一个有关鬼故事的网站，网站的图片素材为自己PS处理，因限于所学，部分构想未能达到理想效果，但经过后来的局部不断调整，整体还是感觉满意的。 2、确定网站风格首先我想鬼故事类的小说网站，一定要用特别的颜色渲染出那种恐怖的气氛，于是我大概的浏览了一下其他的鬼故事网站。最后决定，用幽灵的蓝色和恐怖而神秘的黑色作为主色调。风格：黑色代表死亡、恐怖、不详、地狱、神秘，蓝色代表幽灵、灵异、以蓝色和黑色为主调会对场景渲染出一种预感不详来临的感觉，让人不自觉的就会不断颤抖。3、构思网站栏目结构该网站主要是一个鬼故事网站，栏目根据故事的类别划分为医院鬼故事、校园鬼故事、惊悚鬼故事、恐怖鬼故事、推荐鬼故事、短篇鬼故事、长篇鬼故事等几大类别，可以让读者根据自己的喜好，准确的找到想看的故事类别。另外设置恐怖图片自动播放，刻意渲染恐怖气氛。鬼故事搜索栏目，则可以让读者在庞大的数据库中准确的找到自己想找的鬼故事。4、规划网站目录结构和链接结构网站目录为css结构设置的边框，内容可以鬼故事网站里查找粘贴复制后适当的精心编辑即可。医院鬼故事、校园鬼故事、惊悚鬼故事、恐怖鬼故事、推荐鬼故事、短篇鬼故事、长篇鬼故事等一级导航放在网页banner之下横向排版。纵向排榜分为三大列，主要是各类鬼故事的题目、图片以及故事文字的一小段内容，用于引起读者兴趣。5、设计主要页面的布局首页布局：banner为一个自己PS合成的图片，下面是标题栏，中间是各类推荐鬼故事，下方为一系列恐怖图片轮播。结构图设计如图1-5所示：Banner导航导航导航导航导航导航导航导航推荐内容内容图片轮播版权信息图1-5 网页结构图二、准备素材1、准备文本从各类鬼故事网站中找到比较火的鬼故事，标题粘贴复制在word中里备用。因为直接在网站上粘贴复制的文本都含有超链接，省却了自己添加超链接的时间。2、准备logoLogo标志设计如图2-2所示：图1-1 骷髅头logo寓意：建设的网站为鬼故事类的网站，所以必须要求该网站logo的标志必须与鬼一类的接近，让人能够一目了然的看懂网站logo代表的含义。从百度里搜索各种骷髅图片，然后用PS技术进行抠图，用血液笔刷添加血液效果，效果图为一只血色骷髅头。骷髅代表亡者，也是鬼故事中出现的最多的一类，能够很好的代表灵异事件。在骷髅的眼中和额头上添加了流血的效果，寓意为残忍，血腥。在骷髅的牙齿上我突出了一颗牙齿，造成类似吸血鬼的效果，寓意为亡者是要受到尊敬的，是不可侵犯的。3、准备图片及按钮从百度里搜索恐怖图片，从鬼故事网站的页面上将部分按钮下载下来，用来备用。为了更好的促进网站页面的整体和谐性，我也利用PS制作了一系列的蓝黑主调的图片备用。例如banner的背景，和栏目标题的背景。按钮设计如图2-3所示：图2-3 黑色按钮4、准备动画收集各种网页代码：访问历史记录代码、图片轮播代码、文字滑动代码等等从百度里搜索FLASH，选取一个下雨的动画。例如：下雨透明FLASH代码如下： 5、建立库项目建库首先需要建立word、flash、photos文件，用于盛放网站页面中的文字、动画、图片。然后根据建立的css样式和制作的模板库，需要建立scripts、spryassepts、templates等文件库。三、创建网站1、创建本地站点打开dreammear，新建站点，站点的名字为youlingsuidao 站点的根文件建立在U盘的一个文件夹里。2、网站目录结构的搭建因为网站的目录结构的层级对SEO的影响很大，目录结构越简单，搜索引擎访问就越容易。对百度而言，它给予网站的域名、目录和页面的权重是不一样的。当参与关键词排名竞争的时候，域名级的链接在百度是最具排名优势的，目录级其次，页面级则最低。所以我建设的网站目录结构不会超过三级。在跟目录下便设置一层子文件夹，文件夹下不会再设置深层结构。根目录设计如图3-2所示：PhotoswordflashdocJpgwwiffla图3-2 目录结构图四、网站首页的设计与制作1、网站首页的布局设计网站首页首先建立一个表格，在表格里的第一行里使用背景图片早已经准备好的banner素材，在表格里打上“幽灵隧道”，修改字体并居中，然后利用代码加入透明flash，顺便修改路径。在第二行里使用背景图片，添加鬼故事的栏目，修改字体。在最后的倒数第一行加上“版权所有：罗其其，20121290124”倒数第二行里添加恐怖图片，加上自动轮播代码。仿照鬼故事网站，在中间添加表格，并在里面添加各种图片和文字。设计界面如图4-1所示：图4-1 首页banner2、编辑CSS样式文件新建CSS样式，编辑各类文字和图片的CSS样式。Css样式设计如图4-2所示图4-2 css样式3、编辑美化网站首页整体布局设置好了之后，可以酌情添加各类代码，例如时钟代码、访问记录代码等进行整体美化。五、制作二级栏目网页和内容网页1、制作模板（1）新建一个网页文件新建一个网页文件，添加长六宽六的表格，在第一行插入如首页一样的背景图片，将第一行的表格分别合并成3份，分别插入一个flash。第二行的六个图片分别插入背景图片，打上字。将第三行到第五行的单元格合并，（限制为：左边第一行开始到第五行），留作可编辑区域，用于子页添加模板时添加内容。最后一行合并单元格，打上字：“版权声明：20121290124罗其其”。最后点击dreamwear左上角的文件另存为DWT格式的模板。（2）定义可编辑区域中间内容设置为可编辑区域，在想要移动的内容加上代码可编辑区域设计如图5-2所示图5-2 可编辑区域2、制作基于模板的二级栏目网页在子夜中套用已经制作好的模板，在可编辑区域进行文章添加3、制作框架网页如果一个网页的左边导航菜单是固定的，而页面中间的信息可以上下移动，这一般就可以认为是一个框架型网页。此外，一些框架型站点的模板在其页面上方放置了公司的LOGO或图片。不过这一块也是位置固定的。而页面的其它部分则可以上下左右移动。有的框架型站点模板还会在其固定区域中放入链接或导航按钮设计如图5-3所示：图5-3 框架页面六总结高一下学期我们学习了如何用网页设计工具dreamwear来进行网页设计，虽然刚开始我们对此网站设计工具一无所知，但经过李淑娟老师的细心教导，详细解说，让我们在学习该课程期间获益匪浅，懂得了该网站工具的使用，并能使用该网站设计工具设计出自己满意的工具来。李淑娟老师在上课期间，手把手的教我们工具的使用，并能详细举例，亲身示范，是一个高度负责的好老师，她把学生当成自己孩子，把我们当成国家的花朵，用心培养，精心灌溉。通过这一学期的学习，我自己搜集素材、整理素材，经过努力，终于把自己的小说网站页面设计出来了。在实践中成长，在实践中学习，在实践中不断进步，我肯定在以后我必将不断努力，将网页做的更好，更精美，不辜负李淑娟老师的一番栽培。效果展示设计界面如图6-1：图6-1 幽灵隧道首页信息工程学院网页设计(含HTML，三剑客)实践环节考核报告单2012-2013学年度第二学期期末排课编号： (2012-2013-2)-09132-0704309-1 批阅日期： 年 月 日姓名罗其其班级1