第1章Dreamweaver CS6简介

Dreamweaver CS6是一款功能强大的可视化的网页编辑与管理软件。利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。

本章主要内容

●Dreamweaver CS6的新增功能。

●Dreamweaver CS6的安装、删除和启动。

●Dreamweaver CS6的工作界面。

●Dreamweaver CS6的一般操作。

本章重点

●Dreamweaver CS6常用面板的使用方法。

●Dreamweaver CS6的文件操作。

1.1 Dreamweaver CS6概述

Dreamweaver CS6 是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。在业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。

由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，因此对于初级人员，无须编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作。CS6新版本使用了自适应网格版面创建页面，在发布前可使用多屏幕预览审阅设计,大大提高了用户的工作效率，而改善的FTP性能可更高效地传输大型文件。“实时视图”和“多屏幕预览”面板可呈现HTML5 代码，用户能更方便地检查自己的工作。

1.2 Dreamweaver CS6的新增功能

相对于以前的版本，Dreamweaver CS6的功能主要在以下方面进行了增强。

1. 可响应的自适应网格版面

使用响应迅速的CSS 自适应网格版面，可以创建跨平台和跨浏览器的兼容网页设计。利用简洁、业界标准的代码可为各种不同设备和计算机开发项目，提高工作效率。用

户可直观地创建复杂网页设计和页面版面，无须忙于编写代码。

2. 改善的FTP性能

利用重新改良的多线程FTP 传输工具可节省上传大型文件的时间。而快速高效地上传网站文件可缩短制作时间。

3. Adobe Business Catalyst 集成

使用Dreamweaver 中集成的Business Catalyst 面板连接并编辑用户利用Adobe Business Catalyst(需另外购买)建立的网站。利用托管解决方案建立电子商务网站。

4. 增强型jQuery 移动支持

使用更新的jQuery 移动框架支持为iOS 和Android 平台建立本地应用程序。建立触及移动受众的应用程序，同时简化用户的移动开发工作流程。

5. 更新的PhoneGap 支持

更新的Adobe PhoneGap支持可轻松为Android 和iOS系统建立和封装本地应用程序。通过改编现有的HTML 代码来创建移动应用程序，并可使用PhoneGap 模拟器检查用户的设计。

6. CSS转换

将CSS 属性变化制成动画转换效果，可使网页设计栩栩如生，在用户处理网页元素和创建优美效果时，能保持对网页设计的精准控制。

7. 更新的实时视图

使用更新的“实时视图”功能可在发布前测试页面。“实时视图”现已使用最新版的WebKit 转换引擎，能够提供绝佳的HTML5 支持。

8. 更新的多屏幕预览面板

可利用更新的“多屏幕预览”面板检查智能手机、平板电脑和台式机所建立项目的显示画面。该增强型面板现在能够帮助用户检查HTML5的内容呈现。

9. 浏览器兼容性检查

Dreamweaver CS6中新的浏览器兼容性检查功能可生成报告(见图1-1)，指出各种浏览器中与CSS 相关的呈现问题。在代码视图中，这些问题以绿色下划线来标记，如图1-2所示，因此可以准确地知道产生问题的代码位置。确定问题之后，如果知道解决方案，则可以快速解决问题；如果需要了解详细信息，则可以访问Adobe CSS Advisor。

图1-1 浏览器兼容性检查报告

第1章Dreamweaver CS6简介

图1-2 绿色下划线标记

10. Adobe CSS Advisor

Adobe CSS Advisor 网站包含有关最新的CSS问题信息，在浏览器兼容性检查过程中可通过Dreamweaver 用户界面直接访问该网站。CSS Advisor 不止是一个论坛、一个WiKi页面或一个讨论组，它可以方便地为现有内容提供建议和改进意见，或者方便地添加新的问题，以使整个社区都能够从中受益。

11. CSS 布局

Dreamweaver提供了一组预先设计的CSS 布局，可以帮助用户快速设计好页面并开始运行，并且在代码中提供了丰富的内联注释以帮助用户了解CSS页面布局，如图1-3所示。Web 上的大多数站点设计都可以被归类为一列、两列或三列式布局，而且每种布局都包含许多附加元素(例如标题和脚注)。Dreamweaver 提供了一个包含基本布局设计的综合性列表，用户可以自定义这些设计以满足自己的需要。

图1-3 CSS布局

12. 管理CSS

借助管理CSS 功能，可以轻松地在文档之间、文档标题与外部表之间、外部CSS 文件之间以及更多位置之间移动CSS 规则。此外，还可以将内联CSS 转换为CSS 规则，并且只需通过拖放操作即可将它们放置在所需位置。

13. Adobe Device Central

Adobe Device Central 与Dreamweaver 相集成，并且存在于整个Creative Suite 3 软件产品系列中，使用它可以快速访问每个设备的基本技术规范，还可以收缩HTML 页面

的文本和图像，以便使显示效果与设备上出现的完全一样，从而简化了移动内容的创建过程。

14. Adobe Bridge CS6

将Adobe Bridge CS6 与Dreamweaver 一起使用可以轻松、一致地管理图像和资源。通过Adobe Bridge 能够集中访问项目文件、应用程序，以及设置XMP 元数据标记和搜索功能。

15. CSS增强功能

Dreamweaver 8具有HTML格式化功能，但没有CSS格式化功能，而Dreamweaver CS6增加了CSS的格式化功能。

1.3 Dreamweaver CS6的安装、卸载和启动

本节主要介绍如何安装和卸载Dreamweaver CS6，以及运行Dreamweaver CS6的方法。

1.3.1 系统要求

以下硬件和软件是运行Dreamweaver CS6所必需的。

对Microsoft Windows系统的要求如下。

●处理器：Intel Pentium 4 或AMD Athlon 64(或兼容处理器)。

●操作系统：Windows XP SP2 或更高版本，Windows Vista Home Premium、

Business、Enterprise 或Ultimate(仅提供对32位版本的认证支持)。

●RAM：512 MB。

●硬盘：1.3 GB以上可用空间。

●媒体：DVD-ROM驱动器。

●Internet 连接(用于激活)。

对Macintosh系统的要求如下。

●处理器：G4、G5 或基于Intel 的Mac。

●操作系统：Mac OS 10.6或10.7版。

●RAM：512 MB。

●硬盘：1.8 GB以上可用空间。

●媒体：DVD-ROM 驱动器。

●Internet 连接(用于激活)。

1.3.2 安装Dreamweaver CS6

安装Dreamweaver CS6时，首先关闭系统中当前正在运行的所有应用程序，包括其他Adobe 应用程序，然后执行下列操作之一。

●将安装光盘插入驱动器中，然后按照屏幕说明进行操作。注意：如果安装程序没

有自动启动，请双击光盘根目录中的Setup.exe文件(Windows)或Setup文件

第1章Dreamweaver CS6简介

(Mac OS)。

如果用户是从网上下载的软件，请打开文件夹并双击Setup.exe文件(Windows) 或Setup文件(Mac OS)，然后按屏幕说明进行操作。

下面是安装过程简介。

(1) 在“Adobe软件许可协议”界面(见图 1-4)中单击“接受”按钮，进入安装位置界面。

图1-4 “Adobe软件许可协议”界面

(2) 在安装位置界面(见图 1-5)中单击“安装”按钮，进入“安装”界面，如图1-6所示。

图1-5 安装位置界面

(3) 进入“安装完成”界面后，单击“关闭”按钮退出安装，如图1-7所示。

图1-7 “安装完成”界面

1.3.3 卸载Dreamweaver CS6

若要卸载Dreamweaver CS6软件，首先关闭系统中当前正在运行的所有应用程序，包括其他Adobe 应用程序，然后执行下列操作之一。

