网页设计与制作 教师姓名： 职务：

第1章 　基础知识

本章知识点 网站中的相关知识（1.1.1节） 网页中的基本元素与常用术语（1.1.2节） 静态网站与动态网站简介（1.1.3节） 网页制作的常用软件（1.1.4节） 什么是HTML（1.2.1节） HTML基本标记（1.2.2节） 认识Dreamweaver界面（1.3.1节） Dreamweaver的基本操作（1.3.2节）

本章导读 本章介绍了互联网（Internet）、万维网（WWW）及网页制作的基本概念和知识。 通过学习本章，读者应了解网页运行的基本原理，学会初步使用记事本或Dreamweaver制作简单的空白网页。

1.1　初识网页 网址的相关知识 网页中的基本元素与常用术语 静态网站与动态网站简介 网页制作的常用软件

1.1　初识网页 下面先认识一下什么是网页。网页是分布在世界各地的Web网站（专门用于提供网页的计算机）上面的文档文件。一般网页上都有文本、图片等内容，有的网页还提供声音、动画、影像等多媒体信息和交互功能。

1.1.1 网址中的相关知识 什么是WWW 什么是浏览器 什么是IP地址 什么是域名

1.1.1 网址中的相关知识 在开始建网站之前，让我们首先了解一些网址的相关知识。 1.1.1 网址中的相关知识 在开始建网站之前，让我们首先了解一些网址的相关知识。 网址即网络地址，也称为URL，是网页在Internet中的存放地址，就像平时通过邮局寄信，收、发信人有地址一样，在Internet上每一个网页都有一个惟一的网址。网址既可以用域名表示，也可以用IP地址表示，域名其实是IP地址的字符表示。在浏览器的地址栏中，输入要查找网页的网址就可以找到该网页。例如输入搜狐网站的网址http://www.sohu.com或者http://222.28.152.139均可打开搜狐网站，如图1-1所示。其中，http为超文本传输协议，是网页在Internet中传输的基础，222.28.152.139是搜狐网站的IP地址，www.sohu.com是搜狐网站的域名。在该域名中的“www”是搜狐网站的三级域名，“sohu”是二级域名，是真正的域名，“com”是顶级域名。下面就简单介绍这些出现于网址中的术语和知识。

1.1.1 网址中的相关知识 图1-1 搜狐网站主页

1.1.1 网址中的相关知识 1. WWW WWW是英文World Wide Web的简称，译为“全球信息网”，俗称“万维网”。WWW不是普通意义上的物理网络，而是一种信息服务器的集合标准，是一个能够提供Internet信息查询服务的浏览系统。 WWW中的信息资源主要以一篇篇的Web文档（即网页）为基本元素。这些网页采用超级文本（Hyper Text）的格式，含有指向其他网页或其本身内部特定位置的超级链接（简称超链接或链接），也可以将链接理解为指向其他网页的“指针”。链接使得网页交织为网状。这样，如果Internet上的网页和链接非常多的话，就构成了一个巨大的信息网。

1.1.1 网址中的相关知识 2. 浏览器 浏览器（Browser）是指在用户计算机上安装的、用来显示指定Internet文件的程序。 1.1.1 网址中的相关知识 2. 浏览器 浏览器（Browser）是指在用户计算机上安装的、用来显示指定Internet文件的程序。 3. IP地址 IP地址是识别Internet中主机及网络设备的惟一标识。每个IP地址通常分为网络地址和主机地址两部分，如图1-2所示，由4部分数字组成，每部分都不大于256，各部分之间用小数点分开。例如“搜狐”网站主机的IP地址就是“222.28.152.139”，我们在浏览器地址栏中输入http://222.28.152.139即可打开搜狐网站的首页。 网络地址 主机地址 图1-2　IP地址结构

