第1章网页设计及工具.docx

资源描述

第1章网页设计及工具.docx

《第1章网页设计及工具.docx》由会员分享，可在线阅读，更多相关《第1章网页设计及工具.docx（25页珍藏版）》请在冰豆网上搜索。

第1章网页设计及工具.docx

第1章网页设计及工具

现今，网站已经被越来越多的人所熟识与使用。

构成网站的基本元素是网页，当你轻点鼠标、遨游网络世界时，精彩的网页将一幅幅地呈现于面前，使人们通过网站来发布以及获取相关信息更加地方便。

本章将详细讲解网页设计的基础知识，同时了解有关网页设计的常用工具。

1.1网页设计概述

网站是一个由特定人群和组织控制的一组网页的组合。

网站由众多的网页组成，页面是否精彩，直接关系着网站是否受人们的欢迎。

网页的英文名Homepage，Home在英语中是家的意思，家对每一个人来说代表着温馨、聚集、向往。

如果你在设计网页时能做到、实现这些理念，那就代表着这个网页的设计是成功的。

本章通过讲解，将向大家展示有关网页设计的基础知识及相关概念。

1.1.1网页和网站基础知识

在学习制作网页以前，了解一些基本知识，这对以后的学习是很有帮助的。

网络世界吸引着越来越多的人，因此对网站的需求越来越大。

网站的建设首先需要从网页开始，网页和网站究竟是怎样的呢？

接下来让我们通过了解网页和网站的基础知识，来初步认识它们，为网页和网站的建设与制作铺路开拓。

1．网页和网站的区别

上网的朋友一定经常听到或看到网站、网页这两个词，它们有什么区别呢？

关于网页：

简单来说，大家通过浏览器看到的画面就是网页。

在因特网上应用最广的是网页浏览，浏览器窗口中显示的一个页面称作一个网页，网页可以包括文字、图片、动画以及视频、音频等内容。

网页说具体了是一个HTML文件，浏览器是用来解读这份文件的。

如图1.1所示是一网站页面。

关于网站：

网站是众多网页集合而成的，不同的用户被有组织地连接整合在一起，为浏览者提供更丰富的信息。

网站由域名（domainname又称网址）、网站源程序和网站空间三部分构成。

网站也是信息服务类企业的代名词，如在新浪、搜狐工作的人，也可以说，他（她）在一家网站工作。

如图1.2所示是新浪网站首页的截图。

图1.1某网页示意

图1.2新浪网站首页

2．什么是网页设计与制作

其实网页就是一个HTML文件，我们所要学习的网页设计与制作，就是学习如何编辑这个文件。

多个HTML文件集合而成的内容也就是网站，制作一个网站，也就意味着你需要单独编辑若干个HTML文件。

多个HTML文件需要通过“超链接”进行连接。

3．主页面

一般情况下，一个网站都相应地制作有一个被称作主页（HomePage）的页面，它常常被看作是该网站的大门，起着引导访问者去进入浏览的作用。

同时，网站有些什么内容，更新了什么内容等，都可以通过主页直接被访问者了解。

如图1.3所示是腾讯网的主页。

图1.3腾讯网主页面

1.1.2网站类型

网站有静态和动态之分，根据不同的划分标准，网站被分为好多种类型。

接下来我们通过详细的分析来具体介绍网站的类型，以及在制作网站前如何选择适合的网站类型。

1．网站分类

从所用编程语言不同来划分，网站包括ASP、PHP、JSP、……

掌握一种或者多种网站编程语言，是每个站长都想要完成的，可是掌握一门语言，说起来容易，做起来其实还是有些许困难的。

（1）ASP是最快入门的脚本，安全性太差是它的缺点，其实这也不能怪ASP，因为现在的海洋木马是很难防范的。

（2）PHP的运行效率最高，最大优势是省钱，从操作系统到数据库到脚本，都是免费的，这些正符合了国内对这方面的需要。

因为国外的服务器软件是需要正版的，用ASP要装正版的Windows，PHP的运行环境LINUX+apache+MYSQL免费，LINUX系统相当稳定，MYSQL也比ACCESS好用，PHP唯一的麻烦就是代码不是很好理解，还有很多正则表达式。

