网页设计与制作基础.ppt

网页设计与制作,李顺 联系电话办公室:F楼310,内容概要,一、 WWW的工作原理 二、网站制作流程 三、 Web标准 四、网页的组成元素 五、课程主要内容,网站=服务器+域名+网页,一、WWW的工作原理,一、WWW的工作原理,客户端,服务器端,发出请求,发回网页,1)什么是静态网页 所谓”静态”指的是网站的网页内容”固定不变”,当用户浏览器通过互联网的http协议向web服务器请求提供网页内容时,服务器仅仅是将原已设计好的html文档传送给用户浏览器.如果网站维护者要更新网页的内容,就必须手动更新所有相关的html文档. 静态网页的扩展名：htm或html,1.1 静态网页,2)静态网页示例,3)静态网页的工作原理,接受请求,找到静态网页,发送网页,服务器端,客户端,4)静态网页源代码显示方法 查看/源文件,1.2 动态网页,由用户生成内容,1)什么是动态网页 所谓动态网页，就是服务器端可以根据客户端的不同请求动态产生网页内容。 两个显著特点： 可以动态产生页面 支持客户端和服务器端的交互功能,2)动态网页示例,BBS论坛,留言板,聊天室,3)动态网页的工作原理,接受请求,找到动态网页,发送网页,服务器端,执行程序 生成HTML页面,客户端,4)动态网页编程技术,ASP(Active Server Pages)，微软产品,扩展名.asp PHP （Hypertext Preprocessor），网络小组开发维护,扩展名.php JSP(Java Server Pages)，由SUN公司推出,扩展名.jsp ASP.NET，微软产品,扩展名.aspx,4)动态网页编程技术,ASP(Active Server Pages)，微软产品,扩展名.asp PHP （Hypertext Preprocessor），网络小组开发维护,扩展名.php JSP(Java Server Pages)，由SUN公司推出,扩展名.jsp ASP.NET，微软产品,扩展名.aspx,课程定位,静态网页的设计与制作,评价方式,平时作业 考试,二、网站制作流程,1.网站的整体规划和设计 主题和内容的确定 网站栏目的确定 网站目录结构的设计 网站链接结构的设计 网站的风格设计 2.网站素材的准备和收集,3.网页的设计制作 页面美工设计 静态页面制作 程序开发 4.后期维护,网站目录结构的设计,依据栏目创建目录结构,小型网站目录结构的设计,在设计网站目录结构时要根据情况灵活处理。如，课程管理系统StudyOA,创建网站注意事项,建立树型文件夹保存文档 创建网站所需的所有资源均应保存于站点文件夹中 合理的为文件命名 避免使用中文为文件夹、文件命名,网页设计与制作不仅是一种技能，更是技术与艺术的高度统一。它要求网页设计者既要掌握网页制作的技术，更要具有相应的艺术修养。 主要考虑配色和版式,网站的风格设计,网页设计师是指精通Photoshop，Corldraw,Frontpage,Dreamweaver等多项网页设计工具的网页设计人员。网页设计师可以将平面设计中的审美观点套用到网站设计上面来（其区别是动态网页的制作是平面设计不能达到的，它是一种审美方式的延伸）。 网页如门面，小到个人主页，大到大公司、大的政府部门以及国际组织等在网络上无不以网页作为自己的门面。当点击到网站时，首先映入眼帘的是该网页的界面设计，如内容的介绍、按钮的摆放、文字的组合、色彩的应用、使用的引导等等。这一切都是网页设计的范畴，都是网页设计师的工作。,大型网站开发群体的人员组成,总体策划人员 网络媒体技术人员 美工 编辑人员 网页制作人员 网络数据库开发人员,网站测试人员 网站管理人员,三、Web标准,1.什么是web标准 web标准是由W3C(World Wide Web Consortium，中文译名万维网联盟)和其他标准化组织制定的一套规范集合。 web标准的目的在于创建一个统一的用于web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。,2.web标准的构成,3.什么样的网页是符合标准的 真正符合标准的网页设计是指能够灵活地使用web标准对web内容进行结构、表现与行为的分离,符合web标准的布局方式：页面里有的仅仅是内容（文字和图片，图片是指内容中的图片，而非修饰图片），没有任何修饰，它看上去就像一张单调的页面。这些文字和图片仅仅是依次罗列下来，没有任何样式。然后加入表现，将所有修饰的图片做为背景，用CSS来定义每一块内容的位置、字体、颜色等。 当抽掉css文件，剩下的就是最本质的内容。这样才能在文本浏览器、手机、PDA等设备中阅读，才能随时修改css实现改版。,四、网页的组成元素,文本 图像 动画 超链接 表格 表单 音频 视频,1.文本,文本是网页存在的基础.在网页中,网页的设计与制作者可以通过设置字体、字号、颜色等来改变文本的视觉效果。,1)文字风格：风格要与内容性质相吻合.例如: 政府网页其文字具有庄重和规范的特质,字体造型规整而有序,简洁而大方.,休闲旅游类内容网页,文字编辑应具有欢快轻盈的风格,字体生动活泼,跳跃明快,有鲜明的节奏感,给人以生机盎然的感受.,个人网页则可结合个人的性格特点及追求，别出心裁，给人一种独特个性的印象。,2)文字的大小 一般情况下，网页正文可以使用12px（9磅）-16px （12磅）大小的文字。最适合网页正文显示的字体大小为12磅（16px）左右，现在很多的综合性网站，由于在一个页面中需要安排的内容较多，通常采用9磅(12px)的字号。,3)字体的选择 网页设计者可以用字体来更充分的体现设计中要表达的感情。粗体字强壮有力，有男性特点，适合机械、建筑业等内容。细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。 在同一页面中，字体种类少，版面雅致，有稳定感。字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。 从加强平台无关性的角度来考虑,正文内容最好采用默认字体.宋体基本上是目前显示中文唯一的通用web字体,4)行距 行距的常规比例为10:12,字10,行距12.适当的行距会形成一条明显的水平空白条,以引导浏览者的目光,行距过宽则会使一行文字失去较好的延续性. 5)字距 现代网页设计比较流行把标题文字字距拉开或变窄的排列方式，以体现轻松、舒展、娱乐或抒情的版面，也常通过压扁文字或加宽行距来体现。 运用字距与行距的宽窄同时做综合变化，这样能够给作品版式增加空间层次和弹性。,图形图象必须完全符合网页的主题，并以创新的构思和强烈的个性，使主题与表现两者较好的统一。,2.图像,制作网页时可用的图片格式： GIF图形采用非失真的压缩方式,在压缩的过程中,像素信息不会被牺牲掉,被牺牲的是图形的颜色,GIF图片文件最多只能保存256色,对于颜色不多、线条清楚的图，采用GIF格式。GIF图像支持透明的背景色和动画格式。,JPG/JPEG图片文件采用失真的压缩方式，图片在压缩的过程中，图形的像素信息会被减去一些，但图片的颜色不会丢失。因此，全彩的连续色调、没有明显边缘的图，如风景照，适合采用JPG文件格式显示。其不支持透明的背景色和动画格式。,PNG是Fireworks的默认文件格式，支持高级别无损耗压缩，受最新的web浏览器支持,支持透明图像的制作。,3.动画,网页动画主要分为flash动画和gif动画。其中，flash动画运用的最广泛，gif动画通常用于制作简单的、只有几帧图片的交替动画。,4.超链接,所谓超链接是指从一个网页指向一个目标的链接关系。这个目标可以是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件甚至是一个应用程序。它表明了网页文件之间的相互链接关系。,5.表格,表格的两大用途：显示数据和排版,6.表单,7.音频,网页中的音频文件格式： WAV格式：无损的音乐。完全未经压缩，10MB/分钟。Windows系统使用的标准数字音频格式。 MP3格式：能够以较小的比特率、较大的压缩比达到近乎完美的CD音质。 MIDI格式。文件一般较小，常用于提供背景音乐。 WMA格式：适合在网络上在线播放 RealAudio：流动的旋律。流音频格式，主要用于提供网络实时广播。Real的文件格式主要有：ra、rm、rmx等。 AIF/AIFF,8.视频,网页中的视频文件格式： ASF、WMV、RM、RMVB,网页设计小贴士,1）符合视觉规律 文字横向编排 由于人眼的视线横向移动比竖向移动快而且不易疲劳，因此将文字尽量横向排布. 页面尽量保持横向尺寸固定，竖向尺寸不固定，目的是使人们能连续不间断地浏览页面。需要注意的是，应避免页面左右、上下都能滚动，这会给浏览者带来极大的不便。,将重要信息置于”最佳视觉区域” 在进行网页版式设计中,要考虑将最重要的信息或视觉流程的停留点安排在注目价值高的位置,这就是最佳视觉区域. 由于人们习惯于将视线从左到右、从上到下移动，因而视区中的不同位置注目程度不同。视觉区域内上部比下部注目程度高，左侧比右侧更引人注意。,2）避免视觉疲劳,限制网页长度 尽可能将网页限制在1屏以内，即满屏，浏览者不需要拖动滚动条就可以看到下面的导航信息。页面不宜过长，一般控制在13屏，尽量不超过5屏。 文字大小适中、行距合理 位置的一致 如，按照人的阅读习惯，固定导航的位置。免去用户去找导航的麻烦。