1.1.1 网址中的相关知识 4. 域名 IP地址是连网计算机的地址标识，但记住很多计算机的IP地址是很困难的，所以TCP/IP协议中提供了域名服务系统（Domain Name System，DNS），允许为主机分配字符名称，即域名。在网络通信时由DNS自动实现域名与IP地址的转换。例如，搜狐网Web服务器的域名为www.sohu.com，在浏览器地址栏中输入http://www.sohu.com也可打开搜狐网站的首页。 Internet中的域名采用分级命名，其基本结构为“计算机名.三级域名.二级域名.顶级域名”。 下面简单介绍域名的结构与管理方式。 首先，DNS将整个Internet划分成多个域，称为顶级域，并为每个顶级域规定了国际通用的域名。顶级域名采用两种划分模式，即组织模式和地理模式。有7个域对应于组织模式；其余的域对应于地理模式，如cn代表中国，us代表美国，jp代表日本等。

1.1.1 网址中的相关知识 7个组织模式的顶级域名分配如下： com 商业组织 edu 教育机构 gov 政府部门 mil 军事部门 1.1.1 网址中的相关知识 7个组织模式的顶级域名分配如下： com 商业组织 edu 教育机构 gov 政府部门 mil 军事部门 net　　　　 网络机构 org 非盈利组织 int 国际组织 其次，Internet的域名管理机构将顶级域的管理权分派给指定的管理机构，各管理机构对其管理的域继续进行划分，即划分成二级域，并将二级域的管理权授予其下属的管理机构，依此类推，便形成了树形域名结构。由于管理机构是逐级授权的，所以最终的域名都得到了Internet的承认，成为Internet中的正式名字。

1.1.2 网页中的基本元素与常用术语 在讲解制作网页之前，先来了解一下网页中的一些基本元素和常用术语，这些概念在下面的学习中会经常用到。仍然以搜狐网站为例来介绍网页的基本界面，如图1-3所示。

1.1.2 网页中的基本元素与常用术语 图1-3 搜狐网站首页

1.1.2 网页中的基本元素与常用术语 什么是网页、网站、主页 1.1.2 网页中的基本元素与常用术语 什么是网页、网站、主页 网页中的基本元素，什么是文本、图像、超链接、水平线、表单、表格、框架、动态元素 什么是Logo、banner、导航条 什么是超文本和超链接

1.1.2 网页中的基本元素与常用术语 1.网页 网页由文字、图片、动画、声音等多种媒体信息以及链接组成，通过链接实现与其他网页或网站的关联和跳转。 网页文件是用HTML标记语言编写的，每个网页以单独文件形式存放，没有固定的长度，通常以成组的形式出现，其文件扩展名为.htm或者.html。一组具有相关主题的、经过组织和管理的网页则组成Web网站。 通常把进入某一网站的第一个页面称为主页或首页（homepage），主页通常用作一个站点的目录或索引。其文件名通常为index或者default。

1.1.2 网页中的基本元素与常用术语 2.网页基本元素 l 文 本：文字 l 图 像：起到美化网页，吸引浏览者的作用。 1.1.2 网页中的基本元素与常用术语 2.网页基本元素 l   文 本：文字 l   图 像：起到美化网页，吸引浏览者的作用。 l   超链接：指向其他网站、网页、文本或图像的链接。 l 水平线：用来分隔不同区域的水平线段。 l    表 单：用来收集站点访问者的提交内容的域集。 l    表 格：用来显示分类数据或排版定位。 l    框 架：框架网页是一种特殊的网页，它可将浏览器视窗分为不同的框架区域。它必需通过模板来创建。 l 动态元素：GIF动画、悬停按钮、广告横幅、滚动字幕、网站计数器、声音和动态视频等。

1.1.2 网页中的基本元素与常用术语 3．Logo、Banner与导航条 1.1.2 网页中的基本元素与常用术语 3．Logo、Banner与导航条 Logo是标志、徽标的意思，是与其他网站链接以及让其他网站链接的标识和门户。Logo是网站形象的重要体现，能使访问者便于识别。 Banner就是在网站上常见的各种尺寸的广告图片，常见的有468×60（像素）、220×160（像素）、750×160（像素）等。网站Banner往往是以广告形式出现的，有时也把网站的主题以Banner的形式体现出来，因为它的位置醒目，尺寸也比Logo大了许多。 网站的导航（navigation）条，是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容。导航条可以用各种文字、图片及Flash动画等形式表现。