●在Windows XP系统中，打开Windows“控制面板”窗口，然后双击“添加或删

除程序”图标，打开“添加或删除程序”窗口。选择要卸载的产品，单击“更改/

删除”按钮，然后按屏幕说明进行操作。

●在Windows Vista系统中，打开Windows“控制面板”窗口，然后双击“程序和

功能”图标，在弹出的界面中选择要卸载的产品，单击“更改/删除”按钮，然后

第1章Dreamweaver CS6简介

按屏幕说明进行操作。

在Mac 系统中，请勿通过将应用程序拖入废纸篓的方式进行卸载，应安全卸载软件，即选择“应用程序”|“实用程序”|“Adobe 安装程序”命令中的产品安

装程序，以管理员身份通过身份验证，选择“删除组件”命令，然后按屏幕说明

进行操作。

1.3.4 启动与退出Dreamweaver CS6

Dreamweaver C6的启动与退出方式有很多种，下面详细介绍。

1. Dreamweaver CS6的启动

Dreamweaver CS6启动方式有许多种，但一般用得较多的是以下两种。

1) 从“开始”菜单中启动

单击Windows桌面左下角的“开始”按钮，在“程序”子菜单中选择“Adobe Dreamweaver CS6”命令进行启动。

2) 用快捷方式启动

在桌面上单击Dreamweaver CS6的快捷启动图标，即可启动。Dreamweaver CS6的启动界面如图1-8所示。

图1-8 启动界面

首次启动Dreamweaver CS6后的主窗口界面如图1-9所示。如果不想每次启动时都显示该界面，则选中“不再显示”复选框即可。

图1-9 Dreamweaver CS6主窗口界面

2. Dreamweaver CS6的退出

退出Dreamweaver CS6 的方式有很多种，但平时用得最多的不外乎如下几种。

● 在Dreamweaver CS6主窗口中的“文件”菜单中选择“退出”命令。

● 在 Dreamweaver CS6被激活状态下，直接按 Alt+F4 组合键。

● 单击Dreamweaver CS6主窗口左上角的控制菜单图标，从弹出的菜单中选择“关

闭”命令，或者直接双击控制菜单图标。

● 单击Dreamweaver CS6主窗口右上角的“关闭”按钮。

1.4 Dreamweaver CS6的工作窗口

Dreamweaver CS6的工作窗口主要包括功能菜单、插入栏、文档工具栏、文档窗口、状态栏、属性面板、功能面板等，如图1-10所示。合理使用这几个板块的相关功能，可以使设计工作成为一个高效、便捷的过程。 文档工具栏

状态栏

属性面板

功能菜单

功能面板

插入栏

文档窗口

图1-10 Dreamweaver CS6的工作窗口

1.4.1 功能菜单

所谓功能菜单，就是一些能够实现一定功能的菜单命令。Dreamweaver CS6拥有“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”等10个菜单分类，单击这些菜单可以打开其子菜单，如图1-11所示。Dreamweaver CS6的菜单功能极其丰富，几乎涵盖了所有的功能操作。

第1章Dreamweaver CS6简介

图1-11 “文件”菜单

1.4.2 插入栏

“插入栏”包含用于创建和插入对象(如表格、AP元素和图像)的按钮。当鼠标指针移动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。

这些按钮被组织到若干选项卡中，用户可以单击“插入栏”顶部的相应选项卡进行切换。当启动Dreamweaver CS6时，系统会默认打开用户上次使用的选项卡。

某些选项卡具有带弹出菜单的按钮。从弹出菜单中选择一个命令时，该命令将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”命令，下次单击“图像”按钮时，Dreamweaver CS6会自插入一个图像占位符。每当从按钮的弹出菜单中选择一个新命令时，该按钮的默认操作都会改变。

“插入栏”按以下选项卡进行组织。

1. “常用”选项卡

“常用”选项卡包含了最常用的对象，最主要的功能是插入各项最常用的基本网页设计及排版组件，如图像按钮、表格按钮、插入媒体等，如图1-12所示。

图1-12 “常用”选项卡

2. “布局”选项卡

“布局”选项卡包含了表格按钮、DIV 标签等标签，如图1-13所示，可以帮助用户快速地在网页中绘制不同的表格和框架。这与以往版本的Dreamweaver 有很大的区别。

图1-13 “布局”选项卡

3. “表单”选项卡

“表单”选项卡包含了创建表单域和插入表单元素的按钮，如图1-14所示。表单是网页设计中最重要却又最难完全掌握的部分，使用表单可以收集访问者的信息，如订单、搜索接口等。

图1-14 “表单”选项卡

4. “数据”选项卡

“数据”选项卡可以插入Spry数据对象和其他动态元素，例如记录集、重复区域以及插入记录表单和更新记录表单，如图1-15所示。

图1-15 “数据”选项卡

5. Spry选项卡

Spry选项卡包含一些用于构建Spry页面的按钮，包括Spry数据对象和构件，如图1-16所示。

图1-16 Spry选项卡

6. jQuery Mobile选项卡

jQuery Mobile选项卡包含jQuery Mobile的页面、文本输入、按钮等元素，如图1-17所示。

图1-17 jQuery Mobile选项卡

7. InContext Editing选项卡

InContext Editing选项卡包含可编辑区域和创建重复区域的内容，如图1-18所示。

图1-18 InContext Editing选项卡

第1章 Dreamweaver CS6简介

8. “文本”选项卡 “文本”选项卡包含了多种特定的字符，如商标、引号等特殊字符，这些字符也可以以HTML 的方式插入网页之中，如图1-19所示。

图1-19 “文本”选项卡

9. “收藏夹”选项卡

“收藏夹”选项卡用于将“插入栏”中最常用的按钮分组或将其组织到某一公共位置，如图1-20所示。

图1-20 “收藏夹”选项卡

1.4.3 文档工具栏

“文档工具栏”中包含一些按钮，使用这些按钮可以在“代码”视图、“设计”视图以及“拆分”视图间快速切换。文档工具栏还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-21所示。

图1-21 文档工具栏

● “显示代码视图”按钮：只在“文档窗口”中显示“代码”视图。 ●

“显示代码视图和设计视图”按钮：将“文档”窗口拆分为“代码”视图和“设计”视图。当选择了这种组合视图时，“文档”左侧显示“代码”视图，右侧显示“设计”视图。 ● “显示设计视图”按钮：只在“文档窗口”中显示“设计”视图。

注意：如果处理的是 XML 、JavaScript 、Java 、CSS 或其他基于代码的文件类型，则不

能在“设计”视图中查看文件，而且“设计”和“拆分”按钮将会变暗。

● “多屏幕”按钮：可以根据用户的需要选择屏幕的尺寸、大小和方向等。 ●

“在浏览器中预览/

调试”按钮：允许用户在浏览器中预览或调试文档，并可从弹出菜单中选择一个浏览器。 ● “文件管理”按钮：显示“文件管理”弹出菜单。 ●

“W3C 验证”按扭：包括验证当前文档、验证实时文档和设置W3C 的功能，用于验证当前文档或选定的标签。 ●

“检查浏览器兼容性”按钮：用于检查用户的 CSS 是否对于各种浏览器均兼容，包括检查浏览器的兼容性、显示浏览器出现的问题、报告浏览器呈现的问题等。 ● “可视化助理”按钮：用户可以使用各种可视化助理来设计页面。

●“刷新设计视图”按钮：在“代码”视图中对文档进行更改后，单击此按钮刷

新文档的“设计”视图，因为只有在执行某些操作(如保存文件或单击该按钮)之

