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像素，
高为150像素的三行四列的居中表格，相应输入文字和插入图片。
下同。
6、制作时间轴，在页面左端插入一个宽为100像素，高为100像素的AP DIV，在DIV内插入图片lian.jpg，选中窗口中的时间轴，将DIV标签拖入时间轴内，然后右击DIV标签选择记录路径，之后可自由拖动。
7、最终效果如图所示
（四）、“用户注册”页面的制作
1、创建新网页，并将其保存到“网上书店”文件夹中，命名为“用户注册.htm”。
2、在网页中插入宽为900像素、高为700像素的AP DIV，填充、间距、边框都为0像素。
将“q.gif”、作为背景图片插入到 AP DIV。
3、之后，回车插入图片yhzc.jpg。
在图片下端插入一个AP DIV,在AP DIV中插入8行1列的表格，用来设置表单，使用到表单中的文本域、复选框、按钮、和列表框。
4、制作飘动文字效果，插入AP DIV，在AP DIV 中输入文字，选中AP DIV，随后打开代码区，在内输入代码<marquee behavior="scroll" direction="up" scrollamount="8">。
5、最终效果如图所示
五、实训总结：
一周的实训转瞬即逝，在这短暂的时间里，我们在老师的指导和帮助下，对于网页设计与制作有了进一步的了解。
通过这次实训，我学到了很多有价值的东西。
我独立的完成网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。
在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，增加知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。
最后，我感受最深的是：想要最好一个网站，素材和技能都十分重要。
好的素材需要多放面查找资料的，可以从图书、网站和新闻上查找的。
好的技能需要不断的实践，经常锻炼做网页。
如果拥有好的素材和精湛的技能就可以做出最精湛的网页。