但作为网络开发人员来说，确实是一门值得掌握的语言。

（3）可以用VB语言写也可以用C#语言写，根据个人爱好，的开发平台十分强大，VS2005布局可以采用拖拽式，跟Windows平台下的快速开发工具很像，开发机需要装NET框架，我认为确实是ASP的接班人，安全性能也比ASP好，开发比ASP快，稳定性也比ASP好。

现在的当当网、携程网就是采用此架构，鱼塘中的很多小网络公司的开发语言也将会从ASP转到。

从用途不同来划分，包括门户网站、行业网站、娱乐网站等

（1）门户网站，是指通向某类综合性因特网信息资源并提供有关信息服务的应用系统。

门户网站最初提供搜索服务、目录服务，后来由于市场竞争日益激烈，门户网站不得不快速地拓展各种新的业务类型，希望通过门类众多的业务来吸引和留住因特网用户，以至于目前门户网站的业务包罗万象，成为网络世界的“百货商场”或“网络超市”。

如图1.4所示是一综合门户网站——搜狐的截图。

图1.4门户网站载图

（2）行业网站，行业网站即所谓行业门户。

可以理解为“门+户+路”三者的集合体，即包含为更多行业企业设计服务的大门，丰富的资讯信息以及强大的搜索引擎。

“门”，即为更多的行业及企业提供服务的大门。

如图1.5所示是关于行业门户网站——“行业中国”中搜的截图。

（3）娱乐网站，是具有让人追求快乐、缓解压力的。

娱乐网应该具有影视娱乐、八卦新闻、明星娱乐、戏剧等娱乐性服务，还应该包括明星、电影、电视、音乐、戏剧、演出等资讯以及相关实用信息。

如图1.6所示是一娱乐网站的一部分截图。

图1.5行业门户——“行业中国”网站载图

图1.6娱乐网站截图

从持有者不同来划分，包括个人网站、商业网站、政府网站……

（1）个人网站是指因特网上一块固定的面向全世界发布消息的地方，个人网站由域名（也就是网站地址）、程序和网站空间构成，通常包括主页和其他具有超链接文件的页面。

网站是一种通信工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。

个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。

如图1.7所示即是一个人网站。

图1.7个人网站示意图

（2）商业网站首先要考虑网站的定位，以确定其功能和规模，提出基本需求。

里面要考虑的包括网站风格、域名、logo、空间大小、广告位、页面数量、数据库结构、维护需求、人力成本等内容，如果要自己制作的话应多参考别人的东西，如果只是做个策划、具体交给别人做，那就主要确定网站的定位和基本风格要求，与技术人员做好沟通。

如图1.8所示是一商业网站。

（3）政府网站是指一级政府在各部门的信息化建设基础之上，建立起跨部门的、综合的业务应用系统，使公民、企业与政府工作人员都能快速便捷地接入所有相关政府部门的政务信息与业务应用，使合适的人能够在恰当的时间获得恰当的服务。

如图1.9所示是一政府网站。

从商业目的不同来划分，包括营利型网站、非营利型网站等

（1）盈利型网站有增值服务许可证书，也就是说以盈利为目的来作网站的经营、维持以及收入来源的相关网站，都可以将其归为此类。

图1.8商业网站

图1.9政府网站

（2）非盈利型网站没有增值服务许可证书，不以盈利为目的、不以此作为网站收入来源的相关网站，可以归为此类。

2．类型选择

网站按照主体性质不同，可分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其他非盈利机构网站以及其他类型。

按网站模式划分，可分为综合类门户网站、电子商务网站、专业网站等。

以下，通过简要介绍网站的模式，分析有关合适网站类型的选择。

其具体内容如表1-1所示。

表1-1网站分类

网站类型

网站作用

（1）综合类门户类网站

向用户提供的内容较综合，可以适合不同用户的需要，因而网站的访问量很大，但网站的用户群不是很稳定，用户的忠诚度也相对较低。

这类网站必须通过竞争淘汰大部分同类网站，才能立于不败之地

（2）电子商务网站

这类网站主要以网络为手段进行电子贸易，通过电子商务的活动获取利润。

