网页制作与开发教程.pptxVIP

网页制作与开发教程;;;; 本章首先对一些与网络相关的概念做了概要的阐述，介绍了网页制作的基本知识，使读者对Internet传递信息的基本原理有所了解。然后，介绍网页制作的基本步骤，对HTML（超文本标签语言）的基本知识进行入门性的阐述，对Dreamweaver的操作环境进行介绍，并将介绍如何使用Dreamweaver建一个最基本的网站和网页，从而为后续章节的学习打下基础。;1.1 网页制作基础知识;图1-1 网上冲浪; 网页中可以包含多种类型的内容，这些内容成为网页的“元素”。最基本的是文字，此外，还可以使用图片、动画，以及声音、视频等多媒体文件。制作网页的目的之一，就是要给访问者留下深刻的印象，展示有价值的信息。 ;1.1.1 网页的分类;1.1.2 网页制作中的基本概念;2．超链接;3．URL;图1-3 超链接的作用;图1-4 输入URL;4．HTML;图1-5 网页的HTML源文件;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和Internet Explorer浏览器并不完全兼容，即有的标签只能被其中一种浏览器识别。; 就目前的情形来看，Internet Explorer已经取得了很大的优势，但在制作网页时最好还是二者兼顾。另外，Dreamweaver已经充分考虑到了兼容性的问题，尽可能地使制作出的网页在两个浏览器上都能正确显示。 ;1.3.2 简单的HTML文件;【例1-1】 最简单的HTML文件 html head title这是测试文件/title /head body HTML 文件的内容就写在这里... ... /body /html;图1-6 用Windows的“记事本”编辑源文件;图1-7 Windows“记事本”中HTML文件的保存;图1-8 打开浏览器的窗口后的效果; 注意这个文件中有以下4对标签。 1．HTML标签 “html”标签放在HTML文件的开头，告诉浏览器，这个文件是HTML文件。而在文件的结尾，是“/html”结束标签。;2．文件头标签;3．文件标题标签;4．文件体标签;1.3.3 进一步认识标签;图1-9 加入标题字的效果;【例1-2】 “标题”标签示例 html head title这是测试文件/title /head body; HTML 文件的内容就写在这里... ... h1这是H1标题字/h1 h2这是H2标题字/h2 h3这是H3标题字/h3 h4这是H4标题字/h4 h5这是H5标题字/h5 h6这是H6标题字/h6 /body /html ;2．“对齐”属性; 每个属性都可以设置一个“属性值”，例如“align”属性可以有3种属性值：“left”（左对齐）、“center”（居中对齐）或者“right”（右对齐）。;图1-10 对齐效果;【例1-3】 “对齐”属性示例 html head title这是测试文件/title /head body ;HTML 文件的内容就写在这里... ... h3 align=left文本左对齐/h3 h3 align=center文本居中对齐/h3 h3 align=right文本右对齐/h3 /body /html ;1.4 Dreamweaver的操作环境;;1.4.1 文档窗