网页制作与开发教程 第1章网页制作基础.ppt

《网页制作与开发教程 第1章网页制作基础.ppt》由会员分享，可在线阅读，更多相关《网页制作与开发教程 第1章网页制作基础.ppt（91页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第1章 网页制作基础网页制作的基本步骤网页制作的基本步骤 1.2Dreamweaver的操作环境的操作环境 1.4 HTML入门入门 1.3网页制作基础知识网页制作基础知识 1.1建立本地站点建立本地站点 1.5创创 建建 文文 档档 1.6实践与练习：创建新文档实践与练习：创建新文档 1.7小结小结 本章首先对一些与网络相关的概念做了本章首先对一些与网络相关的概念做了概要的阐述，介绍了网页制作的基本知识，概要的阐述，介绍了网页制作的基本知识，使读者对使读者对Internet传递信息的基本原理有所传递信息的基本原理有所了解。然后，介绍网页制作的基本步骤，了解。然后，介绍网页制作的基本步骤，对对

2、HTML（超文本标签语言）的基本知识进（超文本标签语言）的基本知识进行入门性的阐述，对行入门性的阐述，对Dreamweaver的操作的操作环境进行介绍，并将介绍如何使用环境进行介绍，并将介绍如何使用Dreamweaver建一个最基本的网站和网页，建一个最基本的网站和网页，从而为后续章节的学习打下基础。从而为后续章节的学习打下基础。1.1 1.1 网页制作基础知识网页制作基础知识 当打开浏览器后，在地址栏中输入一个当打开浏览器后，在地址栏中输入一个网站的地址，然后单击地址栏后面的网站的地址，然后单击地址栏后面的“转转到到”按钮，或直接按回车键，就会展示出按钮，或直接按回车键，就会展示出相应的网页

3、内容，如图相应的网页内容，如图1-1所示。所示。图图1-1 1-1 网上冲浪网上冲浪 网页中可以包含多种类型的内容，这些网页中可以包含多种类型的内容，这些内容成为网页的内容成为网页的“元素元素”。最基本的是文。最基本的是文字，此外，还可以使用图片、动画，以及字，此外，还可以使用图片、动画，以及声音、视频等多媒体文件。制作网页的目声音、视频等多媒体文件。制作网页的目的之一，就是要给访问者留下深刻的印象，的之一，就是要给访问者留下深刻的印象，展示有价值的信息。展示有价值的信息。1.1.1 网页的分类网页的分类 按网页在一个站点中所处的位置，可将按网页在一个站点中所处的位置，可将网页划分为网页划分为

4、“主页主页”和和“内页内页”。“主页主页”是指进入一个站点时看到的第一页，是指进入一个站点时看到的第一页，“内页内页”是指与主页相链接的页面。是指与主页相链接的页面。按网页的表现形式，可将网页划分为按网页的表现形式，可将网页划分为“静态网页静态网页”和和“动态网页动态网页”。1.1.2 网页制作中的基本概念网页制作中的基本概念1服务器与浏览器服务器与浏览器图图1-2 1-2 服务器与浏览器的关系示意图服务器与浏览器的关系示意图2超链接超链接 超链接的本质是一种可以指向其他文件超链接的本质是一种可以指向其他文件的文字或图片。的文字或图片。3URL URL为为“Uniform Resource L

5、ocator”的缩写，通常翻译为的缩写，通常翻译为“统一资源定位器统一资源定位器”，也就是人们通常说的，也就是人们通常说的“网址网址”。它用于。它用于指定指定Internet上的资源位置。上的资源位置。图图1-3 1-3 超链接的作用超链接的作用图图1-4 1-4 输入输入URLURL4HTML 网页文件是用一种标签语言书写的，这网页文件是用一种标签语言书写的，这种语言称为种语言称为HTML（Hyper Text Markup Language，超文本标签语言）。有两种方，超文本标签语言）。有两种方式来产生式来产生HTML文件：一种是自己写文件：一种是自己写HTML文件，事实上这并不非常困难，

6、也不需要文件，事实上这并不非常困难，也不需要特别的技巧；另一种是使用特别的技巧；另一种是使用HTML编辑器，编辑器，它可以辅助使用者来做编写的工作。它可以辅助使用者来做编写的工作。图图1-5 1-5 网页的网页的HTMLHTML源文件源文件5上传与下载上传与下载 如果条件许可，也可以把自己的计算机如果条件许可，也可以把自己的计算机设置成服务器。大多数情况下，只需要花设置成服务器。大多数情况下，只需要花一点钱租用一个服务器，把制作好的网站一点钱租用一个服务器，把制作好的网站传送到服务器上，这个过程就称为传送到服务器上，这个过程就称为“上传上传”。而其他计算机通过浏览器访问网页的。而其他计算机通过