后，在“代码”视图中所作的更改才会自动显示在“设计”视图中。

注意：刷新过程也依赖于DOM(文档对象模型)的代码功能，如选择代码块的开始标签或结束标签的能力。

●“标题”文本框：允许为文档输入一个标题，该标题将显示在浏览器的标题栏

中。如果文档已经有标题了，则该标题将显示在该区域中。

1.4.4 文档窗口

“文档窗口”用于显示当前文档，可以选择下列任一视图。

●设计视图：一个用于可视化页面布局、可视化编辑和快速进行应用程序开发的设

计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，

类似于在浏览器中查看页面时看到的内容。用户可以配置“设计”视图以在处理

文档时显示动态内容。

●代码视图：一个用于编写和编辑HTML、JavaScript、服务器语言代码(如PHP

或ColdFusion标记语言(CFML))以及任何其他类型代码的手工编码环境。

●拆分视图：使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设

计”视图。

当“文档窗口”有标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果用户对文档作了更改但尚未保存，则Dreamweaver会在文件名后显示一个星号。

当“文档窗口”在集成工作区布局(仅适用于Windows系统)中处于最大化状态时，它没有标题栏，页面标题以及文件的路径和文件名则显示在主工作区窗口的标题栏中。并且“文档窗口”顶部会出现选项卡，上面显示了所有打开文档的文件名。若要切换到某个文档，则可单击它的选项卡。

1.4.5 状态栏

“文档窗口”底部的“状态栏”提供与正在创建的文档有关的其他信息，如图1-22所示。

图1-22 状态栏

●

“标签选择器”图标：显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。单击“标签选择器”图标可以选择文档的整个正文。若要在标签选择器中设置某个标签的class 或id 属性，则可右击(适用于Windows系统)或按住Ctrl键并单击(适用于Macintosh系统)该标签，然后从弹出的快捷菜单中选择一个“类”或ID。

第1章Dreamweaver CS6简介

●“选取工具”图标：用于启用或禁用手形工具。

●“手形工具”图标：用于在“文档”窗口中单击并拖动文档。

●“缩放工具和设置缩放比率”下拉列表框：可以为文档设置缩放比率。

●

“窗口大小”图标：用于将“文档窗口”的大小调整到预定义或自定义的尺寸。

●

“文档大小和下载时间”图标：显示页面(包括所有相关文件，如图像和其他媒体文件)的预计文档大小和预计下载时间。

1.4.6 功能面板

Dreamweaver CS6的功能面板位于文档窗口边缘。常见的功能面板包括“属性”面板、“CSS样式”面板、“应用程序”面板、“文件”面板等。

1. “属性”面板

“属性”面板并不是将所有的对象和属性都加载到面板上，而是根据用户选择的不同对象来动态地显示对象的属性。制作网页时，可以根据需要随时打开或关闭“属性”面板，或者通过拖动属性面板的标题栏将其移到合适的位置。

选定页面元素后系统会显示相应的“属性”面板(见图1-23)。例如，图像“属性”面板、表格“属性”面板、框架“属性”面板、Flash影片“属性”面板、表单元素“属性”面板等。

图1-23 “属性”面板

2. “CSS样式”面板

使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性(“当前”模式)，或影响整个文档的规则和属性(“全部”模式)。单击“CSS样式”面板顶部的相应按钮可以在两种模式之间切换，在“全部”和“当前”模式下还可以修改CSS属性，如图1-24所示。

在“当前”模式下，“CSS样式”面板包括三个窗格：“所选内容的摘要”窗格，显示文档中当前所选内容的CSS属性；“规则”窗格，显示所选属性的位置(或所选标签的层叠规则)；“属性”窗格，允许用户编辑、定义所选内容的规则的CSS属性。

在“全部”模式下，“CSS样式”面板包括两个窗格：“所有规则”窗格(顶部)和“属性”窗格(底部)。“所有规则”窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。使用“属性”窗格可以编辑“所有规则”窗格中任一所选规则的CSS属性。

对“属性”窗格所作的任何更改都将立即应用，用户在操作的同时便可预览效果。

图1-24 “CSS样式”面板

3. “应用程序”面板

“应用程序”面板包含了数据绑定、数据库和服务器行为，是制作网页数据库时的重要面板，如图1-25所示。

4. “文件”面板

使用“文件”面板可查看和管理Dreamweaver站点中的文件，如图1-26所示。

图1-25 “应用程序”面板

图1-26 “文件”面板

在“文件”面板中查看站点、文件或文件夹时，可以查看区域的大小，还可以展开或折叠“文件”面板。当“文件”面板折叠时，它以文件列表的形式显示本地站点、远程站点或测试服务器的内容。在展开时，它显示本地站点和远程站点或者显示本地站点和测试服务器。“文件”面板还可以显示本地站点的视觉站点地图。

对于Dreamweaver站点来说，用户还可以通过更改折叠面板中默认显示的视图(本地站点或远程站点视图)来对“文件”面板进行自定义。

第1章 Dreamweaver CS6简介

1.5 Dreamweaver CS6的参数设置

本节介绍Dreamweaver CS6的参数设置。在Dreamweaver CS6中通过设置相关参数，可以改变操作环境，从而使其更加符合设计者的设计需要。常见的设置有“预览设置”、“设置外部编辑器”、“编辑快捷键”、“设置页面属性”等，其他的参数设置和这些方法相同，用户可以根据需要自行设置。

1.5.1 预览设置

在设计过程中，用户需要随时在浏览器中打开设计的文档，以便查看其设计效果和及时进行更改和完善。Dreamweaver CS6提供了在设计过程中预览的功能，用户只需使用菜单命令或快捷键就可以在浏览器中打开设计中的文档。

依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“在浏览器中预览”选项，右侧即出现相关界面，如图1-27所示。

图1-27 “首选参数”对话框

对话框中各选项的含义如下。

●

：单击该按钮，可向列表中添加新的浏览器。

●

：单击该按钮，可删除列表中选择的浏览器。

●

：单击该按钮，弹出“编辑浏览器”对话框，从中可修改选定的浏览器

参数，如图1-28所示。

图1-28 “编辑浏览器”对话框

●默认：选中“主浏览器”或“次浏览器”复选框，可设定选择的浏览器是否为主

浏览器。

●选项：选中“使用临时文件预览”复选框，可使用临时文件预览。

将Internet Explorer(简称IE)设置为默认浏览器的快捷键为F12。在设计过程中，如果想预览页面效果，可选择“文件”|“在浏览器中预览”命令或按快捷键F12。

1.5.2 设置外部编辑器

Dreamweaver CS6具有良好的外部程序接口，可以与各种页面元素相关的外部编辑器相连接，在设计过程中可以及时调用这些外部程序并编辑页面元素，完成后还可以将编辑好的元素直接应用在设计中，十分便捷。

设置外部编辑器示例：将Photoshop CS6设置为Dreamweaver CS6中.jpg、.jpe、.jpeg 等文件的外部编辑器。设置外部编辑器的具体操作步骤如下。

(1) 依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“文件类型/编辑器”选项，如图1-29所示。

图1-29 选择“文件类型/编辑器”选项

(2) 在“扩展名”列表框中选择.jpg .jpe .jpeg选项，然后单击“编辑器”列表框上方的按钮，打开“选择外部编辑器”对话框，如图1-30所示。

图1-30 “选择外部编辑器”对话框

第1章Dreamweaver CS6简介

(3) 选择Photoshop程序文件，然后单击“打开”按钮退出对话框，此时在“编辑器”列表框中出现所加载的Photoshop程序。

(4) 选择Photoshop程序名称，单击“编辑器”列表框上方的“设为主要”按钮，将Photoshop设置为默认的主要编辑器。完成后，在Photoshop名称后面出现“主要”字样。

