网页制作基础知识 李金旺
第1章 网页制作基础知识 目录 本章导读 前进 本章任务 知识细目 后退 上机实训 结束
本章导读 目录 本章主要介绍了网站、网页的基本概念、WWW服务的工作原理、Dreamweaver CS3的工作界面组成、HTML文档的基本结构和常见的HTML标记。 前进 后退 结束
本章任务 了解网站、网页的基本概念、WWW服务的工作原理； 目录 了解网站、网页的基本概念、WWW服务的工作原理； 熟悉Dreamweaver CS3的工作界面、文档窗口视图方式、面板组的基本操作； 前进 掌握Dreamweaver CS3的属性面板和文档工具栏的作用； 后退 掌握HTML文档的基本结构，学会使用HTML源代码制作简单网页的方法。 结束
知识细目 目录 1.1 网页基础知识 前进 1.2 Dreamweaver CS3的工作界面 1.3 HTML语言的基础知识 后退 结束
1.1 网页基础知识 Internet：是一个全球性的计算机互联网络，中文名称为“国际互联网”或“因特网”，如下图所示。 1.1 网页基础知识 目录 Internet：是一个全球性的计算机互联网络，中文名称为“国际互联网”或“因特网”，如下图所示。 Internet示意图 前进 后退 结束
1.1 网页基础知识 网站：指在网络上，根据一定的规则，使用网页开发软件制作的用于展示特定内容的相关网页的集合。 1.1 网页基础知识 网站：指在网络上，根据一定的规则，使用网页开发软件制作的用于展示特定内容的相关网页的集合。 目录 网页：一般又称作HTML文档，可以在互联网上传输，能被浏览器识别和翻译成页面并显示出来。 前进 网站、网页、主页之间的关系 网站是若干网页的集合,包括主页和其他网页。主页是指在浏览器的地址栏中输入网址后默认显示的页面，是网站的索引页，其他网页通过超链接与主页相连。 后退 结束
1.1 网页基础知识 WWW服务 WWW含义为“全球网”或“万维网”，它以HTTP为基础，提供面向Internet的信息查询服务，可以让用户使用统一界面的信息浏览系统查询Internet上的各类信息，其原理如下图所示。 目录 前进 WWW服务的基本原理 后退 结束
选用已有的范例创建CSS样式表等网页文件 1.2 Dreamweaver CS3的工作界面 目录 Dreamweaver CS3的启动界面 打开最近编辑过的网页文件 新建网页文件或其他对象 选用已有的范例创建CSS样式表等网页文件 前进 后退 结束
Dreamweaver CS3的工作界面 目录 前进 后退 结束
菜单栏 “文件”：提供新建、打开、保存、预览、转换文档格式等命令。 “编辑”：提供用于基本操作的标准菜单命令。 目录 “文件”：提供新建、打开、保存、预览、转换文档格式等命令。 “编辑”：提供用于基本操作的标准菜单命令。 “查看”：用于切换文档的各种视图，显示或隐藏各种页面元素。 “插入记录”：向页面中插入各种页面元素，创建超链接。 “修改”：用于设置页面属性及更改选定页面元素的属性。 “文本”：用于设置文本及段落的格式。 “命令”：提供了对各种命令的访问。 “站点”：提供了创建、编辑站点的命令。 “窗口”：用于设置工作区布局和各种面板的打开和隐藏。 前进 后退 结束
插入栏 “常用”类别：用于创建和插入最常用的对象。 目录 “常用”类别：用于创建和插入最常用的对象。 “布局”类别：用于插入表格、div标签、框架和 Spry构件。还 可以选择表格的两种视图：标准（默认）视图和扩展视图。 “表单”类别：包含一些按钮，用于创建表单和插入表单元素。 “数据”类别：可以插入Spry数据对象和其它动态元素。 “Spry”类别：包含一些用于构建 Spry 页面的按钮。 “文本”类别：用于插入各种文本格式和列表格式的标签。 “收藏夹”类别：用于将最常用的按钮分组和组织到某一公共位置。 前进 后退 结束
文档工具栏 “文档标题”：显示当前网页的标题。新建文档时，默认的网页标题是“无标题文档”。 目录 前进 “文档标题”：显示当前网页的标题。新建文档时，默认的网页标题是“无标题文档”。 “文件管理”：显示“文件管理”菜单，包括上传、下载等命令。 “在浏览器中预览/调试”：选择一种浏览器预览或调试文档。 “可视化助理”：用户可以使用各种可视化助理来设计页面。 “检查浏览器兼容性”：用于检查CSS是否对各种浏览器均兼容。 后退 结束
“文档”窗口显示当前打开的文档，用户在这里进行网页的编辑制作，分为“代码”视图、“设计”视图和同时显示“代码”视图和“设计”视图的“拆分”视图三种视图模式。 文档窗口 目录 前进 标签选择器位于状态栏的最左边，以HTML标记显示页面对象信息，通过它可以选择各种页面元素。 标签选择器 后退 状态栏 结束
属性面板 选取工具：用于选取“文档”窗口内的对象。 手形工具：用来移动对象的位置。 缩放工具：增大或减小窗口的显示比例。 窗口大小：显示当前文档窗口的大小，以像素为单位。 文件大小和估计的下载时间：显示页面的预计文档大小和预计下载时间。 目录 前进 “属性”面板用于查看和编辑当前选定对象（如文本、图像等）的各种属性。不同页面元素对应的的“属性”面板也不同。 属性面板 后退 结束
面板组 选择“窗口” →“属性”命令 打开属性面板的方法 按Ctrl+F3快捷键 目录 面板组 Dreamweaver CS3的面板组中包含许多面板，每个面板都可以展开或折叠，如右图所示，关闭或打开面板可以通过“窗口”菜单来完成。 前进 后退 结束
标尺和网格 在调整网页中一些对象的位置和大小时，利用Dreamweaver CS3提供的标尺和网格工具，可以使操作更加准确。 目录 在调整网页中一些对象的位置和大小时，利用Dreamweaver CS3提供的标尺和网格工具，可以使操作更加准确。 标尺和网格只在网页文档窗口内显示，在浏览器中不会显示。 选择“查看→标尺→显示”命令，可打开标尺。 选择“查看→网格设置→显示网格” 命令可打开网格。 前进 后退 结束
1.3 HTML语言的基础知识 HTML语言 HTML文档基本结构 <html> <head> 头部信息 网页的两种方法 记事本 Dreamweaver、 FrontPage等软件 HTML语言 HTML语言即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。 目录 前进 <html> <head> 头部信息 </head> <body> 正文主体部分 </body> </html> HTML文档基本结构 后退 结束
提示 HTML常用标记 在HTML文档中，所有的标记都要用括号<>括起来，如<p>、<hr>。 标记中如果包含多个参数，各参数之间用空格分隔，参数位置不 受限制。 目录 （1）标题标记 格式：<title>网页的标题</title> 说明：该标记在<head></head>标记中，所包含的文字将出现在浏 览器的标题栏上。 （2）主体标记 格式：<body bgcolor="页面背景颜色" background="背景图像" text="文本颜色">主体内容</body> 说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、 文字颜色等属性。 HTML常用标记 前进 后退 结束
格式：<p align="对齐方式">段落文本</p> 说明：用来划分段落，在该标记中可以输入一段文字。 （3）段落标记 格式：<p align="对齐方式">段落文本</p> 说明：用来划分段落，在该标记中可以输入一段文字。 目录 （4）换行标记 格式：<br> 说明：用来标记一个换行动作，换行后的内容仍属于同一段落。 前进 （5）水平线标记 格式：<hr align="对齐方式" color="颜色" width="宽度" size="高度"> 说明：在页面中插入一条水平线，通常用于分割文档。 后退 （6）图像标记 格式：<img src="图像的URL" align="对齐方式" width="宽度“ height=“高度" alt="替换文字"> 说明：在页面中插入一幅图像。 结束
格式：<a href=“目标文件的URL” target=“目标属性”>文本或 图像</a> （7）超链接标记 格式：<a href=“目标文件的URL” target=“目标属性”>文本或 图像</a> 说明：为标记中的文本或图像添加超链接目标，浏览网页时单 击可打开指定的目标文件。 目录 （8）表格标记 表格标记由表格标记、行标记和单元格标记3部分组成。 ①表格标记 <table width="宽度" height="高度" align="对齐方式" border="边框宽度"cellpadding="单元格边距" cellspacing ="单元格间距">……</table> ②行标记 <tr>……</tr> ③单元格标记 <td rowspan="跨越行数" colspan ="跨越列数">……</td> 前进 后退 结束
上机实训 实训1：在记事本中创建如图1所示的网页，保存在D:\chapter1文件夹中，网页文件名为lx1.html。 目录 实训2：在Dreamweaver CS3打开D:\chapter1\lx2.html网页文件，在“代码”视图中修改源代码，完成以下操作。 （1）将页面背景颜色设置为“#FF99FF”。 （2）将“太平洋电脑网”链接到http://ww.pconline.com.cn。 （3）将表格设置为居中对齐。 （4）为图像添加注释文本“笔记本电脑”。 （5）修改网页标题为“首页”。 前进 后退 结束 图1 lx1.html 图2 lx2.html