实验1 网页设计(HTML)

合集下载

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

实验三使用HTML语言编制网页
学号 201114004 姓名王渝迪专业计算机科学与技术成绩
【实验目的】
使用HTML语言编制网页。

【实验内容】
1、熟悉Dreamweaver软件的环境；
2、掌握HTML语言；
3、独立完成一个HTML网页。

【实验步骤】
1，新建一个HTML文件，插入一个的表格，按照自己的设计对表格进行合并以及尺寸的修改，如进行单元格的合并。

2，按照自己的设计，在表格的相应位置插入图片，并根据表格的大小，适当的调整图片的比例，使图片和表格比例和谐。

3，在代码段中插入文字，使之显示在网页中，并根据表格的大小，适当调整文字，并对文字进行设置，达到自己想要的效果。

4，制作链接。

给一张图片添加连接。

【实验结果】
【实验心得和体会】
本次试验用上次试验的一部分代码。

然后增加了给一个图片添加超链接的功能。

用<h1>标签来定义一个标题。

用<P>标签来定义一段文字。

实验一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、设置文本“-百度快照-评价”为灰色、下划线的效果。

网页设计实验报告实验一

昆明理工大学信息工程与自动化学院学生实验报告（201 —201 学年第一学期）课程名称：Web设计技术开课实验室：年月日年级、专业、班学号姓名成绩实验项目名称网页设计简介、HTML基础介绍、文字与段落、列表指导教师教师评语教师签名：年月日注：报告内容按实验须知中七点要求进行。

一.打开记事本，编写第一个页面。

（1）打开记事本：单击“开始”→“程序”→“附件”→“记事本”。

（2）输入下面代码：<html><head><title>欢迎你! 我的朋友.</title><style type=“text/css”>hl{font-family：幼圆；font-size：x-large；color：red}</style></head><body><hl>当你进入HTML编程世界的时候，你的<br>感觉是全新的！</hl><script language="JavaScript">alert( "welcome! 朋友们" )</script></body></html>(3)单击“文件”→“选择”→“保存”菜单项，选择文件类型为“所有文件”，文件名输入“index.html”并选择文件保存地址（记住一定要把文件的后缀存为.html或.htm，否则网页无法显示）。

（4）用浏览器打开这个文件，看看效果吧！二．用HTML语言编写符合以下要求的文档：标题为“班级主页”，在浏览器窗口用户区显示“欢迎来到我们的班级主页”，完成后效果如图：代码：<html><head><title>班级主页</title></head><body><p>欢迎来到我们的班级主页</p></body></html>三．采用本章介绍的HTML标记完成如图所示的文字内容。

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的网页设计

HTML网页设计基础实验指导书2016

wordHTML网页设计根底实验指导书实验一网页设计根底与HTML根本标签【实验目的】1．掌握利用因特网进展信息游览、搜索，下载网页、图片、文字和文件；2．对给定的，能指出的结构、目录结构、页面布局方式；3．掌握HTML的根本标签<HTML><HEAD> <BODY><TITLE><META>标记；【实验环境】Window xp操作系统，机器联网。

【实验重点与难点】熟练使用浏览器进展浏览、搜索、下载。

【实验内容】1、根据制作的需要，从网上下载网页制作时需要的文字、小图片、动画与flash。

2、上网访问实际假如干，了解各的风格〔主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等〕、页面布局方式；在网上找出如下版面布局的结构形式：⑴“T〞结构布局⑵“口〞型〔“国〞字型〕布局⑷对称比照布局⑻海报型布局3、利用搜索引擎，浏览因特网上较为著名的5个，记录这些的名称、地址和以与相应的网页文件格式〔扩展名〕；4、查看我院主页的源代码，收藏到收藏夹中，将其设为主页，并指出该的结构、目录结构和页面布局方式。

5、构建HTML文档“我的第一个网页〞：〔1〕从开始菜单启动记事本；〔2〕在记事本中，录入一个HTML文档；〔3〕设置该文档在最终在浏览器中显示的标题为“我的第一个网页〞；〔4〕在页面添加可见的文本“我的第一个网页〞；〔5〕使用记事本的菜单“文件〞→“保存〞，在“另存为〞对话框中，在“保存类型〞下拉列表中选择“所有文件〞，录入“文件名〞myfirstpage.htm，单击“保存〞按钮将该页面保存到实验文件夹。

