Web前端技术课程实训报告

«Web前端技术课程设计?报告实训课题名称二、 课题设计目的通过实训,应使学生稳固所学知识,把所学的理论知识运用到网站制作实践中.培养学生动手水平,将 PS制作效果图、HTMLCSS+DIV网页布局、JavaScript等Web前端开发技术结合起来,在实训环节中进行运用.为以后学习动态网站打下根底.三、 实现功能：用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站,要求包括一个首页、至少三个子网页,根据网站开发流程,先做网页效果图,然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能,此后进行网站测试,并编制出各阶段必要的文档.在编写文档时,必须严格遵照要求,最后提交文档.功能要求：该网站首页必须包括网站 logo、导航条〔带有鼠标事件变化效果〕、banner〔简单flash动画〕、图片、多媒体运用、文字等主要信息展示；子网页包括用户注册〔带有表单输入项本地验证功能〕、登录〔用户名和密码非空验证〕、子网页相关栏目.各页面之间通过超链接切换.最后要求提交详细的课程设计报告及网页效果图〔 .psd〕和网站运行文件,现场运行验收开发的系统.四、 课题设计内容：〔1〕 开发背景〔2〕 网站分析设计局部1〕 客户需求分析网站栏目划分栏目内容介绍网站拓扑图网页风格创意设计2〕 网站风格定位3〕 网站建设方案4〕 网站效果图〔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认真完成,勤于思考,积极提问5小计10总计100成绩参考方案:目录TOC\o"1-5"\h\z开发背景 4前期准备 4客户需求分析 4网站风格定位 5色彩 5排版 5特效 ....6网站建设方案 6网页风格创意设计 7网站栏目划分 7栏目内容介绍 8网站拓扑图 9实训目的 10实训任务 10实训工程 11网站根本介绍 11报名界面 10保存的文件位置 11\o"CurrentDocument"首页展示效果图 12\o"CurrentDocument"导航条展示效果图 13留言板表格布局 14\o"CurrentDocument"网站版权的展示图 14国内黑客网站界面展示图 15\o"CurrentDocument"黑客新闻界面展示图 16电影展示图 18黑客简介界面展示图 20黑客区别界面展示图 21黑客分类界面展示图 22实训中的问题和解决方法 23实训体会 24一、 开发背景如今已是信息化时代,很多网络中的强盗已经将魔爪伸向我们每一个网民.由此可见关于了解黑客以及黑客攻防方面的知识和新闻是很有必要的.黑客学习网一直致力于面向全球华人提供最新的黑客新闻、最先进的黑客攻防技术,力求将黑客学习网打造成网民每天必看的学习网站！二、 前期准备本网站是以信息平安类为主体设计,系统的介绍了黑客攻防的新闻的知识.三、客户需求分析客户需求是指客户创立本网站的目的和对网站建设提出来的特定的要求.了解客户的需求,是建好黑客学习网站的前提.黑客学习网站通过互联网可以更好的开展信息技术的交流、学习和网上报名等活动.这样可以提升网站的访问量、知名度,也是网站业务的重要来源.客户对其拟建的黑客学习网站提出的主要要求有以下几点：1、宣传信息平安的重要性,提升人们对信息平安的熟悉,增加网站的知名度.2、 适时地发布最新黑客新闻和技术,为学习者提供最正确资源.3、 在网上发布报名表,弓I进国内外的爰好者来此学习交流.4、网站上要设有爱好者交流留言板,用户可以网站新闻和技术文章进行评论和留言交流,对于网站的改良和更新很有帮助.四、网站风格定位网站风格是指网站的整体形象给浏览者的综合感受.这个整体形象包括站点的logo、标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字、内容价值等诸多元素.可以从三个方面对长白山旅游网进行定位.1、色彩网站的色彩是浏览者整体的视觉感官,如果网站的色彩具有一致性,会使网站看起来美观,使浏览者不容易对内容混淆,增加了浏览的简洁与方便.从而更能衬托网站的主题,假设色彩能与主题合理搭配,将会增加网站的易读性.黑客学习网站选定的主题色是黑灰色.由于假设是要翻开一个黑客方面的网站,每个人的头脑中肯定都是黑色或者灰色, 即为较暗淡神秘的颜色.能给吸引更多用户并给用户一种神秘感,很适合黑客学习的网站.网站中除了采用黑灰色系外,还和淡蓝色、白色搭配,使网站产生一种舒适的气氛,使人可以长时间驻留其间,眼睛也不会觉得疲劳2、排版网页是网站构成的根本元素.当浏览者轻点鼠标,在网站中漫游时,一幅幅精彩的网页会呈现在面前.那么,决定网页精彩元素是什么？色彩的搭配、文字的变化、图片的处理等式不可忽略的因素,除了这些外,还有一个非常重要的元素一一网页排版.黑客学习网站采用的是“厂字型〞排版形式.最上面是网站的logo.接下来是网站的menu,中央内容分为两局部：一是左侧meun二是右侧显示menu的主要内容.最下面的是网站的一种根本信息、联系方式、版权声明等.这种版式的优点是网页结构清楚,主次清楚,但弱点是规矩呆板,信息量少.针对这个弱点,该网站在细节上做了一些处理.例如：对于黑客新闻以链接到另一个网页的形式,并将所有新闻的超级链接置于此网页,增大的信息量.logo设置较为个性并动态显示,使整个页面显得更加生动富有特色.3、特效网站的特效就是让网页看起来生动活泼的各种应用,如 Flash、JavaScript等.五、网站建设方案在黑客学习网站的建设中,前期准备至关重要的,要有明确的做网站的根本目的.该黑客学习网站通过黑客的介绍、 黑客新闻以及黑客攻防技术的宣传,大大的提升了网站的知名度.由于信息化时代的很多漏洞,大多数人没有全面的意识,且很大一局部人对黑客十分感兴趣,因此黑客学习网站的存在想必给很爱好者们大量的信息量和学习资源,也为同爱好者或是高手提供了交流平台,从而推动了信息化时代的进一步开展,也为网民提供了更多的学习平台.为了充分发挥黑客学习网站的作用,就需要对网站的内容进行系统规划.六、 网页风格创意设计该网站页面颜色采用黑灰色为主,淡蓝色为辅.在此色调的根底上对黑灰色进行有机搭配,同时还要适当的辅以淡蓝色.通过颜色传达了新奇、神秘、平安、技术等元素,从而使网站产生了一种知识海洋的气氛.七、 网站栏目划分1、网站首页2、黑客简介3、等级区分4、黑客新闻5、国内黑客网站6、相关电影资源7、爰好者报名表8、黑客交流版八、 栏目内容介绍1、 网站首页：本栏目为导航页面,为吸引用户在main中放置与黑客相关视频.2、 黑客简介：本栏目中介绍黑客的根本定义,并对黑客名字的来源作以详细的介绍.4、黑客分类：本栏目中介绍黑客的分类,3、 等级区分：本栏目主要是让用户在对黑客有了简单熟悉下区分黑客的等级,提升在用户心中的荣耀感.4、 黑客新闻：该栏目具体放置的为有关黑客的最新新闻以及其中的技术.5、 国内黑客网站：该栏目的主要目的是让用户了解国内四大有名的黑客网站：中国黑客联盟,中国红客,中国第八军团,华夏联盟.6、 相关电影资源：该栏目主要是为用户提供有关黑客的电影.

