1001-网页设计.ppt

1、上海理工大学计算机基础教研室,网页设计,课程学习目标学习目的和要求掌握网站规划和设计掌握网页设计,网页和网站的关系页面的基本布局掌握超超级链接设计在网页中插入媒体、嵌入JavaScript代码表单制作软硬件配置和环境WindowsXP平台MicromediaDreamweavercs4(选用),学习目标:了解有关网页的一些基本概念了解网站的基本结构特性和网页的布局了解网页制作的基本工具和开发语言了解站点规划的基本流程,1.1网站与网页,1.网站设计的基本知识2.网页基本构成元素3.网站分类4.网站分类与设计风格5.网站制作步骤,home,1、基本概念:WWW（WorldWideWeb）服务：W

2、orldWideWeb（万维网），简称WWW，是Internet上最重要的信息服务之一，WWW是以Internet上众多WWW服务器所发布的无数网页及它们之间的链接为基础构成的一个庞大的多媒体信息网。WWW信息发布模式：WWW信息发布：采用客户端/服务器（Client/Server）模式。WWW服务器程序运行在WWW服务器上，用于发布存放在WWW服务器中的网页；WWW客户端程序运行在用户计算机上的网页浏览器，通过Internet与WWW服务器进行通信，将网页传送到用户计算机上并显示出来。,下一页,1.网站设计的基本知识,统一资源定位器（UniversalResourceLocator，简称UR

3、L）：是用来指出某项信息的位置及存取方式，以取得各种服务信息的一种标准方法。通信协议：包括HTTP（超文本传输协议）、FTP（文件传输协议）、Gopher（Gopher协议）和News（新闻组）等。,1.网站设计的基本知识,主机名：指要访问服务器的Internet名称。所要访问的文件路径及文件名：它指要访问资源的具体位置。文件传输协议（FileTransferProtocol，简称FTP）：是一种快速、高效和可靠的信息传输方法。,1.网站设计的基本知识,HTTP协议超文本传输协议HTTP（HyperTextTransferProtocol）是WWW服务所使用的信息传输协议，即访问Interne

4、t上的Web页面所用协议。打开Internet上某一网页：HTTP:/如：,上一页,下一页,1.网站设计的基本知识,主机名,超文本标记语言（HyperTextMarkupLanguage，简称HTML）：它是WWW创建超媒体文本的语言，它也是网页创建中最基本的语言，制作的任何一个网页都是基于HTML文本标识的。,1.网站设计的基本知识,超文本标记语言HTMLHTML（HyperTextMarkupLanguage）：HTML文件是WWW中使用的主要文件类型，通常以“.html”或“.htm”为文件后缀。是一种用于描述超文本内容的标签系统，是最基本的网页编写语言。HTML文件使用一些约定的标记对

5、WWW上的各种信息进行标记，这些被标记的信息以网页文件形式发布在Web服务器上，在用户请求的情况下，下载到用户的机器上，用户的浏览器会自动解释这些标记的含义，按照一定的格式在屏幕上显示出来，而HTML标记本身并不在浏览器中显示。,1.网站设计的基本知识,上一页,下一页,网页（WebPage）通过WWW发布的包含有文本、图片、声音、动画等多媒体信息的页面，是WWW的基本单位。网页文件就是普通的文本文件，但规定其后缀为.htm或.html。在IE浏览器中查看网页文件的实际内容：执行菜单栏“查看”|“源文件”命令。,1.网站设计的基本知识,上一页,下一页,1.网站设计的基本知识,网站（WebSite

6、）是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档。网站由众多的网页组成的，它们存储在某一个Web服务器上,上一页,下一页,1.网站设计的基本知识,首页网站的默认页面，也称为主页。Web服务器都有自己默认的主页名称，输入地址时仅指定WWW服务器域名或IP地址时打开的页面就是首页。主页是一个网站最重要的网页，通常包含最新的信息及指向各分栏目的超链接。常见的首页名称有index.htm（index.html）或default.htm（default.html）。,home,上一页,浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源。目前常