实验二 HTML文本格式的应用【实验目的】1．掌握使用<body>标记设置网页背景颜色和文本颜色。

学习使用分段标记<p></p>；2．掌握使用<font>标记设置文字的属性；3．掌握在网页中插入背景图片；4．掌握在网页中插入水平线，并设置水平线的属性；5．掌握在网页中插入背景音乐。

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

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

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

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

网页设计实验指导书

网页设计实验指导书经济与管理学院二零一二年二月实验一HTML标记的基本语法一、实验目的和要求1．熟悉HTML文件的编辑环境；2．掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。

3．学会使用HTML设计出文本与图像相结合的较为复杂的页面。

二、实验内容1、根据如表1-1所示的表格写出完整的HTML代码；其中，《网络原理》和《网页设计与制作》课程的详细说明文件分别为该网页所在目录的net.htm和web.htm，需要为表中的书名设置相应的超级链接，以便在点击后可跳转到相应的说明页上。

2、编写出实现如图1-1所示页面效果的关键html代码，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等（也可自行设计效果）。

图1-1 个人网站首页3、编写出实现如图1-2所示页面效果的关键html代码，其中各子项目都做了超链接，链接的目标文件自行指定。

图1-2 列表效果图三、实验步骤1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是rontPage/Dreamweaver 的代码窗口。

2．按各种不同标签的语法规则，输入合法的代码。

3．输入完成后保存代码文件，文件后缀为.htm/.html。

4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。

四、程序代码（在实验报告中写出）（1）<table width="500" border="1"><caption>课程表</caption><tr><td><div align="center">课号</div></td><td><div align="center">课程名</div></td><td><div align="center">学分</div></td></tr><tr><td><div align="center">1002201</div></td><td><div align="center"><u>《网络原理》</u></div></td><td><div align="center">6</div></td></tr><tr><td><div align="center">1003302</div></td><td><div align="center"><u>《网页设计与制作》</u></div></td><td><div align="center">5</div></td></tr><tr><td><div align="center">1003507</div></td><td><div align="center">《管理学原理》</div></td><td><div align="center">5</div></td></tr></table>2.还没弄3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"></style></head><body><ul><li><h1><span class="STYLE1">列表项目1</span></h1><ol><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul><ul><li><p class="STYLE4">列表项目2</p><ol><li class="STYLE5"> <a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE5"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul></body></html>五、实验心得体会主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。

实验一做一个简单的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所示。

Html设计实验报告

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

2、了解HTML文件结构。

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

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

下面介绍一下这两种方式的具体操作步骤。

1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。

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

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

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

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

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

如图所示。

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

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

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

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

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

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网页设计实验报告

天津理工大学实验报告学院（系）名称：管理学院<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的样式表，有两种方式：链接式、导入式。

网页设计实验报告范文

实验名称：网页设计基础实验实验时间：2021年X月X日实验地点：XX大学计算机实验室实验目的：1. 熟悉网页设计的基本工具和软件；2. 掌握HTML、CSS的基本语法和常用标签；3. 学会使用网页设计软件进行页面布局和美化；4. 提高网页设计与制作的能力。

实验内容：1. 网页设计工具及软件的介绍；2. HTML和CSS的基本语法及常用标签；3. 网页布局与美化的实践；4. 网页交互功能的实现。

实验过程：一、网页设计工具及软件的介绍1. Dreamweaver：一款专业的网页设计软件，支持可视化操作，能够方便地进行网页设计和编辑。

2. Sublime Text：一款轻量级的代码编辑器，支持多种编程语言，具有丰富的插件和扩展功能。

3. Notepad++：一款免费的代码编辑器，界面简洁，功能强大，支持多语言编程。

二、HTML和CSS的基本语法及常用标签1. HTML（HyperText Markup Language）：超文本标记语言，是网页内容的主要载体。

2. CSS（Cascading Style Sheets）：层叠样式表，用于控制网页的样式和布局。

（1）HTML基本语法：- 网页结构：由HTML标签组成，标签之间可以嵌套使用。

