2022年Web前端技术课程实训报告.docx

名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院Web前端技术课程设计报告一、实训课题名称二、课题设计目的通过实训,应使同学巩固所学学问,把所学的理论学问运用到网站制作实践中；培育同学动手才能,将PS制作成效图、 HTML、CSS+DIV网页布局、 JavaScript等 Web前端开发技术结合起来,在实训环节中进行运用；为以后学习动态网站打下基础；三、实现功能：用 PhotoShop、 DreamWeaver 等开发工具制作一个由静态网页构成的简洁网站,要求包括一个首页、至少三个子网页,根据网站开发流程,先做网页成效图,然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能,尔后进行网站测试,并编制出各阶段必要的文档；在编写文档时,必需严格遵照要求,最终提交文档；功能要求：该网站首页必需包括网站 logo 、导航条（带有鼠标大事变化成效）、banner（简洁 flash 动画）、图片、多媒体运用、文字等主要信息展现；子网页包括用户注册（带有表单输入项本地验证功能）、登录（用户名和密码非空验证）、子网页相关栏目；各页面之间通过超链接切换；最终要求提交具体的课程设计报告及网页成效图（收开发的系统；四、课题设计内容：（1）开发背景（2）网站分析设计部分1）客户需求分析 网站栏目划分 栏目内容介绍 网站拓扑图 网页风格创意设计 2）网站风格定位 3）网站建设方案 4）网站成效图（3）网站制作部分1）成效图制作 2）网页素材及网站架构制作 3）首页制作页面设计 4）子页面制作 五、体会及下一步学习方向.psd）和网站运行文件,现场运行验细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 1 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院老师评语网站评分项分值得分成效图5 Logo 5 Banner 5 1.实现 .才能 50 分 导航条 页面布局与美化 注册验证、登录5 5 设计10 实现图片多媒体运用5 部分程序复杂度5 60 分 运行成效5 设计2. 创新才能5 3. 同学答辩5 小计60 1. 结构完整,条理清楚（封面、任务书、教10 师评语、目录、正文内容、小结、参考文献）2. 独立完成5 报告3. 描述工具使用恰当：网站拓扑图5 部分4. 制作步骤描述清楚5 30 分 5. 报告内容充实5 学习态小计30 考勤5 度部分仔细完成,勤于摸索,积极提问5 10 分 小计10 总计100 成果2 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 2 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院参考方案：目录 开发背景 前期预备 客户需求分析 网站风格定位 颜色 排版 特效 网站建设方案 网页风格创意设计 网站栏目划分 栏目内容介绍 网站拓扑图 实训目的 实训任务 实训项目 网站基本介绍 报名界面 储存的文件位置 首页展现成效图 导航条展现成效图 留言板表格布局 网站版权的展现图 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国内黑客网站界面展现图 黑客新闻界面展现图 电影展现图 黑客简介界面展现图 黑客区分界面展现图 黑客分类界面展现图 实训中的问题和解决方法 实训体会 3 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 3 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院 一、开发背景 如今已是信息化时代,许多网络中的强盗已经将魔爪伸向我 们每一个网民；由此可见关于明白黑客以及黑客攻防方面的学问 和新闻是很有必要的；黑客学习网始终致力于面对全球华人供应 最新的黑客新闻、最先进的黑客攻防技术,力求将黑客学习网打 造成网民每天必看的学习网站！二、前期预备本网站是以信息安全类为主体设计,闻的学问；三、 客户需求分析系统的介绍了黑客攻防的新客户需求是指客户创建本网站的目的和对网站建设提出来 的特定的要求；明白客户的需求, 是建好黑客学习网站的前提；黑客学习网站通过互联网可以更好的开展信息技术的沟通、学习和网上报名等活 动；这样可以提高网站的拜访量、 知名度,也是网站业务的重要来源；客户对其拟建的黑客学习网站提出的主要要求有以下几点：1、宣扬信息安全的重要性,提高人们对信息安全的熟识,增加网 站的知名度；2、适时地发布最新黑客新闻和技术,为学习者供应正确资源；3、在网上发布报名表,引进国内外的爱好者来此学习沟通；4 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 4 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院4、网站上要设有爱好者沟通留言板,用户可以网站新闻和技术文章进行评论和留言沟通,对于网站的改进和更新很有帮忙；四、 网站风格定位 网站风格是指网站的整体形象给浏览者的综合感受；这个整体形 象包括站点的 logo、标志、颜色、字体、标语、版面布局、 浏览方式、交互性、文字、内容价值等诸多元素；可以从三个方面对长白山旅行 网进行定位；1、颜色网站的颜色是浏览者整体的视觉感官,假如网站的颜色具有一样性,会使网站看起来美观,使浏览者不简洁对内容混淆,增加了浏览 的简洁与便利；从而更能衬托网站的主题, 如颜色能与主题合理搭配,将会增加网站的易读性；黑客学习网站选定的主题色是黑灰色；由于如是要打开一个黑客方面的网站, 每个人的头脑中确定都是黑色或者灰色,即为较暗淡神 秘的颜色； 能给吸引更多用户并给用户一种神奇感,很适合黑客学习 的网站；网站中除了采纳黑灰色系外,仍和淡蓝色、白色搭配,使网站产 生一种舒服的气氛, 使人可以长时间驻留其间, 眼睛也不会觉得疲惫；2、排版5 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 5 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院网页是网站构成的基本元素；当浏览者轻点鼠标,在网站中漫游时,一幅幅出色的网页会出现在面前；那么,打算网页出色元素是什 么.颜色的搭配、文字的变化、图片的处理等式不行忽视的因素,除 了这些外,仍有一个特别重要的元素网页排版；黑客学习网站采纳的是“ 厂字型” 排版形式；最上面是网站的logo；接下来是网站的menu,中心内容分为两部分：一是左侧meun二是右侧显示 menu 的主要内容；最下面的是网站的一种基本信息、联系方式、版权声明等； 这种版式的优点是网页结构清楚,主次分明,但弱点是法规呆板,信息量少；针对这个弱点,该网站在细节上做了 一些处理；例如：对于黑客新闻以链接到另一个网页的形式,并将所有新闻的超级链接置于此网页,增大的信息量； logo 设置较为个性并动态显示,使整个页面显得更加生动富有特色；3、特效 网站的特效就是让网页看起来生动活泼的各种应用,如 Flash、JavaScript等；五、网站建设方案 在黑客学习网站的建设中, 前期预备至关重要的,要有明确的 黑客新闻以及 做网站的根本目的；该黑客学习网站通过黑客的介绍、黑客攻防技术的宣扬,大大的提高了网站的知名度；由于信息化时代6 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 6 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院的许多漏洞, 大多数人没有全面的意识,且很大一部分人对黑客特别感爱好,因此黑客学习网站的存在想必给很爱好者们大量的信息量和学习资源, 也为同爱好者或是高手供应了沟通平台,从而推动了信息化时代的进一步进展,也为网民供应了更多的学习平台；为了充分发挥黑客学习网站的作用,就需要对网站的内容进行系统规划；六、网页风格创意设计该网站页面颜色采纳黑灰色为主,淡蓝色为辅；在此色调的 基础上对黑灰色进行有机搭配,同时仍要适当的辅以淡蓝色；通 过颜色传达了新奇、神奇、安全、技术等元素,从而使网站产生 了一种学问海洋的氛围；七、网站栏目划分1、网站首页 2、黑客简介 3、等级区分 4、黑客新闻 5、国内黑客网站 6、相关电影资源 7、爱好者报名表 8、黑客沟通版 八、栏目内容介绍1、网站首页：本栏目为导航页面,为吸引用户在 黑客相关视频；main 中放置与2、黑客简介：本栏目中介绍黑客的基本定义,并对黑客名字的来 源作以具体的介绍；4、黑客分类：本栏目中介绍黑客的分类,3、等级区分：本栏目主要是让用户在对黑客有了简洁熟识下区分 黑客的等级,提升在用户心中的荣耀感；4、黑客新闻：该栏目具体放置的为有关黑客的最新新闻以及其中 的技术；5、国内黑客网站： 该栏目的主要目的是让用户明白国内四大出名 的黑客网站：中国黑客联盟,中国红客,中国第八军团,华夏联 盟；6、相关电影资源：该栏目主要是为用户供应有关黑客的电影；7 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 7 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院7、爱好者报名表： 该栏目主要是让爱好者通过报名的方式成为我们中的一员,进行更进一步的学习；8、黑客沟通版： 该栏目主要用来让黑客以及爱好者对黑客技术文 章或者新闻等方面在网上进行评论沟通；九、网站拓扑图网站主页网国黑等爱黑黑黑相中站中内中客华级好客黑客蓝客关首黑简区报交分新电页客介分名流类闻影表版红国国国夏客客客黑红第联客客八盟联军盟团十、实训目的1更好的熟识和把握网站建设的基本流程和技术规范；8 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 8 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院2运用 flash 动画制作软件设计网页中动画的学问；3巩固运用 Fireworks 图像处理软件进行网页中图形制作4综合使用 Dreamweaver、Flash 、Photoshop、Css3Menu四个软件完成网站的建设,可以独立构思并设计出内容完整图文并茂的网站；5具备独立撰写实训报告等科技文件的基本才能；6在网页设计的实践中培育分析问题、解决问题的才能,培养协作、沟通的才能,培育创新才能；十一、实训任务1站点规划,搜集资料；确定网站主题内容,规划站点结构,从网上搜寻相关资料（图片、文字等）；2进行主页设计；构思主页布局,进行主页标题图片的设计（要求原创）,进行主页其余图片的设计和页面内容的录入,最终进行主页的整体优化设计；3网页设计；除主页以外的网页设计,第一设计网页模版,一部分网页由模版生成, 一部分为单独设计 （依据实际需要确定哪些网页由模版生成,确定哪些网页单独设计）；包括版面设计和图形设计、内容录入等；4动画设计；主页动画设计和其余页面动画设计,充分运用9 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 9 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院 所把握技术,成效好；5综合优化；链接正确、得当,动态成效好（时间轴动画、行为、代码的嵌入等）6网站测试并递交；在浏览器中对完成的网站逐页打开测 试,包括链接正确与否, 页面打开时间, 图片和动画是否丢失 等；十二、实训项目 1 、网站基本介绍 网站的主题是 : 游玩天下行, 欢乐共共享；背景图片均为国内外知名 旅行地图片,表达网站主题；图片和文字部分采纳浮动形式,让网站 看起来更生动,更有吸引力；导航栏采纳超链接,链接到相关网站,同时插入表单,设置了登陆界面和主页的链接；仍插入了音乐,轻柔 舒缓,似乎置身于游玩圣地中；10 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 10 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院2、报名界面：11 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 11 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院3、储存的文件位置：12 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 12 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院4、首页展现成效图：5、导航条展现成效图：13 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 13 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院6、留言板表格布局：7、网站版权的展现图：14 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 14 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院8、国内黑客网站界面展现：15 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 15 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院9、黑客新闻界面展现：16 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 16 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院17 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 17 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院10、电影展现图：一主页视频二为相关电影举荐18 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 18 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院19 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 19 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计：河北师范高校汇华学院11、黑客简介界面展现（含滚动图片展现）20 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 20 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院12、黑客区分界面展现：21 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 21 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院13、黑客分类界面展现：22 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 22 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院 十三、 实训中的问题和解决方法 1、动态图片插入后不显示为动态,后来同过将图片格式改为“.swf ”即可显示为动态；2、插入的视频一开头只能显示界面但是不能播放后通过将后缀名改为“.flv” 再通过 Dreamweaver中插入媒体 FLV胜利播放,且易设置视频的格式；3、 一开头不知道如何让图片滚动显示通过查书找到：<marquee behavior="alternate" scrollamount="10"></marquee> 4、通过查书找到如何将子网页显示在主页中 重点）：main 部分（红色部分为<iframe src=" 如 何 成 为 一 名 黑 客 .html" name="iframe" scrolling="auto" width="675px" height="610px" ></iframe> <li class="topmenu"><a href=" 简 介 .html" style="height:77px;line-height:77px;" target="iframe" ><img src="index/css3menu1/blue-user.png" alt=""/> 黑 客 简 介</a></li> 23 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 23 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院 实训体会 信息化时代的我们每天浏览各种网页,网页也是五花八门,让 人赏心悦目, 似乎从来都没有去想这个网页做起来是简洁仍是难或是 谁制作的； 直到第一次学习 web课程的时候,才知道网页做起来不是 易事,做一部分就会在右面观察成效图这给我了极大的爱好和成就 感；我从开头感觉到了这门课是必需得懂得积存,每一个实现都会有 一个固定的代码,记住它是用来做什么是我要去积存的学问；通过这学期期末的课题设计,我才知道要想做一个静态网页是 件很不简洁的事情,开头佩服那些专业做网站的人,想想我们浏览的 网页都是别人不知道花费了多少心思做出来的；由于平常没有好好把 握课下的练习时间,到最终做大作业的时候才会手忙脚乱,查找网站 上查找数据,找各种资料,一切并不像想象的那样简洁,但最终整体成效出来后仍是特殊有成就感；要想做好一个网站,不仅仅是课上的仔细,仍有课下的练习和自己课外学问的拓展；仍记得那次去师大本部的双选会上,其中有聘请网页制作的公司,我和小伙伴上前去问,大致明白到现在是制作网站的主流是 html5,应聘需要提交自己的作品,聘请方仍特殊强调不是我们平常做的作业；这让我立刻感觉到了危机感,我毕业可能就失业了；都说将来的路都是自己走出来的, 从那次开头我慢慢的意识到我从现在开头努力24 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 24 页,共 25 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web前端课程设计 河北师范高校汇华学院仍不晚！这次大作业我认仔细真完成,做到我认为的最好；以后的每一件小事要尽最大努力去做好！做好,将来就是明朗的！脚踏实地,从把最基础最小的事开头细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 25 页,共 25 页 - - - - - - - - -