网页制作基础第2章
第2章 网页设计与制作-HTML语言基础
由“<”和“>”组成的就是标记。在HTML 语言中标记分“单标记”和“双标记”。
2.1 HTML概述
2.2 文本的编辑
2.2.3 标题显示等级
语法格式为：
<hn>…</hn>
n：表示不同级别的标题，n值可以是1-6中 的任意数字，其中1表示的标题字体最大。
可以用align属性设置对齐方式，常用的有 左对齐，居中，右对齐三种对齐方式。
2.2 文本的编辑
2.2.4 列表
在HTML中，列表常用的有“有序列表”和 “无序列表”。
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=“n”>
<li>项目1</li> <li>项目2</li>
……
<li>项目n</li>
</ul>
Type:设置符号形状，有实心圆、小正方形、 空心圆三种，具体如下：
n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
绝对路径：完整的描述文件位置的路径就 是绝对路径。对于绝对路径可以不需要知道其 他任何信息就可以判断出文件的位置。
相对路径：所谓相对路径,顾名思义就是当 前文档与目标的相对位置。例<src = "1.bmp">.
《网页设计与制作》课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
第2章 HTML入门(网页制作案例教程课件)
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
图2-2 2020/7/26 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
属性值，这里是颜色值(粉红色)
bgcolor就是<body>标记的属性，用于设置背景色
2020/7/26
2.1.2 标记及其属性
• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
</head>
<body> <font size=1>1号字体</font><p> <font size=2>2号字体</font><p> <font size=3 color=red>3号字色红体</font><p> <font size=4 color=blue>4号蓝色字体</font><p> <font size=5 color=orange>5号橙色字体</font><p> <font size=6 color=yellow face="黑体">6号黄色黑体字体</font><p> <font size=7 color=green face="隶书">7号绿色隶书字体</font><p> <font size=+2 color=purple face="宋体">+2号紫色宋体字体</font><p
Dreamweaver-CS6网页制作第2章
后退
定义在新建样式表文件
结束
2.2使用CSS规则美化文本
（2）单击“确定”按钮，弹出如下图所示的对话框
，定义样式文件名称为“mycss”保存在站点目录
“D:\mysite”文件夹中。
目录
前进
后退
保存新样式表文件“mycss”
结束
2.2使用CSS规则美化文本
（3）单击“保存”按钮，弹出“CSS规则定义”对 话框，保持默认值，单击“确定”按钮。在“属性 ”面板中，定义“title2”样式，大小为“16px”、 目录 颜色为“#960”、“粗体”，效果如下图所示：
中选择“D:\mysite\images\flying.gif”图像文件，
单击“确认”按钮，图像插入后通过标签编辑器将
“对齐”属性设置为“右”。
调整大小：宽度 为215像素，高 度为160像素
前进
后退
设置图像大小
结束
2.3添加图像
（4）使用快捷键插入图象：将插入光标移动到“立
志飞翔”部分的第五段文字“但我”前，使用组合 目录
对话框中选择“D:\mysite\images\flying.gif”图像
文件，单击“确认”按钮，图像插入后通过标签编
辑器将“对齐”属性设置为“左”。
前进
调整大小：宽度 为285像素，高 度为213像素
设置图像大小
后退 结束
2.3添加图像
（3）使用“插入”菜单插入图象：将插入光标移动
到“立志飞翔”部分的第三段文字“听着”前，选 择“插入”栏“常用” 类别中的 按钮，在对话框 目录
达到如图所示的效果，还要对“自我介绍”的内容
后退
制作列表，要在文档中添加水平线，编辑网页的外
《DW基础知识》PPT课件
课堂实例―创建和测试第一个html网页
在“记事本”窗口或者Dreamweaver网页中输入以 下内容：
<html> <head> <title>欢迎光临我的第一个网页</title> </head> <body> 这是第一个简单网页! </body> </html> 选择【文件】|【保存】命令，在弹出的“另存为”
描述 图片的源文件 提示文字 设置图片的宽度 设置图片的高度 设置图片的边框 垂直间距 水平间距 设置图片的对齐方式
文字标签
标签 <U> <B> <sup> <sub> <big> <small> <I> <code> <var> <s>
描述 下划线 粗体 上标 下标 大字号 小字号 斜体 等宽 声明变量 删除线
A、执行“站点/管理站点”命令，也可以使用快 捷键F8打开站点面板来建立一个站点，然后单 击“管理站点”按钮。执行命令后出现“管理 站点”对话框，单击“新建”按钮，在弹出的 菜单中选择“站点”。
B、设置站点名称：接着出现了一个建立站点的向 导，设置好站点的名字后单击“下一步”按钮。 （输入你想要的站点名称，这里输入home，其实 可以任意输入名称的，要注意的是，尽量不要用 中文命名，以免出现意想不到的麻烦！）
工作区设置对话框
首 选 参 数 对 话 框
（3）dw的窗口组成（参看教材p5-p9）
插入栏：又叫插入对象面板； 状态栏：提供了标签选择器（也 叫做标记符选择器）、窗口尺寸、 文件大小等网页信息
（4）dw菜单简介
《网页设计与制作》笔记_学习笔记
《网页设计与制作》笔记第一章：网页设计基础1.1网页设计的定义与重要性1.2网页设计的历史与发展1.3设计原则与最佳实践1.4用户体验的基本概念第二章：网页设计工具与技术2.1设计软件介绍（如Photoshop、Sketch）2.2前端开发工具（如HTML、CSS、JavaScript）2.3响应式设计与框架（如Bootstrap、Foundation）2.4版本控制与协作工具（如Git、GitHub）第三章：网页布局与结构3.1网页布局的基本概念3.2网格系统与布局设计3.3导航设计与信息架构3.4模块化设计与组件化开发第四章：色彩与字体选择4.1色彩理论与配色技巧4.2字体的选择与排版4.3色彩与品牌形象4.4可访问性与色彩使用第五章：网页内容与互动5.1内容策略与信息呈现5.2图像与多媒体的使用5.3互动设计与用户反馈5.4SEO基础与内容优化第六章：网页测试与上线6.1测试类型与测试工具6.2性能优化与加载速度6.3上线流程与维护建议6.4数据分析与用户行为追踪第1章：网页设计基础网页设计的定义与重要性网页设计是指为网站创建和布局视觉内容的过程。
这包括网页的整体外观、结构和交互功能。
网页设计不仅涉及视觉元素的排版和配色，还包括用户如何与网页互动。
一个好的网页设计能够提升用户的体验，增加网站的访问量和转化率。
重要性：1.吸引用户：优秀的网页设计能够第一时间吸引用户的注意，提高用户的留存率。
2.增加可用性：良好的设计帮助用户更容易找到他们所需的信息，减少用户的挫败感。
3.提升品牌形象：专业的网页设计能够增强品牌的可信度和专业形象。
4.搜索引擎优化：设计良好的网页更容易被搜索引擎抓取，从而提升网站在搜索结果中的排名。
考试要点：网页设计的定义及其组成部分网页设计对用户体验和品牌形象的影响网页设计在市场营销中的作用网页设计的历史与发展网页设计的起源可以追溯到20世纪90年代初。
当时网页主要是以文本为主，简单的超链接连接不同的信息。
第2章Dreamweaver CS6基础入门
2.3 使用DreamWeaver CS6制作简单网 页 2.3.2 HTML基础
（1）通常HTML页面均以DOCTYPE开始，它声明文档的类型，且之前不能有任何 内容（包括换行符和空格），否则将使文档声明无效。如果缺少DOCTYPE会导致 文件在浏览器中显示不正常。 文 档 的 结 构 说 明 （2）接着是<html>标记，以</html>结束。结构中包含三个顶层标签：<html>、 <head>和<body>。文档以<html>开始，以</html>结束，<head>和<body>嵌入其 中。 （3）在<head>和</head>标记的内容是文档头，用于描述页面的头部信息。所 有在<head>和</head>标记之间的内容都是不会显示在页面上的。 （4）<body>和</body>之间的内容是文档体，是HTML的主要部分，它包括了文 件所有的实际内容和绝大多数标记符号。页面上显示的任何东西都包含在这两 个标记之中。 。
文 化 动 态 嘉 州 画 派
嘉州文化长廊网站首页
民 间 艺 术
乌 木 文 化
佛 教 文 化
旅 游 文 化
饮 食 文 化
2.2 Dreamweaver CS6站点建设与管理 2.2.2 网站站点规划与创建
网站结构设计好后，为了让网站管理方便，还需要规划网站的目录结构。网站的目录是指用于存放网站相关 文件的文件夹。
2.3 使用DreamWeaver CS6制作简单网 页 2.3.3 CSS基础
介 绍
CSS（Cascading Style Sheet，层叠样式表）简称样式表， 用于为网页文档中的元素添加各种样式，如字体大小、 背景颜色、边框设置、列表格式等，起到了网页文档的 美化作用。 CSS是将格式规则存放在样式表中，网页通过对样式表的 引用为目标区域的元素添加样式。
网页设计与制作——JavaScript+jQuery标准教程 教案 第2章 JavaScript基础
电子商务网页设计与制作
授课教案
学年第学期
课前：
【教师布置调研任务】
调研主题：《了解JavaScrip的语法规则》
要求：以小组为单位，通过网络查找的方式了解JaVaSeriP的语法规则。
制作汇报PPT,提交到“微信群”。
【学生调研，教师线上指导】
学生采用线上调研的方式，开展调研。
教师使用“微信群”对学生进行指导。
（教师对各组调研成果进行评价】
教师查阅学生调研结果PPT,对每个小组的PPT进行评价，记录评价成绩，并挑选出优秀作品。
课后：
【学生使用JaVaSCriP代码设计一个根据分数评价等级的程序】
小组成员团结协作，练习使用JaVaSCriP代码的相关内容；使学生掌握使用JaVaSCriP 代码编程的能力。
教师使用“微信群”对学生进行指导。
填表说明：1本页可续页；2.教学方法如：项目教学、案例分析、分组讨论、角色扮演、启发引导等;
3.教学手段如：课件演示、模型讲解、实物讲解、挂图讲解、视频讲解、网络课程等。
第2章网页的基本结构
例如 ： <FONT size＝3 color＝red>属性示例 </FONT>
26 制作：计算机学院 邵黎
第二部分 第2章 网页的基本结构和段落、文字标记
需要注意： （1）并不是所有的标记都有属性，如换行标
记就没有。 （2）根据需要可以用该标记的所有属性，也
5 制作：计算机学院 邵黎
第二部分 第2章 网页的基本结构和段落、文字标记
超文本标记语言——HTML 在 HTML 中 被 制 定 的 文 件 格 式 （
Document Type Definition ，DTD ）有3 种： • Strict DTD（严格的DTD ） • Transitional DTD（过渡的DTD ） • Frameset DTD （框架的DTD ）
第二部分 第2章 网页的基本结构和段落、文字标记
2.2 HTML文件的基本结构
HTML是用标记来说明网络文件格式 的,并通过这些标记对文件的成分进行控制。 它实际上就是一种对超文本进行标记的语 言，其基本特征就是各种HTML的标记符 号。
21 制作：计算机学院 邵黎
第二部分 第2章 网页的基本结构和段落、文字标记
28 制作：计算机学院 邵黎
第二部分 第2章 网页的基本结构和段落、文字标记
在属性值中不要使用“<”和“>”，避免与 起始和结束标记混淆。因为浏览器解释 HTML文件时，是根据“<”与“>”来识别 标记的，然后再确定这两个符号中的内容是 否为HTML文件标记，若是则按其规则解读。 必须使用的话，或要在网页中显示“<” 或“>”，就要作为特殊字符，应使用实体字 符与分号（如用“<”或 “ > ;”来代替 “<”或“>” ）。
《新编网页制作三剑客培训教程》课件第2章
2.1 表格及操作表格的方式 2.2 利用表格的标准模式规划网页 2.3 利用表格的布局模式规划网页 2.4 上 机 实 训
第2章 使用表格规划网页
随着网络带宽的不断加大，人们已经不满足于由大量文字和少量图片内容构成的网页，而是更加热衷于多媒体网页，如：各种音乐网站、电影网站，以及实时的音、视频信息网站等。
2.4 上 机 实 训
1. 实训目的
创建一个名为“2-4.html”的网页。要求：实现最基本的网页布局效果，如图2-38所示。通过该实训练习，进一步熟练掌握表格标准模式的具体操作过程。本实训最终效果文件见“站点实例”(WebDemo\ch2\2-4.html)。
2.2.2 选择表格和单元格
2. 选择单个或多个行或列 将光标移动到表格的左边框或上边框，当光标变为“选择箭头”图标时，如图2-7所示，单击可以选择单个行或列，拖动鼠标可以选择多个行或列。
图2-7 “选择箭头”图标
2.2.2 选择表格和单元格
3. 选择单个单元格 选择单个单元格，可以执行下列操作之一。 将光标定位在目标单元格，然后在【文档】窗口左下角的【标签选择器】中选择【<td>】标签。 按<Ctrl>键，单击该单元格。 4. 选择多个单元格 选择多个单元格，可以执行下列操作之一。 从一个单元格拖拽(按左键不松开)到其他单元格。 将光标定位在目标单元格，然后按<Ctrl>键单击该单元格，接着按<Shift>键单击另一个单元格。这两个单元格定义的直线或矩形区域中的所有单元格都将被选中。 将光标定位在任意单元格，然后在菜单栏中选择【编辑】→【全选】命令(或按<Ctrl>+<A>组合键)，即可选中所有单元格。
第一~三章网页设计基础知识
1.1.2 Internet 1.什么是Internet Internet即“因特网”，它是目前全球 最大的、开放的计算机互联网络。是一个 基于TCP/IP的网络，由分布在各个国家的 数以万计的网络互联设备组成。
1.1.2 Internet 1.什么是Internet （1） Internet起源于美国国防部的高级 研究计划局，最初主要用于军事。 20世纪70年代迅速壮大，发展成科研和 教育机构服务的网络。 （2） Internet提供的服务：WWW服务 （网页浏览服务）、电子邮件、文件传输 （FTP）、在线聊天、网上购物、网络炒股、 联网游戏等等。
WWW服务器采用客户机/服务器的工作模式。
1.1.4 统一资源定位器URL 1.URL：是对Internet上资源的一种准确定位 机制，它以一种全世界统一的、唯一标识 来确定某个网络资源，可以访问Internet 任何一台主机或者主机上的文件。
1.1.4 统一资源定位器URL
2.URL的组成：检索资源所使用的协议类型、存放 资源的主机域名、资源所在的路径名与文件名。 3.URL的地址格式：应用协议类型://主机域名/路径/ 文件名
2.1 页面的构成元素
2. 页面的构成元素
设计是一个思考过程，制作是将思考表现出来。也就 是说设计是网页的核心和灵魂。 结合网页设计的过程，按照网页页面所包含的各个构 成元素分类阐述： 表现主题 网站名称和CI形象 设计风格 版式设计 色彩运用 网页导航 视听元素
2.2 主题设计
1. 网页制作工具 （1）文本编辑器---网页制作通常使用HTML语言， HTML文档可以使用多种文件编辑器进行编辑。 例如记事本、word、写字板等。 （2）FrontPage---是由微软公司推出的网页制作工 具。其界面与word极为相似。 （3）Dreamweaver---具有可视化编辑界面，用户 不必编写HTML源代码就可生成跨平台、跨浏览 器的网页，即使是初学者也能制作出专业水准的 网页，是网页设计者的首选工具。
《Dreamweaver网页设计》教案
《Dreamweaver网页设计》教案第一章：Dreamweaver简介1.1 课程目标：了解Dreamweaver的发展历程和功能特点掌握Dreamweaver的基本操作界面1.2 教学内容：Dreamweaver的历史和发展Dreamweaver的功能特点Dreamweaver的操作界面及基本操作1.3 教学方法：讲解与演示相结合学生实际操作练习1.4 教学资源：PowerPoint课件Dreamweaver软件1.5 教学评估：课堂问答学生操作练习情况第二章：网页制作基础2.1 课程目标：掌握HTML标签的使用学会使用Dreamweaver的代码视图2.2 教学内容：HTML标签的基本概念和使用方法Dreamweaver代码视图的操作方法常用的HTML标签及其功能2.3 教学方法：讲解与演示相结合学生实际操作练习2.4 教学资源：PowerPoint课件Dreamweaver软件2.5 教学评估：课堂问答学生操作练习情况第三章：图像和多媒体的使用3.1 课程目标：学会在网页中插入图像和多媒体文件了解图像和多媒体文件的基本属性设置3.2 教学内容：图像和多媒体文件在网页中的作用在Dreamweaver中插入图像和多媒体文件的方法图像和多媒体文件的基本属性设置3.3 教学方法：讲解与演示相结合学生实际操作练习3.4 教学资源：PowerPoint课件Dreamweaver软件图像和多媒体文件素材3.5 教学评估：课堂问答学生操作练习情况第四章：超的使用4.1 课程目标：学会创建和设置超了解超的类型及应用场景4.2 教学内容：超的概念和作用在Dreamweaver中创建和设置超的方法超的类型及应用场景4.3 教学方法：讲解与演示相结合学生实际操作练习4.4 教学资源：PowerPoint课件Dreamweaver软件超素材4.5 教学评估：课堂问答学生操作练习情况第五章：表格的使用5.1 课程目标：学会使用Dreamweaver创建和编辑表格了解表格的基本属性设置5.2 教学内容：表格在网页中的作用在Dreamweaver中创建和编辑表格的方法表格的基本属性设置5.3 教学方法：讲解与演示相结合学生实际操作练习5.4 教学资源：PowerPoint课件Dreamweaver软件表格素材5.5 教学评估：课堂问答学生操作练习情况第六章：CSS样式应用6.1 课程目标：掌握CSS样式的概念和作用学会在Dreamweaver中创建和应用CSS样式6.2 教学内容：CSS样式的基本概念Dreamweaver中的CSS面板操作创建和应用CSS样式的方法CSS选择器及属性设置6.3 教学方法：讲解与演示相结合学生实际操作练习6.4 教学资源：PowerPoint课件Dreamweaver软件CSS样式素材6.5 教学评估：课堂问答学生操作练习情况第七章：布局页面7.1 课程目标：学会使用Dreamweaver进行页面布局了解常用的页面布局方法7.2 教学内容：页面布局的基本概念使用Dreamweaver的布局工具进行页面布局常用的页面布局方法（如：固定布局、百分比布局、弹性布局等）7.3 教学方法：讲解与演示相结合学生实际操作练习7.4 教学资源：PowerPoint课件Dreamweaver软件页面布局素材7.5 教学评估：课堂问答学生操作练习情况第八章：表单的使用8.1 课程目标：学会在网页中创建和使用表单了解表单的基本属性设置8.2 教学内容：表单在网页中的作用在Dreamweaver中创建和编辑表单的方法表单的基本属性设置表单元素（如：文本框、复选框、单选按钮等）的使用8.3 教学方法：讲解与演示相结合学生实际操作练习8.4 教学资源：PowerPoint课件Dreamweaver软件表单素材8.5 教学评估：课堂问答学生操作练习情况第九章：Dreamweaver与服务器端编程9.1 课程目标：了解Dreamweaver与服务器端编程的关系学会在Dreamweaver中插入服务器端代码9.2 教学内容：服务器端编程语言（如：PHP、JavaScript等）的基本概念在Dreamweaver中插入服务器端代码的方法Dreamweaver与服务器端代码的交互方式9.3 教学方法：讲解与演示相结合学生实际操作练习9.4 教学资源：PowerPoint课件Dreamweaver软件服务器端代码素材9.5 教学评估：课堂问答学生操作练习情况第十章：综合案例实训10.1 课程目标：学会运用所学知识完成一个完整的网页设计项目提高实际操作能力和网页设计水平10.2 教学内容：网页设计项目的需求分析网页设计的基本流程综合运用所学知识完成网页设计项目10.3 教学方法：学生分组进行实际操作教师指导与解答疑问10.4 教学资源：Dreamweaver软件案例素材及设计工具10.5 教学评估：学生完成的项目成果展示重点和难点解析第一章：Dreamweaver简介1. Dreamweaver的功能特点2. Dreamweaver的操作界面及基本操作难点解析：Dreamweaver功能特点的深入理解，特别是与其它网页编辑器的区别。
第2章 网页设计与制作PPT课件
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
《网页制作基础教程》习题参考答案
第1章习题参考答案一、思考题1．答：因特网：即Internet，通常称为互联网或国际互联网。
ISP：因特网服务提供者。
ICP：因特网内容提供者。
WWW：World Wide Web的简称，有时也简称为Web，对应的中文名称为万维网，是因特网提供的一种服务。
IP地址：在因特网中，每一台主机都必须有一个IP地址。
IP地址由4个字节（32位二进制数）组成。
域名：用文字描述来代替IP地址，解决IP地址难以记忆的问题。
URL：统一资源定位器，是表示Internet上信息资源地址的统一格式。
超文本：是指包含指向其他Web页的超连接（Hyper link）文本格式。
超链接是指内嵌了Web地址（即网页的URL）的文字或图形。
网页：网页（Web Page）也称为Web页面，通常是使用HTML语言编写成的。
一个Web页面对应一个HTML文件，也可能还包括与该HTML文件相关的若干个图片文件、其他多媒体文件和脚本文件等。
网站：网站（Web Site）是由Web服务器上的一组相关的网页文件组成的，这些网页文件存放在Web服务器的一个或若干个指定的目录内。
主页：主页（HomePage）是网站中的一个特殊页面，是用户连接到网站时默认显示的第一个网页，即用户连接到网站时首先看到的页面。
2．答：从网页制作技术的角度来说，主页与其他网页没有什么本质的不同。
但在网站中，主页的文件名通常是固定的，例如index.htm或default.htm等，是在Web服务器软件中设臵的。
3．答：包括超文本标记语言（HTML）、层叠样式表（CSS）、脚本语言（JavaScript）、动态HTML（DHTML）、动态网页技术（ASP、PHP、JSP等）、可扩展标记语言（XML）等。
XML并不是被开发出来取代HTML的，而是用以弥补其不足的。
4．答：通常动态网页指得是，Web服务器能够通过HTML表单收集用户的信息，用户也可以通过网页获得自己想要的信息，一般采用数据库技术，实现网页的界面和内容的分离，并使得网站内容的更新和维护非常方便。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（2）过渡型（Transitional）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1transitional.dtd">
过渡型（Transitional）是一种要求相对宽松 的DTD过渡类型。允许使用HTML4.0中原有的用于 表现的标签和属性，但必须符合XHTML的语法要求 。而且此类型的文档对标签所处的位置和顺序不像 Strict那样严格，建议初学者采用此类型。
标题文字默认有加粗效果，h1元素的文字最大 ，h6元素的文字最小。
格式：
<h1> 文字 </h1>
<h2> 文字 </h2> <h3> 文字 </h3> <h4> 文字 </h4> <h5> 文字 </h5> <h6> 文字 </h6>
属性：
align属性：设置标题文字对齐方式，属性值为 left、right、center和justify。
2.3.4 文本格式化
2.3.1 文本基础
当HTML文件被浏览器显示时，页面内容必须 用HTML标记符修饰格式，而文件中的空格、制表 位和回车在浏览器中的显示效果与传统文本文件中 的效果不同。
2.3.1 文本基础
1. 段落
2. 标题
3. 换行 4. 水平线 5. 特殊字符
1. 段落
（1）严格型（Strict）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1strict.dtd">
严格型（Strict）是一种严格的DTD，浏览器 在解析时要求相对严格，不允许使用任何表现样式 的元素和属性，对于初学者而言不建议采用这种类 型。
2. DTD
DTD主要用于规定在该XHTML文档中使用标签 、属性和实体的规则。在XML中可以自定义标记， 而这些标记、属性的定义都可以在DTD中完成。由 于XHTML文档中不允许自定义标记，所以在所有相 同类型的XHTML文档中使用的DTD都是相同的。 DTD为XHTML文档定义了在该文档中应该包含的或 者可以包含的标记、属性和实体的一个列表，以及 它们之间的关系。
格式： <body>内容</body> 属性：
background属性：设置页面背景图片
bgcolor属性：设置页面背景颜色
text属性：设置文字颜色
link属性：设置链接颜色
alink属性：设置激活链接颜色
vlink属性：设置已访问过链接颜色 leftmargin属性：设置页面左边空白宽度 topmargin属性：设置页面顶端空白
3. 换行
在段落文本的特定位置处强行换行要使用br元 素，这样上下行文字之间没有空行间隔。在设计视 图按shift+enter键自动产生br元素。
格式： <br />
4. 水平线
网页上的一条水平线为一个hr元素。
格式：
<hr /> 属性：
width属性：水平线宽度，属性值可以是像素 数或百分比。 size属性：水平线高度。 align属性：水平线对齐方式，属性值为left、 right 和center。
所有的属性都必须被赋值。
所有元素的标签都必须闭合，即使是没有结束标 签的空标记也要闭合。
所有属性的属性值必须用引号括起来。 所有标签都必须合理嵌套。 不能在注释内容中使用“--”，“--”只能出现在 注释的开始与结束。
2.2 body元素
body元素是XHTML文档中的核心元素，用于 放置文档中各项内容（文字、图像、链接、表格、 表单、音频、视频等对象）。
3. 声明命名空间
xmlns即xHTML namespace的缩写，可以理解为命 名空间或名称空间。在XML中是允许用户自定义元素的，设 置不同命名空间，可以在不同命名空间中设置同名元素来代 表不同的含义。 XHTML必须符合XML规则，所以在XHTML中要定义 命名空间。而XHTML不允许用户自定义元素，因此在 XHTML中的命名空间的定义可以是一个统一的值，即 “/1999/xhtml”。在XHTML文档的根元 素中，必须使用xmlns属性声明文档的命名空间。如： <html xmlns="/1999/xhtml">
HTML 文档本身是文本格式的，用任何一种文 本编辑器都可以对它进行编辑。 普通HTML文档的文件扩展名为“.html”或 “.htm”。
2.1.2 XHTML
XHTML就是在HTML的基础上，针对XML进行 了扩展的语言。准确地说，XHTML是一种过渡技术 ，建立XHTML的目的就是实现HTML向XML的过渡 。
网页中一个段落文本为一个p元素，p元素之间 会产生空行。在设计视图中按回车键自动产生p元 素。
格式： <p> 文字 </p> 属性：
align属性：设置段落对齐属性，属性值为 left 、right、center和justify（两端对齐 ）。
2. 标题
网页中也有各级标题文本，用于描述不同级别 的文本信息，也是一种段落格式效果。XHTML使用 h1～h6元素来标示标题文本。标题元素也用于标明 一个网页中各个部分的层次关系。
1. 项目列表
2. 编号列表
3. 定义列表
1. 项目列表
项目列表，即无序列表，会在列表的每个项目 前加上列表符号（默认为圆点）。列表文字缩进显 示。
格式： <ul> <li>项目1</li>
<li>项目2</li>
<li>项目3</li>
Байду номын сангаас
</ul>
ul元素属性：
type属性：设置列表符号类型。值为disc（默认 ，圆点），square（方块），circle（圆圈）。
XHTML是网页制作中常用的一种结构标准语言 ，通常网页的内容可以用XHTML代码进行结构设计 。XHTML保留了HTML的大部分内容，并在此基础 上又增加了XML语言的基本规范和要求。
XHTML文档：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="/1999/xhtml">
2.1.1 HTML
1. HTML
2. HTML文件基本结构
1. HTML
当客户从WWW服务器读取到一个网页文件后 ，客户需要在自己的显示屏幕上将它正确无误地显 示出来。为保证每个人在屏幕上都能读到正确显示 的文件，必须以某种各类型的计算机或终端都能“ 看懂”的方式来描述文件，于是就产生了HTML— 超文本标记语言（Hype Text Markup Language ）。
标记符为英文字符串，不区分大小写，描述内 容代表的含义； 属性用于设置辅助的信息，而属性需要一个明 确的属性值来表示具体的信息。 标记符和属性、属性和属性之间用空格间隔。
2. HTML文件基本结构
HTML文件无论内容多少都有一个基本结构： <html> <head> <title>我第一个网页</title> </head> <body> <!--网页内容开始 --> <p>你好！！</p> <!--网页内容结束 --> </body> </html>
HTML是一种基本的WEB设计语言，用于描述 WEB页面的内容、格式等信息，现在的各种WEB 页面都是建立在HTML基础之上的。 HTML是一种标记语言，也就是使用标记符来 描述页面元素。 页面元素的基本格式为：
<标记符 属性="属性值">内容</标记符>
标记符为英文字符串，不区分大小写，描述内 容代表的含义； 属性用于设置辅助的信息，而属性需要一个明 确的属性值来表示具体的信息。 标记符和属性、属性和属性之间用空格间隔。
网页制作
第2章 XHTML
第2章 XHTML
2.1 XHTML基础
2.2 body元素
2.3 网页文本 2.4 网页图像 2.5 网页链接 2.6 网页表格 2.7 网页表单 2.8 网页多媒体
2.1 XHTML基础
2.1.1 HTML
2.1.2 XHTML
4. XHTML语法规范
XHTML是HTML向XML过渡的一种标记语言， 所以它必须符合XML文档的规范。 XHTML语法规范：
要定义文档类型，即在<!DOCTYPE>中所定义 的内容。 在根元素中设置xmlns属性，即命名空间。
所有元素和属性都必须小写。
XHTML规范中禁用了name属性，取而代之的是 id属性。
1. 文档类型
XHTML文档的第1行为<!DOCTYPE>元素，用 于定义文档的类型。DOCTYPE是document type （文档类型）的简写，用于设置当前文档所使用的 XHTML的版本。