HTML+CSS上机实验指导书 网页设计实验指导.doc

1 南阳理工学院南阳理工学院 html css 上机实验指导书上机实验指导书 2011 版 软件学院 net 教研室 2011 8 2 目目 录录 实验一实验一 熟悉熟悉 html 网页如何手工制作网页如何手工制作 2 实验二实验二 熟悉熟悉 html 网页和各种标签网页和各种标签 3 实验三实验三 熟悉使用熟悉使用 dreamweaver 制作制作 html 网页的方法网页的方法 3 实验四实验四 列表标签和超链接标签列表标签和超链接标签 4 实验五实验五 网页表格的制作网页表格的制作 4 实验六实验六 网页表单的制作网页表单的制作 5 实验七实验七 熟悉熟悉 css 基本结构一基本结构一 5 实验八实验八 熟悉熟悉 css 基本结构二基本结构二 5 实验九实验九 熟悉熟悉 css 基本结构三基本结构三 6 实验十实验十 熟悉熟悉 css 基本结构三基本结构三 7 实验十一实验十一 熟悉熟悉 dreamweaver 使用 一 使用 一 8 实验十二实验十二 熟悉熟悉 dreamweaver 使用 二 使用 二 8 3 实验一实验一 熟悉熟悉 html 网页网页如何手工制作如何手工制作 实验目的实验目的 熟悉 html 的基本结构和常用标记 使用记事本编写网页文件 实验内容实验内容 建立一个简单的 html 文件 并输入相应的内容 要求使用相应标签对网 页内容进行排版 排版中涉及到的标签包括 标题标签 字体标签 分段标签 等 实验步骤实验步骤 1 打开记事本程序 编写网页的基本结构 2 对网页进行编辑 输入文本内容 并用相应的标签对文本内容进行排版设置 3 将文件保存为 html 4 用浏览器打开所保存的网页文件 在浏览器中显示效果 5 根据结果重新调整原代码 6 重复步骤 4 步骤 5 实验二实验二 熟悉熟悉 html 网页和各种标签网页和各种标签 实验目的实验目的 熟悉 html 的基本结构和常用标记 使用记事本编写网页文件 实验内容实验内容 建立一个简单的 html 文件 并输入相应的内容 要求使用相应标签对网 页内容进行排版 进一步 向网页中加入图片 使用相应标签对网页进行美化 网页美化中 涉及到的标签包括 图像标签 超链接标签等 实验步骤实验步骤 1 打开记事本程序 编写网页的基本结构 2 对网页进行编辑 输入文本内容 并用相应的标签对文本内容进行排版设置 3 将文件保存为 html 4 用浏览器打开所保存的网页文件 在浏览器中显示效果 5 根据结果重新调整原代码 6 向网页中加入图片 利用相应标签对图片进行设置 达到美化网页效果 7 重复步骤 4 步骤 5 4 实验三实验三 熟悉使用熟悉使用 dreamweaver 制作制作 html 网页的方法网页的方法 实验目的实验目的 熟悉使用 dreamweaver 制作 html 网页的方法 实验内容实验内容 使用 dreamweaver 建立一个站点 然后建立简单的 html 文件 并输入相 应的内容 要求使用相应标签对网页内容进行排版 同时注意掌握 dreamweaver 的使用方法 实验步骤实验步骤 1 打开 dreamweaver 程序 建立站点 新建一个网页文件 2 对网页进行编辑 输入文本内容 并用相应的标签对文本内容进行排版设置 3 将网页文件保存 注意查看文件所在位置 4 按 f12 键 使用浏览器打开所保存的网页文件 在浏览器中显示效果 5 根据结果重新调整原代码 6 向网页中加入图片 利用相应标签对图片进行设置 达到美化网页效果 7 重复步骤 4 步骤 5 实验四实验四 列表标签和超链接标签列表标签和超链接标签 实验目的实验目的 掌握网页中列表标签和超链接标签的使用方法 实验内容实验内容 通过编写代码和可视化两种方式进行练习 建立一个基本的 html 文件 设计网页中列表标签 设计网页中的超链接标签 实验步骤实验步骤 1 打开 dreamweaver 程序 建立站点 新建一个网页文件 2 对网页进行编辑 输入文本内容 并用相应的标签对文本内容进行试验内容 要求的设置 3 将网页文件保存 注意查看文件所在位置 4 按 f12 键 使用浏览器打开所保存的网页文件 在浏览器中显示效果 5 根据结果重新调整原代码 5 6 向网页中加入图片 利用相应标签对图片进行设置 达到美化网页效果 7 重复步骤 4 步骤 5 实验五实验五 网页表格的制作网页表格的制作 实验目的实验目的 掌握网页中表格的制作方法 实验内容实验内容 建立一个基本的 html 文件 网页中表格 设置单元格合并 实验步骤实验步骤 1 打开记事本程序 编写网页的基本结构 2 用 等标签在网页中建立相应的表格 3 改变表格中 border width height 等属性 4 文件保存为 html 5 浏览器打开所保存的网页文件 显示修改后的效果 6 根据结果重新调整源代码 实验六实验六 网页表单的制作网页表单的制作 实验目的实验目的 掌握网页中表单的制作方法 实验内容实验内容 建立一个基本的 html 文件 网页中表单制作 设置各种表单控件 实验步骤实验步骤 1 打开记事本程序 编写网页的基本结构 2 利用标签在网页中插入表单 制作一个调查问卷表 该表单主要 包括单行文本框 单选钮 复选框 选择下拉框 文本域等表单元素 3 文件保存为 html 4 浏览器打开所保存的网页文件 显示修改后的效果 5 根据结果重新调整源代码 6 实验七实验七 熟悉熟悉 css 基本结构一基本结构一 实验目的实验目的 了解 css 的基本结构 掌握在网页中加入 css 的方法 实验内容实验内容 练习 css 的三种使用方式 外部样式表的使用 内部样式表的使用 内嵌 样式的使用 实验步骤实验步骤 1 打开记事本程序 编写网页的基本结构 2 编写一段 css 代码 3 使用三种不同的方法将编写的 css 代码加入网页中 4 浏览器打开所保存的网页文件 检验是否成功将 css 加入网页中 5 根据结果重新调整源代码 实验八实验八 熟悉熟悉 css 基本结构二基本结构二 实验目的实验目的 掌握 css 的布局方法 实验内容实验内容 练习 css 的三种使用方式 外部样式表的使用 内部样式表的使用 内嵌 样式的使用 利用 div css 方法对网页进行布局 实验步骤实验步骤 1 打开记事本程序 编写网页的基本结构 2 编写一段 css 代码 3 使用三种不同的方法将编写的 css 代码加入网页中 4 浏览器打开所保存的网页文件 检验是否成功将 css 加入网页中 5 根据结果重新调整源代码 6 重新建立一个网页 7 向网页中插入三个 div 标签 结合 css 实现定位 8 文件保存为 html 9 浏览器打开所保存的网页文件 显示修改后的效果 10 根据结果重新调整源代码 7 11 根据结果重新调整源代码 实验九实验九 熟悉熟悉 css 基本结构三基本结构三 实验目的实验目的 掌握 css 中设置背景的方法 实验内容实验内容 练习 css 的三种使用方式 外部样式表的使用 内部样式表的使用 内嵌 样式的使用 编写 css 代码 对网页的背景进行设置 设置网页的背景图片 实验步骤实验步骤 1 打开记事本程序 编写网页的基本结构 2 编写一段 css 代码 3 使用三种不同的方法将编写的 css 代码加入网页中 4 浏览器打开所保存的网页文件 检验是否成功将 css 加入网页中 5 根据结果重新调整源代码 6 编写相应的 css 代码 将网页的背景颜色分别设置为红色 绿色 蓝色 7 文件保存为 html 8 浏览器打开所保存的网页文件 显示修改后的效果 9 根据结果重新调整源代码 10 重新建立一个网页 11 编写 css 代码 为网页添加背景图片 使图片不平铺 12 修改 css 代码 使图片在水平方向平铺 13 修改 css 代码 使图片在垂直方向平铺 14 修改 css 代码 使图片同时在水平和垂直方向平铺 15 文件保存为 html 16 浏览器打开所保存的网页文件 显示修改后的效果 17 根据结果重新调整源代码 实验十实验十 熟悉熟悉 css 基本结构三基本结构三 实验目的实验目的 掌握 css 中设置字体和文本样式的方法 实验内容实验内容 8 练习 css 的三种使用方式 外部样式表的使用 内部样式表的使用 内嵌 样式的使用 编写 css 代码 对网页的字体和文本样式进行设置 实验步骤实验步骤 1 打开记事本程序 编写网页的基本结构 2 编写一段 css 代码 3 使用三种不同的方法将编写的 css 代码加入网页中 4 浏览器打开所保存的网页文件 检验是否成功将 css 加入网页中 5 根据结果重新调整源代码 6 向网页中插入一段文字 7 编写相应的 css 代码 对文本字体进行设置 分别将其设置为 times new roman 宋体 黑体 8 修改 css 代码 对字体大小进行设置 9 修改 css 代码 设置文本段落缩进 10 修改 css 代码 设置文本对齐方式 分别将文本设置为左对齐 右对齐 居中对齐 11 文件保存为 html 12 浏览器打开所保存的网页文件 显示修改后的效果 13 根据结果重新调整源代码 实验十一实验十一 熟悉熟悉 dreamweaver 使用 一 使用 一 实验目的实验目的 掌握 dreamweaver 的基本使用方法 掌握在 dreamweaver 创建站点的方法 掌握在 dreamweaver 中添加页面元素的方法 实验内容实验内容 在本地磁盘建立文件夹 在此基础上利用 dreamweaver 建立自己的站点 并为站点设置主页文件 进而向主页中添加文本 图像 超链接等元素 实验步骤实验步骤 1 在本地磁盘建立 newsite 文件夹 2 启动 macromedia dreamweaver 8 3 利用 dreamweaver 8 将 newsite 文件夹设置为站点 4 建立站点首页 index html 9 5 对首页进行编辑 向其中添加文本 插入图像 超链接 并设置相应的 格式 6 文件保存为 html 7 浏览器打开所保存的网页文件 显示修改后的效果 8 根据结果重新调整源代码 实验十二实验十二 熟悉熟悉 dreamweaver 使用 二 使用 二 实验目的实验目的 掌握在 dreamweaver 中使用表格的方法 掌握在 dreamweaver 中使用表单的方法 掌握在 dreamweaver 中使用 css 的方法 实验内容实验内容 在 dreamweaver 中建立基本 html 页 分别向其中插入表格 表单 并对 其格式进行设置 利用 css 样式面板对网页进行美化 实验步骤实验步骤 1 在本地磁盘