Html设计实验报告
工作报告之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实验报告
《企业网站开发》实验指导书计算机科学与技术学院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与JavaScript》实验报告专业：软件工程班级：1405学号：20144706姓名：张俊怡完成时间：2015/12/6指导教师：王蓓蕾总共页数： 8网站主界面：（针对颜色不协调的问题已经改进）主界面布局：全程采用table布局，主要分块为上边一块，下边一块，中间过渡用动态效果展示网站信息。
下边左边是主要功能选择区，中间是文字动态区，右边是图片以及视频动态展示区。
采用的CSS方法：Class外部关联和内部关联配合使用网站整体颜色风格：用淡雅浅色作为主页背景编写代码步骤：最重要的是整体布局，布局好后分块修饰。
使用了JavaScript<script language="JavaScript" type="text/javascript">var d=new Date();var monthname=new Array("January","February","March","April","May","June","July","A ugust","September","October","November","December");var TODAY = monthname[d.getMonth()] + "" + d.getDate() + ", " + d.getFullYear();</script>来获取当前系统时间。
网站介绍页面：使用了较多是js和jQuery实现了图片的动态特效。
资料下载页面：布局方式：采用table布局，布局较为简单，资料下载这个页面能实现的功能其实包括资料下载和上传。
HTML学校设计报告
HTML学校设计报告
一、背景介绍
在当今信息化时代，数字化教育已经成为学校发展的重要方向之一，为了提升学校形象、提高教学效果，本文旨在为学校设计一个优质的HTML网站。
二、设计目标
1.为学校提供一个直观清晰的网站，方便师生查找相关信息；
2.提升学校形象，展示学校实力和办学理念；
3.优化用户体验，简洁明了的页面结构，方便浏览；
三、设计内容
1.首页
•学校简介
•学校办学理念
•最新动态
2.招生信息
•详细介绍学校各个年级的招生信息
•线上报名通道
3.师资力量
•展示学校师资队伍的介绍和荣誉
•教师风采展示
4.校园生活
•学生活动
•校园风景展示
5.联系我们
•地址、联系电话、电子邮箱
•在地图上标注学校位置
四、技术实现
本网站采用HTML语言编写，结合CSS进行样式设计，优化页面布局。
同时，利用JavaScript进行交互设计，使得网站内容更加生动。
五、页面展示效果
设计的网页简洁清晰，色彩搭配和谐，页面布局合理，用户友好，提升了用户体验感。
六、总结与展望
通过本次HTML学校设计报告，我们意识到网站设计的重要性，这是学校与师生、家长、社会互动的窗口。
未来，我们将进一步完善网站功能，提高用户体验，做出一个更加优质的网站。
以上是本次HTML学校设计报告的详细内容，谢谢阅读。
HTML实验报告
按照属性的作用，可以大致将属性分为以下几类：
表现属性：用来控制页面内容的表现效果，如高度、宽度、边框等。
事件属性：用来添加行为，一般要结合JavaScript来实现，如onmouseover、onclick等。
标记属性：用来标记某个标签，如id、name等。
级联样式属性：是指使用级联样式表，如style、class等。
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<title>元素是用来定义文档的标题。
<body>元素定义文档的主体。body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
点击链接可以从一张页面跳转到另一张页面。
几乎可以在所有的网页中找到链接。
（二）
（
（）
实验报告成绩（百分制）__________实验指导教师签字：__________
武夷学院实验报告
课程名称：电子商务网站设计与开发_ 项目名称：_基于HTML的网页设计
前端开发技术实验报告(3篇)
第1篇一、实验目的本次实验旨在通过实际操作，加深对前端开发技术的理解，掌握HTML、CSS和JavaScript等基本技能，提高页面布局、交互设计和响应式开发的能力。
通过实验，我将学会使用现代前端框架（如Bootstrap、Vue.js等）进行快速开发，并了解前端性能优化的基本方法。
二、实验内容1. HTML基础- 创建一个简单的HTML页面，包含标题、段落、列表、图片和链接等元素。
- 使用HTML5的语义化标签，如`<header>`, `<footer>`, `<nav>`,`<article>`等。
2. CSS基础- 编写CSS样式，实现页面的基本布局，包括头部、导航栏、内容区域和尾部。
- 使用伪类选择器（如`:hover`）、伪元素选择器（如`:before`, `:after`）和属性选择器。
- 实现响应式设计，使页面在不同设备上都能良好展示。
3. JavaScript基础- 使用JavaScript编写简单的交互功能，如按钮点击事件、表单验证等。
- 学习DOM操作，实现动态内容更新和页面元素控制。
- 使用原生JavaScript实现简单的动画效果。
4. 现代前端框架- 使用Bootstrap框架进行页面快速开发，实现响应式布局和组件复用。
- 学习Vue.js框架，掌握组件化开发，实现数据绑定和条件渲染。
5. 前端性能优化- 学习浏览器缓存机制，优化静态资源加载。
- 使用代码压缩和合并工具，减少页面加载时间。
- 利用懒加载技术，优化图片和资源的加载。
三、实验步骤1. HTML页面搭建- 创建一个名为`index.html`的文件，并添加基本的结构和内容。
- 使用HTML5语义化标签，使页面结构更加清晰。
2. CSS样式编写- 在`index.html`文件中添加`<style>`标签，编写CSS样式。
- 使用媒体查询实现响应式设计，确保页面在不同设备上都能正常显示。
html课内实验报告
（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．对设计及调试过程的心得体会。
看着好像特别简单, 只是拖拖拽拽, 可是到了自己真正的动手起来, 就没那么简单了。
归根结底, 还是自己眼高手低, 不够细心。
六. 附录: 源代码（电子版）。
html设计实验报告
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网页设计实验报告
实验目的：
通过本次实验，掌握HTML基本标签的使用方法，并能够运用所学知识设计一个简单的网页。
实验步骤：
1. 下载安装HTML编辑器
2. 设计网页结构，包括标题、导航栏、内容区域等
3. 插入文字、图片、链接等元素
4. 优化网页排版和样式
实验成果：
经过不断的实验设计和排版调整，我完成了一个简单而实用的
网页设计。
整个网页结构明确、内容丰富，符合大众化的视觉风格，同时也充分体现了网页设计的个性和创新。
实验体会：
通过本次实验，我深刻认识到了HTML网页设计的重要性和实用性。
在今天的知识经济时代，网络已经成为我们的生活和工作
中不可或缺的一部分，而在网络世界中，如何利用网页设计和实
现信息传递和交流显得尤为重要。
所以，掌握HTML网页设计技
能不仅可以丰富我们的知识储备和实践能力，还可以为我们今后
的职业生涯打下坚实的基础。
总结：
通过本次实验，我对HTML网页设计技术的应用有了初步认识，也进一步了解到了HTML网页设计的一些基本知识和实用技巧。
我相信，在今后的学习和实践中，我会不断地扩展和深化我的HTML网页设计技术，为我今后的职业生涯发展打下坚实的基础。
1、HTML基本标签实验报告
</head>
<body>
<h1>商品信息</h1>
<h2>产品类别</h2>
<hr/>
<ul>
<li>数码
<ul>
<li>笔记本</li>
<li>手机</li>
<li>家电</li>
</ul>
</li>
<li>美容</li>
<li>服装</li>
<head>
<title>郭敬添--唐诗三百首</title>
</head>
<body>
<h1>唐诗三百首</h1>
<hr />
<h2>目录</h2>
<p>第一首;静夜思</p>
<p>第二首;忆江南</p>
<p>第三首;长恨歌</p>
<hr /><h3>静夜思</h3>
<p>作者;李白</p>
<p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
20120220专业名称网络系统管理班级名称11网络系统管理301课程名称web客户端技术指导教师实验名称html基本标签实验目的使用html的基本结构创建网页使用图像标签实现图文并茂的页面实验内容描述行级标签实验方法基本块级标签11代码vdoctypehtmlpublicw3cdtdxhtml10transitialenxhtml1dtdxhtml1transitionaldtdhtmlheadtitle郭敬添唐诗二百首titleheadbodyh1唐诗二百首h1hrh2目录h2p第一首
html实验报告模板
html实验报告模板<html><head><title>实验报告</title><style>body {font-family: Arial, sans-serif;margin: 20px;}h1 {text-align: center;font-size: 24px;margin-bottom: 30px;}h2 {font-size: 20px;margin-bottom: 20px;}p {margin-bottom: 10px;}table {width: 100%;border-collapse: collapse;}table, th, td {border: 1px solid black;padding: 5px;}th {background-color: #CCC;}</style></head><body><h1>实验报告</h1><h2>实验介绍</h2><p>在这里写入实验的背景和目的。
</p><h2>实验步骤</h2><ol><li>第一步：</li><p>描述第一步的操作步骤。
</p><li>第二步：</li><p>描述第二步的操作步骤。
</p><li>第三步：</li><p>描述第三步的操作步骤。
</p></ol><h2>实验结果</h2><p>在这里插入实验结果的描述。
</p><h2>实验数据</h2><table><tr><th>实验参数</th><th>数值</th></tr><tr><td>参数1</td><td>数值1</td></tr><tr><td>参数2</td><td>数值2</td></tr></table><h2>实验结论</h2><p>在这里写入实验的结论。
熟悉html (实验报告)
实验一熟悉HTML语言
学号 201114004 姓名王渝迪专业计算机科学与技术成绩
【实验目的】
掌握HTML的基本内容。
【实验内容】
1、熟悉Dreamweaver软件的环境；
2、掌握HTML语言；
3、独立完成一个HTML作品。
【实验步骤】
打开Dreamweaver，新建一个站点来存放自己制作的东西。
新建一个HTML文件，熟悉HTML的代码。
了解HTMl语言编写的格式。
<html>和</html>中是网页的主代码，<head>和</head>中放一些网页的相关信息，<title>和</title>中放网页的文字，<body>和</body>中放网页的正文部分，如文字、图片和表格等等。
可以根据自己的需要在代码段中增加相应的代码来实现自己的目的，也可以直接通过直接添加，然后在代码段自动生成相应的代码，如直接插入图片，表格。
【实验结果】
【实验心得和体会】
第一次接触关于网页制作的实验，原本我认为网页制作很困难，但是现在自己能够制作简单的网页了。
通过这次实验，我了解了关于网页制作的一些基本html语句，和html语句的使用方法。
希望自己能够多练习，熟练掌握html语句。
HTML影院网页设计实验报告
XX大学《Web开发概述(HTML)》实验报告学院：计算机与信息科学学院专业：班级：姓名:学号：实验报告 1二、首页底部链接在首页底部加了两个<a>,做了“重庆北碚UME影城”和“观影指南”的链接。
三、内容介绍页面点击海报后可跳转至相应内容介绍页面。
排版交给CSS。
涵盖了电影海报、文字剧情简介、和排片时间及影票价格、对应影厅等相关信息。
排片时间采用表格完成。
内容介绍页面典型代码（信条）：四、页面底部北碚UME影城链接链接到时光网的UME影城页面。
链接代码在上文首页代码截图中已体现。
五、观影指南实验要求中有列表，但是出于美观和贴近实际应用场景的考虑，在首页和内容介绍页面中都没有用到。
为了弥补这个缺憾。
我运用列表，写了一个“观影指南”页面，里面主要讲的是文明观影的倡议，也在首页底部有链接。
观影指南代码：六、风格设计我用了link以调用外部css。
我写的每一个页面都共享这个styles.css。
设置了一系列class id 父子选择器后代选择器等以精确作用。
Styles.css典型代码：本周还没开始讲CSS，但我还是超前自学了。
迟早得用的。
七、首页进一步美化：做完后，发现背景很白，并没有逼真感。
因而我决定用背景图片：但是不是background-image,而是直接用一个</img> 并且设置了z-index:-1显示在所有其他内容的下面：设置了长宽均为100%，以撑满整个屏幕。
八：分页面进一步美化白底不好看因此我打算采用背景色渐变并且是斜对角线上的渐变实现了从左下到右上，从黄到紫的渐变。
八、最后，还没有加视频：预加载，并设置controls，用户可以控制开始暂停，并设置封面图片Css:用绝对定位定位。
将bottom设置为负值，以免重叠影响美观。
四、实验结果：（截图及网页运行效果说明）对于非直观的运行效果，在上文“过程”部分已具体说明首页美化后：分页面美化后：好看了许多。
视频部分：成功播放，效果不错！五、实验分析总结：（通过本次实验，遇到什么问题，解决过程及解决方法）问题有一大类，共2小类将与原因和解决过程一并陈述大类：排版问题小类1：我的问题。
html制作京东秒杀卡片实验报告
html制作京东秒杀卡片实验报告一、实验目的本次实验的主要目的是掌握HTML语言的基本语法和标签，学会使用HTML制作京东秒杀卡片。
二、实验步骤1. 编写HTML代码首先，我们需要打开一个文本编辑器，比如Notepad++，然后新建一个HTML文件。
接下来，我们可以开始编写HTML代码了。
2. 设计页面结构在编写代码之前，我们需要先设计页面结构。
根据京东秒杀卡片的特点，我们可以将页面分为三个部分：头部、主体和尾部。
3. 编写头部代码头部通常包括网站logo、导航栏等内容。
在这里，我们可以加入京东logo和一个简单的导航栏。
4. 编写主体代码主体是整个页面最重要的部分。
在这里，我们需要展示秒杀商品的图片、价格和购买链接等信息。
同时，为了美观和易于阅读，在这里也可以加入一些样式。
5. 编写尾部代码尾部通常包括网站版权信息、联系方式等内容。
在这里，我们可以加入一些简单的版权声明和联系方式。
6. 测试页面效果完成以上步骤后，我们就可以通过浏览器来测试页面效果了。
如果发现有错误或不满意之处，则需要对代码进行修改。
三、实验结果经过以上步骤的操作，我们成功地制作出了一个简单的京东秒杀卡片。
页面结构清晰，样式简洁美观，符合京东风格。
四、实验总结通过本次实验，我们掌握了HTML语言的基本语法和标签，并学会了使用HTML制作京东秒杀卡片。
在实践中，我们也发现了很多需要改进的地方。
比如说，在编写代码时需要注意标签的嵌套顺序和属性的使用方法等。
同时，在设计页面结构和样式时也需要考虑到用户体验和美观性等方面。
总之，本次实验是一次很好的学习机会。
通过不断地练习和实践，相信我们可以越来越熟练地掌握HTML语言，并创造出更加优秀的网页设计作品。
2025年Html设计实验报告
山东信息职业技术学院《网页设计》试验汇报（—第二学期）班级：姓名：学号：指导老师：试验一认识Dreamweaver CS3一、试验目的1、熟悉Dreamweaver CS3环境。
2、理解HTML文献构造。
二、试验环境计算机三、试验内容创立站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创立。
无论哪种方式，都要事先在当地磁盘上建立一种用来寄存站点的文献夹，这个文献夹就是当地站点的根目录。
下面简介一下这两种方式的详细操作环节。
1．使用向导建立站点使用向导建立站点的环节如下：（1）打开建立站点向导的措施有3种。
①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义為”对话框，在“您打算為您的站点起什么名字”文本框中输入站点名字，如travel。
若已申請域名则可以在“您的站点的HTTP地址（URL）是什么”文本框中填入申請的域名地址。
如图所示。
设置站点名和URL地址（3）单击“下一步”按钮，问询与否使用服务器技术，如图所示。
若是静态站点则选中“否，我不想使用服务器技术”单项选择按钮，若是动态站点可以深入设置使用哪一种服务器技术。
选择与否使用服务器技术（4）单击“下一步”按钮，在“您将把文献存储在计算机上的什么位置”文本框中直接输入站点根目录的途径，或者单击“浏览”按钮，选择文献夹目录。
（5）单击“下一步”按钮，在“您怎样连接到远程服务器”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总結信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完毕”按钮。
Html设计实验报告分析
《网页设计》实验报告（2010—2011学年第二学期）班级：姓名：学号：指导老师：实验一认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。
2、了解HTML文件结构。
二、实验环境计算机三、实验内容创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。
无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。
下面介绍一下这两种方式的具体操作步骤。
1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。
①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字？”文本框中输入站点名字，如travel。
若已申请域名则可以在“您的站点的HTTP地址（URL）是什么？”文本框中填入申请的域名地址。
如图所示。
设置站点名和URL地址（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。
若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。
选择是否使用服务器技术（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置？”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。
（5）单击“下一步”按钮，在“您如何连接到远程服务器？”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。
编辑网页元素实验报告(3篇)
一、实验目的1. 掌握HTML和CSS的基本语法和用法。
2. 学会使用HTML和CSS创建和编辑网页元素。
3. 提高网页设计与制作的实践能力。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 编辑器：Sublime Text4. 开发工具：Visual Studio Code三、实验内容本次实验主要涉及以下内容：1. HTML基础元素2. CSS样式设置3. 网页布局4. 响应式设计四、实验步骤1. 创建HTML文档（1）打开Sublime Text或Visual Studio Code，创建一个名为“index.html”的文件。
（2）输入以下代码，保存并关闭文件：```html<!DOCTYPE html><html><title>编辑网页元素实验</title><link rel="stylesheet" type="text/css" href="style.css"> </head><body><h1>欢迎来到我的网页</h1><p>这是一个段落。
</p><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul></body></html>```2. 创建CSS文件（1）在同一个目录下创建一个名为“style.css”的文件。
（2）输入以下代码，保存并关闭文件：```cssbody {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: f4f4f4;}h1 {text-align: center;margin-top: 50px;color: 333;}p {text-align: center;margin-top: 20px;color: 666;}ul {list-style-type: none;text-align: center;}li {display: inline-block;margin-right: 10px;}```3. 查看实验结果（1）打开Chrome浏览器，输入文件所在目录的URL（例如：file:///C:/Users/yourname/Desktop/index.html）。
html,css,js实验报告总结
HTML、CSS和JavaScript实验报告总结在过去的一段时间里，我完成了对HTML、CSS和JavaScript的学习和实践，现在我将对此进行总结。
一、实验内容1. HTML基础：学习了HTML的基本结构，包括元素、属性、标签等。
通过编写简单的网页，我掌握了如何使用HTML构建网页的基本框架。
2. CSS样式：学习了CSS的基本语法和选择器、属性等。
通过为HTML元素添加CSS样式，我掌握了如何美化网页的外观。
3. JavaScript交互：学习了JavaScript的基本语法、事件、函数等。
通过在网页中添加交互功能，我掌握了如何让网页更加生动有趣。
二、实验成果1. 掌握了HTML、CSS和JavaScript的基础知识，能够熟练地使用它们构建网页。
2. 完成了多个实验项目，包括简单的网页、带有交互功能的网页等，能够灵活运用所学知识。
3. 通过实践，提高了自己的编码能力和解决问题的能力。
4. 学会了如何使用工具和资源来辅助学习，如浏览器开发者工具、在线教程等。
三、实验感受1. 实践是最好的老师：通过实践，我深刻体会到了HTML、CSS和JavaScript的魅力，也发现了自己在学习中的不足之处，需要进一步加强学习。
2. 团队合作的重要性：在实验过程中，与同学一起合作完成项目，让我学会了如何与他人协作，也提高了自己的沟通能力和组织能力。
3. 遇到问题不要怕：在实践中遇到问题是很正常的，不要害怕，要勇于面对并寻找解决问题的方法。
通过解决问题，可以加深对知识点的理解。
四、未来计划1. 加强学习：继续深入学习HTML、CSS和JavaScript，了解更多的进阶知识和技巧。
2. 实践项目：尝试更多的实践项目，提高自己的编码能力和解决问题的能力。
3. 探索新技术：关注前端领域的最新动态和技术趋势，学习并尝试使用新的技术和工具。
4. 分享经验：将自己在实践中的经验和心得分享给其他同学或朋友，帮助他人也提升自己。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
山东信息职业技术学院《网页设计》实验报告（2010—2011学年第二学期）班级：姓名：学号：指导老师：实验一认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。
2、了解HTML文件结构。
二、实验环境计算机三、实验内容创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。
无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。
下面介绍一下这两种方式的具体操作步骤。
1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。
①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字”文本框中输入站点名字，如travel。
若已申请域名则可以在“您的站点的HTTP地址（URL）是什么”文本框中填入申请的域名地址。
如图所示。
设置站点名和URL地址（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。
若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。
选择是否使用服务器技术（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。
（5）单击“下一步”按钮，在“您如何连接到远程服务器”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。
站点创建完成后将在“文件”面板中显示出站点的结构和文件。
2．使用高级设置建立站点使用高级设置建立站点的第一步同前，在如图所示的“站点定义为”对话框中切换到“高级”选项卡，如图所示。
在左边的分类中选择“本地信息”选项，然后分别设置“站点名称”、“本地根文件夹”、“默认图像文件夹”、“HTTP地址”等信息。
若有需要还可以在左边的分类中选择其他项目进行设置，完成以后单击“确定”按钮，即可创建站点。
对于已经创建好的站点，可以执行编辑、复制、删除、导出和导入等操作。
1．编辑站点如果要重新设置站点的属性，可以执行以下步骤：（1）单击“站点”→“管理站点”选项。
（2）从站点列表中选择要编辑的站点名称，单击“编辑”按钮。
可以参考前面创建站点的方法重新设置站点属性。
（3）编辑完毕后，单击“确定”按钮，返回到“管理站点”对话框，单击“完成”按钮。
2．复制站点如果要创建多个结构相同或相似的站点，可以利用站点的复制功能，具体步骤如下：（1）单击“站点”→“管理站点”选项。
（2）从列表中选择要复制的站点名称，单击“复制”按钮。
（3）若要对复制的站点进行编辑，可以从站点列表中选中新复制的站点，单击“编辑”按钮，编辑完成返回到“管理站点”对话框，单击“完成”按钮。
3．删除站点如果某个站点在Dreamweaver中不再需要编辑了可以删除该站点，具体步骤如下：（1）单击“站点”→“管理站点”选项。
（2）从列表中选择要删除的站点名称，单击“删除”按钮。
（3）在弹出的提示对话框中，单击“是”按钮，即可删除选定的站点。
四、实验要求1、认真预习，写出操作步骤。
2、遵守机房纪录，填好设备档案。
3、认真写实验总结，实验步骤。
五、实验总结Dreamweaver CS3创建网站的步骤实验二网页基础练习一、实验目的1、掌握html文件的基本结构2、熟练使用head元素、body元素的各个属性二、实验环境计算机三、实验内容1、打开“记事本”，输入课本P5图所示代码，保存为以.htm或.html为扩展名的web 文件，双击该文件，观察显示效果。
（注意标题栏的显示内容和正文部分的对齐方式）2、启动Dreamweaver CS3,切换到HTML视图下,完成课本第一章中出现的所有HTML 源文件,然后切换到预览视图下观察效果。
3、练习使用向导建立本地站点；练习在“文件”面板中新建目录及文件的操作。
完成第一章中的练习2和练习34、登录网站,单击申请空间链接，按其要求认真填写相关注册信息，完成个人免费空间的申请。
（记住自己申请成功的用户名和密码）并利用ftp工具上传所做网页，然后进行测试。
四、实验要求1、认真预习，写出操作步骤。
2、遵守机房纪录，填好设备档案。
3、认真写实验总结，实验步骤。
五、实验总结1、HTML文件的基本结构是2、如何通过HTML代码实现设置网页的背景颜色实验三文本格式练习一、实验目的1、掌握html文件的基本结构2、熟练使用P、BR、HR、Hn等标记符的基本用法3、掌握align属性的用法4、掌握font标记符的用法二、实验环境计算机三、实验内容1、练习在Dreamweaver CS3中新建网页、打开网页、预览网页以及保存网页的方法2、练习文字的输入，普通文字的输入，特殊文字的输入并写出其过程。
3、练习标题的设置，文字字体、颜色、样式、对齐的设置。
将网页中文本的标题、作者、正文设置为不同的字体、大小，使其看起来具有层次感；设置所有文本居中对齐，使其看起来更加美观。
效果如图四、实验步骤3、主要操作步骤如下：（1）启动Dreamweaver，单击“标准”工具栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。
（2）单击“修改”→“页面属性”命令，弹出“页面属性”对话框，在“分类”下拉列表中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置背景图片，单击“确定”按钮。
（3）在文档中输入如图1-1所示的文本。
（4）选中标题“偶遇”，在“属性”面板的“字体”下拉列表框中选择“黑体”选项，在“大小”下拉列表框中选择36，效果如图1-2所示。
图1-1 输入文本图1-2设置标题格式（5）将标题下“徐志摩”文本的字体设置为隶书，大小为18磅，如图1-3所示。
（6）选中正文文本，将其字体设置为幼圆，大小为16磅，如图1-4所示。
图1-3设置文本图1-4 设置正文文本（7）选中所有文本后在属性面板中单击“居中对齐”按钮使其居中，然后单击“颜色”按钮，在打开的“颜色”面板中选择深蓝色。
（8）保存文件，选择“文件”→“在浏览器中预览”→IExplore命令对网页进行预览，最终的效果如图所示。
五、实验要求1、认真预习，写出操作步骤。
2、遵守机房纪录，填好设备档案。
3、认真写实验总结，实验步骤。
六、实验总结1、在网页中如何输入多个空格2、<P>标记与<br>标记的区别是什么3、align属性的属性值有哪几个这个属性可用于哪几个标记实验四列表制作一、实验目的：1．掌握列表创建的基本操作。
2．掌握列表标记的应用。
3．熟悉嵌套列表的代码实现。
二、实验环境计算机三、实验内容1、在“记事本”中用HTML语言编写符合以下要求的标题为“网页制作练习”；浏览器窗口用户区内有两行内容：第一行：“欢迎来到web世界!”第二行：“网上生活从此开始！”（换行使用<br>标记）2、将复制一份取名为,并为这个网页设置背景色或是背景图片（使背景有水印效果），设置页面文字的颜色为紫色，在浏览器中浏览这两个文档。
3、对添加标题，存为第一行以四级标题（<h4>）显示：“欢迎来到web世界！”第二行以一级标题(<h1>)显示：“网上生活从这里开始！”最后插入一条水平线。
(<hr>)4、对进行如下修改，存为.在文档最后加入一行：“欢迎访问我做的第一个网页”，当浏览者单击“第一个网页”时，可打开网页5、对进行如下修改：在文档最后加入一行：“返回”二字当浏览者单击“返回”时，可返回网页6、在网站文件夹下，建立一个子页，标题为“列表练习”，在网页中使用列表进行嵌套列表的制作。
效果所下图示：Ⅰ引言Ⅱ第一部分A.说明B.例子●案例1●案例2Ⅲ第二部分Ⅳ总结四、实验要求1、认真预习，写出操作步骤。
2、遵守机房纪录，填好设备档案。
3、认真写实验总结，实验步骤。
五、实验总结1、第四题创建嵌套列表的html代码2、写出下面各种水平线效果的html代码1)默认水平线2)粗为 5 像素的水平线3)长度为100像素的水平线4)长度为屏幕宽度 50% 的水平线5)粗为 5 像素的实心水平线6)红色的水平线实验五图像和超链接的应用一、实验目的1、熟悉Dreamweaver CS3的编辑环境。
2、掌握如何向文档中添加图像和多媒体元素。
3、熟悉图像相关属性的设置。
二、实验环境计算机三、实验内容1、练习在网页中插入图像，并且设置图像与文本的环绕，创建网页保存为2、制作周庄网页：内容要求（1）练习在“周庄”网页中添加图像；（2）练习原始图像和鼠标经过图像的添加；（3）使用表格对页面进行布局。
图1 “周庄”页面3、课本P34页图4、课本P36页图5、创建热区超链接，效果图如下：四、实验步骤2、主要操作步骤如下：（1）启动Dreamweaver，单击“标准”工具栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。
（2）单击“修改”→“页面属性”命令，弹出“页面属性”对话框，在“分类”下拉列表中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置为，单击“确定”按钮。
（3）单击“插入”→“表格”命令，弹出“表格”对话框，在“表格大小”选项组设置“行数”为2和“列数”为3，创建一个2行3列的表格，在“表格属性”面板中设置表格为“居中对齐”方式。
（4）选中表格第一行的所有单元格，在“表格属性”面板中单击“合并所选单元格，使用跨度”按钮。
效果如图2所示。
（5）在窗口中编辑页面，插入文本并设置文本格式，如图3所示。
（6）将光标插入点定位到文本下方，选择“插入”→“图像对象”→“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框。
（7）单击“原始图像”文本框后的“浏览”按钮，在打开的对话框中选择图像文件作为原始图像，用同样的方法选择图像文件作为鼠标经过图像。
图2 建立页面布局图3 编辑页面文本（8）设置后的“插入鼠标经过图像”对话框如图4所示，单击“确定”按钮关闭对话框。
图4 “插入鼠标经过图像”对话框（9）将光标插入点定位到左侧表格中，选择“插入”→“图像”命令，打开“选择图像源文件”对话框，在其中选择图像文件，单击“确定”按钮完成图像的添加。
（10）用同样的方法在相应的的位置插入图像。