网页设计与制作基础.ppt

1、网页设计与制作李顺联系电话:13616338377内容概要一、一、WWW的工作原理的工作原理二、二、网站制作流程网站制作流程三、三、Web标准标准四、网页的组成元素四、网页的组成元素五、课程主要内容五、课程主要内容一、WWW的工作原理客户端客户端服务器端服务器端发出请求发出请求发回网页发回网页1)1)什么是静态网页什么是静态网页所谓”静态”指的是网站的网页内容”固定不变”,当用户浏览器通过互联网的http协议向web服务器请求提供网页内容时,服务器仅仅是将原已设计好的html文档传送给用户浏览器.如果网站维护者要更新网页的内容,就必须手动更新所有相关的html文档.静态网页的扩展名：htm或h

2、tml1.1 静态网页静态网页2)2)2)2)静态网页示例静态网页示例静态网页示例静态网页示例3)3)3)3)静态网页的工作原理静态网页的工作原理静态网页的工作原理静态网页的工作原理接受请求找到静态网页发送网页服务器端客户端4)4)静态网页源代码显示方法静态网页源代码显示方法查看查看/源文件源文件1.2 1.2 动态网页动态网页由用户生成内容1)1)1)1)什么是动态网页什么是动态网页什么是动态网页什么是动态网页vv所谓动态网页，就是服务器端可以根据客户端的不同所谓动态网页，就是服务器端可以根据客户端的不同请求动态产生网页内容。请求动态产生网页内容。vv两个显著特点：两个显著特点：可以动态产生

3、页面可以动态产生页面支持客户端和服务器端的交互功能支持客户端和服务器端的交互功能2)2)2)2)动态网页示例动态网页示例动态网页示例动态网页示例BBS论坛论坛留言板留言板聊天室聊天室3)3)3)3)动态网页的工作原理动态网页的工作原理动态网页的工作原理动态网页的工作原理接受请求找到动态网页发送网页服务器端执行程序生成HTML页面客户端4)4)动态网页编程技术动态网页编程技术vASP(Active Server Pages)，微软产品,扩展名.aspvPHP（Hypertext Preprocessor），网络小组开发维护,扩展名.phpvJSP(Java Server Pages)，由SUN公

4、司推出,扩展名.jspvASP.NET，微软产品,扩展名.aspx课程定位v静态网页的设计与制作评价方式平时成绩考试二、网站制作流程二、网站制作流程1.网站的整体规划和设计主题和内容的确定网站栏目的确定网站目录结构的设计网站链接结构的设计网站的风格设计2.网站素材的准备和收集3.网页的设计制作页面美工设计静态页面制作程序开发4.后期维护网站目录结构的设计网站目录结构的设计依据栏目创建目录结构小型网站目录结构的设计在设计网站目录结构时要根据情况灵活处理。如，课程管理系统StudyOA创建网站注意事项创建网站注意事项建立树型文件夹保存文档创建网站所需的所有资源均应保存于站点文件夹中合理的为文件命名

5、避免使用中文为文件夹、文件命名 网页设计与制作不仅是一种技能，更是技术与艺术的高度统一。它要求网页设计者既要掌握网页制作的技术，更要具有相应的艺术修养。网站的风格设计网站的风格设计大型网站开发群体的人员组成大型网站开发群体的人员组成总体策划人员网络媒体技术人员美工编辑人员网页制作人员网络数据库开发人员网站测试人员网站管理人员三、三、Web标准标准1.1.什么是什么是webweb标准标准web标准是由W3C(World Wide Web Consortium，中文译名万维网联盟)和其他标准化组织制定的一套规范集合。web标准的目的在于创建一个统一的用于web表现层的技术标准，以便通过不同浏览器或

