部分网页设计基础.ppt

《部分网页设计基础.ppt》由会员分享，可在线阅读，更多相关《部分网页设计基础.ppt（34页珍藏版）》请在三一办公上搜索。

1、第1章 网页设计基础,1.1 WWW的基本概述1.2 网页设计相关概念1.3 HTML语言1.4 一个简单的HTML实例,1.1 WWW的基本概述,WWW是World Wide Web的缩写，是建立在Internet上的信息资源网络，具有以下特点：是一种超文本链接信息系统是图形用户界面，内容不局限于文本形式与系统平台无关是分布式的可动态、及时更新网页信息采用交互式的浏览方式,1.1 WWW的基本概述,浏览Web内容是Internet提供的主要服务，它以HTTP协议(Hyper Text Transfer Protocol)在网上传送以HTML(Hyper Text Markup Languag

2、e)语言编写的网页内容，从而进行信息交流。浏览器(Brower)是安装在客户端用于阅读WWW上内容的软件。浏览器有多种，目前常见的有Microsoft的 Internet Explorer(简称IE)与Netscape的Communicator(简称NC)。,1.1 WWW的基本概述,WWW的工作过程 WWW是以HTML和HTTP为基础的信息浏览系统，系统结构采用C/S模式。工作步骤如下：通过客户端浏览器输入URL向WEB服务器发出服务请求。服务器解析浏览器请求的URL，找到相应的网页文件。网页中包含JavaScript等脚本，它将随HTML文档一起下载到客户端；若网页中嵌套有ASP等程序，服

3、务器将执行这些程序并将运行结果以HTML标记形式发送给客户端。浏览器解释HTML文档，并显示结果。,1.1 WWW的基本概述,HTTP协议 超文本传输协议(HTTP)是WEB浏览器与WEB服务器应用层之间的通信协议。HTTP会话过程包括4个步骤：建立链接(connection)。发送请求(request)。响应请求(response)。关闭链接(close)。,1.2 网页设计相关概念,1.2.1 统一资源定位器(URL)1.2.2 超链接1.2.3 网站1.2.4 网页1.2.5 主页1.2.6 静态网页1.2.7 动态网页1.2.8 网页布局1.2.9 网页设计原则,1.2.1 统一资源定

4、位器(URL),URL(Uniform Resource Locator)：统一资源定位器，即各个网页在Internet上的地址。通俗地讲，URL就是网址，用于指定Internet资源的位置。URL的结构：http:/网站地址/目录路径/文件名称例子：访问怀化学院学报网站的qk/83461A/200901目录路径中的index.shtml。,本节目录,1.2.2 超链接,超链接：实现超文本的主要技术。它指向WWW的资源，如不同站点的网页、同一站点的其它网页、网页的其它段落。作用：在浏览网页时，如果用鼠标单击超链接，就会跳转到超链接所指向的资源，就可以从WEB上下载信息。判断方法：当鼠标的光标箭

5、头移动到超链接上，光标会变成手的形状。,本节目录,1.2.3 网站,网站是一个存放在网络服务器上的完整信息的集合体。网站包含一个或多个网页，这些网页以一定的形式链接在一起，成为一个整体。,本节目录,1.2.4 网页,网页是网站的组成部分，是一张页面，可以看成是一个单一体，是网站的一个元素。网页里可以有文本、图片、声音、视频、动画等元素。文本是构成网页的主体。对文本元素的设计包括字体、字型、颜色、段落设置以及定位等。图片是实现网页图文并茂的主要手段。常用的图形文件格式有GIF、JPEG、PNG、矢量格式。使用图片的原则：图形文件小、数量少，图像质量高，合理使用动画。,本节目录,1.2.5 主页,

6、主页，也称之为首页。主页是一个殊性的网页，是整个网站的起始点和汇总点。主页是浏览者浏览一个网站的入口。,本节目录,1.2.6 静态网页,静态网页，指这个网页不论在何时从何地浏览，都将显示相同的画面和内容，且用户仅能浏览，而无法提供信息给网站，让网站作出响应。静态网页编程语言有HTML、CSS等。HTML(超文本标记语言)是网页设计的基础，是表示网页的一种规范，通过标记符来定义网页内容的显示格式；CSS(层叠样式表)技术是HTML功能的扩展，使用它能设计出更具表现力的网页。在网页中添加相关的动画，并不代表它不是静态网页。,本节目录,1.2.7 动态网页,动态网页，是指网页能够按照用户的需求做出动

7、态响应。常见的动态网页有留言板、论坛等。常用的网页动态/特效脚本语言有JavaScript和VBScript。其中JavaScript是一种基于对象的、动态的、跨平台的、具有简单性与安全性的脚本语言，简单而功能强大，主要表现在：(1)制作网页特效；(2)实现表单数据的客户端校验；(3)窗口动态操作。,本节目录,1.2.8 网页布局,影响网页质量的因素，除了色彩搭配、文字变化、图片处理外，还有一个更重要的因素：网页布局。页面布局的步骤：(1)网页构思：版面布局要考虑整体风格，参考他人网站，粗略勾画布局轮廓，设计多个方案，择优选择；(2)初步填充内容：将主要内容放在网页中，突出重点；(3)细化：确

