网页制作基础知识要点.ppt

* * 网页制作基础知识 张志平 苏州大学网络中心 zpz@suda.edu.cn 网页的实质 网页相当于刊物中所发表的一篇篇文章，但与纸上的文章相比，它增加了多媒体信息和网上交互的功能。 网页的实质 = 表格+文本+图片+动画+声音+超级链接+…… 网站的实质 网站相当于发行到全世界的期刊。 网站的实质 = 服务器上的文件夹 主页相当于期刊的封面。 主页的实质 = 打开网站的第一个网页 网页和网站的分类 网页现在可分为静态网页和动态网页两大类，由此，网站也可以相应被称为“静态网页网站”或“动态网页网站” 什么是静态网页、动态网页? 所谓静态网页，指的是网页从服务器传到客户端时，网页的内容是“固定不变”的，也就是说，服务器只是把所存储的网页的内容原封不动直接传递给客户端浏览器，这种网页一般是标准的HTML代码。 什么是静态网页、动态网页? 所谓动态网页，它在由服务器传递给客户端的时候必须由服务器把它转换成相应的HTML格式，而且会根据用户的要求和选择在在服务器端做出相应的改变和响应。 动态网页一般要用专门的脚本语言编写，如ASP、ASP.NET、PHP、JSP等等。 制作静态网页的工具 用HTML语言直接编写 用WORD编写 用Dreamwaver编写 用Frontpage编写 …………………… 静态网页制作工具 制作静态网页的工具 图片编辑工具：Photoshop、Firworks等； 动画制作工具：Flash、Swish、Cool 3d等； 还有网页特效工具：有声有色、网页特效梦工厂等。 静态网页与word文本有何不同？ 我们在用word写文章时，由于word排版功能强大，我们只要定义好行距、分栏和图片插入方式，就可以实现图文混排。 但html语言却没有这样强大的图文混合排版能力，甚至连定义行距的功能都不够理想。所以一切网页上的对象，都要装入页面的表格之中，才能精确定位。这就是两种文本制作时最大的不同。 静态网页(站)制作的一般步骤 网页（站）规划 制作主页及超级链接 制作二级页面及超级链接 申请站点域名和空间 上传发布全部网页 定期更新维护，每次更新都要重新制作一大批网页 静态网页制作的具体步骤 方法一 使用Photoshop制作一个页面的图片； 将制作好的图片进行“切片”，并保存为网页方式； 用Dreamwaver对生成网页进行编辑。 静态网页制作的具体步骤 方法二 使用Photoshop制作需要的图片； 在Dreamwaver中创建页面，在相应的位置插入图片，并编辑文字等。 静态网页制作的具体步骤 方法三 使用Photoshop制作需要的图片； 在Word中进行编辑，插入相应的图片，将编辑好的文档另存为HTML格式； 用Dreamwaver对生成网页进行编辑。 Photoshop使用简介 常用网页图片文件的格式有两种：GIF和JPG。一般情况下，GIF文件多用于单一颜色块而没有渐变色的图片，或者需要设置透明区域的图片，或者动画图片；JPG文件则用于要求质量较高的图片。 Photoshop使用简介 网页制作工具很多，Photoshop是一个很不错的选择。利用Photoshop制作网页的一般步骤是： Photoshop使用简介 标题栏 菜单栏 工具箱 状态栏 图像窗口 工具属性栏 调板 Photoshop使用简介 工具箱 在Photoshop CS3中，为了让用户能拥有更大的工作区域，Photoshop程序开发者将工具箱设计为可折叠的，用户只需单击顶部的双向箭头按钮，即可将工具箱在单排和双排效果间切换。默认状态下，工具箱以单排形式放置在工作界面的左侧。 Photoshop使用简介 调板 调板位于程序窗口右侧，它们浮动于图像的上方，不会被图像所覆盖。与以前版本不同的是，Photoshop CS3中的调板被设计为可伸缩型的，用户只需单击调板右上角的双箭头按钮，调板将转变成精美的图标，再次单击双向箭头按钮，即可恢复默认状态。 Photoshop使用简介 调板 调板位于程序窗口右侧，它们浮动于图像的上方，不会被图像所覆盖。与以前版本不同的是，Photoshop CS3中的调板被设计为可伸缩型的，用户只需单击调板右上角的双箭头按钮，调板将转变成精美的图标，再次单击双向箭头按钮，即可恢复默认状态。 Photoshop使用简介 Dreamwaver使用简介 插入栏 菜单栏 代码区 设计区 属性区 面板组 插入栏 “插入栏”（如图所示）包含用于将各种类型的“对象”，如图像、表格和层等插入到文档中的按钮。每个对象都是一段HTML代码，允许在插入它时设置不同的属性。 Dreamwaver使用简介 编辑窗口 状态栏 Dreamwaver使用简介 不要忘