1.1.2 网页中的基本元素与常用术语 4.超文本和超链接 1.1.2 网页中的基本元素与常用术语 4.超文本和超链接 超链接是WWW上的一种链接技巧，是内嵌在文本或图像中的，通过已定义好的关键字和图形，只要单击某个图标或某段文字，就可以自动连上相对应的其他文件。设置了超链接的文本称为超文本，超文本在浏览器中显示时通常带下划线。在图像上设置的超链接是看不到的，但如果用鼠标指针碰到它，鼠标指针通常会变成手指状。当然，在鼠标指针接触到超文本时，亦会变为手指状。

1.1.3　静态网站与动态网站简介 什么是静态网站及静态网站的特点 什么是动态网站及动态网站的特点

1.1.3 静态网站与动态网站简介 静态网站主要是使用HTML设计的网站，如图1-4所示是网络上一家名叫恒辉通信的网站，就是典型的静态网站。 1.1.3　静态网站与动态网站简介 静态网站主要是使用HTML设计的网站，如图1-4所示是网络上一家名叫恒辉通信的网站，就是典型的静态网站。 在这种静态网站中用户只能浏览Web服务器上预先安排好的信息，其特点如下。 图1-4 一个典型的静态网站

1.1.3 静态网站与动态网站简介 ① 网页内容不会发生变化，除非网页设计者修改了网页的内容。 1.1.3　静态网站与动态网站简介 ① 网页内容不会发生变化，除非网页设计者修改了网页的内容。 ② 网页不能和浏览用户互相交换信息。信息流向是单向的，即从服务器到浏览器。服务器不能根据用户的情况调整返回给用户的内容。静态网页的浏览过程如图1-5所示。 图1-5 静态网站执行流程

1.1.3　静态网站与动态网站简介 ③静态网站的致命弱点就是不易维护，为了更新网页内容，必须重复制作HTML文档，随着网站内容和信息量的日益增加，工作量会越来越大，不易维护。

1.1.3　静态网站与动态网站简介 现在Web已经具有更丰富的功能。人们不仅需要浏览Web提供的信息，而且还需要进行信息搜索，开展电子商务活动等。为实现以上功能，必须使用新的网络编程技术设计动态网页。所谓动态，并不是指放在网页上的GIF动态图片，而指的是按照访问者的需要，对访问者输入的信息做出不同的响应，提供响应信息。更进一步，动态网页设计技术又可按客户端和服务器端划分，客户端动态网页设计技术主要是层叠样式表（CSS）和在浏览器中执行的脚本程序，而服务器端动态网页设计技术主要是CGI、ASP、JSP或PHP等脚本程序设计技术。图1-6所示的中国工商银行的网站就是典型的动态网站。它采用JSP技术，使页面中需要经常更新的内容（如重要公告、优惠活动等内容）能够在线自动更新，而不必像静态网站那样将网页下载下来，修改之后再上传到服务器。它里面的用户登录栏目是供用户提交信息的，服务器针对这些信息内容，按照用户要求作出反应。

图1-6 一个典型的动态网站 “中国工商银行”网站 1.1.3　静态网站与动态网站简介 图1-6 一个典型的动态网站 “中国工商银行”网站

1.1.3 静态网站与动态网站简介 动态网站有如下特点。 ①交互性，即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客户端界面。 1.1.3　静态网站与动态网站简介 动态网站有如下特点。 ①交互性，即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客户端界面。 ②自动更新，即无须手动更新HTML文档，便会自动生成新的页面，可以大大减少工作量。 ③因时因人而变，即在不同的时间不同的人访问同一网址时会产生不同的页面。 动态网页的工作流程如图1-7所示。

