搜索
1网页设计授课教师:2主要学习内容网站设计基础知识Dreamweaver、Fireworkshtml语言如何学习这门课程多实践，多动手多参考优秀网站：如网易，sohu31.1网页设计相关知识网页的概念超文本(Hypertext)网站的概念网页浏览原理网页组成要素网页编辑工具网页布局网页的页面与版面4万维网(WorldWideWeb)并非某种特殊的计算机网络。万维网是一个大规模的、联机式的信息储藏所，英文简称为Web。下图说明了万维网提供分布式服务的特点。5万维网是一个分布式的超媒体(hypermedia)系统，它是超文本(hypertext)系统的扩充。万维网以客户服务器方式工作。客户程序向服务器程序发出请求，服务器程序向客户程序返回客户所要的万维网文档。在一个客户程序主窗口上显示出的万维网文档称为页面(page)。7网页的概念网页(WebPage)：是通过发布的包含有文本、图片、声音、动画等多媒体信息的页面，它是网站最基本的组成单位。众多的网页有机地集合在一起就组成了网站。网页的主要类型HTML(HyperTextMarkupLanguage)全称超文本标记语言，利用标记（tag）来描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本编辑器都可以对它进行编辑，与VB、C++等编程语言有着本质上的区别。ASP(ActiveServerPages)中文名为动态服务器主页,它是一种应用程序环境，可以利用VBscript或JavaScript语言来设计，主要用于网络数据库的查询与管理。JSP(JavaServerPage)JSP与ASP非常相似。不同之处之一在于ASP的编程语言是VBScript之类的脚本语言，而JSP使用的Java。8静态网页与动态网页静态网页纯粹HTML格式的网页每个网页都有一个固定的URL，网页URL以.htm、.html、.shtml等常见形式为后缀，且不含有“?”也可以出现各种动态效果动态网页以数据库技术为基础，随不同客户、不同时间，返回不同的网页后缀通常是asp、aspx、jsp、php等，并且通常在URL中带有”？”9静态网页动态网页中国网站的首页12超文本(Hypertext)超文本(Hypertext)：具有超级链接功能的文本文件叫超文本。超文本文件中的某些字、符号或短语起着“热链路”（Hotlink）的作用，在显示出来时其字体或颜色发生变化或者标有下横线、以区别于一般的正文.13网站的概念网站：服务器上相互链接的一系列网页组成一个网站（WebSite）。网站是上的一个结点。如果输入地址时仅指定地址，而不加路径信息，则将打开网站默认的首页（HomePage），也称为主页。首页是一个网站中最重要的网页，通常包含最重要的信息以及指向各分栏目的超链接。14网页浏览原理其工作步骤如下：（1）用户启动客户端浏览器，在浏览器地址栏输入想要访问网页的URL，浏览器软件通过http协议向URL地址所在的Web服务器发出服务请求。（2）服务器根据浏览器软件送来的请求，把URL地址转化成页面所在服务器上的文件路径，找出相应的网页文件。（3）当网页中仅包含html文档，服务器直接使用http协议将该文档发送到客户端；如果html文档中还包含有JavaScript或VbScript脚本程序代码，这些代码也将随同html文档一起下载；如果网页中还嵌套有CGI或ASP程序，这些程序将由服务器执行，并将运行结果发送给客户端。（4）浏览器解释html文档，并将结果在客户端浏览器上显示。15网页包含的元素文本图像动画音频视频16文本文本是非常重要的网页元素之一，是网页中信息的主要载体。文字、字母、数字和符号等都可以称为文本。与漂亮的图像、优美的动画、悦耳的声音和有声有色的视频相比，文本在网页中似乎是最普通不过了，但文本却是用户创建网页应该考虑的关键因素，因为文本是表述信息的最完备的方式，绝大多数信息都是通过文本传递给浏览者的。17图像图像是站点中比较重要的元素，网页的设计和创意都离不开图像的使用和处理。一个欣赏性较好的站点应有清新悦目的画面，能够吸引读者有兴趣浏览下去。同时，图像可以传递文字所无法表达的特定的信息，在Web上的大多数网页都使用图像来图文并茂地对内容加以介绍。网页中的图像既有简单的彩色背景，也有实物的真实照片。总之，根据不同的需要，配备不同的图像加以说明，但从做网页的角度来讲，网页上的图像可以分为两大类。一类纯粹是网页本身的需要，起增添网页色彩的作用，它并不传给读者特定的信息，如某些网页背景图像、表格背景图像等。另一类是行文的需要，配合文本向读者传递信息，这就是所说的图文并茂，或者利用图像单独向读者传递信息，如图片新闻。18动画动画是现代网站的重要特色，是网页制作技术的重要组成部分。在网页中，常见的动画类型有GIF动画、Flash动画等，使用编程的方法也可以制作动画。目前，网页中最流行的动画是Flash动画。Flash动画一般具有文件容量小、传输速度快、不失真、边下载边播放的特点，还具有交互性优势。Flash动画具有崭新的视觉效果，已经成为一种流行的艺术表现形式。19音频•MP3具有压缩程度高、音质好的特点，是目前最为流行的一种音乐文件，在网上有很多可以在线收听或下载MP3的站点。•ASF和WMA都是Microsoft公司针对Real公司开发的新一代网上流式数字音频压缩技术，同时兼顾了保真度和网络传输需求，所以具有一定的先进性。•WAV是MicrosoftWindows系统提供的音频格式，由于Windows本身的影响力，这个格式已经成为了事实上的通用音频格式。•real格式是RealNetworks公司网络音频和视频解决方案，具有很高的压缩比，使用流式（streaming）播放媒体技术，从而使人们能够在网上实时收听音频及收看视频。20音频21视频•在网页中添加视频文件可以大大增加站点的可读性，已成为站点多媒体特性的重要体现。现在，能够在网络上运行的视频文件类型也日益丰富。•AVI（.AVI）是音频视频交错（AudioVideoInterleaved）的英文缩写，它是Microsoft公司开发的一种符合RIFF文件规范的数字音频与视频文件格式。•MPEG文件（.MPEG/.MPG/.DAT）是运动图像压缩算法的国际标准，它采用有损压缩方法减少运动图像中的冗余信息，同时保证每秒30帧的图像动态刷新率，已被几乎所有的计算机平台共同支持。22了解网页制作工具常用的网页编辑软件有FrontPage和Dreamweaver等。Dreamweaver因其功能全面、操作灵活、专业性强，而受到网页制作人员的青睐。在制作网页时，经常使用的图像处理软件有Fireworks和Photoshop。Flash是目前最常用的网页动画制作软件。用Flash制作的动画文件小，利于网上发布，而且还能制作出具有交互功能的动画，并能很方便地与网页建立链接。23网页布局类型国字型匡字型三字型川字型其他类型24国字型国字型也称同字型，即最上面是网站的标题以及横幅广告条，接下来是网站的主要内容，最左侧和最右侧分列一些小条目内容，中间是主要部分，最下面是网站的一些基本信息、联系方式、版权声明等。这是使用最多的一种结构类型。25匡字型匡字型也称拐角形，这种结构与国字型结构很相近，上面是标题及广告横幅，下面左侧是一窄列的链接等，右侧是很宽的正文，下面也是一些网站的辅助信息。26三字型这是一种比较简洁的布局类型，其页面在横向上被分隔为3部分，上部和下部放置一些标志、导航条、广告条和版权信息等，中间是正文内容。27川字型整个页面在垂直方向上被分为3列，内容按栏目分布在这3列中，最大限度地突出栏目的索引功能。28其他类型常见的网页布局类型还包括标题文本型、框架型、封面型、Flash型等。标题文本型即页面内容以文本为主，最上面一般是标题，下面是正文的格式。框架型布局通常分为左右框架型、上下框架型和综合框架型。由于兼容性和美观等原因，专业设计人员很少采用这种结构。封面型基本出现在一些网站的首页，大部分由一些精美的平面设计和动画组合而成，在页面中放几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型的网页布局大多用于企业网站或个人网站。Flash型是指整个网页就是一个Flash动画，这是一种比较新潮的布局方式。其实，这种布局与封面型在结构上是类似的，无非使用了Flash技术。2930网页页面与版块布局的设计通常需要注意网站的页面大小以及各种版块的安排1．网页页面大小合理地设置页面尺寸，可以避免用户频繁地拖动滚动条。目前国内的上网者习惯使用是微软公司的InternetExplorer浏览器（简称IE浏览器）。在屏幕分辨率为1024×768时，不同版本的IE浏览器的屏幕大小是不相同的。以下是各版本IE浏览器页面尺寸表。30IE浏览器版本屏幕宽度屏幕高度IE6.01003px600pxIE7.0（菜单栏显示状态）1003px594pxIE7.0（菜单栏隐藏状态）1003px620pxIE8.0（菜单栏隐藏状态）1003px626pxIE8.0（菜单栏显示状态）1003px598px31网页页面与版块2．网页版块构成网页是由各种版块构成的。Internet中的网页内容各异。然而多数网页都是由一些基本的板块组成的，包括Logo、导航条、Banner、内容版块、版尾等。3132网页版面布局技术分析表格布局：简单但是下载速度慢框架布局：兼容性不好CSS技术：可以精准定位元素但有些复杂33网页版面布局原则主次分明，中心突出大小搭配，相互呼应图文并茂，相得意彰34版面布局的步骤草案：在白纸上将景象画上去粗略布局：将功能模块安置到页面上定案：将粗略布局精确化，具体化35LogoLogo是企业或网站的标志，其作用是标识网站的名称，并为用户提供识别的标记。绝大多数网站都有一个独特的Logo。Logo对于网站而言是唯一的。3536Logo的大小一、120×120，这种广告规格适用于产品或新闻照片展示。二、120×60，这种广告规格主要用于做LOGO使用。三、120×90，主要应用于产品演示或大型LOGO。四、125×125，这种规格适于表现照片效果的图像广告。五、234×60，这种规格适用于框架或左右形式主页的广告链接。六、392×72，主要用于有较多图片展示的广告条，用于页眉或页脚。七、468×60，应用最为广泛的广告条尺寸，用于页眉或页脚。八、88×31，主要用于网页链接，或网站小型LOGO。371.2.2导航条导航条是网站的重要组成元素。其可以索引网站内容，帮助用户快速访问网站功能。导航条内包含的是网站功能的按钮或链接，其项目的数量不宜过多。通常同级别的项目数量以3到7个为宜。一个网站往往可包含多个级别的导航条，例如主导航条、登录导航条、友情链接导航条等。有时导航条也会与banner结合使用，通过图像增强导航条的表现力。3738BannerBanner为网页中的广告条，又被称作旗帜、网幅或横幅，是一种可以由文本、图像和动画相结合而成的网页栏目。国际广告联盟的“标准与管理委员会”联合广告支持信息和娱乐联合会等国际组织，推出了一系列网络广告宣传物的标准尺寸，被称作“IAC/CASIE”标准，共包括7种标准的Banner尺寸。在设计Banner时，既可遵循以上标准，以方便网站的广告用户设计广告。同时，也可灵活根据网页的版式对其尺寸进行调节，以符合网页整体的风格和布局。38名称Banner面积摩天大楼形120px×600px中级长方形300px×250px正方形弹出250px×250px宽摩天大楼160px×600px大长方形336p