工作报告之html网页制作实验报告
使用html编制网页(实验报告)
实验三使用HTML语言编制网页
学号 201114004 姓名王渝迪专业计算机科学与技术成绩
【实验目的】
使用HTML语言编制网页。
【实验内容】
1、熟悉Dreamweaver软件的环境；
2、掌握HTML语言；
3、独立完成一个HTML网页。
【实验步骤】
1，新建一个HTML文件，插入一个的表格，按照自己的设计对表格进行合并以及尺寸的修改，如进行单元格的合并。
2，按照自己的设计，在表格的相应位置插入图片，并根据表格的大小，适当的调整图片的比例，使图片和表格比例和谐。
3，在代码段中插入文字，使之显示在网页中，并根据表格的大小，适当调整文字，并对文字进行设置，达到自己想要的效果。
4，制作链接。
给一张图片添加连接。
【实验结果】
【实验心得和体会】
本次试验用上次试验的一部分代码。
然后增加了给一个图片添加超链接的功能。
用<h1>标签来定义一个标题。
用<P>标签来定义一段文字。
工作报告之html程序设计实验报告
html程序设计实验报告【篇一：html设计实验报告】《网页设计》实验报告（2010—2011学年第二学期）班级：姓名：学号：指导老师：实验一认识dreamweaver cs31、熟悉dreamweaver cs3环境。
2、了解html文件结构。
二、实验环境计算机三、实验内容创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。
无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。
下面介绍一下这两种方式的具体操作步骤。
1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。
①在进入dreamweaver的起始页界面中选择“新建”→“dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字？”文本框中输入站点名字，如travel。
若已申请域名则可以在“您的站点的http地址（url）是什么？”文本框中填入申请的域名地址。
如图所示。
设置站点名和url地址（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。
若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。
选择是否使用服务器技术（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置？”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。
（5）单击“下一步”按钮，在“您如何连接到远程服务器？”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。
html实训报告模板
html实训报告模板一、实训目标本次HTML实训旨在使学生掌握HTML基本语法和标签，能够独立完成简单的网页制作。
通过实训，学生将熟悉HTML文档结构，掌握常见HTML标签的使用，并培养解决实际问题的能力。
二、实训内容1. HTML基本语法和文档结构2. 文本格式化标签（如：<h1>、<p>、<span>等）3. lian接标签（如：<a>）4. 图像标签（如：<img>）form>、<input>等）7. CSS样式表基础三、实训过程1. 教师讲解HTML基本语法和文档结构，使学生对HTML有个初步的了解。
2. 学生练习编写简单的HTML文档，熟悉常见的HTML标签。
3. 教师演示如何使用CSS样式表对网页进行美化，并让学生进行实践。
4. 学生分组完成一个简单的网页制作任务，要求包含文本、lian接、图像、表格和表单等元素。
5. 学生提交作品，教师进行点评和指导。
四、实训总结通过本次实训，学生对HTML有了更深入的了解，掌握了HTML的基本语法和标签。
同时，学生在实践中也发现了自己的不足之处，如标签使用不熟练、网页布局不美观等。
针对这些问题，学生应加强实践，不断巩固所学知识，提高自己的网页制作水平。
在未来的工作中，学生可以利用所学的HTML知识制作出更好的网页，为公司或个人带来更好的展示效果。
五、实训心得体会在这次HTML实训中，我收获颇丰。
首先，我掌握了HTML的基本语法和标签，能够独立完成简单的网页制作。
在实践中，我学会了如何使用文本、lian接、图像、表格和表单等元素，使得网页内容更加丰富和交互性更强。
其次，通过实训，我认识到网页制作不仅仅是将内容呈现出来，还需要考虑用户体验和美观度。
因此，我在实践中不断尝试使用CSS样式表对网页进行美化，使网页布局更加合理、视觉效果更加舒适。
此外，在实训过程中，我也遇到了很多问题。
网页制作实验报告
网页制作实验报告一、实验目的。
本实验旨在通过实际操作，掌握网页制作的基本原理和技术，了解网页设计的基本要求和规范，培养对网页设计的兴趣和能力。
二、实验内容。
1. 学习HTML和CSS基础知识；2. 制作一个简单的静态网页，包括文本、图片和超链接等元素；3. 掌握网页布局和样式设计的基本方法。
三、实验步骤。
1. 学习HTML和CSS基础知识。
在实验开始前，我首先对HTML和CSS进行了系统的学习。
HTML是网页的标准标记语言，用于建立网页的结构；而CSS是层叠样式表，用于控制网页的样式和布局。
通过学习这两门技术，我对网页制作有了更深入的理解。
2. 制作一个简单的静态网页。
接下来，我开始动手制作一个简单的静态网页。
首先，我创建了一个HTML文件，并在其中编写了网页的基本结构，包括头部、导航栏、内容区和底部等部分。
然后，我利用CSS对网页进行了样式设计，包括字体、颜色、边框等样式的设置。
同时，我还插入了一些图片和超链接，丰富了网页的内容。
3. 掌握网页布局和样式设计的基本方法。
在制作网页的过程中，我深入学习了网页布局和样式设计的基本方法。
通过调整CSS样式表中的参数，我改变了网页的布局和样式，使其更加美观和易于阅读。
同时，我还学会了如何使用浮动、定位和响应式布局等技术，使网页在不同设备上都能够正常显示。
四、实验总结。
通过本次实验，我深入了解了网页制作的基本原理和技术，掌握了HTML和CSS的基础知识，学会了制作简单的静态网页，并掌握了网页布局和样式设计的基本方法。
这些知识和技能对我今后的学习和工作都具有重要的意义，我会继续努力学习，提高自己的网页制作能力。
五、实验感想。
网页制作是一门非常有趣和实用的技术，通过本次实验，我对网页制作有了更深入的了解，也增强了对这门技术的兴趣。
我相信，在今后的学习和工作中，我会继续深入学习网页制作技术，不断提高自己的能力，为将来的发展打下坚实的基础。
六、参考资料。
1. 《HTML5权威指南》。
网页制作实验报告
网页制作实验报告一、实验目的本次网页制作实验的主要目的是通过实践操作，深入了解网页制作的流程和技术，掌握网页设计的基本原理和方法，提高自己的网页开发能力和创新思维。
二、实验环境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网页设计实验报告
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标记语言。
通过实践，我们深入了解了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、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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，寓意是我的梦游园。
色彩主页是以蓝色为主，强调梦感。
栏目分为主页，日志（我的印记），相册（美丽瞬间），个人档案（我的万花筒），心情（我的叨叨）和留言板（留言星星河）。
flash是自己修改的，花了一些力气。
这里强调一下目录下文件夹的分类，不能出现中文，不然会无法显示。
如图：主页面index.html,然后依次建立分页面。
step2：对网页设计框架，进行布局。
利用表格和框架。
主页这里的布局，我主要是使用的表格布局，嵌套使用了div+css样式。
在日志列表下面，因为主要框架相同，就可以避免重复。
部分演示如下：每个部分的框架，要设计好，不然很容易出现混乱的状况。
step3:使网站更加美观和多元化，使用了一些媒体元素和特效：? 插入了音乐embed src=music/norah jones - new yorkcity.mp3hidden=true/embed；? 插入flash导航，使用object classid=ccodebase=/pub/shockwave/c abs/flash/swflash.cab#version=7,0,19,0 width=837 height=312param name=movie value=flash/flash.swfparam name=quality value=highembed src=flash/flash.swf quality=highpluginspage=/go/getflashplayertype=application/x-shockwave-flash width=837height=312/embed/object? 使用文字特效和图片滚动。
利用的marquee behavior =“value” bgcolor=“color” direction =“value” height =“value” width =“value” loop =“value ” scrollamount =“value ” scrolldelay =“value” hspace=“value” vspace=“value”滚动文字/marquee。
子页面效果预览1. 留言板：运用了表单，按钮等元素。
设计》实训任报告安徽机电职业技术学院《html+css网站设计》课程实训说明书系（部）：信息工程系班级：姓名：指导教师：2012 ~ 2013摘要熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。
培养我们利用计算机进行商务网页设计的基本思路和应用开发能力，提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。
人们在这个不足0.1平米的空间内投资达数百万美元。
我们在老师的指导下学习了有关html的相关知识。
在这次html的实训中，我学会了有关html的更多的知识。
实训中我们用的dreamweaver工具开发网页。
在实训中了解到网页开发的时需要分析网页的实际需求，根据要求开发实际的网页。
网页的开发需要涉及到不止一种的开发工具，要用到的有ps或fw和flash工具的使用，还要用到的有ie等浏览器的调试帮助。
想要设计出美观新颖的浏览器需要的不知是止识还要有创新的思想。
关键词：主页需求分析设计网页制作软件目录第一章概述 ....................................................................................................... . (4)1.1 本课题研究现状 ....................................................................................................... . (4)1.2 本课题研究的意义 ....................................................................................................... (5)1.3 本课题研究内容 ....................................................................................................... . (5)第二章站点规划........................................................................................................ .. (6)第三章详细页面设计与制作 (6)1.1 资料搜集 ....................................................................................................... . (6)1.2网页的设计展示 ....................................................................................................... .. (6)1.3 网页设计说明 ....................................................................................................... .. (9)第四章总结 ....................................................................................................... ...................... 9 参考文献 ....................................................................................................... . (11)第一章概述1.1 本课题研究现状1、比起几年前现今优秀的网站作品已经很多了。
可行业现状依旧显得可悲不少网页设计师是用教条的、形式化的方式设计网页?作品也给人一种像是一个模子印出来的感觉甚至有些人因为使用了免费模版消化客户订单而自鸣得意。
当然?造成这种现状的原因是多方面的一种是部分设计师本人滥竽充数的行为造成的而更为普遍的原因是因为网页设计师的雇佣方造成的很多单位在招聘网站方面的员工时往往希望应聘人员什么技术都会。
如果要求美术设计师精通网页制作和动画设计技术是比较合理的要求。
然而却有很多企业抱着“程序设计人员精通美术设计”这样的愿望去招聘这就使得目前大部分网络公司都用程序员兼了网页设计一职。
同时也少有人分得清楚网页制作与网页设计的区别“工种不分家”使每个在网页设计岗位的设计者不仅仅要考虑到美术设计与制作方面同时还要兼顾信息结构的规划甚至网站建设的策划等工作。
这大大超出了网页设计师所应受理的职权范围然而这就是我们作为网页设计师所要面对的不足并且需要不断进取的方面。
2、网页设计出现的历史并不长在我国网页设计正处于方兴未艾的时期。
网页设计人员也是各大网络公司、设计公司争相礼聘的高级人才。
在网上随意浏览一下就可以发现许多关于网页设计的站点并且在数以万计的主页中也不乏精良之作可见我国的网页设计已经有了相当的基础。
但仍然可以看到许多网页设计人员并没有认识到技术与艺术结合的重要性或片面地理解了艺术设计的含义。
因此在网上看到更多的可能是布局千篇一律、色彩搭配混乱、版式繁杂纷乱、表面五光十色实则空洞无物的设计。
要解决这个问题提高网页设计的整体水平就需要设计师重视网页设计理解网页设计的内涵和特征并以此为基础进行创新性的工作。
迄今为止?我国对网页设计这一课题的系统研究还略显薄弱特别是在艺术设计领域对网页设计的探讨尤显不足至今未能提出系统的设计理论与指导原则。
对网页设计进行系统性的研究。
将视觉传达设计的基本原则创造性地应用于网页设计之中确实是当务之急也是促进我国网络业及网络文化发展的重要环节。
1.2 本课题研究的意义?1、如今的互联网已经渗透到我们生活中的各个层面。
网站内容既丰富又全面满足了各种不同需求的浏览者。
正当网络作为第四媒体逐渐走向成熟和完善的时候网页设计业也已逐步脱离了传统广告设计的范畴形成特殊而独立的体系。
同时这一现象也表明了我们对网页的视觉审美以及网站功能应用等多个方面的认知达到了新的高度。
网站是信息的储存空间，从理论上来说套用相同的模板只要保证浏览者能够获取信息网站的功能就实现了。
如同年以前的网页几乎是纯文字的页面没有什么所谓“设计”的概念可言。