Dreamweaver CS5第二次课.ppt

网页制作实例—— Dreamweaver CS5 张露萍 812383669@ 教育科学学院 网页制作 1.建立站点 （1）首先把我们即将用到的素材“心灵小站”文件夹复制到D盘。 （2）单击站点——新建站点命令，弹出建立站点的向导，在弹出的对话框中输入站点的名字“心灵小站”，单击完成新建站点。 网页制作 2.网页布局 （1）制作网页上部 网页制作 Step1：插入一个7行1列、宽1000像素、“边框粗细”、“单元格边距”和“单元格间距”均为0的表格(称为表格1)，对齐方式“居中对齐”。 Step2：将光标放在第一行中，在插入面板中的“常用”选项中，单击图像图标，在弹出的对话框中找到心灵小站文件夹下的images文件夹，选择“index_01.gif”图像，单击确定。 Step3：将光标放到第二行中，单击“属性检查器”中的“拆分”按钮，将设计视图切换到拆分视图，在文档 窗口上方显示代码，这时我们找到光标所在的位置，使用方向键往左移，将其移到td标签中，然后按空格键，这时会弹出一个代码列表，双击background代码，出现浏览图标，然后在站点文件夹中找到“ index_03.gif”图片，单击确定。这时我们会看到图片横向铺满整个单元格。 网页制作 Step4：仍将光标放置在第二行，选择拆分图标，将其拆分为两列，将插入点放在第2行第2个单元格，在插入面板中的“常用”选项中，单击图像图标，选择“index_05.gif”图像，单击确定，并设置为“右对齐”。 Step5：将插入点置于表格1第3行，在属性检查器中设置其高为5像素，然后单击“文档工具栏”中的“拆分”按钮，在文档窗口上方显示代码，将表格3对应单元格中的空格符号“nbsp”删除，以使表格按照指定的高度显示，回到“设计”视图。 网页制作 （2）制作网页中部 本例中的首页中部主要是一些栏目精华，是由2个大表格中嵌套多个小表格组成的 网页制作 Step1：将插入点置于表格1的第4行，插入一个1行2列，宽1000像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格2， 并设置对齐方式为“居中对齐”。将光标放在表格2的第一列中，设置其宽度为720像素，“垂直”设为“顶端”，将光标放在表格2的第二列中，“垂直”设为“顶端”。 Step2：在表格2的第一列中插入一个1行1列，宽714像素，“边框粗细为1”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格3，然后单击“文档工具栏”中的“拆分”按钮，在文档窗口上方显示代码，在选中的代码中，将光标放置到border=1后，按空格键，这时会弹出一个代码列表，双击bordercolor代码，出现颜色选项，设置边框颜色“#CCCCCC”，回到“设计”视图，垂直设为“顶端”。 网页制作 Step3：在表格3的第一列中插入一个3行1列，宽714像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格4。 Step4：将光标放在表格4的第一行中，设置其背景图片为“index_09.gif”操作方法和刚刚所讲述的设置背景图像的方法一样。然后将光标放置在第二行，选择拆分图标，将单元格拆分为两列。将光标放在第一列中，设置宽度20；将光标放在第二列中，插入图像“t_11.gif”。 Step5：将光标放在表格4的第2行中，插入一个1行6列，宽714像素，“边框粗细”、“单元格边距”和“单元格间距”均为0的表格，我们称其为表格5，将每个单元格的宽设为119，高设为100，水平设为“居中对齐”。 网页制作 Step6：新建CSS样式。格式—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样式—新建（命名为“.list”）。设置类型：“大小” 12像素；“行高” 22像素；；“颜色”为#666666。 网页制作 Step10：将鼠标放在表格6的第1列中，“水平”居中对齐，复制文字，选择类“.list”，用此方法