使用html编制网页(实验报告)

实验一HTML、CSS网页制作实验

实验一HTML、CSS网页制作实验一、做出网页1.html，效果如下图所示：要求如下：1、诗的题目格式为红色、加粗、居中显示。

2、作者格式为红色、斜体、居右显示。

3、诗的内容字体格式从上到下分别是<h4><h3><h2><h1>，诗的第一行和第三行内容为蓝色字体。

二、做出网页2.html，效果如下图所示。

要求如下：1、图像加边框。

2、图像相对于文字左对齐。

三、做出网页3.html，效果如下图所示：要求如下：文字颜色正常是#3c3c3c、白色背景，鼠标经过时变为#FF8400、#EDEEF0色背景。

四、请做出网页4.html，效果如下图所示。

五、请做出以下网页，效果如下图所示，保存为5.html：六、请做出网页6.html，效果如下图所示：要求如下：1、使用内嵌式引入CSS样式表。

2、使用类选择器定义元素。

（1）通过控制不同的类，分别为第一个字母“G”设置为蓝色、加粗、60px 字体；第二个字母“o”设置为红色、加粗、60px字体；第三个字母“o”设置为黄色、加粗、60px字体；第四个字母“g”设置为蓝色、加粗、60px字体。

（2）剩余字母“le”按默认样式输出。

七、请做出网页7.html，效果如下图所示。

要求如下：1、设置所有文本为宋体、12像素、绿色字体，“春季”字体颜色设为红色。

2、设置标题“春天”为16像素、红色、加粗、居中、上划线的效果。

3、设置文本首行缩进2个字符。

八、请做出网页8.html，效果如下图所示：要求如下：1、设置所有文本为微软雅黑、14像素、黑色字体。

2、新浪”、“新浪网”为红色字体，“博客首页”为蓝色字体，网址及日期为绿色字体。

3、设置标题为16像素、左对齐、下划线的效果。

4、设置文本“-百度快照-评价”为灰色、下划线的效果。

HTML实验报告

2、<HEAD>...</HEAD>首部标记，首部标记<HEAD>...</HEAD>用于提供与Web页有关的各种信息。在首部标记中，可以使用<TITLE>...</TITLE>标记来指定网页的标题，<STYLE>和</STYLE>标记来定义CSS样式表，使用<SCRIPT>和</SCRIPT>标记来插入脚本，等等。
按照属性的作用，可以大致将属性分为以下几类：
表现属性：用来控制页面内容的表现效果，如高度、宽度、边框等。
事件属性：用来添加行为，一般要结合JavaScript来实现，如onmouseover、onclick等。
标记属性：用来标记某个标签，如id、name等。
级联样式属性：是指使用级联样式表，如style、class等。
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<title>元素是用来定义文档的标题。
<body>元素定义文档的主体。body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
点击链接可以从一张页面跳转到另一张页面。
几乎可以在所有的网页中找到链接。
（二）
（
（）
实验报告成绩（百分制）__________实验指导教师签字：__________
武夷学院实验报告
课程名称：电子商务网站设计与开发_ 项目名称：_基于HTML的网页设计

网页制作实验报告

网页制作实验报告一、实验目的本次网页制作实验的主要目的是通过实践操作，深入了解网页制作的流程和技术，掌握网页设计的基本原理和方法，提高自己的网页开发能力和创新思维。

二、实验环境1、操作系统：Windows 102、开发工具：Adobe Dreamweaver CC 2019、Sublime Text 33、浏览器：Google Chrome、Mozilla Firefox三、实验内容1、网页规划确定网页主题：本次实验选择制作一个个人博客网站，主要包括个人简介、文章展示、留言板等板块。

设计网页布局：采用了常见的上下型布局，顶部为导航栏，中间为主要内容区域，底部为版权信息。

收集素材：通过网络搜索和自己拍摄，收集了一些与博客主题相关的图片和文字素材。

2、 HTML 编写创建 HTML 文件：使用 Sublime Text 3 新建一个 HTML 文件，并设置基本的文档结构，包括`＜html>｀、｀＜head>｀和`＜body>｀标签。

