web开发实训报告

WEB

开

发

实

训

报

告

系别：XXXXXXXXX 姓名：XXX

班级：XXXXXXXX

学号：XXXXXXXXXXX

WEB开发基础实训：网上书店

一、实训时间：2012年4月9日——2012年4月13日

二、实训地点：2209

三、实训目的：

1、掌握静态网页布局

2、掌握HTML语言的编写

3、熟悉CSS+DIV、JavaScript等网页编辑技术

4、掌握网站子页面制作

四、实训内容：

（一）、首页制作

1、顶部与导航设置

（1）、先建立站点

（2）、创建“网上书店”文件夹，在文件加中创建“images”、“css”等文件夹，根据需要，处理相关的图片并保存到“images”文件夹中。

（3）、打开Dreamweaver软件创建新网页，并将其保存到“网上书店”文件夹中，命名为“index.htm”，然后设置“页面属性”中“网页标题”为“网上书店”，背景色为白色，上、下、左、右边距为0像素。

（4）、在网页中插入表格，具体参数为3行1列，宽为900像素，填充、间距、边框都为0像素。

(5）、将“q.gif”、作为背景图片插入到表格的第1行单元格，并将第一行单元格高度设置为181像素。

(6)、在第一行单元格中嵌套表格，输入导航栏文字。最终效果如图所示。

2、中部左侧页面设置

（1）、将第二行单元格拆分成两列，高度设置为600像素，左侧宽度设置为520像素，右侧宽度380像素。

（2）、在左侧单元格中插入新表格，在底部插入小的图片和文字。填充两个宽为400像素，高为150像素的居中表格，并在表格中插入宽为100像素、高为150像素的图片，在图片右端插入一个 AP

DIVDIV，在DIV里输入文字，可随意移动，好调整。

（3）、在左端底部插入小的图片和文字。然后填充一个三行两列的宽为400像素，高为150像素的居中表格。在表格中输入文字，插入对应图片。为了在图片上插入一个图片。采用在图片上插DIV 的方法，插入三个AP DIVDIV在DIV内插入图片new_icon.gif。（4）、最终效果如图所示

3、中部右侧页面设置

（1）、在右侧单元格中，插入填充图片bullet3.gif并输入文字，接着插入一个宽为330像素，高为150像素的居中表格，在左端插入AP DIVDIV，输入文字好移动，并在表格向右对齐插入宽为120像素、高为80像素图片about.gif，

（2）、接着插入图片border.gif，然后插入小的图片和文字。填充一个六行一列的宽为200像素，高为400像素的向左对齐表格。在表格中输入文字，插入对应图片。为了在图片上插入一个图片。采用在图片上插DIV的方法，插入三个AP DIVDIV在DIV内插入图片promo_icon.gif。

（3）、在右端插入一个填充一个二十二行一列的宽为150像素，高为400像素的向右对齐表格。在表格中输入文字，

（4）、最终效果如图所示

4、底部页面设置

（1）、插入一个三行一列的表格

（2）、在第一行中输入如“首页、联系我们……”的字段，作为尾部术语

（3）、在第二行插入一个书店商标图片，在第三行插入一点小颜色棍型图片调和

（4）、最终效果如图所示

（二）、“书籍”页面的制作

1、创建新网页，并将其保存到“网上书店”文件夹中，命名为“书籍.htm”.

2、在网页中插入表格，具体参数为3行1列，宽为900像素，填充、间距、边框都为0像素。将“q.gif”、作为背景图片插入到表格的第1行单元格，并将第一行单元格高度设置为200像素。然后插入一个AP DIVDIV，在DIV内插入一个名为” 4.swf”的Flash动画。

3、将第二行单元格拆分成两列，左侧宽度设置为150像素，右侧宽度750像素。在左侧单元格中输入相应文字。为了制作专题书栏，插入图片zt.jpg，并在图片上插入五个宽为150像素，高为70像素的AP DIV，相应插入宽为150像素、高为70像素的图片。在左端底部插入小的图片和文字。然后填充一个三行两列的宽为400像素，高为150像素的居中表格。在表格中输入文字，插入对应图片。为了在图片上插入一个图片。采用在图片上插DIV的方法，插入三个AP DIV在DIV内插入图片new_icon.gif。

4、在中部右端，顶端插入一个宽为750像素，高为200像素的图片b1.jpg，想要在其上放置一个动画，于是在图片上插入一个宽为647像素，高为178像素的AP DIV，在DIV内插入Flash动画js.Swf。随后插入图片1f.jpg，接着插入一个宽为700像素，高为150像素的居中表格。下同。

5、制作垂直浮动广告，在页面右端插入一个宽为160像素，高为90像素的AP DIV，在DIV内插入图片fffff.jpg，并将脚本语言jj.js插入DIV代码区中中。

6、最终效果如图所示

（三）、“书籍价格”页面的制作

1、创建新网页，并将其保存到“网上书店”文件夹中，命名为“书籍价格.htm”。

2、在网页中插入表格，具体参数为3行1列，宽为900像素，填充、间距、边框都为0像素。将“q.gif”、作为背景图片插入到表格的第1行单元格，并将第一行单元格高度设置为200像素。

3、将第二行单元格拆分成两列，左侧宽度设置为150像素，右侧宽度750像素。在左侧单元格中输入相应文字。为了制作折扣栏，插入图片ddd.jpg，并在图片上插入三个宽为150像素，高为70像素的AP DIV，相应插入宽为150像素、高为70像素的图片。

4、制作鼠标经过图片，将鼠标定位在要插入图片的位置，选择菜单栏上的插入——图片对象，点击鼠标经过图片，在标题栏里插入图片hsd.jpg和zb.jpg。

5、在中部右端，顶端插入一个宽为750像素，高为245像素的图片b11.jpg，想要在其上放置一个动画，于是在图片上插入一个宽为587像素，高为203像素的AP DIV，在DIV内插入Flash动画556.Swf。随后插入图片01f.jpg，接着插入一个宽为700像素，