网页设计操作帮助

《网页设计操作帮助》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、9.2设计操作方法1.创建“99张三”文件夹及子文件夹“images”操作：（1）在E盘中新建一个“99张三”文件夹（以便存放网页文件、存放站点文件夹）（2）在“99张三”文件夹中，新建一个“images”子文件夹，作为存放图片之用。2.现场采集图片C．在Photoshop中调整图像打开图像（通常是“﹡.JPEG”）→菜单栏中“图像”→“图像大小”→去掉“£约束比例”前面的“√”→调整“宽度”、“高度”的像素值大小（如logo的“宽”为“200px”、高为“70px”；→【确定】→返回编辑状态→文件→“存储为”→在“存储为”对话

2、框中修改：文件名为“logo”→“类型”为“CompuServe.GIF（﹡.GIF）”→找到“images”文件夹→【保存】→弹出“索引颜色”对话框→【确定】→弹出“GIF选项”对话框→选中“正常”→【确定】→返回编辑状态→此时图片占用的资源大小约为几个KB数量级。然后我们就可以回到Dw网页编辑状态，编辑网页了。3．新建站点“zd”，创建网页文件index操作：（1）启动Dreamweaver→站点→管理站点→“站点名称”中输入“zd”→通过路径找到“99张三”文件夹→选择→【保存】即可。（2）左边选第四项，右边第一行默认图像

3、文件夹设为Images。好了保存。（2）右边文件面板上站点名称地方右键，选择新建文件，将新建网页名称改为“index”4．设置网页标题、设置网页背景操作：（1）设置网页标题菜单栏中“修改”→页面属性→弹出“页面属性”对话框→选择“分类”下方选择倒2个，右边第一行输入标题。→然后返回“设计”视图状态。→网页标题就设置完成。（2）设置网页背景菜单栏中“修改”→页面属性→弹出“页面属性”对话框→选择“分类”下方选择“外观（CSS）”→按“背景图像”右边的“浏览”按钮→找出“images”文件夹中的“bj.gif”图片并选中→【确定】→

4、返回“页面属性”对话框【确定】→背景就被插入网页中了。5．CSS+Div布局操作：（1）为方框1新建CSS样式“fk1”单击“CSS样式”面板的按钮→弹出“新建CSS规则”对话框→在对话框中“选择器类型”选择“类（…）”、“选择器名称”中输入“.fk1”、“规则定义”中选择“（仅限该文档）”→【确定】。弹出“.fk1的CSS规则定义”对话框→“分类”下方选择“方框”→右边“Width”设置为“800”→“Height”设置为“70”→“Padding”4（填充，元素内容与盒子边框的距离）下方勾选“þ全部相同”、置“Top”为“2

5、”→“Margin”（边界，用于围绕块元素的间隔值）下方“Right”、“Left”均设置“auto”→【确定】→返回编辑状态。（2）为方框1创建Div标签“bq1”页面上单击→单击插入面板的“插入Div标签”按钮→弹出“插入Div标签”对话框（图9-4）→在“插入”中选择“在插入点”→“类”选择“fk1”→在“ID”中输入“bq1”（用来识别Div标签的名称）→【确定】→返回编辑状态→此时在页面出现了一个虚线方框，这就是我们在页面中创建的第1个方框。图9-4插入Div标签对话框（首个）（3）为方框2新建CSS样式“fk2”菜单

6、栏中单击“格式”→CSS样式→新建→弹出“新建CSS规则”对话框→对话框中“选择器类型”选择“类（…）”、“选择器名称”中输入“.fk2”、“规则定义”中选择“（仅限该文档）”→【确定】。弹出“.fk2的CSS规则定义”对话框→“分类”下方选择“方框”→右边“Width”设置为“800”→“Height”设置为“50”→“Padding”下勾选“þ全部相同”、设置“Top”为“2”→“Margin”下方的“Right”、“Left”均设置为“auto”→【确定】→返回编辑状态。（4）为方框2创建Div标签“bq2”单击菜单栏的“

7、插入”→布局对象→Div标签→弹出“插入Div标签”对话框（参见图9-5）→在“插入”中选择“在结束标签之前”→“类”选择“fk2”→“ID”中输入“bq2”→【确定】→返回编辑状态→此时，页面中紧挨着第1个方框出现了第2个方框。图9-5插入Div标签对话框（第2个）（5）为方框3新建CSS样式“fk3”菜单栏中单击“格式”→CSS样式→新建→弹出“新建CSS规则”对话框→4对话框中“选择器类型”选择“类（…）”、“选择器名称”中输入“.fk3”、“规则定义”中选择“（仅限该文档）”→【确定】。弹出“.fk3的CSS规则定义”对

8、话框→“分类”下方选择“方框”→右边“Width”设置为“800”→“Height”设置为“300”→“Padding”下勾选“þ全部相同”、设置“Top”为“2”→“Margin”下方的“Right”、“Left”均设置为“auto”→【确定】→返回编辑状态。