设计与制作-1

网页制作

网站、网页概述Frontpage 2000

网站设计原则、风格与结构网页构图与色彩

Dreamweaver MX 2004



课件制作：龙席强

二零零六年四月

网站设计原则、

风格与结构



网页设计与制作基础



网站设计原则网站的整体风格

网站的层次结构网站的目录及链接结构

网页设计与制作基础

一、HTML概述

HTML是一种页面描述语言，很类似于（如：Word）排版语言。

HTML文本用一些标记来说明段落、标题、图像、字体等。浏览器的责任就是阅读HTML文件，解释其中的各种标记，并以此为依据显示文本的内容。

HTML语言编写的文件称为HTML文本，其文件名后缀为：.html (或：.htm)。

网页设计与制作基础

二、网页设计的基本目标

评价一个网站网页设计的好坏主要包括创意和制作两个部分。

（一）创意要新（二）页面制作★网页设计的要求网页设计与制作基础

二、网页设计的基本目标

返回（一）创意要新网站设计总的目标是：

1．要有好的创意、丰富的内容、新颖的观点，使读者不仅能开阔眼界，还能得到有价值的信息和有益的经验；2．要使页面生动活泼，妙趣横生，导航清晰，使浏览者能够迅速找到希望得到的内容。

网页设计与制作基础

二、网页设计的基本目标

返回（二）页面制作

1．网页结构：结构要清晰，易于导航。简洁是成功的最佳保证。

2．页面内容：网页应以内容为主。3．文字：在以内容为主的前提下，应当尽量把形式与内容结合起来。

4．图形。

网页设计与制作基础

二、网页设计的基本目标

★网页设计的要求

1．良好的视觉效果。

2．站点开发周期尽可能短，网页发布的信息一定要准确。

3．维护更新要方便。

4．商业网页制作的其他应注意的几个问题。

网页设计与制作基础

★网页设计的要求

4．商业网页制作的其他应注意的几个问题。

* 申请既有意义又容易记忆的域名，能令人过目不忘；* 在（每页）固定位置放置公司标志或站点标志；* 在网页的底部使用脚注描述一些相关的信息，如站点网址、与作者或公司联系的E-mail地址、公司的版权声明等，一般使用水平横线将页面主体与脚注分开；* 网页中如果使用其他公司的商标或公司标志，注意不能侵犯版权；* 在网页中一定要注明最后的更新日期（通常工具会自动生成）；* 如果自己的网址发生了变化，一定要在原来的网址处给出变更的信息，以确保与客户联系的持续性。

网页设计与制作基础

三、网页制作工具及其分类网页制作工具按其制作方式，有标记型和“所见即所得”型。

（一）标记型网页制作工具

（二）“所见即所得”型网页制作工具（三）编程型网页制作工具（四）图像处理工具网页设计与制作基础

三、网页制作工具及其分类

返回（一）标记型网页制作工具

HTML是网页制作的基础，也是最基本的工具。使用任何工具制作的网页，最终都要以HTML方式存储在计算机里。

用HTML制作网页无须编程，只要学会使用各种标记即可。HTML具有特别的格式，被Web浏览器解释成可以直接阅读的格式化Web文档。

最具代表性的HTML标记编辑器有：1．HotDog ；

2．HomeSite 。

网页设计与制作基础

三、网页制作工具及其分类

返回具

“所见即所得”(WYSIWYG)是指创建中的文件在编辑过程中的显示与文件最终在浏览器中的显示是一样的，“所见即所得”也称为可视化(Visual)。

1．通用工具——Office套件2．专用工具(1)FrontPage

(2)Dreamweaver

（二）“所见即所得”型网页制作工

网页设计与制作基础

三、网页制作工具及其分类

返回（三）编程型网页制作工具

理论上，所有的程序设计语言均可用来编写网页，而实际上用编程方法制作网页，要采用CGI(通用网关接口)、ASP(活动服务器页面)以及Java 。

1. CGI编程2. ASP

3. Java编程

网页设计与制作基础

三、网页制作工具及其分类

（四）图像处理工具

使用图像处理工具可对图像进行编辑、修饰、优化、图形文件格式转换等处理。

* 图形编辑；* 图像修饰；* 图像优化。1．通用图像处理工具——Photoshop 2．专用图像处理工具——PhotoImpact、Fireworks、PhotoDraw、（Flash）

常用图片格式：GIF、JPEG

网站设计与网页制作

知识储备

我是新手我想了解最基本的网页制作和网站规划知识

网页制作规划网站我了解简单的编程知识我想制作动态网页我想架构各种互动网站

