网页设计原理课件

1、网页设计原理,1,PPT学习交流,掌握网站的开发流程 掌握网页设计原理 掌握网页设计规范 欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣,本章目标,2,PPT学习交流,第一个阶段：规划和准备阶段。这个阶段要做的工作包括： （1）市场调查、市场分析； （2）制定网站技术方案； （3）规划网站内容； 第二阶段：网页设计、制作阶段。这个阶段要做的工作包括： （1）网站总体设计（风格、布局、色彩）； （2）设计界面、制作网站中的各个网页； （3）将各个网页通过超级链接进行整合； （4）后台设计。 第三阶段：网站的发布、推广和维护阶段。这个阶段要做的工作包括： （1）测试、调试与完善网站； （2）

2、发布与推广网站； （3）维护和更新网站。,1.1 网站开发流程,3,PPT学习交流,1.2.1网页设计的基本原则 （1）用户至上原则 （2）易用性原则 网页中的导航应放置明显、结构清晰、操作简单。网站的链接结构合理，方便浏览者在不同网页之间跳转快捷、方便。 （3）实用性原则,1.2 网页的设计原理,4,PPT学习交流,1.网页页面大小 标准显示器的屏幕分辨率为1024*768，则不同版本的IE浏览器的屏幕大小为： IE6.0：1003*600px IE8.0（隐藏菜单栏）：1003*626 IE8.0（不隐藏菜单栏）：1003*598 原则：不出现水平滚动栏,1.2.2 网页页面与版块,5,P

3、PT学习交流,LOGO是网站的标志、名片，如同商标一样。在网站设计中logo的设计是不可缺少的一个重要环节。Logo是网站特色和内涵的集中体现,它作用于传递网站的定位和经营理念、同时便于人们识别，会直接影响到客户对网站的判断，特别是网站日后需要进行全球性推广，优秀的商标设计会吸引来更多的访问者。 LOGO可以是中文、英文字母，也可以是符号、图案，还可以是动物或者人物。LOGO的设计创意来源是网站的名称和内容。,2.网页版块 网站LOGO,6,PPT学习交流,2.网页版块 网站LOGO,7,PPT学习交流,2.网页版块 导航条,8,PPT学习交流,网站导航的表现形式主要有：菜单、站内搜索引擎、当

4、前浏览位置等。 （1）菜单。菜单是网站最常见的导航方法，一个好的菜单系统关键在于能适应网站的层次需要，并且容易让浏览者理解网站的结构。 （2）站内搜索引擎。站内搜索引擎提供了一种主动查询方式，浏览者只要把自己需要寻找的内容的关键字输入到搜索引擎中，网站将自动地查找出站内符合条件的页面，这是一种人性化的做法。 （3）当前浏览位置。所谓“当前浏览位置”就是在网站的每个页面中加入当前位置的文字说明并逐级加入链接。,2.网页版块 导航条,9,PPT学习交流,2.网页版块 导航条（常用导航栏）,10,PPT学习交流,一般为广告横幅图片、或者使用JavaScript或Flash技术制作的动画，用于吸引用户

5、观看,2.网页版块 Banner条（网页广告栏）,11,PPT学习交流,12,PPT学习交流,网页的主体 文本 图像 动画 超链接,2.网页版块 内容版块,13,PPT学习交流,版权信息版块 制作单位、制作人、时间等,2.网页版块 版尾版块,14,PPT学习交流,网站设计不是把所有内容放置到网页中就行了，还需要我们把网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。 常见的布局结构有 “同”字形布局、“国”字形布局、“匡”字形布局、“三”字形布局和“川”字形

6、布局、上下框架型、封面型,1.2.3 网页版面布局设计,15,PPT学习交流,16,PPT学习交流,17,PPT学习交流,18,PPT学习交流,19,PPT学习交流,20,PPT学习交流,21,PPT学习交流,版面典型风格,对称型,偏置型,标题型,22,PPT学习交流,色彩的运用在网页中的作用真是太重要了，有些网页看上去十分典雅、有品位，令人赏心悦目，但是页面结构却很简单、图像也不复杂，这主要是色彩运用得当。色彩是人的视觉最敏感的元素，网页色彩处理得好，可以锦上添花。 网页三原色：red、green、blue 色彩的属性：色相、饱和度、明度 色彩模式：RGB、CMYK Web216安全色,1.

