html网页设计实验报告.docx

《html网页设计实验报告.docx》由会员分享，可在线阅读，更多相关《html网页设计实验报告.docx（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、html网页设计实验报告 HTML页面设计 一、实验名称：静态网页制作 二、实验目的与要求： 1掌握Dreamweaver软件的使用。 2掌握html语言中的表格和框架等的使用。 3掌握web应用开发技术的基础语言-html语言。 三、程序设计思想 1、基本框架的构建 整个页面先分出上中下3个部分，其中先分出上下两个部分，再将下面部分分为中与下，然后将中间位置分为左右两部分，再将左边分为左中两部分，左边再分为上下，右边也为上下。左的上位皇马，下位巴萨，中间为最新一些消息，只是添加了链接，右边分为上下。即为相关视频以及助攻榜。代码如下： 2、顶部页面top部分 在BODY里用backgroud属

2、性将图片嵌入到里面，具体源代码如下： 3、左上部页面皇马部分 该页面主要是皇马的一些简介，运用到一个表格，代码如下： align=center银河战舰 II 投票支持皇马 皇马主帅 背景只是用了一个黑色为背景色 代码如下： 坐下与坐上代码类似，就不举出了。 需要提出的是：图片上我添加了链接，链接到腾讯的相关信息上了。代码如下： href= /team.aspx?l ega=liga&teamid=357 这句表示：SRC后的图片链接到HREF所写出的网站上。 点击这个图片则会跳转到相应网站上 4、中间页面是最近的一些体育新闻，只是添加的链接： 代码如下： href= /a/20220416/0

3、00329.htm C罗最新进球 其他链接均类似 5、右边代码上面是一些精彩视频，这个我已放在相应位置。 代码如下： 1.C 罗精彩视频 其他类似， 右边是一些链接：代码与上面类似。 图片实例： 收获与体会 通过本次实验，我掌握了很多html语言的标记和属性以及它们的基本用法，还有就是运用到了CSS代码背景，由于书上没有相关介绍，没有搞的很清楚，他是在下方加的，代码如下： body background-image: url(附属信息/eb2a02d3252a57caa8ec9a74.jpg); background-position:top; background-attachment: f

4、ixed; background-repeat: no-repeat; /style 其中background-image相当于BODY中的backgroud，意为背景。background-position为图像位置。 background-attachment为图像展开类型:如平铺，background-repeat为是否重复，no-repeat意为不重复. 通过这次的学习，激发了我对网页设计的兴趣，同时也使我明白了只有勤动手才能掌握这门课程。 存在问题：搞不明白能不能用一幅完整图片作为整个网页的背景，无视框架。这个也做了相应的验证，发现在框架的代码中，相应BODY 里去添加背景是不会显示的，而且也不能用到CSS代码。宁可累死在路上，也不能闲死在家里！宁可去碰壁，也不能面壁。是狼就要练好牙，是羊就要练好腿。什么是奋斗？奋斗就是每天很难，可一年一年却越来越容易。不奋斗就是每天都很容易，可一年一年越来越难。能干的人，不在情绪上计较，只在做事上认真；无能的人！不在做事上认真，只在情绪上计较。拼一个春夏秋冬！赢一个无悔人生！早安！献给所有努力的人