1.1.3　静态网站与动态网站简介 图1-7 动态网站执行流程

1.1.4　网页制作的常用软件 　　 用来制作网页的软件比较多，用于制作静态网页的网页制作工具有记事本、Homesite、Adobe Pagemill、WebEdit、HTML Builder、FrontPage及Dreamweaver等。用于制作动态网页的常见的网页制作工具有FrontPage、Dreamweaver及Flash等。如表1-1所示。

1.1.4 网页制作的常用软件 静态网页制作工具 动态网页制作工具 表1-1 常用网页制作工具 1.1.4　网页制作的常用软件 表1-1　　常用网页制作工具 静态网页制作工具 动态网页制作工具 记事本、Homesite、Adobe Pagemill、WebEdit、HTMLBuilder、FrontPage、Dreamweaver等 FrontPage、Dreamweaver、flash等

1.1.4　网页制作的常用软件 FrontPage是Microsoft公司专门为制作Web页面而开发的，是一种“所见即所得”的为非程序员使用的可视化网页制作工具，功能强大，易学易用。它具备用户需要的创建和导航WWW站点的全部功能，用户即使没有多少编程经验，甚至一点HTML语言都不会，也能很容易地开发出属于自己的Web页，制作出比较出色的网页。其缺点是设计出的网页结构中各个元素容易在预览时出现错位，而且不能直接编辑Flash，页面产生的冗余代码比较多。

1.1.4　网页制作的常用软件 Dreamweaver是Macromedia公司出品的一款可视化的网页制作工具，非常适合美工出身的网页设计人员这些人员有较强的美术感觉，喜欢用快捷工具制作页面特效，但对HTML代码比较生疏，特别是希望一些后台的程序代码能和前台的页面设计分开，在这方面Dreamweaver确实有很多优势。Dreamweaver自推出以来，一直备受网页专业制作人员和广大网页设计爱好者的喜爱。Macromedia公司的Dreamweaver、Fireworks和Flash合称为“网页制作三剑客”。它的缺点是在制作网页的过程中形成的源代码界面非常模糊，对表格的控制和美化不如FrontPage。

1.2　HTML语言简介 什么是HTML 了解HTML的基本结构

1.2.1　什么是HTML HTML语言是网页制作的基础，虽然现在有许多可视化网页制作工具，但初学者还是有必要了解一些HTML的语法。这样可以更精确地控制页面的排版，实现更多的功能。HTML语言可以直接使用普通的文本编辑器（如记事本等）进行编辑，也可以使用各种网页制作软件（如FrontPage、Dreamweaver等）来编写。

1.2.1　什么是HTML 在介绍HTML语言之前，先看一下HTML网页。图1-8所示是一个HTML网页在浏览器中显示的结果。在该网页的菜单栏中选择“查看”/“源文件”菜单命令（如图1-9所示），即可在记事本中查看该网页的源代码，如图1-10所示。

1.2.1　什么是HTML 图1-8 一个简单的HTML网页

1.2.1　什么是HTML 图1-9 查看网页的源文件

1.2.1　什么是HTML 图1-10 一个简单的HTML网页源代码

1.2.1　什么是HTML 设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体。这样人们不用考虑具体信息是在当前电脑上还是在网络中的其他电脑上，而只需使用鼠标在某一文档中单击一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络中的另一台电脑上。 HTML英语全称为Hyper Text Markup Language，中文意思是超文本标识语言，简称为超文本语言，是WWW的描述语言。 用HTML编写的超文本文档称为HTML文档，HTML文档是一个放置了标记的ASCII文本文件，通常带有.html或者.htm的文件扩展名，能够在各种操作系统上运行。HTML语言可以处理文字、图形、动画、声音、表格和链接等。 上机任务：用“记事本”编写一个简单的HTML网页。

