《Web编程基础》实验教案_第1页
《Web编程基础》实验教案_第2页
《Web编程基础》实验教案_第3页
《Web编程基础》实验教案_第4页
《Web编程基础》实验教案_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

2016至2017学年第二学期

实验教案

课程名称w名实验基础实验

使用教材《Web编程基础一一HTML、CSS、JavaScript》

教学时数_24_课程性质必修

任课班级（人数）信管（科本）15-1

系（部）信息教研室网络

任课教师薛方芳

山东科技大学泰山科技学院

实验一使用Dreamweaver建立基础页面

实验目的：

通过本次实验使学生对Dreamweaver的应用有个初步了解，便于在

以后的学习和实验中使用此软件。养成良好的存储习惯。

实验内容：

1.建立自己的总文件夹，把需要的内容分开存放在不同的文件夹内

（如images、soundCSS>JS等）。

2.打开Dreamweaver软件，浏览各菜单及工具栏的内容。

3.新建一个HTML页面，保存的名为英文字母、数字，扩展名

为.HTML,并保存在自己的文件夹内。

4.在新建的页面中写欢迎语句。

实验步骤

■1.打开Dreamweaver

■2.建立自己相应的文件夹

■3.建立站点

■4,建立基础页面

■5.输入相应文字并进行编辑

■6.使用列表及水平分隔线

■7.建立多个页面使用超链接

■8.建立书签及链接

<html>

<head>

欢迎你!我的朋友

<style>

