网页设计与制作基础.ppt

网站建设与网页设计,任课教师：颜君彪 课程类别：院选课 2012年3月,课程基本要求,了解网站建设的基本内容 掌握网站建设的步骤 掌握网页设计工具的使用 掌握HTML基本标记的使用方法 了解CSS和表单的用法,第1章 INTERNET基础与网站架构,1.1.1 Internet的基本概念 Internet:中文正式译名为因特网，又叫做国际互联网。 Internet是一个具体的网络实体，泛指使用公用语言互相通信的计算机连接而成的全球网络。,1.1.2 Internet 基本构成,Internet 由网络终端（计算机、外设）、网络连接设备、信号传输介质（电缆、光纤、无线电、微波）、协议簇（TCP/IP即传输控制协议/Internet协议）等组成。,Internet,图1-1 Internet 基本结构示意图,路由器,中心交换机,图1-2 某学校（Intranet）校园网拓扑图,（1）电子邮件服务（E-mail）“电子邮件”专指在Internet中的电子邮件E-mail就是Electronic Mail的英文缩写，是计算机用户交换信息的一种途径。邮件地址由用户名和主机名组成，中间由连接，如，bjlgo是用户名，163.net是主机名。 （ 2）登录服务（Telnet）远程登录就是用户通过计算机网络进入和使用远程的计算机系统。,1.1.3 Internet所提供的服务,（3）文件传输服务（FTP）文件传输服务（File Transfer Protocol）指是的把文件从一台计算机传送到另一台计算机。 （4）Gopher服务Gopher是一种基于菜单的信息检索工具，用户只要在成树形结构排列的多层菜单中逐级深入，就可以检索到所需要的信息，而不必考虑它们的存储方式和位置。,（5）电子公告板服务（Internet BBS电子公告扳（BBS）即公告板系统（Bullet in Board System）是一个信息和文件的陈列室，常常集中于一个特定主题，像发告示一样，将要公布的信息粘帖到公告栏上，其他人可以随时看到信息。,（6）网络会议（Net Meeting）服务Net Meeting 为用户通过Internet与其他人进行交谈，并举行各种实时通信会议提供了极大的方便。 （7）WWW （World Wide Web）WWW也叫万维网，是Internet网络的多媒体信息查询工具。由三部分组成，即：客户机、服务器和HTTP协议。 （8）游戏、聊天服务,1.1.4 协议（Protocol）,是关于信息格式及信 息交换规则的描述。,1.1.5 TCP/IP协议簇,TCP/IP是Internet上通用的标准协议簇。TCP（Transmission Control Protocol）传输控制协议，提供面向连接的服务。IP（Internet Protocol）互联网协议，将数据从一个地址传送到另一个地址，也就是说IP的工作就是传送和接收数据包。,1.1.6 IPv4 地址和IPv6地址,IPv4地址是一个32位的二进制数组成的号码，该号码分为4段，每段8位二进制数，如按十进制数计算则每段取值范围在0255之间。,IPv6地址是一个128位的二进制数组成的号码，该号码分为8段，每段4个16进制数表示，如按十进制数计算则每段取值范围在065536之间。,1.1.7 域名、域名系统,Internet域名是Internet网络上一个服务器或一个网络系统的名字，在全世界没有重复的域名。,即计算机域名组织结构名网络名最高层域名。 最高层域名又称顶级域名。顶级域名代表建立网络的部门、机构或网络所隶属的国家和地区。,DNS用分层命名的方法：,分类：大体可分为两类。,一类是组织性顶级域名，由三个字母缩写代表机构，如 .com代表商业，.edu代表教育，.net代表网络等。 另一类是地理性顶级域名，由两个字母缩写代表国家或地区，如.CN代表中国，.JP代表日本等，.HK代表中国香港。,1.2 Web的特点和结构,1.2.1 WWW的概念 1.什么是WWW？ WWW是World Wide Web的缩写，简称为Web（万维网）。WWW起源于1989年3月，是由欧洲粒子物理实验室CERN (the European Laboratory for Particle Physics)开发的主从结构分布式（“客户机/服务器”模式）超文本系统。 1992年1月，Web的第一个版本在瑞士日内瓦问世 。,1.2 Web的特点和结构,WWW是一个全球性的信息系统，使计算机能够在Internet上相互传送基于超媒体的数据信息。 WWW也可以用来建立Intranet（企业内部网）的信息系统。 WWW具有三个统一： 1.统一的资源命名方式：URL（统一资源定位符，即网址）。 2.统一的资源访问方式：HTTP （超文本传输协议）。 3.统一的信息组织方式：HTML（超文本标记语言）。,1.2 Web的特点和结构,2.WWW的特点 分布式的信息资源 。 统一的用户界面 。 支持各种信息资源和各种媒体的演播 。 广泛的用途。,1.2 Web的特点和结构,3.WWW的结构 WWW是成千上万个网站连結而成的页面式网络信息系统。WWW采用“客户机/服务器”结构。它是一种网络的工作模式，也是一些操作系统软件采用的系统模型。,1.2 Web的特点和结构,网页存放在被称为Web服务器(Web Server)的计算机上，等待用户访问。,1.2 Web的特点和结构,4.Web技术经历了3个发展阶段 第一代，提供对静态网页的管理和访问。 第二代，提供对动态网页的访问和显示。 第三代，除动态网页生成和访问之外，还提供基于Web的联机事务处理能力。 静态网页是从放置到服务器以后，直到发送给浏览器不会发生更改的网页，通常用HTML语言编写其代码，保存为.htm文件。 动态网页是在发送到浏览器之前由应用程序服务器修改的网页。动态网页的源文件可用HTML语言和VBScript或JavaScript等脚本语言编写，保存为.asp文件，也称为Web应用程序。,1.2 Web的特点和结构,Web 应用程序是用HTML语言和VBScript或JavaScript等脚本语言编写的动态网页源文件，也称为服务器端脚本。当从服务器请求这样一个页时，Web服务器先将该页传递给应用程序服务器进行处理，然后再将该页发送给浏览器。 应用程序服务器是一种软件，它帮助Web服务器处理Web 应用程序，以便生成动态网页。 ASP（Active Server Page动态服务器网页）是Windows系统所包含的应用程序服务器软件。,1.2.2 Web服务器配置,1.什么是Web 服务器？ Web 服务器也称为 HTTP 服务器，它是响应来自浏览器的请求，并且发送出 网页的软件。 当访问者在浏览器的地址文本框中输入一个 URL，或者单击在浏览器中打开的 网页上的某个链接时，便生成一个网页请求。 常见的 Web 服务器有： Microsoft Internet Information Server（IIS） Microsoft Personal Web Server(PWS) Apache HTTP Server Netscape Enterprise Server Sun ONE Web Server。,1.2.2 Web服务器配置,2.五种常见的Web应用程序服务器 Dreamweaver可以使用以下五种服务器技术的任何一种 设计Web 应用程序： ColdFusion（可用于Windows和Solaris操作系统平台的动态服务器网页技术） ASP （Active Server Page：动态服务器网页技术） ASP .NET （.NET平台的动态服务器网页技术） JSP （Java Server Page ：Java服务器网页技术） PHP （Personal Home Page：个人主页技术） 每种技术都与 Dreamweaver 中的一种文档类型相对应。,1.2.2 Web服务器配置,ASP、JSP、PHP的比较,1.2.2 Web服务器配置,选择哪一种Web 应用程序技术取决于多个因素，其中包括对各种脚本语言的熟悉程度以及要使用的应用程序服务器。 如果采用ColdFusion MX服务器，则可以选择 ColdFusion 。 如果采用IIS服务器，则可以选择 ASP或ASP.NET。 如果采用PHP服务器，则可以选择 PHP； 如果采用JSP服务器，则可以选择 JSP。 本课程选择了Windows的ASP动态网页技术。,1.2.2 Web服务器配置,3.两种Web系统配置方案,一种配置是将 IIS或PWS安装在本地Windows 计算机硬盘中，另一种是将IIS或PWS安装在远程Windows计算机硬盘中。,1.2.2 Web服务器配置,4.如何用Windows操作系统建立Web服务器？ 可以安装下列系统之一 ： 1Windows 2000/2003 Server和IIS 5.0。 2Windows XP和IIS 5.1。 3Windows 98/2000 Professional和PWS。 其中 IIS：Internet Information Service （Internet信息服务器）； PWS：Personal Web Service （个人Web服务）。,1.2.2 Web服务器配置,Windows2000/2003 Server和IIS 5.0安装 在Windows2000 Server软件里带有IIS 5.0。插入Windows2000 Server光盘，自动启动，按照提示进行安装，同时自动安装IIS 5.0 。 Windows 2003 Server不自动安装IIS。若要安装IIS，可以单击“开始”“程序”“管理工具”“配置服务器”，选择“高级”选项，打开显示可供安装的组件的对话框；也可以在控制面板中使用“添加/删除程序”。,1.2.2 Web服务器配置,注意，由于ASP处理程序会随着IIS自动安装。所以，运行ASP的应用程序服务器会随着Web服务器的建立而自动地建立。,1.2.2 Web服务器配置,如何在Windows XP中安装IIS （1）单击“开始”“控制面板”，双击“添加或删除程序”； （2）单击“添加/删除 Windows 组件”； （3）出现“Windows 组件向导”，单击“下一步”； （4）在“Windows 组件”列表中，选中“Internet 信息服务(IIS)”； （5）单击“下一步”，然后根据提示操作。 在安装后，可以启动浏览器，输入地址：localhost。若显示其网页，则表示IIS正常安装。,演示,1.2.2 Web服务器配置,5.服务器上的根文件夹Inetpubwwwroot 假定读者在计算机的D:盘中安装了Windows XP操作系统。那末，该系统会自动创建根文件夹D:Inetpubwwwroot。 默认情况下， Web 服务器从 D:Inetpubwwwroot 文件夹提供网页。Web 服务器将根据来自 Web 浏览器的 HTTP 请求，提供此文件夹中的任何页或其子文件夹中的任何页。 在D:Inetpubwwwroot 文件夹中可以创建子文件夹，例如“MyPage”用以存放一组网页源文件。,演示,1.2.2 Web服务器配置,6.如何设置默认网站主目录（根文件夹） （1）单击“开始”“控制面板”“性能和维护”“管理工具”“Internet 信息服务”；展开“本地计算机”列表，展开“Web站点”文件夹，然后展开“默认Web站点”文件夹，右击“默认网站”；单击“属性”。 （2）输入默认网站IP地址 （若本机作Web服务器，则用）。 （3）输入默认网站的主目录，以及为该文件夹设置脚本权限 。 现在已完成了Web服务器的配置，它将根据浏览器的请求，提供根文件夹中的网页。 假如建立网页文件test.htm，将它存放到本机默认网站的主目录d:inetpubwwwroot下。那末，其浏览地址为： test.htm。,演示,1.2.3 创建虚拟目录,1.存放网页源文件的两种做法 将网页文件保存到默认网站的主目录里，如上节所述，默认网站的主目录直接采用Windows系统已经建立的d:Inetpubwwwroot根文件夹。 将网页文件保存到默认网站的主目录之外。这就需要建立一个虚拟目录，在建立虚拟目录的过程中指定虚拟目录及其实际目录，从而建立虚拟目录和实际目录的联系。,1.2.3 创建虚拟目录,2.什麽是虚拟目录 虚拟目录是实际目录的别名，它代表存放网页的实际目录，以便用在网址中代替实际目录。 虚拟目录的名称可以与实际目录的名称相同，也可以不同。虚拟目录在磁盘目录中并不存在，实际目录是存放网页内容的目录。 例如，存放网页文件 test.htm的实际目录为d:x1，若为该目录设置一个别名，即虚拟目录zhang，则虚拟目录Zhang就可以用在网址zhangtest.htm中代表存放网页的实际目录d:x1。,1.2.3 创建虚拟目录,3.设置默认网站的虚拟目录 单击“开始”“控制面板”“性能和维护”“管理工具” “Internet 信息服务”；展开，右击“默认网站”；单击“新建”“虚拟目录”。,1.2.4 IE6.0的配置,浏览器IE6.0的配置可以使用浏览器的“工具”和“Internet选项”菜单命令进行设置，也可以通过修改操作系统的注册表进行设置。本节介绍如何使用“工具”和“Internet选项”进行下列设置。 1.设置Internet连接 （1）启动Internet Explorer。 （2）单击“工具”“Internet 选项”。出现Internet 选项对话框 。 （3）单击“连接”选项卡单击“建立连接”。 （4）按照屏幕上的提示操作。,演示,1.2.4 IE6.0的配置,2.设置起始页面 （1）单击IE菜单栏中的“工具”“Internet选项”出现Internet选项对话框。 （2）输入“主页”的“地址”，例如，单击“确定” 。 3.设置IE缓存 在“Internet选项”对话框中，单击“设置”，出现“设置”对话框。可以设置IE缓存“使用的磁盘空间”等。,演示,1.2.4 IE6.0的配置,4. IE安全设置 在“Internet选项”对话框中，单击“安全”，出现“安全设置”对话框 。 其中主要包括ActiveX控件和插件、Java权限、JavaApplet和脚本、Cookies、文件下载或用户验证设置，可选择“禁用”或“启用”等。 5.调整自动完成功能的设置 在IE的“工具”菜单上，单击“Internet选项”；单击“内容”标签；在“个人信息”区域，单击“自动完成”；选中要应用“自动完成”功能的选项前面的复选框。,演示,1.2.4 IE6.0的配置,6.清除已访问过的网页 为了加快浏览速度，IE会自动把浏览过的网页保存在系统盘的Temporary Internet Files文件夹内。 当用户不再需要这些网页时，在该文件夹下全选且删除即可。或者，在“常规”标签下单击“Internet临时文件”项目的“删除文件”按钮，选中“删除所有脱机内容”，单击“确定”按钮即可。 这种方法不太彻底，还会留少许Cookies在文件夹内。在“常规”标签下，“删除文件”按钮旁边还有一个“删除Cookies”按钮，通过它可以很方便地删除遗留的Cookies。Cookies（小甜饼）是客户端逐块保存用户信息的小文本文件。,演示,1.2.5 URL,URL（英文全名是Uniform Resource Locator，中文称是“统一资源定位器”），Internet上的所有资源都可用URL来表示。URL好比Internet上的门牌号码，它可以帮助用户在Internet的信息海洋中定位到所需要的资料。,1.2.6 HTTP协议,HTTP协议（英文全名为Hypertext Transfer Protocol，中文称“超文本传输协议”）它是用来在Internet上传送超文本的传送协议。,1.2.7 超文本,超文本（Hypertext）是把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链指针打开另一个相关的文本。,1. 3 网站与网页,网站是指建立在互联网上的Web站点，存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。它面向公众提供互联网内容服务。,1.3.1 网页与网站 网页也叫 Web页，网页就是在显示器屏幕上的内容。网页实际是一个文件，它存放在世界某个角落的某一个计算机中。网站与网页的关系类似于一本书与一页书。,1.3.2 静态网页与动态网页 网页按其表现形式来划分可分为动态页和静态页。 静态网页只能浏览，不能实现客户端和服务器端的交流互动，在静态网页中，也可以出现各种动态的效果，如GIF格式的动画、FLASH影片、滚动字幕等，这些“动态效果”只是视觉上的，并不能实现客户端和服务器端的交互。,动态网页的页面内容随用户的输入而变化，能与客户端交流互动，它们会随不同客户、不同时间，返回不同的网页，动态网页使用ASP、PHP、JSP、ASP.NET等技术生成。 静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少。,1.4 网页制作常用工具,1利用Photoshop CS3设计网页图像 2. 利用Fireworks CS3设计网页图像 3. 利用网页编辑软件Dreamweaver CS3制 作网页 4. 利用网页动画软件Flash CS3制作动画,色彩的魅力是无限的，它是网站重要的表现形式之一。 1.5.1 网页色彩的基础知识 从物理学上，色光可分解为红、橙、黄、绿、青、蓝、紫等，其中，红、绿、蓝是三原色，在计算机科学中我们称之为RGB三原色，三原色通过不同比例的混合可以得到自然界中五颜六色、千变万化的各种颜色。 现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其他的色彩都属于彩色。任何一种彩色具备3个特征：色相、明度和纯度。其中非彩色只有明度属性。,1.5 网页中色彩的应用,1.5.2 网页色彩的搭配 色彩搭配既是一项技术性工作，搭配协调可以设计出色彩鲜明、性格独特的网站。 1）网页色彩搭配技巧 单色 、邻近色 、对比色 、黑色、背景色、色彩的数量的使用。 网站用色一般控制在3种色彩以内，通过调整色彩的各种属性来产生变化。,2）常见的网页配色方案 红色代表热情、活泼、热闹、温暖、幸福和吉祥。易引起人的注意，使人兴奋、激动、紧张和冲动，还易造成人视觉疲劳的颜色。 黄色代表明朗、愉快、高贵和希望。只要在纯黄色中混入少量的其他色，其色相感和色性格均会发生较大程度的变化。 白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。在白色中加入其他任何色，都会影响其纯洁性，使其性格变的含蓄。 紫色代表优雅、高贵、魅力、自傲和神秘的感觉。在紫色中加入白色，可使变得优雅、娇气，并充满女性的魅力。,蓝色代表深远、永恒、沉静、理智、诚实、公正权威。蓝色是一种在淡化后仍然能保持较强个性的颜色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。 绿色代表新鲜、充满希望、和平、柔和、安逸和青春。绿色是具有黄色和蓝色两种成份的颜色。一般农林业、教育类网站常使用绿色代表希望、充满活力。 灰色在商业设计中，具有柔和、高雅的意象，而且属于中间性格，易接受，所以也是永远流行的主要颜色。在许多的高科技产品，尤其是和金属材料有关的，几乎都采用灰色来传达高级、科技的形象。,1.6 网页布局,1.6.1 网页设计的原则 主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得益彰 简洁一致 网页布局时的元素：格式美观的正文、和谐的色彩搭配、较好的对比度、使得文字具有较强的可读性、生动的背景图案、页面元素大小适中、布局匀称、不同元素之间留有足够空白、各元素之间保持平衡、文字准确无误、无错别字、无拼写错误。 文本和背景的色彩：一个页面显示的颜色不宜过多，应控制在256色以内。主题颜色通常只需要23种，并采用一种标准色。,1.6.2 网页布局的基本要素 学习网页设计首先需要了解构成网页的基本元素，这样才能在页面设计中得心应手，根据需要合理地组织和布局网页内容。一般网页的基本内容包括：页面标题、网站标志、页眉、导航栏、主内容区和页脚。 1）页面标题 网站中的每一个页面都有标题，用来提示该页面的主要内容。标题出现在浏览器的标题栏中，而不是出现在页面布局中。它还有一个比较重要的作用就是引导访问者清楚地知道所要浏览网站的内容，不至于迷失方向。 2）网站标志 网站标志在互联网上是一个站点的象征，是网站形象的重要体现。另外，还在站点之间的互相链接中扮演着重要的角色，一个好的标志可以很好地树立公司形象。网站标志一般放在网站的左上角，访问者一眼就能看到它，可见标志的重要性。网站标志通常有3种尺寸：8831像素、12060像素和12090像素。,3）页面尺寸 由于页面尺寸和显示器大小及分辨率有关系，一般分辨率在800600像素的情况下，页面的显示尺寸为780428像素；分辨率在640480像素的情况下，页面的显示尺寸为620311像素；分辨率在1024768像素的情况下，页面的显示尺寸为1000600像素。从以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般浏览器的工具栏都可以取消或者增加，那么当显示全部工具栏和关闭全部工具栏时，页面的尺寸是不一样的。 在网页设计过程中，虽然页面可以设计很长的网页，最好不要让访问者拖动页面超过3屏，如果确实需要在同一页面显示超过3屏的内容，那么最好能在网页顶部加上锚点链接，以方便访问者浏览。,4）导航栏 导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。 导航的位置一般有4种常见的显示位置：在页面的左侧、右侧、顶部和底部。有的在同一个页面中运用了多种导航，如有的在顶部设置了主菜单，而在页面的左侧又设置了折叠式的折叠菜单，同时又在页面的底部设置了多种链接，这样便增强了网站的可访问性。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用页面达到总体的协调一致。 如果网页的页面比较长，最后在页面底部也设置一个导航，这样如果浏览者正在阅读页面底部的内容，就不用再拖动浏览器滚动条来选择页面顶部的导航条，而直接使用页面底部的导航。,5）页眉和页脚 页眉指的是页面上端的部分。有的页面划分的比较明显，有的页面则没有明确的区分或者没有页眉。 页眉的风格一般要求和页面的整体风格保持一致。页眉的位置吸引注意力较高。页眉的作用是定义页面的主题。如站点的名字多数都显示在页眉里。这样访问者能很快知道这个站点是什么内容。页眉是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页眉常放置站点的图片、公司标志、公司名称、宣传口号和广告语等，甚至有些网站将此设置为广告席位来出租。 页脚和页眉相呼应。页眉是放置站点主题的地方，而页脚是放置公司联系信息的地方。许多信息都是放置在页脚的。,1.6.3 网页布局方法 在制作网页前，可以先布局出网页的草图。网页布局的方法有两种，下面分别加以介绍。 1）纸上布局 新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，尽可能地发挥想像力，将想到的“景象”画上去。这属于创造阶段，不必讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽可能地多画几张草图，最后选定一个满意的来创作。 2）软件布局 如果不喜欢用纸来画出布局意图，那么还可以利用Photoshop、Fireworks等软件来完成这些工作。不像用纸来设计布局，利用软件可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。,1.6.4 常见的版面布局形式 网页设计要讲究编排和布局，虽然网页设计不同于平面设计，但它们有许多相近之处，应加以利用和借鉴。网页的版面布局主要指网站主页的版面布局，其他网页的版面与主页风格基本一致。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。 设计版面布局前先画出版面的布局草图，接着对版面布局进行细划和调整，反复细划和调整后确定最终的布局方案。 常见的网页布局形式大致有“国”字型、“厂”字型、“框架”型、“封面”型和Flash型布局。,1） “国”字型布局 也称为“同”字型，布局如图1-1所示。最上面是网站的标志、广告以及导航栏，接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下部是网站的一些基本信息、联系方式和版权声明等。这种结构是国内一些大中型网站常见的布局方式。这种布局的优点是充分利用版面、信息量大，缺点是页面拥挤、不够灵活。,图1-3 “国”字型布局,2）“厂”字型布局 结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。如图1-2所示为网站采用“厂”字型布局。,图1-4 “厂”字型布局,3）“框架”型布局 “框架”型布局一般有左右框架型、上下框架型、综合框架型布局，一栏是导航栏目，一栏是正文信息。复杂的框架结构可以将页面分成许多部分，常见的是三栏布局，如图1-3所示。上部一栏放置图片广告，左边一栏显示导航栏，右边显示正文信息内容。,图1-5 框架型布局网页,4）“封面”型布局 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。如图1-4所示为封面型主页。,图1-6 封面型主页,5）Flash型布局 其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。如图1-5所示为采用的Flash型网页布局。,图1-7 Flash型网页布局,在确定网页的版面布局后，还需要确定文本的样式，如字体、字号和颜色等，还可以将文字图形化。文本是人类重要的信息载体和交流工具，网页中的信息也是以文本为主。 1）文字的字体、字号、行距 网页中默认的标准字体是中文“宋体”和英文“The New Roman”。如果在网页中没有设置任何字体，在浏览器中将以这两种字体显示。,1.6.5 网页中的文字设计,字号大小可以用不同的方式来计算，如磅（point）或像素（pixel）。最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。注意：小字号容易产生整体感和精致感，但可读性较差。,字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。,行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。 行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位。例如：line-height：20pt、line-height：150%。,2）文字的颜色 在网页设计中可以为文字、文字链接、已访问链接和当前活动链接选用各种颜色。如正常字体颜色为黑色，默认的链接颜色为蓝色，鼠标点击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应注意，对于文字的颜色，只可少量运用，如果什么都想强调，其实是什么都没有强调。况且，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。,另外需要注意的是文字颜色的对比度，它包括明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生作用，更重要的是，可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。,3）文字的图形化 所谓文字的图形化，即把文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。 将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。,1.7 网站建设的基本流程,1.7.1 网站的需求分析 不论是简单的个人主页，还是复杂的、几千个页面的大型网站，对网站的需求分析都要放到第一步，因为它直接关系到网站的功能是否完善，是否够层次，是否达到预期的目的等。 1）确定主题 对于主题的选择要注意以下三条原则。 主题要小而精。 主题不要太滥，目标不要太高。 对于个人网站来说题材最好是自己擅长或者喜爱的内容。也就是说要找准一个自己最感兴趣的内容，做深、做透，办出自己的特色。 2）确定浏览对象,1.7.2 规划站点结构 网站规划就是根据网站的需求分析，明确建设网站的目的，确定网站要实现的功能，由此对网站的内容进行设计，网站应包含哪些栏目，哪些页面等，同时还要对网站的目录结构进行规划。 1）网站的规划基本原则： 明确建设网站的目的、进行可行性分析、网站的内容设计、网站的表现形式设计。 2）确定网站的目录结构 目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对站点本身的上传维护，以及以后内容的扩充和移植有着重要的影响。 网站的目录是指建立网站时创建的目录。如在建立网站时都默认建立了根目录和images子目录，下面是建立目录结构的建议： 不要将所有文件都存放在根目录下；按栏目内容建立子目录；在每个主目录下都建立独立的images目录；目录的层次不要太深。,1.7.3 收集素材 网站规划好之后，就要创建和收集需要的资源了，包括图片、文字、声音、视频、动画等，网站的资料来源主要有以下4个途径。 （1）客户提供的资料。这是主要的资料来源。 （2）书籍、报刊杂志。 （3）另外一个好的方法是从网络上收集，只要到雅虎、百度等搜索引擎上查找相应的关键字，就可以找到很多的资料。 （4）自己动手设计制作。,1.7.4 设计制作网站网页 网站需求分析和素材收集完了以后，下面就开始正式设计和制作网页了。设计网页就是对页面进行布局的设计、色彩的搭配，协调文字、图片、音乐、动画、视频等页面内容。制作网页就比较简单，利用Dreamweaver，在网页上插入文本段落、图像、Flash动画、表、动态HTML效果、声音以及超级链接，这些都可以在很短的时间内完成，当然在制作过程中需要利用Photoshop等工具对一些素材进行必要的处理。,1.7.5 开发动态网站功能模块 页面设计制作完成后，如果还需要动态功能的话，就需要开发动态功能模块，网站中常用的功能模块有搜索功能、留言板、新闻信息发布系统等。 1）搜索功能 2）留言板