1.2.1 什么是HTML （1）在本地硬盘D盘中创建一个名为“myweb”的文件夹，用于专门存放网页。 （2）打开记事本，在文本编辑区中输入以下文本，如图1-11所示。 图1-11 编辑HTML网页

1.2.1　什么是HTML （3）在记事本中选择“文件”/“保存”菜单命令，如图1-12所示。 图1-12 保存HTML网页

1.2.1　什么是HTML （4）在弹出来的“另存为”对话框中选择文件，将文件保存在本地硬盘中的D盘myweb文件夹下，保存文件名为“hello.html”，在“保存类型”中选择“文本文档”选项，“编码”默认为“ANSI”，如图1-13所示。 图1-13 保存HTML网页

1.2.1　什么是HTML （5）启动浏览器，打开该文件或在地址栏中直接输入存放该文件的地址，如D:\myweb\hello.html就会看到如图1-14所示的效果。 图1-14　一个简单的网页

1.2.2 了解HTML的基本结构 HTML网页文件（网页效果如图1-8所示）主要由文件头（Head）和文件体（Body）两部分内容构成。其中，在文件头中对文件进行必要的定义；文件体是HTML网页的主要部分，包括文件所有的实际内容。HTML文件有很多标识符，它们形式上是由相应的英文嵌在“<>”内，而且“<>”标识符大多数成对出现（用以标识开始、标识结束，结束符号为“/”）。标识符也有不成对出现的，比如插入一个换行符<br>。下面就以如图1-15所示的网页源文件为例了解一下HTML网页的基本结构。

1.2.2 了解HTML的基本结构 图1-15 HTML网页源文件

下面对如图1-15所示的语句进行解释（在“/*”与“*/”之间出现的文字为解释语，不会出现于网页浏览效果中）。 1.2.2 了解HTML的基本结构 下面对如图1-15所示的语句进行解释（在“/*”与“*/”之间出现的文字为解释语，不会出现于网页浏览效果中）。 <HTML>　　/*从HTML文件开始*/ <HEAD>　　/*从文件头开始*/ <TITLE>这是一首诗</TITLE>　　/*HTML文件的标题，是显示于浏览器标题栏的字符串*/ 文件头 </HEAD> /*文件头结束*/ <BODY>　　/*文件体开始*/ <P align="CENTER"><FONT size="7" color="#000000">静夜思</FONT></P> <P align="CENTER"><FONT size="5" color="#000000">李白</FONT></P>

1.2.2 了解HTML的基本结构 <P align="CENTER"><FONT size="6" color="#000000">床前明月光</FONT></P> <P align="CENTER"><FONT size="6" color="#000000">疑是地上霜</FONT></P> <P align="CENTER"><FONT size="6" color="#000000">举头望明月</FONT></P> <P align="CENTER"><FONT size="6" color="#000000">低头思故乡</FONT></P> </BODY>　　/*文件体结束*/ </HTML> /*HTML文件结束*/

1.3 可视化网页制作软件Dreamweaver简介

1.3 可视化网页制作软件Dreamweaver简介 Dreamweaver是一款专业的网站开发工具，具有强大的功能、简便的操作以及友好的工作界面，因此已经被越来越多的网页设计者和网站开发人员所接受。Dreamweaver 8集网页设计、网站开发和站点管理功能于一身，具有可视化、跨浏览器和支持多平台的特性，利用该软件还可以开发功能强大、高效的动态交互式网站。

1.3.1　认识Dreamweaver界面 Macromedia公司推出的Dreamweaver的最新版本是Dreamweaver 8，本书所讲解的网页设计与制作就以它为主要开发工具。下面就介绍一下Dreamweaver 8的界面。 启动Dreamweaver 8，如果是首次使用，将会弹出一个“工作区设置”对话框。该对话框中列出两种工作布局模式供选择，如图1-16所示。

图1-16 Dreamweaver 8的工作布局模式