7、2.4网页色彩设计原理,23,PPT学习交流,表1.1 色彩与心理反应,24,PPT学习交流,网页是由文本、图像、动画、超级链接等基本元素构成 1文本 建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文字体一般使用宋体，大小一般使用9磅或12像素即可。 2图像 网页中的图像主要有用于点缀标题的小图片，介绍性的照片，代表企业形象或栏目内容的标志性图片（即LOGO），用于宣传的广告（即Banner）等多种形式。 3超级链接 超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一幅

8、图片、一个E_Mail地址等。超级链接可以是文本、按钮或图片，鼠标指向超级链接位置时，会变成小手形状。,1.2.5 网页页面元素设计,25,PPT学习交流,4导航栏 导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超级链接组成。 5动画 动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的有效方法之一。 6表格 表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。,1.2.5 网页页面元素设计,26,PPT学习交流,7框架 框架是网页的一种组织形式，将互相关联的多个网页的内容组织在

9、一个浏览器窗口中显示。例如在一个框架内放置导航栏，另一个框架中的内容可以随着导航栏中的链接而改变。 8表单 表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本，选中单选按钮或复选框，从下拉菜单中选择选项等。 网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、Java Appplet等元素。,1.2.5 网页页面元素设计,27,PPT学习交流,前台技术 XHTML（网页的结构技术） CSS（网页的表现技术） ECMAScript（前身为JavaScript，脚本语言） Ajax（由JavaScript脚本语言扩展而来）

10、E4X（ 是ECMAScript的扩展，实现更快的访问XML数据 ） 切片（网页图形处理） 后台技术 ASP技术 动态网页技术，基于VBScript或JAVAScript ASP.NET技术是ASP的后续技术 JSP技术基于JAVA的多平台动态页技术 PHP技术多平台的网页后台技术，免费的网页脚本语言,1.3 网页设计与开发技术,28,PPT学习交流,他山之石 可以攻玉，欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣，分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习网页奠定基础。,1.4 优秀网站赏析,29,PPT学习交流,网站实例分析,1网站描述：这是一家航空公司

11、的网站首页。 2布局 网页布局采用的是比较常见的分栏式结构 3配色 网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD”，如图所示。此外，网页文字的配色主要以白色和蓝色为主。,30,PPT学习交流,1.4国外优秀网站赏析,图1-6利顿茶商,图1-7中国瓷器,31,PPT学习交流,1.4国外优秀网站赏析,图1-8 中国古董网,图1-9 北美工艺品展,32,PPT学习交流,1.4 优秀个人网站,图1-11 花蝶谷网 图1-12艾艾在线,33,PPT学习交流,1.4优秀个人网站,图1-13云水茶人坊 图1-14苹果树下,34,PPT学习交流,本

12、节结束,35,PPT学习交流,Dream weaver CS5工作界面 网站的创建 网站的管理,主要内容,36,PPT学习交流,熟悉Dreamweaver CS5的界面布局和工作环境 掌握站点的创建和管理方法 会创建本地站点和远程站点,本章目标,37,PPT学习交流,38,PPT学习交流,39,PPT学习交流,参数设置 一般设置的参数有常规参数、新建文档参数和站点参数，这些都是开始创建站点、设计网页前需要考虑的因素。 1常规参数设置 2新建文档参数设置,40,PPT学习交流,参数设置 3站点参数设置,41,PPT学习交流,2.1.4 Dreamweaver CS4的帮助系统,42,PPT学习交

13、流,Dreamweaver CS4有一套专业的创建和管理站点的工具，实现站点的创建和管理非常方便。要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作这个网站，然后把这个网站上传到WEB服务器上。放在本地磁盘上的网站文件夹称为本地站点，处于Internet 中WEB服务器上的网站文件夹称为远程站点。Dreamweaver CS4提供了管理本地站点和远程站点的强大的功能,2.2网站的创建,43,PPT学习交流,2.2创建本地站点,44,PPT学习交流,2.2创建本地站点,图2-18 创建站点向导之一：填写网站名称,图2-19创建站点向导之一：确定是否使用服务器技术,45,PPT学习交流,2.2

