静态网页制作实验指导书.doc

南阳理工学院南阳理工学院 静态网页设计实验指导书静态网页设计实验指导书 2011 版 版 软件学院 数据库教研室 2011 9 目录目录 实验一实验一 熟悉熟悉 HTML 网页和各种标签网页和各种标签 3 实验二实验二 网页表格和表单的制作网页表格和表单的制作 5 实验三实验三 熟悉熟悉 CSS 基本结构基本结构 7 实验四实验四 CSS 背景样式控制背景样式控制 9 实验五实验五 CSS 字体和文本样式设置字体和文本样式设置 11 实验六实验六 熟悉熟悉 DREAMWEAVER 使用 一 使用 一 12 实验七实验七 熟悉熟悉 DREAMWEAVER 使用 二 使用 二 16 实验八实验八 JAVASCRIPT 基本语法基本语法 18 实验九实验九 JAVASCRIPT 函数函数 19 实验十实验十 JAVASCRIPT 对象对象 21 实验一实验一 熟悉熟悉 HTML 网页网页和各种标签和各种标签 1 实验目的 实验目的 1 掌握 HTML 文档的基本结构 标记和标记属性的概念及作用 2 学会使用文本编辑软件建立和编辑 HTML 文档的方法 3 能够使用标记在网页中插入和编辑基本的网页元素 4 学会使用超级链接的方法 2 实验内容及步骤 实验内容及步骤 1 建立一个空的 HTML 文件 1 在机器上建立自己的文件夹 2 进入文件夹内 单击鼠标右键 建立一个文本文档 3 在文档中输入 HTML 的基本标签 构建 HTML 文档的基本结构 4 保存文本文档 为文档命名 并将文档的扩展名修改为 html 或 htm 2 修改 HTML 文件的标题 1 用记事本程序打开 HTML 文件 在标签中输入 HTML 文件的 标题 2 保存 3 为 HTML 文件添加主体内容 1 用记事本程序打开 HTML 文件 在标签中输入 HTML 文件的 主体内容 2 保存 4 对 HTML 文件的主体部分进行相应的排版 1 使用标题标签设置文档的标题 并利用标题标签的 align 属性使标题 居中显示 2 使用段落标签为文档设置段落 并利用段落标签的 align 属性设置段 落的对齐方式 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 2 3 在文档中使用换行标签 4 利用水平分割线标签 在文档中添加水平分割线 5 使用字体样式标签设置文档的字体 并利用字体样式标签的 face size color 属性修改文档的字体 字号 颜色 5 无序列表和有序列表的使用 1 在网页中插入一个无序列表 将无序列表的 type 属性值设为 square 效果如图 1 所示 图 1 2 在网页中插入一个有序列表 将有序列表的 type 属性值设为 a 效 果如图 2 所示 图 2 6 利用 img 标签 为 HTML 文件设置背景图片 7 为 HTML 文件的标题设置超级链接 使其能够链接到相应的网页 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 3 实验二实验二 网页表格和表单的制作网页表格和表单的制作 1 实验目的 实验目的 掌握网页中表格的制作方法 掌握网页中表单的制作方法 2 实验内容及步骤 实验内容及步骤 1 使用 HTML 标签设计表格 显示学生的基本情况 显示效果如图 3 所 示 1 制作一个空的 HTML 文档 2 利用 table 标签在网页中插入一个 5 行 4 列的表格 并输入相应的内 容 3 利用 table 标签的 align 属性 使表格居中显示 4 利用 tr 标签的 align 属性 使单元格内容居中显示 5 利用 tr 标签的 bgcolor 属性 使每一行显示不同的颜色 图 3 2 制作一个简单的调查问卷页面 显示效果如图 4 所示 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 4 图 4 1 制作一个空的 HTML 文档 2 用 form 标签定义表单 3 向表单中添加单行文本输入框 用于填写姓名 4 向表单中添加单选框 用于选择性别 5 向表单中添加下拉列表 用于选择户籍所在地 6 向表单中添加复选框 用于选择用户兴趣 7 向表单中添加多行文本 用于用户留言 8 向表单中添加提交和重置按钮 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 5 实验三实验三 熟悉熟悉 CSS 基本结构基本结构 1 实验目的 实验目的 了解 CSS 的基本结构 掌握在网页中加入 CSS 的方法 掌握 CSS 的布局方法 2 实验内容及步骤 实验内容及步骤 1 练习 CSS 的三种使用方式 行间样式表的使用 内部样式表的使用 外部样式表的使用 1 建立一个空的 HTML 文档 2 向文档中输入文字 并用段落标签 p 对其进行排版 3 编写段落标签 p 的行间样式表 将 color 属性设置为 red 将 background color 属性设置为 blue 实现对段落内容的设置 参考代码如下 4 编写段落标签 p 的内部样式表 将 color 属性设置为 red 将 background color 属性设置为 blue 实现对段落内容的设置 参考代码如下 p color red background color blue 5 新建一个样式表文件 编写段落标签 p 的外部样式表 将 color 属性 设置为 red 将 background color 属性设置为 blue 在 HTML 文档中嵌入该样式 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 6 表实现对段落内容的设置 参考代码如下 p color red background color blue 2 利用 Div CSS 方法在网页中插入两个方块 效果如图 5 所示 1 建立一个空的 HTML 文档 2 向 HTML 文档中插入两个 div 标签 3 编写 CSS 代码 将第一个 div 标签的颜色设置为红色 将第二个 div 标签的颜色设置为蓝色 4 编写 CSS 代码 将第一个 div 标签的高度和宽度设置为 200 像素 将 第二个 div 标签的宽度设置为 300 像素 高度设置为 200 像素 图 5 3 在上一步骤的基础上 使两个 div 块并列显示于一行 效果如图 6 所示 1 打开上一步中的 HTML 文件 2 修改第一个 div 标签的 CSS 代码 加入 float 属性 并使其值为 left 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 7 图 6 实验四实验四 CSS 背景样式控制背景样式控制 1 实验目的 实验目的 掌握利用 CSS 设置网页背景的方法 2 实验内容及步骤 实验内容及步骤 1 设置网页的背景颜色 1 建立一个空的 HTML 网页 2 编写相应的 CSS 代码 将网页的背景颜色分别设置为红色 绿色 蓝色 参考代码如下 body background color ff0000 body background color 00ff00 body background color 0000ff 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 8 2 设置网页的背景图片 1 编写相应的 CSS 代码 为网页设置背景图片 使图片平铺 参考代 码如下 one background image url gift jpg background repeat repeat 2 编写相应的 CSS 代码 为网页设置背景图片 使图片不平铺 参考 代码如下 two background image url gift jpg background repeat no repeat 3 编写相应的 CSS 代码 为网页设置背景图片 使图片在水平方向平 铺 参考代码如下 three background image url gift jpg background repeat repeat x 4 编写相应的 CSS 代码 为网页设置背景图片 使图片在垂直方向平 铺 参考代码如下 four background image url gift jpg background repeat repeat y 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 9 实验五实验五 CSS 字体和文本样式设置字体和文本样式设置 1 实验目的 实验目的 掌握 CSS 中设置字体的方法 掌握 CSS 中设置文本样式的方法 2 实验内容及步骤 实验内容及步骤 1 利用 CSS 设置网页中字体的样式 1 建立一个空的 HTML 网页 2 编写相应的 CSS 代码 将网页中的字体设置为宋体 参考代码如下 one font family 宋体 3 修改 CSS 代码 将网页中的字体大小设置为 18 像素 参考代码如下 one font size 18px 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 10 4 修改 CSS 代码 将网页中的字体颜色设置为红色 参考代码如下 one color red 2 利用 CSS 设置网页中文本样式 1 建立一个空的 HTML 网页 2 编写相应的 CSS 代码 将网页中的段落缩进 20 个像素 参考代码如 下 one text indent 20px 3 修改 CSS 代码 将网页中字符之间的间隔设置为 10 像素 参考代码 如下 one letter spacing 10px 4 修改 CSS 代码 将网页中的段落行距设置为 50 像素 参考代码如下 one line height 50px 实验六实验六 熟悉熟悉 Dreamweaver 使用 一 使用 一 1 实验目的 实验目的 掌握 Dreamweaver 的基本使用方法 掌握在 Dreamweaver 创建站点的方法 掌握在 Dreamweaver 中添加页面元素的方法 2 实验内容及步骤 实验内容及步骤 1 利用 Dreamweaver 创建一个本地站点 1 建立包含站点文件的文件夹 2 打开 Dreamweaver 执行 站点 新建站点 菜单命令 打开 未命 名站点 1 的站点定义为 对话框 如图 7 所示 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 11 图 7 3 在 您打算为您的站点起什么名字 编辑框中输入站点的名字 4 单击 下一步 按钮 询问是否使用服务器技术 由于实例全部是静 态网页 因此选择 否 我不想使用服务器技术 单击选项按钮 如图 8 所示 5 单击 下一步 按钮 询问文件储存在计算机的位置 如图 9 所示 单击所编辑框右侧的文件夹按钮 打开 选择站点未命名站点 1 的本地根文件 夹 对话框 选择第一步中建立的文件夹 6 单击 下一步 按钮 询问连接到远程服务器的方式 如图 10 所示 在下列表中选择 无 选项 7 单击 下一步 按钮 在对话框中显示前面定置的所有信息 单击 完成 按钮 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 12 图 8 图 9 2 为网站创建首页 并向其中插入文本元素和图像元素 1 打开 文件 面板 显示第一步中新建站点信息 在站点上点击鼠标 右键 选择 新建文件 菜单项 建立 index html 文件 2 双击 index htm 文件 进入网页的设计视图 3 在网页中确定插入点 并输入一段文字 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 13 4 使用字体属性面板 将输入的文字的字体设置为 宋体 字体大小 设置为 20px 并为输入的文字设置标题 5 执行 插入 图像 菜单命令 向网页中插入图像 6 使用图像属性面板 设置插入的图像的大小 7 为文字标题设置超链接 使其能够链接到相应的网址 3 制作一个简单的提交留言页面 最终效果如图 11 所示 1 新建一个空的网页文件 2 执行 插入 表单 菜单命令 插入一个表单 3 将光标放置在表单内 插入一个 5 行 2 列的表格 并将表格的第 1 第 5 行进行合并 4 在表格的第 1 行插入 提交留言 5 在表格第 2 行第 1 列插入 姓名 第 2 列插入文本域 6 在表格第 3 行第 1 列插入 密码 第 2 列插入文本域 并在属性面 板中将文本类型设置为 密码 7 在表格第 4 行第 1 列插入 留言 第 2 列插入文本区域 8 在表格第 5 行插入 提交 和 重置 按钮 图 10 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 14 图 11 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 15 实验七实验七 熟悉熟悉 Dreamweaver 使用 二 使用 二 1 实验目的 实验目的 掌握在 Dreamweaver 中使用 CSS 的方法 2 实验内容及步骤 实验内容及步骤 1 设置网页中的文字样式 1 新建一个空的网页文件 2 打开网页的设计视图 向网页中输入相应的文本信息 3 执行 文本 CSS 样式 新建 命令 弹出 新建 CSS 规则 对话框 新建类选择器 one 如图 12 所示 图 12 4 单击 确定 按钮 弹出 one 的 CSS 规则定义 对话框 将字体设 置为 宋体 大小设置为 20px 颜色设置为 FF0000 单击 确定 按钮 完 成 CSS 规则定义 5 选定文本 单击右键 在弹出的菜单中选择 CSS 样式 one 保存网 页 2 为网页设置背景图片 1 打开第 1 步中建立网页文件 2 执行 文本 CSS 样式 新建 命令 弹出 新建 CSS 规则 对话框 为 body 标签建立 CSS 样式 如图 13 所示 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 16 图 13 3 单击 确定 按钮 弹出 body 的 CSS 规则定义 对话框 选择 背景 分类 如图 14 所示 单击背景图像编辑框右侧的浏览按钮为网页选择 背景图片 单击 确定 按钮 完成 CSS 规则定义 图 14 4 保存并预览 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 17 实验八实验八 Javascript 基本语法基本语法 1 实验目的 实验目的 熟悉 Javascript 基本语法 掌握在网页中加入 Javascript 语句的方法 熟悉 Javascript 对程序流程的控制 2 实验内容及步骤 实验内容及步骤 1 向网页中插入 Javascript 语句编写 1 新建一个空的网页文件 2 编写 Javascript 代码 并将其插入到网页文件的 head 标签中 参考代 码如下 var mydate new Date var str 欢迎你的光临 alert 今天是 n n mydate n n str 3 保存并预览 2 练习 Javascript 控制语句 1 新建一个空的网页文件 2 编写 Javascript 代码 使其能够根据当前时间 在网页中显示不同的 问候语 参考代码如下 var curday new Date hours curday getHours if hours 12 alert 早上好 else if hours 18 alert 中午好 else alert 晚上好 3 保存并预览 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 18 实验九实验九 Javascript 函数函数 1 实验目的 实验目的 掌握 Javascript 内置函数的使用方法 掌握如何在 Javascript 中定义自己的函数 掌握 Javascript 的事件处理机制 2 实验内容及步骤 实验内容及步骤 1 编写计算两个数的和的网页 最终效果如图 15 所示 图 15 1 建立一个空的网页文件 2 向网页中插入一级标题 计算两个数的和 3 向网页中插入一个表单 4 向表单中插入一个 3 行 2 列的表格 合并表格的第 3 行 5 在表格的第 1 行第 1 列输入 加数 1 第 1 行第 2 列插入一个文本 域 6 在表格的第 2 行第 1 列输入 加数 2 第 2 行第 2 列插入一个文本 域 7 在表格的第 3 行插入一个 计算 按钮 8 为 计算 按钮编写计算两个数之和的函数 sum 实现计算两个文本 域中值之和 参考代码如下 function sum form var x parseInt form num1 value var y parseInt form num2 value var z x y alert 计算结果为 z 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 19 9 在 计算 按钮的 onclick 事件中调用 sum 函数 10 保存并预览 静态网页设计实验指导书 软件学院 数据库教研室 2011 版 20 实验十实验十 Javascript 对象对象 1 实验目的 实验目的 掌握 Javascript 常用内置对象的使用 掌握 Javascript 浏览器对象的使用 2 实验内容及步骤 实验内容及步骤 1 编写计算一