使用Photoshop制作网页效果图研究报告.ppt

网页设计与制作 胡雪梅 浮动框架是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，显示页面的内容。浮动框架可以插入到页面中的任意位置，不过遗憾的是，在Dreamweaver CS3中不能可视化地制作浮动框架，需要用手写代码的方式来实现。 如果需要在页面中创建一个浮动框架，需要先制作好页面的其他内容，再在页面中以手写代码的方式插入浮动框架的代码。浮动框架的代码如下所示： iframe src=网页地址 height=400 width= 200 name=aaa /iframe 制作浮动框架页面 浮动框架中也可以制作框架之间的链接，先给框架name属性命名，再添加代码指向目标框架。 a href= target= aaa /a ★ 课堂实践 ★ 制作下图网页，该网页使用表格布局，在右下角单元格使用了浮动框架，请为左框架文字目录添加链接，链接目标在浮动框架中显示。 使用Photoshop制作网页效果图 可以利用Photoshop制作网页效果图。为了不让浏览网页的人等的时间太长，或添加一些Photoshop无法实现的功能，就要对Photoshop设计的网页进行“切片”，使用切片可以有效地提高页面的下载速度。 “切片”工具是Photoshop通向Dreamweaver的桥梁 。 课程引导 课堂实例：使用Photoshop制作长盛公司主页 1 打开PhotoShop新建一个文件，参数如图： 2 建立4个水平参考线分别为150px、300px、 450px、800px，垂直参考线为100px、900px。 10 将图片进行切割，可以在网上传输更快。 切图的一些基本操作： 选择“切片工具”，点击“基于参考线的切片”按钮，可以按参考线切割图片。 使用“切片工具”从切片1的左上角开始，按住鼠标左键到切片2的右下角，可以完成切片1和切片2的合并。 使用“切片工具”,按住Ctrl键单击切割线可以选中切片框，通过拖动切割线可以添加或删除切割线，通过拖动切片框可以移动切片框的位置。 切图的一些基本操作： 选择“切片工具”，右击切片选择 “编辑切片选项”，如右图所示，可以为该切片添加链接。 在完成切片后，即可将切片导出。切片导出的方法是：执行“文件”→“存储为Web所用格式”命令，在打开的对话框中可对导出的切片进行设置（保存类型：HTML和images。 可在Dreamweaver中打开网页文件进行编辑。 切片原则和常见问题： 1．切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。 2．在Dreamweaver 中进行编辑时，应尽量少用图片，如果能用背景颜色代替的就使用背景颜色。 3．在Dreamweaver中进行编辑时，如果删除图片时出现表格错位，可以在删除图片的时候记住图片的长宽，再插入一个相同长宽的表格。 * 网页设计与制作 胡雪梅 *