实验 CSS.docx
- 文档编号:6289594
- 上传时间:2023-01-05
- 格式:DOCX
- 页数:14
- 大小:827.87KB
实验 CSS.docx
《实验 CSS.docx》由会员分享,可在线阅读,更多相关《实验 CSS.docx(14页珍藏版)》请在冰豆网上搜索。
实验CSS
实验一HTML语言的熟悉与应用
【实验目的】
通过学习和应用HTML的基本元素,了解并初步掌握静态网页的运行原理及其制作过程。
【实验内容】
建一个左右结构的框架结构,要求如下:
(1)左边要求建立一个目录菜单,菜单的内容为教材书上的第二章的实例名。
要求有不同的弹出方式(_top、_blank)。
(2)右边为单击左边菜单所显示的相应内容。
其形式如下图所示。
【实验代码】
Index.html
DOCTYPEHTML>
--HTTP-equiv类似于HTTP的头部协议,content说明网页的格式是文本的网页模式。
charset说明网页的编码是utf-8-->
Left.html
目录菜单
Frame1.html主要代码
body{
background-color:
#cc6699
}
Frame1
Frame2.html主要代码
body{
background-color:
#33ff99
}
Frame2
Frame3.html主要代码
body{
background-color:
#00ccff
}
Frame2
【实验报告要求】
1.实验目的
2.写出框架主要代码,并分别要求用不同的弹出方式。
3.在浏览器中观察主页运行情况并给出运行界面。
4.切换到HTML代码下,学习掌握各标记的属性及用法,给出相应注释。
5.实验小结,包括实验中遇到的问题及解决方法。
【小技巧】
对于一些生僻的标记属性不必强行记忆,在用到的时候翻一下语法手册,多用几次就会熟练掌握了;刚开始,可以先选择几个不错的网页形式加以模仿,完成自己的主页;看到好的网页,在浏览器的“查看”菜单中选择“源文件”,就可以看到源程序,学习别人制作网页的一些方法和技巧,有时候通过这种办法可以学到书本上没有的东西,一些新功能也可以为你所用,出现在你的主页中。
【实验效果图】
实验二HTML语言的熟悉与应用
【实验目的】
1.使用记事本制作简单网页
2.文本格式标记和表格标记
3.学会使用链接标记和图像标记
【实验任务】
1.在“记事本”中写入简单的HTML语言,设计一个简单网页
2.学会使用HTML语言设计表格,显示学生寝室室友的基本情况
3.加入链接和图像标记,显示寝室室友的照片和邮箱
【实验步骤】
一、使用“记事本”制作网页
1.在桌面上创建学生工作目录(文件夹),命名规则为“学号(10位)+“-”+(实验序号)1”,如“1305110151-1”实验文件夹的名称,如图1所示效果。
图1在桌在建立第一次实验学生工作目录
2.打开“记事本”程序,编入下图2所示的HTML语言,完成后将该文本文件命名为“1-1.htm”,保存到上述对应工作目录中。
3.关闭文档,双击工作目录中的“1-1.htm”文件,显示效果如下图3所示。
图2HTML代码
图3“1-1.htm”网页显示效果
二、文本格式和表格标记
使用HTML语言文本格式标记和表格标记编写一个网页,显示学生寝室室友的学号和姓名。
1.打开“记事本”程序,根据图4样例输入网页内容,并更新其中的学生信息为本人所在寝室或者同学的信息,结束后,以“1-2.htm”保存该文件到上述学生工作目录中,关闭文档。
2.双击“1-2.htm”,效果图如图5所示。
图4HTML代码
图5“1-2.htm”网页显示效果
三、链接标记和图像标记
1.在学生工作目录中建立子目录images,并获取上述网页中提到的同学电子版照片,并通过PhotoShop或者MicrosoftOfficePictureManager将图片尺寸编辑为150(宽)*200(高),单位为px,并按01.jpg、02.jpg的规则进行命名。
2.通过“记事本”程序编写如图6所示的网页HTML源代码。
图6HTML源代码
3.双击“1-3.htm”,效果如图7所示。
图7“1-3.htm”显示效果图
【实验结论】
利用HTML语言设计网页的代码书写是非常麻烦的,通过此练习使学生们可以了解HTML语言的语法特点及基本语句。
【源程序】
DOCTYPEHTML>
【深度表格】
重点在于表格之间的嵌套,格式的控制。
源代码:
.table_index
{
border:
1pxsolid#F6F437;
border-collapse:
collapse;
}
#td_1{
background-color:
#FC0002;
}
#td_3{
background-color:
#808080;
}
#td_5{
background-color:
#007E00;
}
#td_7{
background-color:
#FEFE00;
}
#td_9{
background-color:
#0000FE;
}
table{
;font-size:
12px;
text-align:
center;
}
480px;height: 330px"> 160px;height: 165px">TheTimeis: 2008-3-522: 42: 12(Itcanberefreshpersecond! ) 160px;height: 165px">G.Apple right"> 160px;height: 165px"> 160px;height: 165px"> 160px;height: 165px"> 1pxsolid#000;border-collapse: collapse;width: 160px;height: 165px"> 1pxsolid#000;border-collapse: collapse;background-color: #808080">Square 1pxsolid#000;border-collapse: collapse"background="c85736a822d394907d0d9294ee9bfa03.jpg">Square 1pxsolid#000;border-collapse: collapse"background="c85736a822d394907d0d9294ee9bfa03.jpg">Square 1pxsolid#000;border-collapse: collapse;background-color: #808080">Square 160px;height: 165px"> 1pxsolid#000;border-collapse: collapse;width: 160px;height: 165px"> 1pxsolid#000"> 1pxsolid#000">SmallLine 1pxsolid#000">SmallLine 1pxsolid#000"> 1pxsolid#000">SmallLine 1pxsolid#000">SmallLine 160px;height: 165px"> 160px;height: 165px"> inset;border-left-style: outset">Breakfast inset;border-left-style: outset"> inset;border-left-style: outset">Lunch inset;border-left-style: outset"> inset;border-left-style: outset">Supper inset;border-left-style: outset"> 【代码实现效果图】
VIII.Apple
ix.Apple2 4 6 8
Asp!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验 CSS