web实验指导书(第2版)

《web实验指导书(第2版)》由会员分享，可在线阅读，更多相关《web实验指导书(第2版)（33页珍藏版）》请在金锄头文库上搜索。

1、 WEB 技术及应用实习指导书 (第 2 版) 西北农林科技大学信息工程学院 2012 年 7 月 -1- 实习一实习一 HTML标记基本应用与网页设计标记基本应用与网页设计 一、实习目的一、实习目的 1. 熟悉 Dreamweaver 的工作环境； 2. 掌握 Dreamweaver 站点管理功能； 3. 掌握 Dreamweaver 制作网页的基本方法； 4. 掌握网页制作中的利用表格布局方法。 二、实习内容二、实习内容 1. 熟悉 Dreamweaver 的工作环境； 2. Dreamweaver 管理站点功能； 3. 制作图文混排的网页； 4. 制作图片展示网页； 5. 制作个人网站首

2、页。 三、实习步骤三、实习步骤 1.熟悉熟悉 Dreamweaver 的工作环境。的工作环境。 启动 Dreamweaver，熟悉 Dreamweaver 工作环境,了解 Dreamweaver 的界面的组成。 2. Dreamweaver 管理站点管理站点 创建站点创建站点 打开“站点”菜单，单击“新建站点” ，按照向导步骤完成站点的创建。 查看站点目录结构查看站点目录结构 单击“文件”面板,即可查看站点目录结构。 网站其它目录网站其它目录 根据要制作的网站的内容，可以建立相应的目录，用以分类存放网站制作中的相关文件。 在本站点中，请建立如下目录车 xiangce 和 aihao，然后分别在

3、这两个目录中建立文件夹images。 注意：注意：网站目录结构一般在网站创建初期就完成，但也可以在制作网站过程中，随时根据 要求建立。 3.制作一个图文混排的网页制作一个图文混排的网页 打开“文件“菜单” ，单击“新建” ，选择“基本页”中的“HTML” ，在 Dreamweaver 中将出现一个空白的网页。 在网页中输入（粘贴）一段文字（孙悟空自传，教学资源网上可以下载） ，设置第一段 （作为标题）为“黑体、24 磅” ，其余文字设置为“宋体、14 磅” 。 在网页中插入一张图片(sunwukong.jpg，教学资源网上可以下载)，设置图片的对齐属 性为“左对齐” 。调整位置,如图 2-1

4、所示。 -2- 将保存网页到网站的根目录（d:myweb）中，文件名为 zizhuan.htm。 注意：注意：1. 本网页所用到图片都要存入 d:mywebimages 文件夹中。 2. 观察在插入图片时出现的 “确认” 对话框(如图 2-2)， 并复制图片到正确的位置。 3 “另存为”文件对话框中，注意保存网页到指定的位置。 图 2-1 zizhuan.htm 网页 图 2-2“保存嵌入式文件”对话框 4.制作一个图片展示网页制作一个图片展示网页 打开“文件” ，单击“新建” ，选择选择“基本页”中的“HTML” ，在 Dreamweaver 中将出现一个空白的网页。 在网页中插入一个 7

5、行 3 列的表格，在表格属性中，将表格的边框粗细设置为 0，接着 再将第 1 行的 3 列合并,输入文字“孙悟空的幸福生活”，设置为“标题一”格式。调整单元格行高，如图 2-3 所示。 图 2-3 制作中的 xiangche.htm 网页 图 2-4 完成的 xiangce.htm 网页 在表格的单元格中，插入图片和文字说明(教学资源网上可以下载)。如图 2-4 所示。 将保存网页到网站的根目录（d:mywebxiangce）中，文件名为 xiangce.htm。 注意注意:本网页所用到图片都要存入 d:mywebxiangceimages 文件夹中。 5.制作个人主页（首页）制作个人主页（首

6、页） 网页设计时，网页的布局方式将直接影响页面的外观，同时也是体现设计师的水平的一个标准。在设计布局时，通常采用表格的方式。在本网站首面的制作中，我们也将使用表格方式-3- 布局。 打开“文件” ，单击“新建” ，选择选择“基本页”中的“HTML” ，在 Dreamweaver 中将出现一个空白的网页。 在网页中插入一个 7 行 2 列的表格（宽：700 像素；边框：0；边距：0；间距：0） ，然后将第 2 列的所有单格合并,如图 2-5。 在刚合并完成后单元格中， 设置单元格对齐属性为 “水平： 左对齐； 垂直： 顶端对齐” ，然后在该单元格插入一个 4 行 1 列的表格（宽度：100%；边

7、框：0） 。完成的布局如图然后调整单元格行高如图 2-6 所示。 在左边单元格和右边第 1 行的单元中，插入如图 2-7 所示的图片（教学资源网下载） ， 将右边第 2 行拆分为 2 列。 在第 3 行中， 插入一个 1 行 3 列的表格(宽： 100%； 高： 100%，边框：0)，如图 2-8 所示。 接下来，在单元格中插入图片，输入文字，如图 2-9 所示。 将“悟空自传”图片超链接到前面制作的网页“zizhuan.htm”,“我的相册”图片超 链接到“xiangce.htm” ， “我的母校”图片边接到“http:/” ， “与我联系”图片超链接到“mailto:sunwukongti

8、angong.org” 。 将网页保存到网站的根目录（d:myweb）中，文件名为 index.htm。 注意注意:本网页所用到的图片都要存入 d:mywebimages 文件夹中。 四、实习要求四、实习要求 1. 根据指导书实例和操作步骤，独立完成网页设计实习内容。 2. 实习报告中对运用 Dreamweaver 制作网页进行小结。 五、思考问题五、思考问题 1. 如何管理网站文件？ 2. 如何规划和设计个人主页？ 图 2-5 第一次布局 图 2-6 第二次布局 -4-图 2-7 插入图片 图 2-8 第三次布局 图 2-9 输入文字和插入图片 图 2-10 index.htm 在 IE 中

