网页制作基础
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML标签符最基本的格式： 双标签 <标签符>内容</标签符> 标签符通常成对使用，前面的“<标签符>” 表示某种格式的开始，后面的“</标签符>” 表示这种格式的结束。 单标签 (自闭合标签) <标签符>内容
<html> <head> <title>你好！</title> </head> <body> Hello,world!<br> <b>Hello,world!</b> </body> </html>
除此之外，Dreamweaver还使用模板机制。 这种模板机制在技术上是很有特色的。在 Dreamweaver中可以把制作好的一个页面另存为 模板，再使用这个模板来生成新的文档，并且可 以设定模板中的一部分为可编辑区域，从而实现 了将内容从设计方案中分离出来。 同时，如果修改了模板，Dreamweaver可以 自动把所有使用该模板创建的文档进行相应的修 改，这对于网页设计师来说真是梦寐以求的功能。
文档工具条
“文件”面板组
Meta标签
META标签用来描述一个HTML网页文档的 属性，例如作者、日期和时间、网页描述、 关键词、页面刷新等。 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
根据这一行代码，浏览器就可以识别出这个网页应该用中文简体 字符显示。类似地，如果 将 “gb2312”替换为“big5”，就是我们熟 知的中文繁体字符了。
预览效果
创建新文档
列表
选择图片
辅助功能提示框
插入图片
修改标题名称
预览效果
小
结
通过本章的学习，我们可以了解到，网页设 计和开发是一个综合性相当强的工作，即需要有 美工人员能进行视觉方面的设计，同时也需要程 序开发人员进行功能开发。因此需要设计师对各 个方面的技术和知识有所掌握，才能从容应付可 能遇到的各种问题。 此外，本章还介绍了“站点”的基本概念， 并讲解了建立本地站点的操作方法，进而在建立 站点的基础上，介绍了创建网页文档的方法。在 此基础上，就可以向创建好的网页中添加各种丰 富多彩的网页元素了，这将从下一章开始逐一介 绍。
1.3.2 简单的HTML文件 【例】 最简单的HTML文件 标签 <html> 头标签 标题标签 <head> <title>这是测试文件</title> </head> 体标签 <body> HTML 文件的内容就写在这里... ... </body> </html>
运行
1.3.1 HTML标签符的基本格式
加入标题字的效果
【例】 “对齐”属性示例 <html> <head> <title>这是测试文件</title> </head> <body> HTML 文件的内容就写在这里... ... <h3 align=left>文本左对齐</h3> <h3 align=center>文本居中对齐</h3> <h3 align=right>文本右对齐</h3> </body> </html>
2．文件头标签
文件头标签是“<head>”和“</head>”， 一般放在“<html>”标签的后面，用来标明 文件的题目或定义部分。
3．文件标题标签
文件标题标签为“<title>”和“</title>”。 这对标签用来设定文件的标题。浏览器通 常都会将文件标题显示在浏览器窗口的左 上角，因此这个标题很有用。
2．“对齐”属性
在这里要引入一个新的概念——“属 性”。HTML语言的标签还可以带有一些属 性，例如前面介绍的“H1”～“H6”标签都 有一个“align”的属性，用来设置“对齐方 式”。 每个属性都可以设置一个“属性值”， 例如“align”属性可以有3种属性值：“left” （左对齐）、“center”（居中对齐）或者 “right”（右对齐）。
文档窗口位于界面的中部，它是用来 编排网页的区域，与在浏览器中的结果近 似。
1.4.2 “插入”工具栏 选择菜单“窗口→插入”命令，可以打开或 关闭“插入”工具栏。它位于界面的上方， 作用是在光标位置插入各种对象。单击面板 左端的按钮，可以在弹出菜单中切换不同页， 每页中有不同类型的对象，如图所示。
本地站点就是存放本地网站文件的根目录， 建立本地站点的目的是为了更好地维护和 管理网站中的网页文件及素材，也便于将 本地站点连接到远程服务器。 在使用Dreamweaver开发网站之前，应该建 立一个站点以及设置站点信息，用来管理 创建的网页，定义站点有两种方法，下面 分别进行介绍。
1.5.2 建立本地站点
“插入”面板
“插入”面板
1.4.3 “属性”面板
选择菜单栏中的“窗口→属性”命令，就 可以打开或关闭“属性”面板。当鼠标选 中一些文字或某个对象时，“属性”面板 就会显示相关信息和参数，用户可对其进 行修改和设定。
文字对象的“属性”面板
1.4.4 其他面板和工具条
除了上面介绍的两种面板之外，这里 还有必要对一些重要的界面元素做简单介 绍。
1.5
建立本地站点
使用Dreamweaver的第一步就是在本 地硬盘上建立一个网站。
1.5.1 站点的分类
1、本地站点： 当客户端与Web服务器运行在同一计算机上时， 客户URL中的主目录即为本地站点。 http://localhost/test/index.html或 http://127.0.0.1/test/index.html 2、远程站点： 当客户端与Web服务器运行在不同计算机上时， 客户URL中的主目录。 /test/index.html 3、Web站点： Web网站就是利用互联网技术，把企业、机构 或个人的信息，通过Web页面发布到互联网中， 通过申请域名而成的站点
管理站点
“网站定义”对话框
设定是否要使用服务器端的技术
设定在开发期间如何操作文件
设定计算机与服务器的连接方式
选择“高级”方式定义网站
选择本地文件夹
网站管理窗口
为网站新增加一个文件
定义网站主页
1.6
创 建 文 档
在Dreamweaver中可以通过3种方式 创建文档：创建新的空白文档、创建以模 板为基础的文档和打开并编辑已经存在的 文档。
打开浏览器的窗口后的效果
HTML文件指示一个纯文本文件，可以用 任何文本编辑器来编辑它，最简单的就是 用“记事本”来建立或编辑。HTML文件的 扩展名是“.html”或“.htm”。
进一步认识
用Windows的“记事本”编辑源文件
注意这个文件中有以下4对标签。 1．HTML标签 “<html>”标签放在HTML文件的开头， 告诉浏览器，这个文件是HTML文件。而在 文件的结尾，是“</html>”结束标签。
第1章 网页制作基础
1.1
网页制作基础知识
1.2
网页制作的基本步骤
1.3
HTML入门
1.4
Dreamweaver的操作环境
第1章 网页制作基础
1.5
建立本地站点 创建文档
1.6
1.7
实践与练习：创建新文档
小结
1.3
HTML入门
我们常常讲起“网页”，事实上每一个网页 都是一个文件，这个文件里面包含了HTML指令， 所以这些文件就被称为HTML文件。 HTML是一种描述性的标签语言，这些标签 符用来定义HTML文件中信息的格式和功能。 当浏览器接收到HTML文件后，就解释 HTML文件内的标签符，根据标签符去执行相应 的显示功能或实现某些功能。注意这些标签符必 须用小于号（“<”）和大于号（“>”）括起来。
1.6.3 设置页面属性
创建文档后还需要对它进行设置，设 定一些影响整个网页的参数。选择“修改” 菜单中的“页面属性”命令，会出现“页 面属性”对话框，如图所示。
设定页面属性
1.7
实践与练习：创建新文档
本练习的内容是创建一个新的页面文 档，并插入一些基本的元素。这些元素的 详细操作方法，在后续章节中还会深入介 绍，这里只是一个预习。本例最终效果如 图所示。
图1-10
对齐效果
1.4
Dreamweaver的操作环境
Dreamweaver CS3的用户界面非常友好， 为设计师带来了很大的方便。 Dreamweaver CS3的主界面如图所示。下 面分别介绍其中几个主要部分。
“插入”工具栏
面板组
文档窗口
属性面板
Dreamweaver 8的主界面
1.4.1 文档窗口
4．文件体标签
文件体标签为“<body>”和“</body>”。 这对标签一般都被用来指明HTML文档的内 容，例如文字、标题、段落和列表等，也 可以用来定义主页背景颜色。
1.3.3 进一步认识标签 1．“标题”标签
标题标签的格式为“<h?>”和 “</h?>”（?代表1～6的数字）。
【例】 “标题”标签示例 <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>
1.6.1 创建新的空白文档
刚才我们已经为网站加入了一个HTML 文件，并命名为index.htm，实际上这就已 经创建了一个新的空白文档。
创建新文档
同时打开两个文档窗口
切换多个文档
打开HTML面板
1.6.2 在已有文件的基础上创建文档
除了创建空白的文档窗口之外，在 Dreamweaver中还可以直接打开已经存在 的HTML文件（无论它是用什么工具建立 的），这样就可以在现有文档的基础上编 辑它。打开现有文件的方法是选择“文件” 菜单的“打开”命令，再在“打开”对话 框中选择要打开的文件。
在Dreamweaver主界面上选择菜单“站点 →管理站点”命令，这时会出现“管理站 点”对话框，如图所示，单击“新建”按 钮，再选择“站点”命令，打开“站点定 义”对话框。
该对话框中有“基本”和“高级”两 个选项卡，在这里先选择“基本”，它采 用向导式的设置方法。在“您打算为您的 站点起什么名字？”下面的框中输入给网 站起的名字，如图所示。