下载文档原格式
第九章网页制作实验指导实验一使用记事本建立HTML文件一、实验目的及任务要求1.实验目的了解HTML语言的基本概念和HTML文件的基本结构，掌握常用HTML标记意义和语法，学会使用记事本编辑简单的HTML文件。
2.任务要求使用记事本编辑简单的HTML文件“刘翔.html”（图9-1），其中包括设置网页标题、建立表格、插入图片等。
图9-1 刘翔的个人小档案二、实验所需素材实验素材\第9章\第1节三、实验练习利用所给素材，使用记事本建立HTML文件“刘翔.html”（图9-1）。
在浏览器中打开、查看设计的网页。
实验二在FrontPage的Web页中插入文本、图片、水平线等对象，并用表格定位一、实验目的及任务要求1.实验目的掌握在FrontPage2003中新建站点和网页，在网页中插入文本、图片、水平线等对象的方法；掌握利用表格对文字、图片等内容进行定位的方法。
2.任务要求使用FrontPage2003新建一个站点，并在其中新建网页。
利用所给素材制作一个关于历届奥运会吉祥物的网页（图9-2），要求使用表格进行定位，插入文本、图片和水平线等对象。
图9-2 历届奥运吉祥物二、实验所需素材实验素材\第9章\第2节三、实验练习建立站点Web1，根据所给素材制作一个反映2008年北京奥运会吉祥物“福娃”的网页，保存为“2008奥运会吉祥物.htm”。
要求使用表格定位网页内容，插入素材中的文字、图片等，还可以插入水平线。
可以使用任何学到的知识进一步美化网页。
实验三插入文本、图片的超链接，并设置图片对象的格式一、实验目的及任务要求1.实验目的掌握在FrontPage2003中插入文本、图片的超链接，以及设置图片对象格式的基本方法。
2.任务要求打开实验二创建的站点Web1，编辑主页（index.htm），插入标题、水平线、文本、图片，以及文本、图片的超链接，并设置图片的对象格式，如图9-3所示。
图9-3 奥运会吉祥物二、实验所需素材本实验及实验练习所需素材文件同实验二三、实验练习打开实验二创建的站点Web1，以奥运吉祥物为内容，设计主页（index.htm），插入文本、图片的超链接，并在浏览器中打开该站点，浏览网页，测试超链接。
实验三使用HTML语言编制网页
学号 201114004 姓名王渝迪专业计算机科学与技术成绩
【实验目的】
使用HTML语言编制网页。
【实验内容】
1、熟悉Dreamweaver软件的环境；
2、掌握HTML语言；
3、独立完成一个HTML网页。
【实验步骤】
1，新建一个HTML文件，插入一个的表格，按照自己的设计对表格进行合并以及尺寸的修改，如进行单元格的合并。
2，按照自己的设计，在表格的相应位置插入图片，并根据表格的大小，适当的调整图片的比例，使图片和表格比例和谐。
3，在代码段中插入文字，使之显示在网页中，并根据表格的大小，适当调整文字，并对文字进行设置，达到自己想要的效果。
4，制作链接。
给一张图片添加连接。
【实验结果】
【实验心得和体会】
本次试验用上次试验的一部分代码。
然后增加了给一个图片添加超链接的功能。
用<h1>标签来定义一个标题。
用<P>标签来定义一段文字。
综合实验简单静态网站制作姓名：学号：班级：计算机科学与技术*班日期：【实验目的】综合掌握HTML5+CSS设计静态网站的方法。
【实验环境与设备】计算机实验室要求：机器上安装有浏览器和记事本等。
【实验要求】1、完成学期初每个人自己设计的网站，网站至少由5个页面构成，除主页外，至少要包含四个主栏目，每个页面必须图文并茂，能较好地表达主题，切忌采用过多的文字、过多的图像或者过多flash，不允许添加视频和音频。
作品应体现Web的特点，网站结构完整，链接正确、导航有效。
2、网站主题可从如下几个选择：中国传统文化、互联网时代、畅想未来。
3、对于HTML，文档的语义应正确、清晰可读，符合行文规范。
4、对于页面上各个元素，使用CSS进行外观设计，根据主题选取适当的字体大小、颜色和元素背景等。
5、要求使用外部CSS文件。
6、布局方面，使用DIV+CSS布局。
7、对于设计完成的网页样式，要求具有较高的灵活性、可维护性和可重用性，既要确保整个网站外观风格上的统一，每个页面之间也要存在一定的差异。
注意：●内容和网页形式自定，不允许抄袭，一经发现0分处理。
●不允许提交未在网页中使用的图像、flash、声音和图像文件。
●每个学生以学号加姓名命名站点名称。
●完成并提交该实验报告【报告内容】1网站设计结构2网页代码①第1个页面<!doctype html><html><head><meta http-equiv="Content-Type"charset="utf-8"/> <title>中国传统文化</title><link href="style.css"rel="stylesheet"type="text/css"/> </head><body><div id="container"><div id="top"><img src="images/banner.png"/></div><div id="navi"><span><a href="index.html">首页</a></span><span><a href="朝代.html">朝代</a></span><span><a href="民族.html">民族</a></span><span><a href="地域.html">地域</a></span><span><a href="文化.html">文化</a></span> <span><a href="杂家.html">杂家</a></span> <span><input type="text" name="title" value="" />搜索</span></div><div id="main"><div id="left"><ul><li><h3>朝代></h3></li><li>三皇五帝夏朝商朝西周东周</li><li><h3>民族></h3></li><li>汉族壮族满族回族苗族</li><li><h3>地域></h3></li><li>东北地区华北地区华东地区</li><li><h3>文化></h3></li><li>儒家道家释家诸子百家</li></ul></div><div id="center"><img src="images/1400401422.jpg"/></div><div id="right"><ul><li>中国第46个遗产项目...</li><li>浅析粽子飘香的端午节...</li><li>世界第三大无人区</li><li>“鸟的王国”—青海湖鸟岛...</li><li>“陇上林泉之冠”—麦积山...</li><li>嘉峪关文物景区：传承...</li><li>中国第八处世界自然遗产</li><li>景德镇古窑民俗博览区...</li><li>江南三大名湖之西湖</li><li>世界上岛屿最多的湖</li></ul></div></div><div id="main1"><img style="float:left;"src="images/ctbackg.gif"/><img style="float:left;width:516px;"src="images/index.jpg"/><div id="box1"><img style="float:left;width:250px;height:180px;margin-left: 8px;"src="images/1408004447_thumb.jpg"/><p>若要说中国历史，夏朝是不能不说、也是无论如何不可逾越的峦峰。
网页制作实验二一、页面布局1．将“网页制作实验二”文件夹中的“网页制作2”文件夹复制到D盘根文件夹中，并改名为你的学号和姓名。
并利用你的学号和姓名文件夹中的“学生网站 1.ste”站点文件导入“大学生网站”站点。
新建一个网页，以home.html为文件名保存在站点的“content”文件夹中，按图1所示建立布局表格。
图1【操作步骤】（1）找到“网页制作实验二”文件夹中的“网页制作2”文件夹复制到D盘根文件夹中，并改名为你的学号和姓名。
（2）启动Dreamweaver8，选择“站点/管理站点”命令，在“管理站点”对话框中单击“导入”按钮，在打开的“导入站点”对话框中选择“你的学号和姓名”文件夹中的“学生网站1.ste”站点文件，单击“打开”按钮，选择你的学号和姓名文件夹为根文件夹，从而建立“大学生网站”站点。
（3）新建一个网页，单击“插入”工具栏“布局”选项卡中的“布局”按钮，初次进入布局模式时，会显示提示信息框，单击“确定”按钮，进入布局模式。
如果没有显示标尺则选择“查看/标尺/显示”命令，选中“查看/网格/显示网格”命令显示网格，选中“查看/网格/靠齐到网格”命令。
（4）单击“插入”工具栏“布局”选项卡中的“布局表格”按钮后，如图1所示在文档窗口中画出宽度为600像素、高度为500像素的布局表格。
（5）单击“绘制布局单元格”按钮，在顶部画出宽度为600像素、高度为150像素的布局单元格。
（6）用同样的方法在左面画出1个200×350的布局表格和2个布局单元格，在右面画出1个布局单元格。
（由于在布局表格上显示标签和宽度值，不能完全显示布局的位置。
要完全看清布局的效果，可选中“查看/可视化助理/隐藏所有”命令）。
（7）选择“文件/另存为”命令，在“另存为”对话框中选择站点的“content”文件夹，输入文件名“home.html”，单击“保存”按钮，关闭网页文件。
2．打开“home.html”文件，将布局表格设置为固定宽度，背景色设置为浅黄色。
实验一使用HTML语言编写静态网页
一、实验目的
1、熟悉开发环境
2、使用HTML语言各类标记
3、表单控件
二、实验要求
1.使用HTML语言各类标记及表单控件
重点：使用HTML语言各类标记及表单控件
难点：表单和框架的使用
二、实验内容：
1.利用框架将浏览器画面分割成多个子窗口，要求主页面上有班级公告，课程表
2左侧包含的链接有成员注册、个人介绍、新闻管理、相册管理、留言管理、查看注册会员等等
补充内容：
链接文字颜色属性link、alink和vlink
在浏览器默认的情况下，链接文字的颜色为蓝色，访问过后的链接文字颜色为紫色。
有助于用户判断是否已经单击过该链接。
链接的不同状态
基本语法：
<body link=” color_value”alink=” color_value”vlink=” color_value”>。
一、实验目的1. 理解网页的基本结构和组成。
2. 掌握HTML、CSS和JavaScript等网页编程语言的基本语法。
3. 能够通过查看和分析网页源代码，了解网页的设计和实现方法。
4. 提高对网页性能和优化的认识。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 编程软件：Sublime Text三、实验内容1. HTML实验（1）创建一个简单的HTML页面，包含标题、段落、列表、图片等元素。
代码如下：```html<!DOCTYPE html><html><head><title>我的第一个网页</title></head><body><h1>欢迎来到我的网页</h1><p>这是一个段落。
</p><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul><img src="image.jpg" alt="这是一张图片"></body></html>```（2）将HTML页面保存为“index.html”，并使用浏览器打开，查看效果。
2. CSS实验（1）为上述HTML页面添加CSS样式，实现以下效果：- 标题居中显示。
- 段落文字加粗、颜色为红色。
- 列表项背景色为浅灰色。
- 图片宽度为200像素。
代码如下：```cssbody {text-align: center;}p {font-weight: bold;color: red;}ul li {background-color: lightgray;}img {width: 200px;}```（2）将CSS样式保存为“style.css”，并在HTML页面的`<head>`标签中引入。
html小作业
以下是一个简单的HTML作业示例，你可以根据需要进行修改和扩展。
作业题目：创建一个简单的个人网站
要求：
1. 创建一个HTML文件，命名为index.html。
2. 在index.html中添加一个标题（使用<h1>标签），例如“我的个人网站”。
3. 添加一个段落（使用<p>标签），描述你的一些基本信息，例如姓名、爱好等。
4. 添加一个链接（使用<a>标签），指向你的个人博客或社交媒体页面。
5. 添加一个图像（使用<img>标签），显示你的个人照片。
6. 将index.html文件保存到本地文件夹中，然后在浏览器中打开它，查看效果。
请注意，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。
例如，你可以添加更多的段落、链接、图像等内容，以及样式和JavaScript等功能来增强页面的效果和交互性。
网页(wǎnɡ yè)实训报告网页(wǎnɡ yè)实训报告_大庆职业(zhíyè)学院计算机应用工程系(2022级)网页(wǎnɡ yè)综合设计设计时间：设计地点：班级：姓名(xìngmíng):指导教师：2022年6月29日至7月3日教学楼329机房计算机应用07-302班刘峰廉立志1一、实训目的与要求目的：通过实验教学主要培养学生的学生的动手能力，提高学生运用HTML 语言编写静态网页能力的水平，掌握HTML和CSS语言的应用，为学生学习动态网页的打下坚硬的根底。
〔1〕〔2〕〔3〕〔4〕掌握创立dreamweaver本地站点的方法，利用表格和层规划网页布局掌握在网页中添加文本，图像，flash动画和音乐等页面元素掌握在创立连接的“查询〞与数据库连接等方法。
综合运用所学软件进行网页材料准备要求：掌握网页设计根本概念和HTML的根本结构，了解网页技术概况、HTML的编辑和运行环境。
掌握文字版面的编辑，掌握网页的超链接技术的应用，了解图像的处理，包括背景图案、图形、图象及其超链接等的设定和应用。
了解列表的各种使用，了解表格的根本语法，掌握表格的定义、控制、分组、标题等的应用。
了解表单在网页中的应用，了解如何在网页中参加各种动态效果，了解网页中CSS的根底知识，掌握CSS的各种属性应用。
二.课程设计题目，描述和要求题目：即将逝去的大学网页主用内容表达对大学的留念，对大一时光的还念。
综合运用翻页Flash相册多彩版、梦想之巅屏保制作+2[1]、美图秀秀、家家乐相册制作、佳影MTV电子相册制作软件8.4.等软件制作了不同种的视频相册。
综合运用Photoshop、Fireworks、CorelDRAW、Flash、Pagemaker等多媒体制作软件，创作出一多媒体作品，为网页制作充分材料。
三.系统分析与设计主页色彩新颖，由标题栏、导航栏、友情链接及用flash做成的滚动电子相册组成一幅完整画面。
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一起测试。
在浏览器中调试，调试时发现许多之前没有预料的问题，如浏览器的兼容问题、浮动的问题等。
六、不断的找出问题、理解怎么出错的，不断的再测试！这样的学习和研究过程，让我体验到了许多次的付出与回报的乐趣，如：第一：阅读一本书，一般来说我第一次要先把整个书通读一遍，不理解的也要往下看，因为在往下看的过程中也许会找到那个问题的答案，等看完后我会有一个大概的印象，但一定会有很多不明白的地方，没关系，继续往下看。
实验报告学生姓名：学号：一、实验室名称：软件大楼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个状态按钮：“普通”、“HTM L”和“预览”。
网页视图模式的默认状态是“普通”，用于以所见即所得的方式编辑网页。
“HTML”网页视图模式用于以HTML语言的方式编辑网页。
制作网页过程中，想查看网页的制作效果，切换到“预览”网页视图模式即可。
切换网页视图使用鼠标单击相应的状态按钮即可。
图1.1 FrontPage 2000的窗口选用其他网页开发工具也是可以的这里没有限制四、实验目的：1.简单了解HTML语言。
2.认识网页以及网页的结构。
3.掌握用HTML语言制作简单网页的方法。
五、实验内容：用HTML语言制作简单的网页。
六、实验器材（设备、元器件）：1.实验设备计算机2.实验软件IE浏览器、网页制作软件，记事本。
七、实验步骤：给每个学生分配一台计算机。
独立完成简单网页制作的实验内容，并写出实验报告。
具体步骤如下。
1.制作第一张网页第1步进入如图1.1所示的ForntPage2000(或者Word 2003/2007)窗口，单击“HTML”状态按钮，进入“HTML”网页视图模式。
第2步在窗口的工作区中，输入如下内容：<html><head><meta http-equiv= "Content - Type" content = "text / html; chaset = gb2312"><title>我的网站</ title></head><body><br><p align = "center"><b><font face = "楷体—gb2312" color = "#550055" size = "7">我的网站</font></b></p>（注：可将“我的网站”改为一个人名字命名的网站，如“张三个人网站”）<br><p align = "center"><b><i><font face ="楷体—gb2312"color = "#ff00ff"size = "5">—春天时的梦</font></i></b></p><hr width = "90%"><p align = "center"><font face= "楷体—gb2312" color ="#ff00ff" size ="4">一首小诗</ font ></ p ><p align = "center"><font face = "楷体—gb2312" color = "#00ffff" size ="4">精美图片</ font></ p><p align = "center"> <font face = "楷体—gb2312" color = "#008800" size ="4">更多内容...</font ></ p><hr width = "90%"><p align = "center"> <marquee> <font face = "华文彩云" color = "#c000c0" size ="5">欢迎来到阿蒙的家</ font></marquee> </p><p align = "left"><font color = "仿宋—gb2312 " color = "#00ff00"size = "4" >搜狐网站</font><font face ="仿宋—gb2312"color = "#0000ff"size = "4">163网站</font></p></body></html>提示1：<hr width = 90%>是在页面上插入一条90%页宽的水平线。
提示2：<p align = "center"> <marquee> <font face = "华文彩云" color= "#c000c0" size = "5">欢迎来到阿蒙的家</font ></marquee></p>中的<marquee></marquee>标记对是使其间的文字水平滚动显示。
第3步单击“浏览”状态按钮，切换到“预览”网页视图模式查看效果。
第4步单击工具栏的“保存”按钮，将该网页保存为“index.html”第5步进入IE窗口，单击“文件”“打开”命令，进入“打开”对话框；单击“浏览”按钮，选择“index.html”文件后，单击“确定”按钮，这时IE窗口中显示的就是该网页的内容，如图1.2所示。
图1.2 从IE窗口中浏览到的“index.html”文件2.制作第二张网页（可以改为其它内容）第二张网页主要是对文字的处理和给网页加背景图片。
第1步在FrontPage 2000(或者Word 2003/2007)窗口中，单击工具的“新建”按钮，新建第二张网页。
第2步在窗口的工作区中，输入如下内容：<html><head><meta http- equiv = "content- Type" content = "text / html; charset = gb2312"><title> 一首小诗</ title></ head><body background = "file : /// f: /我的网站/ tl. gif"><br><br><br><p align = "center"> <b> <font face = "楷体—gb2312"color = "#550055" size ="7">游子吟</font ></b >< /p><br><p align = "center"><b ><i><font face = "楷体—gb2312"color = "#ff00ff"size = "5" —孟郊</ font></i></b></p><p align = "center"><font face = "楷体—gb2312"color= "#00ff00"size = "4">慈母手中线，</font><font face = "楷体—gb2312"color = "#0000ff" size ="4">游子身上衣。
</font></p><br><p align = "center" ><font face = "楷体—gb2312"color = "#ff0000"size = "4">临行密密缝，</font><font face = "楷体—gb2312" color = "#008800"size ="4">意恐迟迟归。