7、浏览器访问网页的时候，所经历的过程就是时候，所经历的过程就是“下载下载”的过程，的过程，这样计算机中才能看到它。这样计算机中才能看到它。6域名域名 “域名域名”是在网络上的重要标识，起着是在网络上的重要标识，起着识别作用，域名可分为不同级别，包括顶识别作用，域名可分为不同级别，包括顶级域名、二级域名等。顶级域名又分为两级域名、二级域名等。顶级域名又分为两类。一是国家、地区顶级域名。类。一是国家、地区顶级域名。二是国际顶级域名。二是国际顶级域名。7网站网站 “网站网站”就是在就是在Internet上一块固定的上一块固定的面向全世界发布消息的地方。它由域名面向全世界发布消息的地方。它由域名（也就是

8、网站地址）和网站空间构成，网（也就是网站地址）和网站空间构成，网站空间里存放的就是各种网页。有时候，站空间里存放的就是各种网页。有时候，网站也被称做站点。网站也被称做站点。衡量一个网站的性能通常从网站空间大衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站服务小、网站位置、网站连接速度、网站服务内容等几方面考虑。内容等几方面考虑。8IP地址地址 “IP”的全拼是的全拼是“Internet Protocol”，也就是也就是“Internet协议协议”，它是，它是Internet能能够运行的基础。够运行的基础。在使用二进制表示的时候，在使用二进制表示的时候，IP地址的长地址的长度为

9、度为32位，分为位，分为4段，每段段，每段8位。用十进制位。用十进制数字表示的时候，每段数字范围为数字表示的时候，每段数字范围为1255，段与段之间用英文句点隔开，如，段与段之间用英文句点隔开，如159.226.1.1。1.2 1.2 网页制作的基本步骤网页制作的基本步骤1收集和整理资料收集和整理资料2制作网页制作网页3测试站点测试站点4发布站点发布站点5站点维护和更新站点维护和更新1.3 HTML1.3 HTML入门入门 我们常常讲起我们常常讲起“网页网页”，事实上每一个，事实上每一个网页都是一个文件，这个文件里面包含了网页都是一个文件，这个文件里面包含了HTML指令，所以这些文件就被称为指

10、令，所以这些文件就被称为HTML文件。文件。HTML是一种描述性的标签语言，这是一种描述性的标签语言，这些标签符用来定义些标签符用来定义HTML文件中信息的格式文件中信息的格式和功能。和功能。当浏览器接收到当浏览器接收到HTML文件后，就解释文件后，就解释HTML文件内的标签符，根据标签符去执行文件内的标签符，根据标签符去执行相应的显示功能或实现某些功能。注意这相应的显示功能或实现某些功能。注意这些标签符必须用小于号（些标签符必须用小于号（“”）括起来。）括起来。1.3.1 HTML标签符的基本格式标签符的基本格式 HTML标签符最基本的格式是标签符最基本的格式是“内容内容”。标签符通常成对使

11、用，。标签符通常成对使用，前面的前面的“”表示某种格式的开始，表示某种格式的开始，后面的后面的“”表示这种格式的结束。表示这种格式的结束。例如，例如，HTML文件中的文件中的“”和和“”标签符用来定义标签符用来定义HTML文件中的文文件中的文字为粗体字。就是说，在这一对标签中的字为粗体字。就是说，在这一对标签中的内容都以粗体的格式在浏览器中显示。例内容都以粗体的格式在浏览器中显示。例如在文件中有如在文件中有“Hello，World!”，那么在浏览器中将显示出粗体字，那么在浏览器中将显示出粗体字“Hello，World!”。HTML的概念很简单，就是写入什么样的概念很简单，就是写入什么样的标签符