6、终端设备向最终用户展示信息内容。2.web标准的构成标准的构成Web标准结构表现行为结构用来对网页中用到的信息进行整理与分类，用于结构化设计的web标准技术主要有html、xml、xhtml表现技术用于对已经被结构化的信息进行显示上的控制，包含版式、颜色、大小等样式控制，目前用于表现的web技术标准主要就是css技术行为是对整个文档内部的一个模型进行定义及交互行为的编写,用于编写用户可以进行交互式操作的文档,表现行为的web标准技术主要有DOM、ECMAScript（javascript的扩展脚本语言）可扩展标记语言（Extensible Markup Language）XML1.0The E

7、xtensible HyperText Markup Language(可扩展标识语言)。XHTML1.0,在HTML4.0的基础上，用XML的规则进行扩展，得到了XHTML3.3.什么样的网页是符合标准的什么样的网页是符合标准的真正符合标准的网页设计是指能够灵活地使用web标准对web内容进行结构、表现与行为的分离结构、表现与行为的分离v符合web标准的布局方式：页面里有的仅仅是内容（文字和图片，图片是指内容中的图片，而非修饰图片），没有任何修饰，它看上去就像一张单调的页面。这些文字和图片仅仅是依次罗列下来，没有任何样式。然后加入表现，将所有修饰的图片做为背景，用CSS来定义每一块内容的位置

8、、字体、颜色等。v当抽掉css文件，剩下的就是最本质的内容。这样才能在文本浏览器、手机、PDA等设备中阅读，才能随时修改css实现改版。四、网页的组成元素p文本p图像p动画p超链接p表格p表单p音频p视频1.文本文本是网页存在的基础.在网页中,网页的设计与制作者可以通过设置字体、字号、颜色等来改变文本的视觉效果。1)文字风格：风格要与内容性质相吻合.例如:政府网页其文字具有庄重和规范的特质,字体造型规整而有序,简洁而大方.休闲旅游类内容网页,文字编辑应具有欢快轻盈的风格,字体生动活泼,跳跃明快,有鲜明的节奏感,给人以生机盎然的感受.个人网页则可结合个人的性格特点及追求，别出心裁，给人一种独特个

9、性的印象。2)文字的大小一般情况下，网页正文可以使用12px（9磅）-16px（12磅）大小的文字。最适合网页正文显示的字体大小为12磅（16px）左右，现在很多的综合性网站，由于在一个页面中需要安排的内容较多，通常采用9磅(12px)的字号。3)字体的选择网页设计者可以用字体来更充分的体现设计中要表达的感情。粗体字强壮有力，有男性特点，适合机械、建筑业等内容。细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感。字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。从加强平台无关性的角度来考虑,正文内容最好采用默

10、认字体.宋体基本上是目前显示中文唯一的通用web字体4)行距行距的常规比例为10:12,字10,行距12.适当的行距会形成一条明显的水平空白条,以引导浏览者的目光,行距过宽则会使一行文字失去较好的延续性.5)字距现代网页设计比较流行把标题文字字距拉开或变窄的排列方式，以体现轻松、舒展、娱乐或抒情的版面，也常通过压扁文字或加宽行距来体现。运用字距与行距的宽窄同时做综合变化，这样能够给作品版式增加空间层次和弹性。图形图象必须完全符合网页的主题，并以创新的构思和强烈的个性，使主题与表现两者较好的统一。2.图像制作网页时可用的图片格式：制作网页时可用的图片格式：GIF图形采用非失真的压缩方式,在压缩的

11、过程中,像素信息不会被牺牲掉,被牺牲的是图形的颜色,GIF图片文件最多只能保存256色,对于颜色不多、线条清楚的图，采用GIF格式。GIF图像支持透明的背景色和动画格式。vJPG/JPEG图片文件采用失真的压缩方式，图片在压缩的过程中，图形的像素信息会被减去一些，但图片的颜色不会丢失。因此，全彩的连续色调、没有明显边缘的图，如风景照，适合采用JPG文件格式显示。其不支持透明的背景色和动画格式。vPNG是Fireworks的默认文件格式，支持高级别无损耗压缩，受最新的web浏览器支持,支持透明图像的制作。3.动画 网页动画主要分为flash动画和gif动画。其中，flash动画运用的最广泛，gi

