Dreamweaver CS5网页设计与制作教程 作者 文琦 詹增荣 第一章.pptVIP

1.3 站点的建立 任务与目的 1．任务 打开网页编辑工具Dreamweaver CS5；创建本地站点，通过“站点向导”进行站点定义，并向站点添加文件和文件夹等操作；关闭Dreamweaver CS5。 2．目的 了解网页编辑工具Dreamweaver CS5，掌握其工作界面；掌握站点的创建和管理方法 1.3站点的建立-相关概念及操作 1．认识Dreamweaver 1．Dreamweaver CS5的启动 Dreamweaver是建立Web站点和应用程序的专业工具，它与Fireworks，Flash并称“网页三剑客”。设计师利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Dreamweaver经过了若干个版本，2010年全球最大的图像编辑软件供应商Adobe发布了Dreamweaver CS5，它最突出的亮点有三处：第一、对CMS的支持功能；第二、对CSS的校验；第三、对PHP更好的支持。 1.3站点的建立-相关概念及操作 1．认识Dreamweaver 2．Dreamweaver的工作界面 1.3站点的建立-相关概念及操作 1．认识Dreamweaver 3．站点 一个站点（Site）对应磁盘上的一个文件夹，它存储了一个网站包含的所有文件。DW的使用是以站点为基础的，必须为每一个要处理的网站建立一个本地站点。 首页 公共图片文件夹 模块子目录 “ ” “ ” 第一章 网站概述 1．1 网站与网页的概述 1．2 认识网页与网站 1．3 站点的建立 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 1.1 网站与网页的概述 网络最大的特点是共享资源。浏览者登录网站后，可轻松利用网络资源。浏览者只需要打开电脑，点击浏览器，输入网站网址，网站的信息将呈现在眼前，只要浏览者在相关信息点击鼠标就可以获取有用信息，如查看新闻，查看天气，娱乐休闲等等。 标题 网站LOGO 页眉 页脚 1.1 网站与网页的概述--网页的基本元素 1.1 网站与网页的概述-网页的基本元素 主体内容 功能区 导航栏 广告区 1.1 网站与网页的概述-网页布局 布局类型 布局方式 “国”字型 网站的上面是标题及横幅广告，然后是网站的主体部分，在主体部分的左右分别列一些小条，中间是主要内容，下面是一些网站的信息，如版权信息。举例：人民网、网易等。 拐角型 它是“国”字型的变型，网站上面是标题广告，左侧是导航栏，右侧是主体部分，下面是网站的信息。举例：中国化工网等。 标题正文型 上面是标题，下面是主体部分。如一些文章页面或注册页面等。 左右框型 左边是导航栏，右边是正文。有时最上方会有一个小标题。如：大型论坛、企业网站等。 上下框型 与上面类似，区别仅在于上面是导航栏，下面是正文。 综合框架型 左右、上下两种框架结构的结合。 封面型（Flash型） 精美的平面或动画作为首页。如百度等。 1.1 网站与网页的概述-网页布局 页面布局构思草图 细化后的布局方案图 1.1 网站与网页的概述-色彩搭配 网站的整体视觉效果在网站布局方案确定之后就形成了雏形，因为网站的信息已经做了合理的安排。接下来要考虑如何吸引浏览者对网站的注意，而让浏览者能花更多的时间停留在网站上，是网站的整体视觉效果应该考虑的另一个因素——网页的色彩搭配。它决定了浏览者对该网站的第一印象。 1.1 网站与网页的概述-色彩搭配 色彩 红、黄、蓝三种色彩可以调和其他的色彩，因此把它们称为三原色。网页中的色彩表达即是用这三种颜色的数值表示，例如：红色是RGB(255,0,0)， 色调 暖色调——可使主页呈现温馨、和煦、热情的氛围。该色调代表：红色、橙色、黄色等色彩的搭配。 冷色调——可使主页呈现宁静、清凉、高雅的氛围。该色调代表：青色、绿色、紫色等色彩的搭配。 对比色调——把色调完全相反的色彩搭配在一空间里。如：红与绿、橙与蓝可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。 色彩的心理感觉 不同的颜色会给浏览者不同的心理感受，每种色彩在饱和度，透明度上略微变化就会产生不同的感觉 1.1 网站与网页的概述-色彩搭配 色彩 积极的含义 消极的含义 红色 热情、亢奋、激烈、喜庆、革命、吉利、兴隆、爱情、火热、活力 危险、痛苦、紧张、屠杀、残酷、事故、战争、爆炸、亏空 橙色 成熟、生命、永恒、华贵、热情、富丽、活跃、辉煌、兴奋、温暖 暴躁、不安、欺诈、嫉妒 黄色 光明、兴奋、明朗、活泼、丰收、愉悦、轻快、财富、权力 病痛、胆怯、骄傲、下流 绿色 自然、和平、生命、青春、畅通、安全、宁静、平稳、希望 生酸、失控 蓝色 久远、平静、安宁、沉着、纯洁、透明、独立、遐想 寒冷、伤感、孤漠、冷酷 紫色