null网页制作与开发教程网页制作与开发教程null第1章 网页制作基础nullnullnull 本章首先对一些与网络相关的概念做了概要的阐述，介绍了网页制作的基本知识，使读者对Internet传递信息的基本原理有所了解。然后，介绍网页制作的基本步骤，对HTML（超文本标签语言）的基本知识进行入门性的阐述，对Dreamweaver的操作环境进行介绍，并将介绍如何使用Dreamweaver建一个最基本的网站和网页，从而为后续章节的学习打下基础。1.1 网页制作基础知识1.1 网页制作基础知识 当打开浏览器后，在地址栏中输入一个网站的地址，然后单击地址栏后面的“转到”按钮，或直接按回车键，就会展示出相应的网页内容，如图1-1所示。null图1-1 网上冲浪null 网页中可以包含多种类型的内容，这些内容成为网页的“元素”。最基本的是文字，此外，还可以使用图片、动画，以及声音、视频等多媒体文件。制作网页的目的之一，就是要给访问者留下深刻的印象，展示有价值的信息。 1.1.1 网页的分类1.1.1 网页的分类 按网页在一个站点中所处的位置，可将网页划分为“主页”和“内页”。“主页”是指进入一个站点时看到的第一页，“内页”是指与主页相链接的页面。 按网页的表现形式，可将网页划分为“静态网页”和“动态网页”。 1.1.2 网页制作中的基本概念1.1.2 网页制作中的基本概念1．服务器与浏览器 图1-2 服务器与浏览器的关系示意图2．超链接2．超链接 超链接的本质是一种可以指向其他文件的文字或图片。 3．URL3．URL URL为“Uniform Resource Locator”的缩写，通常翻译为“统一资源定位器”，也就是人们通常说的“网址”。它用于指定Internet上的资源位置。null图1-3 超链接的作用null图1-4 输入URL4．HTML4．HTML 网页文件是用一种标签语言书写的，这种语言称为HTML（Hyper Text Markup Language，超文本标签语言）。有两种方式来产生HTML文件：一种是自己写HTML文件，事实上这并不非常困难，也不需要特别的技巧；另一种是使用HTML编辑器，它可以辅助使用者来做编写的工作。null图1-5 网页的HTML源文件5．上传与下载5．上传与下载 如果条件许可，也可以把自己的计算机设置成服务器。大多数情况下，只需要花一点钱租用一个服务器，把制作好的网站传送到服务器上，这个过程就称为“上传”。而其他计算机通过浏览器访问网页的时候，所经历的过程就是“下载”的过程，这样计算机中才能看到它。6．域名6．域名 “域名”是在网络上的重要标识，起着识别作用，域名可分为不同级别，包括顶级域名、二级域名等。顶级域名又分为两类。一是国家、地区顶级域名。 二是国际顶级域名。7．网站7．网站 “网站”就是在Internet上一块固定的面向全世界发布消息的地方。它由域名（也就是网站地址）和网站空间构成，网站空间里存放的就是各种网页。有时候，网站也被称做站点。 衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站服务内容等几方面考虑。 8．IP地址8．IP地址 “IP”的全拼是“Internet Protocol”，也就是“Internet 协议 离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载 ”，它是Internet能够运行的基础。 在使用二进制表示的时候，IP地址的长度为32位，分为4段，每段8位。用十进制数字表示的时候，每段数字范围为1～255，段与段之间用英文句点隔开，如159.226.1.1。1.2 网页制作的基本步骤1.2 网页制作的基本步骤1．收集和整理资料 2．制作网页 3．测试站点 4．发布站点 5．站点维护和更新 1.3 HTML入门1.3 HTML入门 我们常常讲起“网页”，事实上每一个网页都是一个文件，这个文件里面包含了HTML指令，所以这些文件就被称为HTML文件。HTML是一种描述性的标签语言，这些标签符用来定义HTML文件中信息的格式和功能。null 当浏览器接收到HTML文件后，就解释HTML文件内的标签符，根据标签符去执行相应的显示功能或实现某些功能。注意这些标签符必须用小于号（“<”）和大于号（“>”）括起来。1.3.1 HTML标签符的基本格式1.3.1 HTML标签符的基本格式 HTML标签符最基本的格式是“<标签符>内容”。标签符通常成对使用，前面的“<标签符>”表示某种格式的开始，后面的“”表示这种格式的结束。null 例如，HTML文件中的“”和“”标签符用来定义HTML文件中的文字为粗体字。就是说，在这一对标签中的内容都以粗体的格式在浏览器中显示。例如在文件中有“Hello，World ! ”，那么在浏览器中将显示出粗体字“Hello，World !”。 null HTML的概念很简单，就是写入什么样的标签符，浏览器就会相应执行该标签符所能实现的功能。不过有一点要注意，我们最常用的Netscape和Internet Explorer浏览器并不完全兼容，即有的标签只能被其中一种浏览器识别。null 就目前的情形来看，Internet Explorer已经取得了很大的优势，但在制作网页时最好还是二者兼顾。另外，Dreamweaver已经充分考虑到了兼容性的问 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 ，尽可能地使制作出的网页在两个浏览器上都能正确显示。 1.3.2 简单的HTML文件1.3.2 简单的HTML文件 现在读者已经对HTML有了一些最基本、最简单的认识，下面就开始学习HTML的一些基本语句。完整的HTML规则完全可以写成一本几百页的书，这里仅介绍HTML中最重要的几个标签。null【例1-1】 最简单的HTML文件 HTML 文件的内容就写在这里... ... null图1-6 用Windows的“记事本”编辑源文件null“记事本”保存html文件null图1-8 打开浏览器的窗口后的效果null 注意这个文件中有以下4对标签。 1．HTML标签 “”标签放在HTML文件的开头，告诉浏览器，这个文件是HTML文件。而在文件的结尾，是“”结束标签。2．文件头标签2．文件头标签 文件头标签是“”和“”，一般放在“”标签的后面，用来标明文件的题目或定义部分。3．文件标题标签3．文件标题标签 文件标题标签为“”。这对标签用来设定文件的标题。浏览器通常都会将文件标题显示在浏览器窗口的左上角，因此这个标题很有用。4．文件体标签4．文件体标签 文件体标签为“”和“”。这对标签一般都被用来指明HTML文档的内容，例如文字、标题、段落和列表等，也可以用来定义主页背景颜色。1.3.3 进一步认识标签1.3.3 进一步认识标签1．“标题”标签 标题标签的格式为“”和“”（?代表1～6的数字）。null图1-9 加入标题字的效果null【例1-2】 “标题”标签示例 null HTML 文件的内容就写在这里... ...

