页设计基础知识课件

网页设计矫桂娥邮箱：jiaoguie@126.com办公室：1205#网页设计矫桂娥2主要内容网页框架的搭建：dreamweaver/flash网页动态元素的使用：flash网页静态元素的使用：photoshop/fireworks2主要内容网页框架的搭建：dreamweaver/flash3网页框架的搭建网页制作的基础知识等标记语言xhtml的使用css样式的应用Web常见网页元素的创建标准之行为的使用综合实例3网页框架的搭建网页制作的基础知识等4网页动态元素的使用Flash基本动画特效网页中常见的动画元素FlashActionScript3.0基础知识Flash交互应用程序的创建4网页动态元素的使用Flash基本动画特效5教材主教材《CSS网页设计标准教程》人民邮电出版社参考教材《网页制作综合技术教程》网址：校课程中心网站《网页设计》(矫)《Dreamweavercs3网页制作基础教程》《dreamweaver与xml综合应用》《flash网站制作创意与表现》5教材主教材6课程性质考核方式：考试课平时成绩：课堂表现，考勤，随堂作业，实验报告等（40%）考试部分：上机考，网页设计（60%）6课程性质考核方式：考试课7课程性质考核方式：考查课考核次数：平时和两次考核平时成绩：课堂表现，考勤，随堂作业，实验报告等（30%）第一次考核：网页设计部分（40%）第二次考核：网页的动画部分（30%）7课程性质考核方式：考查课8教学进度考查课，共64课时。网页设计部分：48课时，校内教师讲授网页动画部分：16课时，校企合作单位讲授8教学进度考查课，共64课时。9教学进度考试课，共48课时。网页设计部分：48课时，校内教师讲授网页动画部分：12课时，校企合作单位讲授9教学进度考试课，共48课时。10网页基础知识基本概念网站开发流程网页标准网页布局分类以及技术10网页基础知识基本概念平时上网干什么？主要使用什么浏览器？怎样打开校园网？怎样创建一个网页（网站）？网站保存在什么地方？平时上网干什么？12基本概念网页：web服务器上供客户端用户浏览的文件网站：一系列网页的组合，拥有相同或相似的属性并通过各种链接相关联。主页：网站的第一个页面12基本概念HTML?HTTP?URL?HTML?B/S模式服务器与浏览器关系示意图B/S模式服务器与浏览器关系示意图15网页分类静态网页动态网页客户端动态技术服务器端动态技术15网页分类实践1创建一个基本的网页：myindex.html在本地计算机中访问这个网页在浏览器中访问这个网页区别是什么？构建网站的流程是怎样的？实践1创建一个基本的网页：myindex.html17网页开发工作流程规划站点确立站点的策略或目标，确定所面向的用户以及站点的数据需求设置开发环境选择Web服务器，利用Dreamweaver等软件定义站点以及数据源规划页面设计和布局用绘图工具创建页面和界面模型，使用Dreamweaver等布置页面17网页开发工作流程规划站点18创建内容资源使用ps、flash等创建图像、视频等组合、测试和部署站点使用dreamweaver等编译资源，测试代码，将站点发布到服务器上维护、更新站点使用dreamweaver等保持内容的更新18创建内容资源19网页基本元素导航栏表单动画超链接文本表格图片声音和视频其他常见元素19网页基本元素导航栏20网页标准的组成Web2.0网页标准：结构标准语言：xhtml和xml表现标准语言：css行为标准语言：dom、ecmascript20网页标准的组成Web2.0网页标准：21结构标准语言Xml可扩展标记语言：满足网络信息发布的需要，网络数据的转换和描述Xhtml可扩展超文本标记语言：是html向xml过渡的一个桥梁，是一个引导人们逐步走向规范的过渡方案21结构标准语言22SGML，通用标记语言标准，定义电子文档结构和内容描述的标准。1989前后，html问世，至今html5.0版本缺陷：内容和格式在一起存放处理图像等多媒体能力比较弱标记有限等22SGML，通用标记语言标准，定义电子文档结构和内容描述的23表现标准语言网页的表现是赋予内容的一种样式，也就是文档看起来的样子。CSS，层叠样式表，布局网页，控制网页的表现CSS（网页的表现）ANDXhtml（网页的结构），使得站点的访问和网页的维护更加容易23表现标准语言24行为标准语言DOM，文档对象模型，与浏览器、平台、语言的接口，使用户可以访问页面其他的标准组件ECMAScript，标准脚本语言24行为标准语言25网页标准的优点客户端文件下载与页面显示速度更快内容能被更多的用户访问内容能被更广泛的设备访问用户能够通过样式选择定制自己的表现界面所有页面都能提供适于打印的版本25网页标准的优点26服务器端更少的代码和组件，容易维护带宽要求降低（代码更简洁），成本降低更容易被搜索引擎搜索到改版方便，不需要变动页面内容提供打印版本而不需要复制内容26服务器端27“内容+结构+表现”构成了一个网页的不可缺少的组成部分内容是页面传达信息的基础，文本、图片、音乐、视频、数据、文档等表现使得内容的传达变得更加明晰和方便，字体样式、对齐样式、背景修饰等。结构是表现和内容的纽带27“内容+结构+表现”构成了一个网页的不可缺少的组成部分28

