网页设计网站内容设计与开发ppt课件

.,1,第二章网站内容设计与开发,.,2,主要内容：,常用网页素材及制作工具网页的可视化设计首页的设计交互式(动态)网页的设计,.,3,1.网页素材设计网页时,适当加入一些非文字内容,可实现多媒体效果常用的网页素材主要有:,2.1常用网页素材及制作工具,图片动画声音视频剪辑,.,4,图片,2.1常用网页素材及制作工具,Web图片格式:,常用图片编辑工具:,JPEG格式:具有比较小的文件尺寸和连续的色调GIF格式:文件尺寸比JPEG稍大,但可实现透明背景功能注意:两种图片格式的正确选择,AdobePhotoshop:文件格式为PSDMicrosoftImageComposer:文件格式为MIC,.,5,GIF格式与JPEG格式的比较,.,6,动画,2.1常用网页素材及制作工具,动画的格式:,常用动画编辑工具:,AVI格式:视频流，可以包括图像及同步的声音，但文件尺寸较大MOV格式:可以与用户交互的动画GIF格式：存储多张图片，记录图片的显示位置、时间、方式、顺序,MicrosoftGIFAnimatorULEADCOOL3D,.,7,声音,2.1常用网页素材及制作工具,声音的格式:,把声音嵌入页面的方法,MicrosoftWAV:支持windows计算机，扩展名.wavMacintoshSound:主要支持Mac计算机，扩展名为.snd或.macSunAudio：扩展名为.au，支持基于UNIX的计算机MIDI：扩展名为.mid，支持所有平台,1.嵌入VCR类型的控件，用户可以随意的播放声音2.设置背景声音，在加载页面时自动播放3.创建到声音文件的链接,.,8,视频剪辑,2.1常用网页素材及制作工具,视频的格式:,把视频嵌入页面的方法,Microsoftvideoforwindows:支持windows计算机，扩展名.aviQuickTime:扩展名为.mov或.qt，是Apple自己的视频文件，也可在windows计算机中使用,1.嵌入视频：单击表示视频的图像，应用插件播放视频2.创建到视频文件的链接,.,9,DreamweaverFireworksFlash,2.1常用网页素材及制作工具,.,10,2.1常用网页素材及制作工具,主要功能:,1.HTML检查、HTML格式控制、HTML格式化选项2.全局查找/替换、图像编辑、全FTP功能3.处理Flash和Shockwave等媒体格式和动态HTML4.基于团队的Web创作,1.Dreamweaver,.,11,2.1常用网页素材及制作工具,特性介绍:,1.完全用户自定义控制可以迅速完成页面以及站点的设计。2.RoundtripHTML/Javascript行为库以及可视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性。3.可与其它群组产品的配合使用以及众多第三方支持可轻松完成动态发布。,1.Dreamweaver,.,12,2.1常用网页素材及制作工具,工作环境：,1.文档窗口：显示当前所创建和编辑的文档内容2.启动面板：包括最常用的控制按钮3.对象面板：采用多层结构，放置了网页设计中需要用到的各种对象4.属性面板：显示文档窗口中所选元素的属性5.可停靠浮动面板：可将众多面板窗口放置于一个综合窗口中,1.Dreamweaver,.,13,2.1常用网页素材及制作工具,主要功能:,1.自由地导入各种图像2.能够自动切图，生成鼠标动态感应的javascript3.具有强大的动画功能,2.Fireworks,.,14,2.1常用网页素材及制作工具,特性介绍:,1.丰富的图像处理效果2.矢量处理和位图处理的有效结合3.丰富的样式4.构建动画5.编辑整篇Web页面,2.Fireworks,.,15,Fireworks的2种编辑模式,矢量图像是用包含颜色和位置属性的直线或曲线（即矢量）来描述图像属性的一种方法。矢量图形具有独立的分辨率，也就是说我们以不同的分辨率来显示矢量图形时图像都不会失真。位图图像是用每一个栅格内不同颜色的点（像素）来描述图像属性的。位图图像的分辨率不是独立的。因此编辑位图会改变它的显示质量，尤其是放缩图像时会因为图像在栅格内的重新分配而导致图像失真。,.,16,.,17,.,18,.,19,2.1常用网页素材及制作工具,工作界面:,菜单栏工具栏时间轴舞台（工作区）,3.Flash,.,20,2.2网页的可视化设计,网页设计原则网页整体风格的设计网站CI设计网页链接结构的设计网页版面布局的设计,.,21,网页命名要简洁确保页面的导航性好合理设计视觉效果为图片添加文字说明不宜使用太多的动画和图片页面长度要适中整个页面风格要一致尽量使用相对超级链接考虑浏览器的兼容性,1.网页设计需注意的问题,.,22,网页整体风格包括:站点的CI、版面布局、浏览方式、文字、交互性、内容价值等因素要根据网站的功能定位及其特色设计网站的风格使企业标志尽可能出现在每个页面上突出网站标准色彩突出网站标准字体使用统一的图片处理效果设计一条朗朗上口的宣传标语创造站点特有的符号或图标,2.网页整体风格的设计,.,23,设计网站的标志(logo)、名称设计网站的标准色彩设计网站的标准字体设计网站的宣传标语,3.网站CI设计,.,24,标志的设计：网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以卡通化和艺术化网站有专业性的，可以以本专业有代表的物品作为标志最常用和最简单的方式是用自己网站的英文名称作标志网站的名称要合法，合理，合情,(1)设计网站的标志(logo)、名称,.,25,(1)设计网站的标志(logo)、名称,.,26,.,27,标准色彩：是指能体现网站型象和延伸内涵的色彩一般来说，一个网站的标准色彩不超过3种，以相近的色彩为主,(2)设计网站的标准色彩,.,28,标准字体：是指用于标志，标题，主菜单的特有字体在制作网站标志、标题、菜单时，如果使用了不常用的字体，则只能用图片的形式，以方便用户的浏览,(3)设计网站的标准字体,.,29,网页链接结构是指页面之间相互链接的拓扑结构。1、网页链接结构的原则是：用最少的链接，使得浏览最有效率2、建立网页链接有两种基本方式：树状链接结构（一对一）网状链接结构（一对多）,4.网页链接结构的设计,.,30,树状链接结构（一对一）类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面，立体结构为二叉树。优点：条理清晰缺点：浏览效率低网状链接结构（一对多）类似网络服务器的链接，每个页面相互之间都建立链接，立体结构象一张网。优点：浏览方便缺点：链接太多，结构不清晰,4.网站链接结构的设计,.,31,根据显示器分辨率的不同，页面大小有：640*480像素，800*600像素，1024*768像素网页布局技术利用框架进行布局使用层叠样式表（CSS）使用表格布局使用层进行布局,网页布局样式“T”结构布局“”型布局“三”型布局对称对比布局POP布局,5.网页版面布局的设计,.,32,.,33,.,34,.,35,.,36,.,37,.,38,首页的功能模块页头主菜单最新消息的传递电子邮件地址联络信息版权信息其他信息,2.3首页的设计,首页也叫主页，是网站的“门面”，故被称作“Homepage”首页设计应遵循：快速、简捷、吸引人、信息概括能力强、易于导航的原则,.,39,首页设计应注意的问题首页就是全网站内容的目录，也是一个索引，设计中应注意：首页明确、主题突出设置视觉兴趣点例如：柯达的主题“再拍一张”波音的主题“世界航天业领袖”尽可能缩短下载时间图象力求简朴、少用Java源程序注意配合最低档的设备,2.3首页的设计,.,40,Web页面中的资源包括：静态网页和动态网页静态网页：内容相对稳定，文件比较小，执行效率高例如：公司介绍、销售网络、售后服务信息、联系信息等动态网页：与用户可实现交互，内容需要频繁更新，由数据库和相应的应用程序构成，页面中的内容来自数据库。例如：产品信息、产品搜索、公司新闻动态、论坛系统、网站的管理系统等,2.4交互式网页的设计,.,41,静态网页,网页文件里没有程序代码，只有HTML标记，后缀是.htm或.html，即静态的HTML文档。网页内容是原封不动被传递的。如要修改，必须修改HTML源代码。,.,42,网页文件含HTML标记和程序代码，后缀则随程序语言而不同，如ASP文件为.asp客户端和服务器进行交互，由服务器执行脚本程序后，动态生成HTML。,动态网页,.,43,.,44,.,45,ASP（ActiveServerPages）活动服务器页面是服务器端的脚本编写环境，使用ASP可以组合HTML、脚本命令和ActiveX组件来创建交互的Web页。,ASP实际就是嵌入可执行脚本的HTML文档，这个文本文件可以包括下列部分的任意组合：,HTML标记ASP脚本语言的代码ASP语法,2.4交互式网页的设计,.,46,作业,简述WWW服务器与用户端的通讯过程。尝试不同的Internet访问方式，说明它们各自有什么特点？URL的构成有哪几部分，试举例说明网页的版面布局技术有哪几种，版面布局样式有哪些网页中常用的图片格式有