网页制作基础知识

1、网页制作基础知识网页制作基础知识张志平苏州大学网络中心网页的实质u网页相当于刊物中所发表的一篇篇文章，但与纸上的文章相比，它增加了多媒体信息和网上交互的功能。u网页的实质 = 表格+文本+图片+动画+声音+超级链接+网站的实质u网站相当于发行到全世界的期刊。u网站的实质 = 服务器上的文件夹u主页相当于期刊的封面。u主页的实质 = 打开网站的第一个网页网页和网站的分类u网页现在可分为静态网页和动态网页两大类，由此，网站也可以相应被称为“静态网页网站”或“动态网页网站”什么是静态网页、动态网页?u所谓静态网页，指的是网页从服务器传到客户端时，网页的内容是“固定不变”的，也就是说，服务器只是把所存

2、储的网页的内容原封不动直接传递给客户端浏览器，这种网页一般是标准的HTML代码。什么是静态网页、动态网页?u 所谓动态网页，它在由服务器传递给客户端的时候必须由服务器把它转换成相应的HTML格式，而且会根据用户的要求和选择在在服务器端做出相应的改变和响应。u动态网页一般要用专门的脚本语言编写，如ASP、ASP.NET、PHP、JSP等等。制作静态网页的工具 用HTML语言直接编写 用WORD编写 用Dreamwaver编写 用Frontpage编写 制作静态网页的工具u图片编辑工具：图片编辑工具：PhotoshopPhotoshop、FirworksFirworks等；等；u动画制作工具：动画

3、制作工具：FlashFlash、SwishSwish、Cool 3dCool 3d等；等；u还有网页特效工具：有声有色、网页特效梦工还有网页特效工具：有声有色、网页特效梦工厂等厂等。静态网页与word文本有何不同？u我们在用word写文章时，由于word排版功能强大，我们只要定义好行距、分栏和图片插入方式，就可以实现图文混排。u但html语言却没有这样强大的图文混合排版能力，甚至连定义行距的功能都不够理想。所以一切网页上的对象，都要装入页面的表格之中，才能精确定位。这就是两种文本制作时最大的不同。静态网页(站)制作的一般步骤u网页（站）规划u制作主页及超级链接u制作二级页面及超级链接u申请站点

4、域名和空间u上传发布全部网页u定期更新维护，每次更新都要重新制作一大批网页静态网页制作的具体步骤方法一方法一u使用Photoshop制作一个页面的图片；u将制作好的图片进行“切片”，并保存为网页方式；u用Dreamwaver对生成网页进行编辑。静态网页制作的具体步骤方法二方法二u使用Photoshop制作需要的图片；u在Dreamwaver中创建页面，在相应的位置插入图片，并编辑文字等。静态网页制作的具体步骤方法三方法三u使用Photoshop制作需要的图片；u在Word中进行编辑，插入相应的图片，将编辑好的文档另存为HTML格式；u用Dreamwaver对生成网页进行编辑。Photoshop

5、Photoshop使用简介使用简介常用网页图片文件的格式有两种：GIF和JPG。一般情况下，GIF文件多用于单一颜色块而没有渐变色的图片，或者需要设置透明区域的图片，或者动画图片；JPG文件则用于要求质量较高的图片。PhotoshopPhotoshop使用简介使用简介u网页制作工具很多，Photoshop是一个很不错的选择。利用Photoshop制作网页的一般步骤是：PhotoshopPhotoshop使用简介使用简介PhotoshopPhotoshop使用简介使用简介工具箱 在Photoshop CS3中，为了让用户能拥有更大的工作区域，Photoshop程序开发者将工具箱设计为可折叠的，用

6、户只需单击顶部的双向箭头按钮，即可将工具箱在单排和双排效果间切换。默认状态下，工具箱以单排形式放置在工作界面的左侧。 PhotoshopPhotoshop使用简介使用简介调板 调板位于程序窗口右侧，它们浮动于图像的上方，不会被图像所覆盖。与以前版本不同的是，Photoshop CS3中的调板被设计为可伸缩型的，用户只需单击调板右上角的双箭头按钮，调板将转变成精美的图标，再次单击双向箭头按钮，即可恢复默认状态。 PhotoshopPhotoshop使用简介使用简介调板 调板位于程序窗口右侧，它们浮动于图像的上方，不会被图像所覆盖。与以前版本不同的是，Photoshop CS3中的调板被设计为可伸

7、缩型的，用户只需单击调板右上角的双箭头按钮，调板将转变成精美的图标，再次单击双向箭头按钮，即可恢复默认状态。 PhotoshopPhotoshop使用简介使用简介DreamwaverDreamwaver使用简介使用简介插入栏 “插入栏”（如图所示）包含用于将各种类型的“对象”，如图像、表格和层等插入到文档中的按钮。每个对象都是一段HTML代码，允许在插入它时设置不同的属性。 DreamwaverDreamwaver使用简介使用简介编辑窗口状态栏DreamwaverDreamwaver使用简介使用简介u不要忘记加入网页的titletitle是显示在浏览器标题栏的文字，在网页下载时，它是最先出现的

8、，所以你可以用它提示网页的主要内容，或者写些欢迎的话 u将首页命名为index.htm这是规定，没什么好多说的，哪页一旦被你取名叫index.htm以后，等你把你的整个homepage上传了以后，它就是别人用你的网址看到你网站的第一页 DreamwaverDreamwaver使用简介使用简介u将所有文件的文件名统一格式用英文字母，如都为英文小写。u图片应使用.gif和.jpg(jpeg)格式这是两种位图文件格式，在同样的视觉清晰度下，文件量往往比其他文件格式小，也就是说在网上下载的时候时间会更短，一般从网上下载的图片不用考虑这个问题 DreamwaverDreamwaver使用简介使用简介u只

9、有在一段结束的时候用回车换行，其他时候不要能用enter（回车）换行，若一定要要断开一行用shift+enter（软回车）换行 u用链接连接各个页面建议这步最后做，先将各个页面的其它部分做好 DreamwaverDreamwaver使用简介使用简介网页制作注意事项网页制作注意事项u要沉稳，不要花里胡哨。自助网站制作的人往往喜欢猎奇，弄一些不必要的乱七八糟的东西，比如弹出窗口啦、脚本代码啦、很大的图片啦，等等。u要素净、大气，不要五彩缤纷。要注意在一个自助网站的页面里不要用色太杂。要确定一个颜色主调，再搭配一两种反差不太大的颜色即可。正文文字的大小要基本统一，文字的颜色也不要红红绿绿。不要认为如何制作网页的关键是以大文字和鲜艳的色彩来强调很多意思，实际上使人眼花缭乱，什么都强调不了，也很不大气。网页制作注意事项网页制作注意事项u要有个性、有风格，要突出行业的特点。比如娱乐业可以热烈一些、活泼一些，政府网站则要庄重一些；收藏、书画业要古朴典雅，策划、时装业则要前卫一些。u一个网页不要太长，一般两屏到三屏就可以了。在同一个网