实验2 HTML与静态网页
实验3-1 站点首页的设计【实验目的】1、了解HTML各种标记语言的作用，以及如何制作一个静态网页2、掌握常用网页制作软件（如Dreamwaver8.0）的使用【实验条件】个人计算机一台，预装Windows 2000或Windows XP 操作系统,和Dreamwaver8.0软件。
【实验说明】在网页示例中，表格t1为网页的头部，放置公司的logo，公司名称，和一些图片等等；t2中的内容为网页的主要内容；t3是网页的尾部，通常显示一些相同的网站版权、经营许可证及网站联系人等信息。
推荐学时： 1学时【实验内容和步骤】步骤一：分析该公司网站首页，并对其进行设计。
以下图中的网页为例图3-1 需要制作的网页表t1，t2和t3纵向排列，并在网页中居中显示，其结构如图所示。
其中，t2第一行包含表t21，第二行第一列包含表t22，第二列包含表t23，表t21，t22和t23结构如图所示。
步骤二：使用Dreamweaver来进行网页制作。
1、使用Dreamweaver新建网页后，在设计页面插入表格t1。
具体表格的单元格大小见代码。
其内容如下：背景图片插入图片插入图片背景图片，并输入公司名称居中显示插入图片2、插入表格t2，具体表格的单元格大小见代码。
对整个t2设置背景图片，其它内容如下：团队精神团队介绍公司目标发展方向插入一条水平线，顶部显示背景图片，显示“首页”背景图片，显示“公司简介”背景图片，显示“产品介绍”背景图片，显示“技术支持”主要内容3、插入t3，具体表格的单元格大小见代码。
对整个t3设置背景颜色，其它内容如下：插入一条水平线输入版权等信息步骤三：保存网页并运行。
参照网页代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>公司首页</title><style type="text/css"><!--.STYLE1 {color: #FFFFFF;font-size: 18pt;font-family: "宋体";font-weight: bold;}.STYLE2 {font-size: 16px;color: #FF0000;font-weight: bold;font-family: "宋体";}.STYLE3 {font-size: 18px;}body {background-color: #000033;}.STYLE4 {font-size: 18px; color: #000000; } --></style></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ><table width="778" border="0" align="center" cellpadding="0" cellspacing="0"><tr><th rowspan="3" background="01.GIF" scope="col"><img src="index_pic.gif" width="160" height="208" /></th><th scope="col"><img src="index_top1.gif" width="618" height="60" /></th></tr><tr><td width="618" height="80" valign="middle" background="index_top2.gif"><p align="center" class="STYLE1">您的公司名称</p> </td></tr><tr><td><img src="index_top3.gif" width="618" height="68" /></td></tr></table><table width="778" border="0" align="center" cellpadding="0" cellspacing="0" background="INDEX_BG.GIF"><tr><td height="60" colspan="3"><table width="778" border="0" cellspacing="0" cellpadding="0"><tr><th width="210" height="20" scope="col"> </th><th colspan="4" scope="col"> </th></tr><tr><td height="20"> </td><td width="80" class="STYLE2">团队精神</td><td width="80" class="STYLE2">团队介绍</td><td width="80" class="STYLE2">公司目标</td><td class="STYLE2">发展方向</td></tr><tr><td height="20"> </td><td colspan="4" valign="top"><hr align="left" width="80%" /></td></tr></table></td></tr><tr><td width="210" height="240" valign="top"><table width="180" border="0" cellspacing="0" cellpadding="0"><tr><th height="46" background="INDEX_LM.GIF" class="STYLE2" scope="row">首页</th></tr><tr><th height="46" background="INDEX_LM.GIF" class="STYLE2" scope="row">公司简介</th></tr><tr><th height="46" background="INDEX_LM.GIF" class="STYLE2" scope="row">产品介绍</th></tr><tr><th height="46" background="INDEX_LM.GIF" class="STYLE2" scope="row">技术支持</th></tr></table></td><td width="568" valign="top"><table width="568" border="0"cellspacing="0" cellpadding="0"><tr><th height="30" colspan="2" scope="row"> </th></tr><tr><th width="80%" height="180" align="left" valign="top" scope="row"><p class="STYLE3">在这里你可以看到您的公司的名称，描述，栏目的名称等等，一切你输入的东西都可以在这里显示出来.</p> <p class="STYLE3">如果你觉得这个页面效果不理想，你也可以变换页面栏目的排版设置，页面的颜色，直至更换成你喜欢的模板。
实验2HTML与静态网页
background-color: #000033; } .STYLE4 {font-size: 18px; color: #000000; } --> </style> </head>
<body
leftmargin="0"
topmargin="0"
marginwidth="0"
marginheight="0" >
<head>
<meta
http-equiv="Content-Type"
charset=gb2312" />
<title> 公司首页 </title>
<style type="text/css">
<!--
.STYLE1 {
color: #FFFFFF;
font-size: 18pt;
font-family: "
class="STYLE2" scope="row"> 产品介绍 </th>
</tr>
<tr>
<th
height="46"
background="INDEX_LM.GIF"
class="STYLE2" scope="row"> 技术支持 </th>
</tr>
</table></td>
<td width="568" valign="top"><table width="568" border="0"
HTML课程设计_简单静态网站制作
综合实验简单静态网站制作姓名：学号：班级：计算机科学与技术*班日期：【实验目的】综合掌握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>若要说中国历史，夏朝是不能不说、也是无论如何不可逾越的峦峰。
实验指导(静态网页设计)
实验一HTML语言和Dreamweaver使用一、实验目的1、熟悉Dreamweaver的工作界面和工作环境；2、能熟练使用HTML编写简单网页；3、掌握Dreamweaver站点的建立和管理；4、能熟练使用Dreamweaver创建和设计常规页面。
二、实验内容及步骤（一）、基本操作：1、认识Dreamweaver的工作界面。
2、自定义工作环境。
3、熟悉Dreamweaver的各个浮动面板。
（二）、实例设计：1、网站初建——建立一个本地站点。
2、制作满江红页面，如右图：3、用HTML编写如下网页，要求：第1行为标题2且链接到大理学院主页，第2行为标题3，第3行为段落，图片宽400px，高300px。
4、用HTML编写以下表格，要求：边框为1px，表格宽300px，表格居中。
三、实验思考1、如何设置文本中的图片对齐方式？2、使用HTML编写网页图片标签中主要有哪些属性及属性值。
四、作业：请写出实验内容3、4的HTML代码。
实验二创建简单网页一、实验目的1、熟练掌握链接、图像及属性设置；2、熟练掌握表格的基本操作；3、学会隐藏表格、单元格边框及分隔线；4、掌握在网页中插入flash、MP3和视频等多媒体素材。
二、实验内容(一) 制作链接页面（包括：页面链接、下载链接、图片链接和邮件链接）(二) 制作唐诗页面，如下图：（三）表格基本操作,如上图（四）在网页中插入flash、MP3和视频等多媒体素材三、思考1、如何为网页设置背景音乐？2、如何为Flash动画设置为背景透明？实验3 层和框架网页设计一、实验目的1、熟练掌握框架和层的基本操作；2、掌握层布局的方法3、掌握框架布局的方法；4、掌握框架中链接的使用。
二、实验内容及步骤（一）、操作练习：1、框架和的基本操作练习2、层布局练习3、框架布局练习4、框架中的链接练习（二）、实例设计：1、利用表格进行网页而已，如右图：2、设计制作一个层布局的网页，如下图:3、制作一个框架网页，如下图：三、思考1、在框架结构中如何实现链接的目标为某一个框架？实验四网站综合设计一、实验目的1、欣赏优秀网站，提高对网站的总体设计水平；2、初步掌握静态综合网站的设计方法。
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. 了解HTML的基本概念和作用。
2. 掌握HTML的基本标签及其使用方法。
3. 能够使用HTML编写简单的静态网页。
二、教学内容1. HTML的基本概念和作用HTML的定义HTML的作用2. HTML的基本标签标签的概念常用的标签及其作用标签的属性3. 编写简单的静态网页网页的结构网页的布局网页的内容三、教学方法1. 讲授法：讲解HTML的基本概念、基本标签及其使用方法。
2. 演示法：展示实例，讲解标签的作用和属性。
3. 练习法：学生动手实践，编写简单的静态网页。
四、教学步骤1. 讲解HTML的基本概念和作用。
2. 讲解HTML的基本标签及其使用方法。
3. 展示实例，讲解标签的作用和属性。
4. 学生动手实践，编写简单的静态网页。
5. 总结和反馈。
五、教学评价1. 课堂讲解的满意度。
2. 学生实践作品的质量。
3. 学生对HTML知识的掌握程度。
六、教学资源1. 教材或教学指导书：提供HTML基本概念、标签及其使用方法的详细介绍。
2. 在线资源：提供HTML标签属性、案例教程和在线练习平台。
3. 编程工具：如Sublime Text、Visual Studio Code等，用于编写和查看HTML 代码。
4. 演示文稿：用于展示HTML的基本概念和实例。
七、教学评估1. 课堂练习：学生在课堂上完成简单的HTML代码编写，以巩固所学知识。
2. 课后作业：布置相关的HTML编写作业，要求学生在课后完成。
3. 作品展示：学生提交完整的静态网页作品，进行互相评价和教师点评。
4. 知识测试：通过笔试或在线测试，评估学生对HTML知识的掌握程度。
八、教学案例1. 案例一：编写一个简单的个人博客网页，包括、段落、图片和等。
2. 案例二：制作一个公司简介网页，包括导航栏、简介内容、服务项目等。
3. 案例三：创建一个在线购物商品列表，展示商品图片、价格和购买。
九、教学拓展1. 学习CSS：介绍CSS的基本概念和作用，为学生提供进一步美化网页的技能。
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">坐下与坐上代码类似，就不举出了。
静态网页的制作实验报告
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
clear:both;
line-height：24px；
}
</style>
</head>
<body>
<divid="header"><imgsrc="image/falali.jpg"height="400"
width="1002">
</div>
<divid="xiala">
跑车：
<selectname="select">
<br>                                                                                 - Copyright 2016 - 版权所有</div>
静态网页设计实训报告
静态网页设计实训报告1. 引言本文旨在介绍静态网页设计实训的过程和步骤。
静态网页设计是一种基础的网页设计方法，通过HTML和CSS来构建网页的结构和样式。
通过这个实训项目，我深入了解了静态网页设计的原理和技术，并通过实践提升了自己的设计能力。
2. 实训背景在进行实训之前，我首先进行了一些背景调研。
了解到静态网页设计是现代网页设计的基础，通过学习和实践可以提高自己的实际操作能力。
此外，静态网页设计也有助于理解网页的结构和样式，为后续学习动态网页设计打下基础。
3. 实训目标在开始实训之前，我明确了自己的实训目标。
我希望通过这个实训项目，能够掌握以下能力：•使用HTML语言构建网页的结构•使用CSS语言美化网页的样式•熟悉网页设计的基本原则和规范•学习使用一些常用的网页设计工具和资源4. 实训步骤4.1 确定网页主题在开始设计网页之前，我首先确定了网页的主题。
根据实训要求，我选择了一个简单的主题——旅游信息网站。
这个主题既有一定的实际意义，又符合我的兴趣，能够激发我的设计灵感。
4.2 设计网页结构在确定了网页主题之后，我开始设计网页的结构。
我使用HTML语言编写了网页的基本结构，包括头部、导航栏、内容区域和底部等部分。
通过HTML语言，我可以将不同的内容组织起来，并设置合适的标签和属性。
4.3 美化网页样式网页的样式是吸引用户的重要因素之一。
为了提升用户体验，我使用CSS语言对网页进行了美化。
通过设置合适的样式属性和选择器，我调整了网页的颜色、字体、布局等方面，使其更加美观和易读。
4.4 添加内容和功能除了基本的结构和样式，我还为网页添加了一些内容和功能。
我使用文本编辑器编写了网页的文本内容，并通过插件添加了一些图片和图标。
此外，我还为网页添加了导航链接和搜索功能，方便用户浏览和搜索信息。
4.5 测试和优化在完成网页设计之后，我进行了测试和优化工作。
我使用不同的浏览器和设备测试了网页的兼容性和响应式设计，并对存在的问题进行了修复和优化。
静态网页的实训报告书
一、实训目的通过本次静态网页实训，使学生掌握HTML、CSS、JavaScript等前端技术的基本原理和应用，提高学生的网页设计能力和实际操作能力，为今后从事网页设计和开发工作打下坚实的基础。
二、实训内容1. HTML基础知识（1）HTML基本标签及属性（2）表格、列表、表单等常用标签的使用（3）图片、音频、视频等媒体元素的使用2. CSS样式表（1）CSS基本语法及选择器（2）布局技术：浮动、定位、弹性盒子等（3）颜色、字体、背景等样式设置3. JavaScript编程基础（1）JavaScript基本语法及数据类型（2）函数、对象、数组等编程基础（3）事件处理、DOM操作等应用4. 常用网页特效（1）图片轮播、无缝滚动等（2）表单验证、日期选择等（3）弹窗、动画等三、实训过程1. 实训前期准备（1）安装并熟悉开发工具，如Dreamweaver、Sublime Text等。
（2）了解HTML、CSS、JavaScript等前端技术的基本概念和原理。
2. 实训阶段（1）学习HTML基本标签及属性，编写简单的静态网页。
（2）学习CSS样式表，美化网页布局和样式。
（3）学习JavaScript编程基础，实现网页交互功能。
（4）学习常用网页特效，丰富网页内容。
3. 实训成果展示（1）完成一个具有完整功能的静态网页，包括首页、关于我们、联系我们等页面。
（2）实现网页中的图片轮播、无缝滚动、表单验证等特效。
四、实训心得1. 学会了HTML、CSS、JavaScript等前端技术的基本原理和应用，提高了自己的网页设计能力。
2. 掌握了使用开发工具进行网页制作的方法，提高了实际操作能力。
3. 通过实训，培养了良好的团队协作精神和沟通能力。
4. 深刻认识到理论知识与实践操作相结合的重要性，为今后从事网页设计和开发工作打下了坚实的基础。
五、实训总结1. 通过本次静态网页实训，我深刻认识到HTML、CSS、JavaScript等前端技术在实际应用中的重要性。
静态网页制作实习报告
一、实习背景随着互联网技术的飞速发展，网页设计已经成为计算机科学与技术领域的一个重要分支。
为了更好地了解和掌握静态网页的制作技术，提高自己的实践能力，我在本学期选择了静态网页制作作为实习项目。
本次实习旨在通过实际操作，深入了解HTML、CSS和JavaScript等前端技术，并尝试制作一个具有实用功能的静态网页。
二、实习目的1. 熟悉并掌握HTML、CSS和JavaScript等前端技术的基本原理和应用。
2. 培养良好的编程习惯和团队协作能力。
3. 提高自己的审美观和设计能力。
4. 制作一个具有实用功能的静态网页，为实际项目积累经验。
三、实习内容1. HTML学习在实习初期，我重点学习了HTML的基础知识，包括标签、属性、文档结构等。
通过查阅资料和在线教程，我掌握了HTML的基本语法和常用标签，如`<div>`,`<p>`, `<a>`, `<img>`, `<table>`等。
2. CSS学习接着，我学习了CSS的基本原理和应用。
CSS主要用于美化网页，控制网页元素的样式。
我学习了如何使用选择器、盒模型、布局技术（如浮动、定位）等，以及如何使用媒体查询实现响应式设计。
3. JavaScript学习为了使网页具有交互性，我学习了JavaScript的基本语法和常用函数。
JavaScript可以用来实现表单验证、动态内容更新、用户界面交互等功能。
通过学习，我掌握了事件处理、DOM操作、函数定义等知识。
4. 实践操作在理论学习的基础上，我开始尝试制作静态网页。
首先，我设计了一个简单的网页布局，包括头部、导航栏、内容区和尾部。
然后，我使用HTML和CSS完成了页面的结构设计和样式设置。
最后，我使用JavaScript添加了一些交互功能，如点击按钮切换图片、表单验证等。
5. 项目总结在实习过程中，我制作了一个具有实用功能的静态网页，包括以下功能：- 首页：展示网站的主要内容和导航链接。