html网页设计实验报告.docx
《html网页设计实验报告.docx》由会员分享,可在线阅读,更多相关《html网页设计实验报告.docx(7页珍藏版)》请在冰点文库上搜索。
html网页设计实验报告
HTML页面设计
一、实验名称:
静态网页制作
二、实验目的与要求:
1.掌握Dreamweaver软件的使用。
2.掌握html语言中的表格和框架等的使用。
3.掌握web应用开发技术的基础语言-----html语言。
三、程序设计思想
1、基本框架的构建
整个页面先分出上中下3个部分,其中先分出上下两个部分,再将下面部分分为中与下,然后将中间位置分为左右两部分,再将左边分为左中两部分,左边再分为上下,,右边也为上下。
左的上位皇马,下位巴萨,中间为最新一些消息,只是添加了链接,右边分为上下。
即为相关视频以及助攻榜。
代码如下:
2、顶部页面top部分
在BODY里用backgroud属性将图片嵌入到里面,具体源代码如下:
3、左上部页面皇马部分
该页面主要是皇马的一些简介,运用到一个表格,代码如下:
银河战舰II
|
投票支持皇马
皇马主帅
|
|
|
背景只是用了一个黑色为背景色
代码如下:
坐下与坐上代码类似,就不举出了。
需要提出的是:
图片上我添加了链接,链接到腾讯的相关信息上了。
代码如下:
这句表示:
SRC后的图片链接到HREF所写出的网站上。
点击这个图片则会跳转到相应网站上
4、中间页面是最近的一些体育新闻,只是添加的链接:
代码如下:
其他链接均类似
5、右边代码上面是一些精彩视频,这个我已放在相应位置。
代码如下:
1.C罗精彩视频
其他类似,
右边是一些链接:
代码与上面类似。
图片实例:
收获与体会
通过本次实验,我掌握了很多html语言的标记和属性以及它们的基本用法,还有就是运用到了CSS代码背景,由于书上没有相关介绍,没有搞的很清楚,他是在下方加的,代码如下:
body{background-image:
url(附属信息/eb2a02d3252a57caa8ec9a74.jpg);
background-position:
top;
background-attachment:
fixed;
background-repeat:
no-repeat;
}
其中background-image相当于BODY中的backgroud,意为背景。
background-position为图像位置。
background-attachment为图像展开类型:
如平铺,background-repeat为是否重复,no-repeat意为不重复.
通过这次的学习,激发了我对网页设计的兴趣,同时也使我明白了只有勤动手才能掌握这门课程。
存在问题:
搞不明白能不能用一幅完整图片作为整个网页的背景,无视框架。
这个也做了相应的验证,发现在框架的代码中,相应BODY里去添加背景是不会显示的,而且也不能用到CSS代码。