搜索
2网页的基础知识2.1网页的脚本语言——HTML2.1.1HTML语言概况•HTML（HypertextMarkupLanguage）–超文本标记语言–文本文档编辑器编辑HTML文档–运行在Web浏览器上2.1网页的脚本语言——HTML2.1.2HTML脚本的基本结构•元素：符合DTD的文档•标签：规定元素的属性和在文档中的位置–成对出现：格式元素名/元素名–单独出现：格式元素名–HTML标签：文档标识符–HEAD标签：文档头部分–BODY标签：文档主体部分BODY标签中的一些基本属性•bgcolor——背景色•text——文字的颜色•link——待连接超链接对象的颜色•alink——连接超链接对象的颜色•vlink——已连接超链接对象的颜色•background——背景文件例1：基本结构•html•head•title标题/title•/head•bodyBGCOLOR=“green”主体/body•/html2.1网页的脚本语言——HTML2.1.3常用HTML元素•文本–BR标签：换行–H标签：标题分级•color——颜色•align——位置–P标签：划分段落–HR标签：换行并在该行下画一条水平直线•size——水平线高度•width——水平线宽度•PRE标签：预格式化•B标签：黑体•I标签：斜体•U标签：下划线例2：H标签•html•head•titleHi标签测试文档/title•/head•body•H1这是第一级标题/H1•H2这是第二级标题/H2•H3这是第三级标题/H3•H4这是第四级标题/H4•H5这是第五级标题/H5•H6这是第六级标题/H6•/body•/html例3：P标签属性•html•head•title段落位置测试文档/title•body•Palign=left段落位于左侧。/P•Palign=center段落位于中间。/P•Palign=right段落位于右侧。/P•/body•/html例4：HR标签属性•html•head•titleHR标签测试文档/title•/head•body•水平线位于左侧。•HRSIZE=6WIDTH=150ALIGN=left•水平线位于中间。•HRSIZE=6WIDTH=150ALIGN=center•水平线位于右侧。•HRSIZE=6WIDTH=150ALIGN=right•/body•/html•图象——IMG标签–src属性——图象文件所在位置–width属性——图象宽度–hight属性——图象高度–align属性——图象相邻位置文字的位置–vspace属性——垂直方向上与相邻对象距离–hspace属性——水平方向上与相邻对象距离–border属性——设置图象边框•文档中的列表元素–无序列表：UL标签与LI标签–排序列表：OL标签与LI标签–目录列表：DIR标签与LI标签–描述性列表：DL标签、DT标签和DD标签•HTML中的表格元素–TABLE标签——界定表格范围•border属性•width属性和height属性•align属性•cellspaceing属性•cellpadding属性–CAPTION标签——标题标签•align属性•valign属性–TR标签——行标签•align属性•valign属性–TH表头标签和TD数据标签•rowspan属性•Colspan属性•align属性•Valign属性•bgcolor属性•background属性•例5：表格（略）•文档的超链接–锚标标签A•href属性例6：不同文档之间的跳转•html•head•title文档链接范例程序/title•/head•body•PHR/P•Ahref=dog.html有关柯基的说明/A•PHR/P例6：不同文档之间的跳转•dog.html•html•head•title图象链接范例程序/title•body•Ahref=dog.htmlIMGSRC=dog.jpg/A•HR•/body•/html2.2网页的编辑工具Dreamweaver2.2.1Dreamweaver概述•“网页设计三剑客”–Dreamweaver、Flash、Firework•Dreamweaver——Macromedia公司推出的可视化网页制作工具•Dreamweaver的版本–Dreamweaver4.0–Dreamweavermx–Dreamweavermx2004–Dreamweaver8.0–DreamweaverCS32.2网页的编辑工具Dreamweaver2.2.2DreamweaverCS3概述•支持ActiveX、JavaScript、Java、Flash、Shockwave•集网页设计与网络编程功能为一身•插件MacromediaExtensionManager使DreamweaverCS3具有无限的扩展性2.2网页的编辑工具Dreamweaver2.2.2DreamweaverCS3工作界面2.2网页的编辑工具Dreamweaver2.2.2DreamweaverCS3工作界面•菜单栏•插入栏•浮动面板•“属性”面板•文档窗口2.2网页的编辑工具Dreamweaver2.2.3创建和管理站点•创建本地站点–执行“站点”“管理站点”命令，点击“新建”，在弹出的菜单中选择“站点”–打开“站点定义”对话框，选择“基本”选项卡，输入站点名字–点击“下一步”选择“否”–点击“下一步”设置文件放置的位置–点击“下一步”选择“无”–点击“下一步”显示站点设置总结–点击“完成”返回到“管理站点”对话框–点击“完成”•管理本地站点–执行“窗口”“文件”命令打开“文件”面板，可以看到站点中的所有文件–点击“文件”面板右侧的“展开/折叠”按钮，即可打开站点管理器窗口•使用站点地图–点击“站点地图”按钮2.2网页的编辑工具Dreamweaver2.2.4DreamweaverCS3的基本操作•插入文本•使用列表•在文件中插入文件头部内容•插入其他对象插入文本•插入普通文本•插入特殊字符–执行“插入记录”中的“HTML”中的“特殊字符”命令使用列表•插入项目列表–执行“文本”“列表”中的“项目列表”命令–点击“属性”面版中的“项目列表”按钮•插入项目编号–执行“文本”“列表”中的“项目编号”命令–点击“属性”面版中的“项目编号”按钮在网页中插入文件头部内容•插入Meta信息–Meta信息用来描述网页文件自身的信息–执行“插入记录”“HTML”“文件头标签”中的“Meta”命令–在弹出的对话框中设置参数–点击“确定”后，在代码视图中可以看到插入的Meta信息•设置基础–基础是指在文件头中添加一个脚本链接，该网页文档中所有的链接都以此链接为基准–执行“插入记录”“HTML”“文件头标签”中的“基础”命令–在弹出的对话框中设置参数•Href：输入一个地址作为超链接的基本地址•目标：选择打开方式–点击“确定”•插入关键字–关键字是与网页主题相关的简短而有代表性的词汇，可供搜索引擎使用–执行“插入记录”“HTML”“文件头标签”中的“关键字”命令–在弹出的对话框中设置参数–点击“确定”•插入说明文字–说明中详细说明网页的内容信息–执行“插入记录”“HTML”“文件头标签”中的“说明”命令–在弹出的对话框中设置参数–点击“确定”•设置刷新–刷新可以指定浏览器在一定的时间后自动刷新页面–执行“插入记录”“HTML”“文件头标签”中的“刷新”命令–在弹出的对话框中设置参数–点击“确定”插入其他对象•插入日期–点击“常用”插入栏中的“日期”按钮•插入水平线–执行“插入记录”“HTML”中的“水平线”命令上机作业•完成书上p29-55中的所有HTML示例•创建一个本地站点•使用DreamweaverCS3的基本操作创建一个简单的页面（如例7）