1.3.1　认识Dreamweaver界面 ① “设计者”布局。这种布局是一种使用多文档界面的集成工作区。其中，所有的“文档”窗口和面板都被集成在一个大的应用程序窗口中，并将面板组列在右侧。 ② “代码编写者”布局。这种布局也是将工作区域集成，但是它的面板组在左边，文档窗口在右侧。文档窗口在默认的情况下显示的是“代码”视图。 一般除了专业的代码编写者外，建议选择“设计者”布局，如果以后想更改工作区，可以选择“编辑”/“首选参数”菜单命令，在弹出的“首选参数”对话框中选择“常规”/“更改工作区”选项进行切换。下面以选择“设计者”布局方式为例介绍Dreamweaver 8的工作界面，如图1-17所示。

图1-17 Dreamweaver 8.0的工作界面

1.3.1　认识Dreamweaver界面 ① 插入栏：提供用于将各种类型的“对象”（如图像、表格和层）插入到文档中的 按钮。每个对象都是一段HTML代码，允许在插入时设置不同的属性。例如，可以通过单击插入栏中的“表格”按钮插入一个表格，当然也可以不使用插入栏而使用“插入”菜单插入对象。另外，选择“窗口”/“插入”菜单命令可以在工作界面中显示或者隐藏插入栏。 ② 文档工具栏：提供按钮和弹出式菜单，包括各种文档窗口视图（如“设计”视图和“代码”视图等）、各种查看选项和一些常用操作（如在浏览器中预览）。文档工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 ③ 文档窗口：显示当前创建和编辑的文档。

1.3.1　认识Dreamweaver界面 ④ 面板组：面板组是各种页面设计工具的集合，用来进行页面的编辑和控制。若要展开一个面板组，单击面板组名称左侧的展开箭头 即可；若要取消一个面板组，拖曳该面板组标题条左边缘的手柄 即可。 ⑤ 标签检查器：用于显示当前光标在页面中所处位置的HTML标签。 ⑥ 属性检查器：用于查看和更改所选对象或文本的属性。 ⑦ “文件”面板：通过“文件”面板可以管理文件和文件夹，无论它们是Dreamweaver 8站点的一部分还是在远程服务器上。另外，“文件”面板还可以访问本地磁盘上的全部文件，类似于Windows资源管理器，非常方便。 ⑧ 菜单栏：Dreamweaver所有的工具和命令都可以在菜单栏的某个菜单项中找到，它是Dreamweaver所有工具和命令的分类列表。各个菜单项含义如下所述。

1.3.1　认识Dreamweaver界面 ① “文件”菜单：通过它可对文件执行各种操作，包括新建、打开和保存文档，导入、导出和转换文件，以及对文件进行预览、检测、比较和设计备注等操作。 ② “编辑”菜单：通过它可对文档中的内容进行各项编辑操作，如撤销、重复、复制、粘贴、查找、替换、选择等。 ③ “查看”菜单：通过它可对文档及其内容执行各项查看命令。 ④ “插入”菜单：通过它可执行将各种类型的“对象”（如图像、表格和层）插入到文档中的命令，与“插入栏”功能类似。 ⑤ “修改”菜单：它是对文档中各种对象的属性进行修改和操作的命令集合，包括对表格、图像、模板和框架等的修改命令。

1.3.1 认识Dreamweaver界面 ⑥ “文本”菜单：通过它可对文档中的文本属性执行各项设置命令，如设置文本大小、段落和样式等。 ⑧ “站点”菜单：提供对站点进行操作和管理的各项命令。 ⑨ “窗口”菜单：提供对Dreamweaver工作界面进行布局设置的命令集合。 ⑩ “帮助”菜单：提供Dreamweaver的各种操作和使用说明。

1.3.2　Dreamweaver的基本操作 创建新的网页文档 保存已创建的网页文档 打开已创建的网页文档 预览已创建的网页文档

