下载文档原格式
HTML5实验报告1441904232 谢凯1.实验目的：通过分析基于青瓷引擎制作的小游戏《神奇的六边形》的制作文档，认识青瓷引擎的特点，以进一步了解HTML5编程。
2.实验内容：介绍《神奇的六边形》的动画表现部分。
算法部分包括方块飞入，方块消除和分数增加等实验选取方块飞入为例。
(1)双击Assets/prefab/Shape.bin，编辑预制(2)选中Shape节点，添加TweenPosition组件，属性设置如下：动画曲线设置了个“回弹”效果，from和to的值将在代码中动态设置(3)保存预置(4)打开Scripts/ui/Pool.js，添加flyIn接口，处理飞入动画的播放代码如下：/*** 播放飞入的动画*/Pool.prototype.flyIn = function(index) {var self = this, o = self.gameObject, children = o.children;var offset = o.width * (0.5 - 0.165);// 先确保位置都正确self.resize();if (index === 0) {var o = children[0], c = o.getScript('qc.tetris.ShapeUI');c.flyIn(offset);}if (index === 0 || index === 1) {var o = children[1], c = o.getScript('qc.tetris.ShapeUI');c.flyIn(offset);}var o = children[2], c = o.getScript('qc.tetris.ShapeUI');c.flyIn(offset);};(5)打开Scripts/ui/ShapeUI.js，添加flyIn接口，处理单个形状飞入动画代码如下：/*** 飞入动画*/ShapeUI.prototype.flyIn = function(offset) {var self = this,tp = self.getScript('qc.TweenPosition');tp.delay = 0.5;tp.to = new qc.Point(self.gameObject.x, self.gameObject.y);tp.from = new qc.Point(tp.to.x + offset, tp.to.y);tp.resetToBeginning();tp.playForward();};3.实验效果：代码实现效果如下图所示：可见右侧方块飞入新的方块。
《企业网站开发》实验指导书计算机科学与技术学院2013-3目录实验一HTML语言标志 (1)【实验目的】 (1)【实验环境】 (1)【实验重点及难点】 (1)【实验内容】 (1)实验二使用Dreamweaver创建本地站点 (2)实验三网页编辑与超链接 (6)【实验目的】 (6)【实验环境】 (6)【实验重点及难点】 (6)【实验内容】 (6)实验四网页图像的应用 (7)实验五表格和布局表格 (10)【实验目的】 (10)【实验环境】 (10)【实验重点及难点】 (10)【实验内容】 (10)实验六CSS样式的应用 (11)【实验目的】 (11)【实验环境】 (11)【实验重点及难点】 (11)【实验内容】 (11)实验七层 (12)实验八Dreamweaver的框架和行为 (13)【实验目的】 (13)【实验环境】 (13)【实验重点及难点】 (13)【实验内容】 (13)实验九Dreamweaver的模版 (14)【实验目的】 (14)【实验环境】 (14)【实验重点及难点】 (14)【实验内容】 (14)实验十Dreamweaver表单 (15)【实验目的】 (15)【实验环境】 (15)【实验重点及难点】 (15)【实验内容】 (15)实验一HTML语言标志【实验目的】1．掌握<head></head>的<title>标记，和<meta>标记；2．掌握使用<body>标记设置网页背景颜色和文本颜色。
学习使用分段标记<p></p>；3．掌握使用<font>标记设置文字的属性；4．掌握在网页中插入背景图片；5．掌握在网页中插入水平线，并设置水平线的属性；6．掌握在网页中插入背景音乐。
【实验环境】Windows xp【实验重点及难点】掌握字体、水平线等常用标记。
【实验内容】1、制作一个简单的网页sy1-1.htm，用记事本编辑，内容为个人简介信息。
html求三角形面积实验报告实验目的：通过编写一个HTML程序计算三角形的面积。
实验原理：三角形的面积公式为 S = 1/2 * b * h，其中 b 表示三角形的底边长，h 表示三角形对应底边的高。
实验器材：计算机、文本编辑器。
实验步骤：1. 打开文本编辑器，新建一个HTML文件，并将文件命名为“triangle.html”。
2. 在HTML文件中输入以下代码：```<!DOCTYPE html><html><head><title>计算三角形面积</title></head><body><h1>计算三角形面积</h1><form><label for="base">请输入三角形的底边长：</label><input type="number" id="base" name="base"><br><br><label for="height">请输入三角形的高：</label><input type="number" id="height" name="height"><br><br><input type="button" value="计算" onclick="calculate()"><br><br><label for="result">三角形的面积为：</label><input type="number" id="result" readonly></form><script>function calculate() {var base = parseFloat(document.getElementById('base').value);var height = parseFloat(document.getElementById('height').value);var area = 0.5 * base * height;document.getElementById('result').value = area;}</script></body></html>```3. 保存文件并打开浏览器，将文件拖拽到浏览器中打开。
（1）一.实验目的及实验环境
（2）掌握网站开发环境的搭建
（3）掌握DreamWeaver的使用
（4）掌握HTML的基础语法。
（5）掌握表单的使用
（6）掌握CSS的使用
二.实验内容
编写某校学生四六级考试前学习时间分配调查表网页, 实现如图1所示内容。
图1
实现一个用户注册的表单页面, 其页面如实验图2所示。
利用层叠样式表CSS控制页面的格式, 用Class选择器和ID选择器实现在网页中使用相同的标记产生不同的样式, 网页如图3所示。
a.中国加油为大小25像素, 居中, 加下划线, 加粗
b.四川加油为大小18像素
c.汶川加油为大小20像素, 红色
图 2
图 3
三. 方案设计
运用Dreamweaver制作表格, 拖拽表单。
按照实验预期结果图片来设计, 设计总体框架, 按照从上到下, 从左到右的顺序依次设计。
四. 测试数据及运行结果
1．正常测试数据（3组）及运行结果；
2．非正常测试数据（2组）及运行结果。
五．总结
1．实验过程中遇到的问题及解决办法；
2．实验中, 表前面的标签, 总是和表格对其不了, 试了好长时间, 最后参考了老
师的文件, 才发现那些标签其实也在表格里面, 只不过是其边框设置为0。
3．对设计及调试过程的心得体会。
看着好像特别简单, 只是拖拖拽拽, 可是到了自己真正的动手起来, 就没那么简单了。
归根结底, 还是自己眼高手低, 不够细心。
六. 附录: 源代码（电子版）。
山东信息职业技术学院《网页设计》实验报告（2010—2011学年第二学期）班级：姓名：学号：指导老师：实验一认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。
2、了解HTML文件结构。
二、实验环境计算机三、实验内容创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。
无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。
下面介绍一下这两种方式的具体操作步骤。
1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。
①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字”文本框中输入站点名字，如travel。
若已申请域名则可以在“您的站点的HTTP地址（URL）是什么”文本框中填入申请的域名地址。
如图所示。
设置站点名和URL地址（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。
若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。
选择是否使用服务器技术（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。
（5）单击“下一步”按钮，在“您如何连接到远程服务器”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。
一、实验目的1. 理解网页的基本结构和组成。
2. 掌握HTML、CSS和JavaScript等网页编程语言的基本语法。
3. 能够通过查看和分析网页源代码，了解网页的设计和实现方法。
4. 提高对网页性能和优化的认识。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 编程软件：Sublime Text三、实验内容1. HTML实验（1）创建一个简单的HTML页面，包含标题、段落、列表、图片等元素。
代码如下：```html<!DOCTYPE html><html><head><title>我的第一个网页</title></head><body><h1>欢迎来到我的网页</h1><p>这是一个段落。
</p><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><img src="image.jpg" alt="这是一张图片"></body></html>```（2）将HTML页面保存为“index.html”，并使用浏览器打开，查看效果。
2. CSS实验（1）为上述HTML页面添加CSS样式，实现以下效果：- 标题居中显示。
- 段落文字加粗、颜色为红色。
- 列表项背景色为浅灰色。
- 图片宽度为200像素。
代码如下：```cssbody {text-align: center;}p {font-weight: bold;color: red;}ul li {background-color: lightgray;}img {width: 200px;}```（2）将CSS样式保存为“style.css”，并在HTML页面的`<head>`标签中引入。
一、实验目的1．练习使用HTML中最基本的一些标签，如定义标题、段落及标记文字的显示方式等。
1．熟练掌握在HTML文件中编写JavaScript程序的基本操作，以及在Google Chrome 中调试JavaScript的基本操作。
2．熟练掌握JavaScript的基本编程概念和编程技术。
3．熟练掌握JavaScript程序语言的数据类型、表达式、运算符及基本控制语句，并学习基本的对象概念和时间处理程序。
二、主要仪器设备微型计算机、Windows操作系统，MyEclipse软件。
三、实验原理与方法1．在MyEclipse环境下编写HTML文件，制作一个简单的网页能够在浏览器上运行；2．基本掌握了JavaScript的语法格式及应用方法后，编写一个js文件；3．在MyEclipse环境下编写好HTML文件中添加JavaScript，实现网页的动态效果；四、实验主要内容1.使用HTML搭建页面结构和内容，CSS美化页面，JS给页面添加动态效果和内容，制作一个网页。
2．编写一个简单的form表单，用来判断人体的BMI值是否正常。
3．通过几种方法在HTML中引入JS。
4．通过实例来验证JS里面的运算符和JA V A中的异同。
五、实验主要步骤与实验结果1、实验主要操作过程（1）新建一个HTML文件，实现人体BMI值的判断首先在WebRoot根目录下面新建一个HTML文件，命名为HelloWeb1.html，找到该文件的<body></body>部分，在其中添加代码；然后使用HTML语言里面新建一个form表单，在该表单中编写两个文本框和一个按钮，实现用户在里面输入数据；最后在HelloWeb.java文件中编写判断条件，用户输入身高和体重，单击“提交”按钮就可知道自己的BMI值是否正常。
（2）使用JS给页面添加动态效果和内容首先在WebRoot根目录下面先新建一个first.js文件，然后再新建一个HTML文件，命名为demo01..html，找到该文件的<body></body>部分，在其中添加以下代码：<scripttype="text/javascript"src="first.js"></script><script type="text/javascript">alert("study is happy!")</script></head><body><input type="button"value="can you try?"onclick="alert('try is try!')" /></body>在HTML文件中引入JS有三种方式，该文件中使用的是内部方式，即在head标签里面添加Script标签，在标签中写JS代码。
html设计实验报告HTML设计实验报告摘要：本实验旨在通过设计一个简单的网页来学习和应用HTML标记语言。
通过实践，我们深入了解了HTML的基本语法和标签，掌握了网页的基本结构和布局，以及如何添加文本、图像和链接等元素。
通过本实验，我们不仅提高了对HTML的理论知识的掌握，还培养了动手实践和解决问题的能力。
1. 引言HTML（超文本标记语言）是一种用于创建网页的标记语言。
它由一系列的标签组成，通过标签来定义网页的结构和内容。
HTML的设计简单易学，广泛应用于网页开发领域。
2. 实验目的本实验的目的是通过设计一个简单的网页来熟悉和掌握HTML的基本语法和标签。
通过实践操作，我们将学会如何创建网页的基本结构、布局和添加元素。
3. 实验过程3.1 创建HTML文件首先，我们需要创建一个新的HTML文件。
可以使用任何文本编辑器，如记事本或Sublime Text等。
在文件的开头和结尾分别添加<html>和</html>标签，表示这是一个HTML文档。
3.2 定义文档头部在<html>标签内，我们需要添加<head>标签，用于定义文档的头部信息。
在<head>标签内，可以添加<meta>标签用于定义字符编码、网页标题等信息。
3.3 定义文档主体在<html>标签内，我们还需要添加<body>标签，用于定义文档的主体内容。
在<body>标签内，我们可以添加文本、图像、链接等元素。
3.4 添加标题使用<h1>到<h6>标签可以定义标题，其中<h1>表示最高级别的标题，<h6>表示最低级别的标题。
标题的级别决定了其在页面中的重要性和显示样式。
3.5 添加段落使用<p>标签可以定义段落。
在<p>标签内，我们可以添加任意文本内容。
可以使用<br>标签来实现换行。
html网页设计实验报告
实验目的：
通过本次实验，掌握HTML基本标签的使用方法，并能够运用所学知识设计一个简单的网页。
实验步骤：
1. 下载安装HTML编辑器
2. 设计网页结构，包括标题、导航栏、内容区域等
3. 插入文字、图片、链接等元素
4. 优化网页排版和样式
实验成果：
经过不断的实验设计和排版调整，我完成了一个简单而实用的
网页设计。
整个网页结构明确、内容丰富，符合大众化的视觉风格，同时也充分体现了网页设计的个性和创新。
实验体会：
通过本次实验，我深刻认识到了HTML网页设计的重要性和实用性。
在今天的知识经济时代，网络已经成为我们的生活和工作
中不可或缺的一部分，而在网络世界中，如何利用网页设计和实
现信息传递和交流显得尤为重要。
所以，掌握HTML网页设计技
能不仅可以丰富我们的知识储备和实践能力，还可以为我们今后
的职业生涯打下坚实的基础。
总结：
通过本次实验，我对HTML网页设计技术的应用有了初步认识，也进一步了解到了HTML网页设计的一些基本知识和实用技巧。
我相信，在今后的学习和实践中，我会不断地扩展和深化我的HTML网页设计技术，为我今后的职业生涯发展打下坚实的基础。
教育信息技术与传媒学院
Institute of Educational Information Technology and Communication
Web教育平台开发实验报告学号 101405619 姓名陈芳专业信息技术班级本科班日期 2013年3月11号
实验名称实验一 HTML
实验目的1. 掌握网页的基本HTML结构。
2. 熟悉常用HTML标记的使用方法。
实验内容1、基本HTML结构
<html>
<head>
<title>念奴娇赤壁怀古</title>
</head>
<body bgcolor="#FFFF99">
<h1 align="center">念奴娇赤壁怀古</h1>
<p font size="+3" face="楷体">
<ul>
<li><font color="#00FF00">大江东去，浪淘尽，千古风流人物。
故垒西边，人道是、三国周郎赤壁。
乱石穿空，惊涛拍岸，卷起千堆雪。
江山如画，一时多少豪杰
</font></li>
</ul>
<p>
<ul>
<li><font color="#00FF00">遥想公谨当年，小乔初嫁了，雄姿英发。
羽扇纶巾，谈笑间、强虏灰飞烟灭。
故国神游，多情应笑我，早生华发。
人间如梦，一尊还酹江月。
</font></li>
</ul>
</body>
</html>
2、标记的使用
（1）<Body Bgcolor=”red”>设置背景颜色
<Body text=”red”>设置文本颜色
<Body link=”red”>设置超链接颜色
<Body vlink=”red”>设置已使用的超链接的颜色
（2）输入标题
标题标记<Hn>,其中n为标题的等级，共分为6个等级的标题，n越小，标题字号就越大。
<H1>一级标题</H1>
（3）划分段落
<p></p>标记用来创建一个段落。
Align属性（对齐方式）值为
left（左对齐） center（居中） right（右对齐）
例如： <p align=”center”></p>
（4）<Br>回车换行
当在<p></p>标记对间行与行之间的距离比较小，在标记对外择行与行间距离较大。
（5）插入图片
<Img Src=”picname”>
图片链接 <A Href=”URL”><Img Src=”picname”></A>
（6）创建外部链接
结构：超链接标记<A></A>、属性Href及其值、显示在网页
上作为链接的文字。
格式：<A Href=”URL”>显示的文字</A>
1、链接目标位于HTML文档所在文件夹的子文件夹中，使用
相对路径地址来指向该目标：
<A Href=”bbs\login.html”>登录</A>
2、使用绝对路径来指向目标：
<A Href=”/c:\my\login.html”>登录</A>
总
结
经
验
教师评语
日期：2013 年3月11 日。