12、，浏览器就会相应执行该标签符的标签符，浏览器就会相应执行该标签符所能实现的功能。不过有一点要注意，我所能实现的功能。不过有一点要注意，我们最常用的们最常用的Netscape和和Internet Explorer浏览器并不完全兼容，即有的标签只能被浏览器并不完全兼容，即有的标签只能被其中一种浏览器识别。其中一种浏览器识别。就目前的情形来看，就目前的情形来看，Internet Explorer已经取得了很大的优势，但在制作网页时已经取得了很大的优势，但在制作网页时最好还是二者兼顾。另外，最好还是二者兼顾。另外，Dreamweaver已经充分考虑到了兼容性的问题，尽可能已经充分考虑到了兼容性的问题，

13、尽可能地使制作出的网页在两个浏览器上都能正地使制作出的网页在两个浏览器上都能正确显示。确显示。1.3.2 简单的简单的HTML文件文件 现在读者已经对现在读者已经对HTML有了一些最基本、有了一些最基本、最简单的认识，下面就开始学习最简单的认识，下面就开始学习HTML的一的一些基本语句。完整的些基本语句。完整的HTML规则完全可以写规则完全可以写成一本几百页的书，这里仅介绍成一本几百页的书，这里仅介绍HTML中最中最重要的几个标签。重要的几个标签。【例例1-1】最简单的最简单的HTML文件文件 这是测试文件这是测试文件 HTML 文件的内容就写在这里文件的内容就写在这里.图图1-6 1-6 用

14、用WindowsWindows的的“记事本记事本”编辑源文件编辑源文件图图1-7 Windows1-7 Windows“记事本记事本”中中HTMLHTML文件的保存文件的保存图图1-8 1-8 打开浏览器的窗口后的效果打开浏览器的窗口后的效果 注意这个文件中有以下注意这个文件中有以下4对标签。对标签。1 1HTMLHTML标签标签 “”标签放在标签放在HTML文件的开头，文件的开头，告诉浏览器，这个文件是告诉浏览器，这个文件是HTML文件。而在文件。而在文件的结尾，是文件的结尾，是“”结束标签。结束标签。2 2文件头标签文件头标签 文件头标签是文件头标签是“”和和“”，一般放在，一般放在“”标

15、签的标签的后面，用来标明文件的题目或定义部分。后面，用来标明文件的题目或定义部分。3 3文件标题标签文件标题标签 文件标题标签为文件标题标签为“”和和“”。这对标签用来设定文件的。这对标签用来设定文件的标题。浏览器通常都会将文件标题显示在标题。浏览器通常都会将文件标题显示在浏览器窗口的左上角，因此这个标题很有浏览器窗口的左上角，因此这个标题很有用。用。4 4文件体标签文件体标签 文件体标签为文件体标签为“”和和“”。这对标签一般都被用来指明。这对标签一般都被用来指明HTML文档的内容，例如文字、标题、段落文档的内容，例如文字、标题、段落和列表等，也可以用来定义主页背景颜色。和列表等，也可以用来

16、定义主页背景颜色。1.3.3 进一步认识标签进一步认识标签1 1“标题标题”标签标签 标题标签的格式为标题标签的格式为“”和和“”（?代表代表16的数字）。的数字）。图图1-9 1-9 加入标题字的效果加入标题字的效果【例例1-2】“标题标题”标签示例标签示例 这是测试文件这是测试文件 HTML 文件的内容就写在这里文件的内容就写在这里.这是这是H1标题字标题字 这是这是H2标题字标题字 这是这是H3标题字标题字 这是这是H4标题字标题字 这是这是H5标题字标题字 这是这是H6标题字标题字 2 2“对齐对齐”属性属性 在这里要引入一个新的概念在这里要引入一个新的概念“属性属性”。HTML语言的

17、标签还可以带有一些属性，语言的标签还可以带有一些属性，例如前面介绍的例如前面介绍的“H1”“H6”标签都有标签都有一个一个“align”的属性，用来设置的属性，用来设置“对齐方对齐方式式”。每个属性都可以设置一个每个属性都可以设置一个“属性值属性值”，例如例如“align”属性可以有属性可以有3种属性值：种属性值：“left”（左对齐）、（左对齐）、“center”（居中（居中对齐）或者对齐）或者“right”（右对齐）。（右对齐）。图图1-10 1-10 对齐效果对齐效果【例例1-3】“对齐对齐”属性示例属性示例 这是测试文件这是测试文件 HTML 文件的内容就写在这里文件的内容就写在这里.