9、的效果 -5- 实习二实习二 CSS基本语法基本语法 一、实验目的一、实验目的 1. 掌握在网页中引用 CSS 的方法； 2. 掌握 CSS 的基本语法规则； 3. 掌握 CSS 的常用选择器； 4. 掌握使用 Dreamweaver 定义 CSS 的方法。 二、实验内容二、实验内容 1. CSS 的引入和基本选择器应用； 2. 利用 CSS 对网页进行控制； 3. 利用 W3school 网站进行 CSS 的练习。 三、实验步骤三、实验步骤 1. CSS 的引入和基本选择器应用； (1) 内嵌样式表 将定义的样式以样式定义形式插入到文档的 Head 区，此种方法样式将影响当前整个页面。 建立

10、网页 Css1.htm，代码如下： Css 技术的应用一 h1 color:red; font-family:”宋体”; body color:black; font-size:9pt; .fnt color:blue; font-family:”隶书”; font-size:14pt; -6-这是标题一 这是正文. 这是使用 fnt 类样式后的效果 (2) 行内样式 将定义的样式以标记的属性形式插入，如：,此种方法样式只影响当前标记所影响的区域。 建立网页 Css2.htm，代码如下： Css 技术的应用一 h1 color:red; font-family:”宋体”; body color

11、:black; font-size:9pt; .fnt color:blue; font-family:”隶书”; font-size:14pt; 这是标题一 这是正文. 这是使用 Fnt 类后的效果 这是中效果只使用于此段. -7- (3) 外部样式表 将所有样式的信息存放在一个单独的文件中（扩展名为 css） ，然后用把它链接到每个 HTML 页面中。链接格式： 2. 利用 CSS 对网页进行控制； (1) 用 Dreamweave 创建如图 3-1 所示页面（css3.htm） 。 图 3-7 未使用 CSS 样式前的网页 (2) 建立样式文件 style.css，格式化上面页面如图 3

12、-8 所示，要求： 标题：标题：字体为“华文彩云“, “华文琥珀“, “华文行楷“；字号 40pt；字色红色；背景色：#FFFFCC。导航条：导航条：背景色为#33CCFF。 导航栏：导航栏：标题背景色为#FFFFCC，上边框为：实线，2pt 宽，色值：#FFCC00；内容 背景色：#FFCCFF；导航栏右边框为：点划线，1pt 宽，色值：#0033FF。底框：背景色：#99CCFF；上边框：双线，2pt 宽。 文本框文本框：背景色：#FFFFCC；边框：宽度 1pt，实线。 正文字号正文字号：9pt。 （除标题） 超级链接：超级链接：正常色：黑色，无修饰；鼠标悬停时：红色，加下划线；激活时：

13、红 色，加下划线；访问过的链接：黑色，无修饰。 -8-图 3-8 应用样式后的效果 3. 利用 W3school 网站进行 CSS 的练习。 W3school 网站是一个很好的学习网站， 其上面有很多的学习资源， 并且也提供了很多在线 测试的例子。 打开 http:/ 网站，找到 CSS 相关部分并作练习。 四、实习要求四、实习要求 1. 根据指导书实例和操作步骤，独立完成实习内容。 2. 记录实验中出现的问题，以用解决办法。 五、思考问题五、思考问题 1. HTML 与 XHTML 的区别，在网页设计中各有什么用处？ 2. CSS 的基本思想。 3. CSS 选择器有哪些，在网页设计中如何选

14、择使用。 -9- 实习三实习三 CSS盒子模型与网页布局盒子模型与网页布局 一、实习目的一、实习目的 1. 深入理解 CSS 盒模型及其属性； 2. 熟练掌握 CSS 的定位方法； 3. 掌握 IETest 软件的使用方法。 二、实习内容二、实习内容 1. 用 CSS 完成常见的几种网页布局形式的练习； 2. 使用 Div+CSS，完成“实习一”中“index.htm”页面的布局； 3. 在多种浏览器上对网页测试。 三、实习题目三、实习题目 1. 利用“实习一”中的素材，通过用 DIV+CSS 的形式重新完成对 index.htm 网页的布局。 2. 在所用计算机上安装 “FireFox浏览器

15、”和“Chrome谷歌浏览器” ，并对所作的网页进行 测试。 3. 课后独立完成课本第 6 章所要求的网页。 （所需素材在 202.117.179.110 中提供） 四、实习要求四、实习要求 1. 根据指导书实例和操作步骤，独立完成实习内容。 2. 记录实验中出现的问题，以用解决办法。 3. 以上三个实验题目必须完成，要求提交源代码及相关素材。 -10-实习四实习四 JavaScript基本语法基本语法 一、实习目的一、实习目的 1掌握 JavaScript 的基本语法； 2掌握 JavaScript 的常用内置对象的作用、属性、方法的运用； 3掌握 JavaScript 的程序流程控制语句的运用； 4. 掌握 Firebug 的基本用法。 二、实验题目二、实验题目 1. 要求用户在文本框中年份， 点击判断按钮， 用 alert 函数输出该年是否是闰年的结果。 function testLeapYear () /你的代码 2利用复选框让用户选择其爱好，用 alert 对话框输出用户所选的内容。 篮球 足球 排球 乒乓球 function funGo1() /你的代码 3要求在文本框中输入用户名，点击“注册”按钮进行提交。当文本框为空时，则弹出提示信息，并取消提交操作。 姓名： -11-function funCheck() /你的代码 4在网页上输出“九九乘法表” 。 5