网页设计与制作项目教程 教学课件 作者 姜华 精品课程网站设计与制作项目2.pptVIP

项目二 文学社团网站 【项目说明】 本项目是设计一个简单的个人网站，目的是通过完成本项目掌握dreamweaver cs4的基本操作，接触基本的html和css样式，为制作更加复杂的网站做好知识准备。 【技能目标】 掌握本地站点的设置和管理 基本掌握dreamweaver cs4的基本操作 【知识准备】 学习网站站点的建立和管理，学习Dreamweaver CS4的基本操作，学习简单的文本、图像等的基本设置。 项目二 文学社团网站效果图 项目二 文学社团网站 准备1 表格的插入及其属性设置 准备2 编辑表格 准备3 使用表格排版网页 准备4 创建AP div 准备5 编辑AP div层 准备6 使用AP div层排版网页 【项目实施】 任务1 制作“名家手笔”页面 任务2 制作“艺苑博闻”页面 任务3 制作文学社团网站首页 准备1 表格的插入及其属性设置 插入表格 插入表格一般有两种方法： 1）选择“插入”“表格”。 2）在“插入”面板的“常用”类别中，单击“表格”。 准备1 表格的插入及其属性设置 提示/技巧：如果没有明确指定边框粗细或单元格间距和单元格边距的值，则大多数浏览器都按边框粗细和单元格边距设置为 1、单元格间距设置为 2 来显示表格。若要确保浏览器显示表格时不显示边距或间距，请将“单元格边距”和“单元格间距”设置为 0。 准备1 表格的插入及其属性设置 设置表格的属性 选中表格，可以对表格的属性进行设置。如图所示。 在属性标签中，设置相应的参数。 行和列：表格中行和列的数量。 宽：以像素为单位或表示为占浏览器窗口宽度的百分比。 填充：设置单元格内容与单元格边缘之间的距离。 间距：设置单元格之间的间距。 对齐：设置表格在页面中的对齐方式。 边框：设置表格边框的宽度，单位为象素。 类：设置表格的CSS样式。 准备1 表格的插入及其属性设置 设置单元格的属性 当光标单元格内时，可在“属性”面板中设置单元格属性。 水平：指定单元格、行或列内容的水平对齐方式。 垂直：指定单元格、行或列内容的垂直对齐方式。 宽和高：所选单元格的宽度和高度，以像素为单位或按整个表格宽度或高度的百分比指定。若要指定百分比，请在值后面使用百分比符号 (%)。若要让浏览器根据单元格的内容以及其它列和行的宽度和高度确定适当的宽度或高度，请将此域留空（默认设置）。 背景颜色：使用颜色选择器设定指定的单元格的背景颜色。也可以输入一个十六进制的自定义颜色值。 准备2 编辑表格 添加单个行或列 单击某个单元格并执行下列操作之一： 1）选择“修改”“表格”“插入行”或“修改”“表格”“插入列”。在插入点的上面出现一行或在插入点的左侧出现一列。 2）左键单击列标题菜单，然后右键单击，在出现的快捷菜单中选择“表格”“插入行”或“表格”“插入列”。 添加多行或多列 单击一个单元格，选择“修改”“表格”“插入行或列”，完成对话框，然后单击“确定”。 准备2 编辑表格 删除行或列 请执行下列操作之一： 1）单击要删除的行或列中的一个单元格，然后选择“修改”“表格”“删除行”或“修改”“表格”“删除列”。 2）选择完整的一行或列，然后选择“编辑”“清除”或按 Delete。 使用属性面板添加或删除行或列 选择表格，在属性检查器（“窗口”“属性”）中，执行下列操作之一： 1）若要添加或删除行，请增加或减小“行”值。 2）若要添加或删除列，请增加或减小“列”值。 准备3 使用表格排版网页 使用表格排版，应尽量使用表格的嵌套方法，减少对表格的拆分、合并。这是因为表格中的单元格会相互影响，在更改一个单元格的大小时，同时会对其他的单元格造成影响，很难进行灵活控制，而尽量使用表格的嵌套，可以有效减少单元格之间的影响。 【例2.1】 乐从文艺网站的“名家手笔”页面，利用表格排版网页。 提示/技巧：用于排版的表格，可将表格的“填充”、“间距”、“边框”三个值都设为“0”，使边框不可见，便于排版。 准备3 使用表格排版网页 准备4 创建AP div 创建AP div 在快捷工具栏中，单击“插入”“布局”“绘制AP div”按钮，如图所示。 移动鼠标到“文档”窗口，这时鼠标变成“+” 形状，单击鼠标左键并拖动，即创建了层，如图所示。 嵌套层的创建有多种方法，其中的两种是： 1）光标放在当前层中，选择“插入”菜单“布局对象”“AP Div”命令。 2）选择“窗口”菜单“AP元素”，在打开的“AP元素”面板中，按下Ctrl键，将某一层拖动到另一层位置。 准备4 创建AP div AP div的属性 左、上：设置层在页面或在其父层中