html网页设计实验报告

HTML页面设计一、实验名称：静态网页制作二、实验目的与要求：1．掌握Dreamweaver软件的使用。2．掌握html语言中的表格和框架等的使用。3．掌握web应用开发技术的基础语言-----html语言。三、程序设计思想1、基本框架的构建整个页面先分出上中下3个部分，其中先分出上下两个部分，再将下面部分分为中与下，然后将中间位置分为左右两部分，再将左边分为左中两部分，左边再分为上下，，右边也为上下。左的上位皇马，下位巴萨，中间为最新一些消息，只是添加了链接，右边分为上下。即为相关视频以及助攻榜。代码如下：framesetrows=15%,*cols=*framespacing=0frameborder=noborder=0framesrc=标题.htmlname=topFramescrolling=Nonoresize=noresizeid=topFrametitle=topFrame/framesetrows=*,10%cols=*framespacing=0frameborder=noborder=0framesetrows=*cols=*,30%framespacing=0frameborder=noborder=0framesetrows=*cols=*,60%framespacing=0frameborder=noborder=0framesetrows=*,44%cols=*framespacing=0frameborder=noborder=0framesrc=皇马.htmlname=mainFrameid=mainFrametitle=mainFrame/framesrc=巴塞.htmlname=bottomFrame1scrolling=Nonoresize=noresizeid=bottomFrame1title=bottomFrame1//framesetframesrc=当前新闻.htmlname=rightFrame1scrolling=Nonoresize=noresizeid=rightFrame1title=rightFrame1//framesetframesetrows=*,30%cols=*framespacing=0frameborder=noborder=0framesrc=视频.htmlname=rightFramescrolling=Nonoresize=noresizeid=rightFrametitle=rightFrame/framesrc=友情链接.htmlname=bottomFrame2scrolling=Nonoresize=noresizeid=bottomFrame2title=bottomFrame2//frameset/framesetframesrc=相关信息.htmlname=bottomFramescrolling=Nonoresize=noresizeid=bottomFrametitle=bottomFrame4//frameset/frameset2、顶部页面top部分在BODY里用backgroud属性将图片嵌入到里面，具体源代码如下：bodybackground=图片/27c4e7ae55a6e3cdfaed50cc.jpg3、左上部页面皇马部分该页面主要是皇马的一些简介，运用到一个表格，代码如下：tablewidth=265height=154border=1trtdheight=17colspan=4align=centerspanclass=STYLE3银河战舰II/span/td/trtrtdwidth=88rowspan=3spanclass=STYLE3/aatarget=_blankhref=../Untitled-3.htmlatarget=_blankhref==liga&teamid=357imgsrc=图片/xinsrc_292100109151242314610600.gifwidth=96height=128//a/span/tdtdheight=30colspan=2align=centerspanclass=STYLE3投票支持皇马/span/tdtdwidth=89align=centerspanclass=STYLE3皇马主帅/span/td/trtrtdheight=17spanclass=STYLE3/span/tdtdspanclass=STYLE3/span/tdtdrowspan=2imgsrc=图片/皇马主帅.pngwidth=85height=85//td/trtrtdheight=80spanclass=STYLE3inputtype=submitname=Submitvalue=顶//span/tdtdspanclass=STYLE3inputtype=submitname=Submit2value=踩//span/td/tr/table背景只是用了一个黑色为背景色代码如下：bodybgcolor=#000000坐下与坐上代码类似，就不举出了。需要提出的是：图片上我添加了链接，链接到腾讯的相关信息上了。代码如下：atarget=_blankhref=../Untitled-3.htmlatarget=_blankhref==liga&teamid=357imgsrc=图片/xinsrc_292100109151242314610600.gifwidth=96height=128/这句表示：SRC后的图片链接到HREF所写出的网站上。点击这个图片则会跳转到相应网站上4、中间页面是最近的一些体育新闻，只是添加的链接：代码如下：patarget=_blankhref=罗最新进球/a/p其他链接均类似5、右边代码上面是一些精彩视频，这个我已放在相应位置。代码如下：pahref=附属信息/c罗纳尔多精彩视频.flv1.C罗精彩视频/aahref=c罗纳尔多精彩视频.flv/a/p其他类似，右边是一些链接：代码与上面类似。图片实例：收获与体会通过本次实验，我掌握了很多html语言的标记和属性以及它们的基本用法，还有就是运用到了CSS代码背景，由于书上没有相关介绍，没有搞的很清楚，他是在/title下方加的，代码如下：styletype=text/cssbody{background-image:url(附属信息/eb2a02d3252a57caa8ec9a74.jpg);background-position:top;background-attachment:fixed;background-repeat:no-repeat;}/style其中background-image相当于BODY中的backgroud，意为背景。background-position为图像位置。background-attachment为图像展开类型:如平铺，background-repeat为是否重复，no-repeat意为不重复.通过这次的学习，激发了我对网页设计的兴趣，同时也使我明白了只有勤动手才能掌握这门课程。存在问题：搞不明白能不能用一幅完整图片作为整个网页的背景，无视框架。这个也做了相应的验证，发现在框架的代码中，相应BODY里去添加背景是不会显示的，而且也不能用到CSS代码。