阿里巴巴以及淘宝分别在B2B和C2C领域取得了巨大成功，但B2C领域缺少同等重量级的因特网企业

（3）专业网站

向用户提供的信息服务比较专业、单一，因此网站的访问量远不如综合网站的访问量大，但比较容易拥有忠诚度高的用户。

网站服务独特、竞争不多、用户稳定等特点决定了他们在提供有偿服务方面的优势。

我拉网的在线图片生成便是这一类型网站的典型

通过分析可以看出，没有资金没有技术的小站长是很难做上述类型的网站的，盲目跟风只会让网站犹如石沉大海般不被发现。

但是，在垂直领域的细分上，这些大的网站就显得有些“捉襟见肘”了。

我们不妨从以下这些例子上寻找突破点：

（1）地方性网站

这种网站有地域优势，用户易找到本土归属感而成为忠实用户，然而也由于地理因素，用户数量会受到一定的限制。

但只要做得好的话应该也不错，像厦门小鱼社区人气就非常旺。

（2）小行业网站

行业网站专业性也较强，但大行业基本饱和，小行业人气受限。

举个例子，汽车行业过于偏大，不妨考虑只做新车动态、润滑油等此类较小较专的领域。

（3）熟悉、感兴趣的行业

哪个行业火就跟着做是非常危险的，一旦网站流量达不到预想结果，就很容易产生疲惫、厌弃的心理，这样的网站如何坚持得下去?

做网站就应该像在养孩子，看着孩子慢慢成长，心里才会有成就感。

所以，跟风还不如选择自己熟悉或喜欢的行业，即使效果达不到理想中的状态，但只要看到它有成长，成就感也会油然而生。

（4）根据群体，决定网站类型

这类网站的定位可能会比较模糊，差不多这个群体喜欢的东西都可以涉及，举个例子，你是个文学爱好者，你的目的就是让一群与你有着相同爱好的人们聚集在一起，这样网站的范围就不好界定了，比如你倾向传统文学，于是建了个传统文学交流站，目的是引起人们关于古籍的探讨，增加对中国传统文学的认识，但到后来，慢慢地，你发现你的用户群员的喜爱发生了转变，他们更喜欢历史故事而非那些古籍，这样你的网站就不得不加大历史故事的比例，再后来，他们倾向历史人物介绍、某一朝代兴衰史等等，渐渐地，你的网站可能偏向介绍历史知识类的网站。

1.1.3静态网站制作流程

静态网站的制作相对比较简单，主要可以分4个部分来完成。

1．内容的策划

工欲善其事，必先利其器。

在网站创业前，进行系统的策划是非常必要的。

如果要让网站从大量站点中脱颖而出，就必须进行详细而深入的论证。

（1）确定需要建立什么样的网站

要建立网站，需要先确立站点的定位。

网站的定位和规划完成后，就需要按照这个定位来建立网站，在以后的运营过程中也不能偏离大体的定位。

但是也不能过于死板，整体的细节还需要在建站的实际过程中随时修改。

（2）选择什么样的网站内容

在建立网站之初对网站内容进行定位时，就要开始注意网站内容是否存在风险。

网站的内容风险包括两个方面，一是政策法律的风险，二是站长能否把握内容的风险。

打“擦边球”的网站也是很忌讳的站点类型，网络上目前还存在着不少类似的站点，在网站定位时，一定要避免。

（3）确定用户群体，便于内容“投其所好”

网站要为哪些人提供服务，是在建站之前就应该考虑好的问题。

定位用户群体，同时也是考虑网站的用户需求。

如果将网站针对的人群与站长的实际经历相结合，就能够更好地把握用户心理。

定位关乎网站的发展方向，同时也影响着网站的整体运营。

网站创业能否成功，就要看基本功做得是否扎实。

（4）前期策划决定网站竞争力

网站的成功策划在建站之初非常重要，能让建网者自身对网站有一个正确的认识，让网站富有竞争力。

网站有了方向和目标，才能避免盲目跟风。

因此必须考虑其相关因素：

❑明确网站的基础架构

❑选择合适的建站程序

❑网站的风格，做到布局合理，简洁易用