(5) 如果要删除“编辑器”列表框中没用的编辑器，则选择编辑器名称后，单击“编辑器”列表上方的按钮即可。

1.5.3 编辑快捷键

Dreamweaver CS6为菜单命令、文档编辑、代码编辑、站点管理等操作设置了易用的快捷键。如果用户需要，则可以更改或添加自己的快捷键。

编辑快捷键示例：为“查看”|“代码”菜单命令添加快捷键，即按Backspace键，将Dreamweaver切换到“代码”视图。

编辑快捷键的具体操作步骤如下。

(1) 依次选择“编辑”|“快捷键”菜单命令，打开“快捷键”对话框，如图1-31所示。

图1-31 “快捷键”对话框

(2) 在“当前设置”下拉列表框中选择默认的Dreamweaver Standard选项，然后在“命令”下拉列表框中选择“菜单命令”选项。

(3) 在列表框中展开“查看”选项，选择其中的“代码”选项。

(4) 单击“快捷键”选项右侧的按钮，然后按Backspace键。此时在“按键”文本框中出现自动加载的快捷键符号BkSp。

(5) 单击“确定”按钮退出对话框，快捷键设置完毕。

同理，可以为切换设计视图添加快捷键，以便在两种视图间进行切换。

1.5.4 设置页面属性

对于页面的基本属性，例如标题、背景颜色和图像、文本及链接的颜色、边距等，在“页面属性”对话框中均可以设置。

依次选择“修改”|“页面属性”菜单命令，打开“页面属性”对话框，如图1-32所示。

图1-32 “页面属性”对话框

在此对话框中主要可以进行以下设置。

1. 更改页面标题

在“标题/编码”选项界面中可以更改标题、文档类型、编码等。

2. 设置背景图像或颜色

如果要设置背景图像，则可单击“背景图像”文本框右侧的“浏览”按钮，查找并选择背景图像文件，或在其文本框中输入图像文件的路径及名称；如果要设置背景颜色，则可单击“背景颜色”色盘按钮，在弹出的色盘中选择背景颜色，或者在其右侧的文本框中输入颜色的十六进制代码。

提示：可以同时设置“背景颜色”和“背景图像”，当页面下载时，首先显示背景色，然后被背景图像所覆盖，背景颜色可以透过背景图像的透明像素部分显示出来。

3. 设置文本或链接颜色

在“外观”和“链接”选项界面中可分别通过使用CSS样式表定义颜色。

1.6 Dreamweaver CS6的文件操作

在Dreamweaver CS6中，用户不仅可以创建基本的HTML页面和动态的ASP、JSP页面，还可以创建模板页、CSS样式表、XSLT、库项目、JavaScript、XML以及多种专业水准的页面设计。

1.6.1 新建文档

在Dreamweaver CS6中新建文档的具体操作步骤如下。

(1) 依次选择“文件”|“新建”菜单命令，打开“新建文档”对话框，如图1-33所示。

(2) 在“空白页”选项卡内的“页面类型”列表框中选择所要创建的文档类型，然后

第1章Dreamweaver CS6简介在“布局”列表框中选择想要创建的样式，然后单击“创建”按钮即可。

图1-33 “新建文档”对话框

1.6.2 保存文档

在Dreamweaver CS6中保存文档的方法大致和其他应用程序相同，如果要将设计好的文档保存为模板，则依次选择“文件”|“另存为模板”菜单命令，打开如图1-34所示的“另存模板”对话框，进行相应的设置后，单击“保存”按钮即可将模板保存在所选择的站点内。

图1-34 “另存模板”对话框

注意：模板文件应保存在站点内，因此应首先创建一个站点。

1.6.3 打开现有文档

Dreamweaver CS6可以打开HTML文件或任何支持的动态文档类型。依次选择“文件”|“打开”菜单命令，在“打开”对话框中选择想要打开的文件，然后单击“打开”按钮即可。

有些保存为HTML格式的文件类型，诸如Microsoft Word文档，则需将其导入Dreamweaver CS6中，而不是打开该文档。导入后需使用Dreamweaver的相关命令清除无用的标签。

1.7 课后习题

一、选择题

1. 下列( )是Dreamweaver CS6的新增功能。

A. 可响应的自适应网格版面

B. Adobe Business Catalyst 集成

C. 更新的PhoneGap 支持

D. 以上都是

2. 以下( )不属于功能菜单。

A. 文件

B. 插入

C. 站点

D. 视图

3. 插入表格属于插入栏中的( )选项卡。

A. 常用

B. 布局

C. 表单

D. 文本

4. 在设计过程中，按( )键可以预览设计效果。

A. F2

B. F10

C. F12

D. F11

5. 下列( )不属于“资源”面板。

A. 图像

B. 颜色

C. 模板 D . 行为

二、填空题

1. 当鼠标指针移动到一个按钮上时，会出现一个工具提示，其中含有________。

2. 在“文档窗口”中可以在________、________和________三种视图之间进行切换。

3. 当“文档窗口”在集成工作区布局中处于________状态时，它没有标题栏。

4. 当“文档窗口”有标题栏时，标题栏显示页面标题，并在括号中显示文件的________。

5. 常见的功能面板有________、________、________和________等。

三、上机题

1. 根据书中所讲步骤安装Dreamweaver CS6。

2. 认识Dreamweaver CS6的工作窗口。

3. 熟悉Dreamweaver CS6的参数设置。

4. 熟悉Dreamweaver CS6中的文件操作。

《网页制作教学设计》教案

《网页制作》教学设计 法、说学法、说教学过程、说板书设计。 一、说教材： (一)教材分析：本节内容是省编《信息技术》全一册第六章 网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容，2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块，但针对现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：学生自学，自练Word制作网页的基本方法；第二课：让学生自己构思创意一个内容丰富，页面美观的网页。 (二)教学目标：根据对教材的分析及学生实际情况，制定如 下的教学目标： (1)知识目标：1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标：1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容 丰富的网页。 (3)情感目标：1、教育学生正确认识和理解信息技术相关文 化，伦理和社会问题，负责地使用信息技术。 (三)教学的重、难点：根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知 道网页间互相链接的方法，所以我把超级链接做为本节的

网页设计与制作实例教程

网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题 略 第2章网页规划设计 一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略） 第3章初识网页制作软件 一、选择题 1．C 2．C 3．B

二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题 略 第5章设置网页超级链接 一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页 一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页 一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题

网页制作教学设计(公开课)

一体化课程教案（首页） 课程网页制作授课教师 课题（项目） 名称 创意型网站开发审批 学习任务创意型网站开发授课课时16 授课日期年月日至年月日授课班级13电商高中 项目（任务）描述小李刚刚通过应聘进入了一家网页制作公司，公司规模不大，主要业务是承接各类网站的制作。现在公司刚接了四个不同的制作网站业务，由于公司人数不多，所以小李要独立负责其中一个网站的建设，由于时间紧迫，现要求小李选择其中一个网站，并和策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。 教学目标通过完成本次任务，学生能够 ●通过多方调研明确客户需求，撰写需求确认分析说明书； ●通过组内讨论，做好网站开发详细计划，撰写项目工作计划表； ●通过小组分工合作，自主探究学习，设计有特色的网站； ●通过测试，发现存在问题并提出解决方案； ●能够展示小组作品的优势和特色，并能客观评价他人； ●通过基于工作情境的角色扮演，熟悉网站开发的工作流程，并从中获得沟通表达， 解决问题的经验，体验团队合作和信息共享的乐趣。 教学重点 分析客户需求；设计网站规划书；创建网站站点；设计网页版面布局；素材编辑和修辞； 内容页制作和超链接。 教学难点使用Dreamweaver进行网页布局；内容页制作；页面间的超链接。 学情分析根据客户需求，开发一个商务网站，进行宣传推广商品。该网站以信息发布、产品介绍、在线销售、顾客服务、提升品牌形象为主要功能和目的。学生在学习任务中首先要进行客户需求分析，制定网站设计书，并进行创建站点和管理站点，然后在已创建的站点上进行主页、内页设计完善网站功能，并使用多种工具进行网页美工，最后发布和管理已建好的网站，根据公司的要求，更新和维护网站。 教学策略本次教学任务在电商实验班进行授课，采用任务驱动，模块演示的教学方法；以学生为

