Web前端技术课程实训报告

1、Web前端技术课程设计报告实训课题名称2、 课题设计目的通过实训，应使学生巩固所学知识，把所学的理论知识运用到网站制作实践中。培养学生动手能力，将PS制作效果图、HTML CSS+DIV网页布局、JavaScript等Web前端开发技术结合起来，在实训环节中进行运用。为以后学习动态网站打下基础。3、 实现功能：用 PhotoShop、 DreamWeaver 等开发工具制作一个由静态网页构成的简单网站，要求包括一个首页、至少三个子网页，按照网站开发流程，先做网页效果图，然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能，尔后进行网站测试，并编制出各阶段必要的文档。在编

2、写文档时，必须严格遵照要求，最后提交文档。功能要求：该网站首页必须包括网站logo 、导航条（带有鼠标事件变化效果）、 banner（简单 flash 动画） 、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目。各页面之间通过超链接切换。最后要求提交详细的课程设计报告及网页效果图（.psd）和网站运行文件，现场运行验收开发的系统。4、 课题设计内容：（ 1）开发背景（ 2）网站分析设计部分1）客户需求分析网站栏目划分栏目内容介绍网站拓扑图网页风格创意设计2）网站风格定位3）网站建设方案4）网站效果图（ 3）网站

3、制作部分1 ）效果图制作2）网页素材及网站架构制作3）首页制作页面设计4）子页面制作五、体会及下一步学习方向教师评语评分项分值得分网站 设计 实现 部分（60 分）1.实现.能力（50 分）效果图5Logo5Banner5导航条5贝囿布局与美化5注册验证、登录10图片多媒体运用5程序复杂度5运行效果52.创新能力53.学生答辩5小计60设计 报告 部分（30 分）1.结构完整，条理清晰（封面、任务书、教 师评语、目录、正文内容、小结、参考文献）102.独立完成53.描述工具使用恰当：网站拓扑图54.制作步骤描述清晰55.报告内容充实5小计30学习态 度部分 （10 分）考勤5认真完成，勤于思考

4、，积极提问5小计10总计100成绩参考方案:目录开发背景 4前期准备 4客户需求分析4网站风格定位 5色彩 5排版 5特效 .6网站建设方案 6网页风格创意设计 7网站栏目划分7栏目内容介绍 8网站拓扑图 9实训目的 10实训任务 10实训项目 11网站基本介绍 11报名界面 10保存的文件位置 11首页展示效果图 12导航条展示效果图 13留言板表格布局 14网站版权的展示图 14国内黑客网站界面展示图 15黑客新闻界面展示图 16电影展示图 18黑客简介界面展示图20黑客区别界面展示图 21黑客分类界面展示图22实训中的问题和解决办法 23实训体会 24一、开发背景如今已是信息化时代，很多

5、网络中的强盗已经将魔爪伸向我们每一个网民。由此可见关于了解黑客以及黑客攻防方面的知识和新闻是很有必要的。黑客学习网一直致力于面向全球华人提供最新的黑客新闻、最先进的黑客攻防技术，力求将黑客学习网打造成网民每天必看的学习网站！2、 前期准备本网站是以信息安全类为主体设计，系统的介绍了黑客攻防的新闻的知识。3、 客户需求分析客户需求是指客户创建本网站的目的和对网站建设提出来的特定的要求。了解客户的需求，是建好黑客学习网站的前提。黑客学习网站通过互联网可以更好的开展信息技术的交流、学习和网上报名等活动。 这样可以提高网站的访问量、知名度， 也是网站业务的重要来源。客户对其拟建的黑客学习网站提出的主要

6、要求有以下几点：1、 、 宣传信息安全的重要性，提高人们对信息安全的认识，增加网站的知名度。2、 适时地发布最新黑客新闻和技术，为学习者提供最佳资源。3、 在网上发布报名表，引进国内外的爱好者来此学习交流。4、 网站上要设有爱好者交流留言板，用户可以网站新闻和技术文章进行评论和留言交流，对于网站的改进和更新很有帮助。4、 网站风格定位网站风格是指网站的整体形象给浏览者的综合感受。这个整体形象包括站点的logo、 标志、 色彩、 字体、 标语、 版面布局、浏览方式、交互性、文字、内容价值等诸多元素。可以从三个方面对长白山旅游网进行定位。1、 色彩网站的色彩是浏览者整体的视觉感官，如果网站的色彩具