构建网页框架：使用`＜div>｀标签划分网页的不同区域，如头部、导航栏、侧边栏、内容区和底部。

插入文本和图片：使用`＜p>｀标签插入文本内容，通过`＜img>｀标签插入图片，并设置图片的大小和位置。

3、 CSS 样式设计创建 CSS 文件：在同一目录下创建一个 CSS 文件，用于定义网页的样式。

设定字体样式：设置网页的字体类型、大小、颜色和行高。

设计布局样式：使用浮动、定位和弹性布局等技术，实现网页的布局效果，如导航栏的水平排列、侧边栏的固定位置等。

添加背景和边框：为网页的不同区域添加背景颜色和图片，以及边框样式。

4、 JavaScript 交互实现引入 JavaScript 文件：在 HTML 文件中通过`＜script>｀标签引入JavaScript 文件。

实现滚动效果：使用JavaScript 实现网页滚动时导航栏的固定效果，以及滚动到指定位置时的动画效果。

实验一做一个简单的html网页

实验报告学生姓名：学号：一、实验室名称：软件大楼302二、实验项目名称：用HTML语言制作简单的网页三、实验原理：1.网页（1）网页就是在浏览器上看到的一页，网页也称为Web页。

（2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内容的作用。

（3）超链接是网页中的特殊标记。

它指向了WWW中的其他资源，如其他网页、网页的另一个段落、声音文件等。

这些资源可以位于自己的计算机上，也可以位于其他计算机上。

用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。

在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。

超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。

2.HTML语言（1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。

（2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microso ft Word等。

保存时要将脚本保存成纯文本格式，扩展名必须是.htm。

（3）HTML脚本的基本结构。

HTML脚本总是以<html>标记开头，</html>标记结尾，在<html>和</html>标记之间是HTML的所有内容，一般情况下它分为两部分：头部和主体。

头部总是由<head>和</head>标记定义的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以<body>作为起始标记，</body>作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。

3.FrontPage，dreamwerver，notepad以FrontPage为例，它是一种简单易学的Web管理和网页制作的软件。

Front Page2000的窗口，如图1.1所示。

网页系统设计实验报告(3篇)

第1篇一、实验目的1. 理解网页系统设计的基本概念和流程。

2. 掌握网页系统的规划、设计和实现方法。

3. 提高网页设计与制作能力，熟悉相关软件的使用。

二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 开发工具：Adobe Dreamweaver CC4. 编程语言：HTML、CSS、JavaScript三、实验内容1. 网页系统规划2. 网页系统设计3. 网页系统实现4. 网页系统测试与优化四、实验步骤1. 网页系统规划（1）明确系统功能：根据用户需求，确定网页系统的功能模块，如首页、产品展示、新闻资讯、联系方式等。

（2）确定页面布局：根据功能模块，规划页面布局，包括头部、导航栏、主体内容、底部等。

（3）设计导航结构：根据页面布局，设计导航结构，使用户能够方便地浏览各个页面。

2. 网页系统设计（1）设计页面风格：根据网站定位和用户需求，设计页面风格，包括颜色、字体、图片等。

（2）设计界面元素：根据页面风格，设计界面元素，如按钮、图标、表格等。

（3）设计交互效果：使用JavaScript等脚本语言，实现页面元素的交互效果，如滚动动画、鼠标悬停等。

3. 网页系统实现（1）编写HTML代码：使用HTML标签，构建网页结构。

（2）编写CSS代码：使用CSS样式，美化网页界面。

（3）编写JavaScript代码：使用JavaScript脚本，实现页面交互效果。

4. 网页系统测试与优化（1）功能测试：测试各个功能模块是否正常工作。

（2）性能测试：测试网页加载速度和响应时间。

（3）兼容性测试：测试网页在不同浏览器和设备上的显示效果。

（4）优化：根据测试结果，对网页进行优化，提高用户体验。

五、实验结果与分析1. 网页系统规划根据用户需求，本网页系统规划了以下功能模块：- 首页：展示网站简介、最新动态、热门产品等。

- 产品展示：详细介绍各个产品，包括图片、文字、价格等。

- 新闻资讯：发布公司新闻、行业动态等。

html网页设计实验报告

HTML页面设计一、实验名称：静态网页制作二、实验目的与要求：1．掌握Dreamweaver软件的使用。

2．掌握html语言中的表格和框架等的使用。

3．掌握web应用开发技术的基础语言-----html语言。

三、程序设计思想1、基本框架的构建整个页面先分出上中下3个部分，其中先分出上下两个部分，再将下面部分分为中与下，然后将中间位置分为左右两部分，再将左边分为左中两部分，左边再分为上下，，右边也为上下。