7、用的浏览器有:IE、netscape和腾训TT,1.网站设计的基本知识,IP地址：IP地址是一组32位的数字号码，如“84”，这就是上网主机的地址。一个IP地址主要由两部分组成：标识该地址从属的网络号；指明该网络上某个特定主机的主机号。IP地址的分类：A类：（0127）126200万/网B类：（128191）1.6万6万5千台C类：（192223）200万254台,1.网站设计的基本知识,C类：（192223）200万254台,B类：（128191）1.6万6万5千台,A类：（0127）126200万/网,域名：IP地址是一长串的数字号码，这些数字难记又难以理解。为了方便

8、大家理解、记忆，便有了域名的概念。,1.网站设计的基本知识,表单:表单是用于填写申请或提交信息的交互页面。如电子邮箱、主页空间、QQ号码等的申请页面，以及论坛、聊天室、留言簿等。超级链接:这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系。导航条：导航条能十分有效地实现超级链接功能。发布：将制作好的网页上传到服务器的过程即是发布，也称为上传或上载。,1.网站设计的基本知识,2.网页基本构成元素,网页基本构成元素文本：最基本的构成元素，表现信息内容的主体。占用空间小，信息量大超链接：相关网页及其他网络资源之间联系的纽带。图片、动画：静态和动态的图形文件。声音和视频：音乐，在线广播，在线

9、影视信息提交表单：提供网上交互功能的基本元素，用来收集浏览者提供的信息并提交给Web服务器进行处理。,home,门户网站(WebPortal)：英文Portal的意思是大门、停泊站或入口。Web网门户指上网时首先访问的网站。Web网站的拥有者都希望用户一打开浏览器，就直接登录到自己的主页且最好不要离开这个主页。这意味着数以百万计的用户所有的点击都从自己开始，从而使网站拥有较高的访问量，以此吸引最大规模的广告及其他商业机会。人们认为目前AOL是美国最优秀的ISP和ICP，是Web网门户的代表，其次是Yahoo和D。例如各个高校及单位的网站皆为门户网站，如，此为上海理工大学的门户网站，通过这个网站

10、可进入各个院系的网站。,3、网站分类,搜索引擎：主要目的为人们搜索所需的资料和网站。如大家通用的网站和网站。,3、网站分类,个人主页：（此为著名影星李亚鹏的网站）；,3、网站分类,主题网站：根据某一个主题需要而开发的网站，如电子商务网站、视频会议网站、自主学习网站等。教学网站可以说是主题网站的一种，它的目的非常明确。教学网站就是教师、学生等教育部门的相关人员在网上进行教与学、交流等活动的一块园地。,3、网站分类,以上分类纯粹是为了叙事的方便，有时候它们之间并没有一个明确的界限。例如，有的网站既可以是门户网站，又可以是搜索引擎，如雅虎网站，它既是一个搜索引擎，又是一个门户网站。,3、网站分类,4

11、.网站分类与设计风格,新闻门户类,下一页,4.网站分类与设计风格,工商企业类,上一页,下一页,4.网站分类与设计风格,文化教育类,上一页,下一页,4.网站分类与设计风格,运动休闲类,上一页,下一页,4.网站分类与设计风格,游戏娱乐类,上一页,下一页,4.网站分类与设计风格,生活时尚类,上一页,下一页,4.网站分类与设计风格,兴趣爱好类,home,上一页,5.网站制作步骤,home,1.2网站设计,1.网站题材选择及内容的确定2.网站结构设计3.网站风格设计4.确定网站首页的创意设计,home,1.网站题材选择及内容的确定,（1）主题范围不能过大，要有特色。（2）题材最好是自己擅长或者喜爱的内容

12、。,home,2.网站结构设计,(1)确定栏目和版块突出特点设置最近更新、网站指南和交互栏目(2)确定网站的目录结构将所有的文件都放在站点根目录下的相应目录中。按栏目内容建立子目录。每个主要的目录下都建立独立的“images”目录。不要使用中文作为目录或文件的名字，命名的名称不能过长，应简单明了。,下一页,我们研究网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。一般的，建立网站的链接结构有三种基本方式：,(3)确定网站的链接结构,2.网站结构设计,home,线形链接结构：用于组织本身是线性顺序形式存在的信息，可以引导浏览者象翻阅书籍一样按顺序浏览整个网站。优点是网络浏览具有连续性。缺

