《脚本语言与动态网页设计实训.doc》由会员分享，可在线阅读，更多相关《脚本语言与动态网页设计实训.doc（21页珍藏版）》请在金锄头文库上搜索。
1、目 录1. 网站开发背景11.1背景分析11.2 可行性分析42. 系统设计52.1总体设计52.2 功能模块设计53. 详细设计与实现63.1页面模板设计63.1.1 Logo的设计63.1.2 导航栏的设计73.1.3 底色风格的设计73.2页面底部的设计73.3主页的设计84. 特效设计与实现104.1 导航栏特效104.2 动态时间特效114.3 下拉菜单特效124.4 图片特效144.5打开新窗口特效16结束语18参考文献201. 网站开发背景1.1背景分析 随着经济全球化、工业化、城镇化进程加快以及生活方式的改变，当前人类正在经历新的发展浪潮，人类健康模式正在发生历史性变化。特别是
2、人与动物关系发生了深刻的重大变化，在生产性动物日益集中规模化养殖及加工处置的同时，宠物饲养出现了快速大众化、平民化、多样化趋势。宠物日益成为与人类朝夕相处的生活伴侣，以宠物食物、宠物医疗、宠物美容，宠物保险等为代表的宠物产业已悄然兴起。日益发展的宠物及其产业在舒缓现代人压力，给予精神寄托的同时，也带来了新的人畜共患病、公共环境卫生等一系列的健康问题，成为现代社会面临的重大课题。在越来越城市化的社会里，人的生活和活动的空间显得越来越小，人与人的交流和交往也越来越少，而犬猫可以作为人很好的生活伴侣，可以帮助我们人解除生活的孤寂，调节人的心理健康。当然也有养犬是出于对宠物爱好。以下是养宠物的一些好处
3、： 1、宠物作为我们人类的伴侣动物是我们人类获得幸福和健康生活的一个来源，饲养宠物可以让人们生活的更健康，更充实，同时对人的心脏有好处，能降低血压和血脂，研究发现患有心脏病和其它一些慢性病的老人，饲养宠物犬猫后，通过调节人的一些心理状态，可以明显减轻临床症状。通过遛犬，与它一起玩耍，可以放松人的精神。 2、对于一些独居的孤独老年人有益于他们的身心健康，通过与宠物的相互沟通使老年人生活的更充实。犬对于独居的人是最好的伴侣。对于一些单身的老年人在家发生一些意外情况，如突然中风，心脏病突发，经过训练的伴侣宠物能及时起到报警作用。 3、在日益竞争激烈的社会中饲养宠物可以提供精神支持，特别是在遇到打击时
4、，通过与宠物犬的交流，有利于饲养者的心理健康，减轻生活中产生的各种不必要的压力，从而提高工作的效率。 4、饲养宠物可以培养孩子的责任心和爱心和社会社交能力。在孩子抚养犬时，会扮演正面角色。而且，犬被心理学家广泛地用于医治或帮助有问题的孩子或成人。饲养小犬会给儿童从小带给责任感，和对动物的理解和同情，这些常常会转移到人身上，产生同样的对人的理解和同情心和关心的效果。 5、饲养宠物可以保护家庭，起到防止家庭被盗窃，护卫作用，使整个家庭有一种安全感。宠物的听觉和嗅觉都十分敏感，对主人家庭十分忠诚，在遇到意外的情况下，宠物会挺身而出不顾自己的生命保护主人和家庭，另外家里如果发生一些煤气泄露或是忘关水龙
5、头，它也会及时提醒主人。 6、饲养宠物也可以达到治疗疾病的作用，如果一个患有胃病者饲养一条长毛狗经常把狗抱在怀里有利于胃的康复。 7、饲养宠物也可以带来无限的乐趣成为快乐和欢乐的源泉，并能促进人们进行体育锻炼，提供人与人相互交流的机会。 8、国外对饲养犬猫者进行调查发现拥有宠物能明显改善健康状况，并且每年看病的次数明显减少，即使生病其症状比不养宠物的人明显轻，所以饲养宠物可以明显减少我们用于治病的医药开支。 9、另外宠物作一个产业，在经济社会中的比重越来越重，可以解决许多人的就业和相关产业的发展。据报道上海宠物相关产业每年近六个亿人民币。有宠物美容、用品、药品、宠物医院、宠物饲料等。同时宠物上
6、的一些相关产业正在开发。 当然饲养宠物也有许多害处，最主要是宠物可以感染许多人犬共患病，有些疾病是严重威胁我们人类生命的安全，需要引起我们足够重视的。由于宠物与我们有密切接触的情况，在饲养各类可爱的宠物同时，一定要做好宠物疾病的预防和控制，一定要防止宠物疾病传染给人，否则产生的危害远大于饲养宠物的好处。下面分别说明介绍。 1、狂犬病不容忽视，狂犬病是人类传染病中死亡率最高的人畜共患病，犬猫是最容易感染和携带狂犬病病毒，如果饲养犬猫过多，不进行十分有效的狂犬病的免疫，并随意流浪一些不免疫和无证的犬 猫，就有可能使这些宠物感染狂犬病等各类疾病，就会引起人类疾病的流行，一旦发生狂犬病的流行对我们人类
7、将会带来生命的威胁。所以饲养犬首要是要做好狂犬病的有效免疫。确保饲养人和他人的生命安全和社会的安定。所以狂犬病的免疫每个国家都是法定强制性的免疫。 2、弓形体等其它人畜共患病，由于犬猫的生活习惯使得犬猫感染弓形体和一些肠道寄生虫十分普遍，弓形体是人畜共患病，如果孕妇密切接触病犬，感染后可能会引起孕妇流产和胎儿的畸形，所以孕妇还是要远离宠物为好，如果要接触，应对所养的宠物进行弓形体健康检查，确保没有感染后才可放心接触。 3、目前由于随意饲养宠物引起犬猫咬人、伤人的事故发生较多，对人造成了肉体和精神伤害，一些野犬和流狼犬成为我们的感染疾病的隐患，同时被咬后也要支付较高的治疗和免疫费用，加重了我们的
8、经济负担。 4、另外宠物的肠道寄生虫和皮肤的真菌感染也较普遍，与人密切接触很有可能感染饲养者，宠物也能感染结核病、布氏杆菌病等疾病，严重威胁我们人类的健康。饲养宠物的同时对这些疾病也要引起我们重视。 5、饲养宠物对环境造成的危害，由于大多数宠物饲养者环保意识较差，犬猫在小区或公共场所随意大小便，另外宠物病死后的尸体随意丢弃，严重污染了我们的生活环境，也产生了动物疾病引起流行的可能。 6、饲养宠物也可能会影响邻居关系，由于我们现在城市的住房还没有达到独门独户，饲养宠物特别是一些大型宠物的叫声，影响邻居的生活，有些犬会对邻居造成伤害，引起不必要的纠纷，饲养宠物引起邻居的抱怨，这是很常见的，所有养犬
9、的人一生至少碰到一次，这要引起养犬的人的思想准备。 7、养犬经济上要有很多花费，这是一定要认识到的。还要接种疫苗，除虫，抚养，喂食，生病时给它照顾，这些增加了家庭的经济负担，每年的办证，免疫看病费，饲料用品等费用对一个普通的家庭来说是一笔较大的开支。对经济较为困难，但又十分喜爱饲养宠物的家庭，会带来了更重的经济负担，我们也必须充分认识到。在我国的经济还不很发达的今天，宠物每年也消耗大量的食物和资金。城市中每年用于养犬的钱可以养活大量的我国贫困人口。 8、限制养犬人的许多自由，因为犬需要照顾，甚至周末和假期也不例外（许多人养宠物前没有意识到，以后认识到这点都太晚了，有些人于是产生将犬遗弃流放）。
10、因有些人害怕狗狗而发生危险，或有些人太宠爱犬而未采用适当保护措施而造成问题出现，或者狗狗因为惊吓而出现咬人伤人的危险，这些都是养宠物中会遇到的常见情况。本网站通过最近网络上很火的英系博美犬俊介来指导一下大家该如何照顾好自己家的宝贝，去更好的与宠物相处。1.2 可行性分析系统开发背景调研：在越来越城市化的社会里，人的生活和活动的空间显得越来越小，人与人的交流和交往也越来越少，而宠物可以作为人很好的生活伴侣，可以帮助我们人解除生活的孤寂，调节人的心理健康，但是宠物在舒缓现代人压力，给予精神寄托的同时，也带来了新的人畜共患病、公共环境卫生等一系列的健康问题，成为现代社会面临的重大课题。确定系统目标资
11、料收集：随着经济全球化、工业化、城镇化进程加快以及生活方式的改变，人与动物关系发生了深刻的重大变化，宠物饲养出现了快速大众化、平民化、多样化趋势。宠物日益成为与人类朝夕相处的生活伴侣，以宠物食物、宠物医疗、宠物美容，宠物保险等为代表的宠物产业已悄然兴起。但是我们该如何去更好地去与宠物相处依然是一件不可小觑的事，所以我决定制作一个网站，通过最近网络上很火的英系博美犬俊介来指导一下大家该如何照顾好自己家的宝贝，去更好的与狗狗相处。因此我收集了一些俊介的图片及新闻，以及狗狗的习性和养护知识来通过Javascript向爱好狗狗的人们展示一下。网站结构设计：依据商宠物网站的需求完成开发环境的搭建，在Dr
12、eamweaver中制作出大概的框架。模板页面设计：依据商宠物网站的需求完成开发环境的搭建，依据主题风格进行页面布局和模版设计。网站功能模块设计：按照栏目需求及模版布局进行栏目页的制作。 编写代码：按照统一的命名规则和编程规范进行页面代码的编写。调试与发布：完成功能模块调试和系统联调，直至达到设计要求，并将网站通过IIS进行发布。撰写实训报告：检查网站是否能正确发布，栏目规划及业务流程是否合理，页面布局及效果是否符合网站风格要求，并回答教师提问，撰写实训报告。222. 系统设计2.1总体设计 本网站主要以介绍俊介来展开对宠物的一些习性和相对应的养护知识的展示，所以我决定分成七个页面来展示。（详
13、见图2-1 ）萌宠俊介的介绍网站独 家 报 料相关信息俊妈访谈狗 狗 习 性养 护 知 识基 本 信 息主 页联 系 我 们图2-1 网站的主体设计2.2 功能模块设计 主页中先对俊介进行一个大概的介绍比如它的走红经过，让人第一印象里对它进行一个了解。然后在基本信息页面中对它再进行一下具体的介绍，这样由简入深。在养护知识和狗狗习性这两个页面里，通过俊介的榜样作用，让人们更好的去了解狗狗，照顾好狗狗。独家报料中有俊介的主人来介绍如何照顾狗狗，及俊介所属品种的解密。最后将是如何联系我们的页面。3. 详细设计与实现3.1页面模板设计CSS层叠样式表用于定义文字属性、文本属性等网页中的基本信息，是网页
14、中的字体、大小、颜色等一系列基本信息，不随浏览器及系统显示的分辨率等因素的变化而变化，使网页具有一定“固定性”。因此在对于网页的文字和标题部分，我大量使用了CSS样式表，这样可以使得标题更加美观和突出。（详见图3-1）图3-1 CSS样式表3.1.1 Logo的设计系统主页面是一个网站给人的第一印象，其页面不仅要让人觉得友善还应该突出网站的主题和特色，因此图标和图片元素显得十分重要。因为网页是关于宠物狗狗的，所以我设计了一个宠物的Logo来凸现主题，色调选择的暖色调。（详见图3-2 ）图3-2 网站Logo3.1.2 导航栏的设计导航栏以灰色和绿色为基调，这样比较清爽，让人在点击的时候，对于不
15、同页面的选择时有明显的区别，而又不让人产生烦躁感。（详见图3-3）图3-3 导航栏3.1.3 底色风格的设计整个页面设计风格以简洁清爽为主，所以页面背景采用了银灰色，填充色以绿色为主，使用了一个色系的渐变绿和蓝色。穿插着灰色来进行对比，保持了简单性。（详见图3-4）图3-4 主页面设计样式3.2页面底部的设计底部设计了一些超链接来通过站外连接展示其他的友好网站，以弥补本网站不能完全包含这些信息的缺陷，又能通过友好链接来推广自己，增加本网站的浏览量。另外最下面我还打上了自己的标示made from zhuying是不是很独特呢。（详见图3-5）图3-5 底部设计样式3.3主页的设计主页面采用的静态页面，这样能更稳定的展现主题的风格，首先在网站Logo下显示的是导航栏，让你就可以有选择的浏览其他你感兴趣的页面。导航栏下面是一幅大大地俊介卡通图，让你一下子感受到宠物可爱的一面，卡通图上面的浮层简单地介绍了俊介，而且你可以通过上面的箭头快速地跳到相关介绍的页面。再下面的走红经过，则让你更近一步了解这个萌货。（详见图3-6，图3-7）图3-6 主页设计图图3-7 主页设计图4. 特效设计与实现4.1 导航栏特效当鼠标至于导航栏其他页面上方时，模块由原来的灰色