左的上位皇马，下位巴萨，中间为最新一些消息，只是添加了链接，右边分为上下。

即为相关视频以及助攻榜。

代码如下：<frameset rows="15%,*" cols="*"framespacing="0" frameborder="no" border="0"><frame src="标题.html" name="topFrame"scrolling="No" noresize="noresize"id="topFrame" title="topFrame" /><frameset rows="*,10%" cols="*"framespacing="0" frameborder="no" border="0"><frameset rows="*" cols="*,30%"framespacing="0" frameborder="no" border="0"><frameset rows="*" cols="*,60%"framespacing="0" frameborder="no" border="0"> <frameset rows="*,44%" cols="*" framespacing="0" frameborder="no" border="0"> <frame src="皇马.html" name="mainFrame" id="mainFrame" title="mainFrame" /><frame src="巴塞.html" name="bottomFrame1" scrolling="No" noresize="noresize" id="bottomFrame1" title="bottomFrame1" /></frameset><frame src="当前新闻.html" name="rightFrame1" scrolling="No" noresize="noresize" id="rightFrame1" title="rightFrame1" /></frameset><frameset rows="*,30%" cols="*" framespacing="0" frameborder="no" border="0"> <frame src="视频.html" name="rightFrame" scrolling="No" noresize="noresize" id="rightFrame" title="rightFrame" /><frame src="友情链接.html" name="bottomFrame2" scrolling="No" noresize="noresize" id="bottomFrame2" title="bottomFrame2" /></frameset></frameset><frame src="相关信息.html" name="bottomFrame"scrolling="No" noresize="noresize"id="bottomFrame" title="bottomFrame4" /></frameset></frameset>2、顶部页面top部分在BODY里用backgroud属性将图片嵌入到里面，具体源代码如下：<body background="图片/27c4e7ae55a6e3cdfaed50cc.jpg">3、左上部页面皇马部分该页面主要是皇马的一些简介，运用到一个表格，代码如下：<table width="265" height="154" border="1"><tr><td height="17" colspan="4"align="center"><span class="STYLE3">银河战舰II</span></td></tr><tr><td width="88" rowspan="3"><spanclass="STYLE3"></a><a target="_blank" href="../Untitled-3.html"><a target="_blank" href=".com/team.aspx?lega=liga&teamid=357"><img src="图片/xinsrc_.gif" width="96" height="128" /></a></span></td><td height="30" colspan="2" align="center"><span class="STYLE3">投票支持皇马</span></td><td width="89" align="center"><span class="STYLE3">皇马主帅</span></td></tr><tr><td height="17"><span class="STYLE3"></span></td><td><span class="STYLE3"></span></td><td rowspan="2"><img src="图片/皇马主帅.png" width="85" height="85" /></td></tr><tr><td height="80"><span class="STYLE3"><input type="submit" name="Submit" value="顶" /></span></td><td><span class="STYLE3"><input type="submit" name="Submit2"value="踩" /></span></td></tr></table>背景只是用了一个黑色为背景色代码如下：<body bgcolor="#000000">坐下与坐上代码类似，就不举出了。

HTML语言制作网页实验

HTML语言制作网页实验
一、实验内容
通过HTML语言，编写网页和超链接。

二、实验目的
掌握网页和超连接的基本制作方法。

三、实验工具
计算机，操作系统记事本
四、相关预备知识
建立一个网页：HTML语言如下：
<font color =”FF0000” size=5 > 中国</font>
建立超链接的HTML语言如下：
<A href =”Art.html”> Click Here for Art.</A>
通过上面的语句可以将以Art.html文件名的网页与本网页的Click Here for Art.字符串超链接
五、实验步骤
共有三步，
1）建立文件名为Art.的网页；
2）建立文件名为chao.html的网页，该网页上有一句Click Here for Art 的语句；
3）运行chao.html文件，点击Click Here for Art，调出Art.html网页;
4）同学自己找一图像（文件扩展名为 .gif），进行超媒体链接。

六、html文件的建立
在操作系统的笔记本下，输入html语句，存盘时选所有文件，写文件名，并加上扩展名html，存盘即可。

网页制作实习报告(6篇范文)

网页制作实习报告（6篇范文）【导语】网页制作实习报告怎么写好？本文精选了6篇优秀的网页制作实习报告范文，都是标准的书写参考模板。

以下是小编为大家收集的网页制作实习报告，仅供参考，希望您能喜欢。