这是H1标题字

这是H2标题字

这是H3标题字

这是H4标题字

这是H5标题字

这是H6标题字

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

文本左对齐

文本居中对齐

文本右对齐

1.4 Dreamweaver的操作环境1.4 Dreamweaver的操作环境 Dreamweaver 8的用户界面非常友好，为 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 师带来了很大的方便。 Dreamweaver 8的主界面如图1-11所示。下面分别介绍其中几个主要部分。 null图1.11 Dreamweaver 8的主界面1.4.1 文档窗口1.4.1 文档窗口 文档窗口位于界面的中部，它是用来编排网页的区域，与在浏览器中的结果近似。1.4.2 “插入”工具栏1.4.2 “插入”工具栏 选择菜单“窗口→插入”命令，可以打开或关闭“插入”工具栏。它位于界面的上方，作用是在光标位置插入各种对象。单击面板左端的按钮，可以在弹出菜单中切换不同页，每页中有不同类型的对象，如图1-12所示。null图1-12 “插入”面板1.4.3 “属性”面板1.4.3 “属性”面板 选择菜单栏中的“窗口→属性”命令，就可以打开或关闭“属性”面板。当鼠标选中一些文字或某个对象时，“属性”面板就会显示相关信息和参数，用户可对其进行修改和设定。 null图1-13 文字对象的“属性”面板1.4.4 其他面板和工具条1.4.4 其他面板和工具条 除了上面介绍的两种面板之外，这里还有必要对一些重要的界面元素做简单介绍。null图1-14 文档工具条null图1-15 “文件”面板组1.5 建立本地站点1.5 建立本地站点 使用Dreamweaver的第一步就是在本地硬盘上建立一个网站。null 在Dreamweaver主界面上选择菜单“站点→管理站点”命令，这时会出现“管理站点”对话框，如图1-16所示，单击“新建”按钮，再选择“站点”命令，打开“站点定义”对话框。 null 该对话框中有“基本”和“高级”两个选项卡，在这里先选择“基本”，它采用向导式的设置方法。在“您打算为您的站点起什么名字？”下面的框中输入给网站起的名字，如图1-17所示。null图1-16 管理站点 null图1-17 “网站定义”对话框 null 图1-18 设定是否要使用服务器端的技术 null 图1-19 设定在开发期间如何操作文件 null图1-20 设定计算机与服务器的连接方式 null 图1-21 选择“高级”方式定义网站 null图1-22 选择本地文件夹null图1-23 网站管理窗口 null图1-24 为网站新增加一个文件 null图1-25 定义网站主页1.6 创 建 文 档1.6 创 建 文 档 在Dreamweaver中可以通过3种方式创建文档：创建新的空白文档、创建以 模板 个人简介word模板免费下载关于员工迟到处罚通告模板康奈尔office模板下载康奈尔 笔记本 模板 下载软件方案模板免费下载 为基础的文档和打开并编辑已经存在的文档。1.6.1 创建新的空白文档1.6.1 创建新的空白文档 刚才我们已经为网站加入了一个HTML文件，并命名为index.htm，实际上这就已经创建了一个新的空白文档。null图1-26 创建新文档null图1-27 同时打开两个文档窗口 null图1-28 切换多个文档null图1-29 打开HTML面板1.6.2 在已有文件的基础上创建文档1.6.2 在已有文件的基础上创建文档 除了创建空白的文档窗口之外，在Dreamweaver中还可以直接打开已经存在的HTML文件（无论它是用什么工具建立的），这样就可以在现有文档的基础上编辑它。打开现有文件的方法是选择“文件”菜单的“打开”命令，再在“打开”对话框中选择要打开的文件。 null 除此之外，Dreamweaver还使用模板机制。这种模板机制在技术上是很有特色的。在Dreamweaver中可以把制作好的一个页面另存为模板，再使用这个模板来生成新的文档，并且可以设定模板中的一部分为可编辑区域，从而实现了将内容从设计 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 中分离出来。null 同时，如果修改了模板，Dreamweaver可以自动把所有使用该模板创建的文档进行相应的修改，这对于网页设计师来说真是梦寐以求的功能。 1.6.3 设置页面属性1.6.3 设置页面属性 创建文档后还需要对它进行设置，设定一些影响整个网页的参数。选择“修改”菜单中的“页面属性”命令，会出现“页面属性”对话框，如图1-30所示。 null图1-30 设定页面属性1.7 实践与练习：创建新文档1.7 实践与练习：创建新文档 本练习的内容是创建一个新的页面文档，并插入一些基本的元素。这些元素的详细操作方法，在后续章节中还会深入介绍，这里只是一个预习。本例最终效果如图1-31所示。null图1-31 预览效果null图1-32 创建新文档null图1-33 显示“设计”视图null图1-34 直接输入文字 null图1-35 打开“图像”列表null图1-36 选择图片null图1-37 辅助功能提示框 null图1-38 插入图片 null图1-39 修改标题名称null图1-40 预览效果小 结小 结 通过本章的学习，读者可以了解到，网页设计和开发是一个综合性相当强的工作，即需要有美工人员能进行视觉方面的设计，同时也需要程序开发人员进行功能开发。因此需要设计师对各个方面的技术和知识有所掌握，才能从容应付可能遇到的各种问题。null此外，本章还介绍了“站点”的基本概念，并讲解了建立本地站点的操作方法，进而在建立站点的基础上，介绍了创建网页文档的方法。在此基础上，就可以向创建好的网页中添加各种丰富多彩的网页元素了，这将从下一章开始逐一介绍。