一、实验目的
通过对“儿童教育的网站制作与实现”网页制作的结构设计、调试、连接、巩固、加深并扩大所学的理论知识，培养基本理论分析，解决实际问题的能力，逐步掌握网页的设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实求是的科学作风。
二、实验要求
通过本课程的学习，了解电子商务的基本知识，掌握上网技巧，网上操作及网页制作；能够创建一个企业的电子商务站点，使用Dreamweaver创建漂亮的站点，高效的管理Web内容和站点结构；培养具备较强的逻辑思维能力和独立思考能力。
三、实验设备
586以上计算机和Macromedia软件。
四、实验原理、方法
上机操作。
五、实验步骤
1、启动Dreamweaver CS3，执行【站点】/【管理站点】/【新建】命令，打开【站点设置】对话框。在弹出的【站点设置】对话框中设置站点名称为my web。然后“下一步”按钮。


2、在对话框中选择是否使用服务器技术。此处中“否，我不想使用服务器技术”单选项。然后“下一步”按钮。

3、在文本框中输入文件存储的路径，或单击“浏览”按钮，在弹出的对话框中选择将站点文件保存在服务器的什么位置。然后“下一步”按钮。

4、在该对话框中“您如何连接到远程服务器”。此处中“无”选项。然后“下一步”按钮。

5、在该对话框中，单击【高级】选项，分类【本地信息】，默认图像文件夹：E\dw\my web\image。然后“确定”按钮。弹出“管理站点”中，单击“完成”按钮。

6、执行“文件/新建”命令，新建一个HTML文档，并执行“文件/保存”命令，将文档保存为“儿童教育的网站制作与实现”。单击“CSS样式”面板上的“附加样式表”按钮，弹出“附加外部样式表”对话框，然后单击“浏览”按钮，选择需要的外部CSS样式表文件“style/ccc.css”,再单击“确定”按钮，链接外部样式表文件，最后执行“文件/保存”命令，保存页面。




7、单击“插入”工具栏上的“表格”按钮，在工作区中插入一个1行1列，“表格宽度”为870像素，“边框粗细”、“单元桥边距”、“单元格间距”均为0的表格。


8、在该单元格中插入一个1行1列，“表格宽度”为870像素。将光标移至刚刚插入的表格的第1列单元格中，并在该单元格中插入图像“1888.gif”。

9、将光标移至刚刚插入的表格的第1行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个3行1列，“表格宽度”为174像素，“边框粗细”、“单元格边距”、“单元格间距”均为0的表格。将光标移至刚刚插入的表格的第1行单元格中，并在该单元格中插入图像“17102.gif”。

10、将光标移到第3行单元格中，并在该单元格中插入图像“17104.gif”。将光标移至第2行单元格中，并在“属性”面板上的“CSS样式”下拉列表中选择样式表bg17101应用，设置“高”为104，然后单击“插入”工具栏上的“表单”选项卡中的“表单”按钮，在该单元格中插入一个空白表单域。

11、将光标移至刚刚插入的表单域中，单击“插入”工具栏上的“表格”按钮，在该表单域中插入一个3行1列，“表格宽度”为140像素。选中刚刚插入的表格，设置“对齐”属性为“居中对齐”，并在代码视图中将表单的红色虚线框隐藏，其页面效果。将光标移至刚刚插入的表格的第1行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个2行2列，宽度为140像素。

12、将光标移至刚刚插入的表格的第1行第1列单元格中，并在“属性”面板上的“样式”下拉列表中选择样式表font01应用，设置“宽”为40，“高”为25，并在该单元格中输入文本。将光标移至第1行第2列单元格中，单击“插入”工具栏上的“表单”选项卡中的“文本字段”按钮，在该单元格中插入一个文本字段。选中刚刚插入的文本字段，在“属性”面板上的“类”下拉列表中选择样式表bk1701应用。使用相同的方法，完成其他单元格部分的制作。

13、将光标移至上级表格的第2行单元格中，设置“高”为25，然后单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个1行2列，“表格宽度”为140像素。将光标移至刚刚插入的表格的第1列单元格中，设置“宽”为70，并在该单元格中插入图像“17105.gif”。将光标移至第2列单元格中，设置“水平”属性为“右对齐”，然后单击“插入”工具栏上的“表单”选项卡中的“图像域”按钮，在该单元格中插入图像域“17106.gif”。

14、将光标移至上级表格的第3行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个1行4列，“表格宽度”为140像素。将光标移至刚刚插入的表格的第1列单元格中，设置“宽”为20，“高”为25，“水平”属性为“居中对齐”，然后单击“插入”工具栏上的“表单”选项卡中“复选框”按钮，在该单元格中插入一个复选框图。将光标移至第2列单元格中，并在“属性”面板上的“样式”下列表中选择样式表font02应用，然后在该单元格中输入文本。将光标移至第3列单元格中，设置“宽”为20，“水平”属性为“居中对齐”，在该单元格中插入图像域“17207.gif”。将光标移至第4列单元格中，并在“属性”面板上的“样式”下列表中选择样式表font02应用，然后在该单元格中输入文本。

