《网页制作与开发教程.ppt》由会员分享，可在线阅读，更多相关《网页制作与开发教程.ppt（92页珍藏版）》请在三一文库上搜索。
1、网页制作与开发教程,第1章 网页制作基础,本章首先对一些与网络相关的概念做了概要的阐述，介绍了网页制作的基本知识，使读者对Internet传递信息的基本原理有所了解。然后，介绍网页制作的基本步骤，对HTML（超文本标签语言）的基本知识进行入门性的阐述，对Dreamweaver的操作环境进行介绍，并将介绍如何使用Dreamweaver建一个最基本的网站和网页，从而为后续章节的学习打下基础。,1.1 网页制作基础知识,当打开浏览器后，在地址栏中输入一个网站的地址，然后单击地址栏后面的“转到”按钮，或直接按回车键，就会展示出相应的网页内容，如图1-1所示。,图1-1 网上冲浪,网页中可以包含多种类型
2、的内容，这些内容成为网页的“元素”。最基本的是文字，此外，还可以使用图片、动画，以及声音、视频等多媒体文件。制作网页的目的之一，就是要给访问者留下深刻的印象，展示有价值的信息。,1.1.1 网页的分类,按网页在一个站点中所处的位置，可将网页划分为“主页”和“内页”。“主页”是指进入一个站点时看到的第一页，“内页”是指与主页相链接的页面。 按网页的表现形式，可将网页划分为“静态网页”和“动态网页”。,1.1.2 网页制作中的基本概念,1服务器与浏览器,图1-2 服务器与浏览器的关系示意图,2超链接,超链接的本质是一种可以指向其他文件的文字或图片。,3URL,URL为“Uniform Resour
3、ce Locator”的缩写，通常翻译为“统一资源定位器”，也就是人们通常说的“网址”。它用于指定Internet上的资源位置。,图1-3 超链接的作用,图1-4 输入URL,4HTML,网页文件是用一种标签语言书写的，这种语言称为HTML（Hyper Text Markup Language，超文本标签语言）。有两种方式来产生HTML文件：一种是自己写HTML文件，事实上这并不非常困难，也不需要特别的技巧；另一种是使用HTML编辑器，它可以辅助使用者来做编写的工作。,图1-5 网页的HTML源文件,5上传与下载,如果条件许可，也可以把自己的计算机设置成服务器。大多数情况下，只需要花一点钱租用
4、一个服务器，把制作好的网站传送到服务器上，这个过程就称为“上传”。而其他计算机通过浏览器访问网页的时候，所经历的过程就是“下载”的过程，这样计算机中才能看到它。,6域名,“域名”是在网络上的重要标识，起着识别作用，域名可分为不同级别，包括顶级域名、二级域名等。顶级域名又分为两类。一是国家、地区顶级域名。 二是国际顶级域名。,7网站,“网站”就是在Internet上一块固定的面向全世界发布消息的地方。它由域名（也就是网站地址）和网站空间构成，网站空间里存放的就是各种网页。有时候，网站也被称做站点。 衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站服务内容等几方面考虑。,8IP地
5、址,“IP”的全拼是“Internet Protocol”，也就是“Internet协议”，它是Internet能够运行的基础。 在使用二进制表示的时候，IP地址的长度为32位，分为4段，每段8位。用十进制数字表示的时候，每段数字范围为1255，段与段之间用英文句点隔开，如159.226.1.1。,1.2 网页制作的基本步骤,1收集和整理资料 2制作网页 3测试站点 4发布站点 5站点维护和更新,1.3 HTML入门,我们常常讲起“网页”，事实上每一个网页都是一个文件，这个文件里面包含了HTML指令，所以这些文件就被称为HTML文件。HTML是一种描述性的标签语言，这些标签符用来定义HTML文
6、件中信息的格式和功能。,当浏览器接收到HTML文件后，就解释HTML文件内的标签符，根据标签符去执行相应的显示功能或实现某些功能。注意这些标签符必须用小于号（“”）括起来。,1.3.1 HTML标签符的基本格式,HTML标签符最基本的格式是“内容”。标签符通常成对使用，前面的“”表示某种格式的开始，后面的“”表示这种格式的结束。,例如，HTML文件中的“”和“”标签符用来定义HTML文件中的文字为粗体字。就是说，在这一对标签中的内容都以粗体的格式在浏览器中显示。例如在文件中有“Hello，World ! ”，那么在浏览器中将显示出粗体字“Hello，World !”。,HTML的概念很简单，就
7、是写入什么样的标签符，浏览器就会相应执行该标签符所能实现的功能。不过有一点要注意，我们最常用的Netscape和Internet Explorer浏览器并不完全兼容，即有的标签只能被其中一种浏览器识别。,就目前的情形来看，Internet Explorer已经取得了很大的优势，但在制作网页时最好还是二者兼顾。另外，Dreamweaver已经充分考虑到了兼容性的问题，尽可能地使制作出的网页在两个浏览器上都能正确显示。,1.3.2 简单的HTML文件,现在读者已经对HTML有了一些最基本、最简单的认识，下面就开始学习HTML的一些基本语句。完整的HTML规则完全可以写成一本几百页的书，这里仅介绍H
8、TML中最重要的几个标签。,【例1-1】 最简单的HTML文件 这是测试文件 HTML 文件的内容就写在这里. . ,图1-6 用Windows的“记事本”编辑源文件,图1-7 Windows“记事本”中HTML文件的保存,图1-8 打开浏览器的窗口后的效果,注意这个文件中有以下4对标签。 1HTML标签 “”标签放在HTML文件的开头，告诉浏览器，这个文件是HTML文件。而在文件的结尾，是“”结束标签。,2文件头标签,文件头标签是“”和“”，一般放在“”标签的后面，用来标明文件的题目或定义部分。,3文件标题标签,文件标题标签为“”和“”。这对标签用来设定文件的标题。浏览器通常都会将文件标题显
9、示在浏览器窗口的左上角，因此这个标题很有用。,4文件体标签,文件体标签为“”和“”。这对标签一般都被用来指明HTML文档的内容，例如文字、标题、段落和列表等，也可以用来定义主页背景颜色。,1.3.3 进一步认识标签,1“标题”标签 标题标签的格式为“”和“”（?代表16的数字）。,图1-9 加入标题字的效果,【例1-2】 “标题”标签示例 这是测试文件 ,HTML 文件的内容就写在这里. . 这是H1标题字 这是H2标题字 这是H3标题字 这是H4标题字 这是H5标题字 这是H6标题字 ,2“对齐”属性,在这里要引入一个新的概念“属性”。HTML语言的标签还可以带有一些属性，例如前面介绍的“H
10、1”“H6”标签都有一个“align”的属性，用来设置“对齐方式”。,每个属性都可以设置一个“属性值”，例如“align”属性可以有3种属性值：“left”（左对齐）、“center”（居中对齐）或者“right”（右对齐）。,图1-10 对齐效果,【例1-3】 “对齐”属性示例 这是测试文件 ,HTML 文件的内容就写在这里. . 文本左对齐 文本居中对齐 文本右对齐 ,1.4 Dreamweaver的操作环境,Dreamweaver 8的用户界面非常友好，为设计师带来了很大的方便。 Dreamweaver 8的主界面如图1-11所示。下面分别介绍其中几个主要部分。,图1.11 Dreamw
11、eaver 8的主界面,1.4.1 文档窗口,文档窗口位于界面的中部，它是用来编排网页的区域，与在浏览器中的结果近似。,1.4.2 “插入”工具栏,选择菜单“窗口插入”命令，可以打开或关闭“插入”工具栏。它位于界面的上方，作用是在光标位置插入各种对象。单击面板左端的按钮，可以在弹出菜单中切换不同页，每页中有不同类型的对象，如图1-12所示。,图1-12 “插入”面板,1.4.3 “属性”面板,选择菜单栏中的“窗口属性”命令，就可以打开或关闭“属性”面板。当鼠标选中一些文字或某个对象时，“属性”面板就会显示相关信息和参数，用户可对其进行修改和设定。,图1-13 文字对象的“属性”面板,1.4.4
12、 其他面板和工具条,除了上面介绍的两种面板之外，这里还有必要对一些重要的界面元素做简单介绍。,图1-14 文档工具条,图1-15 “文件”面板组,1.5 建立本地站点,使用Dreamweaver的第一步就是在本地硬盘上建立一个网站。,在Dreamweaver主界面上选择菜单“站点管理站点”命令，这时会出现“管理站点”对话框，如图1-16所示，单击“新建”按钮，再选择“站点”命令，打开“站点定义”对话框。,该对话框中有“基本”和“高级”两个选项卡，在这里先选择“基本”，它采用向导式的设置方法。在“您打算为您的站点起什么名字？”下面的框中输入给网站起的名字，如图1-17所示。,图1-16 管理站点
13、,图1-17 “网站定义”对话框,图1-18 设定是否要使用服务器端的技术,图1-19 设定在开发期间如何操作文件,图1-20 设定计算机与服务器的连接方式,图1-21 选择“高级”方式定义网站,图1-22 选择本地文件夹,图1-23 网站管理窗口,图1-24 为网站新增加一个文件,图1-25 定义网站主页,1.6 创 建 文 档,在Dreamweaver中可以通过3种方式创建文档：创建新的空白文档、创建以模板为基础的文档和打开并编辑已经存在的文档。,1.6.1 创建新的空白文档,刚才我们已经为网站加入了一个HTML文件，并命名为index.htm，实际上这就已经创建了一个新的空白文档。,图1
14、-26 创建新文档,图1-27 同时打开两个文档窗口,图1-28 切换多个文档,图1-29 打开HTML面板,1.6.2 在已有文件的基础上创建文档,除了创建空白的文档窗口之外，在Dreamweaver中还可以直接打开已经存在的HTML文件（无论它是用什么工具建立的），这样就可以在现有文档的基础上编辑它。打开现有文件的方法是选择“文件”菜单的“打开”命令，再在“打开”对话框中选择要打开的文件。,除此之外，Dreamweaver还使用模板机制。这种模板机制在技术上是很有特色的。在Dreamweaver中可以把制作好的一个页面另存为模板，再使用这个模板来生成新的文档，并且可以设定模板中的一部分为可
15、编辑区域，从而实现了将内容从设计方案中分离出来。,同时，如果修改了模板，Dreamweaver可以自动把所有使用该模板创建的文档进行相应的修改，这对于网页设计师来说真是梦寐以求的功能。,1.6.3 设置页面属性,创建文档后还需要对它进行设置，设定一些影响整个网页的参数。选择“修改”菜单中的“页面属性”命令，会出现“页面属性”对话框，如图1-30所示。,图1-30 设定页面属性,1.7 实践与练习：创建新文档,本练习的内容是创建一个新的页面文档，并插入一些基本的元素。这些元素的详细操作方法，在后续章节中还会深入介绍，这里只是一个预习。本例最终效果如图1-31所示。,图1-31 预览效果,图1-3
16、2 创建新文档,图1-33 显示“设计”视图,图1-34 直接输入文字,图1-35 打开“图像”列表,图1-36 选择图片,图1-37 辅助功能提示框,图1-38 插入图片,图1-39 修改标题名称,图1-40 预览效果,小 结,通过本章的学习，读者可以了解到，网页设计和开发是一个综合性相当强的工作，即需要有美工人员能进行视觉方面的设计，同时也需要程序开发人员进行功能开发。因此需要设计师对各个方面的技术和知识有所掌握，才能从容应付可能遇到的各种问题。,此外，本章还介绍了“站点”的基本概念，并讲解了建立本地站点的操作方法，进而在建立站点的基础上，介绍了创建网页文档的方法。在此基础上，就可以向创建好的网页中添加各种丰富多彩的网页元素了，这将从下一章开始逐一介绍。,