设计与美化网站网站设计与网页配色构架网站服务器个人服务器架设典型网站建设实例ASP+SQL Server组建动态网站JSP+Oracle组建动态网站Dreamweaver、Frontpage基础完整的网站建设体系网站设计原则

想成为一名网页设计方面的专家，仅仅掌握网页设计软件是远远不够的，必须要从观念上、思想上把握网页设计的特点。必须有良好的网站设计概念才能创造出优秀的网站，这是网站制作的核心。

网站创作的灵魂在于站点建设者对网站的规划，网站的风格及网站的概念的理解。

虽然网站的主要目的是给人们传递它的信息，但是与此同时还把它的文化同样也传递给获取这些信息的人们。

网站设计原则

一、网站设计的基本原则

网站的设计基本上是按照一定步骤进行的。仅仅会输入文本，制作超级链接和排列图片，不是真正意义上的网页制作，或者说不能够称为是网页创作。

网页制作最重要的一个原则是：创意。这是网页制作的根本，没有创意的网站不能算是成功的网站，而这样的站点也必将不能长期存在。

网站设计原则

一、网站设计的基本原则

除了创意之外，在网站设计时还需要考虑以下基本原则。

网页内容要便于阅读注重色彩搭配考虑带宽适当考虑不同浏览器、不同分辨率提供交互性站点内容要精、专和及时更新简单即为美

网站设计原则

一、网站设计的基本原则

返回网页内容要便于阅读

网站最大的目的是发布信息，因此网页作为信息的载体就必须要做到便于阅读。便于阅读与查找又不代表把所有重要信息都堆积于首页上，其根本在于科学的分类和组织。

个人网站信息量少，几个超级链接就可以包含；而商业网站的信息量较为庞大，如何有条理地组织信息，放置超级链接，就需要仔细考虑，其中包含“层次”概念。

站点内容的精、专和及时更新，都表现于此。

网站设计原则

一、网站设计的基本原则

返回注重色彩搭配

浏览者的视觉疲劳，网站风格难以统一，都与色彩搭配不协调有关。违背了网站“简单即为美”的原则，势必会影响网站的访问量。

网站设计原则

一、网站设计的基本原则

返回考虑带宽

带宽问题是一个必须要考虑的问题，而且非常现实（网络基础设施差；网间穿梭；个人站点通常不具备个人服务器）。对于这些细节问题的考虑，可以改善网站的访问量，对依靠广告收益为主要收入的站点尤为重要。作为一名网页设计师，要根据访问对象的不同来确定网页的大小（美观而简洁精湛），确保用户能有较高的访问速度，而不至于因为等得不耐烦而放弃访问。

网站设计原则

一、网站设计的基本原则

返回适当考虑不同浏览器、不同分辨率

互联网大，用户广，所用的电脑性能有高低，安装庞大而功能完善（如IE或Netscape）或小巧而简化功能Opera的浏览器之分，采用800×600、1024×768等高或0×480等低不同，各种浏览器支持的网页特性也有一定的差别，脚本语言的跨平台性能好（JavaScript）坏（VBScript）各异。

目前一般设计的分辨率为800×600，并通常显示在网页上提示用户。

网站设计原则

一、网站设计的基本原则

提供交互性

站点的交互性越来越为人们重视，不仅商业站点朝着高交互性方面努力，个人网站也开始通过加强交互性（聊天室、电子论坛、留言板）以赢得访问者。

网站设计原则

二、网站设计的国际专业流程

除上述原则外，网站设计还有一套国际化专业流程，其将整个站点设计过程大体分为八个部分：

(1) 初始商讨；需求、可行性分析阶段(2) 构思、(3) 综合内容、(4) 页面布局和导航；初步设计阶段(5) 图像制作、(6) 内容流程；详细设计阶段(7) 测试、(8) 验收交付。测试、运行阶段网站设计原则

二、网站设计的国际专业流程

内容流程图形制作测试运行初始商讨页面布局综合内容验收交付站点构思内容流程图形制作测试运行验收交付站点构思综合内容初始商讨页面布局……完整的站点制作应是一个不断收集、跟踪调查、确定被访问的内容和用户群、启用、分析站点日志、重新设计、再次开发Web站点的设计过程。

网站的整体风格

★网站风格的概念

整个网站所采用的结构布局、色调、文字、标志、图案等要素带给浏览者的关于该网站的印象。

“创意”实质的综合体现。

浏览“特色”网站，领会网站风格的概念。

网站的整体风格

★网站风格案例

商业站点：

1. Sony2. Sun

MicrosoftUSA3. Microsoft

MicrosoftChina非商业站点：

4. 北京大学

5. 北京电影学院6 . 清华大学个人站点：

7. ViVAGRAPHICS8 . Fictionpixel9.KVAD_v6