7、有一致性，会使网站看起来美观，使浏览者不容易对内容混淆，增加了浏览的简洁与方便。从而更能衬托网站的主题，若色彩能与主题合理搭配，将会增加网站的易读性。黑客学习网站选定的主题色是黑灰色。因为若是要打开一个黑客方面的网站，每个人的头脑中肯定都是黑色或者灰色，即为较暗淡神秘的颜色。能给吸引更多用户并给用户一种神秘感，很适合黑客学习的网站。网站中除了采用黑灰色系外，还和淡蓝色、白色搭配，使网站产生一种舒适的气氛，使人可以长时间驻留其间，眼睛也不会觉得疲劳。2、 排版网页是网站构成的基本元素。当浏览者轻点鼠标，在网站中漫游时，一幅幅精彩的网页会呈现在面前。那么，决定网页精彩元素是什么 ?色彩的搭配、文字

8、的变化、图片的处理等式不可忽略的因素，除了这些外，还有一个非常重要的元素网页排版。黑客学习网站采用的是“厂字型”排版形式。最上面是网站的logo。接下来是网站的 menu,中心内容分为两部分：一是左侧meun二是右侧显示menu 的主要内容。最下面的是网站的一种基本信息、联系方式、版权声明等。这种版式的优点是网页结构清晰，主次分明，但弱点是规矩呆板，信息量少。针对这个弱点，该网站在细节上做了一些处理。例如：对于黑客新闻以链接到另一个网页的形式，并将所有新闻的超级链接置于此网页，增大的信息量。logo 设置较为个性并动态显示，使整个页面显得更加生动富有特色。3、特效网站的特效就是让网页看起来生动

9、活泼的各种应用，如Flash、JavaScript 等。五、网站建设方案在黑客学习网站的建设中，前期准备至关重要的，要有明确的做网站的根本目的。该黑客学习网站通过黑客的介绍、黑客新闻以及黑客攻防技术的宣传，大大的提高了网站的知名度。由于信息化时代的很多漏洞，大多数人没有全面的意识，且很大一部分人对黑客十分感兴趣， 因此黑客学习网站的存在想必给很爱好者们大量的信息量和学习资源，也为同爱好者或是高手提供了交流平台，从而推动了信息化时代的进一步发展，也为网民提供了更多的学习平台。为了充分发挥黑客学习网站的作用，就需要对网站的内容进行系统规划。六、网页风格创意设计该网站页面颜色采用黑灰色为主，淡蓝色为

10、辅。在此色调的基础上对黑灰色进行有机搭配，同时还要适当的辅以淡蓝色。通过颜色传达了新颖、神秘、安全、技术等元素，从而使网站产生了一种知识海洋的氛围。七、网站栏目划分1、 网站首页2、 黑客简介3、 等级区分4、 黑客新闻5、 国内黑客网站6、 相关电影资源7、 爱好者报名表8、 黑客交流版八、栏目内容介绍1 、网站首页：本栏目为导航页面，为吸引用户在main 中放置与黑客相关视频。2、黑客简介：本栏目中介绍黑客的基本定义，并对黑客名字的来源作以详细的介绍。4、黑客分类：本栏目中介绍黑客的分类，3、等级区分：本栏目主要是让用户在对黑客有了简单认识下区分黑客的等级，提升在用户心中的荣耀感。4、黑客

11、新闻：该栏目具体放置的为有关黑客的最新新闻以及其中的技术。5、国内黑客网站：该栏目的主要目的是让用户了解国内四大有名的黑客网站：中国黑客联盟，中国红客，中国第八军团，华夏联盟。6、相关电影资源：该栏目主要是为用户提供有关黑客的电影。7、爱好者报名表：该栏目主要是让爱好者通过报名的方式成为我 们中的一员，进行更进一步的学习。8、黑客交流版：该栏目主要用来让黑客以及爱好者对黑客技术文 章或者新闻等方面在网上进行评论交流。九、网站拓扑图十、实训目的更好的熟悉和掌握网站建设的基本流程和技术规范;2 运用 flash 动画制作软件设计网页中动画的知识；3 巩固运用Fireworks 图像处理软件进行网页

12、中图形制作4 综合使用 Dreamweaver Flash、Photoshop、Css3Menu四个软件完成网站的建设，可以独立构思并设计出内容完整图文并茂的网站。5 具备独立撰写实训报告等科技文件的基本能力；6 在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力。实训任务1 站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。2 进行主页设计。构思主页布局，进行主页标题图片的设计（要求原创），进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。3 网页设计。除主页以外的网页设计，首先设计网页模版，一部分网页由

13、模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计）。包括版面设计和图形设计、内容录入等。4 动画设计。主页动画设计和其余页面动画设计，充分运用所掌握技术，效果好。5 综合优化。链接正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等）6 网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。十二、实训项目1 、 网站基本介绍网站的主题是: 游览天下行，快乐共分享。背景图片均为国内外知名旅游地图片，体现网站主题。图片和文字部分采用浮动形式，让网站看起来更生动，更有吸引力；导航栏采用超链接，链接到相关网站，同

