《电子商务网页设计与网站建设——第二章网页的基础知识》由会员分享,可在线阅读,更多相关《电子商务网页设计与网站建设——第二章网页的基础知识(57页珍藏版)》请在金锄头文库上搜索。
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已连接超链接对象的颜色 backg
2、round背景文件例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属性 标签行标签 al
4、ign属性 valign属性 表头标签和数据标签 rowspan属性 Colspan属性 align属性 Valign属性 bgcolor属性 background属性 例5:表格(略) 文档的超链接 锚标标签 href属性例6:不同文档之间的跳转 文档链接范例程序 有关柯基的说明 例6:不同文档之间的跳转 dog.html 图象链接范例程序 2.2 网页的编辑工具Dreamweaver 2.2.1 Dreamweaver概述 “网页设计三剑客” Dreamweaver、Flash、Firework DreamweaverMacromedia公司推出的可 视化网页制作工具 Dreamweave
5、r的版本 Dreamweaver 4.0 Dreamweaver mx Dreamweaver mx 2004 Dreamweaver 8.0 Dreamweaver CS32.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”“文件头标签”中的“ 关键字”命令 在弹出的
9、对话框中设置参数 点击“确定” 插入说明文字 说明中详细说明网页的内容信息 执行“插入记录”“HTML”“文件头标签”中的“ 说明”命令 在弹出的对话框中设置参数 点击“确定” 设置刷新 刷新可以指定浏览器在一定的时间后自动刷 新页面 执行“插入记录”“HTML”“文件头标签”中的“ 刷新”命令 在弹出的对话框中设置参数 点击“确定”插入其他对象 插入日期 点击“常用”插入栏中的“日期”按钮 插入水平线 执行“插入记录”“HTML”中的“水平线” 命令上机作业 完成书上p29-55中的所有HTML示例 创建一个本地站点 使用Dreamweaver CS3的基本操作创建一个 简单的页面(如例7)