RIA的概念Macromedia公司在业界率先提出RichInternetApplication（简称RIA，富互联网应用程序）的概念，它是一种具高度互动性和丰富用户体验的新一代网络应用程序框架，能带给用户一个直观、快速响应和丰富的互动体验的运行环境，为用户带来前所未有的体验。在技术上，RIA将客户层的设计从以页面为中心提升到以组件为中心，从而改进了客户端程序的设计。目前多家厂商纷纷推出了自己的RIA解决方案，如已经成为主流的Ajax技术，微软的SilverLight和Sun的JavaFx，Adobe的Flex等，这些技术各有特点。28RIA的概念29网页布局的原则平衡性对称性对比性疏密度比例29网页布局的原则平衡性30常见的网页布局“国”字型布局拐角型布局标题文本型布局左右（或者上下）框架型布局综合框架型布局封面型布局Flash型布局变化型布局30常见的网页布局31布局的常用技术CSS布局表格布局框架布局31布局的常用技术32相关技巧第一屏与版面尺寸多分辨率的支持流媒体空白的处理字体不要太多链接层次不要太深表格嵌套不要太多32相关技巧第一屏与版面尺寸33基本经验：忌“花”：色彩不要过多冷暖搭配要谨慎网站各界面色彩统一不要用“花”背景（避免“喧宾夺主”）33基本经验：网页设计矫桂娥邮箱：jiaoguie@126.com办公室：1205#网页设计矫桂娥35主要内容网页框架的搭建：dreamweaver/flash网页动态元素的使用：flash网页静态元素的使用：photoshop/fireworks2主要内容网页框架的搭建：dreamweaver/flash36网页框架的搭建网页制作的基础知识等标记语言xhtml的使用css样式的应用Web常见网页元素的创建标准之行为的使用综合实例3网页框架的搭建网页制作的基础知识等37网页动态元素的使用Flash基本动画特效网页中常见的动画元素FlashActionScript3.0基础知识Flash交互应用程序的创建4网页动态元素的使用Flash基本动画特效38教材主教材《CSS网页设计标准教程》人民邮电出版社参考教材《网页制作综合技术教程》网址：校课程中心网站《网页设计》(矫)《Dreamweavercs3网页制作基础教程》《dreamweaver与xml综合应用》《flash网站制作创意与表现》5教材主教材39课程性质考核方式：考试课平时成绩：课堂表现，考勤，随堂作业，实验报告等（40%）考试部分：上机考，网页设计（60%）6课程性质考核方式：考试课40课程性质考核方式：考查课考核次数：平时和两次考核平时成绩：课堂表现，考勤，随堂作业，实验报告等（30%）第一次考核：网页设计部分（40%）第二次考核：网页的动画部分（30%）7课程性质考核方式：考查课41教学进度考查课，共64课时。网页设计部分：48课时，校内教师讲授网页动画部分：16课时，校企合作单位讲授8教学进度考查课，共64课时。42教学进度考试课，共48课时。网页设计部分：48课时，校内教师讲授网页动画部分：12课时，校企合作单位讲授9教学进度考试课，共48课时。43网页基础知识基本概念网站开发流程网页标准网页布局分类以及技术10网页基础知识基本概念平时上网干什么？主要使用什么浏览器？怎样打开校园网？怎样创建一个网页（网站）？网站保存在什么地方？平时上网干什么？45基本概念网页：web服务器上供客户端用户浏览的文件网站：一系列网页的组合，拥有相同或相似的属性并通过各种链接相关联。主页：网站的第一个页面12基本概念HTML?HTTP?URL?HTML?B/S模式服务器与浏览器关系示意图B/S模式服务器与浏览器关系示意图48网页分类静态网页动态网页客户端动态技术服务器端动态技术15网页分类实践1创建一个基本的网页：myindex.html在本地计算机中访问这个网页在浏览器中访问这个网页区别是什么？构建网站的流程是怎样的？实践1创建一个基本的网页：myindex.html50网页开发工作流程规划站点确立站点的策略或目标，确定所面向的用户以及站点的数据需求设置开发环境选择Web服务器，利用Dreamweaver等软件定义站点以及数据源规划页面设计和布局用绘图工具创建页面和界面模型，使用Dreamweaver等布置页面17网页开发工作流程规划站点51创建内容资源使用ps、flash等创建图像、视频等组合、测试和部署站点使用dreamweaver等编译资源，测试代码，将站点发布到服务器上维护、更新站点使用dreamweaver等保持内容的更新18创建内容资源52网页基本元素导航栏表单动画超链接文本表格图片声音和视频其他常见元素19网页基本元素导航栏53网页标准的组成Web2.0网页标准：结构标准语言：xhtml和xml表现标准语言：css行为标准语言：dom、ecmascript20网页标准的组成Web2.0网页标准：54结构标准语言Xml可扩展标记语言：满足网络信息发布的需要，网络数据的转换和描述Xhtml可扩展超文本标记语言：是html向xml过渡的一个桥梁，是一个引导人们逐步走向规范的过渡方案21结构标准语言55SGML，通用标记语言标准，定义电子文档结构和内容描述的标准。1989前后，html问世，至今html5.0版本缺陷：内容和格式在一起存放处理图像等多媒体能力比较弱标记有限等22SGML，通用标记语言标准，定义电子文档结构和内容描述的56表现标准语言网页的表现是赋予内容的一种样式，也就是文档看起来的样子。CSS，层叠样式表，布局网页，控制网页的表现CSS（网页的表现）ANDXhtml（网页的结构），使得站点的访问和网页的维护更加容易23表现标准语言57行为标准语言DOM，文档对象模型，与浏览器、平台、语言的接口，使用户可以访问页面其他的标准组件ECMAScript，标准脚本语言24行为标准语言58网页标准的优点客户端文件下载与页面显示速度更快内容能被更多的用户访问内容能被更广泛的设备访问用户能够通过样式选择定制自己的表现界面所有页面都能提供适于打印的版本25网页标准的优点59服务器端更少的代码和组件，容易维护带宽要求降低（代码更简洁），成本降低更容易被搜索引擎搜索到改版方便，不需要变动页面内容提供打印版本而不需要复制内容26服务器端60“内容+结构+表现”构成了一个网页的不可缺少的组成部分内容是页面传达信息的基础，文本、图片、音乐、视频、数据、文档等表现使得内容的传达变得更加明晰和方便，字体样式、对齐样式、背景修饰等。结构是表现和内容的纽带27“内容+结构+表现”构成了一个网页的不可缺少的组成部分61

RIA的概念Macromedia公司在业界率先提出R