1.3.2　Dreamweaver的基本操作 上机任务：使用Dreamweaver 8创建并保存如图1-14所示的网页实例，然后使用Dreamweaver 8打开该文档，并预览该网页。 （1）启动Dreamweaver 8，执行“文件”/“新建”命令，如图1-18所示。 图1-18 执行“文件/新建”命令

1.3.2　Dreamweaver的基本操作 （2）在出现的“新建文档”对话框中单击“常规”选项卡“类别”栏目中的“基本页”选项，在右侧出现的“基本页”列表中选择“HTML”项，如图1-19所示。 图1-19 创建HTML基本页面

1.3.2 Dreamweaver的基本操作 （3）在该对话框的右侧下方的“文档类型”下拉列表中选择“无”，然后单击“创建”按钮。 注意：在Dreamweaver 8中也可以通过单击启动界面的“创建新项目”列表中的“HTML”字样来创建基本页面。如图1-20所示。 图1-20 创建HTML基本页面

1.3.2 Dreamweaver的基本操作 （4）在创建的空白网页文档窗口中输入“大家好！很高兴认识大家”字样，如图1-21所示。 图1-21 编辑网页内容

1.3.2　Dreamweaver的基本操作 （5）接着在“文档工具栏”的标题文本框中为此网页输入网页标题“hello2”，如图1-22所示。 图1-22 为网页输入网页标题 注意：如果不输入网页标题的话，Dreamweaver 8自动默认该网页标题为“无标题文档”。

1.3.2 Dreamweaver的基本操作 （6）执行“文件”/“保存”命令，保存该网页，如图1-23所示。 图1-23 执行“文件/保存”命令

1.3.2　Dreamweaver的基本操作 （7）在弹出的“另存为”对话框中选择该网页的存放路径为本地硬盘D盘下的“myweb”文件夹，在“文件名”文本框中输入该网页的文件名“hello2”，单击“保存”按钮，如图1-24所示。 图1-24 命名并保存网页

1.3.2　Dreamweaver的基本操作 （8）启动浏览器，打开该文件或在地址栏中直接输入存放该文件的地址，如D:\myweb\hello2.html，就会看到如图1-25所示的效果。 图1-25 预览HTML页面 注意：除用此种方式预览已创建的网页之外，也可以在Dreamweaver 8中调用浏览器来预览已经创建的网页。

1.3.2 Dreamweaver的基本操作 上机任务：在Dreamweaver 8.0中打开已创建的网页并预览。 图1-26 执行“文件/打开”命令

1.3.2　Dreamweaver的基本操作 (2)在弹出的“打开”对话框中选择要打开的文件的存放位置，并选择该文件，单击“打开”按钮，如图1-27所示。 图1-27 选择要打开的文件

图1-28 执行“文件/在浏览器中预览/iexplor”命令 1.3.2　Dreamweaver的基本操作 (3) 在打开的网页中执行“文件/在浏览器中预览/iexplor”命令，或者按键盘上的F12键，即可调用浏览器，预览该网页，如图1-28所示。 图1-28 执行“文件/在浏览器中预览/iexplor”命令

1.3.2　Dreamweaver的基本操作 注意：如果在Dreamweaver 8中要预览的网页尚未保存，Dreamweaver 8会提示是否要保存该网页，选择保存之后才可以调用浏览器预览，否则不能预览。如果某网页曾经保存过，又经过了修改尚未保存，此时可以预览，但只能看到修改之前的网页。

1.4 上机实践 1.4.1 上机实践1：在“记事本”中使用HTML语言创建一个简单的网页 1.4 上机实践 1.4.1 上机实践1：在“记事本”中使用HTML语言创建一个简单的网页 要求：在“记事本”中使用HTML语言编写一个标题为“myweb”的网页文档，内容显示“这是我的第一个网页”字样。任务完成后的效果如图1-29所示。 关键步骤1：打开记事本，新建一个空白文档，在文档中输入HTML代码，如图1-30所示。 关键步骤2：执行“文件”/“保存”命令，在“另存为”对话框的“文件名”文本框中输入“myweb.html”字样，保存该文档为HTML文档，如图1-31所示。 关键步骤3：在D盘中打开“myweb”文件夹，双击该文件夹下的“myweb.html”文件，即可浏览如图1-29所示的网页效果了。

