XX大学
《Web开发概述(HTML)》
实验报告
学院：计算机与信息科学学院
专业：
班级：
姓名:
学号：

实验报告 1
一、实验目标：
1.掌握HTML常用标签的使用方法
二、实验要求：
1.创建网站，并新建首页，首页中使用表格+列表标记给出北碚UME影城今天的电影列表，并为至少3部电影各自制作一个内容介绍网页，点击电影列表中电影名称，超链接到电影内容页面。
2.在电影列表页面底部制作北碚UME影城的超链接
3.为每部电影添加海报图片、视频等内容（自行设计）。
4.将本次实验的结果（网站网页等源文件）保存好，后续实验还会用到。
三、实验过程:
一、首页主体
  虽然实验报告要求说要用表格和列表标记给出当日电影列表，但我觉得那样太丑了，现实生活中没有把排片表放在首页的电影网站，否则首页就太长了，一般都是点开电影海报才出现排片表的。
  虽然实验的要求只是表格和列表，但是我觉得应该对自己要求更高一些，不能得过且过、点到为止。
  我认为学习应该是问题导向的，而不是填鸭的。
  所以，以期使页面更加美观并贴近实际应用场景，我决定自己去学一点书上没有的技术。
  我想要给电影海报加上滚动效果，然后点击海报会链接到各网站的、我制作的内容介绍页面。
  所以我通过互联网资源自学了<MARQUEE>，并且设置了loop属性值为”infinite”以自动地恒久滚动下去不停，发现它滚得太慢，想到用户可能没耐心等就切换页面，所以设置了scrollAmount属性值为10以加快滚动速度，但是用户的鼠标可能会追着海报点因而造成不舒适，所以设置了onmouseover属性值为stop(),onmouseout属性值为start(),以达到鼠标悬停于滚动带时滚动暂停、离开后滚动继续的效果，设置direction属性值为left以规定从右向左滚。
首页代码：
二、首页底部链接
  在首页底部加了两个<a>,做了“重庆北碚UME影城”和“观影指南”的链接。
三、内容介绍页面
  点击海报后可跳转至相应内容介绍页面。排版交给CSS。涵盖了电影海报、文字剧情简介、和排片时间及影票价格、对应影厅等相关信息。排片时间采用表格完成。
内容介绍页面典型代码（信条）：
四、页面底部北碚UME影城链接
  链接到时光网的UME影城页面。链接代码在上文首页代码截图中已体现。
五、观影指南
实验要求中有列表，但是出于美观和贴近实际应用场景的考虑，在首页和内容介绍页面中都没有用到。
为了弥补这个缺憾。我运用列表，写了一个“观影指南”页面，里面主要讲的是文明观影的倡议，也在首页底部有链接。
观影指南代码：
六、风格设计html网页设计报告总结
我用了link以调用外部css。
我写的每一个页面都共享这个styles.css。
设置了一系列class id 父子选择器 后代选择器等以精确作用。
Styles.css典型代码：
本周还没开始讲CSS，但我还是超前自学了。
迟早得用的。
七、首页进一步美化：
做完后，发现背景很白，并没有逼真感。
因而我决定用背景图片：
但是不是background-image,而是直接用一个</img>
并且设置了z-index:-1
显示在所有其他内容的下面：
设置了长宽均为100%，以撑满整个屏幕。
八：分页面进一步美化
白底不好看
因此我打算采用背景渐变
并且是斜对角线上的渐变
实现了从左下到右上，从黄到紫的渐变。
八、最后，还没有加视频：
预加载，并设置controls，用户可以控制开始暂停，并设置封面图片
Css:
用绝对定位定位。
将bottom设置为负值，以免重叠影响美观。
四、实验结果：（截图及网页运行效果说明）
对于非直观的运行效果，在上文“过程”部分已具体说明
首页美化后：
分页面美化后：
好看了许多。
视频部分：
成功播放，效果不错！
五、实验分析总结：（通过本次实验，遇到什么问题，解决过程及解决方法）
问题有一大类，共2小类
将与原因和解决过程一并陈述
大类：排版问题
小类1：我的问题。
小类2：不是我的问题（浏览器问题）。
1.我的问题
A.一开始我用<MARQUEE>的时候碰到一个非常奇怪的现象。它这条滚动带滚不到页面最左边，总是会有留白，显得非常难看。
原因和解决过程：虽然我对块级元素的概念已经理解得很透彻了，但敌不过想当然和手的生疏。我当时想当然地认为<MARQUEE>是块级的，根本没往块级这方面想，耗费了许多时间纠错。后来我把<MARQUEE>放进了<div>,问题就解决了。
B.我发现我要的内容的自动排版总是不美观。所以我超前自学了CSS，因为我觉得全都在html中操作是不规范的，css早学晚学都得学的，还不如提前操练起来，学习不能太被动。
所有页面我都用了一个styles.css，规定是否粗体，字体颜，元素位置。
部分元素的定位问题，我发现用float就可以解决了。但是我发现另外一部分非常之顽固，用了float仍然会显示异常。所以我自学了绝对定位. position:absolute 然后right/bottom/top/left:x%就可以了。
但还有更可恨的一部分。用了绝对定位仍然不行。比如首页的两个超链接，一开始尽管我设置了bottom:0，他们仍然不显示在页面底部，却显示在MARQUEE那条滚动带的底部，随着海报一起滚动出来，非常难看。
我用的文本编辑器是sumblime text,这是个轻量级编辑器，打开非常快，不像Visual Studio这样。同时功能也非常好用，在冒号后输入首字母，会自动跳出属性值全文以供选择，不跳出属性值则说明没有以该首字母开头的属性值。
我穷尽了几乎一切办法。Text-align,align-self,align-content,align-items等等跳出来的和align有关的一切，我都用26个字母试了一遍，没一个对的。有的甚至更离谱,直接显示到了MARQUEE里最后一个图片链接的后面。
解决方法：前文说过，一开始我想当然认为<MARQUEE>是块级元素。后来当我把<MARQUEE>放入<div>，异常就消失了。
2.浏览器问题。
  一开始我发现<MARQUEE>第一次滚动到最左边后会直接一整条消失，然后重新从右边滚起，后面就正常了。
也试过很多办法但都不奏效。
解决办法：换用火狐浏览器和IE浏览器，发现问题消失了。因此，这是Microsoft Edge浏览器自身的问题。
反思：1.设计与制作网站不能想当然认为某元素是块级元素，对于这方面的错误纠察还不够敏感。
2.事后了解到<MARQUEE>这个技术已经有一些年头了，下次我要实现某一个效果，应学习更为前沿的技术。同时，我也承认，这个MARQUEE的效果不够有设计感，感觉平时很少见到，正统的电影网站一般不会就这么直接滚动，应该会加一些JavaScript代码，这是我目前还没有学习到的。
六、成绩：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。