网页设计与制作教程

网页设计与制作教程 第一章基础篇 1.INTERNET和WWW INTERNET的功能和应用 1．信息的获取与发布 2．电子邮件 3．网上交际 4．电子商务 5．网络电话 6．网上事务处理 7．远程登陆 8．文件传输 9．电子公告版 10．全球信息网 11．INTERNET的其他应用 WWW简介 1．网页，网页文件和网站 2．HTTP和FTP协议 3．超文本和超链接 4．INTERNET地址 5．域名 6．统一资源定位器（URL） 7．HTML 常见网络浏览器----IE 第二章网站建设概论 （1）信息类网站 （2）交易类网站 （3）有偿信息类网站：101网校、 （4）功能型网站 （5）综合类网站 2.根据网站的性质分类： （1）政府网站 （2）企业网站 （3）商业网站 （4）教育科研机构网站 （5）个人网站 （6）非赢利机构网站 （7）其他类型的网站 3.根据在大型搜索引擎上的设置分类 4.娱乐和休闲类网站；商业与经济类，艺术，人文，健康，医药，政府，政治类，电脑与 网络类，社会和文化，科学与教育类，参考资料类 2.1.2网站建设的步骤 1．制作环境的准备：1）设备：扫描仪，数码相机，打印机2）完善系统环境3）备齐网页开发工具软件，网页制作工具，服务器端程序开发工具及一些实用的辅助工具。。。4。

备齐素材制作和加工软件，包括对图形，动画，刘媒体和声音进行处理的素材制作和加工软件 5）备齐常用的网站发布工具，如FTP文件传输软件 2.网站目标的确定：对象：访问者的类型；主题明确，数据充分。保持目标的简洁 3.网站主题，风格和创痍点的确定 1）主题选材要小而精 2）擅长或感兴趣的内容 ）选题不要太滥：因特网上只有第一，人们记不住第二第三名 2）网站的风格：CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等诸多因素 1）确信风格是建立在有价值的内容上的 2）需要彻底弄清楚站点给人的印象是什么 3）在明确网站印象后，开始努力建立和加强这种印象：1）标志（LOGO）2）色彩3）标准字体4）醒目标准口语5）统一图片处理效果7）使用网站特有的图标；使用自己设计的花边，线条和点；；9）展示网站的荣誉和成功作品10）告诉网友关于个人真实的故事和想法3）网站的创意（准备期，孵化期，启事期，验证期，形成期） 4.网站结构的确立：1）网站结构的确立2）网站目录的设置3）网站链接结构的设置：树状连接结构；星状链接结构3）两种结构的综合 5.网站素材的准备 6.网站制作工具的选择和确定：DREAMWEA VER和FRONTPAGE，PHOTOSHOP，FIREWORKS，动画制作工具：FLASH，COOL 3D；网页特效工具，网页特效精灵，有声有色 7.网站的建设 1）申请E---MAIL帐号 2）申请网页空间：1。打开虎翼网空间申请主页 3）域名注册：对于个人网站，在申请免费网页空间的同时也完成了域名的注册 4）网页制作：先简单后复杂，布局先大后小，制作网页时要多灵活运用软件配备的设计模板，这样可以大大提高制作效率 8。网站的测试（看看有没有问题）和上传（将网站发布到WEB服务器，网页制作工具本身具有FTP功能） 9。网站的宣传和推广（搜索引擎上注册，与别的网站交换链接，运用网络广告） 10.网站的更新和维护：必须不断给它补充新的内容，才能够长期吸引住浏览者 2.1.3 网站设计的原则 1）网站主题不要多于三个：小而精，定位小 2）网站的标准色彩不要超过三种 3）重视网站目录结构的创建（创建目录的原则百度上找出来）：不要将所有文件都存在根目录下，目录层次不超过三层，不要使用过长的目录名，尽量不要使用中文目录名 4）链接层次不要超出三层（便于维护） 5）网页长度应限定在三个整屏以内 6）表格的嵌套层次要控制在三层左右（表格插入表格里） 7）网站导航要清晰 2.优秀网站的五大要素 1）网站内容丰富 2）页面下载速度快（网页简单，不要大量图片）

《HTML5+CSS3网站设计基础教程》_教学大纲

《HTML5+CSS3网站设计基础教程》课程教学大纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限 于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例 （项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为 目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。 开发工具：DreamweaverCS6 第一章初识HTML5

第二章HTML5页面元素及属性

第四章CSS3选择器

e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用

网页设计基础知识点

web 一、超文本（hypertext） 一种全局性的信息结构，它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。它是超级文本的简称。 二、超媒体（hypermedia） 超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合。它是超级媒体的简称。用户不仅能从一个文本跳到另一个文本，而且可以激活一段声音，显示一个图形，甚至可以播放一段动画。 Internet采用超文本和超媒体的信息组织方式，将信息的链接扩展到整个Internet上。Web就是一种超文本信息系统，Web的一个主要的概念就是超文本连接，它使得文本不再象一本书一样是固定的线性的。而是可以从一个位置跳到另外的位置。可以从中获取更多的信息。可以转到别的主题上。想要了解某一个主题的内容只要在这个主题上点一下，就可以跳转到包含这一主题的文档上。正是这种多连接性把它称为Web。 三、超文本传输协议（HTTP）Hypertext Transfer Protocol超文本在互联网上的传输协议。 IP IP是英文Internet Protocol（网络之间互连的协议）的缩写，中文简称为“网协”，也就是为计算机网络相互连接进行通信而设计的协议。在因特网中，它是能使连接到网上的所有计算机网络实现相互通信的一套规则，规定了计算机在因特网上进行通信时应当遵守的规则。任何厂家生产的计算机系统，只要遵守IP协议就可以与因特网互连互通。IP地址具有唯一性，根据用户性质的不同，可以分为5类。另外，IP还有进入防护，知识产权，指针寄存器等含义。 http 超文本传送协议(HTTP) 是一种通信协议，它允许将超文本标记语言(HTML) 文档从Web 服务器传送到Web 浏览器。HTML 是一种用于创建文档的标记语言，这些文档包含到相关信息的链接。您可以单击一个链接来访问其它文档、图像或多媒体对象，并获得关于链接项的附加信息。HTTP工作在TCP/IP协议体系中的TCP协议上。 FTP FTP（File Transfer Protocol, FTP）是TCP/IP网络上两台计算机传送文件的协议，FTP是在TCP/IP网络和INTERNET上最早使用的协议之一，它属于网络协议组的应用层。FTP客户机可以给服务器发出命令来下载文件，上载文件，创建或改变服务器上的目录。 第一、什么是C/S结构。 C/S （Client/Server）结构，即大家熟知的客户机和服务器结构。它是软件系统体系结构，通过它可以充分利用两端硬件环境的优势，将任务合理分配到Client端和Server端来实现，降低了系统的通讯开销。目前大多数应用软件系统都是Client/Server形式的两层结构，