12、f动画通常用于制作简单的、只有几帧图片的交替动画。4.超链接所谓超链接是指从一个网页指向一个目标的链接关系。这个目标可以是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件甚至是一个应用程序。它表明了网页文件之间的相互链接关系。5.表格表格的两大用途：显示数据和排版6.表单7.音频网页中的音频文件格式：网页中的音频文件格式：WAV格式：无损的音乐。格式：无损的音乐。完全未经压缩，10MB/分钟。Windows系统使用的标准数字音频格式。MP3格式：能够以较小的比特率、较大的压缩比达到近乎完美的CD音质。MIDI格式。文件一般较小，常用于提供背景音乐。WMA格式：适合在网络上在线播放Rea

13、lAudio：流动的旋律。流音频格式，主要用于提供网络实时广播。Real的文件格式主要有：ra、rm、rmx等。8.视频网页中的视频文件格式：ASF、WMV、RM、RMVB网页设计小贴士1）符合视觉规律文字横向编排由于人眼的视线横向移动比竖向移动快而且不易疲劳，因此将文字尽量横向排布.页面尽量保持横向尺寸固定，竖向尺寸不固定，目的是使人们能连续不间断地浏览页面。需要注意的是，应避免页面左右、上下都能滚动，这会给浏览者带来极大的不便。将重要信息置于”最佳视觉区域”在进行网页版式设计中,要考虑将最重要的信息或视觉流程的停留点安排在注目价值高的位置,这就是最佳视觉区域.由于人们习惯于将视线从左到右、

14、从上到下移动，因而视区中的不同位置注目程度不同。视觉区域内上部比下部注目程度高，左侧比右侧更引人注意。2）避免视觉疲劳限制网页长度尽可能将网页限制在1屏以内，即满屏，浏览者不需要拖动滚动条就可以看到下面的导航信息。页面不宜过长，一般控制在13屏，尽量不超过5屏。文字大小适中、行距合理位置的一致如，按照人的阅读习惯，固定导航的位置。免去用户去找导航的麻烦。适量安排多媒体元素 网页中的动画不是越多越好，而是要形成动静相宜的效果，因此需要适量安排多媒体元素，并注意主次关系。合理配色同类色相对比邻近色相对比对比色相对比互补色相对比五、课程主要内容phtml（Hyper Text Markup lang

15、uage)超文本标记语言pCSS（Cascading Style Sheets）层叠样式表pDreamweaver CS4的使用vHTML（Hyper Text Markup language)超文本标记语言vHTML文件的基本结构 1 1 关于关于htmlhtml文件头部文件体部HTML文档vHTML常用标记(n=1、2、3、4、5、6)标题字标记 段落标记 换行标记无序列表标记有序列表标记 分隔线标记 插入图片标记超级链接标记 表格标记插入滚动字幕 添加背景音乐 嵌入视频、音频表单vCSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 H

16、TML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离.vCSS的基本语法 选择符属性：属性值vCSS的使用方法内联式样式表（偶尔使用）内嵌式样式表外部链接式样式表导入外部样式表2 2 关于关于CSSCSSDreamweaver发展版本vMacromedia Dreamweaver 1.0（发布于 1997年12月；Dreamweaver 1.2 承接于 1998年3月）vMacromedia Dreamweaver 2.0（发布于 1998年12月）v Macromedia Dreamweaver 3.0（发布于 1999年12月）vMacromedia Dreamweaver UltraDev 1.0（发布于 2000年6月）vMacromedia Dreamweaver 4.0（发布于 2000年12月）vMacromedia Dreamweaver UltraDev 4.0（发布于 2000年12月）v Macromedia Dreamweaver MX 6.0（发布于 2002年5月）3 关于dreamweavervMacromedia Dream