8、定主要元素后，再考虑文字、图像、表格等页面元素的排版布局。,本节目录,1.2.8 网页布局,在页面布局的过程中应掌握以下原则：(1)平衡性：文字、图像等元素的空间占用比例要协调、色彩要平衡；(2)对称性：整体上要对称，局部上要有所变化；(3)对比性：不同的形状、颜色要相互对比，会形成鲜明的视觉效果，如黑白对比、圆形与方形的对比。(4)疏密度：网页要做到疏密有度，不要整体一个样式。适当使用各种排版的技巧制造一些变化的效果。,本节目录,1.2.8 网页布局,常见的布局样式：(1)T字形：页面最上方是广告条，下方左面是菜单，右面显示页面内容，整体类似英文T字；(2)口字形：上下是广告条，左边是菜单，

9、右边是友情链接，中间是页面内容，布局类似一个方框；(3)对称形：网页整体呈上下或左右对称布局。(4)海报形：布局像海报一样，中间是一幅很精美的图片，四周点缀着一些图片与文字的链接。,本节目录,1.2.9 网页设计原则,网页设计应掌握以下原则：(1)页面力求精简：页面简洁醒目，颜色不宜过深，图片不宜过大过多；(2)巧妙安排图形图像：利用图片的视觉效果使页面生动，吸引浏览者；(3)善于借鉴信息：参考、应用Internet上现成的信息，可使网页制作收到事半功倍的效果。(4)内容通俗易懂：内容丰富，容易查找，易读易懂。(5)页面以小为好，恰到好处：满足信息量和速度的需求。,本节目录,1.3 HTML语

10、言,1.3.1 编辑与运行环境1.3.2 基本语法结构及文档结构1.3.3 书写注意事项,1.3.1 编辑与运行环境,编辑器：HTML没有自己专用的编辑器，任何文本编辑器都可以作为它的编辑器。在windows自带的记事本或者可视化网页制作软件的代码视图中都能够直接编写代码。运行环境：只需WEB浏览器，在其地址栏中输入HTML文件地址，或双击本地HTML文件的图标，即可浏览网页内容。,本节目录,1.3.2 基本语法结构及文档结构,HTML语法由标签和属性组成。标签分为单独标签和成对标签。单独标签语法格式：，如、。成对标签语法格式：网页内容属性：用来控制HTML标签中网页内容的相关性质。带属性标签

11、的语法为：网页内容。,本节目录,HTML文档的基本结构,/表示HTML文档开始/网页头部开始，网页标题/网页标题，只能出现一次/版权等信息/网页头部结束/网页主体开始 网页正文/网页主体结束/表示HTML文档结束,本节目录,HTML文档树形结构图,一个简单案例,欢迎来到我的个人网页 网页内容,本节目录,运行效果图,1.3.3 书写注意事项,元素名称要用“”这对尖括号括起来，并且结束标记总是在开始标记前加一个“/”斜杠。标签与标签之间按一定条件是可以嵌套的。源代码不区分大小写，如、都正确。回车键和空格键在运行时不起作用，为使源代码清晰可读，建议不同的标记之间应回车加以区分。属性值可写在一对单引号

12、或双引号中，也可直接书写，如。注释代码以结束，便于阅读。,1.4 一个简单的HTML实例,1.4.1 网页的文字颜色属性text1.4.2 网页背景颜色属性bgcolor1.4.3 网页背景图属性background1.4.4 链接文字颜色属性 link,vlink,alink1.4.5 上边距属性 topmargin1.4.6 左边距属性 leftmargin1.4.7 简单案例,1.4.1 网页的文字颜色属性text,text属性可以改变整个页面默认文字的颜色，在没有对文字颜色进行局部定义时，该属性对页面中所有文字产生作用。基本语法：颜色表示方式有：十六进制值、十进制RGB值、英文颜色名称

13、。如红色为red或者#ff0000。,本节目录,1.4.2 网页背景颜色属性bgcolor,bgcolor属性用来设置网页的背景颜色。基本语法：颜色的取值与text类似。,本节目录,1.4.3 网页背景图属性background,background属性用来设置网页的背景图片。基本语法：文件名：尽量用英文或拼音来表示，避免多语言国际化问题。,本节目录,1.4.4 链接文字颜色属性link,vlink,alink,超链接文字的颜色属性共有3个link属性：表示未访问过的超链接文字的颜色；alink属性：表示活动的超链接文字的颜色；vlink属性：表示已访问过的超链接文字的颜色。基本语法：,本节目录,1.4.5 上边距属性 topmargin,topmargin属性用来设置网页的上边距，即网页内容和浏览器上边框之间的距离，单位为像素。基本语法：,本节目录,1.4.6 左边距属性 leftmargin,leftmargin属性用来设置网页的左边距，即网页内容和浏览器左边框之间的距离，单位为像素。基本语法：,本节目录,1.4.7 简单案例,欢迎来到我的个人网页 欢迎来到我的站点,本节目录,效果图,