《网页制作》教学设计(优质课比赛优秀设计)

信息技术课虽然已经成为初中的必修科目，但是城乡学生之间掌握情况的差异却相当大，条件好一点的初中学生不仅已经熟练掌握了课本上的内容，还对一些常用软件有所了解；而差一点的可以说是从高中开始才正式接触到信息技术知识的学习，他们需要多锻炼、多指导，所以协作学习对学生的学习帮助很大。 三、教学策略的选择及媒体的使用 在教学策略的选择上，我使用的是任务驱动和协作学习相结合的方法。 任务驱动就是要求本章内容学习完之后，每个小组都要完成自己班级网站的制作，并在全班进行评比，选择最好的作为班级主页挂到学校主页上去，这有助于激发学生参与学习的积极性。 协作学习则是让学生在学习过程中互帮互助，用较短的时间、教少的精力学到更多的东西，完成一个集体项目，让他们在学习之后获得成就感。因此在媒体的选择上，我们使用的是TOP2000系统。TOP2000系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前，教师把学生按座位分成四组，每个组都按学生对计算机的掌握程度平均分配，保证每个组都有计算机操作方面比较突出的，也有相对比较差的，使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名，然后由组长根据组员的情况，确定在班级主页制作过程中主要完成什么任务，也就是说起到一个组织者的作用。做过网页的人都知道，做网页是一项比较费时的工作，而要学生在较短的时间内制作出像样的网页是比较困难的，而在这个过程中，网页的设计占去了相当多的一部分时间，组长把任务分到各组员头上以后，组员就可根据自己要完成的任务相对集中的做某方面的工作，做完以后，组员之间进行经验交流，告诉组员自己的网页是如何制作出来的，在完成自己的网页后，再重复一遍制作过程花费的时间的不多的。这样，其他组员就可在较短的时间之内

网页制作基础教程

网页制作基础教程 一、什么是HTML HTML（超文本标记语言）是网页中使用的语言，他能被网页浏览器（IE或Netscape）解释，从而显示出丰富多彩的信息（图片、文字、声音、影象、动画等）。 制作网页前首先要弄懂什么是HTML。 在IE中点击"查看"→"源文档"，就能看到该网页的HTML代码。下面是个网页文档（model.htm）的HTML代码：

第一段文字。

第二段文字。

【操作】请在记事本中输入以上代码，命名为test1.htm，存于D盘，然后双击打开看看。 标记一般是成对出现的，#FFFFFF表示使用的颜色是白色。 ...

... 之间是该网页的标题 charset=gb2312表示语言字符集信息是中文简体，如big5则是中文繁体。 ...之间是网页的正文内容 表示网页的背景色是白色，默认的文字颜色是白色。

...

之间是h1号标题字

...

之间是h2号标题字 ...之间的文字为红色 HTML是一套国际标准，其标记有几百种，您并无需全部了解他们，只要记住其中常用的十几种，就能够做出很漂亮的网页来。 常用的标记举例：

网页制作教案

课堂任务快速建站技术—模板的应用 课程名称：利用模板快速建站 课时数：4 教学目标： 知识与技能：了解模板的定义，模板的可编辑区域的定义。 过程与方法：掌握在网页中创建模板的三种方法； 掌握模板的可编辑区域的定义、建立和取消； 掌握模板的应用和取消； 掌握如何将模板从网页中分离出来； 掌握使用模板快速建站； 情感与价值观：培养学生主动思考问题的习惯和自主学习的能力。 教学重点： 在DreamWeaver8中创建模板和应用模板。 教学难点： 学会模板的可编辑区域的定义、建立和取消。 教法： 任务驱动法 学法： 记录关键步骤，积极动手练习。 课前准备： 第三章第三节素材和实例，视频教程：快速建站技术－模板的应用.WMV，快速建站技术－模板的应用(快速更新).WMV。 教学过程设计： （一）导入设计： 我们制作一个网站时，会发现许多网页的版面和元素都是相同的，在设计一个新页面时，我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同，这时修改或更新网页的共同元素如网站标志时，会发现工作量实在太大！而使用Dreamweaver 软件中的模板功能来创建新网页，可以大大提高更新和修改的工作效率，网站的维护工作会轻松很多。本节主要内容如下。（二）新课讲解设计： （1）请学生带着以下问题阅读P110～115知识预读，问题如下： A、模板的定义？ B、模板创建的三种方式？了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消； D、学会模板的应用和取消； E、学会如何将模板从网页中分离出来； （2）教师提问，请学生一一回答以上问题。期间对回答问题的同学要多多表扬，如“你真棒”。增强学生对教师的亲和力。 （3）教师在学生回答问题的同时，总结评价并补充相关要点。 （4）教师展示完成后的模板网站作品，与学生共同讨论分析该网站制作过程。 （5）教师演示建立模板,创建可编辑区域,应用模板等部分操作（详见教材任务一）。

网页制作的教学设计

网页制作的教学设计 一、教学目标 1 、知道站点、主页的概念，能在指定位置建立只有一个网页的站点； 2 、认识FRONTPAGE 的界面； 3 、掌握在主页中插入文字、图片、水平线； 4 、掌握页面文件与图片的保存。 二、教学重点 1 、能在指定位置建立只有一个网页的站点（难点） 2 、能在页面中插入文字、图片、水平线 3 、掌握页面文件与图片的保存（难点） 三、学情分析 学生已经学习了WORD 、POWERPOINT 与上网浏览信息，对计算机的基本操作（WORD 中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。 四、教学方法 在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。 五、教学过程设计 教师活动：1 、引入课题：（激发兴趣，活跃气氛） 同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站） 浏览新浪网站，浏览的第一个页面称为什么？（主页） 我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。 问题1 ：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，

通过超链接把不同的页面链接起来） 问题 2 ：网页是不是就是主页？( 第一个页面称为主页, 网站设计者可以确定哪一个是主页, 主页的文件名一般为：index.htm, 主页也是网页) 设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet 上，让所有的人访问浏览。 今天我们学习用Frontpage 建立站点，制作一个主页。 先来研究一下没有发布的网站, 打开教师做的网站 问：同学们看到了什么？（文件夹） 总结： 可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。 打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。 请学生浏览教师课件，了解学习任务 2 、新建站点 FP 的启动 问：与word 比较，有什么不同？ （增加了视图区，编辑区有三个窗口） 总结： 视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面 普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式 预览窗口：浏览器中出现的效果，与PowerPoint 中的“放映幻灯片”类似。 Html 窗口：编写HTML （超文本标记语言，它是描述网页内容和外观的标准。） 打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。

网页设计布局基础教程(献给初学者)

正如你现在所看到的一样，网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过“挑剔”的访问者。 一.网页布局的基本概念 最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。 1.页面尺寸： 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。 在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。 2.整体造型： 什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。 对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

《网页设计与制作》课程教案设计

《网页设计与制作》课程教案 一、课程定位 本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。 本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。 二、课程总目标 掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。 （一）知识目标： 1.熟悉网页制作的基本元素； 2.掌握Dreamweaver CS6软件的基本操作方法； 3.掌握在网页中插入文字、图片、声音、flash等的方法； 4.掌握常见的网页布局方法，学会使用CSS美化网页； 5.掌握在网页中使用表单和制作网页特效的方法； 6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画 并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静 态页面部分。 （二）职业能力培养目标 1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、 图片、动画、声音、视频等素材并作美化处理； 2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览 者接受和喜爱；

3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态 页面。 （三）素质目标 1.具有勤奋学习的态度，严谨求实、创新的学习精神； 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够 不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。（四）职业技能证书考核要求： 可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。 三、重点、难点章节及内容 1.重点章节： 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接