网站的整体风格

一、商业网站的共性风格特征

1. 公司的司标出现在页面最醒目的地方；

2. 采用主题图形产品广告来突出公司形象与风格，给浏览者以良好的第一印象；

3. 主要栏目一般采用图文并茂的超级链接实现，主要栏目图片、文字之间的色彩及大小配合要相互衬托；

网站的整体风格

一、商业网站的共性风格特征

4. 不要不分主次地将栏目都显示在同一个页面上。通过站点组织图表示结构布局，或采用可以展开的“目录树”；

5. 商业网站一般都有固定的栏目页面，比如：Support，Service，About us等。它们应位于比较方便用户单击的位置；

6. 必须建立站内搜索引擎，以便浏

网站的整体风格

二、非商业组织网站的风格特征

1. 强调页面的主色调；

2. 主题图形要求反映单位的风采，有创意、有内涵，庄重中不乏活泼；3. 超级链接的分类一定要清晰，可采用图形，必要时可建站内搜索引擎；4. 信息查看板很重要，因更新不如商业网站频繁，始终如一的画面显得枯燥，所以应经常去更新信息查看板。

网站的整体风格

三、个人网站的风格

个人网站的基本风格有三种：

主题图形式信息发布式介于上两者之间的形式这三种个人网站风格的区别主要反映在主页的构图上。

网站的整体风格

三、个人网站的风格

返回主题图形式

最显著的标志是主页有一个醒目的图形，网页作者希望通过它表示一种意境；另一特点就是主页上的超级链接不多，且很少出现大段的文本。

这类网站体现了作者较好的艺术修养，倾向于个性展示。但主题图形增加了网页的体积，网页访问速度会变慢。

网站的整体风格

三、个人网站的风格

返回信息发布式

主要看重网站的信息量，其作者较热衷于贡献信息，因此，往往在网站的主页就出现大量的信息，信息更新较多。网站主题图形基本上采用类似广告条的样式，常被放在网页最上方，目的仅在于提醒浏览者所处的位置。信息发布式网站以提供大量信息为目的，应避免一切华而不实的设计。一般其主页链接相当繁多，还有各种免费邮件入口、会员登记入口、搜索引擎入口、信息反馈表单等，纷繁有序。

网站的整体风格

三、个人网站的风格

介于上两者之间的形式

既想突出个人形象，又想发布大量信息，组织形式不鲜明。初学者应注意一定要让自己的网站简洁，这样便于作者控制网页元素。

个人网站具体采用哪种风格形式，应当按照需要决定。个人网站的网页有一个共同特点，就是栏目间的网页结构相似，可以建立起以一个网页为基准的模板，从而能够快速建立其他网页，这使得管理站点更为省时、省力。

网站的层次结构

★网站的层次的结构概念网站的层次是指首页(一级)和二级、三级页面之间的关系。

无论何种网站，在网页的层次结构存在着一些共同点，即均可用“首页－栏目页－文章页”这三级结构实现。

任何网站都是以这三级结构为基准的。

网站的层次结构

★网站的层次的结构概念

首页的制作将主要是主题图形的制作，以及页面构图，一般不采用制作大量超级链接；

二级页面是每个栏目起始页，该页面应有小而醒目的栏目主题图形，设置明确地通向其他栏目以及返回首页的链接指示；三级页面是文章页，栏目页上超级链接，就是通向大篇幅文本的。文章页包含大量文字，图片不宜安放过多，应把有限的页面空间留给那些无法用文本表现的装饰图片。

网站的层次结构

★网站的层次的结构概念

在三级结构中，同级页面之间、二三级页面之间应严守风格一致，首页与二、三级页面之间的风格基本一致协调即可。

网站的层次结构

★站点结构实例分析

网站的设计概念、网站的整体风格、网站的层次规划，都是网页设计的前提，它们描述了页面与页面之间的关系，是整个网站成功的关键。

就商业、非商业和个人网站各举一例，以体验三级结构在其中所起的作用。

商业站点—IBM公司主站点公共信息站点—菏泽市站点个人网站网站的层次结构

★站点结构实例分析

返回商业站点—IBM公司主站点

IBM网站的主页体现了一般商业网站的设计概念。

点击IBM网站首页的导航栏，进入到二级页面——栏目页；点击各个链接，将看到第三级页面——文章页。

IBM公司的网站结构非常严谨，二级页面和三级页面相互之间的风格统一。

网站的层次结构

★站点结构实例分析

返回公共信息站点—菏泽市站点菏泽市网站是一个非常典型的公共信息站点。整个站点严格按照三级结构进行，可以看到公共信息站点的首页上布满了链接，页面的上部是整个站点的特色栏目，以及最新广告。

