标签)。页面的整个结构标签与表现标签混合在一起。
相对于其他HTML继承而来的元素,Div标签的特性就是它是一种块级元素,更容易被CSS代码控制样式。
5、实验所用仪器
实验中心学生用计算机。
6、实验步骤和方法
页面布局规划:
1)什锦果园水果沙拉局部内容的页面效果入图5-1所示。
图5-1什锦果园水果沙拉局部内容效果图
2)什锦果园水果沙拉页面局部布局示意图如图5-2所示。
图5-1页面局部布局示意图
页面的制作过程:
1)前期准备
(1)栏目目录结构
在栏目文件夹下创建文件夹images和css,分别用来存放图像素材和外部样式表文件。
(2)页面素材
将页面所需要使用的图像素材存放在文件夹images下。
(3)外部样式表
在文件夹css下新建一个名为style.css的样式表文件。
2)制作页面
7、实验注意事项
实验用计算机带有还原单元,每次重新启动,系统盘内容都会还原到初始状态。
8、实验预习要求
上机实验前,应仔细阅读教材、课堂笔记。
上机实验时应带好教材、教学参考书及听课笔记。
9、实验程序要求
该实验最终程序存盘备份,以备以后成绩判定。
实验六制作博客页面
1、实验项目名称、学时
制作博客页面,2学时
2、实验目的
学会使用CSS代码修饰常见的网页元素。
3、实验要求
实验前认真阅读实验指导书,掌握实验原理,熟悉实验任务。
实验时注意观察,认真记录。
实验结束后按规定整理试验用计算机设备。
独立完成实验报告。
4、实验原理
了解了CSS设计中的4个核心基础——盒模型、标准流、浮动和定位,就可以以此为基础,使用CSS来进行网页中文本、图像、链接、导航等元素的样式设置。
5、实验所用仪器
实验中心学生用计算机。
6、实验步骤和方法
1)前期准备
(1)栏目目录结构
在栏目文件夹下创建文件夹images和css,分别用来存放图像素材和外部样式表文件。
(2)页面素材
将页面所需要使用的图像素材存放在文件夹images下。
(3)外部样式表
在文件夹css下新建一个名为style.css的样式表文件。
2)制作页面
(1)制作页面的CSS样式
(2)制作页面的网页结构代码
什锦果园博客页面的布局示意图如图6-1所示,制作完成的页面效果如图6-2所示。
图6-1什锦果园博客页面布局示意图
图6-2什锦果园博客页面效果
7、实验注意事项
实验用计算机带有还原单元,每次重新启动,系统盘内容都会还原到初始状态。
8、实验预习要求
上机实验前,应仔细阅读教材、课堂笔记。
上机实验时应带好教材、教学参考书及听课笔记。
9、实验程序要求
该实验最终程序存盘备份,以备以后成绩判定。
实验七利用CSS制作关于页面
1、实验项目名称、学时
利用CSS制作关于页面,2学时
2、实验目的
(1)练习使用CSS设置链接;
(2)掌握导航菜单的基本设置方法。
3、实验要求
实验前认真阅读实验指导书,掌握实验原理,熟悉实验任务。
实验时注意观察,认真记录。
实验结束后按规定整理试验用计算机设备。
独立完成实验报告。
4、实验原理
在一个网站中,所有网页都会通过超链接互相链接在一起,用户通过超链接在各个页面之间导航,这样才会形成一个有机的网站。
在设计网站时,链接与导航都是页面中至关重要的组成部分之一。
一个包含美观链接的页面能给浏览者带来新鲜的感觉,而要实现链接的多样化离不开CSS样式的辅助。
普通的Web站点由一组页面组成,用户通过超链接在各个页面之间导航,用CSS制作导航菜单可以提高用户体验,而其制作方法可以分为普通的超链接导航和使用列表标签构建的导航菜单。
5、实验所用仪器
实验中心学生用计算机。
6、实验步骤和方法
1)前期准备
(1)栏目目录结构
在栏目文件夹下创建文件夹images和css,分别用来存放图像素材和外部样式表文件。
(2)页面素材
将页面所需要使用的图像素材存放在文件夹images下。
(3)外部样式表
在文件夹css下新建一个名为style.css的样式表文件。
2)制作页面
(1)页面整体的制作
页面整体body、整体容器main、h1-h4标题、段落、超链接风格、浮动和清除浮动的CSS代码定义如下:
body{/*设置页面整体样式*/
margin:
0px;
padding:
0px;
color:
#333;/*设置默认文字颜色为深灰色*/
font-family:
Tahoma,Geneva,sans-serif;
font-size:
13px;/*设置文字大小为13px*/
line-height:
1.5em;/*设置行高是字符的1.5倍*/
background-color:
#ede4bb;/*设置背景色为土黄色*/
background-image:
url(../images/body.jpg);
background-position:
top;/*背景图像顶端对齐*/
background-repeat:
repeat-x;/*背景图像水平重复*/
}
#wrapper{/*整个页面容器wrapper的样式*/
position:
relative;
width:
980px;
padding:
05px;/*上、右、下、左的内边距依次为0px,5px,0px,5px*/
margin:
0auto;/*容器自动居中*/
}
#wrapper.fruit{
position:
absolute;
top:
0px;
left:
-30px;
width:
145px;
height:
119px;
background:
url(../images/fruit.png)no-repeat;
}
a,a:
link,a:
visited{/*设置超链接及访问过链接的样式*/
color:
#7c0d0b;/*设置链接颜色*/
}
a:
hover{/*设置鼠标悬停链接的样式*/
color:
#996600;/*设置悬停链接颜色*/
text-decoration:
none;/*链接无修饰*/
}
p{/*设置段落样式*/
margin:
0px;/*外边距为0px*/
padding:
0010px0;/*上、右、下、左的内边距依次为0px,0px,10px,0px*/
}
img{/*设置图片样式*/
border:
none;/*图片无边框*/
}
h1,h3{/*设置h1标题和h3标题共同的样式*/
font-weight:
normal;/*字体正常粗细*/
}
h1{/*设置h1标题独立的样式*/
font-size:
40px;/*设置文字大小为40px*/
color:
#000;/*设置文字颜色为黑色*/
margin:
0030px0;/*上、右、下、左的外边距依次为0px,0px,30px,0px*/
padding:
5px0;/*上、右、下、左的内边距依次为5px,0px,5px,0px*/
}
h3{/*设置h3标题独立的样式*/
font-size:
21px;/*设置文字大小为21px*/
color:
#000;/*设置文字颜色为黑色*/
margin:
0020px0px;/*上、右、下、左的外边距依次为0px,0px,20px,0px*/
padding:
0;/*内边距为0px*/
}
.cleaner{
clear:
both;/*清除所有浮动*/
}
.cleaner_h30{
clear:
both;/*清除所有浮动*/
height:
30px;/*清除浮动后区块的高度为30px*/
}
.cleaner_h40{
clear:
both;/*清除所有浮动*/
height:
40px;/*清除浮动后区块的高度为40px*/
}
.float_l{
float:
left;/*向左浮动*/
}
.float_r{
float:
right;/*向右浮动*/
}
(2)页面顶部的制作
页面顶部的内容被放置在名为header的Div容器中,主要用来显示页面logo和导航菜单,如图7-1所示。
图7-1页面顶部显示效果
(3)页面中部的制作
页面中部的内容被放置在名为content的Div容器中,包括左侧区域和右侧区域。
左侧区域包括水果分类纵向菜单;右侧区域包括公司简介、经营特色和发展规划,如图7-2所示。
图7-2页面中部显示效果
(4)页面底部的制作
页面底部的内容被放置在名为footer_wrapper的Div容器中,用来显示版权信息,如图7-3所示。
图7-3页面底部显示效果
(5)制作页面的网页结构代码
7、实验注意事项
实验用计算机带有还原单元,每次重新启动,系统盘内容都会还原到初始状态。
8、实验预习要求
上机实验前,应仔细阅读教材、课堂笔记。
上机实验时应带好教材、教学参考书及听课笔记。
9、实验程序要求
该实验最终程序存盘备份,以备以后成绩判定。
实验八制作二级纵向列表模式的导航菜单
1、实验项目名称、学时
制作二级纵向列表模式的导航菜单,2学时
2、实验目的
掌握利用JavaScript进行网页特效的基本设置。
3、实验要求
实验前认真阅读实验指导书,掌握实验原理,熟悉实验任务。
实验时注意观察,认真记录。
实验结束后按规定整理试验用计算机设备。
独立完成实验报告。
4、实验原理
JavaScript是一种行为脚本语言,它是介于Java与HTML之间、基于对象事件驱动的编程语言,它是制作网页行为的标准之一。
在Web标准中,使用HTML设计网页的结构,使用CSS设计网页的表现,使用JavaScript制作网页的特效。
用JavaScript可以创建出运行在多平台和浏览器上的交互行为和效果。
5、实验所用仪器
实验中心学生用计算机。
6、实验步骤和方法
1)建立网页结构。
首先建立一个包含二级导航菜单选项的嵌套无序列表。
其中,一级导航菜单包含4个菜单项,二级导航菜单包含用于实现导航的文字链接。
菜单的初始效果如图8-1所示。
图8-1菜单的初始效果
2)设置菜单的CSS样式。
在设置网页菜单时,一般二级导航是被隐藏的,只有当鼠标经过一级导航时才会触发二级导航的显示,而当鼠标移开后,二级导航又自动隐藏。
在这个设计思路的基础上,接着设计菜单的宽度、字体,以及列表和列表选项的类型和边框样式。
3)添加实现二级导航菜单的JavaScript脚本。
页面预览后的效果如图8-2所示。
图8-2页面预览效果图
7、实验注意事项
实验用计算机带有还原单元,每次重新启动,系统盘内容都会还原到初始状态。
8、实验预习要求
上机实验前,应仔细阅读教材、课堂笔记。
上机实验时应带好教材、教学参考书及听课笔记。
9、实验程序要求
该实验最终程序存盘备份,以备以后成绩判定。
展开阅读全文
相关搜索