第2章网页制作基础
合集下载
网页设计教程01-03网页设计基础-HTML基础-Dreamweaver cs3使用基础础.
2.2.2设置字型
格式：<b>受影响的文字</b> <i>受影响的文字</i> <tt>受影响的文字</tt> …… 说明：各种字型的标记有许多，但是格式都 一样。所不同的是标记名和需要受影响的文 字而已。
2.2.3特殊替换字符
在HTML文件中，有一些特殊字符是用来代表特定 意义的。例如小于（<）和大于（>）符号，是标 记指令专用的，但是当要在浏览器上显示出此类符 号时，就不能直接在代码中书写它们，而是利用以 下的一些特殊符号来替代它们。 <：替代小于符号（<）。 >：替代大于符号（>）。 "：替代双引号（"）。  ：替代不可分的空格。有时因为版面的关系 会将有空格的字符分成两行，此时就可以将两个字 符之间的空格定义为 。
2.1.2 HTML文件的基本结构
1．基本结构 HTML文件是一种纯文本格式的文件，其基本结构为： <html> <head> <title>网页的标题</title> </head> <body> 网页的内容 </body> </html> HTML文件必须以<html>开头，以</html>结尾。 HTML文件包括头部（head）和主体（body）。
2．字符格式标记 用来改变HTML文件文字的外观，增加文件的美观程度。主要有： （1）<font>：改变字体设置。 （2）<b>……</b>：粗体字。 （3）<i>……</i>：斜体字。 （4）<tt>……</tt>：标准打印机字体。 （5）<u>……</u>：文字带下划线。 （6）<strike>……</strike >：文字带删除线。 （7）<sub>……</sub >：下标。 （8）<sup>……</sup >：上标。 （9）<center>……</center>：居中对齐。 （10）<blink>……</blink>：文字闪烁。 （11）<big>……</big>：加大字型。 （12）<small>……</small>：缩小字型。 （13）<cite>……</cite>：参照。
第2章 网页设计与制作-HTML语言基础
例2.1 简单的HTML文档 <html> <head> <title>珠海欢迎您！</title> </head> <body> 这里是珠海悠游网，我们带您畅游珠海！ </body> </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">.
由“<”和“>”组成的就是标记。在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">.
第2章 HTML入门(网页制作案例教程课件)
2020/7/26
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
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）使用“插入”菜单插入图象：将插入光标移动
到“立志飞翔”部分的第三段文字“听着”前，选 择“插入”栏“常用” 类别中的 按钮，在对话框 目录
达到如图所示的效果，还要对“自我介绍”的内容
后退
制作列表，要在文档中添加水平线，编辑网页的外
后退
定义在新建样式表文件
结束
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）使用“插入”菜单插入图象：将插入光标移动
到“立志飞翔”部分的第三段文字“听着”前，选 择“插入”栏“常用” 类别中的 按钮，在对话框 目录
达到如图所示的效果，还要对“自我介绍”的内容
后退
制作列表，要在文档中添加水平线，编辑网页的外
《网页设计与制作》习题及答案
第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。
2.HTML中的所有标签都是有一对（<>）围住。
3.HTML网页的标题是通过（<title></title>）标签显示的。
4.（<hr>）是水平线标签，可以在页面生成一条水平线。
网页学习1-2
3. 网站所有文件所要介绍的全部内容做一个类似书籍目录的索引。主页上 的链接对应到一级页面，一级页面里的链接对应于二级页面，依次类推
4. 加入一些交互功能，如留言本、问卷调查、下载、搜索等 设计主页应注意的问题 主页上可供选择的链接不可太少也不可太多，太少会让访问者觉得没有 意思，太多又会吓倒访问者。 主页文件的大小一般不超过200K，否则打开主页的时间过长，会让浏览 者失去耐心的。 主页的在800*600的普通分辨率下应不出现水平滚动条。 主页的风格应与网站中的其他网页一致。
6.Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是 一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合 在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等 领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。 Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。 7.Fireworks Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生 了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时 也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、 生成光 标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和 一个相当完美的 网络图像生成器。
2.FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网 页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法， 简化了大量工作。 FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极 大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员， 使之功能更为强大。
网页制作基础教程第二章
上一页 返 回
2.5 网页中的字体
2.5.1 文字在网页设计中的作用
在平面设计的构成要素中有两大基本元素，一个是图形，另 一个就是文字。只通过图形来传递信息常常不能达到最佳的 效果，须借助文字才能进行最有效的说明。在网页中也是如 此。
具体来说，文字在网页中的作用可以体现为以下几点，例如 在优秀设计作品中体现出的文字的特性。
开头，这在传统媒体版式设计中称之为“下坠式”。 （2）引文的强调。 在进行网页文字编排时，常常会碰到提纲挈领性的文字，即
引文（也称为眉头）。
上一页Байду номын сангаас下一页
2.5 网页中的字体
（3）个别文字的强调。 如果将个别文字作为页面的诉求重点，则可以通过加粗、加
框、加下划线、加指示性符号、倾斜字体等手段有意识地强 化文字的视觉效果，使其在页面整体中显得出众而夺目。 4. 文字的颜色 在网页设计中，设计者可以为文字、文字链接、已访问链接 和当前活动链接选用各种颜色。 颜色的运用除了能够起到强调整体文字中特殊部分的作用之 外，对于整个文案的情感表达也会产生影响。
上一页 下一页
2.6 网页中表格的运用
2. 表格运用的注意点 表格的嵌套并不是表格处理最困难的地方，无论多复杂的版
面，悉心琢磨一番总能找到解决的办法。 因此，在设计页面表格的时候，应该做到以下几点。 （1）整个页面不要都套在一个表格里，尽量拆分成多个表
格。 （2）单一表格的结构尽量整齐。 （3）表格嵌套层次尽量要少。
上一页 下一页
2.5 网页中的字体
拉丁字母依据其基本结构可以分为3种类型。 （1）饰线体（Serif）：此类字体在笔画末端带有装饰性部
分，笔画精细对比明显，与中文的宋体具有近似形态特征， 饰线体在阅读时具有较好的易读性，适合于长篇幅文本段落。 （2）无饰线体（Sans Serif）：笔画的粗细对比不明显， 笔画末端没有装饰性部分，字体形态与中文的黑体相类似。 （3）装饰体（Decorative，也称Display）：即通常所 说的“花”体，由于此类字体拘泥于形式的装饰意味，阅读 时较为费力，易读性较差，只适合于标题或较短文本，类似 于中文的美术体和手写体。
2.5 网页中的字体
2.5.1 文字在网页设计中的作用
在平面设计的构成要素中有两大基本元素，一个是图形，另 一个就是文字。只通过图形来传递信息常常不能达到最佳的 效果，须借助文字才能进行最有效的说明。在网页中也是如 此。
具体来说，文字在网页中的作用可以体现为以下几点，例如 在优秀设计作品中体现出的文字的特性。
开头，这在传统媒体版式设计中称之为“下坠式”。 （2）引文的强调。 在进行网页文字编排时，常常会碰到提纲挈领性的文字，即
引文（也称为眉头）。
上一页Байду номын сангаас下一页
2.5 网页中的字体
（3）个别文字的强调。 如果将个别文字作为页面的诉求重点，则可以通过加粗、加
框、加下划线、加指示性符号、倾斜字体等手段有意识地强 化文字的视觉效果，使其在页面整体中显得出众而夺目。 4. 文字的颜色 在网页设计中，设计者可以为文字、文字链接、已访问链接 和当前活动链接选用各种颜色。 颜色的运用除了能够起到强调整体文字中特殊部分的作用之 外，对于整个文案的情感表达也会产生影响。
上一页 下一页
2.6 网页中表格的运用
2. 表格运用的注意点 表格的嵌套并不是表格处理最困难的地方，无论多复杂的版
面，悉心琢磨一番总能找到解决的办法。 因此，在设计页面表格的时候，应该做到以下几点。 （1）整个页面不要都套在一个表格里，尽量拆分成多个表
格。 （2）单一表格的结构尽量整齐。 （3）表格嵌套层次尽量要少。
上一页 下一页
2.5 网页中的字体
拉丁字母依据其基本结构可以分为3种类型。 （1）饰线体（Serif）：此类字体在笔画末端带有装饰性部
分，笔画精细对比明显，与中文的宋体具有近似形态特征， 饰线体在阅读时具有较好的易读性，适合于长篇幅文本段落。 （2）无饰线体（Sans Serif）：笔画的粗细对比不明显， 笔画末端没有装饰性部分，字体形态与中文的黑体相类似。 （3）装饰体（Decorative，也称Display）：即通常所 说的“花”体，由于此类字体拘泥于形式的装饰意味，阅读 时较为费力，易读性较差，只适合于标题或较短文本，类似 于中文的美术体和手写体。
《网页设计与制作》笔记_学习笔记
《网页设计与制作》笔记第一章：网页设计基础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章网页的基本结构
<标记 属性1=属性值 属性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文件标记，若是则按其规则解读。 必须使用的话，或要在网页中显示“<” 或“>”，就要作为特殊字符，应使用实体字 符与分号（如用“<”或 “ > ;”来代替 “<”或“>” ）。
例如 ： <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文件标记，若是则按其规则解读。 必须使用的话，或要在网页中显示“<” 或“>”，就要作为特殊字符，应使用实体字 符与分号（如用“<”或 “ > ;”来代替 “<”或“>” ）。
网页制作课程知识点归纳
《网页制作》复习题）第1章网页制作概况网页的概念网页是用HTML（超文本编辑语言）语言编写，通过WWW传播，并被WEB浏览器翻译成为可以显示出来的集文本、超链接、图片、声音和动画、视频等信息元素为一体的页面文件。
网页HTML文件与web浏览器间的关系理参照P5首页和主页的异同点首页与主页的区别:浏览网站时最先访问的页为首页，一般为欢迎信息，通过链接再进入主页（例如：榕树下网站）。
主页是整个网站的导航中心（例如：163网站）。
有些网站首页即主页。
网页制作的常用工具软件有哪些FrontPage、网页制作三剑客（Dreamweaver与Flash、Fireworks并称为Macromedia的网页制作三剑客）、Photoshop ……网页正文区<BODY></BODY>和文件头<HEAD></HEAD>的位置关系，文件头内的唯一一个必须出现的标记是哪一个标记？Title标记HTML文件的基本框架：<HTML>文件开始<HEAD>表头区开始<TITLE>….</TITLE>标题区</HEAD>表头结束<BODY>本文区开始（注：书上写本文区，本人认为应是文本区，待确认）本文区内容（注：书上写本文区，本人认为应是文本区，待确认）</BODY>本文区结束（注：书上写本文区，本人认为应是文本区，待确认）</HEML>文件结束单标记和双标记的概念，HTML标记中哪些是单标记，哪些是双标记？P5起单标记指令（由<标记指令>构成），如：<p>、<Hn>、<Br>、<Hr>、<input>、<link>……双标记指令（由<起始标记></结束标记>构成），如：< HEAD > </ HEAD >……注释语句的含义，其正确书写格式HTML标记的常用属性的含义，例如大小尺寸、对齐方式、颜色值属性的书写方式在HTML 文件中实现换段和强制换行的不同，及分别使用哪个标记段落标记（<P></P>）与换行标记（<br>）<P>是HTML格式中特有的段落元素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第16页
物流网络技术
3.1 网页与网站 一、网页与网站的概念
网 页？
网站？ 再想想
第17页
物流网络技术
图片
文字、链接
第18页
物流网络技术
网站是什么呢
第19页
物流网络技术
二、静态页和动态页
思考？
什么是静态 网页呢？
什么 又是 动态 网页 呢？
第20页
物流网络技术
3.说明
<BODY>标签可以设置一些属性，形式为： <BODY bgcolor=#rrggbb text=#rrggbb link=#rrggbb alink=#rrggbb vlink=#rrggbb> 其中： bgcolor背景颜色 text 非链接文字的颜色 link 链接文字的颜色 alink正被点击的链接文字的颜色 vlink 已经点击(访问)过的链接文字的颜色
第47页
物流网络技术
2.文字布局
换行<BR> 一个段落中可以包含多个行，可以使用<BR> 标签来强制文字换行。一般情况行与行之间的 间隔比段与段之间的间隔要小。 注意：如果不使用段落标签指出从哪里开始新 的一段或一行，那么显示时文本就会连成一整 块，而不管你在源文件中输入了多少个回车符。 一般情况根据浏览器窗口的宽度，当一行太长 时，会自动换行。
第44页
物流网络技术
修饰举例
网页内容
<HTML><HEAD> <TITLE>文字的修饰</TITLE> </HEAD> <BODY> <H1>这是标题字体H1</H1> <H6>这是标题字体H6</H6> <P><FONT SIZE=5 FACE="楷体">这是大小为 <BIG>5<SMALL>的楷体字</FONT> <P>本教材讨论的是：<B>动态<U>网页</B><I>制作</I></U> <P><FONT COLOR=#ff0000>这是红色的文字</FONT> </BODY> </HTML>
（2）动态网页 动态网页其实就是建立在B/S架构上的服务器端 脚本程序。在浏览器端显示的网页是服务器端程序 运行的结果。
第23页
物流网络技术
静态网页和动态网页的区别
静态网页与动态网页的区别在于Web服务器对它们 的处理方式不同。 当Web服务器接收到对静态网页的请求时，服务器直 接将该页发送给客户浏览器，不进行任何处理。如果接 收到对动态网页的请求，则从Web服务器中找到该文件， 并将它传递给一个称为应用程序服务器的特殊软件扩展， 由它负责解释和执行网页，将执行后的结果传递给客户 浏览器。
第25页
物流网络技术
3.2 超文本标记语言
HTML标签 所谓HTML标签，由3部分组成：左尖括号“＜”， “标签名称”，和右尖括号“＞”。标签通常是成对 出现的，分别称为“开始标签”和“结束标签”，结 束标签的左尖括号后加一个斜杠符号“/”。 定义属性 在各种HTML标签中，常常还可以定义一些属性，这些 属性用于指出文档元素的一些特性，如背景颜色、字 体大小、对齐方式等，指定文档元素属性的附加信息 一般放在相应的“开始标签”中。
第14页
物流网络技术
学习要求
了解网页与网站的区别与联系； 熟悉HTML文档格式和常用标签； 了解常用的主页制作工具
第15页
物流网络技术
本章目录 3.1 网页与网站 3.2 超文本标记语言 3.2.1 第一个HTML文档 3.2.2 文字修饰与布局 3.2.3 加入其它网页元素 3.2.4 框架 3.2.5 使用表单 3.3 主页制作工具 本章习题
网页主体标签 网页结束标签
第31页
物流网络技术
3.说明
<HTML>…</HTML>开始和结束标签 <HEAD>…</HEAD>头部信息，可以包含标 题(TITLE)，媒体环境(META)等说明信息,客 户端脚本也可放在这一部分。 <BODY>…</BODY>网页主体部分。
第32页
物流网络技术
第43页
物流网络技术
1.修饰方法
标记文字 对于文字还有一些常用的修饰，即加粗、斜体和加下 划线等。对此，HTML中设计了几个独立的标签，使用 形式如下： <B>需要加粗的文字</B> <I>需要显示成斜体的文字</I> <U>需要添加下划线的文字</U> 以上三个标签可重叠使用。如：<B>动态<U>网页 </B><I>制作</I></U>，将使“动态”两字加粗显示， “网页”两字加粗并加下划线，“制作”两字显示成 斜体并加下划线。
第24页
物流网络技术
3.2 超文本标记语言
超文本 一般把通过在文本中插入链接把相关文本组织在一起 而形成的文档称为超文本(hypertext)。通常超文本使用 超文本标记语言来描述。 超文本标记语言 超文本标记语言(Hyper Text Makeup Language，简称 HTML)是一种用来创作万维网页面的描述语言，它使 用HTML标签来定义文档的格式、组成和链接关系，供 浏览器解释执行。
第40页
物流网络技术
1.修饰方法
文字颜色(FONT COLOR) 指使用<FONT>标签的COLOR属性设置文字的颜色。 形式如下： <FONT COLOR=#rrggbb>文字</FONT> 其中：rrggbb为16进制值，表示组成颜色的RGB三原 色的对比关系，对常用的颜色，可以使用名称来代替 式中的“#rrggbb”，对应关系为： Black(000000),Olive(808000),Red(ff0000),Blue(0000 FF),Maroon(800000),Navy(000080),Gray(808080),Li me(00ff00),Fuchsia(ff00ff),White(ffffff),Green(008000) ,Purple(800080),Silver(C0C0C0),Yellow(ffff00),Aqua( 00ffff)。
第51页
物流网络技术
第42页
物流网络技术
三种文字的修饰方法有一个共同点就是都使用 标签<FONT>把要修饰的文字括起来，所不同的 是使用不同的属性，即：
SIZE表示大小 COLOR表示颜色 FACE表示字体
通常这几个属性可以同时使用，例如要用6号 大小红色显示“动态网页”这几个字时，形式如下：
<FONT SIZE=6 COLOR=Red>动态网页</FONT>
第37页
物流网络技术
3.2.2 文字修饰与布局
1.修饰方法 标题文字 文字大小 文字颜色 定义字体 标记文字 2.文字布局 段落 换行 文字对齐 预格式化文本
第38页
物流网络技术
1.修饰方法
标题文字 (Header) 指使用<H>标签将某些文字设置成标题，形式 如下： <Hn>作为标题的文字</Hn> 其中n为1到6的数字，根据n的大小不同，将显 示出不同大小的黑体字。H1最大，H6最小。 标题文字独立占一行，不受段落标记的影响。
第48页
物流网络技术
2.文字布局
文字对齐 可以以段落为单位设置文字的对齐方式，形式 如下：
<P ALIGN=对齐方式>文字</P>
其中：对齐方式有left、center和right，分别表 示左对齐、居中对齐和右对齐。默认为left表示 左对齐。标题文字也有相应的属性，使用形式 为：
<H1 ALIGN=对齐方式>标题文字</H1>
第49页
物流网络技术
2.文字布局
文字对齐 如果需要将文字或其它对象居中对齐，也可以 使用<center>标签，形式如下： <center>要居中的文字或对象</center> 注意：标题不能作为段落的一部分，也不受段 落标记的影响。
第50页
物流网络技术
3.2.3 加入其它网页元素
网页中除了一般的文字外，通常还有一些其它对象，如线 条、图片、表格等。 要在HTML中插入各种对象，通常需要指出三个内容：即 标签名称、标签属性及提示信息。 以下分别进行讨论： 1.插入水平线 2.加入超级链接 3.加入图像 4.插入表格
第35页
物流网络技术
调试HTML代码
总有一些时候会忘了输入某些代码或敲错某些符号，这 时Web页可能会变得非常滑稽。通过反复的浏览，比较 出现的效果与预想效果的不同点，从中发现存在的错误， 这一过程称为调试。
第36页
物流网络技术
调试HTML代码
常见的错误有标签名称书写错误、标签的属性书写错误、 结束标签遗忘或书写错误等。如例3-1第3行中若结束位 置的</title>遗忘了或写成<title>，则在窗口的标题 栏中将看到不正确的内容。只要仔细观察显示结果，不难 发现其中的错误。
第41页
物流网络技术
1.修饰方法 定义字体(FONT FACE)
指使用<FONT>标签的FACE属性设置文字的 字体。形式如下： <FONT FACE=“字体”>需设置字体的文字 </FONT> 其中：字体为Arial、Times、宋体、楷体等。 值得注意的是，当别的机器访问你的网页时， 在浏览器上是否能按照你所设置的字体显示， 取决于浏览器所在的机器中是否安装了相应的 字体。
物流网络技术
3.1 网页与网站 一、网页与网站的概念
网 页？
网站？ 再想想
第17页
物流网络技术
图片
文字、链接
第18页
物流网络技术
网站是什么呢
第19页
物流网络技术
二、静态页和动态页
思考？
什么是静态 网页呢？
什么 又是 动态 网页 呢？
第20页
物流网络技术
3.说明
<BODY>标签可以设置一些属性，形式为： <BODY bgcolor=#rrggbb text=#rrggbb link=#rrggbb alink=#rrggbb vlink=#rrggbb> 其中： bgcolor背景颜色 text 非链接文字的颜色 link 链接文字的颜色 alink正被点击的链接文字的颜色 vlink 已经点击(访问)过的链接文字的颜色
第47页
物流网络技术
2.文字布局
换行<BR> 一个段落中可以包含多个行，可以使用<BR> 标签来强制文字换行。一般情况行与行之间的 间隔比段与段之间的间隔要小。 注意：如果不使用段落标签指出从哪里开始新 的一段或一行，那么显示时文本就会连成一整 块，而不管你在源文件中输入了多少个回车符。 一般情况根据浏览器窗口的宽度，当一行太长 时，会自动换行。
第44页
物流网络技术
修饰举例
网页内容
<HTML><HEAD> <TITLE>文字的修饰</TITLE> </HEAD> <BODY> <H1>这是标题字体H1</H1> <H6>这是标题字体H6</H6> <P><FONT SIZE=5 FACE="楷体">这是大小为 <BIG>5<SMALL>的楷体字</FONT> <P>本教材讨论的是：<B>动态<U>网页</B><I>制作</I></U> <P><FONT COLOR=#ff0000>这是红色的文字</FONT> </BODY> </HTML>
（2）动态网页 动态网页其实就是建立在B/S架构上的服务器端 脚本程序。在浏览器端显示的网页是服务器端程序 运行的结果。
第23页
物流网络技术
静态网页和动态网页的区别
静态网页与动态网页的区别在于Web服务器对它们 的处理方式不同。 当Web服务器接收到对静态网页的请求时，服务器直 接将该页发送给客户浏览器，不进行任何处理。如果接 收到对动态网页的请求，则从Web服务器中找到该文件， 并将它传递给一个称为应用程序服务器的特殊软件扩展， 由它负责解释和执行网页，将执行后的结果传递给客户 浏览器。
第25页
物流网络技术
3.2 超文本标记语言
HTML标签 所谓HTML标签，由3部分组成：左尖括号“＜”， “标签名称”，和右尖括号“＞”。标签通常是成对 出现的，分别称为“开始标签”和“结束标签”，结 束标签的左尖括号后加一个斜杠符号“/”。 定义属性 在各种HTML标签中，常常还可以定义一些属性，这些 属性用于指出文档元素的一些特性，如背景颜色、字 体大小、对齐方式等，指定文档元素属性的附加信息 一般放在相应的“开始标签”中。
第14页
物流网络技术
学习要求
了解网页与网站的区别与联系； 熟悉HTML文档格式和常用标签； 了解常用的主页制作工具
第15页
物流网络技术
本章目录 3.1 网页与网站 3.2 超文本标记语言 3.2.1 第一个HTML文档 3.2.2 文字修饰与布局 3.2.3 加入其它网页元素 3.2.4 框架 3.2.5 使用表单 3.3 主页制作工具 本章习题
网页主体标签 网页结束标签
第31页
物流网络技术
3.说明
<HTML>…</HTML>开始和结束标签 <HEAD>…</HEAD>头部信息，可以包含标 题(TITLE)，媒体环境(META)等说明信息,客 户端脚本也可放在这一部分。 <BODY>…</BODY>网页主体部分。
第32页
物流网络技术
第43页
物流网络技术
1.修饰方法
标记文字 对于文字还有一些常用的修饰，即加粗、斜体和加下 划线等。对此，HTML中设计了几个独立的标签，使用 形式如下： <B>需要加粗的文字</B> <I>需要显示成斜体的文字</I> <U>需要添加下划线的文字</U> 以上三个标签可重叠使用。如：<B>动态<U>网页 </B><I>制作</I></U>，将使“动态”两字加粗显示， “网页”两字加粗并加下划线，“制作”两字显示成 斜体并加下划线。
第24页
物流网络技术
3.2 超文本标记语言
超文本 一般把通过在文本中插入链接把相关文本组织在一起 而形成的文档称为超文本(hypertext)。通常超文本使用 超文本标记语言来描述。 超文本标记语言 超文本标记语言(Hyper Text Makeup Language，简称 HTML)是一种用来创作万维网页面的描述语言，它使 用HTML标签来定义文档的格式、组成和链接关系，供 浏览器解释执行。
第40页
物流网络技术
1.修饰方法
文字颜色(FONT COLOR) 指使用<FONT>标签的COLOR属性设置文字的颜色。 形式如下： <FONT COLOR=#rrggbb>文字</FONT> 其中：rrggbb为16进制值，表示组成颜色的RGB三原 色的对比关系，对常用的颜色，可以使用名称来代替 式中的“#rrggbb”，对应关系为： Black(000000),Olive(808000),Red(ff0000),Blue(0000 FF),Maroon(800000),Navy(000080),Gray(808080),Li me(00ff00),Fuchsia(ff00ff),White(ffffff),Green(008000) ,Purple(800080),Silver(C0C0C0),Yellow(ffff00),Aqua( 00ffff)。
第51页
物流网络技术
第42页
物流网络技术
三种文字的修饰方法有一个共同点就是都使用 标签<FONT>把要修饰的文字括起来，所不同的 是使用不同的属性，即：
SIZE表示大小 COLOR表示颜色 FACE表示字体
通常这几个属性可以同时使用，例如要用6号 大小红色显示“动态网页”这几个字时，形式如下：
<FONT SIZE=6 COLOR=Red>动态网页</FONT>
第37页
物流网络技术
3.2.2 文字修饰与布局
1.修饰方法 标题文字 文字大小 文字颜色 定义字体 标记文字 2.文字布局 段落 换行 文字对齐 预格式化文本
第38页
物流网络技术
1.修饰方法
标题文字 (Header) 指使用<H>标签将某些文字设置成标题，形式 如下： <Hn>作为标题的文字</Hn> 其中n为1到6的数字，根据n的大小不同，将显 示出不同大小的黑体字。H1最大，H6最小。 标题文字独立占一行，不受段落标记的影响。
第48页
物流网络技术
2.文字布局
文字对齐 可以以段落为单位设置文字的对齐方式，形式 如下：
<P ALIGN=对齐方式>文字</P>
其中：对齐方式有left、center和right，分别表 示左对齐、居中对齐和右对齐。默认为left表示 左对齐。标题文字也有相应的属性，使用形式 为：
<H1 ALIGN=对齐方式>标题文字</H1>
第49页
物流网络技术
2.文字布局
文字对齐 如果需要将文字或其它对象居中对齐，也可以 使用<center>标签，形式如下： <center>要居中的文字或对象</center> 注意：标题不能作为段落的一部分，也不受段 落标记的影响。
第50页
物流网络技术
3.2.3 加入其它网页元素
网页中除了一般的文字外，通常还有一些其它对象，如线 条、图片、表格等。 要在HTML中插入各种对象，通常需要指出三个内容：即 标签名称、标签属性及提示信息。 以下分别进行讨论： 1.插入水平线 2.加入超级链接 3.加入图像 4.插入表格
第35页
物流网络技术
调试HTML代码
总有一些时候会忘了输入某些代码或敲错某些符号，这 时Web页可能会变得非常滑稽。通过反复的浏览，比较 出现的效果与预想效果的不同点，从中发现存在的错误， 这一过程称为调试。
第36页
物流网络技术
调试HTML代码
常见的错误有标签名称书写错误、标签的属性书写错误、 结束标签遗忘或书写错误等。如例3-1第3行中若结束位 置的</title>遗忘了或写成<title>，则在窗口的标题 栏中将看到不正确的内容。只要仔细观察显示结果，不难 发现其中的错误。
第41页
物流网络技术
1.修饰方法 定义字体(FONT FACE)
指使用<FONT>标签的FACE属性设置文字的 字体。形式如下： <FONT FACE=“字体”>需设置字体的文字 </FONT> 其中：字体为Arial、Times、宋体、楷体等。 值得注意的是，当别的机器访问你的网页时， 在浏览器上是否能按照你所设置的字体显示， 取决于浏览器所在的机器中是否安装了相应的 字体。