电子政务第二章.ppt

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