案例九简单的HTML网页制作
一．案例内容
通过使用记事本工具，使学生掌握静态网页的基本制作方法，掌握HTML的基本语法。
通过实训，要求：
1．掌握记事本编写网页的方法
2．掌握HTML基本语法
3．掌握文档修饰的方法
4．掌握文字排版的方法
5．掌握段落排版的方法
6．掌握列表的用法
7．掌握图片的插入方法
8．掌握超链接的使用方法
9．掌握表格的绘制方法
二．工作准备
PC机，浏览器，Internet网络环境
三．操作步骤
1．在“我的电脑”中，新建一个html文档，并使用记事本工具打开。如图1所示。
图1 新建html文档
2．在页面中，构建html基本结构，如图2所示。
图2 html基本结构
3．为页面加上标题栏信息，如图3所示。
图3 加入
</p><!--/p2--><!--p3--><p>4．为页面添加红色背景，如图4所示。</p><p>图4 bgcolor属性5．为网页添加背景图片，如图5所示。</p><p>图5 背景图片6．为页面添加文字标题，如图6所示。</p><!--/p3--><!--p4--><p>7．使用<font>标签，修饰页面最中的文字，如图7所示。</p><p>8．使用<b>、<i>等标签，对文字的字形进行设置。如图8所示。</p><!--/p4--><!--p5--><p>9．使用<p>标签进行段落设置。如图9所示。</p><p>10．使用<br>标签进行换行设置。如图10所示。</p><!--/p5--><!--p6--><p>11．绘制水平线。如图11所示。</p><p>12．使用<ol>、<ul>、<li>标签制作列表，如图12所示。</p><!--/p6--><!--p7--><p>13．使用<img>标签插入图片。如图13所示。</p><p>图13 插入图片</p><p>14．使用<a>标签制作一个链接到新浪网的外部链接。15．使用<a>标签制作一个内部链接。</p><p>16．使用<a>标签制作锚点链接。</p><p>17．在页面中制作一个简单的报名表。如图14所示。</p><!--/p7--><!--p8--><p>图14 制作表格</p><p>四．案例关键点</p><p>1．注意html文件的扩展名。</p><p>2．网页制作也可使用dreamweaver工具开发。</p><p>3．尝试上网搜索更多的关于htm语言的属性知识。</p><!--/p8--><!--p9--><p>主要参考目录</p><p>（1）胡道元，Intranet网络技术应用，清华大学出版社，2001年9月</p><p>（2）黄志晖等，Internet操作实用教程，西安电子科技大学出版社，2002 年8月</p><p>（3）柯宏力等，Intranet 信息网络技术与企业信息化，北京邮电大学出版社，2000年1月（4）张贵明，网页艺术设计与应用，高等教育出版社，2004年7月</p><p>（5）潘维琴，网页设计与网站开发，高等教育出版社，2004年5月</p><p>（6）魏善沛，电子商务网站开发与实现，高等教育出版社，2004年7月</p><p>（7）张念鲁，Web程序设计教程，高等教育出版社，2004年7月</p><p>（8）太平洋电脑网论坛https://www.docsj.com/doc/c912723619.html,/</p><p>（9）天极网https://www.docsj.com/doc/c912723619.html,/</p><p>（10）洪恩在线https://www.docsj.com/doc/c912723619.html,/pc/</p><p>（11）中国软件网https://www.docsj.com/doc/c912723619.html,/</p><p>（12）网页制作学习园地https://www.docsj.com/doc/c912723619.html,/</p><p>（13）电脑爱好者https://www.docsj.com/doc/c912723619.html,/</p><p>（14）电脑报https://www.docsj.com/doc/c912723619.html,/</p><!--/p9--><!--rset--><h2>html实验报告</h2><p>《企业网站开发》实验指导书 计算机科学与技术学院 2013-3</p><p>目录 实验一HTML语言标志 (1) 【实验目的】 (1) 【实验环境】 (1) 【实验重点及难点】 (1) 【实验内容】 (1) 实验二使用Dreamweaver创建本地站点 (2) 实验三网页编辑与超链接 (6) 【实验目的】 (6) 【实验环境】 (6) 【实验重点及难点】 (6) 【实验内容】 (6) 实验四网页图像的应用 (7) 实验五表格和布局表格 (10) 【实验目的】 (10) 【实验环境】 (10) 【实验重点及难点】 (10) 【实验内容】 (10) 实验六CSS样式的应用 (11) 【实验目的】 (11) 【实验环境】 (11) 【实验重点及难点】 (11) 【实验内容】 (11) 实验七层 (12) 实验八Dreamweaver的框架和行为 (13) 【实验目的】 (13) 【实验环境】 (13) 【实验重点及难点】 (13) 【实验内容】 (13) 实验九Dreamweaver的模版 (14) 【实验目的】 (14) 【实验环境】 (14) 【实验重点及难点】 (14) 【实验内容】 (14) 实验十Dreamweaver表单 (15) 【实验目的】 (15) 【实验环境】 (15) 【实验重点及难点】 (15) 【实验内容】 (15)</p><p>实验一HTML语言标志 【实验目的】 1．掌握<head></head>的<title>标记，和<meta>标记； 2．掌握使用<body>标记设置网页背景颜色和文本颜色。学习使用分段标记 ；3．掌握使用<font>标记设置文字的属性； 4．掌握在网页中插入背景图片； 5．掌握在网页中插入水平线，并设置水平线的属性； 6．掌握在网页中插入背景音乐。 【实验环境】 Windows xp 【实验重点及难点】 掌握字体、水平线等常用标记。 【实验内容】 1、制作一个简单的网页sy1-1.htm，用记事本编辑，内容为个人简介信息。 要求： ●搜索关键字为“个人”“主页”“简介”，标题为我的个人简介。 ●背景为#33ccff,文本颜色为黑色，文本需分段表示。 2、过记事本编辑网页sy1-2.htm，内容为李白的诗“静夜思”。 要求：每行诗为一个段落，四行文字颜色不同，字体不同。 3、通过记事本编辑网页sy1-3.htm，实现如下页面。图片自选，插入背景音乐“故乡的云.mp3”。</p><h2>HTML及网页制作练习题-完整版</h2><p>1、在HTML中，（）标记不可出现在<body>和</body>标记符之间。（C） （Ａ）<hr> （Ｂ）<br> （Ｃ）<title> （Ｄ） 2、<table>属性中，rowspan定义的内容是（D） （A）单元格所跨的列数 （B）行的宽度 （C）列的高度 （D）单元格所跨的行数 3、在HTML中，正确的嵌套方式是（B）。 （Ａ）<table><td><tr></tr></td></table> （Ｂ）<table><tr><td></td></tr></table> （Ｃ）<table><tr><td></tr></td></table> （Ｄ）<table><td><tr></td></tr></table> 4、最大的标题是:（D） （A)<h7> （B)<h6> （C)<h2> （D)<h1> 5、HTML样式格式文件的后缀名是：（C） （A).asp （B).js （C).css （D).ss 6、下面哪一个标记是用于插入背景音乐的：（D） （A)<MUSIC> （B)<SWF> （C)<A> （D)<BGSOUND> 7、请指出下面正确的说法是：（C） （A)背景音乐标记符号通常插入在<body>…</body>之间 （B)可以在JavaScript语句之间插入背景音乐 （C)背景音乐最好使用MP3格式 （D)用SRC属性指明声音文件地址 8、下列哪些是视频文件。（BD） （Ａ）jpg文件 （Ｂ）avi文件 （Ｃ）mov文件 （Ｄ）mpg文件 9、HTML是一种专门用来设计网站的计算机标记语言(T F) 10、网站模版是指网站内容的总体结构和(A) A.页面格式总体规划 B.网页制作规划</p><h2>网页设计html期末试题 B卷</h2><p>绝密★启用前 学院 学年第二学期期末考试 级 专业（ ）《网页设计html 》试卷A 一、单项选择题 ( 本大题共 20 小题，每小题 1 分，共 20 分 ) 1、 域名系统能够将 ( ) A 、 域名转换成主机名 B 、 主机名转换成域名 C 、 主机名转换成 IP 地址 D 、 域名转换成 IP 地址 2、 “利用各种网页制作技术把客户的书面材料和相关图形有机地集成在一起”是下列哪一个国际流程的功能 ( ) A 、 页面布局和导航 B 、 图像制作 C 、 内容流程 D 、 综合内容 3、 下列关于重心平衡的描述 错误．．的是 ( ) A 、 页面重心所反映的是网页上各种元素分布的协调程度 B 、 表示网页必须对称布局 C 、 主要指左右重心的平衡 D 、 设计一个网页时必须考虑的因素 4、HTML 语言中 <strong> 标记的作用是 ( ) A 、 将文字变成粗体 B 、 将文字变成斜体 C 、 给文字加下划线 D 、 给文字加删除线 5、HTML 语言中的预排版标记是 ( ) A 、<body> B 、<nobr> C 、<pre> D 、 6、 用来链接至不同网页中书签的标记书写格式是 ( ) A 、<a name= “ object-name ” >text</a> B 、<a href= “ #object-name ” >text</a> C 、<a href= “ URL ” >text</a> D 、<a href= “ URL#object-name ” >text</a> 7、 在 DHTML 的四个主要组成部分中，可以实现为 HTML 文档定义一个与平台无关的程序接口功能的是 ( ) A 、CSS B 、DOM C 、 脚本语言 、HTML 4、0 8、 解释执行 JavaScript 的 是 ( ) A 、 服务器 B 、 编辑器 C 、 浏览器 D 、 编译器 9、列出所有浏览器能处理的 MIME 类型并引出所有已注册 Plug-in 的 JavaScript 对象是 （） A 、Document 对象 B 、Navigator 对象 C 、Form 对象 D 、Windon 对象 10、 以下 不属于．．． 专用网页制作工具的是 ( ) A 、Notepad B 、HomeSite C 、Dreamweaver D 、HotDog 11、 如题 11 图显示的是 FrontPage 操作界面的 ( ) A 、 模式切换栏操作界面，其工作的模式是 ( ) A 、 普通模式 B 、HTML 源代码模式 C 、 预览模式 D 、 框架网页的 HTML 源代码模式 13、 如题 13 图所示的 FrontPage 操作界面是 FrontPage 的 ( ) A 、 文件夹视图 B 、 网 页视网 C 、 报表视图 D 、 导航视图 14、 如题 14 图所示的 FrontPage 操作界面 , 图中标注①、②、③和④所示的区域中哪一个是工具栏 ( ) A 、 ① B 、 ② C 、 ③ D 、 ④ 15、 要想使用 Windows 的桌面快捷方式启动 FrontPage ，需要用鼠标双击下列哪一个 FrontPage 缺省创建的图标 ( ) 16、 在 FrontPage 中设置模板与向导的主要目的是 ( ) A 、 协助微软公司实现对用户使用该产品的技术支持 B 、 协助微软公司改进产品，提高市场竞争力 C 、 协助企业经营管理人员管理好自己的企业网站 D 、 协助网页开发、制作人员创建网站 17、 下列关于 Web 服务器默认文档的描述中正确的是 ( ) A 、 只能是 HTML 文件 B 、 只能是 HTML 、 asp 、 jsp 或 php 文件 C 、 只能是 asp 、 jsp 或 php 文件 D 、 可以是任何操作系统支持的文件 18、 使用 PWS 设置目录 ABC 的访问权限为“执行”权限，则 ( ) A 、 允许运行该目录中的任何应用程序 B 、 只能运行该目录中的脚本程序 C 、 只能运行该目录中的 Windows 二进制文件 (dll 和 exe 文件 ) D 、 只能运行该目录中的脚本引擎和 Windows 二进制文件 (dll 和 exe 文件 ) 19、 在下列 PWS 组件中，可以通过发送和接收邮件使应用程序之间进行快速、可靠和异步通讯的是 ( ) A 、 事务服务器 B 、 数据访问组件 C 、 消息队列服务器 D 、 个人 Web 服务器 20、 有如下一段代码，它是 ( ) <?xml version = “ 1、0 ” encoding = “ GB 2312 ” standalone= “ yes ” ?> <state coursename= “课程” > <courseid id= “ 0900 ” > <name> 网页设计与制作 </name> </courseid> </state></p><h2>个人网页制作实验报告</h2><p>湖南文理学院芙蓉学院个人主页课程设计报告 课题: 个人主页课程设计 姓名：吴珊 学号： 09120155 同组姓名：李芳 专业班级：计算机科学与技术0901班 指导教师：任盛 设计时间： 2012年6月13日</p><p>目录 1、实验目的与要求 (3) 2、主题介绍 (3) 3、工具的选择与介绍 (4) 3．1主要使用工具：Dreamweaver (4) 3．2图片处理软件：Photoshop (5) 4、网页设计实现的过程 (5) 4．1实验的分工 (5) 4．2主页的制作 (6) 4．3分页2制作（新疆美食）： (7) 5、个人网站截图 (9) 6、实验总结 (11) 7、参考文献 (11) 附录： (12) 附录一（主页部分代码，有删减）： (12) 附录二（分页2新疆美食部分代码，有删减）:------------------- 14</p><p>1、实验目的与要求 （1）自主选择主题实现一个关于主题的个人网站 （2）使用PS、Dreamweaver等软件对界面进行设置 （3）实现网页界面的美观、内容详尽丰富。 2、主题介绍 国家的历史有长有短，疆域有大有小，实力有强有弱，人口有多有少，民族构成、宗教信仰、政权性质和经济结构也有差异，故而各国的饮食文化是不一样的。 中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化；是中华各族人民在100多万年的生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。 民以食为天，中华上下五千年美食文化更是源远流长。所以这次我们选择了“美食”作为主题。美食，顾名思义就是美味的食物，贵的有山珍海味，便宜的有街边小吃。但是不是所有人对美食的标准都是一样的，其实美食是不分贵贱的，只要是自己喜欢的，就可以称之为美食。吃前有期待、吃后有回味的东西。美食遭遇心情的时候，美食已不仅仅是简单的味觉感受，更是一种精神享受。中国美食体现了中华民族的饮食文化传统，有许多独特之处。由于风味多样，四季有别。导致各地的美食各有千秋。 系因地理、气候、习俗、特产的不同形成了不同的地方风味,美食菜系的划分单就汉族的饮食特点而言，目前有四大菜系、八大菜系、十大菜系之说，而且划分系类仍有继续增加的趋势。如果按四大菜系分：有川菜、粤菜、苏菜和鲁菜。也有分八大菜系的。其中各大菜系交相辉映，各有千秋，成为了中华民族珍贵的文化瑰宝！ 本次的主题分为两大部分，新疆美食、湖南美食两个主要部分。通过这两个板块来介绍两个地方的美食，以突显南北两方的美食差异与特点。让大家通过我们这个网页，以我们的网页为窗口了解湖南美食，了解新疆美食，从而增强对我国的美食文化的了解。 湖南美食-----湖南菜特别讲究原料的入味，技法多样，有烧、炒、蒸、熏等方法，尤以“蒸”菜见长。最为精湛的是煨，原汁原味。且刀功精妙，形味兼美，菜肴千姿百态，变化无穷。 新疆美食-----新疆的主食是面条、馕和牛羊肉，菜以酸辣口味为主，洋葱、番茄、辣椒、土豆用大蒜头等是常用的蔬菜配料，当然也少不了孜然、辣椒粉、醋等调味料，所以新疆菜总是香喷喷、又酸又辣，特别开胃。总地来说，新疆各民族的人们都偏爱吃面食、奶制品、牛羊肉及各种瓜果.</p><h2>实验1 网页设计(HTML)实验指导1</h2><p>实习一网页设计（HTML） 一、实习目的 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中标记。 在工具栏中分两行，第一行是编辑器的工具栏，第二行是快捷插入标记的工具栏。 现在鼠标分别停留在第二行的工具上，注意提示并记录，以备后用； 特别强调颜色工具只是直观输入颜色编码（用在给颜色相关属性赋值中）。</p><h2>使用HTML制作网页(精)</h2><p>使用HTML制作网页 台州电大工程技术系钱莹 HTML（Hyper Text Mark-up Language ）即超文本标记语言，是 WWW 的描述语言。HTML语言是由 HTML标记组成的描述性文本，HTML 标记可以说明文字、图形、动画、声音、表格、链接等。 HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。 通过使用HTML，我们可以制作出精美的页面，同时，它也是设计功能更强大的电子商务网站的基础。 通过本章节的学习，要求同学掌握Tab标签，字标题标签，文本，链接，图片，表格等各类HTML标记的使用规则，熟悉标记中各类属性的含义及使用方法。 在本章节的学习中，我们将围绕HTML标记学习，通过一个实际案例制作（台州旅游网主页），依次学习Tab标签，字标题标签，文本，链接，图片，表格等各类HTML标记；在对以上标签进行介绍同时，辅以实际案例制作，使学习过程中能够理论与实际相结合，提高教学效果。 台州旅游网 Tab标签 < html>< /html>其间为所有的页面元素代码 < head>< /head> 放置页面的一些属性，如meta等 < title>< /title>设定网页的标题 < body>< /body>整个页面的主体部分，可设定背景色，文本等 例:< body bgcolor="颜色代码" background="图片地址" onload="" text=""</p><p>link="" vlink="已访问后的颜色" alink="单击时的颜色"> HTML标记示例 <html> <head> <title>台州旅游信息网 台州旅游信息网制作步骤一：熟悉（HTML,HEAD,TITLE,BODY）标记