（5）怎样策划一个好的网站

想要使得一个网站策划得好，被用户所接受，需要考虑下述条件：

❑对于网站栏目的设置

❑对于网站板块的规划

❑对于网站URL的统一

❑对于网站广告位的设置

（6）策划需要注意的事项

在进行内容策划时，除了需要做好日常的制作任务之外，还需要考虑以下几点内容：

❑深入分析同类网站，做到知己知彼

❑考虑网站架构的具体形式，众木成林

❑体现站点特色的风格设计

❑选择合适的软件

❑页面千万不能杂乱

❑体现网站的独特风格

2．图纸的设计

设计图纸是在Photoshop或者Fireworks中把你想做的网站用图片的形式画出来。

Photoshop的灵活多变以及超级强大的功能，完全可以画出绚烂的网页出来。

浏览器的不同——像多窗口浏览器有一个标签栏，就算是IE，常用图标也有大小之分。

因此具体的尺寸是多少，你需要在实际制作过程中自己灵活掌握。

3．网页的切割

网页的切割还是要交给Photoshop或者Fireworks来完成，这里主要是使用它们的切片工具。

这建议大家更多使用Fireworks，因为它专业，也更容易上手。

切割网页就是把图片切割成若干个小图片，其中宽度高度都得自己去掌握去学习。

4．制作网页

网页就是表格加图片加Flash，在完成了内容策划、图纸设计、页面切割之后，我们就可以着手进行网页的制作了。

在本书的具体制作的应用实例，我们都通过DreamweaverCS5来进行相关操作。

当然，用于制作网页的工具远远不止这一些。

1.1.4动态网站制作流程

对于动态网站，因为有脚本语言，所以比较复杂。

同样，要做的工作也就更多了。

主要有以下几方面：

1．整体规划

对于整体规划，可以从以下几方面来进行：

①动态程序语言的确立

大家可以先了解一个语言，ASP、PHP、JSP、CGJ、.NET……一般来说，个人网站的形式为asp+acc数据库和php+mysql数据库。

②网站栏目功能规划

你的网站有哪些栏目？

你的网站实现什么功能？

对这些很现实的问题都需要你事先认真的思考与规划。

③根目录策划

你的网站实际上就是一堆文件的集合，怎么样去规划这些文件，就是目录的安排。

好的网站的目录很清晰，让人一目了然。

这就要求日常的文件安排都有一定的规律和次序可以进行参照，然后再根据所需应用适合自己的，那就是最好的。

2．数据库规划

在你选择了数据库和程序之后，接下来需要做的就是规划数据库的相应内容，具体针对数据库里放什么东西和怎么样去放，这些都需要进行仔细斟酌。

因为这些内容的规划和安排是至关重要的，关系到网站使用后的数据管理。

3．编写网站后台

前面已经策划了网站内容及其相应功能，接下来就可以进行写网站了。

写网站要写后站，这样更便捷。

把后台和数据库全部弄出来了，前台就是显示还有什么问题吗？

所以，一定要把网站后台编写好。

这就需要程序员多花些力气呢。

4．编写网站前台

根据设计制作的进度，接下来需要对网站的前台内容进行编写。

网站内容事先已经策划了，这里需要做的就是将网页内容，通过程序将其显示出来。

相对于后台，前台的内容同样重要，不可有一点点的缺失。

5．测试及修改阶段

在制作完成后，为了防止失误，需要进行测试，对其过程中反映的相应问题应及时修改。

没有一个程序弄好了就是没有漏洞没有错误的，测试和修改是必不可少的。

经过你的N多测试，网站应该没有什么问题了。

6．网站的发布

网页完成了，没问题了，那么就需要给他人浏览、观看。

如果你的网页仅仅是给自己的朋友看看，当做学习，你可以用自己的电脑配置成服务器。

网站准备长期给大家看，那么你可以考虑购买虚拟空间和域名。

当然，现在有很多人选择免费空间和免费域名。

如果你的网站非常受欢迎，或者你的网站内容非常多，虚拟空间已经不能够满足你了，那你租赁服务器或者托管服务器也是比较恰当的。