简单网页制作教学设计

《简单网页制作》教学设计 一、设计意图： 目前网络对学生的吸引力很大，学生上网都会浏览网页内容，对网页的制作也有很大的兴趣，想知道一个网页是怎样制作成功的。但是网页的制作相对复杂，对于一些的代码的编辑学生也较难理解，因此本课选择了FrontPage网页制作工具，引导学生简单的了解网页制作的过程，采用了所见即所得的形式避开代码的繁琐，调动学生自行设计的积极性，对网页制作有一个简单的入门了解。 二、教学目标 1、知识目标 （1）理解网页制作的简单步骤。 （2）学会用FrontPage的制作简单网页。 2、技能目标 （1）掌握的FrontPage的背景添加的操作。 （2）掌握FrontPage的文字编辑、艺术字、图片的插入的操作。 （3）知道HTML的简单编码。 3、情感目标 （1）培养学生的口头表达能力、操作和分析概括能力。 （2）培养学生展示自我、表现自我的能力。 （3）培养学生独立思考问题、解决问题的能力和团结协作精神。 （4）在网页制作的过程中，提高学生对FrontPage的认识。三、重难点、问题预测及对策

1、重难点 （1）重点：FrontPage的基本操作。 （2）难点：HTML的理解。 2、问题预测 本节课是网页制作的第一节内容，需要学生掌握的技能并不困难。由于在学习网页制作的过程中，需要培养学生的制作网页的积极性，才能引发学生对网页制作的兴趣，实现自主学习，自主开发。 3、对策 以制作班级自己的主页引起学生注意，引发学生的兴趣。让学生运用FrontPage的插入、背景修改等工具，通过作品展示激发学生的动力。 在教学过程的设计上，通过自主设计自己的个人主页来达到解决一个个知识点的目的，同时通过学生自己创作，引导学生正确的审美情趣和创作激情。 四、课前准备 精美网站、优秀班级主页、素材图片等。 五、教学流程 1、情感导入：通过优秀班级主页欣赏，引发学生兴趣，跃跃欲试。 2、自主学习：引导学生做自己班级的主页。 3、示范教学：学生归纳总结，老师帮助、提醒，使学生掌握正确的操作步骤。

《设置自己的网页》—教学设计新部编版方案

教师学科教案[ 20 – 20 学年度第__学期] 任教学科：_____________ 任教年级：_____________ 任教老师：_____________ xx市实验学校

《设置自己的网页》教学设计方案 陕西榆林市第一中学分校葛靖静 一、教学目标分析 学习目标 知识与技能 1．能够根据网站设计要求，灵活使用Frontpage2003； 2．掌握建立新站点、新网页的方法； 3．初步掌握用Frontpage2003制作网页的方法与步骤。 过程与方法 在建立班级网站和制作一个简单主页的过程中，感受建立网站与用表格制作网页的方法与过程。采用合作探究和成果的展示与交流。 情感、态度与价值观 1．在活动中培养学生勤于动手、积极参与实践活动、主动探索新知识的热情； 2．通过建立班级网站，培养学生热爱生活、用网络传播人文科学知识、进行健康交往的能力与意识。 二、教学内容及重点、难点分析 知识点内容 掌握Frontpage2003的启动和几种不同视图的运用方法；在指定的盘符上，建立一个新站点，根据设计班级网站意图，用表格划分栏目制作网页和其他网页；保存网页、关闭站点。 重点 建立新站点、用表格制作网页。 难点 用表格划分网页栏目和制作网页。 三、本课的作用和地位 本课是网页制作的第一步，要完成新站点的建立，并设计一个简单的主页。从学生的角度看，要把前一节所设计的内容变成网页不是一件容易的事，本节课

引入了用表格划分网页栏目的方法，需要掌握插入表格、编辑表格及在表格中输入文字等方法，这些都是制作网页的基本技能，所以这一节课很重要，需要学生熟练掌据制作技能。 四、教学策略分析 为了启发学生做好主页，教师从呈现多种不同风格的主页，供学生欣赏入手，创设情境，激发学生制作网页的求知欲。然后通过任务驱动的教学法，让学生完成建立新站点，制作主页的任务。在学生分组合作完成任务的过程中，老师循回查看，注意指导学生是否在指定磁盘上建立站点，是否按自己设计的主页样式制作了主页，并及时保存了网页。 在新建站点窗口时，让学生自主探究“网站模板”的应用。使学生对建立站点和主页有明确的认识。通俗地说，建立站点就是在计算机上给网站安个家，让网站上所有文件与文件夹集中放在一起，网站的图标和文件夹的图标是不一样的。 在制作网页时，根据实际情况运用了表格划分网页栏目、制作网页；运用了WORD文字编辑方法处理网页编辑技能。有助于提高学生以旧知学新知的自主学习能力，从而促进学生参与主题网站的制作活动。 图（1）综合（学习）课六过程方法图

网页设计学习教程

网页设计基础概述 过本章的学习，读者可以了解网站和网页的有关概念、网页设 计流程和网页制作软件的基本知识等，并可以认识网页设计的 步骤与原则，为设计制作网页打下良好的基础。 重点提示： ↓ 网站制作的常用软件 ↓ 网站设计的流程 ↓ 网页的基本组成元素 ↓ 申请免费空间与发布网站 通 Chapter 1

Chapter 1 网页设计基础概述 互联网的诞生和快速发展，给网页设计师提供了广阔的设计空间。相对传统的平面设计来说，网页设计具有更多的新特性和更多的表现手段，借助网络这一平台，将传统设计与电脑、互联网技术相结合，实现网页设计的创新应用与技术交流。网页设计是传统设计与信息、科技和互联网结合而产生的，是交互设计的延伸和发展，是在新媒介和新技术支持下的一个全新的设计创作领域。 如今的网页设计往往要结合动画、图像特效与后台的数据交互等，而Dreamweaver CS3、Photoshop CS3和Flash CS3作为Adobe公司经典的常用网页设计软件，是目前网页制作的首选工具。它们具有强大的网页设计、动画制作和图像处理功能，在静态页面设计、图片设计和网站动画设计等方面，都可以使网站设计人员的思想体现得淋漓尽致。 1.1 全面认识网页 在进行网页设计之前，需要对网页的一些基础知识进行了解，对网站的运行原理与制作过程有一个宏观把握。并从零开始，一步一步体验综合应用Dreamweaver CS3、Photoshop CS3、Flash CS3等软件进行网页设计，感受网站设计的无穷乐趣，从而踏上网页制作之路。 1.1.1 网站、网页和主页 网站（Website）是指在因特网上根据一定的规则使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布（或浏览）想要公开的资讯，或者利用网站来提供相关的网络服务。 现在的许多公司都拥有自己的网站，他们利用网站来进行宣传、产品资讯发布和招聘等。如图1-1所示即为中央电视台的门户网站。 网页（Web Page）是构成网站的基本元素，是承载各种网站应用的平台。 网页实际上是一个文件，存放在世界某个角落的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当用户在浏览器地址栏中输入网址之后，经过一段复杂而又快速的程序运作，网页文件就会被传送到用户的计算机中，再通过浏览器解释网页的内容，最终展示到用户的眼前。 网页有多种分类，笼统意义上的分类是动态页面和静态页面。 静态页面多通过网站设计软件来进行重新设计和更改，技术实现上相对比较滞后。当然，现在的某些网站管理系统也可以直接生成静态页面，这种静态页面通常可称为伪静态。静态页面内容是固定的，其后缀名通常为.htm、.html、.shtml等，如图1-2所示。 动态页面是通过执行ASP、PHP、JSP等程序生成客户端网页代码的网页，通常可通过网站后台管理系统对网站的内容进行更新和管理，如发布新闻、发布公司产品、交流互动、博客和网上调查等，都是动态网站功能的一些具体表现。 3

