山东专升本计算机基础 --- HTML 简介、网页制作、网页布局

文章目录

- HTML 简介
- - 1、HTML 语言概述
  - 2、常用的 HTML 标记
  - - （一）文本布局
    - （二）文字格式
    - （三）图片
    - （四）超链接
    - （五）表格
- 网页制作
- 网页制作
- - 1、Dreamweaver CS5概述（ $\color{red}{了解工具名字}$ ）
  - 2、创建与管理站点（ $\color{red}{了解功能}$ ）
  - 3、插入对象
  - - （一）插入文本
    - （二）格式化文本
    - （三）插入图像
    - （四）图文混排
    - （五）插入媒体对象
  - 4、创建超链接
  - - （一）超链接的概念
    - （二）创建内部链接或外部链接
    - （三）创建 $\color{red}{锚链接}$
    - （四）创建空链接
    - （五）创建 $\color{red}{电子邮件超链接}$
- 网页布局

HTML 简介

$\color{WildStrawberry}{HTML\ 文件是一种纯文本文件，可以使用任何文本处理软件（如记事本）来创建或处理\ HTML\ 文件。}$

1、HTML 语言概述

HTML 文件标记

Internet 中的每一个 HTML 文件都包括 $\color{WildStrawberry}{文本内容和\ HTML\ 标记两部分}$ 。其中，HTML 标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。

多数 HTML 标记的书写格式如下：
```
<标记名> 文本内容 </标记名>
```
标记名写在 < > 内。 $\color{WildStrawberry}{多数\ HTML\ 标记同时具有起始和结束标记，并且成对出现，但也有些\ HTML\ 标记没有结束标记。}$

$\color{WildStrawberry}{HTML\ 标记不区分大小写。}$

某些HTML标记还具有一些属性，指定对象的特性，如背景颜色、文本字体及大小、对齐方式等。属性一般放在“起始标记”中：
```
<标记名 属性1=值1 属性2=值2 …> 文本内容 </标记名>
```
标记名和属性之间用空格分隔。

例如：
```
计算机
```
HTML 网页的结构

<html>
  <head> <!--这是头部-->
    <title>我的第一个Web页</title><!--这是网页标题-->
  </head>
  <body><!--这是主体-->
    <h1>欢迎进入HTML世界！</h1><!--这是标题-->
    <p>
      这里我们首先介绍HTML语言的基本知识和语法。
      然后，讲授如何使用HTML语言编写您的Web页面。
    </p>
  </body>
</html>

在这里插入图片描述

一般HTML文件都是以开头，以结束。

其文件结构由以下两部分组成：

头部（Head）

$\color{WildStrawberry}{HTML\ 文件的头部由\ <html>\ 和\ </html>\ 标记定义。}$

文件的标题、语言字符集信息等都放在头部信息中。最常用到的标记是 $\color{WildStrawberry}{<title>...</title>}$ ，定义网页文件标题，网页文件被打开后，标题将出现在浏览器标题栏中
正文主体（Body）

正文主体是 HTML 文件的核心内容，由 $\color{WildStrawberry}{<body>}$ 和 $\color{WildStrawberry}{</body>}$ 标记定义。标记具有一些常用的属性，格式如下：
```
<body bgcolor=#n color=#n>
```
- bgcolor 为背景颜色
- color 为文本颜色。
- n为六位十六进制数。
网页使用背景图像，格式如下：
```
<body background="路径/图片文件名">…</body>。
```

2、常用的 HTML 标记

（一）文本布局

段落标记

$\color{WildStrawberry}{...\ 标记指定文档中一个独立的段落。}$ align 属性控制段落对齐方式，其值可以是 left、center、right、justify，分别表示左对齐、居中、右对齐和两端对齐，默认值为左对齐。使用格式如下：
```
 … 
```
换行标记

$\color{red}{ \ 标记可以强制文本换行。该标记只有起始标记。}$
水平线标记

$\color{red}{水平线标记\ <hr>\ 用于在网页中插入一条水平线。}$

（二）文字格式

HTML 语言中用于文字格式化的标记有：