15、将光标移至上级表格的第2行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个3行1列，“表格宽度”为174像素。将光标移至刚刚插入的表格的第1行单元格中，设置 “水平”属性为“居中对齐”，在该单元格中插入图像域“17208.gif”。将光标移至第2行单元格中，设置 “水平”属性为“居中对齐”，在该单元格中插入图像域“17209.gif”。

16、将光标移至上级表格的第3行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个3行1列，“表格宽度”为155像素。选中刚刚插入的表格，设置 “水平”属性为“居中对齐”。将光标移至刚刚插入的表格的第1行单元格中，并在该单元格中插入图像域“17210.gif”。将光标移至第2列单元格中，设置“高”为74，然后单击“插入”工具栏上的“表格”按钮，在该表单域中插入一个1行3列，“表格宽度”为155像素。

 
17、将光标移至刚刚插入的表格的第1列单元格中，设置“宽”为31，并在该单元格中插入图像域“17211.gif”。将光标移至第2列单元格中，设置“背景颜色”值为#F9ECD5。将光标移至第3列单元格中，设置“宽”为10，并在该单元格中插入图像域“17212.gif”。将光标移至第2列单元格中，并在“属性”面板上的“样式”下列表中选择样式表font03应用，再在该单元格中输入文本。

18、将光标移至上级表格的第3行单元格中，单击“插入”工具栏上的“表单”按钮，在该单元格中插入一个空白的表单域。将光标移至刚刚插入的表单域中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个2行1列，“表格宽度”为155像素，并在代码视图中将表单的红色虚线框隐藏。

19、将光标移至刚刚插入的表格的第1行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个5行2列，“表格宽度”为155像素。将光标移至刚刚插入的表格的第1行第1列单元格中，设置“宽”为31，“高”为22，“水平”属性为“居中对齐”，然后单击“插入”工具栏上的“表单”选项卡中的“单选按钮”，在该单元格中插入一个单选按钮。将光标移至第1行第2列单元格中，并在“属性”面板上的“样式”下列表中选择样式表font04应用，再在该单元格中输入文本。

20、使用相同的方法，制作出其他单元格部分，其页面效果。将光标移至上级表格的第2行单元格中，单击“插入”工具栏上的“表格”按钮，在该表单域中插入一个1行2列，“表格宽度”为155像素。

21、将光标移至刚刚插入的表格的第1列单元格中，设置“高”为34， “水平”属性为“居中对齐”，然后单击“插入”工具栏上的“表单”选项卡中的“图像域”按钮，在该单元格中插入图像域“17113.gif”。将光标移至第2列单元格中，设置“水平”属性为“居中对齐”，并在该单元格中插入图像域“17214.gif”。将光标移至上级表格的第4行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个2行1列，“表格宽度”为155像素。

22、将光标移至刚刚插入的表格的第1行单元格中，设置“高”为25。将光标移至第2行单元格中，并在“属性”面板上的“CSS样式”下拉列表中选择样式表bg17102应用，设置“高”为110，“垂直”属性为“顶端”。单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个3行1列，“表格宽度”为155像素。

23、将光标移至刚刚插入的表格的第1行单元格中，设置“高”为42。将光标移至第2行单元格中，单击“插入”工具栏上的“表单”选项卡中的“表单”按钮，在该单元格中插入一个空白的表单域。将光标移至刚刚插入的表单域中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个1行2列，“表格宽度”为138像素。选中刚刚插入的表格，并在代码视图中将表单的红色虚线框隐藏。

24、将光标移至刚刚插入的表格的第1列单元格中，设置“宽”为99，然后单击“插入”工具栏上的“表单”选项卡中的“文本字段”按钮，在该单元格中插入一个文本字段。选中刚刚插入的文本字段，并在“属性”面板上的“类”下拉列表中选择样式表bk17102应用。将光标移至第2列单元格中，单击“插入”工具栏上的“表单”选项卡中的“图像域”按钮，在该单元格中插入图像域“17116.gif”。

25、将光标移至上级表格的第3行单元格中，设置“高”为30，“水平”属性为“居中对齐”，并在该单元格中插入图像“17217.gif”。将光标移至上级表格的第5行单元格中，设置 “水平”属性为“居中对齐”，并在该单元格中插入图像“17218.gif”。

26、将光标移至上级表格的第2列单元格中，设置“垂直”属性为“顶端”，然后单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个2行1列，“表格宽度”为650像素。

27、将光标移至刚刚插入的表格的第1行单元格中，单击“插入”工具栏上的“Flash”按钮，在该单元格中插入Flash动画“Fla17102.swf”。

28、将光标移至第2行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个1行2列，“表格宽度”为650像素。

29、将光标移至刚刚插入的表格的第1列单元格中，设置“宽”为390，然后单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个2行1列，“表格宽度”为390像素。

30、将光标移至刚刚插入的表格的第1行单元格中，设置“高”为160，然后单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个2行1列，“表格宽度”为370像素。

31、将光标移至刚刚插入的表格的第1行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个1行4列，“表格宽度”为370像素。将光标移至刚刚插入的表格的第1列单元格中，并在该单元格中插入图像“17120.gif”。使用相同的方法，在其他单元格中插入相应的图像。



