网页设计操作帮助.docVIP

9.2 设计操作方法 1. 创建“99张三”文件夹及子文件夹“images” 操作： （1）在E盘中新建一个“99张三”文件夹（以便存放网页文件、存放站点文件夹） （2）在“99张三”文件夹中，新建一个“images”子文件夹，作为存放图片之用。 2. 现场采集图片 C．在Photoshop中调整图像 打开图像（通常是“﹡.JPEG”）→ 菜单栏中“图像”→“图像大小”→ 去掉“( 约束比例”前面的“√”→ 调整“宽度”、“高度”的像素值大小（如logo的“宽”为“200px”、高为“70px”；→【确定】→ 返回编辑状态 → 文件 →“存储为”→ 在“存储为”对话框中修改：文件名为“logo”→“类型”为“CompuServe.GIF（﹡.GIF）”→ 找到“images”文件夹 →【保存】→ 弹出“索引颜色”对话框 →【确定】→ 弹出“GIF选项”对话框 → 选中“( 正常”→【确定】→ 返回编辑状态 → 此时图片占用的资源大小约为几个KB数量级。 然后我们就可以回到Dw网页编辑状态，编辑网页了。 3．新建站点“zd”，创建网页文件index 操作： （1）启动Dreamweaver → 站点 → 管理站点 →“站点名称”中输入“zd”→ 通过路径找到“99张三”文件夹 → 选择 →【保存】即可。 （2）左边选第四项，右边第一行默认图像文件夹设为Images。好了保存。 （2）右边文件面板上站点名称地方右键，选择新建文件，将新建网页名称改为 “index” 4．设置网页标题、设置网页背景 操作： （1）设置网页标题 菜单栏中“修改”→ 页面属性 → 弹出“页面属性”对话框 → 选择“分类”下方选择倒2个，右边第一行输入标题。 → 然后返回“设计”视图状态。→ 网页标题就设置完成。 （2）设置网页背景 菜单栏中“修改”→ 页面属性 → 弹出“页面属性”对话框 → 选择“分类”下方选择“外观（CSS）”→ 按“背景图像”右边的“浏览”按钮 → 找出“images”文件夹中的“bj.gif”图片并选中 →【确定】→ 返回“页面属性”对话框【确定】→ 背景就被插入网页中了。 5．CSS+Div布局 操作： （1）为方框1新建CSS样式“fk1” 单击“CSS样式”面板的 按钮 → 弹出“新建CSS规则”对话框 → 在对话框中“选择器类型”选择“类（…）”、“选择器名称”中输入“.fk1”、“规则定义”中选择“（仅限该文档）”→【确定】。 弹出“.fk1的CSS规则定义”对话框 → “分类”下方选择“方框”→ 右边“Width”设置为“800”→“Height”设置为“70”→“Padding”（填充，元素内容与盒子边框的距离）下方勾选“( 全部相同”、置“Top”为“2”→“Margin”（边界，用于围绕块元素的间隔值）下方“Right”、“Left”均设置“auto”→【确定】→ 返回编辑状态。 （2）为方框1创建Div标签“bq1” 页面上单击 → 单击插入面板的“插入Div标签”按钮 → 弹出“插入Div标签”对话框（图9-4）→ 在“插入”中选择“在插入点”→“类”选择“fk1”→ 在“ID”中输入“bq1”（用来识别Div标签的名称）→【确定】→ 返回编辑状态 → 此时在页面出现了一个虚线方框，这就是我们在页面中创建的第1个方框。 图9-4 插入Div标签对话框（首个） （3）为方框2新建CSS样式“fk2” 菜单栏中单击“格式”→ CSS样式 → 新建 → 弹出“新建CSS规则”对话框 → 对话框中“选择器类型”选择“类（…）”、“选择器名称”中输入“.fk2”、“规则定义”中选择“（仅限该文档）”→【确定】。 弹出“.fk2的CSS规则定义”对话框 → “分类”下方选择“方框”→ 右边“Width”设置为“800”→“Height”设置为“50”→“Padding”下勾选“( 全部相同”、设置“Top”为“2”→“Margin”下方的“Right”、“Left”均设置为“auto”→【确定】→ 返回编辑状态。 （4）为方框2创建Div标签“bq2” 单击菜单栏的“插入”→ 布局对象 → Div标签 → 弹出“插入Div标签”对话框（参见图9-5）→ 在“插入”中选择“在结束标签之前”→“类”选择“fk2”→“ID”中输入“bq2”→【确定】→ 返回编辑状态 → 此时，页面中紧挨着第1个方框出现了第2个方框。 图9-5 插入Div标签对话框（第2个） （5）为方框3新建CSS样式“fk3” 菜单栏中单击“格式”→ CSS样式 → 新建 → 弹出“新建CSS规则”对话框 → 对话框中“选择器类型”选择“类（…）”、“选择器名称”中输入“.fk3”、“规则定义”中选择“（仅限该文档）”→【确