大连海事大学网站设计(贺琳老师)实验报告.doc

大 连 海 事 大 学 电子商务网站设计 实验报告 分数： 分 专业班号 管信2班 姓名 试验日期 2012/6/20 指导教师 贺琳 第 实验 第 组 实验名称 电子商务网站设计 实验目的与要求 设计并实施一个网站。 网站主题自选，但风格、色彩、布局等需要统一。 要求网站至少由5个页面构成。 页面遵循HTML4.01 或XHTML 1.0 strict 标准。 页面的表现由CSS文件描述。 页面的布局要求用CSS文件描述。 实验内容 页面的文档结构树 div：左浮动，存放图标 div（header） div：右浮动 body div（mainbody）可编辑区域 div：存放图片，使网页更美观 div（footer） div：版权声明区 页面的设计过程： 先将在页面内放入一个大的div,再将该div分解成3个部分div：header，mainbody，footer。 Header部分。Header内上部分有两个div，一个向左浮动，存放图标，并在下面写入“A car@”超链接，如图所示。 还有一个向右浮动，放入一些图片使网页更美观。 导航条：下面用四个div向左浮动，链接相同的css，加入一些图片字和链接。生成导航条。代码如下： div class=b1div align=centerimg src=car_0055A47A.gif a href=page1.html target=_blankimg src=car_SGFE930.gif border=0/a/div /div div class=b1a href=page2.html target=_blankimg src=car_SGF265F.gif height=51 border=0/a img src=car_0057CC16.gif height=25 /div div class=b1a href=page3.html target=_blankimg src=page4_SGFFD81.gif border=0/aimg src=car_0058B858.gif /div div class=b1a href=page4.html target=_blankimg src=page4_SGF34C7.gif border=0/aimg src=car_0058F21C.gif /div 结果如图： mianbody部分：该部分主要用来展示网页主要内容的部分，是转换成模板的可编辑区域。由两个或多个div盒子组成，根据网页的不同而不同。 代码如下（此例是由两个盒子组成的）： div class=b2 div class=b5/div div class=b3 /div /div footer部分：该部分由上下两个大盒子组成，上面的盒子又由多个盒子组成，存放一些商品图片和文字，由于展示商品，使网页更美观。代码如下： div class=b6img src=../imge/982b0b9363ab94ec.jpg width=136 height=102 / p品牌:江淮/p /div div class=b7 /div div class=b6pimg src=../imge/01f61a.jpg width=135 height=104 //pp品牌:宝马/p /divdiv class=b7 /div div class=b6/div div class=b6pimg src=../imge/c2f53d102200e0a5.jpg width=136 height=85 //pp品牌：奔驰/p/div 效果如图： 下面的盒子是版权声明区，只有一个div组成。 代码如下： div class=b8p align=center a href=page0.html@ A CAR./a/p p align=center版权归罗卓雅所有/p p align=center联系电话p/div 5.我还做了一个导航页面，由两个flash和一个链接组成，单击链接后就可以跳转到主页。 实验步骤与结果 这部分描述网站的事实过程和结果 先打开导航页面，单击“进入主页” 跳转到主页，浏览页面，单击导航条上的“品牌”