$\color{red}{标题标记\ <hn>}$

格式为：
```
<hn 属性 = 属性值> 标题 </hn> 
```
其中 n 说明大小级别，取值范围为 1 到 6 的数字。把标题分为 6 级，即 h1～h6， $\color{red}{其中\ h1\ 文字最大，h6\ 文字最小}$ 。
$\color{red}{字体标记\ }$

字体标记用来对文字格式进行设置，主要属性：
- $\color{red}{size\ 属性}$
 
 控制文字的大小，格式如下：
```
...
```
- $\color{red}{color\ 属性}$
 
 控制文字的颜色，格式如下：
```
...
```
 其中n是一个十六进制的六位数。
- $\color{red}{face\ 属性}$
 
 指明文字字体，格式如下：
```
...
```
字形标记

字形标记设置文字的粗体、斜体、下划线、上标、下标等。

（三）图片

$\color{red}{<img>\ 标记}$ 用于设置网页图片。具有以下属性：

src 属性：

指明图片文件所在的位置。
```
<img src=URL>
```
其中 $\color{red}{URL\ 指图片文件存放的位置。}$
alt 属性：

图片的文字说明。
```
<img src=URL alt=说明文字>
```
width 和 height：

设置图片显示区域的宽和高。
```
<img src=URL width=n1 height=n2>
```
border 属性：

设置图片文件的边框。
```
<img src=URL border=n>
```
其中n为像素数。
align属性：

设置图片相对于文本的位置关系。
```
<img src=URL align=对齐方式>
```

（四）超链接

HTML语言中， $\color{red}{<a>...</a>\ 标记用于设置网页中的超链接，href 属性指明被超链接的文件地址。}$

<a href=URL>超链接文本</a>

用于表示超链接的文本一般显示为蓝色，并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该超链接的地址。

（五）表格

在网页中插入表格，需要用到一组HTML标记。定义表格的有关标记：

标签	定义
$\color{red}{<table>...</table>}$	$\color{red}{定义表格区域}$
$\color{black}{<caption>...</caption>}$	定义表格标题
$\color{black}{<th>...</th>}$	定义表格头
$\color{red}{<tr>...</tr>}$	定义表格行
$\color{black}{<td>...</td>}$	定义表格单元格

网页制作

1、Dreamweaver CS5概述（ $\color{red}{了解工具名字}$ ）

Adobe Dreamweaver CS5 是一款集 $\color{red}{网页制作和网站管理}$ 于一身的所见即所得网页编辑器。

2、创建与管理站点（ $\color{red}{了解功能}$ ）

3、插入对象

（一）插入文本

文本是网页中不可缺少的内容之一，是网页中最基本的对象。由于其占用的存储空间非常小，所以在一些大型网站中，文字占有不可替代的主导地位。而网页中的文本一般以普通文字、段落或者各种项目符号等形式显示。

在网页中输入文本有以下三种方法：

直接输入法：

在页面需要插入文本的地方单击，出现光标，直接输入文本即可。
复制粘贴法：

在 Dreamweaver 的 “编辑” 菜单中有两个粘贴命令： “粘贴” 和 “选择性粘贴”。当选择 “选择性粘贴” 时，将出现一个包含几个粘贴格式设置选项的对话框。
导入已有的 Word 或者 Excel 文档，将其做成网页。

（二）格式化文本

无论是输入文本还是导入文本，或者是新建的空白文档，可以使用菜单或者文本属性查看器改变选定文本的字体属性，包括字体、大小、颜色、样式和对齐方式等。

（三）插入图像

在网页中插入图像，不但可以将内容表现得更加形象、生动，还能够跨越语言、编码标准、人种、地域和年龄的差异。但是，过多的图像也会影响网页的下载速度，所以在设计网页时要整体考虑图像的数目和大小。

插入图像(也可以编辑图像)的常用方法如下：

把插入点置于文档窗口中要插入图像的位置，然后选择主菜单中的 “插入” → “图像”，或单击 “插入” 栏中 “常用” 类别的 “图像” 按钮。
在弹出的对话框中，选择要插入的图像文件，单击 “确定” 按钮，则选定的图像被插入到页面中。

