web课程设计报告-视频网站

Web应用开发基础设计

题目：电影网站设计与实现_ 系部：_信息技术工程学院___ 专业：_xxxxxxxx___________ 班级：_xxxxxxxx___________ 学号：_xxxxxxxxxxxx________ 姓名：_xxxxxxx_____________

一、实验目的 ................................................................................................................................... 3

二、实验需求 ................................................................................................................................... 3

三、实验功能 ................................................................................................................................... 3

四、实验内容 ................................................................................................................................... 3

1. 设计主页 ........................................................................................................................... 3

2. 主页页面设计 ................................................................................................................... 4

3. 博客页面设计 ................................................................................................................... 4

4. 关于我们 ........................................................................................................................... 5

5. 常见问题 ........................................................................................................................... 5

五、实验心得体会 ........................................................................................................................... 5

1.标题 ................................................................................................................................ 5

2.内容的采集 .................................................................................................................... 5

3.图片 ................................................................................................................................ 5

4.网页排版 ........................................................................................................................ 5

5.背景 ................................................................................................................................ 6

6.其它 ................................................................................................................................ 6

六、实验不足 ................................................................................................................................... 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

博客: 博客上的文章通常根据张贴时间，以倒序方式由新到旧排列。本博客结合了文字、

图像，能够让读者以互动的方式留下意见，是许多博客的重要要素。博客内容以图片介绍为主，本应有一些博客专注在艺术、摄影、视频、音乐、播客等各种主题，但由于初学尚有不足。

<p style="height:260px">本站整理各种经典，热评的电影。本着分享精神。</p>

联系我们：如果你对我们的网站有啥建议和意见，请联系我们。这也是对网站

不足的一个回馈。反馈者可以将名字邮件信息等提交发送给我们。

<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>

</form>

</div>

<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. 没有导入其他同类搜索引擎进行对比分享。

相关推荐

web课程设计报告-视频网站

专栏推荐