《企业网站中网页div创意设计类网站的设计与实现方案文档》由会员分享，可在线阅读，更多相关《企业网站中网页div创意设计类网站的设计与实现方案文档（31页珍藏版）》请在金锄头文库上搜索。
1、企业网站中网页div 创意设计类网站的设计与实现方案第一章 网站设计环境介绍随着计算机应用的发展，网站已经是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径。网页设计是科技与艺术的结合，是商业社会的产物。虽然网页设计也是平面设计中的一个方面，但是网页设计有其独特的设计要求与原则，在设计网页之前要对其有所了解。第一节 因特网和万维网一、何为因特网大家可能对因特网（Internet）这个词不会感到陌生，因特网是由许许多多计算机连接在一起构成的一个计算机网络，在这个网络中，人们可以使用各自的计算机互相传递信息；可以在自己的计算机上存储文件供别人访问；可以利用多台计算机实现分布式应用。Inte
2、rnet 规模庞大，遍及全球，一旦上网，你就与全球无以计数的计算机连成一体。二、何为万维网有上网经历的会知道，在浏览器的地址栏中经常出现“WWW”，比如要访问百度网站就需输入“WWW”。其中的三个“W”是英文 World Wide Web的缩写，中文译为万维网。万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分（因特网还包括电子邮件、Usenet 以及新闻组等应用）。万维网实际上是多媒体的集合，各个部分由超级链接连接而成。我们通常使用浏览器上网观看的内容， 就是万维网的内容。比如在浏览器中输入“”,就可以访问新浪网站的首页。网页也称作Web 页面或 Web 文档，它包含了文
3、字、图像、动画和一些具有交互功能的控件。第二节 相关术语解释一、InternetInternet(英特网)诞生于上世纪 60 年代，发展非常慢，到 90 年代才开始迅速发展。现在英特网已经是世界上最大的网络的，联在英特网上的电脑有数亿台。上面的资料、信息数不胜数，所以有人把英特网叫成是信息的海洋、知识的海洋。二、站点所谓站点，就是将网页文件和素材文件，有条理地放置站点文件夹里，这些文件与文件夹就构成了网站的实质内容。站点文件夹里除了网页文件还有素材文件，所谓素材就是网页中所用到的图像、声音、视频等，这些内容是以单独文件的形式存在。三、超链接我们在浏览网页时，当鼠标指针指向某段文本或是某个图像，
4、鼠标指针变成小手状，单击鼠标可以打开其他的网页或是跳转到其他的网站，这就是超链接。采用超链接技术可以将不同的网站、网站中的不同网页、网页中的不同位置彼此串在一起，实现相互间的跳转，方便信息的浏览和查找。人们通过超链接可以很方便很迅速地访问分布于全球计算机上的海量资源，实现在互联网中的漫游。超链接能使 Web 服务存在广泛和持久的生命力，超链接可以说是 Web 的灵魂。四、URLURL（Uniform Resource Locator 的缩写），统一资源定位器。互联网中某种信息资源以某种方式存储在网络中的某处，必须用一个惟一的 URL 来进行标识，这样才能方便查找。对于Web 来说，可以简单并通
5、俗把URL 理解为网址。每个 Web 网页都有自己的网址，在浏览器地址栏里输入网页的URL，就可以访问这个网页。例如，http:/ http 超文本传输协议访问新浪网的首页，由于网页均是通过 http 超文本传输协议进行访问，默认下，“http:/”可以省略不输。五、IP 地址为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的 IP（Internet Protocol）地址，这如同公用电话网中电话的号码一样。IP 地址是由专门的互联网机构来分配。IP 地址具有惟一性，是由 32 位二进制数组成，分为四组，每组8 位，每组之间用小数点分隔，在实际之中常转换成十进制数表
6、示。六、网页网页，是网站中的一页，通常是HTML 格式（文件扩展名为.html 或.htm 或.asp 或.aspx 或.php 或.jsp 等）。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话， 您的客户仍旧无法访问您的网站。所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则， 使用 HTML 等工具制作的用於展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信
7、息），或者利用网站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务。第三节 Web 标准概述一、什么是 Web 标准Web 标准是由 W3C（World Wide Web Consortium）和其他标准化组织指定的一系列规范的集合，其中包含了（X）HTML、XML 和 CSS。Web 标准的目的在于创建一个统一的用于 Web 表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。二、Web 的认识Web(World Wide Web，简称 WWW，又称万维网)是目前 Internet 上应用最广泛也是最重要的信息服
8、务类型，它已经影响了 Internet 上的广告、新闻、电子商务和展示信息等各个服务领域。 Web 采用浏 6hy 览器/服务器（B/S）工作模式，其运作模式可以描述为：请求处理应答。Web 以超文本标记语言 HTML(Hyper Text Markup Language)与超文本传输协议 HTTP(Hyper Text Transfer Protocol)为基础，通过浏览器为用户提供方便友好的信息浏览界面。 Web 将位于全世界互联网上不同网址的相关信息有机地编织在一起。在Web 服务方式中，信息以页面（或称Web 页）的形式存储在Web 服务器中，这些页面采用超文本的方式对信息进行组织，通
9、过链接将一页信息链接到另一页信息。这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL(Uniform Resource Locator)维持。用户通过客户端应用程序（即浏览器）向 Web 服务器发出请求，服务器根据客户端的请求将保存在服务器中的某个页面返回给客户 端，浏览器接收到页面后对其进行解释，最终将信息以图、文、声并茂的形式呈现给用户。 Web 服务的特点在于高度的集成性，它能够实现不同类型的信息（如文本、图像、声音、动画和视频等）和服务（如 New、FTP、Telnet、Gopher 及Mail 等）的无缝链接，特别适合于广
10、域网中信息的组织、检索与显示。三、Web 文档的三层结构Web 文档通常包含三个不同的层次（见图 1.1）。首先是结构层，该层的内容是由（X）HTML 编写的文本文档。它包含文档的内容，以及由（X）HTML 添加的语义化的标记。第二层为表现层，该层内容是 CSS 样式代码。它描述了文档该以何种样式呈现在访问者面前，样式包括页面各部分的布局、文字段落排版、背景图片和颜色等。第三层是行为层，该层定义了文档模型以及如何与客户进行交互， 所涉及技术主要是 DOM 以及 ECMAScript 脚本语言。图 1.1 结构、表现和行为及各部分所涉及的技术四、Web 标准的优势1、易于开发和维护一个大型的网站
11、往往需要很多人员的参与，他们的分工也不同，有负责样式设计的，有负责页面编码的，有负责样式编写的等。由于内容结构和表现的分离， 不同开发人员可以独立工作，专注于自己负责的内容。样式信息和内容是相互独立的，因此同一个样式信息可用于不同的内容中， 从而实现代码重用。这种做法可用减少重复编码，加快开发进度。样式信息重用也使得维护工作大大减轻，只需要修改一小部分样式代码，就可以使所有用到该样式的区域同时改变外观。2、高兼容性由于W3C 对Web 标准的推动，越来越多的浏览器支持由 W3C 制定的各种标准， 从而使得根据标准编写的 Web 页面在不同的浏览器中均能获得一致的效果。3、高灵活性现在，越来越多
12、的人使用手机或 PDA 访问网站，通常这些设备的屏幕要远远小于 PC 机的显示器。网页的内容和表现的分离使得我们可以针对不同平台和设备应用不同的样式文件，而网页内容无须改动。对于需要打印输出的页面，我们也无须再提供另一份“适合打印”的页面，取而代之的只是新的 CSS 样式。4、提高访问速度内容与表现的分离，使得页面中不再包含冗余的样式代码，而独立出来的样式表可以充分地进行重用，网页整体代码量大大减少。这样不仅能占用更少的网络带宽，提高页面载入速度，同时浏览器也能对页面进行快速解析，显示给用户。5、提高用户体验从 Web 应用的角度看，用户体验（User Experience,UE）指的是Web
13、 应用程序能够提供直观简洁的用户界面、简便的操作以及有效的交互方式。只有当用户亲自使用时才能体验带它们。用户体验包含了多方面的内容，其中一致性、可用性等方面均通过标准化开发来实现。比如各个页面使用统一的样式，利用行为层技术改善交互设计等。第四节 Web 设计技术Web 设计涵盖的范围相当广，本节只介绍一些构建 Web 文档所需的几项最基本的技术。一、HTMLHTML，英文全成为 HyperText Markup Language，中文译为超文版标记语言。它是用来创建 Web 文档的语言。页面元素是由特定的标记来确定的，这些标记告诉浏览器该如何显示这个页面。所谓超文本，就是一种含有指向其他文档链
14、接的文本，即我们俗称的链接。超文本把存放于不同计算机中的文档链接在一起。访问者不必关心链接所指的内容到底位于何处，只需要在链接上单击一下鼠标，页面马上转到所指的文档中去。二、CSSHTML 可以将内容、结构和格式化的信息都包含在同一个 Web 文档中，这样做虽然简单易行，但也存在很多问题。各种信息存放在一起不利于文档的维护， 修改起来费时费力。因此 HTML 应只负责文档的内容和结构，而格式化信息交给一套新的语言来完成，这就是 CSS，它也是本论文的主角。CSS 全称为 Cascading Style Sheet，中文译为层叠样式表（也有译作级联样式表的）。其作用就是要控制 HTML 的页面布
15、局和外观样式，使 Web 文档内容结构和表现形式完全分离。第五节 浏览器网页和浏览器是分不开的，用户正是通过浏览器来达到访问网页的目的。浏览器（Browser）是一种软件程序，可以和网络建立连接并与之通信。它可以将存在于万维网中的特定网页获取下来，对网页中的内容进行分析，并按照一定的规则显示出来。目前主浏览器有： Internet Explorer 1995 年微软公司推出并与 Windows 95 操作系统进行捆绑销售。 Mozilla Firefox 由 Mozilla 基金会与数百个自愿者开发的网页浏览器。 Opera Opera Software 开发的 Opera（http:/）浏览器是一款适用于各种平台、操作系统和嵌入式网络产品的高品质、多平台产品。第二章 网站需求分析网站是企业向用户和网民提供信息的一种方式，是企业开展电子商务的基础设施和信息平台。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站则是反映企业形象和文化的重要窗口。在建站的可行性分析方面，设计中，我主要针对已经确定的需求和目标，研究网站建设的社会环境、市场等可行性、技术可行性，经济可行性以及开
