静态网站实训报告

南京工业职业技术学院综合项目实训报告静态网站实训课题名称噬魂神域动漫网站的设计与开发院系计算机与软件学院专业网络营销班级电商1311学号1302693111学生姓名钱雨指导教师：田小敏2014年6月19日

目录第一章绪论 11.1网站开发背景 11.2网站开发目的 11.3网站内容 2第二章网站总体分析 32.1网站功能分析 32.2网站技术分析 32.2.1实训操作环境 32.2.2网站技术介绍 3第三章网站总体设计 63.1网站总体框架图 6第四章网站详细设计 74.1网站操作流程 74.2主要功能模块 104.3主要页面介绍 144.4部分代码展示 17致谢 19个人小结 21共23页第22页 第一章绪论1.1网站开发背景实训要求，上学期我们学了网页设计。将所学到的运用到实践上。其次，本人特别喜欢看日本动漫，对网站也很感兴趣，好的动漫网站可以让动漫爱好者快速的找到自己喜欢的动漫。随着经济，人民生活水平的提高，再加上网络的快速发展，上网已经成为普遍现象，而然中国庞大的人口，可以说几乎每个人都看过动漫，通过网络观看动漫是一个趋势，动漫网站有很大的前景和市场。1.2网站开发目的近年来，随着一大批动漫作品的出现，越来越多的人开始接触和喜欢动漫，带动着全球的动漫热潮。动漫的受众人群，也从最初的青少年人群，逐步扩展到社会各个阶层，不仅小孩子、学生和时尚青年热衷于动漫，许多社会中坚阶层也认识到动漫的魅力，融入到爱好动漫的群体。一大批动漫形象代替了部分真人明星的位置，成为了新时代众多人的偶像，聪明可爱的喜洋洋，荒诞搞笑的灰太狼，机智勇敢的花木兰，神通广大的铁臂阿童木……，动漫的影响力在几年之内迅速攀升，已经成为我们这个时代流行文化的一种典型代表之一。动漫艺术的流行，是人类社会发展的必然。人类传播信息的手段，从最初的简单构图，到象形文字，再到文字和图片，直到今天的动态影像，是一步步从简单到复杂，从单一到多元化发展而来。今天的动态影像，包含了文字、声音、二维图像、三维图像、动态变化，还有最新的互动交互性、触摸感应和虚拟技术等科学技术的应用，使得今天的信息传播拥有无比丰富的信息量和便捷的应用操作性。随着我国经济的发展和人们消费观念的更新，对动漫影视作品及其周边产品的需求会得到进一步的提升。国内动漫的匮乏现状与少年儿童及其强烈的消费需要之间的矛盾是巨大的，其所带来的商业空间也无疑将是巨大的！无论是投资巨大的动漫产业还是中小型动漫周边产品的经营，在未来的几年里，肯定会获得越来丰厚的回报！通过各地的动漫展览情况来看，动漫市场无限广阔，动漫行业是充满商机与无限诱惑的，而今，点点星火正以燎原之势在蔓延，不但各种动漫受到人们的喜爱，而且各式各样的动漫图书的发行和动漫节的举办也在不断掀起阵阵动漫风暴。动漫网站有很大的市场，一个条理清晰的动漫网站更能吸引动漫爱好者。更能站稳脚步，持久发展。1.3网站内容噬魂神域动漫网汇集国内、日韩、欧美、新马泰动画片于一体，按清晰的剧情分类供漫迷选择性的观看，其中包含热血、机战、运动、推理、冒险、耽美、搞笑、战争、神魔、忍者、竞技、悬疑、社会、恋爱、宠物、萝莉、吸血鬼、美少女类型动画片！每部动漫都会作有详细的介绍例：主角、作者、海报、出品地区、出品时间、剧情介绍、故事情节、都会一一作出注明，让动漫迷对于想要看的动画片有个初步的了解！噬魂神域动漫设立了观众喜爱的动漫专题，例如：火影忍者，海贼王，死神，柯南，奥特曼，家庭教师，网球王子等等热门动漫专题[噬魂神域动漫网官方博客与微博，每天都会有更新大量的动漫资讯，动画短片以及一些动漫周边的新闻供大家一起分享！！第二章网站总体分析2.1网站功能分析（1）收藏网站功能点击收藏本站按钮就可以把噬魂神域动漫网放在收藏夹里，方便下次浏览网站。(2)实时播报功能最近更新，噬魂神域动漫网随时都有最新的动漫资讯和更新的动漫，可以让大家第一时间了解动漫的最新动态。（3）站内搜索功能站内搜索是指在噬魂神域动漫网站内点击搜索任意存在的动漫的名字，将会出现相应的动漫视频。……2.2网站技术分析2.2.1实训操作环境建网站的主机系统环境一般有两种，就是windows和linus，不同的系统支持的软件不同。

建网站主要软件环境是数据库MySQL，动态语言PHP,ASP等。linus比windows稳定，不过支持的软件版本比较低，好像windows最高支持MySQL4.12，linus支持的是MySQL3.2.8。此次做网站用到的硬件环境：电脑，键盘，鼠标，U盘，Windows7，Windowsxp；软件环境：DreamweaverCS3，IE浏览器,WPS，美图秀秀,截图工具。2.2.2网站技术介绍（1）运用DreamweaverCS3大意：Dreamweaver是将“设计”和“代码”编辑器集成在一起，既可以方便的进行源代码编辑，也可以使用鼠标方式添加和设置对象。Dreamweaver是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。强大css功能CSS样式可以有效的控制网页对象的外观，美化网页界面，如文本字体，颜色，表单样式、图像风格等。Dreamweaver中有强大的CSS样式表编辑器，可以比较轻松的编辑CSS样式。Dreamweaver提供了强大的站点管理功能，可以安全，系统的维护和管理各种规模的网站。集成性高Dreamweaver与Fireworks，Flash，Shockwave具有良好的集成性，可以在这些Web创作工具之间自由的进行切换。媒体支持能力强在Dreamweaver文档中，可以灵活加入JAVA，Flash，Shockwave，ActiveX以及其他媒体元素，也可以对各种多媒体元素进行处理。扩展能力强Dreamweaver可以实现功能的扩展。利用Adobe公司免费提供的Dreamweaver插件，可以丰富Dreamweaver的媒体处理能力。（2）DreamweaverCS3中的CSS布局规则虽然我们一直建议大家不用Dreamweaver可视化编辑的方式进行CSS网页布局，但依然很多朋友在使用。建立您可以使用DW的代码编辑器进行CSS代码的编写。今天向大家介绍DreamweaverCS3网页制作中的CSS布局规则。CSS文件的链接方式·附加链接：外部CSS文件·导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中CSS规则定义有三种·类比如“.RedText”、“.BlueText”和“.BigText”等等·标签针对原有HTML标签做的重新CSS定义·高级伪类、定义了ID的元素，以及综合性定义CSS规则的应用·只有“类”样式才需要应用，class=”xxxx”。任何元素都可以应用类。·class与id的区别·标签应用一般对于“body”标签一次性使用，对于诸如“li”、“td”等在页面中重复性比较大的标签不推荐定义。·高级多运用，定义“#idli”比定义“li”要好得多。CSS规则的执行顺序·按照CSS代码的执行先后顺序·如果有重复的规则，按照后执行的定义·最终规则是多个定义规则的综合重点：高级规则定义·对于不同表格的文字样式定义。（不同表格使用不同ID、使用类样式定义）·一页中的多种超级链接样式定义·多个相同规则不同对象的CSS共同定义·对于同一对象定义的多种CSS方式考虑哪种更科学（扩展性和代码精简性）（3）网站的速度当访客进入网站时，首先第一感觉就是网站的打开速度，如果首页文件太大或者网站服务器偏慢，打开的速度则非常慢，那么就给客户带来一种非常不好的印象，在这要注意选择高速稳定的服务器，Div+Css的构造，提升网站打开速度。总结：网络营销只能拉来流量，但是最重要的是要怎样提高转化率。这样慢慢堆积网站用户，才能打造具有市场竞争力的网站。第三章网站总体设计3.1网站总体框架图网站用了布局表格绘制了网站的整体结构，导航栏做了动漫的八个分类，分别做了相应独立的页面做了详细的介绍，用了链接将独立的页面与主页链接起来，每个页面里面又各自做了不同的效果。第四章网站详细设计4.1网站操作流程首页（运用导航栏）以下则为导航栏中的动漫目录首页用了布局表格绘制了首页的整体结构，首页简单明了，总结了整个动漫网，详细的分类可以让访客能够更快的找到自己想要的东西。用八个主要页面细分了动漫的类型，日本，国产，欧美动漫分别放置着三个地区的动漫，TV,剧场，OVA则是另一分类，动漫资讯记载着一些动漫的新闻，热点，可以让大家随时了解最新的动漫动态。（2）分区(例如)日本动漫例如：伪恋这是一部日本动漫分类中的日本动漫，点击伪恋或者动漫的图片就可以进入单独页面，单独页面介绍了动漫的名称，作者，集数，类别等，还有完整的剧情介绍。点击进入单独页面，动漫爱好者还可以观看这部动漫。4.2主要功能模块近年来，随着一大批动漫作品的出现，越来越多的人开始接触和喜欢动漫，带动着全球的动漫热潮。动漫的受众人群，也从最初的青少年人群，逐步扩展到社会各个阶层，不仅小孩子、学生和时尚青年热衷于动漫，许多社会中坚阶层也认识到动漫的魅力，融入到爱好动漫的群体。动漫艺术的流行，是人类社会发展的必然。人类传播信息的手段，从最初的简单构图，到象形文字，再到文字和图片，直到今天的动态影像，是一步步从简单到复杂，从单一到多元化发展而来。今天的动态影像，包含了文字、声音、二维图像、三维图像、动态变化，还有最新的互动交互性、触摸感应和虚拟技术等科学技术的应用，使得今天的信息传播拥有无比丰富的信息量和便捷的应用操作性。（１）首页进入噬魂神域动漫网首页，最醒目的就是噬魂神域动漫网欢迎你字样，给人一种亲切的感觉。点击每一个链接都可以进入详细的介绍页面，可以选择你喜欢的内容。首页还有收藏本站，设为首页等按扭，可以让你下次访问的时候更快，不用浪费时间。第一次访问网站的访客,导航栏对于他们来说非常重要，有了导航栏，访客就可以轻易地找着他们想要的动漫。用了链接将独立的页面与主页链接起来，又做了八个导航，几乎每个导航下面都用了表格，分别例举了不同的动漫，也做了相应独立的页面介绍该部动漫。（2）导航条专区

在国产动漫专区，点击动漫的名字就可以链接到该动漫的详情页，还可以直接选择动漫集数直接播放动漫。（3）(例如)动漫资讯专区动漫资讯专区，你不仅可以看到动漫的最新动态。了解你感兴趣的动漫新闻，点击动漫专区链接，进入详情页还有想我了吗，感性的音乐可以享受，既得到视觉的享受又能得到听觉的享受。

例举：1.利用布局表格做了首页，首页有导航，由此进入每一个版块，其中有超链接，热区链接，层的几个性质，时间轴的功能，css样式等。2.进入单独页面，显示不同专区，列出不同产品进入相应的页面，运用了鼠标经过图像，、鼠标移开图像、鼠标点击图像、多处运用显示隐藏层，每个页面中插入不少动态图片，多处有链接，css样式。3.首页中有设为首页，收藏本站，可以让动漫爱好者更方便进入本站，设为首页可以随时关注我们的网站，了解动漫动态。收藏本站就不用怕找不到网站了。4.3主要页面介绍（1）主页用了布局表格绘制了主页的整体结构，先做了总的概况，然后分别做了相应独立的页面做了详细的介绍，用了链接将独立的页面与主页链接起来，又做了八个导航，几乎每个导航下面都用了层做了显示隐藏，分别例举了不同的动漫，也做了相应独立的页面介绍动漫，主页简洁明了。（2）日本动漫（3）动漫资讯4.4部分代码展示(1)<tdwidth="74"align="center"valign="middle"class="STYLE14"><spanclass="STYLE24"><ahref="TV.html">TV版</a></span></td>(2)<ahref="javascript:window.close()">关闭窗口</a>(3)<divid="apDiv1"><imgsrc="om/卑鄙的我.jpg"width="195"height="230"id="Image1"onmouseover="MM_swapImage('Image1','','rb/心灵盟友.png','Image2','','om/斧子警察.png','Image3','','om/RWBY.jpg','Image4','','zg/暴走漫画.png','Image5','','zg/斗龙战士.jpg','Image6','','rb/守护甜心.jpg',1)"onmouseout="MM_swapImgRestore()"/></div>(4)<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"width="672"height="651"id="FLVPlayer"><paramname="movie"value="FLVPlayer_Progressive.swf"/><paramname="salign"value="lt"/><paramname="quality"value="high"/><paramname="scale"value="noscale"/><paramname="FlashVars"value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=东京暗鸦/东京暗鸦&autoPlay=false&autoRewind=false"/><embedsrc="FLVPlayer_Progressive.swf"flashvars="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=东京暗鸦/东京暗鸦&autoPlay=false&autoRewind=false"quality="high"scale="noscale"width="672"height="651"name="FLVPlayer"salign="LT"type="application/x-shockwave-flash"pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"/></object>致谢时光荏苒，岁月如梭，这世界上唯一不变的就是变化。转眼间大一下学期刚开始的两周实训就这样结束了。闭上眼睛，可以瞬间调出大一来南工院的记忆，每一个场景细致可触。睁开眼睛，一个学期结束了，新的学期已经到来，每一刻时光都心有留念。两周的实训过得很快，在此我想对我的学校，我的老师和同学们表达我由衷的谢意。感谢教授过我学业的老师和同学们两周来的关心，鼓励和帮助。老师们课堂上的激情洋溢，课堂下的谆谆教诲；同学们在学习中的认真热情，生活上的热心主动，所有这些都让我充满了感动。虽然两周的实训就是对着电脑，不断的做着一个网站，或许有些枯燥无聊厌烦的时候，但是更多的是充实和愉悦感。这次网站制作我得到了老师和同学的很多帮助。我的网站制作指导老师田小敏老师给予了我很大的帮助。非常感谢与我合作完成网站制作的孙星晨同学。他在我网站设计期间，给我的帮助非常的大，我们一起调查问题，克服困难，完成系统代码，测试系统性能，这一路上对我帮助很大。感谢在整个网站制作期间和我密切合作的同学，和曾经在各个方面给予过我帮助的伙伴们，在此，我再一次真诚地向帮助过我的老师和同学表示感谢！虽然网站做的不是很完美，但毕竟是我迄今为止第一次独立完成的网站，感觉学到了很多东西，蛮不错的，希望能多有一些这样的机会让我们去锻炼自己的操作能力，对帮助我的老师同学表示由衷的感谢！这些将是我人生中的一次重要的经历，将是我今后走上社会后的一笔巨大的财富.这次实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了不少的收获.总体来说，这次是对我的综合素质的培养，锻炼和提高。个人小结实在出乎我的