《网页设计原理》PPT课件.ppt

网页设计原理,1,掌握网站的开发流程掌握网页设计原理 掌握网页设计规范欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣,本章目标,2,第一个阶段：规划和准备阶段。这个阶段要做的工作包括：（1）市场调查、市场分析；（2）制定网站技术方案；（3）规划网站内容；第二阶段：网页设计、制作阶段。这个阶段要做的工作包括：（1）网站总体设计（风格、布局、色彩）；（2）设计界面、制作网站中的各个网页；（3）将各个网页通过超级链接进行整合；（4）后台设计。第三阶段：网站的发布、推广和维护阶段。这个阶段要做的工作包括：（1）测试、调试与完善网站；（2）发布与推广网站；（3）维护和更新网站。,1.1 网站开发流程,3,网页设计的基本原则（1）用户至上原则（2）易用性原则 网页中的导航应放置明显、结构清晰、操作简单。网站的链接结构合理，方便浏览者在不同网页之间跳转快捷、方便。（3）实用性原则,1.2 网页的设计原理,4,1.网页页面大小标准显示器的屏幕分辨率为1024*768，则不同版本的IE浏览器的屏幕大小为：IE6.0：1003*600pxIE8.0（隐藏菜单栏）：1003*626IE8.0（不隐藏菜单栏）：1003*598原则：不出现水平滚动栏,1.2.2 网页页面与版块,5,LOGO是网站的标志、名片，如同商标一样。在网站设计中logo的设计是不可缺少的一个重要环节。Logo是网站特色和内涵的集中体现,它作用于传递网站的定位和经营理念、同时便于人们识别，会直接影响到客户对网站的判断，特别是网站日后需要进行全球性推广，优秀的商标设计会吸引来更多的访问者。LOGO可以是中文、英文字母，也可以是符号、图案，还可以是动物或者人物。LOGO的设计创意来源是网站的名称和内容。,2.网页版块网站LOGO,6,2.网页版块网站LOGO,7,2.网页版块导航条,8,网站导航的表现形式主要有：菜单、站内搜索引擎、当前浏览位置等。（1）菜单。菜单是网站最常见的导航方法，一个好的菜单系统关键在于能适应网站的层次需要，并且容易让浏览者理解网站的结构。（2）站内搜索引擎。站内搜索引擎提供了一种主动查询方式，浏览者只要把自己需要寻找的内容的关键字输入到搜索引擎中，网站将自动地查找出站内符合条件的页面，这是一种人性化的做法。（3）当前浏览位置。所谓“当前浏览位置”就是在网站的每个页面中加入当前位置的文字说明并逐级加入链接。,2.网页版块导航条,9,2.网页版块导航条（常用导航栏）,10,一般为广告横幅图片、或者使用JavaScript或Flash技术制作的动画，用于吸引用户观看,2.网页版块Banner条（网页广告栏）,11,12,网页的主体文本图像动画超链接,2.网页版块内容版块,13,版权信息版块制作单位、制作人、时间等,2.网页版块版尾版块,14,网站设计不是把所有内容放置到网页中就行了，还需要我们把网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。常见的布局结构有“同”字形布局、“国”字形布局、“匡”字形布局、“三”字形布局和“川”字形布局、上下框架型、封面型,1.2.3 网页版面布局设计,15,16,17,18,19,20,21,版面典型风格,对称型,偏置型,标题型,色彩的运用在网页中的作用真是太重要了，有些网页看上去十分典雅、有品位，令人赏心悦目，但是页面结构却很简单、图像也不复杂，这主要是色彩运用得当。色彩是人的视觉最敏感的元素，网页色彩处理得好，可以锦上添花。网页三原色：red、green、blue色彩的属性：色相、饱和度、明度色彩模式：RGB、CMYKWeb216安全色,网页色彩设计原理,23,表1.1 色彩与心理反应,24,网页是由文本、图像、动画、超级链接等基本元素构成1文本建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文字体一般使用宋体，大小一般使用9磅或12像素即可。2图像网页中的图像主要有用于点缀标题的小图片，介绍性的照片，代表企业形象或栏目内容的标志性图片（即LOGO），用于宣传的广告（即Banner）等多种形式。3超级链接 超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、一个E_Mail地址等。超级链接可以是文本、按钮或图片，鼠标指向超级链接位置时，会变成小手形状。,1.2.5 网页页面元素设计,25,4导航栏 导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超级链接组成。5动画 动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的有效方法之一。6表格 表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。,1.2.5 网页页面元素设计,26,7框架 框架是网页的一种组织形式，将互相关联的多个网页的内容组织在一个浏览器窗口中显示。例如在一个框架内放置导航栏，另一个框架中的内容可以随着导航栏中的链接而改变。8表单 表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本，选中单选按钮或复选框，从下拉菜单中选择选项等。网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、Java Appplet等元素。,1.2.5 网页页面元素设计,27,前台技术XHTML（网页的结构技术）CSS（网页的表现技术）ECMAScript（前身为JavaScript，脚本语言）Ajax（由JavaScript脚本语言扩展而来）E4X（是ECMAScript的扩展，实现更快的访问XML数据）切片（网页图形处理）后台技术ASP技术动态网页技术，基于VBScript或JAVAScriptASP.NET技术是ASP的后续技术JSP技术基于JAVA的多平台动态页技术PHP技术多平台的网页后台技术，免费的网页脚本语言,1.3 网页设计与开发技术,28,他山之石 可以攻玉，欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣，分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习网页奠定基础。,1.4 优秀网站赏析,29,网站实例分析,1网站描述：这是一家航空公司的网站首页。2布局网页布局采用的是比较常见的分栏式结构3配色网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD”，如图所示。此外，网页文字的配色主要以白色和蓝色为主。,1.4国外优秀网站赏析,图1-6利顿茶商,图1-7中国瓷器,31,1.4国外优秀网站赏析,图1-8 中国古董网,图1-9 北美工艺品展,32,1.4 优秀个人网站,图1-11 花蝶谷网 图1-12艾艾在线,33,1.4优秀个人网站,图1-13云水茶人坊 图1-14苹果树下,34,本节结束,35,Dream weaver CS5工作界面网站的创建网站的管理,主要内容,熟悉Dreamweaver CS5的界面布局和工作环境掌握站点的创建和管理方法会创建本地站点和远程站点,本章目标,参数设置一般设置的参数有常规参数、新建文档参数和站点参数，这些都是开始创建站点、设计网页前需要考虑的因素。1常规参数设置2新建文档参数设置,参数设置3站点参数设置,2.1.4 DreamweaverCS4的帮助系统,Dreamweaver CS4有一套专业的创建和管理站点的工具，实现站点的创建和管理非常方便。要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作这个网站，然后把这个网站上传到WEB服务器上。放在本地磁盘上的网站文件夹称为本地站点，处于Internet 中WEB服务器上的网站文件夹称为远程站点。Dreamweaver CS4提供了管理本地站点和远程站点的强大的功能,2.2网站的创建,2.2创建本地站点,2.2创建本地站点,图2-18 创建站点向导之一：填写网站名称,图2-19创建站点向导之一：确定是否使用服务器技术,2.2创建本地站点,图2-20 创建站点向导之三：设置编辑方式,图2-21创建站点向导之四：设置如何连接远程服务器,2.2创建本地站点,图2-22创建站点向导之五：完成设置，显示设置信息,图2-23 新创建的站点,建立站点后，Dreamweaver CS4可以对站点及站点文件进行管理。管理站点是对已经建立的本地站点或远程站点进行管理，在Dreamweaver CS4中，管理站点可以通过“管理站点”对话框进行管理，在“管理站点”对话框中，可以创建新站点、编辑站点、复制站点、删除站点以及导入或导出站点。,2.3网站的管理,2.3网站的管理,图2-30“管理站点”对话框,2.3.1 使用文件面板管理网站中的资源,图2-32 创建文件和文件夹,2.3.2 使用资源面板管理网站中的资源,Page 52,文本图片：Gif、JPEG、PNG、矢量格式超链接：链接的对象是文本、图片、图片的某个区域、脚本程序动画：Gif动画、Flash动画声音和视频：MIDI、WAV、MP3、RM导航栏：一组超链接，在网页的顶部或一侧表格：控制网页各元素的布局表单：接收用户输入，反馈给服务器网页特效：弹出窗口、文字随鼠标移动等，JaVaScript、VBScript网页交互元素：聊天、购物、搜索，ADO结合ASPJSP,网页的基本元素,网页文档的基本操作包括：（1）新建网页文档；（2）保存与另存网页文档；（3）打开网页文档；（4）关闭网页文档。,.4网页文档的基本操作,2.5.1 新建与保存网页Dreamweaver CS4为创建新文档提供了若干选项，用户可以创建以下任意文档。新的空白文档或模板；基于Dreamweaver附带的预设计页面布局文档；基于现有模板的文档。1创建新文档2保存新文档,2.5 制作简单网页,2.5.2 页面属性设置 页面属性的设置包括页面的布局和格式设置。1设置网页标题,2.5 制作简单网页,2.5.2 页面属性设置2设置网页外观,2.5 制作简单网页,2.5.2 页面属性设置3设置网页链接,2.5 制作简单网页,2.5.2 页面属性设置4设置网页跟踪图像,2.5 制作简单网页,2.5.3 网页的基本排版 在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。1网页基本元素2页面的简单排版（1）设置文本的大小（2）设置文本的字体（3）设置文本的颜色（4）设置文本对齐方式,2.5 制作简单网页,2.5.4 插入图像 Web上常用的图像格式包括以下3种：GIF、JPEG和PNG。Dreamweaver能够使用GIF、JPEG或PNG格式打开或预览任何图像。使用Dreamweaver将一个图像插入到网页中有3种方法：在插入面板的“常用”分类中选择“图像”按钮；执行“插入”“图像”命令；使用Ctrl+Alt+I组合键。,2.5 制作简单网页,案例一：创建学校概况页面【案例综述】制作学校概况页面，通过简单的页面制作展示学校的基本情况。【案例展示】本例中的素材包括4幅校园图片，实例效果如图3-42所示。,2.5 制作简单网页,练习：制作爱家美食网站“美食推荐”页面【展示】本实训中的素材包括2幅图片，制作如图所示的爱家美食网站“美食推荐”页面。,2.5 制作简单网页,2.6 网页制作规范,在网页制作过程中，要求为目录和文件命名时都应遵循相应的规范，名称应能代表文件的意义，以便进行查找、修改。下面从网站目录建立规范、文件命名规范、文件头代码规范三个方面，具体介绍网页制作的规范。,2.6.1 网站目录建立规范,网站目录建立的原则是以最少的层次提供最清晰简便的访问结构。网站目录建立规范如图所示。,2.6.2 文件命名规范,基本原则：以最少的字母达到最容易理解的意义。所有文件名、文件夹使用小写英文字母、数字、下划线的组合，比如：news.html，unit1_1.html等。不要使用汉字、空格和特殊字符。有些服务器无法识别这些字符，会导致文件链接出错。尽量使用英文，最好有一定的意义，这样以后便于别人或自己修改。例如：名为“Login.html”的文件，一看名称，就知道是登录页面。对于图像文件，在命名时要遵循以下几点：名称分为头部和尾部两部分，用下划线分开，尽量用英文。头部表示图片的大类性质，比如：广告（banner）、标志(logo)、菜单(menu)、按钮(button)、背景(bg)等。尾部表示图片的具体含义。比如：banner_sohu.gif，menu_aboutus.gif，title_news.gif，logo_maths.jpg等。,2.6.3 文件头代码规范,文件头（head）里都是一些与网页整体有关、相对独立一些的属性，比如网站标题属性，标识字符编码、作者、版权信息或关键字的标签等。文件头的规范化代码如下：公司版权注释TITLE 网页标题网页显示字符集（简体中文为Gb2312，繁体中文为big5，英文为iso-8859-1）网页制作者信息 网站简介 搜索关键字 网页的css规范,本部分结束,