18、文本左对齐文本左对齐 文本居中对齐文本居中对齐 文本右对齐文本右对齐 1.4 Dreamweaver1.4 Dreamweaver的操作环境的操作环境 Dreamweaver 8的用户界面非常友好，的用户界面非常友好，为设计师带来了很大的方便。为设计师带来了很大的方便。Dreamweaver 8的主界面如图的主界面如图1-11所示。所示。下面分别介绍其中几个主要部分。下面分别介绍其中几个主要部分。图图1.11 1.11 DreamweaverDreamweaver 8 8的主界面的主界面1.4.1 文档窗口文档窗口 文档窗口位于界面的中部，它是用来编文档窗口位于界面的中部，它是用来编排网页的区

19、域，与在浏览器中的结果近似。排网页的区域，与在浏览器中的结果近似。1.4.2 “插入插入”工具栏工具栏 选择菜单选择菜单“窗口窗口插入插入”命令，可以命令，可以打开或关闭打开或关闭“插入插入”工具栏。它位于界面工具栏。它位于界面的上方，作用是在光标位置插入各种对象。的上方，作用是在光标位置插入各种对象。单击面板左端的按钮，可以在弹出菜单中单击面板左端的按钮，可以在弹出菜单中切换不同页，每页中有不同类型的对象，切换不同页，每页中有不同类型的对象，如图如图1-12所示。所示。图图1-12 1-12“插入插入”面板面板1.4.3 “属性属性”面板面板 选择菜单栏中的选择菜单栏中的“窗口窗口属性属性”

20、命令，命令，就可以打开或关闭就可以打开或关闭“属性属性”面板。当鼠标面板。当鼠标选中一些文字或某个对象时，选中一些文字或某个对象时，“属性属性”面面板就会显示相关信息和参数，用户可对其板就会显示相关信息和参数，用户可对其进行修改和设定。进行修改和设定。图图1-13 1-13 文字对象的文字对象的“属性属性”面板面板1.4.4 其他面板和工具条其他面板和工具条 除了上面介绍的两种面板之外，这里还除了上面介绍的两种面板之外，这里还有必要对一些重要的界面元素做简单介绍。有必要对一些重要的界面元素做简单介绍。图图1-14 1-14 文档工具条文档工具条图图1-15 1-15 “文件文件”面板组面板组1

21、.5 1.5 建立本地站点建立本地站点 使用使用Dreamweaver的第一步就是在本的第一步就是在本地硬盘上建立一个网站。地硬盘上建立一个网站。在在Dreamweaver主界面上选择菜单主界面上选择菜单“站点站点管理站点管理站点”命令，这时会出现命令，这时会出现“管管理站点理站点”对话框，如图对话框，如图1-16所示，单击所示，单击“新建新建”按钮，再选择按钮，再选择“站点站点”命令，打开命令，打开“站点定义站点定义”对话框。对话框。该对话框中有该对话框中有“基本基本”和和“高级高级”两个两个选项卡，在这里先选择选项卡，在这里先选择“基本基本”，它采用，它采用向导式的设置方法。在向导式的设置

22、方法。在“您打算为您的站您打算为您的站点起什么名字？点起什么名字？”下面的框中输入给网站下面的框中输入给网站起的名字，如图起的名字，如图1-17所示。所示。图图1-16 1-16 管理站点管理站点 图图1-17 1-17 “网站定义网站定义”对话框对话框 图图1-18 1-18 设定是否要使用服务器端的技术设定是否要使用服务器端的技术 图图1-19 1-19 设定在开发期间如何操作文件设定在开发期间如何操作文件 图图1-20 1-20 设定计算机与服务器的连接方式设定计算机与服务器的连接方式 图图1-21 1-21 选择选择“高级高级”方式定义网站方式定义网站 图图1-22 1-22 选择本地

23、文件夹选择本地文件夹图图1-23 1-23 网站管理窗口网站管理窗口 图图1-24 1-24 为网站新增加一个文件为网站新增加一个文件 图图1-25 1-25 定义网站主页定义网站主页1.6 1.6 创创 建建 文文 档档 在在Dreamweaver中可以通过中可以通过3种方式种方式创建文档：创建新的空白文档、创建以模创建文档：创建新的空白文档、创建以模板为基础的文档和打开并编辑已经存在的板为基础的文档和打开并编辑已经存在的文档。文档。1.6.1 创建新的空白文档创建新的空白文档 刚才我们已经为网站加入了一个刚才我们已经为网站加入了一个HTML文件，并命名为文件，并命名为index.htm，实

