web课程设计报告视频网站.docx
《web课程设计报告视频网站.docx》由会员分享,可在线阅读,更多相关《web课程设计报告视频网站.docx(6页珍藏版)》请在咨信网上搜索。
Web应用开发基础设计 题目: 电影网站设计与实现_ 系部:_信息技术工程学院___ 专业:_xxxxxxxx___________ 班级:_xxxxxxxx ___________ 学号:_xxxxxxxxxxxx________ 姓名:_xxxxxxx_____________ 目录 一、实验目的 2 二、实验需求 3 三、实验功能 3 四、实验内容 3 1. 设计主页 3 2. 主页页面设计 4 3. 博客页面设计 4 4. 关于我们 4 5. 常见问题 5 五、实验心得体会 5 1.标题 5 2.内容的采集 5 3.图片 5 4.网页排版 5 5.背景 5 6.其它 5 六、实验不足 6 一、实验目的 1. 学会使用HTML和CSS技术实现静态网站的搭建和设计,完成五个网页的建设,网站要呈现出来电影推荐的主题。 2. 掌握网站开发的原理和相关技术,尤其是要具备用HTML编写网页的能力。 3. 掌握HTML基础标签(标题标签、段落标签和换行标签)、列表(有序、无序)。 4. 掌握基本框架的创建并使用框架实现网页的整体布局。 5. 掌握表格的基本创建、表格属性的使用及使用表格实现网页的整体布局。 6. 掌握CSS多种属性及使用方法(字体、文本、背景、边框、边距及填充)。 二、实验需求 电影推荐是本网站打造的一个电影社区,帮助用户找到想要的电影、影人、影院、电视剧。比如通过各大网站的影评,电影的评分帮助你找到你想要的电影。满足用户对于电影的多种不同需求,充分释放你对电影的热爱。 三、实验功能 1. 用HTML设计制作网页。用记事本或dreamweaver作为工具,利用HTML语言制作简单网页。 2. 用框架、表格和表单设计制作网页。 3. CSS样式的使用。CSS的类、选择符和标识符的使用,内嵌式、外接式样式的使用 4. javascript的使用。在HTML网页上使用,用来给HTML网页增加动态功能。 四、实验内容 1. 设计主页 主条目内容包括: 主页:网站打开后看到的第一个页面,主页文件名是index加上扩展名.html。 index.hml页面搭建 <!doctype html>申明文档的类型是html5 <meta charset="utf-8" />网页的编码格式是UTF-8 <meta content="IE=edge,chrome=1">让网站支持IE浏览器。 <title>电影网站:首页</title> 博客: 博客上的文章通常根据张贴时间,以倒序方式由新到旧排列。本博客结合了文字、图像,能够让读者以互动的方式留下意见,是许多博客的重要要素。博客内容以图片介绍为主,本应有一些博客专注在艺术、摄影、视频、音乐、播客等各种主题,但由于初学尚有不足。 <li><a href="index.html">主页</a></li> <li class="active">博客</li> <li><a href="blog.html">博客</a></li> <li class="active"><a href="about.html">关于我们</a></li> <li><a href="contact.html">联系我们</a></li> <li><a href="404.html">常见问题</a></li> <h5>关于我们</h5> <p style="height:260px">本站整理各种经典,热评的电影。本着分享精神。</p> 联系我们:如果你对我们的网站有啥建议和意见,请联系我们。这也是对网站不足的一个回馈。反馈者可以将名字邮件信息等提交发送给我们。 <div class="contact"> <h3>联系我们</h3> <p class="love">欢迎联系我们</p> <div class="contact-form"> <div class="col-md-6 contact-grid"> <form> <p class="your-para">你的名字:</p> <input type="text" onblur="if (this.value == )” > <p class="your-para">你的邮件:</p> <input type="text" onblur="if (this.value ==) ''> <p class="your-para">你的信息:</p> <textarea cols="77" rows="6" onfocus="this.value='';" onblur="if (this.value == ) "></textarea> <div class="send"> <input type="submit" value="提交"> </div> </form> </div> <div class="col-md-6 contact-in"> <p class="sed-para">联系我们</p> <p class="para1">你对我们的网站有啥建议,请联系我们,谢谢。</p> </div > 常见问题:网站开发初期仍然存在一些不足,可以获得管理员帮助。暂且也可以做为即将开发的模块。 2. 主页页面设计 1. )第一板块:滚动部分分为四个大板块,分别介绍最新最热上映的大片。以及大片宣传片效果图。也可以选择滚动到相对应的鼠标指向页面。 2. )第二板块:主要设计为精选的部分电影,以及其上映的时间。运用到的动态效果是左向滚动效果。 3. )第三板块:底部分左右俩快,左边介绍部分电影的详细情况。包括周边电影院,以及相关影院链接和手办,独家新闻,片花等相关信息。右边则是电影热度的一个实时排行情况。 4. )第四板块:反馈模块。提供类似于相关合作方的反馈链接。如果你有什么需要可以通过这些方式转告给我们。 3. 博客页面设计 A.页面左侧为最新电影的相关博客和看过这些电影的人相关评论和留言。 B.在此页面右侧你可以看到最新电影的相关类别。类别目录下包括: 1. )名人访谈 2. )热映电影 3. )电影影评 4. )电影最新新闻 5. )以及你最喜爱的男女演员的详细介绍 4. 关于我们 在这里,也可以通过此方式了解本网站的功能,以及接下来将要更新的一些相关信息。你也可以表达你的意见或者建议。通过邮件的方式或者我们提供给浏览者的联系方式转达给我们还需要亟待改进的地方。这里是一个网站人员与浏览者反馈的平台。在此基础上将来也可以引进相关聊天的软件,以便更好更快的服务于大众。 5. 常见问题 这是一个网站的最后模块。留给可能出现问题网页的快捷解决方式。以便快速解决电影影评网带来的一些困扰。 五、实验心得体会 做好主页,并不是一件容易的事,它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。 1.标题 在个人主页中标题起着很重要的作用,它在很大程度上决定了你整套个人主页的定位。一个好的标题必须有概括性、简短,有特色、容易记,还要符合自己主页的主题和风格,决不要取一个名不符实的"好名字",别人第一次上了当,下次再也不会光顾了。 2.内容的采集 选好标题后,开始采集内容,内容必须与标题相符,在采集内容的过程中,应注重特色,所谓特色应该是有一些自己的东西。个人主页中的特色,应该突出自己的个性,把自己的兴趣、爱好尽情地发挥出来,因为在网络上不受限制。 3.图片 做个人主页不能只用文字,必须在主页上适当地加一些图片,增加可看性,俗话说"一图胜千言",我想不无道理,一张处理得好的图片不需要多做任何解释,就能让人一目了然,让人去思考,去了解它。当然处理得不好的以及无关紧要的图片最好不要放上去,否则让人觉得是累赘,同时也影响网页的传输速度。图片不仅要好看,还要在保证图片质量的情况下尽量缩小图片的大小,在目前网络传输速度不是很快的情况下,图片的大小在很大程度上影响了网页的传输速度。那么如何精简图片的大小呢,一般来说,图片颜色较少的及在256色以内的最好把它处理成gif图像格式,如果是一些色彩比较丰富的图片,最好把它处理成jpg图像格式,因为gif和jpg各有各的压缩优势,应根据具体的图片来选择压缩比。 4.网页排版 网页页面整体的排版设计也是不可忽略的,要让读者在狭小的电脑屏幕上阅读,很重要的一个原则是合理地运用空间,让自己的网页井井有条,留下必要的空白,人觉得很轻松。不要把整个网页都填得密密实实的,没有一点空隙,这样会给人一种压抑感。 5.背景 网页的背景并不一定非要用白色,选用的背景应该和整套页面的色调相协调。合理的应用色彩是非常关键的。 6.其它 如果想自己的网页更有特色一些,可适当地加一些网页制作的技巧,诸如声音、动态网页、java、applet等,当然这些小技巧最好不要加太多,它会影响网页的下载速度。 等个人主页做得差不多了,可别忘了在个人主页上放一个留言板、一个预留板块。前者能及时获得参观者的意见和建议,及时得到网友反馈的信息,最好能做到有问必答,用行动去赢得更多的访问者;后者能让知道主页参观者想法后,可以及时调整设计,适应不同的浏览器和参观者的要求。 通过这次课程设计,使我加深了对web应用结构的理解,对HTML、css等有了更深的了解,比如: 1.html的主体标签<body>…… </body>: 2.换行标签 <br> 3.分段控制标签<p>:<P ALIGN= 参数值>……</p> 4.原样显示文字标签<pre> ……</pre>. 5.插入水平线标签<hr> 6.标题文字标签<hn>:格式:<hn align=参数〉标题内容</hn> 7.无序列表<UL> 8.有序列表<OL> 9.图像插入标签<img> 10.建立超链接的标签为<A>和</A> 11.框架集<frameset>控制 12.嵌入多媒体文件<EMBED SRC="音乐文件地址"> 13.文件输入框,<input type=“file” name=“…”> 掌握了jweb应用设计的流程及各个模块间协同关系,学会了使用css样式对网页元素进行设置,美化个人设计。 六、实验不足 通过这次设计网页,我认为可能还存在一下一些不足: 1. 没有与主题相关的媒体,艺术、摄影、播客等的不足。 2. 首页头部过于单调,吸引力不强。 3. 块目设置过多,导致详情目录下的介绍没有完全填充完整。 4. 由于电影的多样性,导致没有统一的色调搭配,过于杂乱。 5. 没有设计自己主页的标志,显得辨识度不强。 6. 没有导入其他同类搜索引擎进行对比分享。- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 课程设计 报告 视频 网站
咨信网温馨提示:
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,个别因单元格分列造成显示页码不一将协商解决,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【快乐****生活】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【快乐****生活】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,个别因单元格分列造成显示页码不一将协商解决,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【快乐****生活】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【快乐****生活】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。
关于本文