- 常用标签：- `<html>`：定义整个HTML文档。

- `<head>`：包含文档的元信息，如标题、字符编码等。

- `<title>`：定义网页标题。

- `<body>`：包含网页的主体内容。

- `<h1>`至`<h6>`：定义标题级别，`<h1>`为最高级别。

- `<p>`：定义段落。

- `<a>`：定义超链接。

- `<img>`：定义图片。

（2）CSS基本语法：- 选择器：用于选择HTML元素。

- 属性：用于设置元素的样式。

- 常用属性：- `color`：设置文字颜色。

HTML 实验1：基本网页设计

信息学院实验报告
专业：软件工程班级：
姓名：学号：
实验1：基本网页设计
实验设备：
PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘
OS：Windows7
应用软件：IE10.0、Dreamweaver CS5.5、Notepad
实验目的：
1. 掌握常用HTML标记的使用；
2. 掌握表格页面布局；
3. 了解网站设计的基本步骤。

实验内容及要求：
1. 表格布局，居中,边框无；width:800pt；表格分4行，2列；第1、2、4行合并单元格为1列。

第1行height:100px，第4行height:24px；第3行第1列width:172px，height440px；
2. 第1行内显示标题图片（背景），标题文字，如：Web技术基础学习；第2、4行前景色为淡蓝，第2行设计导航菜单，第4行设计版权信息；第3行第1列背景为浅蓝色，嵌套一个表格，内容为二级导航菜单，每一行放一个链接，链接到实验1的其它网页；第3行第2列放各网页的具体内容；
3. 第3行第1列中的列表项：文本格式化标记；超链接标记；图像标记；多媒体标记；列表标记；表格标记；表单标记；
4. 设计其它网页，结构与前一网页一样，只有第3行第2列的内容不同，放网站其它网页的内容，参照例程3－9中的内容。

实验结果：
实验思考题：
如何设置才能让页面在不同大小的显示器中都能正确显示？
先获得用户的分辨率，用页面跳转的方法转到相应页。

网页设计与制作实验报告

网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。

素材准备：准备制作网页所需的文字素材、图像素材。

实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。

实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。

2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。

3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。

4.切换代码模式下，输入代码。

5.保存文件，预览文件效果。

实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。

实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。

页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。

素材准备：准备好从网上下载的安装程序。

实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。

2.安装完成后输入注册号。

3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。

Html设计实验报告分析

《网页设计》实验报告（2010—2011学年第二学期）班级：姓名：学号：指导老师：实验一认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。

2、了解HTML文件结构。

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

下面介绍一下这两种方式的具体操作步骤。

1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。

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

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

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

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

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

如图所示。

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

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

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

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

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

网页设计实验网页设计与制作

实验一网页设计基础实验一、实验目的学生通过该实验熟悉HTML语言的基本使用方法，进一步体会浏览器解释执行HTML的原理，为以后高级网络编程打下扎实的基础。

1．掌握利用因特网进行信息游览、搜索，下载网页、图片、文字和文件；2．对给定的网站，能指出网站的风格（链接结构、目录结构、页面布局方式）；3．了解HTML文档结构；4．能够运用文本编辑器制作简单网页。

二、实验环境微机+ Window 操作系统 +IE浏览器+ 网页编辑器三、实验重点及难点熟练使用浏览器进行浏览、搜索、下载。

四、实验内容1、根据网站制作的需要，从网上下载网页制作时需要的文字、小图片、动画及flash。

2、利用搜索引擎，浏览因特网上较为著名的5个网站，记录这些网站的名称、网站地址和以及相应的网页文件格式（扩展名）；3、上网访问实际3个网站（可以上校园网），记录这些网站的名称、网站地址，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）、页面布局方式。

4、在网上找出下列版面布局的结构形式：（象形即可）⑴．“国”字型布局⑵．拐角型布局⑶．拐角型布局⑷．封面型布局(5). 封面型布局5、查看湖北学院网站主页的源代码，收藏到收藏夹中，将其设为主页。

6．使用电脑中的图片工具把不同图片转换为.JPG或.GIF格式，比较两种图片格式的区别。