hl{font-family:^j|Sl;font-size:x-large;color:red）

</style>

</head>

<body>

<hl>当你进入HTML编程世界的时侯，你的<br>感觉是全新的!

</hl>

<scriptIanguage="JavaScript">

alert（"welcome!朋友们”）;

</script>

</body>

</html>

实验三制作一个表单页面

本次实验学习内容：

（1）文本输入框和密码输入框的使用

（2）单选按钮和复选的使用

（3）提交按钮、重置按钮、图像按钮的使用

（4）文件选择输入框的使用

（5）多行文本输入框和下拉列表框的使用

实验目标：

（1）掌握表单的创建、编辑、处理方法。

（2）掌握表单对象的功能、特点和用途

实验内容：

制作一个注册表单，要求使用5种以上的表单控件

实验四框架页面的设置

框架是网页布局的一种方式。使用框架可以将一个浏览器窗口分割成几个不同的

区域，实现一个浏览器窗口中多个HTML页面的显示。利用框架制作导航功能，

可以使得网站结构清晰，并且风格保持一致。

本次实验学习内容：

（1）框架及框架集的使用

（2）框架属性的设置

（3）子窗口的设置

（4）框架布局的方法

实验目标：

（1）掌握框架网页在创建、选择、设置方面的特点

（2）掌握框架结构网页的制作方法

（3）掌握iframe标记以及各个属性

实验五表格练习

实验目的：使用HTML建立一个页面，熟悉其应用。

实验难点：使用表格建立一个页面。此处加背景色

如下图所示：

ger乩，〃/

M郎百时培ME音♦妙礼，才口¥雏W方习防K系方大

3

0

0

4

0

0

5

0

0

讲解上题的建立方法。

实验过程：

建立一个页面；（约45min）

要求

1）使用表格建立一个“个人主面”的页面

2）在页面中分成多少表格嵌套使用

3）有必要的超级链接

4）安排合理，色调好看

实验六css的应用

实验目的：

(1)css构造。

(2)CSS的定义与使用°

(3)CSS的绝对定位与相对定位。

(4)CSS字体与文本属性。

(5)CSS的文字及超链接控制。

1利用CSS定位页面元素

实验要求：

利用给定的素材，通过对其运用CSS属性，将素材内容设计为网页显示。

油画欣宜

油画风景是以自然景物为描绘对歙用油画材料进行绘画创作称为油画风景，早期的绘画并没有这一

独立的门类，油画风景只是在一些人物画中以背景或陪衬的形式出现。直至文艺复兴以后的16世纪，风景

画才作为独立的绘画体裁出现干欧洲画坛，并得到极大发展。

、我的电脑G▼\100%▼

实验分析：

在使用CSS进行页面元素的定位中，所有页面中的元素都可以看成是一个盒

子，占据着一定的页面空间。通常可以通过调整盒子的边框和距离等参数来调节

盒子的位置。一个盒子模型由content(内容)、border(边框)、padding(间隙)、

margin(间隔)这4部分组成。

在本实验中，首先对标题使用居中及背景色等样式定义，突出标题的显示。

对于段落使用行间距的段落设计，使用文字读起来清晰流畅。图片的效果处理是

题中一个增色的地方。将图嵌入DIV层中，然后恰当地利用边框加粗，边框样式,

以及padding的留白作用，将普通的图片营造出墙饰油画的效果。

2利用CSS制作导航

实验要求：

利用CSS制作导航，下有二级菜单。如下图：

初始状态：

首页I一起走到I从明天起I纸飞机］下一站I其它I

鼠标经过时状态：

首页I一起走到I从明天起II纸飞机下一站I其它

实验分析：

对a:link,a:visited/*超链接正常状态、被访问过的样式*/和

a:hover/*鼠标经过时的超链接*/。分别经行样式设置，分别设置

前景色，背景色和边框色。

制作有三级菜单的菜单J_________

首页

网页版式布局自适应宽度

div+css教程固定宽度

div+css实例

常用代码

站长杂谈

技术文档

奥源下载

图片素材

实验分析：

使用UL经行设置，对其LI经行设置

实验七DIV+CSS的应用

本次实验学习内容：

z1X

(1

\7CSS构造。

z2

(

\CSS的定义与使用.

z3

(

\CSS的绝对定位与相对定位。

z4\

()

\zCSS字体与文本属性。

z5\

(!

\/CSS的文字及超链接控制。

z6

(

xCSS列表与DIV的应用。

实验目标：

(1)掌握CSS定义文字、背景图片、超链接控制、列表、DIV等常用属性。

(2)完成简单CSS+DIV页面设计。

用DIV+CSS布局网页结构

实验要求：

如下图所示使用DIV+CSS布局方法布局一家企业网站的主页面，自己可以使

用DIV+CSS制作“个人网站”中的“个人风采展示”或者“我的好友”等页面。

实验分析：

页面从整体上来看是“上中下”的布局模型。其头部分包含网站的logo和导

航条，在实现上可以用械右两个DIV层布局，并利用左右浮动进行定位；下面是

一张精美的图片做banner条，起到美化网页的作用，同时该图片也是一个DIV标

签实现定位；中间部分是左右分开的两部分内容页，分别使用独立的DIV层进行

控制；左侧内容使用了一列图片链接的形式，可采用列表实现。底部为版权信息

内容，同样使用独立的DIV层进行控制。还要考虑颜色、字体和字号等多方面的

CSS控制问题，以达到整体效果的协调统一。

可能用到如下一些CSS属性：

(1)使用margin：将该属性设定至ljbody标记的CSS定义中，可以使用页面位

居屏幕中间。

(2)文字或图片的左右居中直接用text-align:center即可。文字垂直居中就要

靠设置行高方法居中文字内容，通过使用CSS属性类样式line-height可

以实现文字与图片的垂直居中。

(3)使用背景图片E寸,rcpcat/no-rcpcat/rcpcat-x/repcat-y分别表示填充满整个层

/不填充/沿X轴填充/沿Y轴填充。

(4)使用列表进行新闻显示时，属性list・style:none可取消列表前点。

(5)使用超链接时，利用a:link、a:vistited>a:hover可实现链接中、链接后、

链接时等不同的效果。

金朝照集需有限公司首页公司简介产品中心龈务网络在皎订单关于我们

SOUNDWILLHOLDINGSLIMITED

关于金朝阳360三推展厅展示软件承新下载的通知

版权所有："邺日集团有限公司

实验八JavaScript应用1

实验目的:

学会建立外部的JS文件，并学会调用方式。

实验内容:

页面上有一幅图像，在状态栏显示有关图像的说明，单击图像时,

换成另一幅图像，同时状态栏的内容也做相应的变更。

状态1如图：

会收藏夹❷交换图像

这是一张小猫的图像嗅，寸我的电胞'100%•

实验过程：

1.建立外部的J

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论