1、首先打开PS,新建一个页面,将页面的前景色改为灰色,(这样主要是为了后面的颜色可以有对比)。
2、然后点击【视图】【显示】【网格】打开网格。接着选择【编辑】【预设】【参考线与网格】
3、设置网格的参数为:40像素(这里大家要注意一定要记住这个数值,后面的操作有用!)
4、新建一个图层,选择【矩形选框工具】在上部分绘制一个矩形,大小占据5*3网格(注意像素大小为200*120,大家也要记住这个数值),如图:然后将前景色颜色设置为下面参数,按住【Alt+Delete】组合键填充。
5、新建一个图层,选择【文字工具】,字体参数如下:输入“我的经验”,效果如图:
6、接着新建一个图层,用【矩形选框工具】绘制和上面大小一样的矩形在下面。颜色填充为白色。选择【文字工具】,新建图层,字体颜色要选用上面用过的蓝色。文字还是“我的经验”。(这里注意尽量将上下的文字在框中的位置摆放一致)
7、然后我们打开C盘,选择“Inetpub”下的“wwwroot”文件,在这里新建一个“我的站点”的文件夹。(这步一定要执行准确!)
8、在PS中选择【切片工具】,沿着我们刚才的2个矩形框的边缘剪切。(这里就体现了网格的好处),只要把外围剪一遍即可。成功后效果如下:
9、选择【文件】【保存为Web所用格式】,出现如下图:
10、点击右上角的“确定”,弹出对话框,将文件名改为“wdjy”(英文缩写,这里记得一定要改为英文,否则以后在Dreamweav髫潋啜缅er中不好设置),将其保存到我们在第7步中建立的“我的站点”文件夹内。注意保存类型一定为“HTML和图像”。最后点击保存。
11、打开Dreamweaver软件。新建一个文档,然后我们插入一个1行1列,边框为0像素的表格。点击下方的状态栏中,将宽设置为:200像素;高为120像素(注意一定要和PS中选框大小一致),对齐方式为居中。
12、然后我们选择【插入】【图像对象】【鼠标经过图像】,弹出对话框
13、在【原始图像】中选择“浏览”,找到我们的“蓝色白字”切片。(右边可以预览到)确定后在【鼠标经过图像】选择“白色蓝字”切片。最后在【替换文本】中输入内容,确定。
14、回到页面后效果如下:最后我们按下F12键浏览,弹出的对话框中选择“是”
15、浏览后出现下面的情况,这时我们右击选择“允许”,弹出对话框选择“是”
16、最终我们看到当鼠标没有放在图片上时是“蓝底白字”,当鼠标经过图片时变为“蓝字白底”。
17、我在最后还制作了一个自己的经验导航条,大家来欣赏一下吧!