（四）图文混排

选择要与文字进行混排的图像，在属性查看器的 “对齐” 下拉列表框中选择 “左对齐”，在 “水平边距” 和 “垂直边距” 中分别输入图像与周围对象的水平和垂直距离。

（五）插入媒体对象

在网页中应用多媒体对象可以增强网页的娱乐性和感染力。

网页中常用的多媒体对象主要分为 Flash 类（Flash 影片、Flash 按钮和Flash 文本）、Java Applet、ActiveX 控件类，以及各种音频、视频文件。

4、创建超链接

（一）超链接的概念

$\color{red}{超链接是指页面对象之间的链接关系}$ ，它是网页的灵魂，能合理、协调地把网站中的各个元素、页面构成一个有机整体，使浏览者能快速地访问到想要访问的页面。

（二）创建内部链接或外部链接

文本和图像是最常使用的链接对象。

（三）创建 $\color{red}{锚链接}$

在制作网页时，为了达到 $\color{cyan}{跳转到网页固定位置}$ 的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超链接打开目标网页时可直接跳转到相应的命名位置上。

方法：将鼠标定位到想要命名锚记的位置，单击 “插入” 工具栏中的 “常用” → “命名锚记” 。

（四）创建空链接

$\color{red}{空超链接}$ 是一个未指派目标的超链接，建立空超链接时，只要在属性查看器的链接域中输入一个 $\color{red}{“\#”即可}$ 。建立空超链接只是为了应用行为，其他情况下不必建立。

（五）创建 $\color{red}{电子邮件超链接}$

在网页中建立电子邮件超链接可方便网页浏览者与设计者之间的联系。

$\color{red}{电子邮件链接格式为“mailto: 邮件地址” 。}$

网页布局

网页的布局设计，是将文字、图片等网页元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。 $\color{red}{网页的布局一般使用表格或框架来实现}$ 。

使用表格定位页面元素

表格是一个容器元素， $\color{red}{表格布局技术是指把页面区域分成若干个单元格，通过单元格来控制各种页面元素（文本、图像等）在页面上的定位和排版}$ 。采用表格进行页面布局，方法简洁明了、浏览器兼容性高，与 $\color{red}{CSS}$ 结合在一起，能够满足绝大多数网页设计的需求。

框架页面就是把浏览器窗口划分为若干个子窗口，这些子窗口称为框架。 $\color{red}{一个框架显示一个网页文件}$ ，但整个 $\color{cyan}{框架集}$ 却存在于同一个浏览器窗口中。框架页面可以把不同类别的信息显示在不同的框架中，有利于分类管理和控制。

下图是一个左右结构的框架。事实上这样一个结构是由三个网页文件组成的。首先外部的框架集是一个文件，图中用 index.htm 命名。框架中左边命名为 L，指向的是网页 A.htm。右边命名为 R，指向的是一个网页B.htm。

在这里插入图片描述

山东专升本计算机基础 --- HTML 简介、网页制作、网页布局

文章目录

HTML 简介

1、HTML 语言概述

2、常用的 HTML 标记

（一）文本布局

（二）文字格式

（三）图片

（四）超链接

（五）表格

网页制作

网页制作

1、Dreamweaver CS5概述（ 了解工具名字 \color{red}{了解工具名字} 了解工具名字）

2、创建与管理站点（ 了解功能 \color{red}{了解功能} 了解功能）

3、插入对象

（一）插入文本

（二）格式化文本

（三）插入图像

（四）图文混排

（五）插入媒体对象

4、创建超链接

（一）超链接的概念

（二）创建内部链接或外部链接

（三）创建 锚链接 \color{red}{锚链接} 锚链接

（四）创建空链接

（五）创建 电子邮件超链接 \color{red}{电子邮件超链接} 电子邮件超链接

网页布局

1、Dreamweaver CS5概述（ $\color{red}{了解工具名字}$ ）

2、创建与管理站点（ $\color{red}{了解功能}$ ）

（三）创建 $\color{red}{锚链接}$

（五）创建 $\color{red}{电子邮件超链接}$