《dreamweavercs5第二次课剖析》由会员分享，可在线阅读，更多相关《dreamweavercs5第二次课剖析（17页珍藏版）》请在金锄头文库上搜索。
1、网页制作实例 Dreamweaver CS5,张露萍 812383669 教育科学学院,网页制作,1.建立站点 （1）首先把我们即将用到的素材“心灵小站”文件夹复制到D盘。 （2）单击站点新建站点命令，弹出建立站点的向导，在弹出的对话框中输入站点的名字“心灵小站”，单击完成新建站点。,网页制作,2.网页布局 （1）制作网页上部,网页制作,Step1：插入一个7行1列、宽1000像素、“边框粗细”、“单元格边距”和“单元格间距”均为0的表格(称为表格1)，对齐方式“居中对齐”。 Step2：将光标放在第一行中，在插入面板中的“常用”选项中，单击图像图标，在弹出的对话框中找到心灵小站文件夹下的im
2、ages文件夹，选择“index_01.gif”图像，单击确定。 Step3：将光标放到第二行中，单击“属性检查器”中的“拆分”按钮，将设计视图切换到拆分视图，在文档 窗口上方显示代码，这时我们找到光标所在的位置，使用方向键往左移，将其移到标签中，然后按空格键，这时会弹出一个代码列表，双击background代码，出现浏览图标，然后在站点文件夹中找到“ index_03.gif”图片，单击确定。这时我们会看到图片横向铺满整个单元格。,网页制作,Step4：仍将光标放置在第二行，选择拆分图标，将其拆分为两列，将插入点放在第2行第2个单元格，在插入面板中的“常用”选项中，单击图像图标，选择“ind
3、ex_05.gif”图像，单击确定，并设置为“右对齐”。 Step5：将插入点置于表格1第3行，在属性检查器中设置其高为5像素，然后单击“文档工具栏”中的“拆分”按钮，在文档窗口上方显示代码，将表格3对应单元格中的空格符号“ ”删除，以使表格按照指定的高度显示，回到“设计”视图。,网页制作,（2）制作网页中部 本例中的首页中部主要是一些栏目精华，是由2个大表格中嵌套多个小表格组成的,网页制作,Step1：将插入点置于表格1的第4行，插入一个1行2列，宽1000像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格2， 并设置对齐方式为“居中对齐”。将光标放在表格
4、2的第一列中，设置其宽度为720像素，“垂直”设为“顶端”，将光标放在表格2的第二列中，“垂直”设为“顶端”。 Step2：在表格2的第一列中插入一个1行1列，宽714像素，“边框粗细为1”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格3，然后单击“文档工具栏”中的“拆分”按钮，在文档窗口上方显示代码，在选中的代码中，将光标放置到border=“1“后，按空格键，这时会弹出一个代码列表，双击bordercolor代码，出现颜色选项，设置边框颜色“#CCCCCC”，回到“设计”视图，垂直设为“顶端”。,网页制作,Step3：在表格3的第一列中插入一个3行1列，宽714像素，“边框粗
5、细”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格4。 Step4：将光标放在表格4的第一行中，设置其背景图片为“index_09.gif”操作方法和刚刚所讲述的设置背景图像的方法一样。然后将光标放置在第二行，选择拆分图标，将单元格拆分为两列。将光标放在第一列中，设置宽度20；将光标放在第二列中，插入图像“t_11.gif”。 Step5：将光标放在表格4的第2行中，插入一个1行6列，宽714像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格5，将每个单元格的宽设为119，高设为100，水平设为“居中对齐”。,网页制作,Step6：新建CSS样式。格式
6、CSS样式新建（命名为“.line”）设置方框：宽86像素，高86像素；设置边框：“样式（style）”实线（solid），“宽度（width）”1像素，“颜色”#CCCCCC。 Step7：将光标放在表格5的第1列，在插入面板中的常用工具栏中，选择“插入Div标签”，选择“类”“line”，插入图像“p1.jpg”，使用此方法插入这6张图像。 Step8：将光标放在表格4的第3行中，插入一个1行6列，宽714像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格6，居中对齐，将每个单元格的宽设为119。 Step9：新建CSS样式。格式CSS样式新建（命名为“.lis
7、t”）。设置类型：“大小” 12像素；“行高” 22像素；“颜色”为#666666。,网页制作,Step10：将鼠标放在表格6的第1列中，“水平”居中对齐，复制文字，选择类“.list”，用此方法插入6段文字。 Step11：将鼠标放在表格2的第2列中，插入一个1行1列，宽274像素，“边框粗细为1”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格7，对齐设置为右对齐，并通过切换到拆分视图设置边框颜色bordercolor为“#CCCCCC”。 Step12：将光标放在表格7中，设置水平垂直为顶端，插入一个2行1列，宽274像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的
8、表格-表格8，在表格8的第一行中，将图片“index_09.gif”设置为背景图像。然后将该单元格拆分单元格为两列。将光标放在第一列中，设置宽度20；将光标放在第二列中，插入图像“t_13.gif”。,网页制作,Step13：将光标放在表格8的第2行，插入文字，并为其设置项目符号，然后应用类list。然后进行预览，如果其高度相差很多，就通过手动进行调整。 Step14：将光标放在表格1的第5行，插入一个1行3列，宽1000像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，称为表格9，设置对齐为居中对齐，然后分别设三个单元格宽为440、280、280，垂直为“顶端”。 Step15
9、：将鼠标放在表格9的第1列中，插入一个1行1列，宽434像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，称为表格9，边框设为1，边框颜色“#CCCCCC”，垂直“顶端”。,网页制作,Step16：在表格9中插入一个2行1列，宽434像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，将光标放在表格9的第1行，将图片“index_09.gif”设置为背景图片。然后将该单元格拆分为两列。将光标放在第一列中，设置宽度20；将光标放在第二列中，插入图像“t_15.gif”（这个模块的制作过程与“本站公告”相同），略。 Step17：打开“text”文件夹中的“图片滚动代码.
10、txt”文件,并选择“”至“”这段代码。将其粘贴在的后面就可以。这一步实现了对图片大小，滚动位置、滚动速度的控制。,网页制作,Step18：在表格1的第6行中插入一个1行1列，宽1000像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，称为表格10。 Step19：.选择表格10，将光标放在表格中。此时查看代码编辑区内的光标的位置。当找到代码编辑区的光标后，按“回车”空行，在“图片滚动代码.txt”文件中选择后半部分代码，将其粘贴在光标所在位置的代码编辑区内。 Step20：在文本编辑区内，选择刚才插入表格，发现表格里面有三张灰色的图片，此时选择第一张，并双击，打开一个对话框。在
11、这个对话中选择要插入的图片。如在这里我们选择pp6.jpg格式的图片，然后选择确定。第二、第三张插入图片的方法一样。,网页制作,（3）制作网页下部 相对网页上部和中部来说，网页下部的制作相当简单。,网页制作,Step1： 在表格1的最后一行插入一个1行2列，宽1000像素，“边框粗细”、“单元格 边距”和“单元格间距”均为0的表格，对齐方式“居中对齐。 Step2：将插入点放在第1个单元格，单击“属性”面板上“垂直”中选“底部”，插入图像“ index_14.gif。 Step3：将插入点放在第2个单元格，插入图像“index_13.gif”，并设置为“右对齐”。,网页制作,3.插入背景音乐 Step1：将光标放在表格11的第一列图片的上方，单击窗口行为菜单，打开行为面板，单击按钮，在下拉菜单中选择“播放声音”，在弹出的播放声音对话框中单击浏览，选择需要的音频，单击确定。 Step2：选中插件，在属性检查器中单击参数，在弹出的对话框中可以看到四个参数，其中LOOP是指循环播放，“autostart”是指自动播放，“hidden”是指隐藏插件，将各个参数的值改为true，单击确定。,谢谢欣赏！,
