网页设计与制作实验指导书

实验指导书 教育传播技术学院教育技术学专业1 目录目录 实验大纲 1 实验一 简单网页制作 3 实验二 在网页中插入基本元素 7 实验三 表格的创建与编辑 13 实验四 表格布局 一 18 实验五 表格布局 二 23 实验六 框架与表单 27 实验七 CSS 31 实验八 网页制作综合练习 36 实验指导书 教育传播技术学院教育技术学专业1 实验大纲实验大纲 课程名称 课程名称 网页设计与制作 英文名称 英文名称 Design and Making of WebPages 设置形式 非独立设课课程模块 专业方向课 实验课性质 专业实验课程编号 601822 课程负责人 王丽萍大纲主撰人 王丽萍 大纲审核人 李焕勤 一 学时 学分一 学时 学分 课程总学时 48 实验学时 16课程学分 2 二 适用专业及年级二 适用专业及年级 教育技术学 二年级 三 课程目标与基本要求三 课程目标与基本要求 课程的目标 课程全面介绍网页设计与制作的相关知识 包括网页制作工具 Dreamweaver 的使用方 法 HTML 语言 CSS 技术及网站的发布与维护等 目标是使学生具备网页设计与制作的 基本知识和基本技能 能够独立完成中 小型网站的设计与制作 为将来制作网络教学软 件和教育专题网站打下基础 基本要求 1 掌握利用 Dreamweaver 创建网站 制作网页 管理站点等 2 熟练掌握文字的各种编排方法 3 熟练掌握图形的获取 各种修饰方法 4 熟练掌握超链接技术 5 熟练掌握音频 视频等多媒体信息的嵌入 链接方法 6 熟练掌握表格的使用方法 会用表格设计网页 7 掌握框架制作网页的方法 会使用框架设计网页 8 掌握制作表单的方法 会利用表单建立交互式页面 9 掌握 HTML 的语法结构及各种标记的使用方法 10 掌握在网页中添加 CSS 的方法 会使用 CSS 设置网页格式和网页布局 11 掌握站点管理及发布 四 主要仪器设备四 主要仪器设备 多媒体计算机 安装 Dreamweaver Fireworks Flash PhotoShop CuteFTP 等软件 五 实验项目及教学安排五 实验项目及教学安排 序序 号号 实验项目名称实验项目名称实验基本方法和内容实验基本方法和内容 项目项目 学时学时 项目项目 类型类型 每组每组 人数人数 教学教学 要求要求 1 简单网页制作 Dreamweaver 软件的操作界面的认识 建立站点 制作简单网页 2 基础 1 必修 2 在网页中插入基本元 素 文本的插入及属性设置 图像的插入 及属性设置 各种媒体的插入及相关 参数的设置 建立超链接 2 基础 1 必修 3 表格的创建与编辑创建表格 设置表格的属性 设置单 2 基础 1 必修 实验指导书 教育传播技术学院教育技术学专业2 元格的属性 制作特殊表格 4 表格布局 一 利用表格进行网页布局 2 基础 1 必修 5 表格布局 二 利用表格进行网页布局2综合 1必修 6 框架与表单 创建框架 设置框架集的属性 设置 框架的属性 使用框架面板管理框架 利用框架进行网页布局 插入表单及 表单对象 设置表单元素属性 2 基础 1 必修 7CSS 创建 CSS 样式 使用 CSS 样式控制网 页外观 编辑 CSS 样式 2 基础 1 必修 8 网页制作综合练习 定位网站的主题和名称 确定网站的 栏目 确定网站的目录结构 确定网 站的链接结构 设计网站的整体风格 绘制网页布局 收集制作素材 网站 制作 网站上传 2 设计 综合 1 必修 9 自拟主题网站制作 定位网站的主题和名称 确定网站的 栏目 确定网站的目录结构 确定网 站的链接结构 设计网站的整体风格 绘制网页布局 网站制作 8 设计 综合 1 选修 10 动态网站制作 使用 Javascript Asp 数据库等技 术制作小型动态网站 10 设计 综合 1 选修 六 考核方式及成绩评定六 考核方式及成绩评定 考核方式 考核方式 1 实验平时成绩 1 实验考勤 每次考勤分出勤 2 分 请假 迟到 早退 1 分 旷课 0 分 记分 2 预习报告 要求写明实验目的 主要实验设备名称 实验原理和内容 分优秀 4 分 良好 3 分 中等 2 分 及格 1 分 和不及格 0 分 记分 3 实验报告 要求写明实验设备名称和型号 实验步骤 实验分析及注意事项 分 优秀 4 分 良好 3 分 中等 2 分 及格 1 分 和不及格 0 分 记分 实验平时成绩最后折算成 100 分 2 平时作业 根据作品评定成绩 满分为 100 分 3 实验考试 上机考试 满分为 100 分 成绩评定 成绩评定 总实验成绩占本课程成绩的 30 总实验成绩 实验平时成绩 20 平时上机作业 30 实验考试成绩 50 七 实验教科书 参考书七 实验教科书 参考书 1 实验教科书 实验教科书 网页设计与制作 讲义 王丽萍 2005 2 实验参考书 实验参考书 Dreamweaver MX 2004 完美网页设计与制作 姜楠 中国青年出版社 2004 年 实验指导书 教育传播技术学院教育技术学专业3 实验一实验一 简单网页制作简单网页制作 一 实验目的一 实验目的 1 熟悉 Dreamweaver 软件的操作界面 2 掌握如何建立站点 3 掌握简单网页的制作方法 4 了解超链接的建立方法 二 实验内容二 实验内容 1 创建 文学小屋 站点 2 制作 文学小屋 首页 网页 3 制作 文学小屋 雪绒花 网页 4 制作 文学小屋 十六岁的天空 网页 5 制作 文学小屋 红舞鞋 网页 6 制作 文学小屋 爱的秘密 网页 7 完成网页超链接 三 操作步骤三 操作步骤 1 创建 文学小屋 站点 1 在硬盘根目录下新建文件夹 命名为 wenxue 2 打开 wenxue 文件夹 在其中建立子文件夹 命名为 images 3 将所有图片素材复制到 images 文件夹中 4 启动 Dreamweaver 使用 站点 管理站点 新建站点 命令新建 文学小屋 站点 并指定 wenxue 文件夹为 文学小屋 站点的本地根文件夹 2 制作 文学小屋 首页 1 新建网页 2 设置网页属性 3 在网页中插入文字 图片 水平线 表格等对象 并在属性面板上设 实验指导书 教育传播技术学院教育技术学专业4 置对象属性 如图所示 4 保存网页 按 F12 预览网页 3 制作 文学小屋 雪绒花 网页 如图所示 实验指导书 教育传播技术学院教育技术学专业5 4 制作 文学小屋 十六岁的天空 网页 如图所示 5 制作 文学小屋 红舞鞋 网页 如图所示 实验指导书 教育传播技术学院教育技术学专业6 6 制作 文学小屋 爱的秘密 网页 如图所示 实验指导书 教育传播技术学院教育技术学专业7 1 建立超链接 1 在 文学小屋 首页 上建立到网站内其它网页的超链接 2 在 文学小屋 首页 上建立到外部网址的外部链接 3 在 文学小屋 首页 上建立电子邮件地址链接 4 在网站内其它网页上建立 返回首页 超链接 四 思考题四 思考题 1 创建站点的重要性 2 新建网页的两种方法 3 网页文件的命名规则 4 表格在网页布局中的作用 实验指导书 教育传播技术学院教育技术学专业8 实验二实验二 在网页中插入基本元素在网页中插入基本元素 一 实验目的一 实验目的 1 掌握文本的插入方法及属性设置方法 2 掌握图像的插入方法及属性设置方法 3 掌握各种媒体的插入方法及相关参数的设置 二 实验内容二 实验内容 1 制作 何所思 网页 2 制作 动画厨房 网页 3 制作 我爱北京 网络站册 4 创建 多媒体 站点 并制作以下网页 1 插入 flash 动画的网页 2 插入 RealPlayer 播放器的网页 3 插入 Media Player 播放器的网页 4 插入背景音乐的网页 三 操作步骤三 操作步骤 1 制作 何所思 网页 1 在硬盘根目录下新建文件夹 命名为 thinking 2 打开 thinging 文件夹 在其中建立子文件夹 命名为 images 3 将所有图片素材复制到 images 文件夹中 4 启动 Dreamweaver 使用 站点 管理站点 新建站点 命令新建 何所思 站点 5 新建网页 保存为 index htm 6 在网页中插入文字 设置标题文字 在文字中插入空格 分段 换行 7 在网页中插入图片 设置图片的对齐方式为 右对齐 8 保存网页 预览 实验指导书 教育传播技术学院教育技术学专业9 2 制作 动画厨房 网页 1 在硬盘根目录下新建文件夹 命名为 donghua 2 打开 donghua 文件夹 将图片 donghua jpg 复制到该文件夹中 3 启动 Fireworks 打开 donghua jpg 图片 使用切片工具进行切片 4 使用 文件 导出 命令 导出切片和网页 设置如图所示 实验指导书 教育传播技术学院教育技术学专业10 5 启动 Dreamweaver 打开 donghua htm 网页 使用 修改 页面属性 命令 设置网页背景色为黑色 上边距为 0 像素 3 制作 我爱北京 网站相册 1 将所有图片素材保存在 photo 文件夹中 2 在硬盘根目录下新建文件夹 命名为 beijing 3 启动 Dreamweaver 使用 站点 管理站点 新建站点 命令新建 北京 站点 并指定 beijing 文件夹为 北京 站点的本地根文件夹 4 新建网页 使用 命令 创建网站相册 命令创建相册 设置如图所 示 5 单击确定按钮 相册创建完成 6 按 F12 预览网页 7 打开硬盘上的 beijing 文件夹 查看文件 其中 imgaes 文件夹保存的 是原图片 thumbnails 文件夹保存的是缩略图 pages 文件夹保存的是相册分页 index htm 是网站相册首页 实验指导书 教育传播技术学院教育技术学专业11 4 创建 多媒体 站点 并制作网页 1 在硬盘根目录下新建文件夹 命名为 site 2 打开 site 文件夹 在其中建立子文件夹 命名为 Media 3 将所有多媒体素材复制到 Media 文件夹中 4 启动 Dreamweaver 使用 站点 管理站点 新建站点 命令新建 多媒体 站点 并指定 site 文件夹为 多媒体 站点的本地根文件夹 设置 完毕后 文件面板如图所示 5 在网页中插入 flash 动画 新建网页 保存网页为 001 htm 在网页中插入 flash 动画 yueding swf 设 置 flash 动画背景透明 6 在网页中插入 RealPlayer 播放器 新建网页 保存网页为 002 htm 在网页中插入 ActiveX 在属性面板上设 置 ClassID 为 CLSID CFCDAA03 8BE4 11cf B84B 0020AFBBCCFA 宽 320 像 素 高 280 像素 参数设置如图所示 实验指导书 教育传播技术学院教育技术学专业12 7 在网页中插入 Media Player 播放器 1 新建网页 保存网页为 003 htm 在网页中插入 ActiveX 在属性面板上设 置 ClassID 为 CLSID 22D6F312 B0F6 11D0 94AB 0080C74C7E95 宽 320 像素 高 280 像素 参数设置如图所示 8 在网页中插入 Media Player 播放器 2 新建网页 保存网页为 004 htm 在网页中插入 ActiveX 在属性面板上设 置 ClassID 为 CLSID 6BF52A52 394A 11d3 B153 00C04F79FAA6 宽 320 像素 高 280 像素 参数设置如图所示 实验指导书 教育传播技术学院教育技术学专业13 9 在网页中插入背景音乐 新建网页 保存网页为 005 htm 在网页中插入 在弹出的选择文 件对话框中选择 bgmusic mid 插件的参数设置如图所示 四 思考题四 思考题 1 文本分行和分段落的区别 2 在网页中插入特殊符号的方法 3 在网页中插入列表 日期 水平线的方法 4 实现图文混排的方法 5 在网页中插入视频的方法 6 在网页中插入音频的方法 实验指导书 教育传播技术学院教育技术学专业14 实验三实验三 表格的创建与编辑表格的创建与编辑 一 实验目的一 实验目的 1 掌握表格的插入方法 2 掌握表格属性 单元格属性的设置方法 3 深入理解表格背景颜色 填充 间距 边框 单元格背景颜色等属性对 网页外观的影响 4 掌握各种特殊表格的制作方法 二 实验内容二 实验内容 1 插入 编辑表格 2 在网页中制作水平细线和垂直细线 3 在网页中制作细线表格 4 在网页中制作双线边框表格 5 在网页中制作圆角表格 三 操作步骤三 操作步骤 1 1 建立站点 建立站点 1 在硬盘根目录下新建文件夹 命名为 table 2 在 table 文件夹中新建子文件夹 命名为 images 将所有图片素材保 存在 images 文件夹中 3 启动 Dreamweaver 使用 站点 管理站点 新建站点 命令新建 表格练习 站点 并指定 table 文件夹为 表格练习 站点的本地根文件夹 2 2 插入 编辑表格 插入 编辑表格 1 新建网页 保存网页为 001 htm 2 插入一个 3 行 3 列的表格 表格宽度为 300 像素 边框粗细为 1 单 元格边距为 0 单元格间距为 0 3 选中表格 设置表格的填充为 5 间距 6 边框为 8 4 选中表格 设置表格的背景图像为 girl gif 5 选中表格 用鼠标拖动表格右下角的尺寸手柄 将表格加大 观察背 实验指导书 教育传播技术学院教育技术学专业15 景图像在表格中的 平铺 情况 6 选中第一行所有单元格 将它们合并 7 选中第二行第一个单元格 将它拆分成两列 8 选中所有单元格 设置单元格的背景颜色为绿色 3 3 在网页中制作红色水平细线 在网页中制作红色水平细线 1 新建网页 保存网页为 002 htm 2 插入一个 1 行 1 列的表格 表格宽度为 500 像素 边框粗细 单元格 边距 单元格间距均为 0 3 选中表格 设置表格的背景颜色为红色 4 设置表格的高度为 1 像素 5 切换至 代码 视图 删除单元格中的 代码 6 保存网页 按 F12 预览 4 4 在网页中制作绿色垂直细线 在网页中制作绿色垂直细线 1 新建网页 保存网页为 003 htm 2 插入一个 1 行 1 列的表格 表格宽度为 1 像素 边框粗细 单元格边 距 单元格间距均为 0 3 选中表格 设置表格的背景颜色为绿色 4 设置表格的高度为 400 像素 5 切换至 代码 视图 删除单元格中的 代码 6 保存网页 按 F12 预览 5 5 在网页中制作黑色细线表格 在网页中制作黑色细线表格 1 新建网页 保存网页为 004 htm 2 插入一个 3 行 3 列的表格 表格宽度为 300 像素 边框粗细为 0 单 元格边距为 5 单元格间距为 1 3 选中表格 设置表格的背景颜色为黑色 实验指导书 教育传播技术学院教育技术学专业16 4 选中所有单元格 设置单元格的背景颜色为白色 6 保存网页 按 F12 预览 6 6 在网页中制作双细线表格 在网页中制作双细线表格 1 新建网页 保存网页为 005 htm 2 在网页中制作细线表格 表格宽度 300 像素 如图所示 3 接下来绘制另一个表格 1 行 1 列 宽度 300 像素 单元格边距为 2 单元格间距为 1 表格背景颜色为 003366 单元格背景颜色为白色 如图 所示 4 将前面制作的表格复制到该表格中 如图所示 5 保存网页 按 F12 预览 7 7 在网页中制作圆角表格 在网页中制作圆角表格 1 新建网页 保存网页为 006 htm 实验指导书 教育传播技术学院教育技术学专业17 2 在网页中插入一个 1 行 3 列的表格 表格宽度为 300 像素 边框粗细 单元格边距 单元格间距均为 0 设置第一个单元格宽度 9 像素 高度 9 像 素 在其中插入图片 corner tl gif 设置第二个单元格高度为 9 像素 在其中插 入图片 topline gif 设置图片宽度为 282 像素 设置第三个单元格宽度 9 像素 高度 9 像素 在其中插入图片 corner tr gif 如图所示 3 将光标停在第一个表格后 插入一个 1 行 3 列的表格 表格宽度为 300 像素 边框粗细 单元格边距 单元格间距均为 0 设置表格高度为 100 像素 设置第一个单元格宽度 1 像素 背景颜色为 FF6600 切换至 代码 视 图 删除其中的 代码 设置第二个单元格宽度为 298 像素 设置第 三个单元格宽度 1 像素 背景颜色为 FF6600 切换至 代码 视图 删除其中 的 代码 4 将光标停在第二个表格后 插入一个 1 行 3 列的表格 表格宽度为 300 像素 边框粗细 单元格边距 单元格间距均为 0 设置第一个单元格 宽度 9 像素 高度 9 像素 在其中插入图片 corner bl gif 设置第二个单元格高 度为 9 像素 在其中插入图片 bottomline gif 设置图片宽度为 282 像素 设置 第三个单元格宽度 9 像素 高度 9 像素 在其中插入图片 corner br gif 5 保存网页 按 F12 预览 四 思考题四 思考题 1 图像插入到单元格中与图像作单元格背景有什么区别 实验指导书 教育传播技术学院教育技术学专业18 2 水平细线的制作方法 3 细线表格的制作方法 实验指导书 教育传播技术学院教育技术学专业19 实验四实验四 表格布局 一 表格布局 一 一 实验目的一 实验目的 1 掌握利用表格进行网页布局的方法 2 深入理解表格背景颜色 填充 间距 边框 单元格背景颜色等属性对 网页外观的影响 二 实验内容二 实验内容 1 制作 网达新闻 网页 2 制作 心灵之间 信 网页 三 操作步骤三 操作步骤 1 制作 网达新闻 网页 1 在 D 盘上新建文件夹 命名为 wangda 将 images 文件夹拷贝到 该文件夹下 启动 Dreamweaver 定义该文件夹为站点 2 设置页属性 字号 9pt 网页背景图片 bk jpg 左 上边距 0 0 网页标题 网达新闻 3 插入 table1 表格宽度 778px 1 行 2 列 表格背景图片 image 04 jpg 宽 4px 高 48px 插入图片 image 02 jpg image 06 jpg 4 插入 table2 表格宽度 778px 1 行 1 列 插入 flash 5 插入 table3 表格宽度 778px 1 行 1 列 插入图片 seek 01 jpg seek 08 jpg 实验指导书 教育传播技术学院教育技术学专业20 6 插入 table4 表格宽度 778px 1 行 5 列 表格背景颜色 白色 各列宽度 199 1 372 1 205 778 中间列单元格的背景图片 image 19 jpg 7 插入 table5 表格宽度 778px 1 行 1 列 表格背景图片 image 31 jpg 8 插入 table6 表格宽度 778px 1 行 1 列 表格背景图片 image 35 jpg 9 制作其它内容 10 保存网页 按 F12 预览 如图所示 实验指导书 教育传播技术学院教育技术学专业21 2 制作 心灵之间 信 网页 1 在 D 盘上新建文件夹 命名为 xinling 将 images 文件夹拷贝到该 文件夹下 启动 Dreamweaver 定义该文件夹为站点 2 设置页面属性 网页标题 心灵之间 3 制作网页 网页布局 宽度 700 像素 在浏览器窗口中 居中 图片一 images img 2 gif 宽度 229 像素 高度 281 像素 实验指导书 教育传播技术学院教育技术学专业22 图片二 images top text gif 图片三 images xin xiao gif 图片四 images img bottom gif 宽度 224 像素 高度 62 像素 实验指导书 教育传播技术学院教育技术学专业23 网页导航 表格宽度 125 像素 单元格宽度 25 像素 文字上制作空链接 4 设置网页 CSS 样式 字号 9pt 行高 150 A link COLOR 5c6c81 TEXT DECORATION none A hover COLOR 000000 TEXT DECORATION underline A active COLOR 000000 TEXT DECORATION underline A visited COLOR 5c6c81 TEXT DECORATION none 5 保存网页 按 F12 预览 如图所示 四 思考题四 思考题 1 表格宽度的单位有哪些 2 一般情况下 如何设置布局表格的边框 单元格边距和单元格间距 3 一般情况下 如何设置布局表格的高度 实验指导书 教育传播技术学院教育技术学专业24 实验五实验五 表格布局 二 表格布局 二 一 实验目的一 实验目的 熟练掌握利用表格进行网页布局的方法 二 实验内容二 实验内容 制作 我的设计 网站中的 三维作品 栏目 三 操作步骤三 操作步骤 1 建立站点 在 D 盘根目录下新建文件夹 命名为 design 将两个素材文件夹 3dimg 和 images 复制到 design 文件夹中 启动 Dreamweaver 将 design 文件夹定义为 我的设计 站点 2 制作 三维作品 页面 1 新建网页 保存为 3d 001 htm 2 设置页面属性 如图所示 实验指导书 教育传播技术学院教育技术学专业25 3 插入黑色细线表格 表格大小设置如图所示 在属性面板上设置表格背景色为黑色 单元格背景色为 CCCCB8 如图所 示 4 将光标置于细线表格中 继续插入表格 表格 1 行 3 列 宽度 900 像 素 边框 边距 间距均为 0 高度 120 像素 背景颜色 9E9E7E 各列宽度为 30 像素 350 像素 520 像素 插入图像后 如图所示 实验指导书 教育传播技术学院教育技术学专业26 5 将光标置于上一表格后 继续插入表格 表格 1 行 1 列 宽度 900 像 素 边框 边距 间距均为 0 高度 20 像素 背景图像为 index 004 gif 6 将光标置于于上一表格后 继续插入表格 表格 1 行 3 列 宽度 900 像素 边框 边距 间距均为 0 各列宽度为 200 像素 50 像素 650 像素 在左列单元格中插入表格及网页内容 如图所示 7 在右列单元格中插入表格及导航图片 如图所示 8 继续插入表格 表格 2 行 1 列 宽度 600 像素 边框 边距 间距均 为 0 第一行单元格高度为 10 像素 在第二行单元格中插入表格 表格 1 行 3 列 宽度 600 像素 边框 边距为 0 间距为 10 背景颜色为 B7B7A5 各列 宽度为 100 像素 100 像素 360 像素 如图所示 实验指导书 教育传播技术学院教育技术学专业27 9 选中上面表格并复制 然后粘帖五次 如图所示 10 在表格中插入图片及内容 如图所示 3 制作 3d 作品的其它页面 四 思考题四 思考题 1 多层表格嵌套时 选择表格的技巧 2 单元格间距和单元格边距对表格布局的影响 3 单元格对齐属性对表格布局的影响 实验指导书 教育传播技术学院教育技术学专业28 实验六实验六 框架与表单框架与表单 一 实验目的一 实验目的 1 掌握框架的创建方法 2 掌握框架集和框架的属性设置方法 3 掌握框架布局的方法 4 掌握插入表单对象的方法 5 掌握表单对象的属性设置方法 二 实验内容二 实验内容 1 制作 跳舞的树 网页 2 制作 用户注册 网页 三 操作步骤三 操作步骤 一 制作 跳舞的树 网页 实验指导书 教育传播技术学院教育技术学专业29 1 创建框架网页 1 定义站点 新建网页 2 勾选 查看 可视化助理 框架边框 选项 显示 框架边框 3 用鼠标拖动 设计 视图四周显示的框架边框线 创建框架 2 设置框架集和框架属性 1 打开 框架面板 2 选择框架集 设置框架集属性 实验指导书 教育传播技术学院教育技术学专业30 3 选择左框架 设置框架属性 3 选择中间框架 设置框架属性 3 选择右框架 设置框架属性 3 保存框架集和框架 选择主菜单 文件 保存全部 命令 4 在框架中创建超链接 选中 首页 创建到 middle htm 文件的超链接 并为链接指定目标框架窗 口为 middle 选中 首页 创建到 middle htm 文件的超链接 并为链接指定目标框架窗 口为 middle 选中 有树如我 创建到 liketree htm 文件的超链接 并为链接指定目标 框架窗口为 middle 选中 流年 创建到 liketree htm 文件的超链接 并为链接指定目标框架 实验指导书 教育传播技术学院教育技术学专业31 窗口为 middle 选中 伙伴 创建到 company htm 文件的超链接 并为链接指定目标框架 窗口为 middle 选中 翻箱倒框 创建到 favo htm 文件的超链接 并为链接指定目标框架 窗口为 middle 5 保存网页 预览 二 制作 用户注册 网页 1 插入表单 2 插入表单对象 3 设置表单对象属性 四 思考题四 思考题 1 框架结构的组成 2 框架结构的网页 网页标题如何设置设置 3 单选按钮和复选框对象的属性设置有何不同 实验指导书 教育传播技术学院教育技术学专业32 实验七实验七 CSSCSS 一 实验目的一 实验目的 1 掌握在网页中应用 CSS 的方法 2 掌握 CSS 基本语法 3 熟悉 CSS 属性 4 掌握使用 CSS 布局网页的方法 二 实验内容二 实验内容 1 为 网达公司 网页添加 CSS 样式 2 为 心灵之间 网页添加 CSS 样式 3 使用 CSS 实现 webquest 网页布局 4 使用 CSS 实现 固定宽度两栏 网页布局 5 使用 CSS 实现 满屏三栏 网页布局 三 操作步骤三 操作步骤 1 为 网达公司 网页添加 CSS 样式 1 新建样式 重新定义 body 标签 将样式保存在外部文件 style css 中 body 标签的样式定义为 文字 9pt 行高 150 2 新建样式 重新定义 td 标签 td 标签的样式定义为 文字 9pt 行高 150 3 新建样式 重新定义超链接样式 4 新建样式 自定义一个类 用于设置文字为白色 2 为 心灵之间 网页添加