7、 爰好者报名表：该栏目主要是让爰好者通过报名的方式成为我们中的一员,进行更进一步的学习.8、 黑客交流版：该栏目主要用来让黑客以及爱好者对黑客技术文章或者新闻等方面在网上进行评论交流.九、网站拓扑图里八、、客交流里八、、客交流版1.更好的熟悉和1.更好的熟悉和掌握网站建设的根本流程和技术标准;运用flash动画制作软件设计网页中动画的知识；稳固运用Fireworks图像处理软件进行网页中图形制作综合使用DreamweaverFlash、Photoshop、Css3Menu四个软件完成网站的建设,可以独立构思并设计出内容完整图文并茂的网站.具备独立撰写实训报告等科技文件的根本水平；在网页设计的实践中培养分析问题、解决问题的水平,培养协作、交流的水平,培养创新水平.-、 实训任务站点规划,搜集资料.确定网站主题内容,规划站点结构,从网上搜索相关资料〔图片、文字等〕.进行主页设计.构思主页布局,进行主页标题图片的设计〔要求原创〕,进行主页其余图片的设计和页面内容的录入,最后进行主页的整体优化设计.网页设计.除主页以外的网页设计,首先设计网页模版,一局部网页由模版生成,一局部为单独设计〔依据实际需要确定哪些网页由模版生成,确定哪些网页单独设计〕.包括版面设计和图形设计、内容录入等.动画设计.主页动画设计和其余页面动画设计,充分运用所掌握技术,效果好.综合优化.链接正确、得当,动态效果好〔时间轴动画、行为、代码的嵌入等〕网站测试并递交.在浏览器中对完成的网站逐页翻开测试,包括链接正确与否,页面翻开时间,图片和动画是否丧失等.十二、实训工程1、网站根本介绍网站的主题是：游览天下行,快乐共分享.背景图片均为国内外知名旅游地图片,表达网站主题.图片和文字局部采用浮动形式,让网站看起来更生动,更有吸引力；导航栏采用超链接,链接到相关网站,同时插入表单,设置了登陆界面和主页的链接.还插入了音乐,轻柔舒缓,仿佛置身于游览圣地中.2、报名界面:JOINUS!姓电职业身俯佩同里喜协会员非会员报名费标席〔人民币〕2021年12月31日之前注册1河五】800元提交国家城市2021年1月1曰£后注册