在首页单击栏目，进入第二级页面；单击详细的文章名称，进入第三级页面。

在首页单击详细的文章名称，也可进入第三级页面。

网站的层次结构

★站点结构实例分析

个人网站的结构

个人网站的结构特点不尽相同。

◆主题图形式的网站，三级层次结构很突出。

◆信息发布式的网站，层次布局，与公共信息站点相似。

网站作者的E-mail、网站版权信息等都置于的每级页面的最下方。

网站的目录及链接结构

一、站点目录结构的组织

网站的目录是指建立网站时创建的目录。网站的目录结构是一个容易忽略的问题，目录结构的好坏，对站点本身的上传，未来的维护、内容扩充和移植有着重要的影响。

规划目录结构时应当遵循以下几个原则：1．不要将所有文件都存放在根目录下；2．按栏目内容分别建立子目录；3．在每个子目录下都建立的images目录；4．目录的层次不要太深。网站的目录及链接结构

一、站点目录结构的组织

返回

1．不要将所有文件都存放在根目录下将所有文件都放在根目录下，造成的不利影响在于：

* 文件管理混乱；

* 上传速度慢（服务器都会为根目录及其下的文件建立一个文件索引）。所以，应该尽可能减少根目录下的文件存放数。

网站的目录及链接结构

一、站点目录结构的组织

返回

2．按栏目内容分别建立子目录既然要求分散文件，那么就应该按站点内容的主要栏目建立子目录。例如：企业站点可以按公司简介，产品介绍，价格，在线定单，反馈联系等建立相应目录。其他需要经常更新的次要栏目可以建立的子目录；而一些相关性较强，不需要经常更新的栏目等，可以合并放在一个统一目录下。

网站的目录及链接结构

一、站点目录结构的组织

返回

3．在每个子目录下都建立的

images目录

默认的，每个站点根目录下都有一个images目录；经过实践发现，为每个主栏目建立一个的images目录是最方便管理的，而根目录下的images目录只是用来放根目录下的页面和一些通用栏目的图片。

网站的目录及链接结构

一、站点目录结构的组织

4．目录的层次不要太深

如前两所述，除目录的层次建议不要超过三层外，其他需要注意的还有：

切忌使用中文目录；不要使用过长名的目录；尽量使用意义明确的目录。

网站的目录及链接结构

二、站点链接结构的组织

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。

研究网站链接结构的目的在于：用最少的链接，使得浏览最有效率。

建立网站链接结构有两种方式：1．树形链接结构(一对一)

2．星形链接结构(一对多)

网站的目录及链接结构

二、站点链接结构的组织

1．树形链接结构(一对一)

类似DOS的目录结构，首页链接指向二级页面，二级页面链接指向三级页面。

这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，不会“迷”路；缺点是浏览效率低，要进行栏目跳转时，必须绕经首页。

网站的目录及链接结构

二、站点链接结构的组织

2．星形链接结构(一对多)

每个页面相互之间都建立有链接。优点是浏览方便，随时可以目标页面；缺点是链接太多，容易迷路。

实际的网站设计中，总是将这两种结构混合起来使用。

最好的办法是：首页和二级页面之间用星形链接结构，二级和三级页面之间用树形链接结构。

网站的目录及链接结构

二、站点链接结构的组织

财经新闻1三级页面财经新闻二级页面财经新闻3三级页面财经新闻2三级页面…….站点首页体育新闻二级页面…….世界新闻二级页面…….网站的目录及链接结构

一、站点链接结构的组织

需要注意的是，在这个例子中用的是三级页面。当站点内容庞大，分类明细，需要超过三级页面，那么建议在页面里添加导航条，可以帮助浏览者明确自己所处的位置。类似：“您现在的位置是：首页－财经新闻－市场信息－北京－”

关于链接结构的设计，在实际的页面制作中是非常重要的一环，采用怎样的链接结构将直接影响到版面的布局；在链接结构确定后，再开始考虑链接的效果和形式，是采用下拉表单，还是用动态菜单等。

层次、目录及链接关系

★层次、目录及链接结构关系实例

兴趣站点主页喜好站点相册层次、目录及链接关系

★层次、目录及链接结构关系实例层次结构：站点信息的组织形式目录结构：站点信息在计算机中的存储位置

链接结构：站点信息互相联系的机制

层次结构是目录结构、链接结构的基础。

网站设计原则、

风格与结构



网页设计与制作基础



网站设计原则网站的整体风格

网站的层次结构网站的目录及链接结构

网站设计与

网页制作

网站、网页概述Frontpage 2000

网站设计原则、风格与结构网页构图与色彩

Dreamweaver MX 2004



课件制作：龙席强

二零零六年四月