模块一_初识网页与网页设计软件课件资料

忍 让 溜 妨 栏 奖 哨 靖 唐 蜀 茵 己 弘 青 耽 督 穆 诅 港 皖 帚 妮 愧 倔 孙 歪 刘 砧 德 摧 阂 钙 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模块一初识网页与网页设计 软件 任务二认识网站设计的基础知识 任务四 Dreamweaver CS3新功能 任务三了解网页制作的基本流程 任务一认识基本的网页 长 屎 日 报 曙 影 洁 逊 零 缀 禾 役 婪 黍 末 剖 毛 婆 建 含 修 壁 瓣 劳 捏 刚 砒 窜 顶 夷 园 侵 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 网页实际是一个文件，他存放在世界某个角落的的某一台计算机中，而这台计 算机必须是与互联网相连的。网页经由网址（ URL ）来识别与存取，在浏览器 输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到用户的计算 机，然后再通过浏览器解释网页的内容，再展示到用户的眼前。 网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，任何一 个网站都是由或多或少的网页组成的。 子任务1网页的相关概念 核 识 此 勇 硫 泌 粮 溶 胁 拒 印 灾 昨 附 阁 皋 程 皆 闯 茎 嘴 催 列 拂 恋 棋 销 斯 弄 勾 关 嫡 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 基本概念介绍： 1.浏览器（Browser） 是安装在计算机上的一种软件，通过它可以方便地看到Internet上提供的各种 信息和服务资源，常用的浏览器有两种，Internet Explorer（简称IE）和腾 讯。 2超链接（Hyperlink） 是WWW上的一种链接技巧，通过单击某个图标或某段文字，就可以自动连接 相对应的其它文件，从一个网页跳转到另一个网页。 3.网页（Webpage）， 是网站中的一“页”，通常是HTML格式（文件扩展名为.html或.htm或.asp或 .aspx或.php或.jsp等）。网页通常用图像档来提供图画。网页要通过网页 浏览器来阅读。进入一个网站后看到的第一个页面称为主页（Home page ）。一般的主页名称为index.htm(index.html)或index.asp。 暑 劈 鸳 炮 丫 嗓 臃 次 探 隐 嘉 噎 熄 啊 之 衅 陶 佰 椎 懊 他 游 驾 窘 足 鸣 坍 拱 制 凤 惨 舍 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 4网站 就是指在互联网（因特网）上，根据一定的规则，使用HTML等工具制作的 用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就 像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或 者利用网站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器 来访问网站，获取自己需要的资讯（信息）或者享受网络服务。 5网址（URL） 即统一资源定位地址（Uniform Resource Locate），是WWW上的地址编码 ，指出了文件在Internet中的位置。它存在的目的在于统一WWW上的地址编 码，给每一个网页一个用它的编码来制定的地址，这样就不会出现重复或由 于编码不统一而出现无法浏览等问题了。当用户查询信息资源时，只需给出 URL地址，则WWW服务器就可以根据它找到网络资源的位置，并将它传送 给用户的计算机。通过，当用户用鼠标单击网页中的链接点时，就将URL地 址的请求传送给WWW服务器。 母 嚼 瓜 南 恍 悸 悄 循 题 暗 鼠 苏 拣 勺 北 及 嫉 抓 激 澄 过 纱 阳 琴 痞 得 纳 败 崎 蹦 银 卢 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 6网页的分类 网页有多种分类，我们笼统意义上的分类是动态和静态的页面。 静态页面多通过网站设计软件来进行重新设计和更改，相对比较滞后，现在 通过网站管理系统，也可以生成静态页面我们称这种静态页面为伪静态。 动态页面通过网页脚本与语言自动处理自动更新的页面，如各主题论坛，就 是通过网站服务器运行程序，自动处理信息，按照流程更新网页。 7网站的分类 （1）展示型 主要以展示形象为主，艺术设计成份比较高，内容不多，多见于从事美术设 计方面的工作室。 （2）内容型 站点以内容为重点，用内容吸引人。例如：普通的公司网站，用于发布公司 产品、公司动态、招聘信息等。一些从事信息服务性的站点，如文学站、下 载站、新闻站等等。一般该类站点以设计以简洁大方为主，不需要太多太花 翘的东西转移读者的视线。 腑 蹦 块 羞 扔 轴 柑 糖 亥 褒 冰 鼠 噶 迷 扳 删 乓 颁 掖 冯 雇 忘 吕 廓 糙 挫 仗 彻 掳 鼎 缓 树 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 （3）电子商务型 以从事电子商务为主的站点，要求安全性高、稳定性高。比较考验网站中运 行的程序。一般该类站点设计要简洁大方，又不失热闹有人气的感觉，颜色 多用蓝色等表现信任感。 （4）门户型 该类站点类似内容型，但又不同于内容型，因其站上的内容特别丰富，内容 比较综合。一般内容型网站内容比较集中于某一专业、或自己的领域、或自 己的公司、工作室等小范围的内容，而门户型一般来说除了表现更为丰富的 内容外，通常更加注重网站与用户之间的交流。例如一般门户型网站也会提 供信息的发布平台，与用户的交流平台等。 赞 垛 漫 痞 汛 椭 封 莉 漳 闷 穷 咖 络 横 碑 柠 酗 岔 蜂 骚 播 咒 绦 抽 徒 戴 细 涧 憨 广 腕 便 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 网站的基本元素是网页，一个个的网页构成了一个完整的网站。 网页也是可分的，构成网页的基本元素包括标题、网站LOGO、页眉、页脚、 主体内容、功能区、导航区、广告栏等。这些元素在网页的位置安排，就是网 页的整体布局。 1标题 每个网页的最顶端都有一条信息，这条信息往往出现在浏览器的标题栏， 而非网页中，但是这条信息也是网页布局中的一部分。这条信息是对这个网页 中主要内容的提示，即标题。 子任务2网页的基本元素 剃 温 少 说 糖 接 亦 晋 饰 斟 白 氛 摸 譬 蛮 奖 案 傍 武 诞 弱 纺 噪 缸 图 惫 战 爽 炔 臆 辟 完 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 2LOGO LOGO是网站所有者对外宣传自身形象的工具。LOGO集中体现了这个网 站的文化内涵和内容定位。可以说， LOGO是一个网站的最为吸引人、最容易 被人记住的标志。如果网站所有者已经导入了CIS系统，那么LOGO的设计就要 符合CIS的设定。如果所有者没有导入CIS，就要根据网站的文化内涵和内容定 位设计LOGO。无论怎样，网站LOGO的设计都要在网站制作初期进行，这样 才能从网站的长远发展角度出发，设计出一个能够长时间使用的、最能代表该 网站的LOGO。LOGO在网站中的位置都比较醒目，目的是要使其突出，容易 被人识别与记忆。在二级网页中，页眉位置一般都留给LOGO。另外，LOGO 往往被设计成为一种可以回到首页的超链接。 说明：CIS简称CI，全称 Corporate Identity System，译称企业识别系统，意译 为“企业形象统一战略”。 嘲 嫩 嗜 氟 届 船 快 殊 宵 静 应 轰 启 秸 倚 尝 登 绘 蛔 钥 畅 袁 氛 晚 暖 穴 怪 樱 噪 碴 耻 愁 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 3页眉 网页的上端即是这个页面的页眉。页眉并不是在所有的网页中都有，一些 特殊的网页就没有明确划分出页眉。页眉往往在一个页面中相当重要的位置， 容易引起浏览者的注意，所以很多网站都会在页眉中设置宣传本网站的内容， 如网站宗旨、网站LOGO等，也有一些网站将这个 “黄金地段”作为广告位出租 。 4主体内容 主体内容是网页中的最重要的元素。主体内容并不完整，往往由下一级内 容的标题、内容提要、内容摘编的超链接构成。主体内容借助超链接，可以利 用一个页面，高度概括几个页面所表达的内容，而首页的主体内容甚至能在一 个页面中高度概括整个网站的内容。 主体内容一般均有图片和文档构成，现在的一些网站的主体内容中还加入 了视频、音频等多媒体文件。由于人们的阅读习惯是由上至下、由左至右，所 以主体内容的内容分布也是按照这个规律，依照重要到不重要的顺序安排内容 ，所以在主体内容中，左上方的内容是最重要的。战略”。 酞 贮 啮 赖 菠 踌 淡 拧 笛 扳 盛 巫 暮 盐 女 顾 砖 括 情 价 哇 贝 猫 雨 亥 勺 绕 躲 狡 练 躇 琐 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 5页脚 网页的最底端部分被称为页脚，页脚部分通常被用来介绍网站所有者的具 体信息和联络方式，如名称、地址、联系方式、版权信息等。其中一些内容被 做成标题式的超链接，引导浏览者进一步了解详细的内容。 sohu网站的页脚除上述内容外，增加了导航内容，这种方式在首页内容过 多的情况很适用。好处是浏览者不必滑动滚动条，可直接选择栏目，易用性强 。 6功能区 功能区是网站主要功能的集中表现。一般位于网页的右上方或右侧边栏。 功能区包括：电子邮件、信息发布、用户名注册、登陆网站等内容。有些网站 使用了IP定位功能，定位浏览者所在地，然后可在功能区显示当地的天气、新 闻等个性化信息。 熊 啸 吞 滥 钙 枝 子 呈 骏 肝 霓 奄 这 统 鸡 烹 宅 鲤 猴 膘 晒 镜 联 涕 弧 遥 檀 刊 洗 搐 潭 帛 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务一认识基本的网页 7导航区 如果说主体内容部分重要的话，导航区的重要性与其不相上下，甚至导航 区的设计可以成为一种独立的设计，与网页布局设计分庭抗礼。之所以说导航 区重要，是因为其所在位置左右着整个网页布局的设计。导航区一般分为4种位 置，分别是左侧、右侧、顶部和底部。一般网站使用的导航区都是单一的，但 是也有一些网站为了使网页更便于浏览者操作，增加可访问性，往往采用了多 导航技术，如Yahoo!网站采用了左侧导航与底部导航相结合的方式。但是无论 采用几个导航区，网站中的每个页面的导航区位置均是固定的。 8广告区 广告区是网站实现赢利或自我展示的区域。一般位于网页的页眉、右侧和底部 。广告区内容以文字、图像、Flash动画为主。通过吸引浏览者点击链接的方式 达成广告效果。广告区设置要达到明显、合理、引人注目，这对整个网站的布 局很重要。 野 凋 陡 吩 叭 腋 慧 娥 铸 泳 秆 充 谈 拨 廷 称 复 竟 竹 去 呀 苯 井 野 焙 插 芥 绽 城 钓 番 旋 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务二认识网站设计的基础知识 网站是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示 特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像公告 栏一样，人们可以通过网站来发而自己想要公开的信息，或者利用网站来 提供相的网络服务。用户可以通过网页浏览器来访问网站，获取自己需要 的资料或者享受网络服务。 教 暴 忽 耀 抉 悯 瞄 咀 旷 疤 致 蔡 海 吨 题 毅 氓 瞩 撮 原 窥 疚 氦 揖 敝 募 陈 秉 控 蟹 徒 苦 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务二认识网站设计的基础知识 1明确建立网站的目标和用户需求 Web站点的设计是展现自我形象的重要途径，因此必须明确设计站点 的目的和用户需求，从而做出切实可行的设计计划。我们会根据使用者的 需求进行分析，以“使用者”为中心，而不是以“美术”为中心进行设计规划。 在设计规划时我们会考虑： 建设网站的目的是什么？ 为谁提供服务？ 网站的目的消费者和受众的特点是什么？ 子任务1网站设计的基本原则 族 朗 刑 萝 尊 病 自 付 恶 寞 氛 痊 剥 难 者 咯 漆 梦 热 淖 丑 汲 护 组 抠 搀 戏 蒙 都 另 蛀 丝 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务二认识网站设计的基础知识 2网页设计总体方案主题鲜明 在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站 的整体风格和特色作出定位，规划网站的组织结构。 Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。 有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的 图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好 的Web站点把图形表现手法和有效的组织与通信结合起来。 为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单 明确的语言和画面体现站点的主题；调动一切手段充分表现网站点的个性 和情趣，办出网站的特点。 Web站点主页应具备的基本成分包括： 页头：准确无误地标识你的站 点和企业标志； Email地址：用来接收用户垂询； 联系信息：如普通邮件 地址或电话； 版权信息：声明版权所有者等。 充分利用已有信息，如客户手册、公共关系文档、技术手册和数据库 等。 狞 两 充 如 靳 部 喝 腰 搬 盗 茄 季 弗 娇 邹 拳 俘 丝 青 踢 捉 硼 矾 锋 绿 泻 牙 听 虱 偿 炕 无 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务二认识网站设计的基础知识 在设计页面版式时应该注意以下两点：一是设计页面版式时应以目标为准 ，最大限度地体现网站的功能。二是设计的页面应形象简明、易于接受。 设计页面时应当始终为目标用户着想，网页中的任何信息都应该是为用户 服务，因此要确保网页中的信息能够被用户接受。 总之，设计网页布局时，以简单、和谐为追求目标。 常见的网页布局形式有以下5种： 1“T”型布局 所谓“T型”结构就是指页面顶部为横条网站标志与广告条，下方左面为主菜 单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母 “T”，所以我们称之为“T”型布局。这是网页设计中用的最广泛的一种布局方 式。 子任务2网页的布局 鉴 岛 绦 坷 痔 净 资 郸 邑 已 恿 拣 恒 仕 沁 汇 朋 墓 蚌 胞 惩 幻 兹 安 挨 冯 粮 吸 然 阿 样 徒 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务二认识网站设计的基础知识 2“口”字型布局 这是一种象形的说法，就是页面的上下各有一个广告条，左侧是主菜单， 右侧放置友情链接等内容，中间是主要内容。也有将四边空出，只用中间 的窗口型设计，如网易壁纸站。 这种布局的优点是充分利用版面，信息量大；其缺点是页面拥护，不够灵 活。 3“三”字型布局 这种布局多用于国外站点，国内用得不多。特点是页面上横向两条色块， 将页面整体分割成4部分，色块中大多放广告。 4对称对比布局 顾名思义，采用左右或者上下对称的布局，一半深色，一半浅色，一般用 于设计型站点。 优点是视觉冲击力强，缺点是将两部分有机的结合时比较困难。 5POP布局 POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作 为页面的设计中心。常用于时尚类站点。 优点是漂亮吸引人，缺点是速度慢。 忿 酮 煮 柄 囚 燎 冰 翌 涛 猎 梦 患 从 涉 轧 诞 威 防 条 弓 岸 赣 新 锗 啦 剂 贸 秀 舅 着 辜 弊 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务二认识网站设计的基础知识 无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离 显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是 网页的色彩。 1标准颜色 标准颜色是指能够体现网站形象和延伸内涵颜色，主要用在网站的标志、 主菜单上，给人一种整体统一的感觉。标准颜色一般不宜超过三种。常用 的标准颜色选择有：蓝/绿色、黄/橙色、黑/灰/白三大系列色。 2其它颜色 标准颜色定下来以后，其它的颜色也可以使用，但只能作为点缀和衬托， 绝不能喧宾夺主。选择颜色要和网页的内涵相关联，让人产生联想，如蓝 色联想到天空、黑色联想到黑夜、红色联想到喜庆等。 子任务3网站的配色 谓 衰 斡 挫 航 殴 烘 苗 鳃 戒 穗 梢 吠 指 皂 愉 奋 涎 梭 泽 惭 巢 试 淋 址 谢 挚 欲 十 壹 球 邮 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务二认识网站设计的基础知识 3网页色彩搭配原理 （1）鲜明性。 （2）独特性。 （3）合适性。 （4）联想性。 4色彩搭配的技巧 （1）用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度 ，这样的页面看起来色彩统一，有层次感。 （2）用两种色彩。先选定一种色彩，然后选择它的对比色。 （3）用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡 绿；或者土黄，土灰，土蓝。确定色彩的方法因人而异，比如可以在 Photoshop是单击前景色方框，在弹出的“混色器”对话框中选择“自定义”， 然后在“色库”中选择即可。 （4）用黑色和一种彩色。比如大红的字体配黑色的边框感觉很鲜明。 李 驰 蛀 插 笔 时 趟 臆 笨 贿 摆 务 皖 矣 佰 汲 奢 巷 马 刷 法 寡 输 钩 悍 焊 堑 岭 捕 蝇 骋 倘 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务二认识网站设计的基础知识 5避免配色中的误区： （1）不要将所有颜色都用到，尽量控制在三至五种色彩以内。 （2）背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以 便突出主要文字内容。 堤 脓 胜 洞 珊 明 径 罚 沁 宏 茎 惹 庚 胃 照 暂 撅 看 侗 哦 拨 染 脱 溜 瘪 攀 壶 博 旬 亦 击 酣 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务三了解网页制作的基本流程 1确定目标 主要确定自己的目的网站是什么样的，如网站的主色调、网站的颜色、网 站的内容排列等。对于新手来说，可以参考借鉴别人的作品，然后去模仿 。好的策划是成功的重要基础。 2设计图纸 设计图纸的主要目的是要把网页中用到的图片用photoshop或firework画出 来，这一步非常重要。对于希望从事网页美工的同学来说，photoshop或 firework是必须要熟练掌握的。有些情况下，需要将图片切割成若干个小图 片，这项工作也需要用到photoshop或firework。 3制作网页 使用Dreamweaver制作网页。网页实际上就是表格加图片加FLASH。 子任务1网页制作流程 攫 庞 引 移 担 碳 两 酸 气 抚 巴 克 渭 荆 拣 织 嫌 蒸 瞩 驻 爱 挤 搁 捎 虏 戳 檀 掺 陋 握 阮 郴 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务三了解网页制作的基本流程 对于静态网站，掌握网页制作流程即可。如果是动态网站，需要掌握以下 内容： 1整体规划 （1）选择动态程序语言，如ASP 、PHP 、JSP 、.NET 等等。一般的小型 网站都是使用 ASP + ACC数据库形式来制作， .NET 是新兴的一种语言， 是ASP的升级版本。 （2）要做好网站栏目功能规划。即确定栏目和要实现的功能等。 （3）最后是根目录的策划。即安排好网站中用到的所有文件的储存目录。 2数据库规划 确定所用的数据库及其组成。 3编写网站后台 编写控制数据的代码，以实现其动态效果。 子任务2网站制作流程 痴 孽 倦 踢 瞻 搀 懂 哈 深 片 唾 磷 忙 硫 慈 啦 保 掇 虹 粪 滤 烙 当 途 议 噪 狐 仆 戴 兰 抉 叛 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务三了解网页制作的基本流程 4编写网站前台 通过代码把动态数据显示到前面已经设计好的网页中。 5测试，修改 对做好的网站进行测试，如发现问题再进行修改。 6发布 可以把自己的计算机配置成服务器，只需配置IIS即可发布。也可以考虑购 买虚拟空间和域名或选择免费空间和免费域名进行发布。前者可作为自我 展示用，后者可在internet上展示。 误 循 子 王 婶 屎 个 辆 将 卓 嫩 渊 冕 帕 紧 稼 贼 瞎 劫 浇 并 赌 蓟 撼 锚 止 页 碍 骤 始 澳 畦 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 Dreamewaver系列软件集合了网页制作和网站管理于一身的“所见即所得”的 网页制作软件，它强大的功能和清晰的操作界面备受广大网页设计者的欢迎 。Dreamewaver CS3作为Dreamewaver系列中的最新版本，在增强了面向 专业人士的基本工具和可视技术外，同时提供了功能强大、开放式且基于标 准的开发模式，可以轻而易举地制作出跨平台和浏览器的动感效果网页。 Dreamweaver CS3是Adobe公司最新推出的网页制作软件，用于对网站、 网页和Web应用程序进行设计、编码和开发，广泛用于网页制作和网站管理 。 匹 揪 挡 租 镶 幌 掠 未 懒 叶 驭 弯 愚 恢 栅 秽 屡 泄 扎 不 炊 冒 友 嗜 兹 余 目 蜒 驾 镣 忧 湘 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 子任务1 Dreamweaver CS3新功能 1Ajax 的 Spry 框架 通过 Adobe Dreamweaver CS3，可以使用 Ajax 的 Spry 框架进行动态用户界面的可视化设计、开发和部署。Ajax 的 Spry 框架 是一个面向 Web 设计人员的 JavaScript 库，用于构建向用户提供更丰富体 验的网页。Spry 与其它 Ajax 框架不同，可以同时为设计人员和开发人员所 用，因为实际上它的 99% 都是 HTML。 2Spry 构件 Spry 构件是预置的常用用户界面组件，可以使用 CSS 自定义 这些组件，然后将其添加到网页中。使用 Dreamweaver，您可以将多个 Spry 构件添加到自己的页面中，这些构件包括 XML 驱动的列表和表格、折 叠构件、选项卡式界面和具有验证功能的表单元素。 累 报 托 惶 回 瘁 亲 新 膀 窍 顿 董 偶 趾 馁 夸 伶 魏 弥 宋 肚 亏 腐 斟 楔 陇 鸦 琼 迈 攀 啤 蔗 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 3Spry 效果 Spry 效果是一种提高网站外观吸引力的简洁方式。这种效果 差不多可应用于 HTML 页面上的所有元素。您可以添加 Spry 效果来放大、 收缩、渐隐和高亮显示元素；在一段时间内以可视方式更改页面元素；以及 执行更多操作。 4高级 Photoshop CS3 集成 Dreamweaver 包括了与 Photoshop CS3 的 增强的集成功能。现在，设计人员可以在 Photoshop 中选择设计的任一部 分（甚至可以跨多个层），然后将其直接粘贴到 Dreamweaver 页面中。 Dreamweaver 会显示一个对话框，可在其中为图像指定优化选项。如果需 要编辑图像，只需双击图像即可在 Photoshop 中打开原始的带图层 PSD 文 件进行编辑。 5浏览器兼容性检查 Dreamweaver 中新的浏览器兼容性检查功能可生成 报告，指出各种浏览器中与 CSS 相关的呈现问题。在代码视图中，这些问 题以绿色下划线来标记，因此您可以准确知道产生问题的代码位置。确定问 题之后，如果知道解决方案，则可以快速解决问题；如果需要了解详细信息 ，则可以访问 Adobe CSS Advisor。 概 癸 性 疑 订 界 阜 耘 镜 律 德 盈 儿 胸 备 寨 裸 田 元 院 弗 益 诊 鹊 桩 忱 蒲 起 茅 唆 秃 亏 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 6Adobe CSS Advisor Adobe CSS Advisor 网站包含有关最新 CSS 问题 的信息，在浏览器兼容性检查过程中可通过 Dreamweaver 用户界面直接访 问该网站。CSS Advisor 不止是一个论坛、一个 wiki 页面或一个讨论组，它 使您可以方便地为现有内容提供建议和改进意见，或者方便地添加新的问题 以使整个社区都能够从中受益。 7CSS 布局 Dreamweaver 提供一组预先设计的 CSS 布局，它们可以帮 助用户快速设计好页面并开始运行，并且在代码中提供了丰富的内联注释以 帮助用户了解CSS页面布局。Web 上的大多数站点设计都可以被归类为一 列、两列或三列式布局，而且每种布局都包含许多附加元素（例如标题和脚 注）。Dreamweaver 提供了一个包含基本布局设计的综合性列表，用户可 以自定义这些设计以满足自己的需要。 8管理 CSS 借助管理 CSS 功能，可以轻松地在文档之间、文档标题与外 部表之间、外部 CSS 文件之间以及更多位置之间移动 CSS 规则。此外， 还可以将内联 CSS 转换为 CSS 规则，并且只需通过拖放操作即可将它们 放置在所需位置。 恫 幌 抹 酶 疾 辅 卯 缚 劫 若 敦 曲 扼 筋 愧 霹 戍 氰 偏 琐 曙 懊 煌 韭 勇 飘 市 沃 强 睫 瓦 呀 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 9.Adobe Device CentralAdobe Device Central 与 Dreamweaver 相集成并 且存在于整个 Creative Suite 3 软件产品系列中，使用它可以快速访问每个 设备的基本技术规范，还可以收缩 HTML 页面的文本和图像以便显示效果 与设备上出现的完全一样，从而简化了移动内容的创建过程。 10Adobe Bridge CS3 将 Adobe Bridge CS3 与 Dreamweaver 一起使用 可以轻松、一致地管理图像和资源。通过 Adobe Bridge 能够集中访问项目 文件、应用程序、设置以及 XMP 元数据标记和搜索功能。Adobe Bridge 凭 借其文件组织和文件共享功能以及对 Adobe Stock Photos 的访问功能，提 供了一种更有效的创新工作流程，使您可以驾驭印刷、Web、视频和移动等 诸多项目。 屎 琳 扑 蔚 葬 咐 贫 梳 凝 乍 屡 寒 发 抖 违 丁 颁 蹋 膘 仙 抢 过 蝗 琢 兽 佃 惕 压 盎 驹 挥 榴 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 子任务2 Dreamweaver CS3的工作界面 Dreamweaver CS3的工作界面秉承了Dreamweaver系列产品一贯的简洁、 高效和易用性，大多功能都能在工作界面中很方便地找到。它的工作界 面主要由【文档】窗口、【文档】工具栏、菜单栏、插入栏、面板组和 【属性】面板组成。 各种界面认识 （1）启动界面：启动Dreamweaver CS3后，系统弹出启动界面，如图1-1 所示，用户可根据需要执行“打开”或“新建”等操作。 牡 金 能 射 费 矛 痘 议 办 片 郧 环 铀 扮 粮 丹 幽 搂 朝 眩 扒 拼 轰 翠 镭 盼 掷 摘 诈 枝 若 基 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 标题栏 菜单栏 插入栏 欢迎界面 属性面板 面板组 1-1 Dreamweaver CS3启动 界面 舅 归 须 蓑 钟 葱 穴 职 浇 斤 踢 舱 撩 谍 逢 阔 窜 杨 美 盂 赃 氖 甘 吼 奠 探 扑 广 苦 剿 殊 吮 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 （2）设计界面，单击“设计”选项，系统弹出“设计界面”，如图1-2所示。用 户可以进行相关设计操作。 文档窗口 （工作区域） 状态栏 设计选项 1-2 Dreamweaver CS3设计界面 逮 看 寒 刷 棱 咋 帝 烬 椿 夷 搏 培 垃 另 咨 执 桌 级 播 驱 淬 域 谋 畦 铰 侥 呀 础 零 鞋 舔 胞 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 （3）代码界面，单击“代码”选项，系统弹出“代码界面”，如图1-3所示。用 户可以输入代码。 代码选项 1-3 Dreamweaver CS3代码界面 湾 畴 极 榨 梭 好 羔 抖 漆 萝 醋 距 壕 下 雇 桓 所 搓 酬 炼 良 塌 辨 翔 抛 脾 颗 爷 厩 毗 街 写 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 窗口中各组成部分介绍： （1）标题栏：显示了软件的名称、网页标题和网页文件名称。 （2）菜单栏：包括10组菜单，包含了网页编辑的大部分操作命令，如图所 示【文件】：主要用于对网页中的文档进行基本的操作与管理，如“新建” 、“打开”、“保存”、“导入”、“导出”等。 【编辑】：主要用于对网页文档进行编辑修改操作，如“剪切”、“复制”、“粘 贴”、“撤消”、“查找”和“重做”等命令。 【查看】：主要用于控制工作界面的显示方式，如是否显示网格、标尺和跟 踪图像等命令。 【插入】：提供“插入栏”的替代项，用于将对象插入到用户的网页文档中， 如标签、图象、表单等。 取 撕 颇 店 垢 胳 忧 刃 蘑 羞 怨 壹 雏 玲 顾 玉 梦 兢 惨 繁 陵 袭 伐 胡 希 媒 萎 涣 灯 焚 账 抨 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网 页 与 网 页 设 计 软 件 任务四认识Dreamweaver CS3 【修改】：使用户更改选定的页面对象的属性，包括修改页面属性、建立链 接、排序和对齐等命令。 【文本】：使用户设置文本的格式属性，如字体、字号、颜色等。 【命令】：提供了对Dreamweaver各种命令的访问。 【站点】：主要用于管理站点和进行编辑操作，如新建站点、编辑站点以及 上传和下载文件的菜单项。 【窗口】：主要用于控制对Dreamweaver中的所有面板、检查器和窗口的 显示和隐藏。 【帮助】：提供使用Dreamweaver及创建Dreamweaver扩展功能的系统帮 助信息。 搅 计 沧 慢 熊 腑 落 搐 宋 源 重 沉 发 愚 劫 浮 哈 巷 腕 映 菩 矛 瞻 疑 划 酝 爬 需 糊 弗 穗 傻 模 块 一 初 识 网 页 与 网 页 设 计 软 件 模 块 一 初 识 网