搜索
网站规划与设计信息工程系李丽霞1.1网页和网站基本术语：（WorldWideWeb）：也可以简写为W3、3W、Web等，称为国际互联网（Internet），又称万维网，它是Internet上基于客户/服务器体系结构的分布式多平台的超文本超媒体信息服务系统，允许用户在一台计算机上通过Internet存取另一台计算机上的信息。俗称Web服务器。HTTP（HyperTextTransferProtocol超文本传输协议）：是一个用于在客户端和服务器间请求和应答的协议。是互联网上应用最为广泛的一种网络传输协议。URL（UniformResourceLocator统一资源定位符）：网址（如）1．网页网页：是用html（HyperTextMark-upLanguage：超文本标记语言）编写的，通过因特网（Internet）传输，并被web浏览器解释成可以显示出来的、集合文本、图片、声音和动画等信息元素的页面文件（网页示例）。2．网页的类型根据页面内容可以分首页、主页、专栏网页、内容网页等类型；按制作技术分为静态网页与动态网页。1.1.1网页1.1网页和网站1.1.2网页——静态网页1.1网页和网站（1）静态网页文件以.htm、.html、.shtml等常见形式为后缀，而不含有“？”；（2）网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页都固定内容地保存在网站服务器上；静态网页是一个独立不变的文件。（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；（4）静态网页没有数据库的支持，在网站制作和维护方面工作量较大；（5）网页上能动的元素只是一种动态效果，不等于动态网页。1.1.1网页——动态网页1.1网页和网站(1)动态网页以asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在某些动态网页网址中有一个标志性的符号——“？”。(2)动态网页的内容是可根据某种条件的改变而自动改变，能与服务器端交互信息，如计数器、聊天室、论坛…(3)动态网页以数据库技术为基础，并可读写服务器端的文件，大大降低网站维护的工作量;(4)动态网页技术可以实现更多的功能，如用户注册登录、在线调查管理、企业事务处理等等;(5)动态网页当用户请求时先由服务器运行完得到结果后才返回一个完整的（静态）网页给客户端浏览器;动态网页是存于服务器的文件与浏览在客户端的文件不相同的两个文件。网站就是把一些网页等信息文件通过超链接的形式关联起来形成的信息文件的集合。信息可以是网页形式也可以是其他的文档形式。网页与网站的区别与联系：网站是一个文件夹，其中的文件不仅是网页还有网站所需的其他文件（素材）或文件夹。网页是一个页面文件，用来发布各种信息。网页是网站的构成要素，是网站信息发布与表现的一种主要形式；网站是网页通过超链接形成的集合。1.1.2网站1.1网页和网站1.1.3网页浏览过程1.1网页和网站Internet应用服务器数据库服务器图1.2Web网页浏览过程客户机客户浏览器服务器反馈信息浏览器发出http请求脚本程序Html文档ASP或CGI程序1.2网页中的主要元素•网页的基本要素一般包括：文字、图像、动画和链接标志等，除此之外，网页的元素还包声音、多媒体和视频等。1.2网页中的主要元素Flash动画导航栏GIF动画文字表单图片超级链接1.3网站设计的基本流程1.3网站设计的基本流程1.3.1网站的种类按照主体性质不同分为：政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其它非盈利机构网站以及其它类型等。1.3网站设计的基本流程1.3.2网页结构的规划人们上网冲浪看到的网页是千姿百态的，一般来说，一个网站或者具有特定主题的一组网页应该包括3种类型：即主页、索引页和内容页1.3网站设计的基本流程1.3.2网页结构的规划1.主页主页是指个人或单位的基本页面，它是某一Web节点的起始点。主页是整个网站或者一组网页的入口。用户可以通过主页提供的线索访问其他页面的信息和资源。在浏览器URL栏中输入网址显示网站主页。1.3网站设计的基本流程1.3.2网页结构的规划2.索引页索引页即网站中的导航页，为用户提供网站或者一组网页的索引，帮助用户较快地找到想要获取的信息。索引页的作用相当于一本书的目录。图书目录可以告诉读者这本书的内容和具体页数。同样，索引页可以告诉用户这个网站或这组网页的内容，并且通过单击索引页上的索引链接就能很快找到相应的具体内容。1.3网站设计的基本流程1.3.2网页结构的规划3.内容页内容页是表达网站中相应主题具体内容的网页，相当于书的正文。它提供了网站的具体内容，是网站的主体。在这些内容页中既可以用文本来表现网站每个主题的具体内容，也可以用各种图片、动画、影视片段或插件来表现具体内容。1.3网站设计的基本流程1.3.3网页外观的设计网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型等10种。1.骨骼型网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既有条理性，又活泼而富有弹性。下图综合运用多种分栏形式。1.3网站设计的基本流程1.3.3网页外观的设计1.3网站设计的基本流程1.3.3网页外观的设计2.满版型页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。1.3网站设计的基本流程1.3.3网页外观的设计3.分割型把整个页面分成上下或左右两部分，分别安排图片和文字。1.3网站设计的基本流程1.3.3网页外观的设计4.中轴型沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。1.3网站设计的基本流程1.3.3网页外观的设计5.曲线型图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏1.3网站设计的基本流程1.3.3网页外观的设计6.倾斜型页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。1.3网站设计的基本流程1.3.3网页外观的设计7.对称型对称的页面给人稳定、严谨、庄重、理性的感受。1.3网站设计的基本流程1.3.3网页外观的设计8.焦点型焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。1.3网站设计的基本流程1.3.3网页外观的设计9.三角型网页各视觉元素呈三角形排列。1.3网站设计的基本流程1.3.3网页外观的设计10.自由型自由型的页面具有活泼、轻快的风格。1.3网站设计的基本流程1.3.3网站设计原则与标准一个优秀的页面应考虑到以下3个方面:内容、速度、风格。网站风格设计决定了网站为浏览者提供的第一印象与直观反映，是网站吸引浏览者的重要参照指数之一，和网站内容与网站功能具有相同的重要地位。1.色彩搭配·白色和黑色背景的网页颜色搭配最方便。·亮色与暗色配合最容易突出画面，如黑与白，红与黑，黄与紫。·近似颜色搭配能给人一种柔和的感觉，如墨蓝与淡蓝，深绿与浅绿。·一个页面最好有一个主色调，而且色彩最好不要超过五种，最好采用同一个色系。1.3网站设计的基本流程1.3.3网站设计原则与标准一个优秀的页面应考虑到以下3个方面:内容、速度、风格。2.页面布局页面布局一般要遵循以下原则：•将网站徽标(Logo)尽可能的放在每个页面上最突出的位置。•突出网站的标准色彩。•总结一句能反映网站精髓的宣传标语。•相同类型的图像采用相同效果。•最好所有页面都采用相同或相似的排列方式，这样给人一种整齐划一的感觉。•每个页面的版面也可以根据内容的要求有一定的特点，但是版面之间应该有一定的联系和继承。1.3网站设计的基本流程1.3.3网站设计原则与标准一个优秀的页面应考虑到以下3个方面:内容、速度、风格。3.页面大小•大多数情况下，页面总是在800×600或1024×768的全屏幕方式下浏览的，页面宽度应控制在整屏宽度，页面长度可稍长于整屏长度。•对于较长的页面最好拆分成几个页面进行链接。•为了保证下载时间，对于大多数页面来说，网页上所有元素(包括图像、组件、HTML文件等)的大小应该小于100KB。1.3网站设计的基本流程1.3.3网站设计原则与标准一个优秀的页面应考虑到以下3个方面:内容、速度、风格。4.文字格式最适合于网页正文显示的字体大小为12磅左右，或用CSS设计。字体可以更充分地体现设计中要表达的情感。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。