html网页设计实训(一)
实验1 网页设计(HTML)实验指导1
实习一网页设计（HTML）一、实习目的1.了解HTML文档结构；2.初步掌握基本标记的使用；3.能够运用文本编辑器制作简单网页。
二、实习内容1.学习EditPlus文本编辑器的使用。
2.使用EditPlus制作只有一行文字的网页，了解HTML文档结构，并在IE浏览器中打开编写的网页文件，查看运行效果；3.在网页中添加多段文本内容，并对页面格式进行设置排版，制作一个简单文字内容的网页；4.在网页中添加图片，并对页面格式进行设置排版，制作一个简单图文内容的网页；5.制作一个索引网页，建立与前面网页之间的超连接；6.制作一个简单的个人主页。
三、预备知识1.网页的基本组成；2.HTML语言：常用HTML标记及其属性；标记作用常用属性Html 网页文件标记Body 页面标记bgcolor,background,textP 段落标记alignbr 换行标记H1～h6 标题标记alignHr 水平线标记size,width,colorFont 字体标记size,face,colorimg 图像标记Src,height,width,alt,aligna 超链接标记Href3.网页制作方法。
四、实习步骤1.学习EditPlus文本编辑器的使用打开EditPlus显示如图1-1界面，通过“文件”→“新建”→“html网页”新建一个页面，如图1-2所示。
在代码区中最外层是html标记，html标记中包含了head标记和body标记，实习中我们只改head标记中内嵌的title标记中的文本，制作页面的内容通过相关标记在body中标记。
在工具栏中分两行，第一行是编辑器的工具栏，第二行是快捷插入标记的工具栏。
现在鼠标分别停留在第二行的工具上，注意提示并记录，以备后用；特别强调颜色工具只是直观输入颜色编码（用在给颜色相关属性赋值中）。
图1-1 editplus界面图1-2 新建html 网页界面2.使用EditPlus制作一行文字的网页●使用EditPlus新建一个空白网页，观察网页的基本结构，了解基本结构所用标记的作用，保存文件，在IE浏览器中查看网页运行效果。
HTML实验报告
按照属性的作用，可以大致将属性分为以下几类：
表现属性：用来控制页面内容的表现效果，如高度、宽度、边框等。
事件属性：用来添加行为，一般要结合JavaScript来实现，如onmouseover、onclick等。
标记属性：用来标记某个标签，如id、name等。
级联样式属性：是指使用级联样式表，如style、class等。
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<title>元素是用来定义文档的标题。
<body>元素定义文档的主体。body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
点击链接可以从一张页面跳转到另一张页面。
几乎可以在所有的网页中找到链接。
（二）
（
（）
实验报告成绩（百分制）__________实验指导教师签字：__________
武夷学院实验报告
课程名称：电子商务网站设计与开发_ 项目名称：_基于HTML的网页设计
HTML静态网页设计实训
META 标签分两大部分： HTTP-EQUIV 和 NAME 变量。 ● meat 标签的 NAME 变量语法格式是： < META NAME=“xxx” CONTENT=“xxxxxxxxxxxxxx xxxx”> 其中 xxx 主要有下面几种参数： 1.Keywords( 关键字 ，用来告诉搜索引擎 你网页的关4;keywords" CONTENT="life , universe, mankind, plants, relationships, the meaning of life, science">
● HTTP-EQUIV 类似于 HTTP 的头部协议，它回应 给浏览器一些有用的信息，以帮助正确和精确 地显示网页内容。常用的 HTTP-EQUIV 类型有： 1、<meta http-equiv="Content-Type" content="text/html";charset=gb_2312-80"> 和 <meta http-equiv="Content-Language" contect=“zh-CN”>用以说明主页制作所使用的 文字以及语言； 又如英文是ISO-8859-1字符集，还有BIG5、 utf-8、shift-Jis、Euc、Koi8-2等字符集.
相对路径与绝对路径： my_site(root folder) support contents.html hours.html resources tips.html products catalog.html index.html(home page)
如果在hours.html文档中创建指向contents.html文档 的链接，可使用相对路径contents.html 如果在index.html文档中创建指向位于support目录中 的contents.html文档的链接，可使用相对路径： support/contents.html 如果在catalog.html文档中创建指向位于support目录 中的contents.html文档，可使用相对路 径：../support/contents.html 如果要在tips.html文档中创建指向catalog.html文档 的链接，可使用相对路 径：../../products/catalog.html 创建指向products目录下的catalog.html文档的链接， 可使用站点根目录相对路径： /products/catalog.html 创建指向主页的链接，站点根目录相对路径： /index.html
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网页设计实训心得体会（通用9篇）有了一些收获以后，可以记录在心得体会中，通过写心得体会，可以帮助我们总结积累经验。
那么你知道心得体会如何写吗？下面是小编为大家收集的html网页设计实训心得体会，欢迎大家借鉴与参考，希望对大家有所帮助。
html网页设计实训心得体会篇1转眼间，已到了期末，学习网页设计这门课程也要结束了，虽然时间有点短，但是学过这个几周以后我受益匪浅。
记得最初接触dreamweaver的时候，我很茫然，因为刚接触陌生的软件心里会很害怕跟不上老师的进程。
刚开始几节课，老师讲得比较基础，还能跟得上，渐渐的老师授课的进程开始加速，有些跟不上了，需要下课后自己补上，问老师和周围的同学。
渐渐的，在老师的悉心教导下，我们开始熟悉这个软件了。
老师布置的第一个任务，要求做一个自我形象网站。
由于学习的时间较短，老师只要求用PS做好模板即可，任务相对简单。
但也要求设计感强，色彩搭配和谐，并且尽可能的做成实用又符合实际的漂亮网页。
第二个网页设计老师要求相对较高，用dreamweaver做一个比较接近真实的网页，还要做一个二级页面。
于是开始收集各方面的资料。
确定了主题就开始布局了。
最开始使用了一个表格，然后在表格内进行拆分合并处理，接着就把通过ps处理出来一个版头并且把修改过大小的图片放进去了。
中间时预览，问题出现了，发现版头与下面的图片文字之间出现了很大的一段距离，但是在软件中已经把距离缩小为0了，多次尝试后没有效果。
最后想到可以另外再加一个表格，把版头放在一个表格内面，这样问题就解决了。
预览是效果还不错。
但是总觉得首页做得太普通，一次浏览学长做的网页时，觉得他们的文字滚动窗口做得效果做得不错，于是想借见一下。
就决定把自己网站的左边修改修改。
复制了他的代码，把上面的内容修改成我的`网站需要的文字。
本以为可以轻松的完成，但是却出现大问题了。
因为需要滚动的文字占的空间太大，把左边的那部分表格全部占满了，而在实际的网页预览中，这个有文字滚动的框只占了左边Oeasy教你玩转网页设计浏览的工具建站程序三分之一，左边有三分之二留白了。
网页制作实习报告(6篇范文)
网页制作实习报告（6篇范文）【导语】网页制作实习报告怎么写好？本文精选了6篇优秀的网页制作实习报告范文，都是标准的书写参考模板。
以下是小编为大家收集的网页制作实习报告，仅供参考，希望您能喜欢。
【第1篇】网页制作实习报告一实验过程1.资料的搜集。
2.熟悉制作软件。
3.构建站点框架。
打开dremweaver后第一步便是新建站点4设计主页及二级页面。
5实现网页间的链接链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。
6向静太网页插入动态效果具体情况如下：通过这半年的学习实践中和老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。
使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。
所以我结合所学专业的内容制作了个人网站，作为实习的成果。
其内容是多样化的。
制作网页用的软件是ｄreamweaver , banner软件。
dreamweaver大大加速了网络时代电子交易应用中的项目交付。
它提供了网页和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。
例如，网页上很流行的阴影和立体按纽等效果，只需单击一下就可以制作完成。
当然，其最方便之处是，它可以将图象切割，图象映射，悬停按纽，图象翻转等效果直接生成html代码，或者嵌入到现有的网页中，或者作为单独的网页出现。
主图是一个网页的门面，它能体现出这个网页的整体风格。
制作网页,首先是确定主题,经过再三考虑,就做了个关于中国的网站,平时也总是浏览类似的网站,对这些还有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单的中国介绍和相关的事迹网站,专门介绍一些即使用,又便宜的小秘笈。
于是网站主题确立。
然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，中国简介，中国历史，用户登录注册页面留言，再加入个别网站等，每一部分又分几小部分，内容比较充分，多样。
html网页设计实训心得
html网页设计实训心得html网页设计实训心得「篇一」利用假期和休息时间，初步学习了有关html+css的知识，感触颇多。
做网站原来一直处于一种茫然的状态，边学边做，边实践边维护，每每遇到问题了，便会花费很大的精力去解决，在解决问题的过程中也慢慢提高，但工作有时相当的吃力。
通过一段时间详细的接触到html+css，从基础知识补起，利用空闲时间看书及有关div+css“布局入门教程”，它通过举一个例子，然后让你上机测试效果，让我有对样式表CSS有一个初步的印象，知道了CSS能做什么。
我觉得这份教程很有条理，由浅入深，一步一步引领你向前走，让你明白他们在说什么。
在些之前，我是从未接触过div+css的，甚至连dreamwear、photoshop的工具也都是皮毛。
我的学习思路是这样的：一、先写HTML还是先写CSS？对于一个新手而言，在有了一点html知识之后，对于CSS、DIV都感觉特别的疑惑，不知道这其中到底是什么联系？为什么用了CSS的网页不能像其它代码一样直观？html和css哪个先写？其实这些问题在我看完教程，但还没真正上手实践时的疑惑！等真正上手自己做时，我才发现应该两者同时写！二、把站点建好，目录建好，比如建好文件夹css,images,这两个是最其本的，然后新建一个.html空文件，一个.css空样式表，把.css外部样式表连接到.html这个文件上，链接写在中。
三、写HTML中的最基本的布局部分，都是用DIV，然后直接在DIV里加入ID 或CLASS，这些布局部分包括外套部分，头部分，中间部分，左，中，右，版权部分等。
四、到样式表中写各个布局层的样式。
五、写一段代码后就进行浏览器的测试，同时用IE6与FF一起测试。
在浏览器中调试，调试时发现许多之前没有预料的问题，如浏览器的兼容问题、浮动的问题等。
六、不断的找出问题、理解怎么出错的，不断的再测试！这样的学习和研究过程，让我体验到了许多次的付出与回报的乐趣，如：第一：阅读一本书，一般来说我第一次要先把整个书通读一遍，不理解的也要往下看，因为在往下看的过程中也许会找到那个问题的答案，等看完后我会有一个大概的印象，但一定会有很多不明白的地方，没关系，继续往下看。
html实训报告内容
html实训报告内容一、实训目的本次HTML实训旨在通过实践操作，加深对HTML基础知识的理解和掌握，提高实际应用能力，为后续的网页设计和开发打下坚实的基础。
二、实训内容1.HTML基本结构在实训过程中，我们首先学习了HTML的基本结构，包括文档类型声明、HTML元素、头部元素和主体元素等。
通过编写简单的HTML 文档，我们熟悉了HTML的基本语法和结构。
2.HTML常用标签在掌握HTML基本结构的基础上，我们进一步学习了HTML常用的标签，如标题标签、段落标签、链接标签、图片标签等。
通过实例演示和实际操作，我们熟悉了这些标签的属性和用法，并能够根据实际需求进行灵活运用。
3.CSS样式在HTML实训中，我们还学习了CSS样式。
通过给HTML元素添加样式，我们可以实现网页的布局和美化。
我们学习了CSS选择器、盒模型、布局方式等基础知识，并通过实例演示了如何使用CSS样式来控制网页的外观和布局。
4.HTML与CSS的综合应用在掌握了HTML和CSS的基础知识后，我们进行了综合应用实践。
我们通过编写HTML文档，并使用CSS样式来控制文档的布局和外观。
在这个过程中，我们不仅加深了对HTML和CSS的理解，还提高了实际应用能力。
三、实训收获通过本次HTML实训，我们获得了以下收获：1.加深了对HTML基础知识的理解和掌握，熟悉了HTML的基本语法和结构。
2.熟悉了HTML常用的标签及其属性和用法，能够根据实际需求进行灵活运用。
3.掌握了CSS样式的基础知识，包括选择器、盒模型、布局方式等，能够使用CSS样式来控制网页的外观和布局。
4.通过综合应用实践，提高了实际应用能力，加深了对HTML和CSS的理解。
四、总结与展望通过本次HTML实训，我们不仅加深了对HTML基础知识的理解和掌握，还提高了实际应用能力。
在未来的学习和工作中，我们将继续努力学习和实践，不断提高自己的网页设计和开发能力。
同时，我们也期待在未来的学习和实践中，能够更加深入地了解和掌握HTML和相关技术的前沿动态和应用领域。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计实训（一）
实训目的：熟悉理论课程所讲的HTML文件的基本结构—标记概念及格式、标记属性、文档的基本结构及其标记的使用。
实训主题：学会使用基本标记和格式标记设计简单的网页。
实训内容：1、使用<body>标签设定网页；
2、使用<hr>标签进行画线；
3、块标记<div>\<span>的运用；
4、使用<marquee>标记制作跑马灯文字；
图表1
图表2
图表3
图表4
<html>
<head>
<title>**MARQUEE Tag**</title>
</head>
<body>
一<br>
<marquee height="60" width="600">欢迎光临我的网页！</marquee>
<br><br>
二<br>
<marquee behavior=alternate bgcolor="pink" width="300">欢迎光临我的网页！</marquee>
<br><br>
三<br>
<marquee behavior=scroll bgcolor="yellow">欢迎光临我的网页！
</marquee>
<br><br>
<marquee behavior=scroll bgcolor="#CCFFCC">欢迎光临我的网页！
</marquee>
<br><br>
四<br>
<marquee direction=left scrollamount="1">__@/`` 慢慢移动.</marquee> <br><br>
五<br>
<marquee direction=right scrollamount="25">..卡嗒.........卡嗒.....欢迎光临我的网页！</marquee>
<br><br>
六<br>
<marquee direction=up height="100">~m('.')m~ 在宽为100的限制内，向上运动. </marquee>
<br><br>
七<br>
<marquee direction=down height="100" style="border:1px dotted
#CC0066 ">~m(. .)m~在宽为100的限制内，向下运动. </marquee> <br><br>
八<br>
<marquee scrolldelay="100" loop="3" bgcolor="#FFCCFF"
direction=up >
<h2><font color="#993366">《沁园春·雪》</font></h2>
<p>北国风光，千里冰封，万里雪飘。
<br>望长城内外，惟馀莽莽；大河上下，顿失滔滔。
<br>山舞银蛇，原驰蜡象，欲与天公试比高。
<br>须晴日，看红妆素裹，分外妖娆。
<p>江山如此多娇，
<br>引无数英雄竞折腰。
<br>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
<br>一代天骄，成吉思汗，只识弯弓射大雕。
<br>俱往矣，数风流人物，还看今朝。
</marquee>
</body>
</html>。