7. 什么是网站的CI形象?打开网易主页，查看其CI形象标志。

8、构建HTML文档“我的第一个网页”：（1）从开始菜单启动记事本；（2）在记事本中，录入一个HTML文档；（3）设置该文档在最终在浏览器中显示的标题为“我的第一个网页”；（4）在页面添加可见的文本“我的第一个网页”；（5）使用记事本的菜单“文件”→“保存”，在“另存为”对话框中，在“保存类型”下拉列表中选择“所有文件”，录入“文件名”myfirstpage.htm，单击“保存”按钮将该页面保存到实验文件夹。

<html><head><title>我的第一个网页</title></head><body >我的第一个网页</body></html>五、说明：1、所有实验环节均由每位学生独立完成，严禁抄袭他人实验结果，若发现有结果雷同者，按实验课考核办法处理。

网页设计-实训报告-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>设计赏心悦目的网页能受到广大网民的钟爱，为了提供一个广阔的舞台以充分展示网友们的艺术才华和创作水平。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

实习一网页设计（HTML）（1）
一、实习目的
1.了解HTML文档结构；
2.初步掌握基本标记的使用；
3.能够运用文本编辑器制作简单网页。

二、实习内容
1.学习EditPlus文本编辑器的使用；
2.使用EditPlus制作只有一行文字的网页，了解HTML文档结构，并在IE浏览器中打
开编写的网页文件，查看运行效果；
3.在网页中添加多段文本内容，并对页面格式进行设置排版，制作一个简单文字内容的
网页；
4.在网页中添加图片，并对页面格式进行设置排版，制作一个简单图文内容的网页；
5.制作一个索引网页，建立与前面网页之间的超连接；
6.制作一个简单的个人主页。

三、预备知识
1.网页的基本组成；
2.HTML语言：常用HTML标记及其属性；
标记作用常用属性
Html 网页文件标记
Body 页面标记bgcolor,background,text
P 段落标记align
br 换行标记
H1～h6 标题标记align
Hr 水平线标记size,width,color
Font 字体标记size,face,color
img 图像标记Src,height,width,alt,align
a 超链接标记Href
3.网页制作方法。

四、实习步骤
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浏览器中查看网页运行效果。

●将<title>标记中的文本该为“单行文本”，在<BODY>标记之间添加文字“西北农林
科技大学”，存盘并查看运行效果。

3. 制作一个简单文字内容的网页
①新建一个空白网页；
②添加适量文字（可使用“复制”—“粘贴”操作从其他环境中截取内容）；
③利用HTML文字标记进行版面编排，要求：
标题；使用h1-h6标记；
分段（p标记）、分行（br标记）、段落对齐方式（在p标记中设置align属性）；
设置字体（font标记中设置size,face,color属性），设置字型（b,I,u标记）；
插入水平线（hr标记）等。

④保存文件（文件名为1.htm）；
⑤在IE浏览器中查看网页运行效果；
⑥重复③的过程，更改标记属性，观察运行效果。

4. 制作一个简单图文内容的网页
①新建一个空白网页，在网页中添加适量文字，利用HTML文字标记进行版面编排；
②运用HTML标记插入图片（img标记），设置图片的属性（修改img标记的Src,height,width,alt,align属性），进行图文混排；
③保存文件（文件名为2.htm），查看网页运行效果。

5.建立超连接
①新建一个空白网页，在网页中添加三个超链接，分别链接到前面制作的网页（1.htm
和2.htm）上，保存文件，查看网页运行效果，进行链接测试。

②在网页中建立其它网站的超链接，分别链接到“西北农林科技大学”主页
（），“新浪网”主页（），查看网页运行效果，进行链接测试。

6.制作一个简单的网页
制作一个网页，要求：字体属性设置、段落（行）设置、插入图片并进行属性设置、超链接设置等内容，尽量作到页面美观、内容充实。

五、实习要求
1.独立完成实习内容；
2.保存制作的网页（包括图片文件），提示：应建1个文件夹，将有关文件存到这个文
件夹中；
3.同学间进行测试（通过文件拷贝方式到其他同学的计算机上）；
4.提交测试通过的网页文件（文件夹压缩包）到作业系统。