网页制作与开发教程.pptx

网页制作与开发教程;第1章网页制作基础;;;本章首先对一些与网络相关的概念做了概要的阐述，介绍了网页制作的基本知

识，使读者对Internet传递信息的基本原理有所了解。然后，介绍网页制作的基本步骤，对HTML（超文本标签语言）的基本知识进行入门性的阐述，对Dreamweaver的;1.1 网页制作基础知识;图1-1;网页中可以包含多种类型的内容，这些内容成为网页的“元素”。最基本的是文字，此外，还可以使用图片、动画，以及声音、视频等多媒体文件。制作网页的目的之一，就是要给访问者留下深刻的印象，展示有价值的信息。;1.1.1 网页的分类;1.1.2 网页制作中的基本概念;2．超链接;3．URL;图1-3 超链接的作用;图1-4;4．HTML;图1-5;5．上传与下载;6．域名;7．网站;8．IP地址;1.2 网页制作的基本步骤;1.3 HTML入门;当浏览器接收到HTML文件后，就解释HTML文件内的标签符，根据标签符去执行相应的显示功能或实现某些功能。注意这些标签符必须用小于号（“”）和大于号

（“”）括起来。;1.3.1 HTML标签符的基本格式;例如，HTML文件中的“b”和“/b”标签符用来定义HTML文件中的文字为粗体字。就是说，在这一对标签中的内容都以粗体的格式在浏览器中显示。例

如在文件中有“bHello，World!/b”，那么在浏览器中将显示出粗体字“Hello，World!”。;HTML的概念很简单，就是写入什么样的标签符，浏览器就会相应执行该标签符所能实现的功能。不过有一点要注意，我们最常用的Netscape和InternetExplorer浏览器并不完全兼容，即有的标签只能被其中一种浏览器识别。;就目前的情形来看，InternetExplorer已经取得了很大的优势，但在制作网页时最好还是二者兼顾。另外，Dreamweaver

已经充分考虑到了兼容性的问题，尽可能地使制作出的网页在两个浏览器上都能正确显示。;1.3.2 简单的HTML文件;【例1-1】最简单的HTML文件

html;图1-6;图1-7;图1-8;注意这个文件中有以下4对标签。;2．文件头标签;3．文件标题标签;4．文件体标签;1.3.3 进一步认识标签;图1-9;【例1-2】“标题”标签示例

html;HTML文件的内容就写在这里......

h1这是H1标题字/h1;2．“对齐”属性;每个属性都可以设置一个“属性值”，例如“align”属性可以有3种属性值：“left”（左对齐）、“center”（居中对齐）或者“right”（右对齐）。;图1-10;【例1-3】“对齐”属性示例

html;HTML文件的内容就写在这里......

h3 align=left文本左对齐/h3;1.4 Dreamweaver的操作环境;图1.11;1.4.1 文档窗口;1.4.2 “插入”工具栏;图1-12“插入”面板;1.4.3 “属性”面板;图1-13;1.4.4 其他面板和工具条;图1-14;图1-15 “文件”面板组;1.5 建立本地站点;在Dreamweaver主界面上选择菜单“站点→管理站点”命令，这时会出现

“管理站点”对话框，如图1-16所示，单击“新建”按钮，再选择“站点”命令，打开“站点定义”对话框。;该对话框中有“基本”和“高级”两个选项卡，在这里先选择“基本”，它采用向导式的设置方法。在“您打算为您的站点起什么名字？”下面的框中输入给网站起的名字，如图1-17所示。;图1-16;图1-17;图1-18;图1-19;图1-20;图1-21;图1-22;图1-23;图1-24;图1-25;1.6 创建文档;1.6.1 创建新的空白文档;图1-26;图1-27;图1-28 切换多个文档

第七十三页，共九十二页。;图1-29;1.6.2 在已有文件的基础上创建文档;除此之外，Dreamweaver还使用模板机制。这种模板机制在技术上是很有特色的。在Dreamweaver中可以把制作好的一个页面另存为模板，再使用这个模板来生成新的文档，并且可以设定模板中的一部分为可编辑区域，从而实现了将内容从设计方案中分离出来。;同时，如果修改了模板，Dreamweaver可以自动把所有使用该模板创建的文档进行相应的修改，这对于网页设计师来说真是梦寐以求的功能。;1.6.3 设置页面属性;图1-30;1.7 实践与练习：创建新文档;图1-31;图1-32;图1-33 显示“设计”视图;图1-34;图1-35;图1-36;图1-37 辅助功能提示框;图1-38;图1-39;图1-40;小 结;此外，本章还介绍了“站点”的基本概念，并讲解了建立本地站点的操作方法，进而在建立站点的基础上，介绍了创建网页文档的