13、点是当网页量大时，不能灵活的访问。,上一页,下一页,2.网站结构设计,树状链接结构：类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。,(3)确定网站的链接结构,上一页,下一页,非线性链接结构：该类结构主体是树状链接结构，并将小的栏目交叉连接。优点是使网站具有条理，并且可以实现某些相互交叉链接的栏目之间的快速跳转。缺点是如果规划没有做好可能使浏览者在浏览时不知道位于何处。

14、,home,(3)确定网站的链接结构,2.网站结构设计,上一页,下一页,网站链接结构设计常用方法如下：方法一：使用线性链接结构。方法二：在新窗口打开链接指向的网页。方法三：在网页中增加一条关于所处网页位置的栏目，并在位置的说明中加入链接，帮助浏览者明确所处的位置，并快速转向上级网页。即经常看到许多网站页面顶部的，类似这样：“您现在的位置是：首页-网络中心-计算机基础教育-文科计算机基础课课件”,home,上一页,2.网站结构设计,3.网站风格设计,(1)网页色彩的搭配色彩是人的视觉最敏感的东西，网页中色彩的选择和搭配是树立网站形象的关键之一。色彩总的应用原则应该是“总体协调，局部对比”。,下一

15、页,3.网站风格设计,home,(1)网页色彩的搭配,上一页,下一页,3.网站风格设计,home,(1)网页色彩的搭配,上一页,下一页,3.网站风格设计,红色代表热情、活泼、热闹、温暖、幸福、吉祥橙色代表光明、华丽、兴奋、甜蜜、快乐橙色较温和,是一种很活泼、辉煌的色彩.富足的、快乐的色彩.稍加黑则较稳重.蓝橙对比时较生动.黄色代表明朗、愉快、高贵、希望绿色代表新鲜、平静、和平、柔和、安逸、青春蓝色代表深远、永恒、沉静、理智、诚实、寒冷紫色代表优雅、高贵、魅力、自傲白色代表纯洁、纯真、朴素、神圣、明快灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞灰色是色彩中最被动的颜色.受有彩色影响极大,靠邻

16、近的色彩获得自己的生命.近冷暖,近暖则冷.最有平静感（中性）,是视觉中最安静的色彩.有很强的调和对比的作用.黑色代表崇高、坚实、严肃、刚健、粗莽黑与白:非常对立而又有共性,是色彩最后的抽象.能够用来表达富有哲理性的东西.,色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。一般情况下，各种色彩给人的感觉是,home,上一页,下一页,3.网站风格设计,使用单色尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。使用邻近色所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，

17、红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。,(1)网页色彩的搭配,上一页,下一页,使用对比色对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。背景色的使用背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。,上一页,下一页,“T”结构布局所谓“T”结构:就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母“T

18、”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。,(2)确定网站的版面设计,上一页,下一页,“口”型布局所谓“口”结构：就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。也有将四边空出，只用中间的窗口型设计。优点是充分利用版面，信息量大缺点是页面拥挤，不够灵活。,(2)确定网站的版面设计,上一页,下一页,对称对比布局所谓“对称对比”结构：顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉

19、冲击力强缺点是将两部分有机的结合比较困难。,(2)确定网站的版面设计,上一页,下一页,4.POP布局（自由布局）所谓“POP布局”结构：POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点。优点漂亮吸引人。缺点就是速度慢。,(2)确定网站的版面设计,home,上一页,4.确定网站首页的创意设计,首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的“功力”了。所以，首页的设计和制作是绝对要重视和花心思的。首页的制作风格也决定了整个网站将

