网页制作教案

《网页制作教案》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第一章网页概述在学习制作网页之前，先学习一些网页和网站的基本知识，了解一些常用的网页制作工具和网站设计。本章将网页设计的软件透明化，从网站的主题、结构、风格、布局等讲述一个网站的制作构思。这是从一个最大的范围去讲述网站设计这个主题的。教学重点与难点:网页基础知识网页制作的基本工具网站的目录结构网站的连接结构网站布局1.1网页基础WWW（WorldWideweb），中文称为万维网，简称为3W。Web，直译为网，它的含义是指通过超级链接将各种文档组合在一起。形成一个大规模的信息集合。1、WEB的起源WEB概念的提出：时间（1982年提出）、目的（使世界各地的人们共享研究一个成果）。6920

2、世纪90年代初，WEB得到了迅速发展。多媒体技术等开始在网络上运用，从而打破了传统的纯文本模式。2、Web的特点网页：后缀名通常为.html或.htm（还包括：.aspx、.asp、.php等）的文本文件,可以将不同类型的多媒体信息组合在一个文档中。web页由超文本标记语言（即html）做成。单击浏览器的“查看”->“源文件”菜单可以通过记事本看到网页的html。4、web的结构web页包括的主要元素有：文本、图象、超级链接、导航栏、表格、表单、多媒体和特殊效果等。1.2web的常用术语url：含义、绝对和相对概念；网页：使用html语言所写的文本文件,网页是组成网站的特殊成分，其他文

3、件都需要通过网页才能让浏览者看到或听到。主页：一个网站由若干个html文件（网页）组成。一般情况下，一个网站有一个称为主页的网页，作用是门户和引导。主页是特殊的网页，是这个站点中所有网页文件的起点和交点，也是浏览一个网站的起点。主页应该给出站点的基本信息和主要内容，使浏览者一目了然了解站点的基本主题和主要内容。他们通过超级链接联系起来，由浏览器解读这些文件。691.3网页制作工具网页编辑工具：1.FrontPage2.Dreamweaver网页图象与动画制作工具：网页中的图象和动画要求质量高、存储空间小。1、Flash2、Fireworks3、Photoshop169691.4网站的开

4、发流程1、网站的规划一、确定主题与设计风格：每一类网页都有其特定的目的和独特的风格。在选择题材时，可从下面几个方面进行考虑：1、主题要小而精定位要小，内容要精。2、题材最好是自己擅长或者喜爱的内容3、题材不要太滥或者目标太高美国《个人电脑》杂志PCMagazine评出的2001年度排名前100位的全美知名网站的十类题材，这对于读者进行网站设计，也许有一些参考价值。第一类：网上求职第二类：网上聊天/即时信息/ICQ第三类：网站社区/讨论邮件列表第四类：计算机技术第五类：网页/网站开发第六类：娱乐网站第七类：旅行第八类：参考/资讯第九类：家庭/教育第十类：生活/时尚69二、资料的收集与整理

5、：要围绕主题搜集材料，主要从网上搜集。然后对搜集到的材料去粗取精、去伪存真。三、规划网站：就像设计师设计大楼一样，要先把大楼的图纸做好。规划网站的内容应该包括：栏目的设置、目录结构和网站的风格。(1)、栏目的设置一般的网站栏目安排要注意以下几个方面：1、一定记住要紧扣主题;2、设一个最近更新或网站指南栏目;3、栏目设置不要太多，<=10;4、设一个下载栏目或常见问题回答栏目。栏目实质是一个网站的大纲索引，索引应该将网站的主题明确显示出来。在指定栏目的时候，要仔细考虑，合理安排。(2)、目录结构的设置建立目录结构的一些建议：1、不要将所有文件都存放在根目录下，如：创建images存放图片

6、；2、按栏目内容建立子目录；在设置网站的目录结构时，需要注意的问题有：（1）不要使用中文名字的目录名。（2）不要使用过长的目录名。（3）尽量使用意义明确的目录名，尽量做到“见名知意”。（4）目录的层次不要太多，建议不要超过3层。69(3)、颜色搭配通常的做法是：主要内容文字用非彩色（黑色），边框、背景、图片用彩色。这样页面整体不单调，看主要内容也不会眼花。在网页配色中，要注意的是：不要将所有颜色都用到，尽最控制在三种色彩以内。背景和前文的对比尽最要大，绝对不要用花纹繁复的图案作背景。(4)、网站标志logologo最重要的作用是表达网站的理念、便于人们认识，广泛地用于站点的链接和宣传。

7、Logo的设计原则：以简洁的、符号化的视觉艺术把网站的形象和理念展示出来。(5)、版面布局合理运用空间，让网页疏密有致、井井有条。将网站标志（Logo）、主菜单等最重要的模块放在突出的位置，然后在排放次要的模块（搜索（search）、友情链接（links）、邮件列表（maillist）、计数器（count）、版权（copyright））网站中所有的网页应该保持相同的风格，并有返回首页的链接。(6)、图像的运用网页上的图像要兼顾大小和美观、合理采