如果你想做网站，如果你想成为专业站长，就多多地去体验一下吧！

1.2网页设计工具

制作网页第一件事就是选定一种网页制作软件。

从原理上来讲，虽然直接用记事本也能写出网页，但是对网页制作必须具有一定的Html基础，非初学者能及，且效率也很低。

用Word也能做出网页，但有许多效果做不出来，且垃圾代码太多，也是不可取的。

接下来具体为大家介绍几款实用的网页设计工具。

1.2.1DreamweaverCS5简介

AdobeDreamweaverCS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，DreamweaverCS5是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

下面针对该软件的一些特性以及相关内容进行简单介绍。

1．新增功能特性

关于新增功能的相关内容及其特性如表1-2所示。

表1-2新增功能特性

新功能类型

作用特点

（1）集成CMS，支持新增功能

尽享对WordPress、Joomla!

和Drupal等内容管理系统框架的创作和测试支持

（2）CSS检查新增功能

以可视方式显示详细的CSS框模型，轻松切换CSS属性并且无需读取代码或使用其他实用程序

（3）与AdobeBrowserLab集成新增功能

使用多个查看、诊断和比较工具预览动态网页和本地内容

（4）PHP自定义类代码提示新增功能

为自定义PHP函数显示适当的语法，帮助读者更准确地编写代码

（5）CSSStarter页增强功能

借助更新和简化的CSSStarter布局，快速启动基于标准的网站设计

（6）与BusinessCatalyst集成新增功能

利用Dreamweaver与AdobeBusinessCatalyst®服务（单独提供）之间的集成，无需编程即可实现卓越的在线业务

（7）保持跨媒体一致性

将任何本机AdobePhotoshop®或Illustrator®文件插入Dreamweaver即可创建图像智能对象。

更改源图像，然后快速、轻松地更新图像

（8）增强的Subversion支持

借助增强的Subversion®软件支持，提高协作、版本控制的环境中的站点文件管理效率

（9）仔细查看站点特定的代码提示

从Dreamweaver中的非标准文件和目录代码提示中受益

（10）简单的站点建立

以前所未有的速度快速建立网站，分阶段或联网站点甚至还可以使用多台服务器

2．操作界面

（1）界面显示

在打开DreamweaverCS5之后，窗口将显示如图1.10所示的内容。

通过有针对性地选择“打开最近的项目”、“新建”、“主要功能”这些栏目中的选项，可以进行具体的操作。

图1.10初始界面

（2）菜单栏

如图1.11所示，是打开DreamweaverCS5后它的菜单栏。

我们可以通过它的各项功能命令，来实现最终的效果与制作。

图1.11菜单栏

图1.12工具箱

（3）工具箱

如图1.12所示，是打开DreamweaverCS5后它的工具箱中的内容显示。

我们可以通过它的各项功能，来使用工具制作与实现效果。

1.2.2FlashCS5简介

Flash是用于制作适合网络传输的流媒体动画的软件。

Flash动画文件具有体积小、可边下载边播放、多媒体交互性等特点。

最大的好消息是，FlashCS5对开发人员更加友好，可以和FlashBuilder（即最新版本的FlexBuilder）协作来完成项目。

如果你使用FlashCS5，那么就可以通过它的新的导出对话框建立一个新的FlashBuilder项目。

下面针对该软件的一些特性以及相关内容进行简单介绍。

1．功能特点

（1）Flash与Dreamweaver、Fireworks具有相同风格的快速启动栏、浮动面板、菜单栏、工具箱等。

（2）提供了与Fireworks基本相同的绘图工具，因此对于熟悉Fireworks的用户基本可以不用重新学习就可以绘图。

（3）利用关键帧和元件等技术可以轻易地制作出各类动画。

（4）提供了层技术，使动画的各个组成部分既分又合，方便制作和修改。

（5）支持许多图像、声音、视频格式，这些多媒体文件均可以直接导入动画中，从而使Flash动画“声像并茂”。

（6）提供了较完善的ActionScript脚本语言，可以为动画加入交互效果。

2．新的功能特性

关于新功能的相关内容及其特性如表1-3所示。

表1-3新的功能特性

新功能