网页横幅广告的制作教学设计

网页横幅广告的制作 科任：谢志滨 一、教材与学情 1【教材分析】 本课是选自高等教育出版社——《photoshop cs4网页设计》第四章第5节。始终贯穿的一个理念就是“练中学，练中教”，本堂课也是基于此理念设计的。本节以制作网页的横幅广告为例安排主题任务活动，要求学生综合运用photoshop 的基本知识和技能，主动探索完成横幅广告的制作。本节共3课时，这堂课是第三课时，前面初步学习了文字工具、渐变色填充工具及抠图的操作方法,简单LOGO的制作；本堂课利用制作横幅广告的过程中，进一步深入学习插入立体字、横幅广告制作的要点的操作方法；提升学生对这些知识点的运用能力。 2【学情分析】 教学对象是13级计算机的学生，他们在本学期中已经学习过了网页制作的知识以及photoshop的一些相关知识点。他们对动手操作方面比较感兴趣，而且对 利用photoshop制作网页比较感兴趣，学习网页广告的制作是对他们综合运用能 力的考察。因此，我通过小组合作与自主探究的方法来考察他们对之前知识点的掌握情况，也培养他们团队合作的精神。 3【教材处理】 我对教材内容进行了一些处理，设计了几个网页中使用到横幅广告的展示，激发学生的学习热情，然后提出本堂课的学习任务，让学生们能够有效的利用PS 软件操作技能进行设计。教学任务由浅入深，在教学中做到教、学、练、情四合一，让学生练有所思，学有所悟。 二、教学大纲 1【教学目标】 知识与技能： 1、掌握立体字的制作方法，能够使用多个图层的方法制作出立体字。 2、理解魔术棒工具的作用，掌握抠图的方法。 3、能运用PS的相关知识独立设计美观大方的版面。

情感态度与价值观： 1．养成勇于探究、团结合作的习惯。 2、锻炼学生的动手操作能力和独立思考问题的习惯。 3、培养学生发现美、感受美的艺术能力。 2【教学重点与难点】 重点：（1）制作横幅广告的注意要点 （2）魔术棒工具的使用,渐变工具的使用。 （3）立体字的制作。 难点：（1）多个图层制作出立体字。 （2）运用PS的相关知识独立设计美观大方的横幅。 3【课时】:1课时 三．教法学法 1【教法】:通过观察、提问、讨论、上机探索、小组共学互教，掌握页面设置、报头制作、正文编辑的方法。 在课堂导入环节，我采用情景教学法，课堂核心环节上，以任务驱动法为主，实现新旧课程的结合应用，重在学以致用。并通过讲解示范、自主探究、计论交流等手段，突出重点，突破难点。 2【学法】:自主探究法、分析协作法、总结归纳法 四．教学过程 1【课前准备】 （1）学生分组 课前给学生分好组，每组5人、共5组，每组安排一名平时动手能力较强、做得较快的学生当小组长，在自主学习的过程当中，在自己完成的前提下辅助其他组员完成学习任务。 设计意图：期望以优带差，优劣互补，团结协作，互相激励，共同进步。 （2）材料分发 课前几分钟把本堂课的学习材料分发到每台学生机的桌面上。 设计意图：便于学生课上进行探究式学习。 2【课堂环节】 （1）创设情景，导入新课

(完整版)《HTML5+CSS3网站设计基础教程》_教学大纲

《HTML5+CSS3网站设计基础教程》课程教学大 纲 （课程英文名称） 课程编号：201601210011 学分：5学分 学时：76学时（其中：讲课学时：47学时上机学时：26学时） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、JavaScript网页特效 适用专业：信息技术及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。 二、课程设计理念与思路 课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。 课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。

三、教学条件要求 开发工具：Dreamweaver CS6 四、课程的主要内容及基本要求第一章初识HTML5 第二章HTML5页面元素及属性

网页设计基础试卷5

《网页设计基础》试卷5 一、单项选择题 (本大题共40小题，每小题2分，共80分) (1)DremweaverMX表单中的"跳转菜单"和"列表/菜单"，下列说法中错误的是__D___ A.实质都是列表框 B.类型都包括"菜单"和"列表"两种类型 C.当设置为"列表"类型时，都可以设置其为多选 D.二者在设置过程中，都可通过选择复选项，在其后加上"前往"等按钮 (2)DreaeaverMX设计表单时，插入第一个"列表/菜单"时，它的默认名称是_D__ A.menul B.menu C.select1 D.select (3)获取网站空间的主要万法有三种，下列哪一种不是_C____ A.申请免费主页空间 B.申请付费空间 C.申请虚拟主机 D.自己架设服务器 (4)申请付费空间的形式较多，下列哪一种不是__B_ 。 A.主机托管 B.自己架设服务器 C.虚拟主机 D.主机租用 (5)关于虚拟主机，下列说法中不正确的是 ___A__。 A.每一台虚拟主机不具有完整Intemmet服务器功能 B.虚拟主机费用低廉 C.虚拟主机管理方便 D.多台虚拟主机共享一台真实主机的资源 (6)下列是自己架设服务器应注意的问题，哪一项是错误的 __C__。 A.应该有足够的带宽 B.应该申请固定的IP地址 C.隔一段时间主机应关机进行维护 D.服务器上安装动态域名系统 (7)申请免费网页空间，填写资料时，下列说法中错误的是__B_ 。 A.两次密码必须一致 B.所有项目都必须填写，少一项都不能通过 C.只需填写必填项目 D.用户名等信息必须遵守相应的规范要求 (8)关于域名，下列说法中不正确的是___A___

网页制作基础教程

第一章网页制作基础 1、什么是网页 一般浏览器中打开的都是网页，这些文档是通过超文本标记语言HTML表示出来的； 主页：在网站中默认打开的页面称为主页，也叫首页，主页是进入网站的门户， 网页中包括的内容： 文本，图像，超级链接，表格，表单，多媒体及一些特殊的效果 2、网站及运作原理 网站是在互联网上一个固定的面向全世界发布消息的地方，它由网站地址和网站空间构成； 网站开发者常常将网站称作为站点，在网站的开发者来说，网站就是在计算机上创建的一个多级的文件夹，并在各文件夹中保存着相关网页文件。 根据站点文件夹所在的位置分为：本地站点和远程站点； 根据服务技术分：静态网站和动态网站 3、了解HTML语言 HTML是网上用于编写网页的主要语言，使用HTML语言编写的网页文件也是一个标准的纯文本文件，可以使用文本编辑器将它打开，但是该纯文本文件如果使用浏览器打开就会看到排版整齐的网页； 4、HTML语言标签 HTML标签用来标记网页元素，以形成文本布局，文字的格式及五彩缤纷的画面，HTML 的标签分单标签和成对标签两种 基础标签： 5、常用动态建站技术 ASP是由微软开发的动态网页技术标准，其原理通过在HTML页面中加入VB JA V A代码，服务器在返回网页之前首先执行这些代码，产生最终的结果。 6、网站的制作流程及制作工具 初期规划：建站之前，要有明确目的，要明白建立网站的目的，接受对象是哪些群体，要为访问者提供怎样的服务，然后对整个网站进行策划， 中期制作：搭建本地站点，建立文件夹，建立站点结构图，设置页面属性等； 后期工作：全面测试，上传后进行实地测试，完成本地测试后，再上传到服务器，以便进行远程测试； 7、网页设计工具 Dreamweaver 8 是最常用的网页编辑工具之一，使用该工具可以在其提供的三种视图中进行