24、际上这就已，实际上这就已经创建了一个新的空白文档。经创建了一个新的空白文档。图图1-26 1-26 创建新文档创建新文档图图1-27 1-27 同时打开两个文档窗口同时打开两个文档窗口 图图1-28 1-28 切换多个文档切换多个文档图图1-29 1-29 打开打开HTMLHTML面板面板1.6.2 在已有文件的基础上创建文档在已有文件的基础上创建文档 除了创建空白的文档窗口之外，在除了创建空白的文档窗口之外，在Dreamweaver中还可以直接打开已经存在中还可以直接打开已经存在的的HTML文件（无论它是用什么工具建立的）文件（无论它是用什么工具建立的），这样就可以在现有文档的基础上编辑它。

25、，这样就可以在现有文档的基础上编辑它。打开现有文件的方法是选择打开现有文件的方法是选择“文件文件”菜单菜单的的“打开打开”命令，再在命令，再在“打开打开”对话框中对话框中选择要打开的文件。选择要打开的文件。除此之外，除此之外，Dreamweaver还使用模板还使用模板机制。这种模板机制在技术上是很有特色机制。这种模板机制在技术上是很有特色的。在的。在Dreamweaver中可以把制作好的一中可以把制作好的一个页面另存为模板，再使用这个模板来生个页面另存为模板，再使用这个模板来生成新的文档，并且可以设定模板中的一部成新的文档，并且可以设定模板中的一部分为可编辑区域，从而实现了将内容从设分为可编辑

26、区域，从而实现了将内容从设计方案中分离出来。计方案中分离出来。同时，如果修改了模板，同时，如果修改了模板，Dreamweaver可以自动把所有使用该模板可以自动把所有使用该模板创建的文档进行相应的修改，这对于网页创建的文档进行相应的修改，这对于网页设计师来说真是梦寐以求的功能。设计师来说真是梦寐以求的功能。1.6.3 设置页面属性设置页面属性 创建文档后还需要对它进行设置，设定创建文档后还需要对它进行设置，设定一些影响整个网页的参数。选择一些影响整个网页的参数。选择“修改修改”菜单中的菜单中的“页面属性页面属性”命令，会出现命令，会出现“页页面属性面属性”对话框，如图对话框，如图1-30所示。

27、所示。图图1-30 1-30 设定页面属性设定页面属性1.7 1.7 实践与练习：创建新文档实践与练习：创建新文档 本练习的内容是创建一个新的页面文档，本练习的内容是创建一个新的页面文档，并插入一些基本的元素。这些元素的详细并插入一些基本的元素。这些元素的详细操作方法，在后续章节中还会深入介绍，操作方法，在后续章节中还会深入介绍，这里只是一个预习。本例最终效果如图这里只是一个预习。本例最终效果如图1-31所示。所示。图图1-31 1-31 预览效果预览效果图图1-32 1-32 创建新文档创建新文档图图1-33 1-33 显示显示“设计设计”视图视图图图1-34 1-34 直接输入文字直接输入

28、文字 图图1-35 1-35 打开打开“图像图像”列表列表图图1-36 1-36 选择图片选择图片图图1-37 1-37 辅助功能提示框辅助功能提示框 图图1-38 1-38 插入图片插入图片 图图1-39 1-39 修改标题名称修改标题名称图图1-40 1-40 预览效果预览效果小小 结结 通过本章的学习，读者可以了解到，网通过本章的学习，读者可以了解到，网页设计和开发是一个综合性相当强的工作，页设计和开发是一个综合性相当强的工作，即需要有美工人员能进行视觉方面的设计，即需要有美工人员能进行视觉方面的设计，同时也需要程序开发人员进行功能开发。同时也需要程序开发人员进行功能开发。因此需要设计师对各个方面的技术和知识因此需要设计师对各个方面的技术和知识有所掌握，才能从容应付可能遇到的各种有所掌握，才能从容应付可能遇到的各种问题。问题。此外，本章还介绍了此外，本章还介绍了“站点站点”的基本概念，的基本概念，并讲解了建立本地站点的操作方法，进而并讲解了建立本地站点的操作方法，进而在建立站点的基础上，介绍了创建网页文在建立站点的基础上，介绍了创建网页文档的方法。在此基础上，就可以向创建好档的方法。在此基础上，就可以向创建好的网页中添加各种丰富多彩的网页元素了，的网页中添加各种丰富多彩的网页元素了，这将从下一章开始逐一介绍。这将从下一章开始逐一介绍。