1.4 上机实践 图1-29 效果图

1.4 上机实践 图1-30 编辑“myweb”页面

1.4 上机实践 图1-31 保存“myweb2”网页

1.4 上机实践 1.4.2 上机实践2：用Dreamweaver 8.0创建一个简单的网页。 1.4 上机实践 1.4.2 上机实践2：用Dreamweaver 8.0创建一个简单的网页。 要求：用Dreamweaver 8创建并保存一个显示“这是我的第一个网页”文字的网页，网页标题为“myweb2”，保存该网页文件名为“myweb2.html”，并在Dreamweaver 8中调用浏览器预览。任务完成后的效果同图1-29所示，但网页标题为“myweb2”。 关键步骤1：启动Dreamweaver 8，执行“文件”/“新建”命令创建一个HTML文档。如图1-32所示。 图1-32 执行“文件/新建”命令

1.4 上机实践 关键步骤2：在创建的空白网页文档窗口中输入“这是我的第一个网页”字样，网页标题为“myweb2”。如图1-33所示。 1.4 上机实践 关键步骤2：在创建的空白网页文档窗口中输入“这是我的第一个网页”字样，网页标题为“myweb2”。如图1-33所示。 图1-33 编辑网页文本

图1-35 执行“文件”/“在浏览器中预览”/“iexplore”命令 1.4 上机实践 关键步骤3：执行“文件”/“保存”命令，保存该网页名为“myweb2”。如图1-34所示。 图1-34 保存网页 关键步骤4：在Dreamweaver 8.0中执行“文件/在浏览器中预览/iexplor”命令预览该网页。如图1-35所示。 图1-35 执行“文件”/“在浏览器中预览”/“iexplore”命令

1.5 习题 1．单选题 （1）在Dreamweaver 8工作界面中，用于查看和更改所选对象或文本属性的面板称为（ ）。 1.5　习题 1．单选题 （1）在Dreamweaver 8工作界面中，用于查看和更改所选对象或文本属性的面板称为（ ）。 A．“文件”面板 B．插入栏 C．属性检查器 （2）（ ）是WWW上的一种链接技巧，它是内嵌在文本或图像中的。通过已定义好的关键字和图形，只要单击某个图标或某段文字，就可以自动连上相对应的文件。 A．URL B．超链接 C．超文本 （3）Dreamweaver 8有（ ）种工作界面。 A．2种 B．3种 C．4种

1.5 习题 2．多选题 （1）下面关于HTML语言描述正确的是（ ）。 1.5　习题 2．多选题 （1）下面关于HTML语言描述正确的是（ ）。 A．HTML（Hyper Text Mark-up Language）即超文本标记语言，是WWW的描述语言 B．HTML语言通过各种标记来标识文档的结构以及标识超链接的信息，用于描述网页的格式设计及与WWW上其他页面的连接信息 C．HTML文档是一个放置了标记的ASCII文本文件，通常它带有.html或者.htm的文件扩展名 D．用HTML编写的超文本文档称为HTML文档，它只能应用于Windows操作系统平台

1.5 习题 （2）下面关于组织模式的顶级域名表示正确的是（ ）。 1.5　习题 （2）下面关于组织模式的顶级域名表示正确的是（ ）。 A．com 国际组织 B．mil 军事部门 C．int 商业组织 D．org 非盈利组织 （3）通常把进入某一网站的第一个页面称为（ ）。 A．网页 B．首页 C．主页 D．一级网页 3．判断题 （1）HTML网页文件主要由文件头、文件体和文件尾3部分构成。（ ） （2）文档工具栏用于显示当前创建和编辑的文档。（ ） （3）IP地址是识别Internet中主机及网络设备的惟一标识。（ ）