【第1篇】网页制作实习报告一实验过程1.资料的搜集。

2.熟悉制作软件。

3.构建站点框架。

打开dremweaver后第一步便是新建站点4设计主页及二级页面。

5实现网页间的链接链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。

6向静太网页插入动态效果具体情况如下：通过这半年的学习实践中和老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。

使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。

所以我结合所学专业的内容制作了个人网站，作为实习的成果。

其内容是多样化的。

制作网页用的软件是ｄreamweaver , banner软件。

dreamweaver大大加速了网络时代电子交易应用中的项目交付。

它提供了网页和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。

例如，网页上很流行的阴影和立体按纽等效果，只需单击一下就可以制作完成。

当然，其最方便之处是，它可以将图象切割，图象映射，悬停按纽，图象翻转等效果直接生成html代码，或者嵌入到现有的网页中，或者作为单独的网页出现。

主图是一个网页的门面，它能体现出这个网页的整体风格。

制作网页,首先是确定主题,经过再三考虑,就做了个关于中国的网站,平时也总是浏览类似的网站,对这些还有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单的中国介绍和相关的事迹网站,专门介绍一些即使用,又便宜的小秘笈。

于是网站主题确立。

然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，中国简介，中国历史，用户登录注册页面留言，再加入个别网站等，每一部分又分几小部分，内容比较充分，多样。

HTML网页设计实验报告

天津理工大学实验报告学院（系）名称：管理学院<a> 链接 <a href=""></a>其中 href:用来指定超链接目标。

name:书签名target：用来指定超链接的目标框架名。

表格：<table> 定义表格及边框<table border="1"></table><caption> 表的标题 <caption>标题</caption><tr> 行<tr></tr><th> 定义表格的表头 <th>表头</th><td> 定义表格单元<td>row 1, cell 1</td><thead> 定义页眉<thead></thead><tfoot> 定义页脚<tfoot></tfoot><tbody> 定义主体</tbody><tbody><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HTML使用</title><style>h1{color: aqua;}</style><script>alert(123)</script><script src=""></script><link rel="stylesheet" href=""></head><body><h1>引入外部</h1><h2>引入外部</h2><h3>引入外部</h3><h4>引入外部</h4><h5>引入外部</h5><h6>引入外部</h6><b>加粗</b><i>斜体</i><u>下划线</u><br> <s>删除线</s><p>段落标签</p><hr> <p>你真66   66</p>1 > 01 < 2你&我黄金¥46546吼吼吼©商标®<img src="dt.gif" alt=""></body></html><table border="5" >  <thead><tr><th>name</th><th>age</th><th>hobby</th></tr></thead><tbody><tr><td>zhao</td><td>18</td><td>ri</td></tr><tr><td colspan="2">zhao</td><td rowspan="2">18</td><td>ri</td></tr><tr><td>zhao</td><td >18</td><td>ri</td></tr></tbody></table><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>注册页面</title></head><body><h1>注册页面</h1><form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"><p><label for="i1">username:<input type="text" id="i1" name="username" placeholder="用户名"></label></p><p><label for="i2">password:</label><input type="password" id="i2" name="password"></p><p><label for="i3">birthday:</label><input type="date" id="i3" name="birthday"></p><p>gender:<input type="radio" name="gender" checked="checked" value="male"> 男<input type="radio" name="gender" value="female"> 女</p><p>hobby:<input type="checkbox" name="hobby" value="long" checked> long<input type="checkbox" name="hobby" value="she"> she<input type="checkbox" name="hobby" value="ma"> ma</p>         <p>选择文件:<input type="file" name="file"></p><p><input type="submit" value="注册"><input type="button" value="按钮"><input type="reset" value="重置"></p></form></body></html>CSS层叠样式表的用法：CSS：层叠样式表（ Cascading Style Sheets ，主要实现网页美化以及各种特效；CSS分为三种：一、行内样式（inline style）语法：<标签名 style="属性1：值1；属性2：值2；……属性n：值n">标签内容</标签名>行内样式仅作用于使用它的对应标签，虽其他标签没作用，行内样式的优先级最高；二、内部样式（inner style）——即在head标签里新增一个style子标签语法：<style type="text/css">--- 内部样式 ---</style>内部样式可以分为以下三种：2.1 HTML标签选择器语法：html 标签名 {属性1：值1；……属性n：值n；}2.2 class类选择器语法：.类名 {属性1：值1；……属性n：值n；}2.3 id选择器语法：#Id名 {属性1：值1；……属性n：值n；}使用Id选择器的语法类似： <h1 id="Id选择器名"></h1>2.4 内部样式三种选择器的优先级从高到低的顺序为：Id选择器 > class类选择器 > HTML标签选择器三、外部样式：CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