地..元

2000713、保存的文件位置:4、首页展示效果图:画4、首页展示效果图:画啊站上我黑客们的恣意江湖常蛔膀的不一定基夭住,也可能是“…⑥害客荷弁 1可等徵区分 I回爱好接名去 回案客交滩板我要做黑客!教练带你飞-国内黑客网站做珈U听详油独埋皴正：乎庄鸟有通导〔w〔rt睇n柚犯噩健理还至出花黑各fit桂略皆也象厢电瘫囊恳好愚‘购航烟普Wtfee刿上5、导航条展示效果图:1国笠客简介 碰〕等缱5分回壹打根谷发回第客交渔板

6、留言板表格布局:7、网站版权的展示图：需春圆肉站近壁申心质概评有

c&pmffhrC-2O15】0皿』1明1帕reim^d8、国内黑客网站界面展示:中国四大黑客网站詈,ITT*.1脚I株,可普.IF命命.E国红言

M地iVf田沛-TTHAllW^MrUnionFdtCKraChinaHacksrED国第门军团CaHacfcNei—

flR华夏联盟

h£95X0m场追建说心全身濒田从朝部E3ILA用,略…、 -eaAtuefen■«!»9、黑客新闻界面展示:票音肯司：.苹果A|碰站毒全郃辑聿坪比-呈早试0叶蛎4病专瘁半业用别成触鼻三匚牢受芝吾哭.且-克里福供自桂芝弟国皂者DDOW述娘断#壮-曲职型币竖身冲丁：Wmd口g麦口产旦舸厄由流就往慝者择电5囚二上牌妾涯・因黑吾*程星ITL方扬圮二拜重而.日胃外安亘侦执栅可［海果竺攻击嵯忙苗鼻二白苹果iOS升级遭病再感染业内：相对成熟平安框架受黑客关注抿中国亍由?锁:司祝庄峰＞作由.拇根安金不H柠告平台乌云押告导示.目司茎甲3用商店中已有大位3用必Q.了一户名叫*.机*10砒.房i射超il76款,涉及用户多达I个亿.包话12306、有清出行、商世陋屈.同花用与二十务技国内应用,部受冒嬉稗疝取用户偿息.膏般密舟们底器费响.谊些"门状忤包咨大星的个3心司IOS平安京垃室员女人高W；我们昨天麻上电了大却5万杵本,发现此大概有】44个应用程片明R毒更染.所以*0咬议比方你正*木,如！H是,JH除挂族可以〔.经£1我HI技本分斩,它狂白可象豪般跖pp利美的女码,H可琵慌8Cloud*户的贷5d・Hi以IUJI鼻上右4在三累¥11上安Z5•淮.X5S1C革氏百方的雅休下tt平台叩网〔?下敏安装.而状1在角萱谩入坤p,#＜•»!.二醪经与产指豹面楼和松临.?•狼A^e：读次的itt-ff从港头上注入痛卷和木马刨体的乎皿用梓序里面,由于我们炯道开左程序的时你是有箜译盘的,当该传响容户等的“I¥点会把增谨菱2＜心在谷枪mta者迅k上发布,通刘心卜仪,I、我的其艾曜戒感柔有毒的,升发切I发自己程序的话,在片发sc的匹,.^ppsioKLseaPFaiA的.弟伴发主后,用户关心筋定自己q个人信息1^.0.而遂序开友者伯那么更美庄自己谯己非白方话径下仁的知/乞杏己笔砖布冬S针司下敏：在逢3*,蓬一务方.三秋是只发着独王果巨向宜榛用浏£漆?娘认下箕方式・才第翌免「就多.花WNzxk.•+矣工虬苹果App被置病毒全部名单多达76个长病希,r款苹果受影％pp名中公布,包盆商商打n网易云音乐,】颂6等多款苹果叩p..月“日.安仝Rasts平台马云,苯果APP应匣商唐内务个应用物件祝埴入佶在AppSwe上架多个应用被洼入嚣三方忘寇弋码,会洛月户信Z送到倩古作假设服•那么分析粮竹切,有M程序员使用了第三万Xcodg谨器.这些埠订餐旨耳的APPTJI???全问勤.当Eini^fjAppStoreZ后.祯岸太冬的关私向恿.有申多的极限,它f］在iPboneiPad上弹出钓角网站英面,可能禁职Cloud麟号密照,或者其他关键信息•卜月内,泛谑用户在这些受霓响的应用中泡入过敏感信息,疝cS茁码.信用卡信息等,这些信息理培上也可能被旭心的文M至少76钦芋果庄用族房寺入侵,受考晌用户摇过一亿,安装这些痘用EpWclPM用尸可能也呈本的E息“目前排杳到的已如舀XcodeJ10、电影展示图：一主页视频二为相关电影推荐我是谁■没有据绝对的平安3101010W0010101010Ersters:KeinSystemistsicher.一：没一个系统是平安我要做黑客！教练带你飞~,I',*'111im客敢程IMg.L‘flr•>・.■-sea111、黑客简介界面展示〔含滚动图片展示〕焦客是一个中文词语,皆源巨英文hacker,随看灰翁子的出现,灰鸽子成为了彳艮多假借黑客名义限制他人电胞的黑客技术,于是出现了“骇春〞与〞黑客••分家o2021年电影频道节目中央出品的电影?骇客〔Hacker〕＞也已经开始使用骇客一词,显示出中文使用习媛的趋同,实际上,黑客〔或骇客〕与英文原文Hacker、Cracker等含义不能够到达完全对译,这是中英文语言词汇各白开展中形成的差异,■词,最初曾指热心于计算机技术、水平高起的龟精专家,尤其是程序设计人员,逐淅区分为任帽、灰帽、摆帽等,其中黑帽〔bhckhat〕实际就是cracker,在媒体报道中,黑客一恒常指那些软件骇客〔sofhvaiecracks〕,而与黑客〔熙帽子〕相对的那么是曰帽子.黑客〔大陆和香漫：黑客：台湾：骑客,英文:Hacker〕,通常是指对计真机料学、编程和设计方面具蒿度理解的人.“黑客〞也可以指：,在信息平安里,“焦吝〞指研究智取计算机平安系统的人员•利用公共退讯网％如互联网和系统,在未经许可的情况卞,载A.对方系统的被称为黑帽黑客〔英文；blackhat,另踪如〔云〕;调试和分析计亶机安金系统的白帽黑客〔英语：whitehat〕.“要客"一词最早用来琲呼研究盗用系统的人士°-在业余计算机方面,"黑客〞指硕究修改计算机产品的业余爱好者,1970年代,很多的这些群落聚焦在幌件研究,1980和13知年代,很多的群落聚焦在软件史改〔如编与游戏模组、攻克软件版权限制〕,,“黑客〞是“一种热柬于研究系统和计算机〔特别是网络〕内部运作的人七112、黑客区别界面展示:黑客区别黑客,最早源自英文hacker,早期在美国的电幽界是带有褒义的中他们都是水平高超的电腿・红吝,垂护国家利益代表中国人氏意志的红音,他1】热爱白己的祖国,民族,和平』极3•蓝客,信仰自由,提倡爱国主义的黑客们,用自己的方童来雄护朗络的和平,•骇客,是Cracker"的音译,就是卜破解者〞的意思<>从.事恶育破解商业软件、恶意入侵别)上都是相同的j闯入计算机系统/■软件者■黑客和』膨客*(Cm&er)并没有一个十清楚显E含义已经显得不那么重要7*<>113、黑客分类界面展示:f启并没有.不过当时愚者地区分等级,就如同tg用成绩比高卜一律.身正一流黑容并非整天不学无术,而是会热衷追求某种特殊嗜好,比方研究,铁谨〔模型成者真的〕•科幻小堤,无线嗜,或者是计算机.也因此后来才有所谓的tmupmrb耽觑世虬意指计算机高手°刈一个黑客来说,学会编程是心须的,计算机可以说就是为了编程而设计的,运行程序是计算机的唯一功能.对了,数学也是不可少的,云行程序其实就是运算,离散教学、线性代教,微积分等！黑吝一词在圈外或媒体上通常被定义为:专门入侵他人系统进行不法行为的汁算机高手.不过这类人_1_在hackerBR中是属于层次较低的cracker〔驰吝〕.如果黑客是作塑;M造专家,那么骇客就是恐怖分子.随着时世的开展,网络上出现了越来拖多的骇舂,他们只会入侵,使用扫描器到处舌L扫,用IP炸弹作人家,至无目的地入侵,破坏看,他们并无益干电脸技术的开展,反而有害于网络的安仝和造成网抽瘫痪,拾人们带来巨大的经济和精神族失,以以下举不同类型或等级的黑客,,黑客〔术语〕,对技术研修深入的计算机平安专家,・黑客〔计算机平安〕或饼干,访问计算机系统平安系统失灵.-黑容〔爰好者〕,以创新的定制或组合筋零售电子和电脑设备■:,黑客〔程序员亚文化〕,一个反专制的软件开发方送,伴随着目由软件运动*十三、实训中的问题和解决方法1、 动态图片插入后不显示为动态,后来同过将图片格式改为“.swf即可显示为动态.2、 插入的视频一开始只能显示界面但是不能播放后通过将后缀名改为".flv〞再通过Dreamweaver中插入媒体FLV成功播放,且易设置视频的格式.3、一开始不知道如何让图片滚动显示通过查书找到： <marqueebehavior="alternate"scrollamount="10"></marquee>4、通过查书找到如何将子网页显示在主页中 main局部