1、项目一 Dreamweaver CS3站点,网页设计,Dreamweaver CS3 项目教程,项目一 Dreamweaver CS3站点,任务一 网站欣赏,技能目标 通过观察、分析不同主题的网页，从学习和任务中，归纳出不同网页的设计灵魂。 知识目标 在与老师和同学的交流合作中，能发表自己的观点、交流思想，从而总结出网页设计原则和色彩搭配原则。,项目一 Dreamweaver CS3站点,任务一 网站欣赏,1.1.1 国内外优秀网站欣赏 1.1.2 网站设计原则 1.1.3 不同风格网站示例 1.1.4 色彩搭配原则 1.1.5 软件安装 1.1.6 Dreamweaver CS3新增功能,项
2、目一 Dreamweaver CS3站点,任务一 网站欣赏,国内外优秀网站欣赏蒙牛集团：http:/ 海尔集团：http:/ 可口可乐：http:/www.coca- 百事可乐：http:/ 波司登：http:/ 七匹狼：http:/ TCL：http:/ Dreamweaver CS3站点,任务一 网站欣赏,网站设计原则 1明确建立网站的目标和用户需求 2总体设计方案主题鲜明 3网站的版式设计 4色彩在网页设计中的作用 5网页形式与内容相统一 6多媒体功能的利用,项目一 Dreamweaver CS3站点,不同风格网站示例 韩国风格网站：http:/，http:/www.ubcare.co.
3、kr/ 欧美风格网站：http:/ 艺术类网站：http:/www.art- 旅游类网站：http:/ 时尚类网站：http:/ 网站欣赏,项目一 Dreamweaver CS3站点,不同风格网站示例 经济类网站：http:/ 教育类网站：http:/ 企业类网站：http:/ 儿童类网站：http:/ 网站欣赏,项目一 Dreamweaver CS3站点,Dreamweaver CS3提供了站点创建与管理工具，通过站点管理器可以更好地利用站点对文件进行管理，实现本地路径设置、地址信息管理、远程服务器信息管理、测试服务器环境配置、模板和库管理等功能。Dreamweaver CS3有两种创建站点
4、的方法：一是使用“站点定义向导”，可以逐步完成设计过程；二是使用“站点定义”对话框的“高级”选项卡进行，它可以根据需要分别设置本地、远程和测试文件夹。,任务一 网站欣赏问题探究,项目一 Dreamweaver CS3站点,创建本地站点在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理。 方法一：在站点窗口的下拉菜单选择最后一项编辑站点，如右图所示。 方法二：选择菜单“站点”“新建站点”选项。（如右图所示） 在“站点定义”窗口中根据向导提示输入网站名称、本地根目录位置、服务器位置即完成建点创建。,任务一 网站欣赏问题探究,项目一 Dreamweaver C
5、S3站点,创建本地站点本地站点创建好后，读者可以根据自己的需要创建各频道、栏目文件夹等，还可以利用站点窗口对本地站点的文件、文件夹进行创建、删除、移动和复制等操作，还可以对已创建好的站点进行重新规划。,任务一 网站欣赏问题探究,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,网页布局 网页布局的好坏是决定网页美观与否的一个重要因素，主要从两方面去理解，一种是结构布局，另一种是艺术布局。通过合理的布局，可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排网页空间，优化网页的页面效果和下载速度。因此，在对网页进行布局的过程中，应遵循视觉的对称平衡、对比、凝视和
6、空白等原则。常见的网页布局形式包括：型布局、“三”型布局、框架布局和POP布局。,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,色彩基础 网页设计是一种特殊的视觉设计，它对色彩的依赖性很高。由于色彩能够在不知不觉间影响人的心理，左右人的情绪，所以色彩设计也是网站风格设计的决定性因素之一。色彩在网页上是看得见的视觉元素，虽然自然界的色彩各不相同，但色彩都具有色相、亮度、饱和度三个基本属性，也称色彩的三要素。,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,色彩基础 色彩的三要素： 色相。是指区别各类色彩的名称，是根据色的光波长划分的。只要色彩的波长相
7、同，色相就相同，波长不同才产生色相的差别。色相体现着色彩外向的性格，是色彩的灵魂。比如红黄搭配有热烈感，蓝绿搭配则具有清凉感。 饱和度。指色彩的纯净程度，取决于色中含色成分的比例，含色成分越大，饱和度越大。大多数情况下，黑白网页给浏览者的视觉冲击不如彩色网页效果强烈，同时网页风格也有一些局限性。而色彩的选择不仅仅决定了作品的风格，同时也使得作品更加饱满、富有魅力。 亮度。色彩的明暗程度。亮度是全部色彩都具有的属性，亮度关系是搭配色彩的基础。亮度在三要素中具有较强的独立性，它可以不带任何色相的特征而通过黑白灰的关系单独呈现出现。,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓
8、展,安全色 网络安全色是当红(Red)、绿(Green)、蓝(Blue)颜色数字信号值为0、51、102、153、204、255时构成的颜色组合，它一共有6*6*6=216种颜色(其中彩色为210种，非彩色为6种)。216种网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，它是根据当前计算机设备的情况通过反复分析论证得到的结果。使用它进行网页配色，可避免颜色失真问题，拟定出更安全、更出色的网页配色方案。 在HTML语言中，对于颜色的定义是十六进制的，对于三原色，HTML分别给予两个十六进制来定义，也就是每个原色都有256种色彩，可混合成1600多万种颜色。,项目
9、一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,色彩搭配原则 色彩的鲜明性：如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。 色彩的独特性：要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给人浏览者留下深刻的印象。,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,色彩搭配原则色彩的艺术性：网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。 色彩搭配的合理性：色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝
10、色体现科技型网站的专业，用粉红色体现女性的柔情等。,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,颜色模式 颜色模式是图形设计的基础，它将某种颜色表现为数字形式的模型，或者说是计算机记录图像颜色的方式。 RGB模式。使用三原色，即红(Red)、绿(Green)、蓝(Blue)三色。按照不同比例进行叠加组合生成各种颜色，因此也叫加色模式。 CMYK模式。是一种减色色彩模式，由青色(Cyan)、洋红色(Magenta)、黄色(Yellow)、黑色(Black)这四种基本颜色组成的不同色彩。该颜色模式常用于图像打印。 索引颜色模式。使用256种颜色，如果原图像中的一种颜色没有
11、在于256色中，程序会选取已有颜色中最相近的颜色或者使用已有颜色模拟该种颜色，该模式由于文件存储空间小，广泛应用于媒体动画的制作和互联网。 灰度模式。使用最多256级灰度来表示纯白(255)、纯黑(0)以及两者中的一系列从黑到白的过渡色。 位图模式。使用黑白两种颜色中的一种表示图像中的像素。位图模式的图像也叫做黑白图像，它包含的信息最少，因而图像也最小。 双色调模式。在黑白（灰色系）图片中加入颜色以使色调更加丰富的模式。在RGB色彩模式中图像先要转换成为灰度模式，才能转换为有色调模式。,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,网页的配色 网站主题选定后，在设计过程
12、中对网页元素的色彩选择搭配要体现和谐、统一、平衡、协调等，同时也要注意到各种色彩的面积大小、所占比例、渐层变化、位置等问题，使浏览者在接受网页传达信息的同时也能感受到浏览网站的视觉享受。色彩的对比受很多因素影响，例如色彩的面积、时间、亮度等。由于人的视觉不同，不同色彩之间的对比会有不同的效果。当长时间看一种纯色，如红色，然后再看看周围的人的脸色会成绿色，正是因为红色与周围颜色的对比，形成了对我们视觉的刺激。 网站色彩运用通常按照“总体协调、局部对比”的处理原则，尽量避免采用纯度很高的单一色彩造成视觉疲劳。,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,软件的安装启动计算
13、机，将Dreamweaver CS3光盘放入CD-ROM驱动器中，找到Dreamweaver CS3安装文件setup.exe，双击即可启动安装程序。按操作向导提示操作即可完成全部安装过程。,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,Dreamweaver CS3的工作区布局,项目一 Dreamweaver CS3站点,任务一 网站欣赏知识拓展,Dreamweaver CS3新增功能 与Dreamweaver8相比，Dreamweaver CS3增加了一些新的功能，并增强了许多原有功能： 新增Ajax Spry框架。在Dreamweaver CS3中，添加了一系列预制的构件，帮助用户轻松快捷地构建Ajax页面。在减少页面刷新的同时, 增加交互性、速度和可用性。 提供有Spry效果库，轻松地向页面元素添加视觉过渡, 以使它们扩大选取、收缩、渐隐、高光等等。,项目一 Dreamweaver CS3站点,Dreamweaver CS3新增功能可直接将 Adobe Photoshop CS3 或 Fireworks CS3 资源复制和粘贴到 Dreamweaver CS3中。 借助全新的浏览器兼容性检查，节省时间并确保跨浏览器和操作系统的更加一致的体验。生成识别各种浏览器中与 CSS 相关的问题的报告，而不需要启动浏览器。,任务一 网站欣赏知识拓展,