工作报告之html网页制作实验报告

html网页制作实验报告【篇一：html实验报告】武夷学院实验报告课程名称：电子商务网站设计与开发_ 项目名称：_基于html的网页设计姓名：林元卿专业：旅游管理班级：3班学号：20136031005实验操作成绩（百分制）__________ 实验指导教师签字：__________）实验报告成绩（百分制）__________ 实验指导教师签字：__________【篇二：html标记的综合应用网页设计实验报告】学生实验报告学院：软件与通信工程学院课程名称：网页设计基础专业班级： 08软件与通信工程学院4班姓名：陈贝贝学号： 0088225学生实验报告一、实验综述1、实验目的及要求实验目的：通过用html语言进行编辑，使学生了解网站的制作流程；了解html表单标记的应用；了解html表格标记的应用；掌握html的基本概念、文档的基本结构；掌握html文档的结构、html设计文字排版；掌握html插入多媒体；掌握html基本标记，包括标题、背景图片、图像、水平线、字体编辑、段落、超链接、文本堆砌等的使用方法。

熟练掌握html中的常用标记的名称及用途。

熟练掌握对html语言文字结构的理解；掌握各种元素的使用；熟练掌握图片、动画、声音的嵌入以及超级连接的控制和应用，结合实际，巩固课堂中所学的理论知识。

实验要求：以个人独立完成的方式，完成一个用html语言进行编辑的网页制作，实现一个具有独立主题的网页制作。

2、实验仪器、设备或软件带ie浏览器的计算机，windows的写字板、记事本。

二、实验过程（实验步骤、记录、数据、分析）step1：设计网站logo，网站的标准色彩，并且确定网站主题和网站栏目，一切设计完成后开始构建页面。

我定义的主题是个人网站，所以主要突出自己的个性特质。

logo是sky dream，寓意是我的梦游园。

色彩主页是以蓝色为主，强调梦感。

栏目分为主页，日志（我的印记），相册（美丽瞬间），个人档案（我的万花筒），心情（我的叨叨）和留言板（留言星星河）。

【实验报告】网页制作实验报告

【实验报告】网页制作实验报告一、实验目的本次网页制作实验的主要目的是让我们熟悉网页制作的基本流程和技术，掌握 HTML、CSS 和 JavaScript 等语言的基本用法，提高我们的网页设计和开发能力，培养我们的创新思维和实践能力。

二、实验环境1、操作系统：Windows 102、开发工具：Visual Studio Code3、浏览器：Google Chrome三、实验内容1、网页规划与设计确定网页主题：本次实验选择制作一个个人博客网站。

设计网页布局：采用了常见的两栏式布局，左边为导航栏，右边为主要内容区域。

色彩搭配：选择了简洁舒适的配色方案，以淡蓝色为主色调，搭配白色和灰色。

2、 HTML 页面结构搭建使用 HTML 标签创建网页的基本结构，包括`＜html>｀、｀＜head>｀和`＜body>｀等。

