网页设计操作帮助.doc

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”图片并选中 【确定】 返回“页面属性”对话框【确定】 背景就被插入网页中了。5CSS+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”、“规则定义”中选择“（仅限该文档）”【确定】。弹出“.fk3的CSS规则定义”对话框 “分类”下方选择“方框” 右边“Width”设置为“800”“Height”设置为“300”“Padding”下勾选“ 全部相同”、设置“Top”为“2”“Margin”下方的“Right”、“Left”均设置为“auto”【确定】 返回编辑状态。（6）为方框3创建Div标签“bq3” 单击菜单栏的“插入” 布局对象 Div标签 弹出“插入Div标签”对话框 在“插入”中选择“在结束标签之前”“类”选择“fk3”“ID”中输入“bq3”【确定】 返回编辑状态 此时，页面中紧挨着上面的方框出现了第3个方框。（7）为方框4新建CSS样式“fk4” 菜单栏中单击“格式” CSS样式 新建 弹出“新建CSS规则”对话框 对话框中“选择器类型”选择“类（）”、“选择器名称”中输入“.fk4”、“规则定义”中选择“（仅限该文档）”【确定】。弹出“.fk4的CSS规则定义”对话框 “分类”下方选择“方框” 右边“Width”设置为“800”“Height”设置为“50”“Padding”下勾选“ 全部相同”、设置“Top”为“2”“Margin”下方的“Right”、“Left”均设置为“auto”【确定】 返回编辑状态。（8）为方框4创建Div标签“bq4” 单击菜单栏的“插入” 布局对象 Div标签 弹出“插入Div标签”对话框 在“插入”中选择“在结束标签之前”“类”选择“fk4”“ID”中输入“bq4”【确定】 返回编辑状态 此时，页面中紧挨着第1个方框出现了第2个方框。自此，使用CSS+Div布局方式，完成了具有4个方框的页面布局。6设置网站标志图片、操作：A站标图片设置（图片上有文字时，如有“我的大学”）（1）删除顶部方框中内容 菜单栏中“插入” 表格 弹出“插入”对话框 设置：“行数”为“1”，“列”为“2”，“表格宽度”为“100%”“边框粗细”为“0 像素” “单元格边距”、“单元格间距”均为“0”【确定】。（2）光标置于第1个单元格内 插入logo图片。B设置Custom自定义区域自定义7Navigation导航栏设置操作：（2）删除第2方框的文字 菜单栏“插入” 表格 弹出“表格”对话框（如图9-6） 设置：“行数”为“1”、“列”为“5”“表格宽度”为“100 %”“边框粗细”为“0” 单元格边距、单元格间距都为“0”【确定】（3）设置表格大小 选中全部5个单元格 在属性面板中设置：“水平”、“垂直”都设为“居中”、“高”设为“50”宽为160、 假设在单元格中顺次输入符号和文字“我的母校 校园风景 图书馆 体育馆 与我联系”。（4）设置链接 先后选中各单元格文字 在属性面板的“链接”文本框中设置超链接 （至少三个有效链接，其中第五个超链接到自己的QQ空间）例如：第三个、第四个、第五个分别链接到“”、“”、“自己的QQ空间”（如“http:/641790653.”）。8设置“login”区域和“Content”区域操作：A设置“Link”区域（1）插入表格 删除第3方框中的内容 插入 表格 弹出“表格”对话框 设置： 行数为“1”、列数为“2” 表格宽度为“100 %”、边框粗细为“0 像素” 单元格边距、单元格间距均为“0”。（2）单击左边单元格，宽为250，高为300插入表单插入表格3*2，每行高100第一行中左输入用户名,右插入表单下的文本域，字符宽度改为10第二行中左输入密码,右插入表单下的文本域，类型改为密码，字符宽度