网页设计报告 张林.doc

扬 州 市 职 业 大 学课 程 设 计 报 告 书（网页制作）设计题目：爱狗网网站设计 系 别： 计算机系 专 业： 计算机网络技术 班 级： 09网络（1） 姓 名： 张 林 学 号： 0907050145 指导教师： 殷卫莉 完成时间： 2011年9月 前言本网站设计根据大二下学期所学Dreamweaver网页设计与制作一书的要求进行了相关的课程设计，此设计由09网络1班网页制作小组第二小组成员共八人共同完成的爱狗网网站设计。采用Dreamweaver8、Flash、Fireworks、Photoshop等软件进行编写、制作、测试。主要讲述了关狗与人之间的关系，通过人与狗的友好相处，使人类能够更加爱护狗，狗也能更忠诚于人类。目录 1.课程设计目的和内容 1.2 页2. 网站的总体规划 . 36页3. 网页的设计 .714页4. 动态网页设计 1517页5网站测试 . 17页6. 课程设计体会 . 1820页7. 参考文献 .21页第一章 课程设计目的和内容1.1课程设计目的本课程设计的目的是使学生对于网络信息有更加深入的理解;提高学生在实际操作中收集信息、对信息进行价值判断、进行信息整理、信息加工的能力;提高学生对静态网页设计与制作的能力;使学生掌握利用软硬件资源设计并发布一个具体网站的操作过程。1.2课程设计内容 本课程设计要求学生完成一个小型专题网站的建设。爱狗网首页宠物新闻星尚酷宠爱狗家园联系我们 图1.2-1具体的如下所示。1- 首页（争上头版的宝贝们）2- 首页（开心小品）3- 宠物新闻（古巴：狗妈妈收养14只遭遗弃小猪）4- 宠物新闻（赛赛的顶顶大法修炼成功）5- 宠物新闻（晒晒朵拉）6- 宠物新闻（好想好好爱你）7- 星尚酷宠（狗狗模仿lady gaga 一定hold住你）8- 星尚酷宠（安以轩 出了名的爱狗星）9- 星尚酷宠（巫迪文和金毛拍杂志）10- 星尚酷宠（韩庚和猫叔谁更风流）11- 星尚酷宠（李孝利携狗狗开工）12- 爱狗家园（狗狗 我的狗狗）13- 爱狗家园（狗狗 喜欢的狗狗）14- 爱狗家园（狗狗 好友的狗狗）15- 爱狗家园（狗狗 大家的狗狗）16- 爱狗家园（汪汪）17- 爱狗家园（相册）18- 爱狗家园（日记）19- 联系我们（关于爱狗网）20- 联系我们（合作伙伴）21- 联系我们（招贤纳士）22- 联系我们（帮助中心）23- 联系我们（联系我们）第二章 网站的总体规划2.1网站主题设计我们第二小组的网站设计主题为爱狗网。 因为我们组的成员共同认为狗是人类患难与共的朋友，狗被认为是通人性的动物，它对人类特别忠诚，因而具有忠贞不渝的意义。“牧羊犬三千里寻主”，“义犬救主”等例子很好地说明了这一点，“犬马之劳”也就用来比喻事做忠心耿耿。 总的来说，中国人把狗视为吉利的动物，如果谁的家里突然来了一只狗，主人就会很高兴地收养它，因它预示财富来临，所谓“猫来穷，狗来富”。狗和主人同甘共苦，如果有什么灾祸来临，它也会预示前兆，比如狗上房是暗示盗贼将至。狗喜欢吠叫，但其吠必有原因，因而古人以狗吠的时辰来取象吉凶的征兆。如正时狗吠，主妇必吵；丑时狗吠，心烦不眠；寅时吠，财神临门；卯时狗吠，前程似锦；巳时狗吠，亲人要来；午时狗吠，有人请客；未时狗吠，妻有外心，必遇小人；申时狗吠，小孩有祸；酉时狗吠，加官晋禄；戌时狗吠，提防生是非；亥时狗吠，当心吃官司。 我国古人认为，狗有除灾的作用。为什么呢？根据礼论的说法，狗属于：“至阳之畜”，在东方烹狗，可以使阳气勃发，从而蓄养万物。又东汉的应劭在风俗通义中有另外的解释，他说：天子所居住的城市一共有十二门，东方的三门是生气之门，为了不使死物在生门出现，所以在另外的九六前杀狗去灾。狗能够去邪免灾，这并非是什么奇谈怪论，就连明代著名的医学家李时珍也认可狗的这一特殊功能，他在本草纲目中记载道：术家认为狗能够禳辟一切邪魅妖术。史记说：秦国在城池的东、南、西、北四门前披裂肢解狗以抵御灾害。同时，用白狗的血涂在门上来驱逐不祥，这是自古以来就有的风俗。根据华佗别传的记述，琊有一位女子的屁股上长了一个大疮，痒而不痛，反复发作，无法治好，华佗检查以后，取来一只稻糠色的狗把狗系在马后，马走了五十里时，便把狗的脖子扭断扣在女子病疮上，一会儿，只见一条虫在皮肤下蠕动，用钩子把虫引了出来，此虫长达三尺，七天以后，女子的病也痊愈了。李时珍认为，这一病例虽然非常奇怪，但确实是狗的血腥把虫引出来。 狗，与人类的关系那么密切，狗，又具有那么神奇的作用，因此，狗成了古人祭祀时最常用的牲畜之一。古人有进修也编草为狗，谓之“刍狗”。衣以文绣，陈而祭之，祭祀一结束，就把它丢在大道上任车马践踏。老子说：“天地不仁，以万物为刍狗；圣人不仁以百姓为刍狗。”历来对这句话的理解存在许多分歧，但“刍狗”一词的含意还是确定的。 狗是人们的好伙伴，“天狗”却是人们畏惧的凶神恶煞。婚礼之前算命先生选择吉日良辰，选定之后必然在一张红纸上面写清婚礼详细略以及避忌事宜。其中重要一项就是不要冲犯了“天狗”。冲犯了“天狗”，婚礼上有些禁忌都是和“天狗”有关的。 因此，通过以上分析我们组的成员共同选爱狗网这个主题进行网站设计，通过爱狗网为了让大家了解狗，了解狗与人之间的关系，表扬那些积极向上的狗，批判那些丑恶的狗，抨击垃圾狗，使狗与人之间建立友好的关系。2.2页面风格设计 网页的页面风格主要体现在网页的布局、色彩、图标、动画、文字及网页特效之上。 我们组所做的网站导航条和版权部分以天蓝色背景为主，中间夹杂着的几朵白云为辅,正好与首页的背景相符合。导航部分采用Flash设计，当鼠标指向标题栏上的字时，会有红色的底将标题栏延伸开来，然后鼠标移开时红色的底会向中间收缩起来，同时会有一种轻快的音乐播放出来，也可以算是背景音乐罢了。中间网页内容区的主要背景色选取网页默认的颜色为白色，给人一种简单明了，朴实简洁之感。整个网页看起来有那么一种淡淡的美感。 网页的布局主要采用表格布局，表格布局可以根据用户需要将页面分成任意大小的单元格，并且在 单元格内可以嵌入任何网页对象。包括表格本身，在对每个单元格中 的对象单独操作时，不会影响其他单元格中的对象。其中部分细节也采用DIV+CSS的布局方法进行布局，这样避免了冗余代码的产生。此设计中网页宽980px，高度不限，这样避免了水平滚动条的出现。网页的框架：简简单单的复合型，如图所示：导航区（980*99px）主内容区版权区(980*80px) 图2.2-1 网页的搭配细节部分，正文文字为简简单单的14磅宋体正常标准黑色文字，简洁，清晰。部分细节文字采用CSS样式固定了文字的字体和大小，达到了美化的效果。 本网站中的所有图片都是经过PS仔细加工处理，尺寸一致，色彩谐调美观。 本网站中的所有的超链接主要采用Dreamweaver自带的默认超链接样式，简单而又平凡。有些细节部分采用CSS的超链接样式，达到了美化了超链接的效果。 本网站中的部分网页（如index.html和cyxc.html）采用了网页特效，网页特效改变了静态网页呆板、没有生气的情况，使得网页的内容更加丰富，网页内容的表现更加活泼。2.3网站结构设计 本网站采用了3层的树状层次结构。首页为自由型，相当于一个欢迎界面，主要是方便用户点击进入。主栏目页，相当于一个站点地图的作用，主要是方便用户选择自己想要进入的页面。 栏目页共分为4个，分别如下： 宠物新闻：讲述了关于近期的各网友与狗狗们的一些重大事情，共分为4个主要的事件，让用户贴近实际，更快更容易的了解身边的一些人与狗的事。 星尚酷宠：讲述了关于狗狗们与一些大家比较关注的娱乐明星们之间发生事。共分为4个争上头版的主要事件。 爱狗家园：此部分共分为4个版块，分别是狗狗、汪汪、相册、日记，其中狗狗部分为重点主要讲述了我的狗狗、喜欢的狗狗、好友的狗狗、大家的狗狗。 联系我们：这部分是为了让用户能够更快的了解我们的网站以及知晓联系我们的渠道等等。共分为5个版块，分别为关于爱狗网、合作伙伴、招贤纳士、帮助中心、联系我们。2.4网站LOGO设计 此网站的LOGO为我们小组成员自己精心策划设计，图片看起来很简单，图中为一只狗和一个人，通过此设计，主要表达了狗与人之间的关系。人与狗的关系是人类历史中最具戏剧性的，从悠远的传说，到历历在目的现实生活，狗在人类社会中充当着非常独特的角色，追溯到远古时代，人与狗就已经相濡以沫，建立起深厚的感情纽带，共享忠诚、眷顾、依赖与信任的伙伴关系。人与狗的互动关系也更为升华。狗，它告诉了我们忠诚的意义，教会我们永远不要忘记任何一个你爱的人。 因此，我们小组认为，此LOGO具有象征意义更具有值得我们网站贯穿始终使用的意义。 第三章 网页的设计3.1网站的开发流程 设计网站主题、内容、结构（1） 素材准备（2） 创建站点（3） 创建网页，调整网页而已，添加网页内容并为网页添加链接（4） 网站测试、预览并发布站点3.2创建站点 打开Dreamweaver8.0，选择菜单栏中的“站点”“新建站点”命令，出现“站点定义为”窗口如图4.1所示，在“高级”选项卡中命名站点名称“myweb”选择默认图像文件夹img单击“确定”，站点既创建成功。图3.2-13.3首页设计图3.3-13.4栏目页设计我们这组所做的爱狗网共分五个栏目，每个栏目如下图所示图3.4-1图3.4-2图3.4-3图3.4-4图3.4-53.5内容页设计 我做的是狗网页的第三个模块爱狗家园的这个版块，这个版块还是比较受欢迎的，因为里面的照片和设计风格都比较新颖和清新，让人有种回到家的感觉，所以做这个版块还是比较容易的，运用的表格的嵌套和模板的运用，再加上比较有冷色调的颜色，所以看起来很清楚，现在让我们来看一下这个网页的界面： 如下图所示： 第一张是首页运行图示： 这张图片可以看出它的基本结构，上面还有四个子导航，也有表格嵌套，然后换页面，我们来看一下效果：然后我们再点击汪汪的时候，又会出来另一个模板页，来看一下效果：这个里面还增加了留言板的效果，让人感觉很清新，也让顾客们留言很轻松，增加了网站的互动性。第四章 动态网页设计4.1动态网页设计内容我们组的动态网页设计内容为BBS论坛：分为注册新用户页面、登录页面、忘记密码页面、发表内容页面、浏览页面。4.2数据库设计 打开Microsoft Access，选择“空数据库”，选择数据库保存位置和名称（ db1 ）。 双击【使用设计器创建表】选项，设置相应的字段名称和数据类型（如id、uname、usex、uemail等)。 将鼠标指针置于id字段行中的单元格内，选择【编辑】【主键】命令，即可设置为主键。 选择【文件】【保存】命令，在【另存为】对话框中的【表名称】文本框中输入表名称（users）。 单击【确定】按钮，即可完成表的保存。 此动态网页共有三个数据库分别为ASPNETDB.MDF、BBSDB.MDF、MYDATABASE.MDF。4.3动态页面设计图4.3-1图4.3-2图4.3-3图4.3-4图4.3-5第五章 网站测试5.1服务器环境设置（配置IIS） 创建虚拟目录a.选择Internet 信息服务：【开始】【控制面板】【性能和维护】【管理工具】【Internet 信息服务】b.创建虚拟目录：右击【默认网站】【新建】【虚拟目录】 ，假设别名为“aaa”c.设置虚拟目录属性：右击【aaa】 ，在弹出的快捷菜单中选择【属性】命令，切换到【文档】选项卡，可以修改浏览器默认主页及调用顺序5.2测试方法 定义服务器网站路径 a.在【Internet 信息服务】窗口中，右击【默认网站】选择【属性】 ，选择【主目录】选项卡，在【本地路径】中选择 系统默认值：C:Inetpubwwwroot（或自定义） b.测试默认路径：在浏览器地址栏中输入http:/localhost/aaa/后按回车键即可运行默认的首页文件。第六章 课程设计体会 网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，不可能像综合网站那样做得内容大而全，包罗万象。我们没有这个能力，也没这个精力，所以必须要找准一个内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是客户感兴趣的，任何内容都可以，但主题要鲜明，在一定的主题范围内，内容做到大而全、精而深。我也学会了以下几点： 一、确定网站主题 网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，不可能像综合网站那样做得内容大而全，包罗万象。我们没有这个能力，也没这个精力，所以必须要找准一个内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是客户感兴趣的，任何内容都可以，但主题要鲜明，在一定的主题范围内，内容做到大而全、精而深。 二、搜集材料 明确了网站的主题以后，就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让客户的网站有血有肉，能够吸引住用户，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。 三、规划网站 一个网站设计得成功与否，很大程度上决定