《Web编程基础》实验教案

2016至2017学年第二学期实验教案课程名称Web实验基础实验使用教材《Web编程基础――HTML、CSS、JavaScript》教学时数24课程性质必修任课班级（人数）信管（科本）15-1系（部）信息教研室网络任课教师薛方芳山东科技大学泰山科技学院

实验一使用Dreamweaver建立基础页面实验目的：通过本次实验使学生对Dreamweaver的应用有个初步了解，便于在以后的学习和实验中使用此软件。养成良好的存储习惯。实验内容：建立自己的总文件夹，把需要的内容分开存放在不同的文件夹内（如images、sound、CSS、JS等）。打开Dreamweaver软件，浏览各菜单及工具栏的内容。新建一个HTML页面，保存的名为英文字母、数字，扩展名为.HTML，并保存在自己的文件夹内。在新建的页面中写欢迎语句。实验步骤1.打开Dreamweaver2.建立自己相应的文件夹3.建立站点4.建立基础页面5.输入相应文字并进行编辑6.使用列表及水平分隔线7.建立多个页面使用超链接8.建立书签及链接<html><head><title>欢迎你!我的朋友.</title><style>h1{font-family:幼圆;font-size:x-large;color:red}</style></head><body><h1>当你进入HTML编程世界的时候，你的<br>感觉是全新的!</h1><scriptlanguage="JavaScript">alert("welcome！朋友们");</script></body></html>

实验二HTML基础应用实验目的：通过本次课的学习，学习HTML的基本应用。使用HTML建立一个页面，熟悉其应用。实验内容：制作一个人名片要求：1.有个人照片（100*150，尺寸设置不要太大）2.有背景图片3.加上背景音乐4.文字的图片的设置要合理

实验三制作一个表单页面本次实验学习内容：（1）文本输入框和密码输入框的使用（2）单选按钮和复选的使用（3）提交按钮、重置按钮、图像按钮的使用（4）文件选择输入框的使用（5）多行文本输入框和下拉列表框的使用实验目标：（1）掌握表单的创建、编辑、处理方法。（2）掌握表单对象的功能、特点和用途实验内容：制作一个注册表单，要求使用5种以上的表单控件

实验四框架页面的设置框架是网页布局的一种方式。使用框架可以将一个浏览器窗口分割成几个不同的区域，实现一个浏览器窗口中多个HTML页面的显示。利用框架制作导航功能，可以使得网站结构清晰，并且风格保持一致。本次实验学习内容：框架及框架集的使用框架属性的设置子窗口的设置框架布局的方法实验目标：掌握框架网页在创建、选择、设置方面的特点掌握框架结构网页的制作方法掌握iframe标记以及各个属性

实验五表格练习实验目的：使用HTML建立一个页面，熟悉其应用。此处加背景色实验难点：使用表格建立一个页面。此处加背景色如下图所示：字为居中对齐字为居中对齐讲解上题的建立方法。实验过程：建立一个页面；（约45min）要求使用表格建立一个“个人主面”的页面在页面中分成多少表格嵌套使用有必要的超级链接安排合理，色调好看

实验六CSS的应用实验目的：CSS构造。CSS的定义与使用。CSS的绝对定位与相对定位。CSS字体与文本属性。CSS的文字及超链接控制。1利用CSS定位页面元素实验要求：利用给定的素材，通过对其运用CSS属性，将素材内容设计为网页显示。实验分析：在使用CSS进行页面元素的定位中，所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。通常可以通过调整盒子的边框和距离等参数来调节盒子的位置。一个盒子模型由content（内容）、border（边框）、padding（间隙）、margin（间隔）这4部分组成。在本实验中，首先对标题使用居中及背景色等样式定义，突出标题的显示。对于段落使用行间距的段落设计，使用文字读起来清晰流畅。图片的效果处理是题中一个增色的地方。将图嵌入DIV层中，然后恰当地利用边框加粗，边框样式，以及padding的留白作用，将普通的图片营造出墙饰油画的效果。2利用CSS制作导航实验要求：利用CSS制作导航，下有二级菜单。如下图：初始状态：鼠标经过时状态：实验分析：对a:link,a:visited/*超链接正常状态、被访问过的样式*/和a:hover/*鼠标经过时的超链接*/。分别经行样式设置，分别设置前景色，背景色和边框色。制作有二级菜单的菜单：实验分析：使用UL经行设置，对其LI经行设置

实验七DIV+CSS的应用本次实验学习内容：CSS构造。CSS的定义与使用。CSS的绝对定位与相对定位。CSS字体与文本属性。CSS的文字及超链接控制。CSS列表与DIV的应用。实验目标：掌握CSS定义文字、背景图片、超链接控制、列表、DIV等常用属性。完成简单CSS+DIV页面设计。用DIV+CSS布局网页结构实验要求：如下图所示使用DIV+CSS布局方法布局一家企业网站的主页面，自己可以使用DIV+CSS制作“个人网站”中的“个人风采展示”或者“我的好友”等页面。实验分析：页面从整体上来看是“上中下”的布局模型。其头部分包含网站的logo和导航条，在实现上可以用械右两个DIV层布局，并利用左右浮动进行定位；下面是一张精美的图片做banner条，起到美化网页的作用，同时该图片也是一个DIV标签实现定位；中间部分是左右分开的两部分内容页，分别使用独立的DIV层进行控制；左侧内容使用了一列图片链接的形式，可采用列表实现。底部为版权信息内容，同样使用独立的DIV层进行控制。还要考虑颜色、字体和字号等多方面的CSS控制问题，以达到整体效果的协调统一。可能用到如下一些CSS属性：使用margin：将该属性设定到body标记的CSS定义中，可以使用页面位居屏幕中间。文字或图片的左右居中直接用text-align:center即可。文字垂直居中就要靠设置行高方法居中文字内容，通过使用CSS属性类样式line-height可以实现文字与图片的垂直居中。使用背景图片时，repeat/no-repeat/repeat-x/repeat-y分别表示填充满整个层/不填充/沿X轴填充/沿Y轴填充。使用列表进行新闻显示时，属性list-style:none可取消列表前点。使用超链接时，利用a:link、a:vistited、a:hover可实现链接中、链接后、链接时等不同的效果。

实验八JavaScript应用1实验目的：学会建立外部的JS文件，并学会调用方式。实验内容：页面上有一幅图像，在状态栏显示有关图像的说明，单击图像时，换成另一幅图像，同时状态栏的内容也做相应的变更。状态1如图：单击后状态2如图：实验过程：1.建立外部的JS文件2.使用单击事件写出相应的脚本mouseDown（）3.在状态栏出现的文字要使用脚本是对状态栏进行设置window.status=""实验九JavaScript应用2实验目的：进一步了解客户端的运行机制实验内容：完成表单中数据在客户端的验证，并根据输入给出相应的提示。如图所