20、要延续的风格。一般首页设计和制作占整个制作时间相当大的比重。,下一页,4.确定网站首页的创意设计,1、书籍封面式首页,有些大型网站往往有一个书籍封面式的首页，上面只有一个“进入”的链接，点击之后才可进入到网站。这种首页设计精美、考究。,home,上一页,下一页,4.确定网站首页的创意设计,2、期刊杂志式首页,与书刊封面式首页相似，但在首页上有网站全部内容的目录索引，图文并茂，看上去就像期刊杂志的封面。这种首页漂亮、又使网站的主要内容一目了然，是一种值得推荐的形式。,上一页,下一页,4.确定网站首页的创意设计,3、报纸式首页,采用报纸式的首页设计，将栏目索引、功能模块、具体内容一并显示在首页，看

21、上去就像报纸的头版一样。这种首页，多用于电子商务网站、搜索引擎网站和新闻信息网站，速度快、操作简便。,home,上一页,1.3网页制作工具,网页布局工具DreamweaverFrontpage网页美化工具图像处理软件:Photoshop,Fireworks动画制作软件:FLASH,Swish、UleadGIFAnimator,UleadCool3D、3DFlashAnimator、Xara3D,1.4网页开发语言,1、HTML语言2、动态网站开发语言ASP（ActiveServerPages)JSP(JavaServerPages)PHP(PersonalHomePage),1.5网站规划,一

22、、网站制作流程1确定网站主题2搜集资料3规划网站4选择合适的制作工具5制作网页6上传测试7推广宣传,二、网站策划书1网站建设目的及功能定位2网站内容模块规划3网站语言4网站设计风格5网站架设描述,6网站信息布局图,7网站发布与推广8技术支持9网站服务费用10有效期,三、站点评测1美工设计2栏目内容3浏览速度4技术含量5用户兴趣,HTML的概念及基本结构,HTML的概念HTML的基本工作原理HTML结构HTML中的标记HTML的标签与属性,HTML的概念,HTML的英语意思是：HypertextMarkedLanguage，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议

23、规定了浏览器在运行HTML文档时所遵循的规则和进行的操作.,HTML的基本工作原理,HTML(HypertextMarkupLanguage)是一种规范，一种标准，它通过标记符(tag)来标记要显示的网页的各个部分。通过在网页中添加标记符，可以告诉浏览器如何显示网页。浏览器按顺序阅读网页文件(HTML文件)，然后根据内容周围的HTML标记符解释和显示各种内容。常见的网页有静态网页和动态网页两种。静态网页通常以.htm、.html、.shtml、.xml等形式为后缀；动态网页一般以.asp、.jsp、.php、.perl、.cgi等形式为后缀。,HTML的基本工作原理,HTML的基本原理,静态网

24、页与动态网页,一般网页的每一行HTML代码都是在将页放置到服务器之前由设计人员编写的。因为HTML在放置到服务器后不发生更改，所以这种页称为静态页。例如，大多数的个人网站。当Web服务器接收到对静态页的请求时，服务器将读取该请求，查找该页，然后将其发送到请求浏览器，如图所示。,静态网页与动态网页,所谓动态网页，是指根据用户的请求，由服务器动态生成的网页。例如，ASP网页，PHP网页，JSP网页。当Web服务器接收到对动态页的请求时，它将该页传递给应用程序服务器，它读取页上的代码，根据代码中的指令完成页，然后将代码从页上删除。所得的结果将是一个静态页，应用程序服务器将该页传递回Web服务器，然后

25、Web服务器将该页发送到请求浏览器。该过程如图所示。,静态网页与动态网页,应用程序服务器使用户能够使用服务器端的资源（如数据库）。动态页可以指示应用程序服务器从数据库中提取数据并将其插入页的HTML中。例如，搜索页面，电子商务网站等。,头信息标记MyfirstHTMLpage头结束标记正文起始标记HiHowareyou.这是我的第一个HTML程序正文结束标记结束标记,HTML结构,浏览器的结果:,HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。,HTML中的标记,1.在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。2.是HTML文档的头部标签,在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记,用以说明文件的标题和整个文件的一些公共属性。,HTML中的标记,例如，样式表（CSS）定义位于和之间；脚本定义位于之间。,3.嵌套在头部标签中