H1 网页制作初识.ppt

网页设计与制作实用技术 邹先霞 E-mail: zouxianxia@163.com Shift-phone暨南大学信息学院计算机系 浏览几个网站，对所浏览网站首页的特色和不足进行赏析说明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片效果、动画效果等。从以下网站中选择两个网站进行赏析。 （1）当当购物网站：/ （2）南开大学网站: /index.asp （3）且听风吟文学网：/ （4）叱进军个人网站： （5）携程旅游网： （6）中国体育资讯网： （7）太平洋电脑网： 9．CSS CSS是“Cascading Style Sheet”的缩写，意为 层叠样式表，用于对网页布局、字体、颜色、背景和 其他图文效果实现更加精确的控制。 10．JavaScript JavaScript是一种脚本语言，可以和HTML语言混 合在一起使用，用来实现在一个 Web页面中与用户交 互作用。有关JavaScript的详细内容将在后面讲解。 文字性网页一定要注意编排，包括标题的字型字号，内容的层次样式，是否需要变换颜色进行点缀等。 1.4 网页制作的基本步骤 Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一个图像处理软件，Fireworks能够自由地导入多种格式的图像进行处理。 Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。 2．Fireworks Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。 3．Flash 网站定位要小，内容要精。如果要制作一个包罗万象的站点，把所有精彩的东西都放在上面，结果往往会事与愿违，给人的感觉是没有主题，没有特色，样样有，却样样都很肤浅。 网站的题材最好选自己擅长或者喜爱的内容。兴趣是制作网站的动力，没有热情，很难设计制作出优秀的网站。 1.4.1 网站定位 进行网站的整体规划也就是组织网站的内容和设计其结构。 组织网站的内容可以从两个角度来考虑。从设计者的角度来考虑，可以依据被描述对象的组织机构、类别划分等来组织内容；从浏览者的角度来考虑，就应该将各种素材依据浏览者的需要进行内容分类，以便浏览者可以快捷地获取所需要的信息及其相关内容。 1.4.2 整体规划 合理的结构设计对于网站的规划也是至关重要的。以下是三种常用的结构类型。 ① 层状结构 层状结构类似于目录系统的树型结构， 主 页 页 面 1 页 面 2 页 面 3 ② 线性结构 线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。 主 页 页面1 页面2 页面3 页面4 页面5 页面7 页面8 一级标题 二级标题 页面6 ③ Web结构 Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。 通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等动态内容。静态网页仅仅用来被动地发布信息，而不具有任何交互功能，它是Web网页的重要组成部分。 一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议： （1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。 1.4.3 网页设计与制作 1．静态网页的设计与制作 （2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。 （3）切勿以800×600以上的分辨率设计网页，常用的分辨率是640×480及800×600。现在国内的站点基本上都是800×600，但是如果主要是面向国外访问者的站点，建议使用640×480。 （4