14、创建本地站点,图2-20 创建站点向导之三：设置编辑方式,图2-21创建站点向导之四：设置如何连接远程服务器,46,PPT学习交流,2.2创建本地站点,图2-22创建站点向导之五：完成设置，显示设置信息,图2-23 新创建的站点,47,PPT学习交流,建立站点后，Dreamweaver CS4可以对站点及站点文件进行管理。管理站点是对已经建立的本地站点或远程站点进行管理，在Dreamweaver CS4中，管理站点可以通过“管理站点”对话框进行管理，在“管理站点”对话框中，可以创建新站点、编辑站点、复制站点、删除站点以及导入或导出站点。,2.3网站的管理,48,PPT学习交流,2.3网站的管理

15、,图2-30“管理站点”对话框,49,PPT学习交流,2.3.1 使用文件面板管理网站中的资源,图2-32 创建文件和文件夹,50,PPT学习交流,2.3.2 使用资源面板管理网站中的资源,51,PPT学习交流,文本 图片：Gif、JPEG、PNG、矢量格式 超链接：链接的对象是文本、图片、图片的某个区域、脚本程序 动画：Gif动画、Flash动画 声音和视频：MIDI、WAV、MP3、RM 导航栏：一组超链接，在网页的顶部或一侧 表格：控制网页各元素的布局 表单：接收用户输入，反馈给服务器 网页特效：弹出窗口、文字随鼠标移动等， JaVaScript、 VBScript 网页交互元素：聊天、

16、购物、搜索，ADO结合ASPJSP,网页的基本元素,52,PPT学习交流,网页文档的基本操作包括： （1）新建网页文档； （2）保存与另存网页文档； （3）打开网页文档； （4）关闭网页文档。,.4网页文档的基本操作,53,PPT学习交流,2.5.1 新建与保存网页 Dreamweaver CS4为创建新文档提供了若干选项，用户可以创建以下任意文档。 新的空白文档或模板； 基于Dreamweaver附带的预设计页面布局文档； 基于现有模板的文档。 1创建新文档 2保存新文档,2.5 制作简单网页,54,PPT学习交流,2.5.2 页面属性设置 页面属性的设置包括页面的布局和格式设置。 1设置网

17、页标题,2.5 制作简单网页,55,PPT学习交流,2.5.2 页面属性设置 2设置网页外观,2.5 制作简单网页,56,PPT学习交流,2.5.2 页面属性设置 3设置网页链接,2.5 制作简单网页,57,PPT学习交流,2.5.2 页面属性设置 4设置网页跟踪图像,2.5 制作简单网页,58,PPT学习交流,2.5.3 网页的基本排版 在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。 1网页基本元素 2页面的简单排版 （1）设置文本的大小 （2）设置文本的字体 （3）设置文本的颜色 （4）设置文本对齐方式,2.5 制作简单网页,59,PPT学习交流,2.5.4 插入图

18、像 Web上常用的图像格式包括以下3种：GIF、JPEG和PNG。 Dreamweaver能够使用GIF、JPEG或PNG格式打开或预览任何图像。使用Dreamweaver将一个图像插入到网页中有3种方法： 在插入面板的“常用”分类中选择“图像”按钮； 执行“插入”“图像”命令； 使用Ctrl+Alt+I组合键。,2.5 制作简单网页,60,PPT学习交流,案例一：创建学校概况页面 【案例综述】制作学校概况页面，通过简单的页面制作展示学校的基本情况。 【案例展示】本例中的素材包括4幅校园图片，实例效果如图3-42所示。,2.5 制作简单网页,61,PPT学习交流,练习：制作爱家美食网站“美食推荐”页面 【展示】本实训中的素材包括2幅图片，制作如图所示的爱家美食网站“美食推荐”页面。,2.5 制作简单网页,62,PPT学习交流,2.6 网页制作规范,在网页制作过程中，要求为目录和文件命名时都应遵循相应的规范，名称应能代表文件的意义，以便进行查找、修改。下面从网站目录建立规范、文件命名规范、文件头代码规范三个方面，具体介绍网页制作的规范。,63,PPT学习交流,2.6.1 网站目录建立规范,网站目录建立的原则是以最少的层次提供最清晰简便的访问结构。网站目录建立规范如图