在`＜head>｀标签中设置网页的标题、元数据和链接外部样式表。

在`＜body>｀标签中使用`＜div>｀、｀＜ul>｀、｀＜li>｀等标签构建网页的内容框架。

3、 CSS 样式设计创建外部 CSS 样式表，通过选择器为不同的 HTML 元素设置样式，包括字体、颜色、背景、边框、间距等。

运用浮动和定位技术实现网页元素的布局排版。

4、 JavaScript 交互效果实现编写 JavaScript 代码实现网页的交互功能，如导航栏的下拉菜单效果、图片轮播效果等。

使用事件监听机制处理用户的操作，如鼠标点击、鼠标悬停等。

四、实验步骤1、网页规划首先，对个人博客网站的功能和内容进行了详细的规划。

确定了包括首页、文章列表页、文章详情页、关于页等几个主要页面。

然后，在纸上绘制了每个页面的草图，初步确定了页面的布局和元素的分布。

2、 HTML 页面搭建打开 Visual Studio Code，创建一个新的 HTML 文件。

按照规划的页面结构，使用 HTML 标签逐步构建页面的框架。

网页设计-实训报告-html语言

网页设计-实训报告-html语言实训报告实训项目：HTML语言院别专业：信息管理学院班级学号：学生姓名：煜指导教师：实训成绩：实验日期：2018年6月28日信息管理学院制实践教学中心一、实训目的：本课程是培养学生了解和掌握网页设计与制作的课程。

通过实习训练，使学生学会理论知识的具体应用。

学会使用HTML语言制作网站。

二、实训内容及要求：学习掌握HTML语言，会用HTML+CSS布局网页。

三、实训方案：（一）<html><head><title>会员登记簿</title></head><body><table width="400"><form><caption align="center"><h3>会员登记簿</h3></caption><tr><td align="left"><p align="left">姓名:<input type="text" name="x1"></p></td></tr><tr><td align="left"><p align="left">地址:<input type="text" name="x1" size="40"></p></td></tr><tr><td align="left"><p align="left">性别:<input type="radio" name="x1" value="男">男<input type="radio" name="x1" value="女">女</p></td></tr><tr><td align="left"><p align="left">专长:<input type="checkbox" name="x1" value="软件">软件<input type="checkbox" name="x1" value="硬件">硬件<input type="checkbox" name="x1" value="程序设计">程序设计<input type="checkbox" name="x1" value="教学">教学</p> </td></tr><tr><td align="left"><p align="left">欲参加的专业组:<select><option>硬件设计</option><option>软件设计</option><option>编程语言</option><option>电脑教学</option></select></p></td></tr><tr><td align="left"><p align="left"><b>个人简历</b>:</p></td></tr><tr><td><textarea cols="50" rows="10" name="x1"></textarea></td> </tr><tr><td><input type="submit"><input type="reset"></td></tr></form></table></body></html>（二）<html><head><title>小综合</title></head><body><p align="center"><font face="华文新魏" size="5">学院</font></p> <p align="center"><font face="华文彩云" size="6">《网页设计》大赛</font></p> <dl><dt><p><b>一、大赛说明</b></p><dd>设计赏心悦目的网页能受到广大网民的钟爱，为了提供一个广阔的舞台以充分展示网友们的艺术才华和创作水平。

网页制作实验报告

实验名称：网页设计与制作实验日期：2021年10月15日实验地点：计算机实验室实验目的：1. 掌握网页制作的基本流程和工具使用。

2. 熟悉HTML、CSS和JavaScript等网页制作技术。

3. 提高网页设计的美观性和交互性。

实验内容：本次实验主要分为以下几个部分：一、HTML基础1. 学习HTML的基本标签和属性。

2. 实践网页结构搭建，包括标题、段落、列表、表格等。

3. 实现超链接，添加图片、音频和视频等媒体元素。

二、CSS样式设计1. 学习CSS选择器和样式规则。

2. 实践网页布局设计，包括定位、浮动、盒子模型等。

3. 调整网页字体、颜色、背景等样式，实现美观的视觉效果。

三、JavaScript交互性设计1. 学习JavaScript的基本语法和变量、函数等概念。

2. 实现简单的网页交互效果，如按钮点击事件、表单验证等。

3. 掌握DOM操作，实现动态内容更新和页面跳转。

实验步骤：一、HTML基础1. 打开Dreamweaver软件，创建一个新的HTML文件。

2. 使用HTML标签搭建网页结构，如标题、段落、列表等。

3. 添加图片、音频和视频等媒体元素，并设置相应的属性。

二、CSS样式设计1. 在HTML文件中添加一个内联样式表，编写CSS代码。

2. 设置网页的字体、颜色、背景等样式。

3. 调整网页布局，实现响应式设计。

三、JavaScript交互性设计1. 在HTML文件中添加一个内联JavaScript脚本。

2. 编写JavaScript代码，实现按钮点击事件、表单验证等功能。

3. 使用DOM操作，实现动态内容更新和页面跳转。

实验结果：通过本次实验，我成功制作了一个具有基本功能的网页。

网页包括以下内容：1. 网页标题：实验报告2. 网页内容：实验目的、实验内容、实验步骤、实验结果等。

3. 图片展示：实验过程中的截图。

4. 交互效果：点击按钮可以切换网页背景颜色。

实验总结：1. 通过本次实验，我对网页制作的基本流程和工具有了更深入的了解。

网页编辑实验报告

一、实验目的1. 熟悉网页编辑的基本工具和操作方法。

2. 掌握网页设计的基本原则和技巧。

3. 提高网页制作和美化的能力。

二、实验环境1. 操作系统：Windows 102. 网页编辑软件：Adobe Dreamweaver CC3. 浏览器：Google Chrome三、实验内容1. 创建一个简单的网页2. 网页布局与排版3. 网页元素添加与编辑4. 网页样式设置与美化5. 网页交互效果实现四、实验步骤1. 创建一个简单的网页（1）打开Adobe Dreamweaver CC，新建一个网页文件。

（2）在“插入”菜单中，选择“HTML”选项，然后选择“标签”中的“body”。

（3）在“属性”面板中，设置网页的背景颜色、文字颜色等属性。

（4）在“插入”菜单中，选择“HTML”选项，然后选择“文本”中的“段落”。

（5）输入网页内容，并调整段落格式。

2. 网页布局与排版（1）选择“插入”菜单中的“布局”选项，然后选择“Div标签”。

（2）在“属性”面板中，设置Div标签的宽度和高度，以及边距和填充。

（3）将网页内容分别放入不同的Div标签中，实现网页的布局。

（4）调整Div标签的位置和大小，使网页排版美观。

3. 网页元素添加与编辑（1）在“插入”菜单中，选择“媒体”选项，然后选择“图像”。

（2）选择需要插入的图片，并设置图片的大小、对齐方式等属性。

（3）在“插入”菜单中，选择“表单”选项，然后选择“文本框”。

（4）设置文本框的属性，如宽度、高度、边框颜色等。

（5）在“插入”菜单中，选择“表单”选项，然后选择“按钮”。

（6）设置按钮的属性，如文本、样式等。

4. 网页样式设置与美化（1）选择“插入”菜单中的“CSS样式”选项，然后选择“新建CSS规则”。

（2）在“选择器”中输入选择器的名称，如“.title”。

（3）在“规则定义”中，设置标题的字体、颜色、大小等属性。

（4）将CSS样式应用于网页中的标题元素。

HTML实验报告

实验步骤：
1、运行TOMcat服务器。
运行成功后的界面：
2、建立HTML文件。
<html>
<head>
<title>我的网页</title>
</head>
<body>
我的第一个网页！
</body>
</html>
3、运行该代码后的显示。
相关问题及其说明：
具体HTML文件的应用将在所建网站中进行展现。
凌梦
二实验内容能够在tomcat服务器上正常运行制作的html文件实验Leabharlann 目班级姓名学号
指导教师
HTML文件的建立
****
****
****
****
一、实验目的：
掌握网页文件的代码编写。
2、实验内容
能够在TOMcat服务器上正常运行制作的HTML文件。
三、实验开发软件
Dreamweaver、Eclipse开发工具
2010年12月19日

实验一使用HTML语言编写静态网页

实验一使用HTML语言编写静态网页
一、实验目的
1、熟悉开发环境
2、使用HTML语言各类标记
3、表单控件
二、实验要求
1.使用HTML语言各类标记及表单控件
重点：使用HTML语言各类标记及表单控件
难点：表单和框架的使用
二、实验内容：
1.利用框架将浏览器画面分割成多个子窗口，要求主页面上有班级公告，课程表
2左侧包含的链接有成员注册、个人介绍、新闻管理、相册管理、留言管理、查看注册会员等等
补充内容：
链接文字颜色属性link、alink和vlink
在浏览器默认的情况下，链接文字的颜色为蓝色，访问过后的链接文字颜色为紫色。

有助于用户判断是否已经单击过该链接。

链接的不同状态
基本语法：
<body link=” color_value”alink=” color_value”vlink=” color_value”>。

2025年Html设计实验报告

山东信息职业技术学院《网页设计》试验汇报（—第二学期）班级：姓名：学号：指导老师：试验一认识Dreamweaver CS3一、试验目的1、熟悉Dreamweaver CS3环境。

2、理解HTML文献构造。

二、试验环境计算机三、试验内容创立站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创立。

无论哪种方式，都要事先在当地磁盘上建立一种用来寄存站点的文献夹，这个文献夹就是当地站点的根目录。

下面简介一下这两种方式的详细操作环节。

1．使用向导建立站点使用向导建立站点的环节如下：（1）打开建立站点向导的措施有3种。

①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。

②选择“站点”菜单中的“新建站点”命令。

③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。

起始页中新建站点“管理站点”对话框（2）打开“站点定义為”对话框，在“您打算為您的站点起什么名字”文本框中输入站点名字，如travel。

若已申請域名则可以在“您的站点的HTTP地址（URL）是什么”文本框中填入申請的域名地址。

如图所示。

设置站点名和URL地址（3）单击“下一步”按钮，问询与否使用服务器技术，如图所示。

若是静态站点则选中“否，我不想使用服务器技术”单项选择按钮，若是动态站点可以深入设置使用哪一种服务器技术。

选择与否使用服务器技术（4）单击“下一步”按钮，在“您将把文献存储在计算机上的什么位置”文本框中直接输入站点根目录的途径，或者单击“浏览”按钮，选择文献夹目录。

（5）单击“下一步”按钮，在“您怎样连接到远程服务器”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。

（6）单击“下一步”按钮，将显示前几步设置的总結信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完毕”按钮。

HTML实验报告01

南昌大学实验报告学生姓名：学号：专业班级：实验类型：□验证□综合■设计□创新实验日期：实验成绩：2008.10.15一、实验项目名称实验一HTML网页制作实验二、实验目的通过本实验掌握HTML标记的综合使用方法，学会用HTML设计一个简单的页面。

具体要求：做一个用表格布局或者框架布局的页面，并用上超链接技术，给某个栏目链接一个子页面。

（可以参照借鉴本例，但本例也有问题的）三、实验基本原理通过浏览器看到的网站都是由HTML语言构成的。

HTML是一种建立网页文件的语言，透过标记式指令，将影像、声音、图片和文字等连接起来。

HTML文件可以用记事本、写字板或FrontPage Editor 等编辑工具来编写，用HTML编写的文件的扩展名为.HTML或.HTM，它们是能够被浏览器解释显示的文件格式。

用HTML 制作一个简单的网页的过程：（1）用任何文本编辑器（Windows 的写字板、记事本、Microsoft Word或专业的文本编辑器等）输入HTML标记文本；（2）以纯文本格式保存为*.HTML文件；（3）启动浏览器，打开该文件或在地址栏中直接输入存放该文件的地址，就会看到相关的网页画面。

四、主要仪器设备及耗材计算机及相关网页设计软件，打印机，打印纸五、实验步骤（1）将需要的图像和链接页面存放在指定的文件夹内，以便下面写的HTML文档调用。

（2）在文本编辑器中输入下列文本：<html><head><title>小哲学习交流站</title></head><body background="bg.jpg"><table border="0" width="100%" id="table1" height="491"><tr><td colspan="5" height="53"><p align="center"><font size="7" face="华文行楷" color="#993300">小哲学习交流站</font></td> </tr><tr><td colspan="5" height="33"><HR noShade SIZE=1 width="100%" color=#B467F6> </td> </tr><tr><td height="19" width="20%" align="center"><a href="1.htm"><font size="5" face="隶书" color="#800000">本站首页</font></a></td><td height="19" width="20%" align="center"><a href="1.htm"><font size="5" face="隶书" color="#800000">学习交流</font></a></td><td height="19" width="20%" align="center"><a href="1.htm"><font size="5" face="隶书" color="#800000">课件共享</font></a></td><td height="19" width="20%" align="center"><a href="1.htm"><font size="5" face="隶书" color="#800000">作品欣赏</font></a></td><td height="19" width="20%" align="center"><a href="1.htm"><font size="5" face="隶书" color="#800000">联系我们</font></a></td></tr><tr><td width="14%" height="163"></td><td width="40%" colspan="3" height="163"><p align="left">      </p><p align="left">      <i><b><font size="5" face="华文新魏">大家好！我是李哲，欢迎来到本站。

使用html编制网页(实验报告)

实验一HTML、CSS网页制作实验

HTML实验报告

网页制作实验报告

实验一做一个简单的html网页

网页系统设计实验报告(3篇)

html网页设计实验报告

HTML语言制作网页实验

网页制作实习报告(6篇范文)

HTML网页设计 实验报告

工作报告之html网页制作实验报告

【实验报告】网页制作实验报告

网页设计-实训报告-html语言

网页制作实验报告

网页编辑实验报告

HTML实验报告

实验一 使用HTML语言编写静态网页

2025年Html设计实验报告

HTML实验报告01

HTML网页设计实验报告

实验一使用HTML语言编写静态网页