Photoshop在网页制作中应用.pptx

,单击此处编辑母版标题样式,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,网页中的元素有很多，像,Banner,条、文本框、文字、版权、,Logo,、广告等。尽量把这些相对独立的元素放在不同的图层中，这样方便以后的再编辑。,图层多时，可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮，从弹出菜单中选择”新建组”，在随后出现的对话框中为新建组取一个名称，确定即可。建组名称依据可依照,css,对版块的布局名称来命名。如头部文件可建立立一个,header,组，在,header,中建立,banner logo,等常用的组。,点击图层组前面的小三角，就可以像文件夹一样展开或折叠它。对同一组中的所以图层可以方便地进行统一操作，如整体移动，复制、删除、隐藏、合并等。,一、用,Photoshop,制作网页模板切片,如果要合并而且不影响以后修改，可以尝试盖印图层。具体操作时在所有图层上面新建空白图层，然后使用快捷键,+,盖印可见图层到新建的图层。,如果你想借鉴某个网页的设计，不妨把它截成图片放在最下面的图层中，再拉出多个参考线划出网页的大致版式，再在此基础之上边参考边制作自己的网页。,小提示：,1,、使用切片是最直白的网页布局方法。不要再想如何去设计表格，也不要想什么,DIV,，你首先要想的是你的网页要做成什么样子？把你所想的,画,出来就行了,!,2,、使用切片可以有效地减小页面文件的大小，提高浏览者浏览页面的体验。想想看是把一个图片完整下载下来快，还是把一个图片分成若干个小图同时下载快呢,？,二、为什么要使用切片？,1,、打开你设计好的,PS,图，选择切片工具,三、如何切片？,2,、按网页的结构和图片的特点进行切片 切片的大小和位置可以通过切片选项来进行调整,3,、选择文件菜单 另存为,WEB,格式命令，保存时会生成,index.html,图片文件会存放在,images,文件夹中,(CS3,要选择存储为,html,和图片,),4,、使用,Dreamweaver,软件打开刚刚保存生成的,html,文件进行编辑，删除不必须的图片和进行内容的填充。,1,、,切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。,2,、对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来,3,、在,DW,中进行编辑时，少用图片，如果能用背景颜色代替的就使用背景颜色，能使用图案的也尽可能使用图案平铺来形成背景,四、切片原则,1,、在,photoshop,中设计网页大小如何确定？,800*600,我一般宽会设成,780px,，,1024*768,宽度会设成,1000px,，高度当然要看内容多少来定。布局就不好说了要看设计者的喜好、习惯、网站的功能、设计风格来定了。,2,、在,dreamweaver,中如何看到从,photoshop,中到导出的网页是如何布局的？,从,Photoshop,中导出的页面已经自动用表格划分好了，你可以在屏幕上方的工具栏选择到布局一项，之后在右边选择扩展模式，这样就能看见表格了。,五、常见问题,3,、在,DW,中进行编辑时，删除图片时出现表格错位如何办？,删除图片的时候记住图片的长宽，再插入一个相同长宽的表格。,4,、在,DW,中如何自定义表格的长宽？使用表格长宽一样的图片做为单元格的背景。,5,、如何在图片上输入文字？把图片设置成背景。,