网页制作备课教案.doc

PAGE PAGE 70 第一章 网页概述 在学习制作网页之前，先学习一些网页和网站的基本知识，了解一些常用的网页制作工具和网站设计。本章将网页设计的软件透明化，从网站的主题、结构、风格、布局等讲述一个网站的制作构思。这是从一个最大的范围去讲述网站设计这个主题的。 教学重点与难点: 网页基础知识 网页制作的基本工具 网站的目录结构 网站的连接结构 网站布局 1.1 网页基础 WWW（World Wide web），中文称为万维网，简称为3W。Web，直译为网，它的含义是指通过超级链接将各种文档组合在一起。形成一个大规模的信息集合。 1、WEB的起源 WEB概念的提出：时间（1982年提出）、目的（使世界各地的人们共享研究一个成果）。 20世纪90年代初，WEB得到了迅速发展。多媒体技术等开始在网络上运用，从而打破了传统的纯文本模式。 2、Web的特点 网页：后缀名通常为.html或.htm（还包括：.aspx 、.asp 、.php等）的文本文件,可以将不同类型的多媒体信息组合在一个文档中。 web页由超文本标记语言（即html）做成。单击浏览器的“查看”-“源文件”菜单可以通过记事本看到网页的html。 4、web的结构 web页包括的主要元素有：文本、图象、超级链接、导航栏、表格、表单、多媒体和特殊效果等。 1.2 web的常用术语 url：含义、绝对和相对概念； 网页：使用 html语言所写的文本文件,网页是组成网站的特殊成分，其他文件都需要通过网页才能让浏览者看到或听到。 主页：一个网站由若干个html文件（网页）组成。一般情况下，一个网站有一个称为主页的网页，作用是门户和引导。主页是特殊的网页，是这个站点中所有网页文件的起点和交点，也是浏览一个网站的起点。主页应该给出站点的基本信息和主要内容，使浏览者一目了然了解站点的基本主题和主要内容。他们通过超级链接联系起来，由浏览器解读这些文件。 1.3 网页制作工具 网页编辑工具：1. FrontPage 2. Dreamweaver 网页图象与动画制作工具：网页中的图象和动画要求质量高、存储空间小。 1、Flash 2、Fireworks 3、Photoshop 1 1.4 网站的开发流程 1、网站的规划 一、确定主题与设计风格：每一类网页都有其特定的目的和独特的风格。 在选择题材时，可从下面几个方面进行考虑：1、主题要小而精定位要小，内容要精。2、题材最好是自己擅长或者喜爱的内容3、题材不要太滥或者目标太高 美国《个人电脑》杂志PC Magazine评出的2001年度排名前100位的全美知名网站的十类题材，这对于读者进行网站设计，也许有一些参考价值。 第一类：网上求职 第二类：网上聊天/即时信息/ICQ 第三类：网站社区/讨论邮件列表 第四类：计算机技术 第五类：网页/网站开发 第六类：娱乐网站 第七类：旅行 第八类：参考/资讯 第九类：家庭/教育 第十类：生活/时尚 二、资料的收集与整理：要围绕主题搜集材料，主要从网上搜集。然后对搜集到的材料去粗取精、去伪存真。 三、规划网站：就像设计师设计大楼一样，要先把大楼的图纸做好。规划网站的内容应该包括：栏目的设置、目录结构和网站的风格。 (1)、栏目的设置 一般的网站栏目安排要注意以下几个方面： 1、一定记住要紧扣主题; 2、设一个最近更新或网站指南栏目; 3、栏目设置不要太多，=10; 4、设一个下载栏目或常见问题回答栏目。 栏目实质是一个网站的大纲索引，索引应该将网站的主题明确显示出来。在指定栏目的时候，要仔细考虑，合理安排。 (2)、目录结构的设置 建立目录结构的一些建议： 1、不要将所有文件都存放在根目录下，如：创建images存放图片； 2、按栏目内容建立子目录； 在设置网站的目录结构时，需要注意的问题有： （1）不要使用中文名字的目录名。 （2）不要使用过长的目录名。 （3）尽量使用意义明确的目录名，尽量做到“见名知意”。 （4）目录的层次不要太多，建议不要超过3层。 (3)、颜色搭配 通常的做法是：主要内容文字用非彩色（黑色），边框、背景、图片用彩色。这样页面整体不单调，看主要内容也不会眼花。 在网页配色中，要注意的是：不要将所有颜色都用到，尽最控制在三种色彩以内。背景和前文的对比尽最要大，绝对不要用花纹繁复的图案作背景。 (4)、网站标志logo logo最重要的作用是表达网站的理念、便于人们认识，广泛地用于站点的链接和宣传。 Logo的设计原则：以简洁的、符号化的视觉艺术把网站的形象和理念展示出来。 (5)、版面布局 合理运用空间，让网页疏密有致、井井有条。将网站标志（Logo）、主菜单等最重要的模块放在突出的位置，然后在排放次要的模块（搜索（search）、友情链接（links）