14、时插入表单，设置了登陆界面和主页的链接。还插入了音乐，轻柔舒缓，仿佛置身于游览圣地中。2、报名界面:JOIN US!姓电职"省身清囹辛易伊'时间里客协会员非会员报名费标注人民币）即15年匕月31日之前注俯1500180。元提交手机国寿城市2016年1月1日了后注册1£加元2000 元3、保存的文件位置:4、首页展示效果图:客们的恣意江湖闾*客而介国等级区分叵）M站上或国内里客网站Yot&tm5、导航条展示效果图:畚阿站I以闾受客简介*直tf慢名表黑客交施板6、留言板表格布局:7、网站版权的展示图：黑雪国的砧送及申心附坦济育c&pmffhr C-2O1

15、5 201 瓦all嘈*匕 reimd8、国内黑客网站界面展示:中国四大黑客网站ITT*. 1附聿内叫药.IF席也.中国红音M虚心亦iVt目 赤-介 HA llWMr Union Fdt CKrawww.ChinaH,进入可曲.01国第n至国CaHacfcNei -flR华夏联盟h£95X0m台上的生土司招旦枇雄田h &圈吸3ILAW格 ,'- eaA tuefen «!»9、黑客新闻界面展示:.革枭邛诩圆病毒全部君里至耳菖1- 虻平持出4家寺层三业P；阳9 H.池仁三B军受里吝一£4- 克里鹤根目虺贵集国W宫口。0勺寸穿昕土浊- 嘏抬麦

16、布上叁/丁，hind口皿熨总小三后,由林显柱黑客注期- -国荒上度走逼恒害？殳重金邑竞冠址三百再显,舒讶安卓熟拄二越里军改击泊止轨等声囹苹果iOS升级遭病毒感染业内：相对成熟安全框架受黑客关注抿卬国之出福而林忘叫肉田.相抿方令状H竹吉平台乌云抨告号示,目前芋平吃用商店中F.百大录二用喀3. 7一户名酬XsdfGhosT后*. i 射超il76款，涉及用户多达I个亿。包招12306、清清出行.白博他国.同花I同军二十蓼核国内应用，科受见这种B口用户18息.舒心垂角的底器影响。这些处门软件包含大骨的个360公司2s安仝京坡室负贡人高占崎；我们昨天咬上电，大狗15万样本，发现牝大徵育1J个应用程弁茨

17、病毒?4家。所以我们就理议比重尔正, 木，和果是，射除性就可以，。经过我HI按水分断，它还有可前在取3PP期美的毒电，还可笠企图ICloud修户的伯息所以和果点手机上有4在三果手口上空/允件.=石：且适革果官方的力忤下H平台叩psux/Fb安装.而软件在妾足选人岬«»!芸婴经过产格的面核加粒啦.磁泉含雪崎；这次的+住聚从源头上注入病叁和木马刽体的手机应用样芹里面.因为fttfli通开左程户的时候是有绘注茬的，牛成移4客户先侑0 站点金JE缰母遇火”/在各种五立$者迅H上发布，呼后通过68谖卜线，卜线的其友St罡睢恐染病毒的，JI发者开发自己程序的话，在开发程月£

18、的IS, APP3IOKL是桧制不出木的3伴发主后，用户关心访工自己的个人信息H盍世E，而是序开左吉仁则更关上自已通卫非有方送住不髭的*士否已灌0用田争。计可下龙： 布理匚有，唯一的储/方三，就是广宏者A主型宜闪口接用冽£潺的鼠认下箕方式.才靛且兔下我及隹MINc心叶女工区苹果App被置病毒全部名单多达76个将病而，F款苹果受斑晌叩p名单公布，包含清满打千，网易云音乐，】2"暗多歆苹果叩p。月】NH.安仝河越反IS平台乌云口 草梁APP应用通店内多个应用软件登植入信近,在AppStme上架多个应用械片人落三方苍意生）,会将月户信史澄送叁庐古作省昨则分析1R胃订，有叁程序员使

19、用了第三万XcoddG没簿，过暨墉帑晶唱耳的APP存在安全忖立,当它们上学到AppS，。”之后,被尾 大野的安私向用.有更多的相PR,它fliPbonBiPad上弹出钓台网站页商，可能嗡取iCloud账号蓄码，或者其的关键信息卜月内），告通用尸在这些受曼喧的应用中推入过啦感信息，抄cloud泌科.信用卡信息竽，这丝信息理培上也可能横范更。心的文苣,至少76钦羊院应用该房考人长，受与物用户超过一亿，安装这些应用仁田bMciPad用尸可能世定星本的石总“自寄伯E杳到的已知/XcodeJ10、电影展示图：一主页视频二为相关电影推荐我是谁没有据绝对的安全ioioioomoioioErstens: Ke

