新媒体网页设计与制作-Dreamweaver-CS6基础、案例、技巧实用教程第1章课件.ppt

1、目 录 第1章 网页设计基础 第2章 认识Dreamweaver CS6 第3章 制作绚丽多彩的网页 第4章 使用CSS样式美化网页 第5章 新媒体网页布局 第6章 网页中的超级链接 第7章 新媒体网页中的多媒体元素 目 录 第8章 在新媒体网页中添加动态特效 第9章 站点风格的统一 第10章 表单 第11章 综合实训-家具联盟网站 第12章 创建移动设备网页及应用程序 第13章 站点的整理维护与上传 第1章 网页设计基础本章学习要点：本章学习要点：1 1网页和网站的基本概念网页和网站的基本概念 2 2新媒体网站的色彩选择与搭配、新媒体网站的色彩选择与搭配、策划与创建原则策划与创建原则 3 3

2、网站制作的基本流程网站制作的基本流程1.1 1.1 认识网页认识网页1.1.1 1.1.1 网页与网站概念网页与网站概念 静态网页：静态网页：标准HTML文件。动态网页动态网页：在发送到浏览器之前由应用程序服务器自定义的网页。网站：即网页的集合。1.1.2 1.1.2 网页的基本要素网页的基本要素LOGO 标题 导航栏页眉/页脚 功能区 主体内容 1.1.3 1.1.3 新媒体网页的设计元素新媒体网页的设计元素 文字：是网页信息传递的主要手段。图片：用于提供信息、展示作品、装饰网 页等。多媒体：包括音频、视频、动画等元素。互动：实现信息的远距离实时传递。版式设计：“同”字型布局、“国”字型布局

3、、“T”型布局 、“三”字型布局、对比布局、POP布局、Flash布局。1.1.4 1.1.4 新媒体网页的布局方式新媒体网页的布局方式 固定布局 流式布局 弹性布局 伸缩 响应式 自适应 1.2 新媒体网站的色彩选择与搭配1.2.1 色彩理论 色彩是艺术表现的要素之一，是光刺激眼睛传导到大脑中枢而产生的一种感觉。网页设计师在决定了一个网站风格的同时也决定了网站的情感，而情感的表达很大程度上取决于颜色的选择。而网站给人的第一印象来自视觉冲击，因此确定网站的标准色彩是新媒体网页设计中最重要的一个方面。1.2.1 色彩理论在HTML中，颜色有3种表示方式：十六进制的数 颜色常量 rgb(r，g，b

4、)1.2.2 选择色彩 网页设计中，色彩的选择往往是和情感联系在一起的，比如温暖、冷静或严肃的情感。暖色能带来阳光明媚的情绪，让人感觉到温暖，例如红色、黄色和橙色；冷色可以表达出权威、明确和信任的感觉，让人联想到凉爽和寒冷，例如蓝色，绿色和紫色；中性色，只是给用户一种淡淡的感受，没有过多的情绪，平静，淡然，像灰色和棕色就是中性色。1.2.3 1.2.3 搭配色彩搭配色彩 标准色彩是指能体现网站形象和延伸内涵的色彩，不同的色彩搭配可以产生不同的效果，并可能影响到访问者的情绪。单一色 相似色 互补色 1.2.4 1.2.4 精彩网页赏析精彩网页赏析IBM中国站 1.2.4 1.2.4 精彩网页赏析

5、精彩网页赏析可口可乐中国站 1.2.4 1.2.4 精彩网页赏析精彩网页赏析何园网站1.3 1.3 新媒体网站的策划与创建原则新媒体网站的策划与创建原则1.3.1 定位网站主题和名称 定位网站主题：网站的题材和内容应紧扣主题，要突出个性和特色。网站定位要准确，内容要精练，题材不要太宽泛或者目标太高。网站名称：网站名称最好使用中文，字数控制在6个字以内，名称要见名知义，且能代表本站特色。1.3.2 1.3.2 网站风格网站风格 网站的风格是指网站的整体外观带给用户的综合感受，包括版面布局、浏览方式、交互性等诸多因素。1.3.3 1.3.3 网站的网站的CICI形象形象 所谓CI，是借用的广告术语

6、，意思是通过视觉来统一企业的形象。设计网站标志确定网站标准色彩确定网站标准字体 设计网站的宣传标语1.4 HTML51.4 HTML5简介简介 HTML5 是定义 HTML 标准的最新的版本，它既是一个新版本的HTML语言，具有新的元素、属性和行为，还有更大的技术集，允许更多样化和强大的网站和应用程序。它不但强化了Web网页的表现性能，还追加了本地数据库等 Web 应用的功能。1.4.1 HTML51.4.1 HTML5特性特性 语义特性 本地存储特性 设备兼容特性 连接特性 网页多媒体特性 三维、图形及特效特性 性能与集成特性 CSS3特性 1.4.2 HTML51.4.2 HTML5新增功能新增功能 取消了一些过时的HTML4标记 将内容和展示分离 表单元素的升级 新增audio 和video 标签 新增canvas标签 新增一些API（主要是供js使用的）1.5 1.5 网站制作的基本流程网站制作的基本流程1.5.1 1.5.1 网站的前期策划网站的前期策划1.5.2 1.5.2 收集素材收集素材1.5.3 1.5.3 规划站点规划站点1.5.4 1.5.4 制作网页制作网页1.5.5 1.5.5 测试并上传网站测试并上传网站1.5.6 1.5.6 网站的更新与维护网站的更新与维护