1、2 网页的基础知识,2.1 网页的脚本语言HTML 2.1.1 HTML语言概况,HTML（Hypertext Markup Language） 超文本标记语言 文本文档编辑器编辑HTML文档 运行在Web浏览器上,2.1 网页的脚本语言HTML 2.1.2 HTML脚本的基本结构,元素：符合DTD的文档 标签：规定元素的属性和在文档中的位置 成对出现：格式 单独出现：格式 标签：文档标识符 标签：文档头部分 标签：文档主体部分,标签中的一些基本属性,bgcolor背景色 text文字的颜色 link待连接超链接对象的颜色 alink连接超链接对象的颜色 vlink已连接超链接对象的颜色 ba
2、ckground背景文件,例1：基本结构,标题主体 ,2.1 网页的脚本语言HTML 2.1.3 常用HTML元素,文本 标签：换行 标签：标题分级 color颜色 align位置 标签：划分段落 标签：换行并在该行下画一条水平直线 size水平线高度 width水平线宽度,标签：预格式化 标签：黑体 标签：斜体 标签：下划线,例2：标签,Hi标签测试文档这是第一级标题 这是第二级标题 这是第三级标题 这是第四级标题 这是第五级标题 这是第六级标题,例3：标签属性,段落位置测试文档段落位于左侧。 段落位于中间。 段落位于右侧。,例4：标签属性,HR标签测试文档水平线位于左侧。水平线位于中间。水
3、平线位于右侧。,图象标签 src属性图象文件所在位置 width属性图象宽度 hight属性图象高度 align属性图象相邻位置文字的位置 vspace属性垂直方向上与相邻对象距离 hspace属性水平方向上与相邻对象距离 border属性设置图象边框,文档中的列表元素 无序列表：标签与标签 排序列表：标签与标签 目录列表：标签与标签 描述性列表：标签、标签和标签 HTML中的表格元素 标签界定表格范围 border属性 width属性和height属性 align属性 cellspaceing属性 cellpadding属性,标签标题标签 align属性 valign属性 标签行标签 ali
4、gn属性 valign属性 表头标签和数据标签 rowspan属性 Colspan属性 align属性 Valign属性 bgcolor属性 background属性 例5：表格（略）,文档的超链接 锚标标签 href属性,例6：不同文档之间的跳转,文档链接范例程序有关柯基的说明 ,例6：不同文档之间的跳转,dog.html图象链接范例程序,2.2 网页的编辑工具Dreamweaver 2.2.1 Dreamweaver概述,“网页设计三剑客” Dreamweaver、Flash、Firework DreamweaverMacromedia公司推出的可视化网页制作工具 Dreamweaver的
5、版本 Dreamweaver 4.0 Dreamweaver mx Dreamweaver mx 2004 Dreamweaver 8.0 Dreamweaver CS3,2.2 网页的编辑工具Dreamweaver 2.2.2 Dreamweaver CS3概述,支持ActiveX、JavaScript、Java、Flash、Shockwave 集网页设计与网络编程功能为一身 插件Macromedia Extension Manager使Dreamweaver CS3具有无限的扩展性,2.2 网页的编辑工具Dreamweaver 2.2.2 Dreamweaver CS3工作界面,2.2 网
6、页的编辑工具Dreamweaver 2.2.2 Dreamweaver CS3工作界面,菜单栏 插入栏 浮动面板 “属性”面板 文档窗口,2.2 网页的编辑工具Dreamweaver 2.2.3 创建和管理站点,创建本地站点 执行“站点”“管理站点”命令，点击“新建”，在弹出的菜单中选择“站点” 打开“站点定义”对话框，选择“基本”选项卡，输入站点名字 点击“下一步”选择“否” 点击“下一步”设置文件放置的位置 点击“下一步”选择“无” 点击“下一步”显示站点设置总结 点击“完成”返回到“管理站点”对话框 点击“完成”,管理本地站点 执行“窗口”“文件”命令打开“文件”面板，可以看到站点中的所
7、有文件 点击“文件”面板右侧的“展开/折叠”按钮，即可打开站点管理器窗口 使用站点地图 点击“站点地图”按钮,2.2 网页的编辑工具Dreamweaver 2.2.4 Dreamweaver CS3的基本操作,插入文本 使用列表 在文件中插入文件头部内容 插入其他对象,插入文本,插入普通文本 插入特殊字符 执行“插入记录”中的“HTML”中的“特殊字符”命令,使用列表,插入项目列表 执行“文本”“列表”中的“项目列表”命令 点击“属性”面版中的“项目列表”按钮 插入项目编号 执行“文本”“列表”中的“项目编号”命令 点击“属性”面版中的“项目编号”按钮,在网页中插入文件头部内容,插入Meta信
8、息 Meta信息用来描述网页文件自身的信息 执行“插入记录”“HTML”“文件头标签”中的“Meta”命令 在弹出的对话框中设置参数 点击“确定”后，在代码视图中可以看到插入的Meta信息,设置基础 基础是指在文件头中添加一个脚本链接，该网页文档中所有的链接都以此链接为基准 执行“插入记录”“HTML”“文件头标签”中的“基础”命令 在弹出的对话框中设置参数 Href：输入一个地址作为超链接的基本地址 目标：选择打开方式 点击“确定”,插入关键字 关键字是与网页主题相关的简短而有代表性的词汇，可供搜索引擎使用 执行“插入记录”“HTML”“文件头标签”中的“关键字”命令 在弹出的对话框中设置参数 点击“确定”,插入说明文字 说明中详细说明网页的内容信息 执行“插入记录”“HTML”“文件头标签”中的“说明”命令 在弹出的对话框中设置参数 点击“确定”,设置刷新 刷新可以指定浏览器在一定的时间后自动刷新页面 执行“插入记录”“HTML”“文件头标签”中的“刷新”命令 在弹出的对话框中设置参数 点击“确定”,插入其他对象,插入日期 点击“常用”插入栏中的“日期”按钮 插入水平线 执行“插入记录”“HTML”中的“水平线” 命令,上机作业,完成书上p29-55中的所有HTML示例 创建一个本地站点 使用Dreamweaver CS3的基本操作创建一个简单的页面（如例7）,