32、将光标移至上级表格的第2行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个5行1列，“表格宽度”为370像素。将光标移至刚刚插入的表格的第1行单元格中，并在“属性”面板上的“样式”下拉列表中选择样式表font05应用，设置“高”为20，然后在该单元格中输入文本。使用相同的方法，制作其他单元格。


33、将光标移至上级表格的第2行单元格中，并在“属性”面板上的“样式”下拉列表中选择样式表bg17103应用，设置“高”为421，“垂直”属性为“顶端”，然后单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个6行1列，“表格宽度”为302像素。选中刚刚插入的表格，设置“对齐”属性为“居中对齐”，其页面效果。

34、将光标移至刚刚插入的表格的第1行单元格中，设置“高”为70。将光标移至第2行单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个1行2列，“表格宽度”为302像素。将光标移至刚刚插入的表格的第1列单元格中，设置“宽”为84，并在该单元格中插入图像“17225.gif”。将光标移至第2列单元格中，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个4行1列，“表格宽度”为218像素。


35、将光标移至刚刚插入的表格的第1行单元格中，设置“高”为26，并在该单元格中插入图像“17226.gif”。将光标移至第2行单元格中，并在“属性”面板上的“CSS样式”下拉列表中选择样式表font06应用，然后在该单元格中输入文本。


36、将光标移至第3行单元格中，并在“属性”面板上的“CSS样式”下拉列表中选择样式表font2应用，然后在该单元格中输入文本。将光标移至第4行单元格中，设置“水平”属性为“居中对齐”，然后单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个1行3列，“表格宽度”为197像素。使用相同的方法，在刚刚插入的表格中插入相应的图像。


37、将光标移至第3行单元格中，并在“属性”面板上的“CSS样式”下拉列表中选择样式表font2应用，然后在该单元格中输入文本。将光标移至第4行单元格中，设置“水平”属性为“居中对齐”，然后单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个1行3列，“表格宽度”为197像素。使用相同的方法，在刚刚插入的表格中插入相应的图像。

38、根据前面的方法，制作页面上的其他单元格部分。


39、将光标移至上级表格的第3列单元格中，设置“垂直”属性为“顶端”，然后单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个2行1列，“表格宽度”为260像素。

40、将光标移至刚刚插入的表格的第1行单元格中，，单击“插入”工具栏上的“Flash”按钮，在该单元格中插入Flash动画“Fla17103.swf”。

41、将光标移至第2行单元格中根据前面的方法，制作该单元格部分。

42、将光标移至表格，单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个3行1列，“表格宽度”为100%。

43、根据前面的方法，制作页面的版底信息。

44、将光标移至刚刚插入的表格的第1行单元格中，设置“高”为30。将光标移至第3列单元格中，并在“属性”面板上的“CSS样式”下拉列表中选择样式表bk17103应用，设置“高”为100，然后单击“插入”工具栏上的“表格”按钮，在该单元格中插入一个1行2列，“表格宽度”为860像素。

45、利用框架制作如下页面，掌握框架的使用场合、优点和一般的设计步骤表格中插入图片等的步骤及表格设置的一般顺序。

46、运行页面，为文字宝宝风采、成长天地、儿童教育视频、课程设置、联系我们、聆听好友、趣味英语、师生相册、友情链接等添加超级链接,设定不同的目标框架,搞清框架的作用。







47、根据前面的方法，制作页面上的其他单元格部分。

48、完成整个页面的制作后执行“文件/保存”命令，保存页面，并在浏览器中预览整个页面，即可看到页面的效果。

六、实验心得 
  作为网页设计的初学者，我对网页设计非常感兴趣，想设计出一个美观、实用、内容丰富的个人网页。我通过自己动手、动脑，通过网络资源和老师的指导，在不断发现问题和解决问题的过程中学到了很多知识，增强了我的创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我都全身心投入，使我真正学到了网页设计的知识。在本次网页设计中，我不仅学到了很多关于网页设计方面的知识，也从中学会了关于使用网页制作软件方面的知识。在这个过程中，我通过上网搜集资料自学了Dreamweaver网页软件的应用，学会了简单地使用Dreamweaver。在设计过程中也出现了很多的问题，但上网查找、小组讨论等方式，不断地学习、提高，设计出的网页也在不断的进步。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。在这个制作过程中，我学会了面对困难和挑战，但我十分享受这一过程，这是一个能令人感觉到收获的过程，这次的网页制作使我产生很强的成就感。制作网页开始的时候还是兴致勃勃，充满激情的。但是学习内容越来越多，就逐渐感觉有点思维混乱，开始烦躁，失去了当初的那种兴奋的感觉，原来在自己看来是一种乐趣的事情，现在却成了一种负担。但我坚持一步步做下来，到看到成品时，内心得到了强烈的满足感。从中使我感悟到：学习网页制作需要耐心，如果你没有耐心，你就学不会，因为当你碰到问题时，如果不能立刻得到问题的答案，你就可能做不下去了。学习网页制作需要坚持，坚持不断地学习，才能作出理想的作品，才能更加充实自己。