20、in System ist sicher是安全我要做黑客！教练带你飞I',*I；"客ill iw序教程:11、黑客简介界面展示（含滚动图片展示）黑客是l个中文词语,音源巨英文35”.随着灰鸽子的出现，灰镐子成为了很多假借黑客 名义控制他人电恼的黑客技术，于是出现了“骁哥与”黑客分家。加上年电影频道节目中心出 品的电熹联客（Hadcer）也已经开始使用骇客一词,显示出中文使用可惯的趋同实际上， 黑客（或骇客）与英文原文Hacker、Cmcker等含义不第够达到完全对正，这是中英文语言询汇 各自发展中形成的差异中司，最初曾指热心于计算机技术、水平高超的电脑专家，尤 其是程序设计人

21、员，逐渐区分为匕帽、灰帽黑帽等j其中黑帽（bhckhat）实际就是 cracker»在媒体报道中，黑客一询常指那些软件喊客（software cracker）而与黑客（黑帽子）相对的则是日幅子，黑客（大陆和香港：黑客？台湾：骁客，英文：Hacker）,通常是指对计算机科学、编程 和设计方面具高度理解的人.“鬻客”也可以指： 在信息安全里，“黑客”指研究智取计算机安全系统的人髭*利用公共通讯解路，如互联 网和电话系统，在未经许可的情况不，载入对方系统的被称为黑帽黑客（英文：black hat,另祢cra&eB ;调试和分析计篁机安全系统的白帽黑客white hat）。“矍 客”

22、一词最早用来称呼研究盗用电话系统的人士。 在业余计算机方面，Y黑客"指研究修改计算机产品的业余爱好者 1"0年代，很多的这 当群落聚焦在便件研究，旧册和19第年代，很多的群落聚焦在软件更改（如编写游戏模 组、攻克软件版权限制， “黑客是“一种，热衷于研究系统和计算机（特别是网络）内郭运作的人”.12、黑客区别界面展示:黑客区别黑客，最早源自英文hackeo早期在美国的电脑界是带有褒义的,他们都是水平高超的电噩红杏,维护国家利益代表中国人氏意志的红吝，他缶热爱自己的祖国，民族，和平,极力 蓝客，信仰自由，提倡爱国主义的黑客们，用自己的力量来维护网络的和平。蒙客，是七iack”

23、的音怪，就是“破解者”的意思、。从事恶意破解商业软件、恶意入侵别） 上都是相同的j闯入计算机系统,软件者。黑客和“暇客“（Cw&er）并没有一个十分明显E 含义已经显得不那么重要7 *< >13、黑客分类界面展示:f 胎并没有。不过当时黑者也区分等镒，就如同1。也用庇疑比高卜一件。真正一滴黑客 并非整天不学无术，而是会热衷追求某种特殊嗜好，比如研究电话，铁道（模型贰者真 的）.科幻小睨，无线电，或者是叶算机"也因此后来才宥M谓的empu侥r badier出现.意 指计算机高手。对一个黑客来说，学会编程是明须的，计算机可以说就是为了编程而设计的，运行程序 是计算机的

24、唯一功舞对了，数学也是不可少的，运行程序苴实就是运算，离散数学、线性 代教.带积分等！黑客一词在圈外或媒体上通常被定义为：专门入侵他人系统进行不法行为的计算机高 手”不过这类人，在皿3”眼中是属于号次较低的口之。（骆客）.如果黑容是炸弹制造专 家，那么眩客就是恐怖分子。随着时代的发展，网络上出顶了越来越多的整套，他们只会入侵，使用扫描器到处乱 扫，用IP炸鹿炸人家，毫无目的地人银，破坏看，他们并无益干电痼技术的发展，反而有害 于网络的安全和造礴网笈麻瘦，给人饰来巨大的经济和精神幔失.以下列举不同类型成等级的黑客， 黑各术语），对技术的修深入的计簟机安全专家 黑客（计算机安全）或侨干，访问计翼机

25、系统安全系统失灵. 黑客（爱好者），以创箱的定制或组合的零售电子和电脑设备: 黑客程序员亚文化），一个反独裁的软件开发方送，伴随着自由软件运动。十三、 实训中的问题和解决办法1、 动态图片插入后不显示为动态，后来同过将图片格式改为“.swf ”即可显示为动态。2、 插入的视频一开始只能显示界面但是不能播放后通过将后缀名改为“ .flv ”再通过Dreamweaver中插入媒体FLV成功播放，且易设 置视频的格式。3、 一开始不知道如何让图片滚动显示通过查书找到：<marqueebehavior="alternate" scrollamount="10"></marquee>4、 通过查书找到如何将子网页显示在主页中main 部分（红色部分为重点） ：<iframe src=" 如 何 成 为 一 名 黑 客 .html" name="iframe" scrolling="auto" width="675px" height="610px" ></i