网页设计与制作课件全书课件完整版ppt全套教学教程最全电子教案电子讲义(最新)

1、1. 互联网基础2. 网页设计知识3. 网页标准化技术4. 网站设计软件5. 网站制作流程6. HTML语言本章学习主要内容：第1章 网页设计基础网页设计与制作Dreamweaver CS6 标准教程1.1.1Internet与Web服务1.1.2URL路径1.1.3服务器与客户机1.1.4互联网数据中心1.1互联网基础互联网就是借助通信线路将计算机和各种相关设备相连接，并按照统一的标准在各种设备之间进行数据传输和交换，实现互联互通，以达到计算机之间资源共享和信息交换的目的。1.1.1 Internet与Web服务互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，We

2、b），电子邮件（E-mail），文件传输（FTP）和远程登录（Telnet）等。Web网采用超文本标记语言（Hyper Text Mark-up Language，HTML），可以存取包括文本、图像、动画、音频和视频等多媒体信息，还可以基于超链接通过众多的网页和网站构成了一个全球范围内的庞大信息网络。 1.1.1 Internet与Web服务Uniform Resource Locator，统一资源定位器URL由三部分组成：协议类型，主机名和路径及文件名，表达为如下形式：协议名:/服务器的IP地址或域名/路径/文件名/s2012/shichaURL地址，或Web地址，或网址，它可以是本地磁盘路

3、径，或局域网上的某一台计算机，也可以是Internet上站点。 1.1.2 URL路径服务器是提供共享资源和服务的计算机，其作用是管理大量的信息资源。客户机是用户用来获取资源和服务的计算机。浏览器软件是客户机上必备软件。1.1.3服务器与客户机互联网数据中心（Internet Data Center，IDC）为企业、媒体和各类网站提供专业化的网络服务器管理，网络带宽等一系列服务，是网络基础资源的重要组成部分。IDC向用户提供服务包括整机租用、服务器托管、机房租用、专线接入和网络管理服务等。数据中心体系包括四个主要部分：服务器系统，电力保障系统，数据传输保障系统以及环境控制系统。1.1.4互联网

4、数据中心页面设计要具有一定的独创性，符合用户的审美情趣，同时还要兼顾表达主题，满足表达内容和使用便捷的要求。色彩，网页设计元素和页面布局是网页创意设计的三个重要组成部分。1.2网页设计知识1.2.1色彩1.2.2网页设计元素1.2.3页面布局1.2网页设计知识1.认识色彩任何色彩都具有色相、明度和纯度三种属性。色相是色彩的名称，是一个色彩区别与另一个色彩的主要因素。明度也称为亮度，表示了色彩的明暗程度，明度越大，色彩越亮。纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高的颜色越鲜艳，纯度越低的颜色越灰暗。1.2.1色彩2. RGB色彩模式和网页安全色每种色彩都可以用红(R)、绿(G)、蓝(B)3种

5、色彩按一定的比例调和而成，这3种色彩被称为光的3原色将在不同操作系统和浏览器中具有一致显示效果的颜色定义为网络安全色，网络安全色有216种。在网页设计软件中，任何颜色都有一个六位的十六进制编号，如#D6D6D6，任何由00、33、66、99、CC或者FF组合而成的颜色值，都表示一个Web安全色3. 利用图像配色1.2.1色彩1. 网站标识网站logo，将网站logo置于页面比较醒目的位置，如左上角。2. 网站banner网站banner一般位于页面的顶部，即可以表达和突出网站创意和形象，也可以传达某种特定信息。网站banner通常是由GIF动画、JPEG图像或Flash动画完成的。1.2.2网

6、页设计元素3. 导航条导航条是网站设计中最重要的元素之一，即表现了网站的站点结构和内容分类，又方便了用户对网站的浏览。4. 图像Gif用于画面简单、细节信息少的图像，如背景图片，可以减少图像文件的大小；Jpeg用于画面较为复杂、细部信息多的图像；PNG用于有透明背景的图像。一种是独立完整的图像，二是在Firework或Photoshop中使用切片功能获得的图像。5. 动画网页设计中常用的动画有Gif动画和Flash动画。6. 背景使用合理能够增强页面的整体创意效果。1.2.2网页设计元素1. 结构布局常用的结构布局方式包括“国”字型、拐角型、上下框架和左右框架等类型。2. 艺术布局常用的平面艺

7、术设计原则有分割、对称和平衡等。总之，根据内容和栏目编排要求以及客户审美需求，将各种典型结构灵活运用，将艺术设计原则融会贯通，锐意创新，创作出结构布局合理，页面精美的网页。1.2.3页面布局网页由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），相应的技术标准由三个部分组成：结构化标准语言，CSS样式表和脚本语言。1.3网页标准化技术1.3.1结构化语言1.3.2CSS样式1.3.3脚本语言1.3.4ASP技术1.3网页标准化技术结构化语言HTML（Hyper Text Markup Language，超文本标记语言）XHTML（eXtensi

8、ble Hyper Text Markup Language，可扩展的超文本标记语言）是HTML的升级版本。超文本标记语言HTML5是将取代HTML4.01标准和XHTML1.0标准的HTML标准版本。1.3.1 结构化语言CSS（Cascading Style Sheets，层叠样式表）是由W3C指定和发布的，用于描述网页元素格式的一组规则，其作用是设置HTML和XHTML语言编写的结构化文档外观。层叠样式CSS3版本与超文本标记语言HTML5一起，开始获得了业界的广泛认同。1.3.2 CSS样式脚本语言是一种面向对象的程序设计语言，是专为HTML设计者提供的一种编程语言。在dreamwea

9、ver中，行为就是由内嵌的JavaScript脚本语言实现的。1.3.3脚本语言在开发制作动态网站时，除了以上标准化网页技术外，还需要ASP技术和数据库技术作为支撑条件和环境。ASP（Active Server Pages，动态服务网页）是微软公司发布的动态网页开发技术组件，用来创建和运行动态网页或web应用程序。Asp文件由文本、HTML标签，ASP脚本代码以及COM组件等部分组成。1.3.4 ASP技术1.4.1 Dreamweaver1.4.2 Flash1.4.3 Photoshop1.4 网站设计软件Photoshop借助于在平面设计领域的出色功能，将Web设计功能融入到软件系统中，

10、提供了图像切片和优化Web图形的功能，可以导出HTML页面文档用于网页设计。Dreamweaver，Photoshop和Flash是由Adobe公司开发的三款软件，具有良好的集成性。Photoshop和Flash的输出结果可以直接导入Dreamweaver网页中。1.4.3 Photoshop网站制作已经逐渐发展成为一个由网页界面设计、网页制作、数据库开发和动态应用程序编写等一系列工作构成的系统工程。1.5 网站制作流程1.5.1前期准备工作1.5.2方案实施1.5.3后期工作1.5 网站制作流程在网站建设之前，需要对与本项目相关的互联网市场进行调查和分析，同时收集各种相关的信息和资料，为网站

11、建设提供必要的前期数据，为决策提供依据。1.5.1前期准备工作1. 市场调查与分析市场调研包括用户需求分析、企业自身情况和竞争对手情况的调查与分析。2. 收集资料收集和整理资料为网站建设提供基础素材。3. 网站定位在市场调查和分析以及资料收集的基础之上，初步确定网站的定位，包括大致内容和结构，页面创意的基调，以及基本技术架构。1.5.1前期准备工作根据前期准备工作，具体规划网站的栏目和布局，页面设计风格和外观效果；确定网站所使用的各种技术，完成网站制作的全部工作。1规划网站规划网站实际上是网站定位的一个延续。网站规划越详尽，方案实施就越规范。2页面设计采用图形图像类软件进行创意和设计，也可以采

12、用动画软件设计动感十足、富于变化的页面效果。1.5.2方案实施3静态网页制作4动态网页制作采用动态网页技术。ASP技术，数据库技术以及前后台页面设计在动态网站建设中尤为重要。5整合网站在整合过程中，需要对各个部分以及整合后的系统进行检查，发现问题，及时调整。1.5.2方案实施1网站测试网站测试包括网站运行的每个页面和程序。兼容性测试，超链接测试是必选的测试内容。2网站发布网站发布包括申请域名，申请服务器空间和上传网站内容。首先，企业需要申请一个或多个域名；其次，向互联网数据公司申请服务器空间；第三，完成远程站点的设置；第四，再将网站内容上传到服务器。1.5.3后期工作3网站推广注册搜索引擎是最

13、直接和有效的方法。通过在同行或相关行业网站中，建立网站的相互链接；或通过论坛、博客、QQ和电子邮件等方式，发布网站信息，是低成本的推广方式。4网站维护日常维护，如更新网站栏目；版本升级。1.5.3后期工作在Dreamweaver可视化环境中，制作网页的各种操作都会自动生成HTML语言代码，网页是由HTML语言编写的文本文件。HTML是一个结构化描述语言，格式非常简单，由文字及标签组合而成，其书写规则如下：任何标签皆由“”和文字组成，如为段落标签；某些起始标签可以加参数，如 Hello 表示字体大小为12；大部分标签既有起始标签，又有终结标签，终结标签是在起始标签之前加上符号“/”构成的，如；标

14、签字母大小写均可。1.6 HTML语言1.6.1文件结构标签1.6.2表格标签1.6.3文本段落标签1.6.4图像标签1.6.5链接标签1.6.6框架标签1.6.7表单1.6.8块标签1.6 HTML语言第2章 Dreamweaver CS6基础网页设计与制作Dreamweaver CS6 标准教程1. Dreamweaver CS6工作界面2. 创建网站站点3. 管理站点4. 网页文档头部信息设置本章学习的主要内容：Adobe Dreamweaver CS6是一款集网页设计、制作和管理网站于一身的可视化网页编辑软件，它保留了Dreamweaver早期版本的各种优点，不仅可以轻松设计网站的前台

15、页面，也可以方便地实现网站后台各种复杂功能。2.1 Dreamweaver CS6工作界面2.1.1 开始页面2.1.2 工作环境2.1.3 工作区布局2.1.4 多文档的编辑界面2.1 Dreamweaver CS6工作界面Dreamweaver CS6启动后，默认情况下会显示开始页面，用户可以在开始页面中打开已有文档或新建文档。勾选开始页面底部【不再显示】，下次启动Dreamweaver CS6时将不会显示开始页面。选择菜单【编辑】|【首选参数】，在【首选参数】对话框中勾选【显示欢迎屏幕】，单击【确定】按钮，在下次启动时重新显示开始页面。2.1.1 开始页面Dreamweaver CS6的

16、工作环境由菜单栏、文档工具栏、文档窗口、状态栏、属性面板（或属性检查器）和浮动面板组等部分组成。2.1.2 工作环境Dreamweaver CS6为用户提供了多种工作区布局，用户可以根据需要设定工作区环境，也可以新建工作区布局，并对它进行管理和删除操作。选择菜单【窗口】|【工作区布局】，在子菜单中选择一种工作区布局。2.1.3 工作区布局Dreamweaver CS6提供了多文档的编辑界面，将多个文档集中到一个窗口中，用户可以单击文档编辑窗口上方选项卡的文件名切换到相应的文档，还可以按住鼠标左键拖动选项卡改变文档的顺序。2.1.4 多文档的编辑界面站点是存放一个网站所有文件的场所，由若干文件和

17、文件夹组成。用户在开发网站前必须先建立站点，便于组织和管理网站文件。2.2 创建网站站点2.2.1 创建新站点2.2.2 新建和保存网页2.2.3 管理站点文件和文件夹2.2.4 课堂案例慈善救助中心2.2创建网站站点站点按站点文件夹所在位置分为两类：本地站点和远程站点。本地站点是指本地计算机上的一组文件，远程站点是远程WEB服务器上的一组文件。创建本地站点首先要在本地硬盘上新建一个文件夹或者选择一个已经存在的文件夹作为站点文件夹，那么这个文件夹就是本地站点的根文件夹。2.2.1 创建新站点创建本地站点的操作步骤如下。 选择菜单【站点】|【新建站点】，或选择【管理站点】并在【管理站点】对话框中

18、单击【新建】按钮，打开【站点设置对象】对话框，在左边选择【站点】，在右侧输入站点名称和本地站点文件夹路径。 单击左侧【高级设置】，展开其他选项，选择【本地信息】，在右侧设置相应的属性。 其他项可以根据需要设置，设置完毕后单击【保存】按钮。在【文件】面板中可以看到新建的本地站点。2.2.1 创建新站点1新建网页文档选择菜单【文件】|【新建】，打开【新建文档】对话框，在左侧选择【空白页】，在【页面类型】中选择【HTML】，在【布局】中选择【无】。单击【创建】按钮就可以创建网页文档。2保存网页文档保存网页文档有如下两种方法。（1）选择菜单【文件】|【保存】或【全部保存】。在【另存为】对话框的【文件名

19、】文本框中输入网页的名称，单击【保存】按钮完成保存。（2）按快捷键保存网页文档。2.2.2 新建和保存网页1创建文件和文件夹2重命名文件和文件夹3移动文件和文件夹4删除文件或文件夹2.2.3 管理站点文件和文件夹案例学习目标：学习创建站点、管理站点文件和文件夹的方法。案例知识要点：使用【站点】|【新建站点】创建站点，在【文件】面板中移动文件、重命名文件。素材所在位置：光盘/案例素材/ch02/课堂案例-慈善救助中心。案例效果如图2-17所示。2.2.4 课堂案例慈善救助中心建立站点以后，可以对站点进行打开、编辑、复制和删除等各种操作。2.3 管理站点2.3.1打开站点2.3.2编辑站点2.3.

20、3复制站点2.3.4删除站点2.3 管理站点Dreamweaver允许建立多个站点，并可以通过切换打开需要编辑的站点。打开站点的操作步骤如下。 选择菜单【窗口】|【文件】或按键打开【文件】面板，单击左边的下拉框，在下拉列表中选择要打开的站点。 打开站点后，在【本地文件】下显示该站点内的所有文件和文件夹。2.3.1 打开站点编辑站点可以重新设置站点的一些属性，操作步骤如下。 选择菜单【站点】|【管理站点】，打开【管理站点】对话框，选择要编辑的站点名称，如webtest，单击编辑按钮图标 。 打开【站点设置对象webtest】对话框。经过对各种设置修改后，单击【保存】按钮，返回【管理站点】对话框。

21、2.3.2 编辑站点复制站点可以建立多个结构相同的站点，让这些站点保持一定的相似性，可以提高工作效率。复制站点的操作步骤如下。 选择菜单【站点】|【管理站点】，打开【管理站点】对话框，选择要复制的站点名称，如webtest，单击【复制】按钮。这时在左边的站点列表中会出现一个新的复制站点，名称为“webtest复制”。 复制的站点和原站点默认使用同一个文件夹，选择复制的站点，对其各种设置进行编辑操作。2.3.3 复制站点在Dreamweaver中删除站点，只是删除了Dreamweaver同本地站点之间的关系。本地站点中的文件夹和文件，仍然保存在硬盘原来的位置上，没有被删除，也没有任何改变。删除站

22、点的操作步骤如下。 选择菜单【站点】|【管理站点】，打开【管理站点】对话框，选择要删除的站点名称，单击【删除】按钮。 在打开的【Dreamweaver】对话框中单击【是】按钮，选中的站点就被删除，2.3.4 删除站点标签位于网页和标签之间，用来记录当前页面的相关信息，如字符编码、作者和版权信息、搜索关键字等，它也可以用来向服务器提供信息，如页面的失效日期、刷新时间间隔等。2.4 网页文档头部信息设置2.4.1 插入搜索关键字2.4.2 设置描述信息2.4.3 插入版权信息2.4.4 设置刷新时间2.4 网页文档头部信息设置插入搜索关键字可以通过以下两种方法完成。1在代码视图中插入关键字 在【文

23、档】窗口中切换到代码视图，将光标置于标签中。 选择菜单【插入】|【HTML】|【文件头标签】|【关键字】，打开【关键字】对话框，输入关键字，如“礼品，节日礼品”，多个关键字用英文逗号分隔。 单击【确定】按钮完成设置，在代码视图下可以看到标签内新增了如下代码：2.4.1 插入搜索关键字2使用META对话框插入关键字 选择菜单【插入】|【HTML】|【文件头标签】|【META】，打开【META】对话框，在【值】文本框中输入keywords，在【内容】文本框中输入关键字，多个关键字用英文逗号隔开。 单击【确定】按钮完成设置，在代码视图中可看到相应的HTML标签。2.4.1 插入搜索关键字设置网页描述

24、信息的操作如下。 在【文档】窗口中切换到代码视图，将光标置于标签中。选择菜单【插入】|【HTML】|【文件头标签】|【说明】，在【说明】对话框中输入说明文字。 单击【确定】按钮完成描述信息设置，在代码视图下可以看到标签内新增了如下代码：2.4.2 设置描述信息在网页文档中插入版权信息的操作如下。选择菜单【插入】|【HTML】|【文件头标签】|【META】，打开【META】对话框，在【值】文本框输入copyright，在【内容】文本框中输入版权信息，如“本页版权归设计者所有”，单击【确定】按钮。在代码视图下可以看到标签内新增了如下代码：2.4.3 插入版权信息设置刷新时间具体操作步骤如下。 在【

25、文档】窗口中切换到代码视图，将光标置于标签内，选择菜单【插入】|【HTML】|【文件头标签】|【刷新】。 在【刷新】对话框中设置相应属性。 单击【确定】按钮，在代码视图下可以看到标签内新增了如下代码：2.4.4 设置刷新时间标签分为name属性和http-equiv属性。name属性主要用于描述网页，如keywords（关键字）、description（网站内容描述）等。http-equiv属性类似于HTTP的头部协议，它会给浏览器一些有用的信息，以帮助正确和精确地显示网页内容，如refresh（刷新）等。2.4.4 设置刷新时间第3章 页面与文本网页设计与制作Dreamweaver CS6

26、标准教程1. 页面属性2. 文本属性3. 项目列表和编号列表本章学习的主要内容：网页页面属性主要包括网页标题、网页背景图像和颜色、网页边距、网页默认文字大小和颜色、超链接颜色等。可以通过菜单【修改】|【页面属性】来进行设置和修改。3.1 页面属性3.1.1 课堂案例香格里湾峰会3.1.2 网页的标题3.1.3 文本分段与换行3.1.4 输入空格3.1.5 页面文字属性3.1.6 显示不可见元素3.1.7 设置页边距3.1.8 背景属性3.1.9 跟踪图像3.1 页面属性案例学习目标：学习网页页面属性的设置方法，以及文本的换行与分段，字体的选择与设置等方法。案例知识要点：使用【修改】|【页面属性

27、】菜单设置页面属性。素材所在位置：光盘/案例素材/ch03/课堂案例-香格里湾峰会。案例效果如图3-1所示。3.1.1课堂案例香格里湾峰会网页标题设置有两种方法。（1）利用【页面属性】对话框 选择菜单【修改】|【页面属性】或点击文本【属性】面板中的【页面属性】按钮。 单击【页面属性】对话框中【分类】栏中的【标题/编码】，在【标题】文本框中输入页面标题，如图3-22所示，单击【确定】完成设置。（2）在文档工具栏【标题】文本框中，输入页面标题文字完成设置。3.1.2 网页的标题（1）将光标置于需要分段处，按回车键形成一个新段落，同时在两个段落之间添加了一个空行。在网页代码中，新形成的两个段落文字均

28、包含在和标签中。（2）将光标置于需要换行处，按住的同时，按回车键换行，但没有形成新的空行。在网页代码中，段落文字依然包含在和标签中，并在换行处上添加了一个标签。3.1.3 文本分段与换行选择菜单【编辑】|【首选参数】，在【首选参数】对话框的【分类】栏中，选择【常规】，在【编辑选项】中勾选或取消勾选【允许多个连续空格】完成设置。除此之外，还可以通过以下四种方法输入空格。（1）选择【插入】面板中【文本】选项卡，单击【字符】按钮 展开选择【不换行空格】选项。（2）选择菜单【插入】|【HTML】|【特殊字符】|【不换行空格】。（3）按快捷键。（4）将输入法转换到中文全角状态下，按空格键输入连续空格。3

29、.1.4 输入空格新建网页时，页面文字的字体、大小和颜色等均有默认设置，可根据需要进行修改，具体步骤如下。选择菜单【修改】|【页面属性】。单击【页面属性】对话框【分类】栏中的【外观（CSS）】，在右侧设置【页面字体】、【大小】、【文本颜色】。页面文字属性设置完后，在【CSS样式】面板中出现了body,td,th样式，【代码】窗口中新增一段CSS样式代码，如：body,td,th font-family: 微软雅黑;font-size: 14px;color: #666;3.1.5 页面文字属性显示或隐藏不可见元素的操作步骤如下。选择菜单【编辑】|【首选参数】，打开【首选参数】对话框。在【首选参

30、数】对话框【分类】栏中选择【不可见元素】，在右侧单击相应元素的复选框实现显示或隐藏不可见元素，如图3-28所示，单击【确定】完成设置。3.1.6 显示不可见元素页边距指整个页面到浏览器左、右边缘和顶部、底部边缘的距离，通常设置为0。设置步骤如下。选择菜单【修改】|【页面属性】在【页面属性】对话框【分类】栏中选择【外观（CSS）】，在【左边距】、【右边距】、【上边距】、【下边距】选项分别输入相应数值，单击【确定】按钮完成设置。在【代码】窗口中看到新增一段代码：body margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom

31、: 0px;3.1.7 设置页边距网页背景可以填充为颜色，也可以填充为图像。更改网页背景的操作步骤如下。选择菜单【修改】|【页面属性】。单击【页面属性】对话框【分类】栏中的【外观（CSS）】，在右侧设置【背景颜色】、【背景图像】、【重复】等选项。【重复】选项下拉列表中，各选项含义如下。no-repeat（不重复）：背景图像不重复。repeat（重复）：背景图像在页面中重复。repeat-x（重复-x）：背景图像在页面中横向重复。repeat-y（重复-y）：背景图像在页面中纵向重复。如果【重复】空白，默认为repeat。3.1.8 背景属性网页背景可以填充为颜色，也可以填充为图像。更改网页背景

32、的操作步骤如下。设置跟踪图像的步骤如下。选择菜单【修改】|【页面属性】。单击【页面属性】对话框【分类】栏中的【跟踪图像】，在右侧【跟踪图像】文本框中输入跟踪图像的路径和文件名。或者单击【浏览】按钮，在【选择图像源文件】对话框中找到并选择跟踪图像，单击【确定】按钮。在【透明度】选项中设置跟踪图像透明度。3.1.9 跟踪图像在制作网页时，应用最多的元素就是文本，文本有很多种，如文字、特殊符号、日期等。在网页中添加文本之后，需要对文本的大小、颜色等属性进行设置，以便网页更加美观。3.2 文本属性3.2.1 课堂案例百货公司3.2.2 设置文本属性3.2.3 文本段落3.2.4 插入日期3.2.5 插

33、入特殊字符3.2 文本属性案例学习目标：学习设置网页中的文字样式。案例知识要点：使用CSS样式改变文本大小、颜色、字体等样式。素材所在位置：光盘/案例素材/ch03/课堂案例-百货公司。案例效果如图3-33所示。3.2.1 课堂案例百货公司Dreamweaver基于层叠样式表（CSS）对网页进行设置，即事先定义好文本的CSS样式再应用到文本上。定义的一个CSS样式可以应用在多处文本上，要改变文本样式属性只需修改CSS样式属性。3.2.2 设置文本属性设置文本属性的操作步骤如下。选择菜单【窗口】|【CSS样式】或按快捷键打开【CSS样式】面板。单击【CSS样式】面板底部【新建CSS规则】按钮，在

34、【新建CSS规则】对话框中的【选择器类型】下拉列表中选择“类（可应用于任何HTML元素）”，在【选择器名称】文本框中输入样式名称，如.text，单击【确定】按钮。打开【.text的CSS规则定义】对话框，在【分类】中选择【类型】，在右侧设置文本的属性。选中需要设置样式的文本，在【属性】面板中单击【HTML】按钮 切换到HTML属性，在【类】下拉列表中选择.text。3.2.2 设置文本属性在页面文档中， 和标签主要用于定义一个段落。如果一段短小的文字段落，需要加大或缩小文字突出表现效果，那么还可以使用标题。预定义格式在处理空格和空行较多的文本段落时更加方便。1. 应用段落或标题格式2. 指定预

35、格式3.2.3 文本段落在网页文档中插入日期的操作步骤如下。在【文档】窗口中将光标置于要插入日期的位置上。单击菜单【插入】|【日期】，或在【插入】面板中选择【常用】选项卡，单击【日期】按钮 。在【插入日期】对话框中选择需要显示的【星期格式】、【日期格式】或【时间格式】。如果勾选【储存时自动更新】，则每次保存该网页文档时都会自动更新日期，否则不会更新。3.2.4 插入日期可采用以下两种方法在网页中插入特殊字符。（1）使用【插入】|【HTML】|【特殊字符】菜单。（2）使用【插入】面板插入特殊字符。3.2.5 插入特殊字符项目列表和编号是放在文本前的点、数字或其他符号，起到强调作用。合理使用项目列

36、表和编号列表，可以使网页内容的层次结构更清晰、更有条理。3.3 项目符号和编号列表3.3.1课堂案例咨询网站3.3.2设置项目列表或编号列表3.3.3 修改项目符号或编号3.3 项目符号和编号列表案例学习目标：学习使用项目列表。案例知识要点：使用【项目列表】按钮创建列表、改变列表样式。素材所在位置：光盘/案例素材/ch03/课堂案例-咨询网站。案例效果如图3-58所示。3.3.1 课堂案例-咨询网站1项目列表设置项目列表有以下两种方法。（1）使用【属性面板】设置（2）使用【格式】|【列表】菜单设置网页中的项目列表也称为无序列表（unordered lists），添加完项目符号后，在【代码】视图

37、中可以查看HTML代码： 项目列表一 项目列表二 项目列表三整个项目列表包含在和标签之间，列表的每一项包含在和标签内。3.3.2 设置项目列表或编号列表2编号列表设置编号列表有以下两种方法。（1）使用【属性面板】设置（2）使用【格式】|【列表】菜单设置编号列表也称为有序列表（ordered lists），添加完编号列表后，在【代码】视图中可以查看HTML代码： 项目列表一 项目列表二 项目列表三整个项目列表包含在和标签之间，列表的每一项包含在和标签内。3.3.2 设置项目列表或编号列表修改项目符号或编号的操作步骤如下。将光标置于设置了项目符号或编号的文本中。单击【属性】面板中【列表项目】按钮

38、或选择菜单【格式】|【列表】|【属性】，打开【列表属性】对话框。在【列表类型】下拉列表中选择要修改的列表类型，在【样式】下拉列表中选择符号或编号样式，在【开始计数】文本框中设置编号起始值。3.3.3 修改项目符号或编号3.4.1 练习案例大学生国际电影节3.4.2 练习案例移动银行网站3.4.3 练习案例化妆品网站3.4 练习案例案例练习目标：练习页面属性设置。案例操作要点：1设置网页标题为 “大学生国际电影节”。2. 设置页面的文本属性：页面字体为微软雅黑，文本大小为14px，颜色为#FFF。3设置页面的背景属性：背景颜色为#CA162F，背景图像为bg.jpg，图像重复为no-repeat

39、，图像对齐为水平居中和垂直顶端，左边距、右边距、上边距和下边距分别设为0px、0px、240px和0px。素材所在位置：光盘/案例素材/ch03/练习案例-大学生国际电影节，效果如图3-75所示。3.4.1练习案例-大学生国际电影节案例练习目标：练习文字样式设定。案例操作要点：1在页面相应位置分别输入文字。2设置如下样式，并应用到相应文本上。样式名称为.menu，字体大小12px，颜色#FFF。样式名称为.t1，字体大小12px、颜色#666；样式名称为.t2，字体大小14px，字体颜色#000，字体粗细bold；样式名称为.t3字体大小13px，字体颜色#CD3E00。样式名称为.title

40、1，字体大小18px，字体颜色#000；样式名称为.titile2，字体大小18px，字体颜色#2C9BC9；样式名称为.title3，字体大小18px，字体颜色#EF9514。素材所在位置：光盘/案例素材/ch03/练习案例-移动银行网站，效果如图3-76所示。3.4.2练习案例-移动银行网站案例练习目标：练习项目列表的使用。案例操作要点：1将表格中的文字设置为项目列表。2在标签样式中，文本大小为14px，颜色为#727272，行高为150%。素材所在位置：光盘/案例素材/ch03/练习案例-化妆品网站，效果如图3-77所示。3.4.3练习案例-化妆品网站第4章 图像与多媒体网页设计与制作D

41、reamweaver CS6 标准教程1. 图像的插入2. 调整图像3. 网页中的多媒体本章学习的主要内容：图像是网页设计中一个非常重要的元素，它使页面更美观，更具有吸引力。在网页中插入图像也是Dreamweaver网页设计中必须掌握的技术。4.1 图像插入4.1.1 课堂案例茶叶网站4.1.2 插入图像4.1.3 图像源文件4.1.4 替换文本4.1.5 图像占位符4.1 图像插入案例学习目标：学习使用多种方法在网页中插入图像。案例知识要点：使用【插入】面板、【插入】|【图像】菜单和直接拖曳图像等方法将图像插入到网页指定位置。素材所在位置：光盘/案例素材/ch04/课堂案例-茶叶网站。案例效

42、果如图4-1所示。4.1.1 CSS样式标准网站中的图像必须放在站点文件夹内才能在网页中正确显示，所以在建立网站时要在站点文件夹内建立一个专门存放该站点图像的文件夹，通常命名为“images”，然后将网站所需的图像都放置其中。4.1.2 插入图像在Dreamweaver中，可以通过以下三种方法在网页中插入图像。（1）选择菜单【插入】|【图像】，在【选择图像源文件】对话框中找到并选择所需的图像，单击【确定】按钮完成图像插入。（2）选择【插入】面板中【常用】选项卡，单击【图像】按钮 上的黑色三角形，在下拉菜单中选择“图像”选项，在【选择图像源文件】对话框中找到并选择所需的图像，单击【确定】按钮完成

43、图像插入。（3）打开【文件】面板，展开显示图像文件夹中的所有文件，在需要插入的图像名称上按住鼠标左键拖曳到【文档】窗口的相应位置，松开鼠标，完成图像插入。4.1.2 插入图像图像源文件是指插入的图像文件所在的位置，可以是本地的图像也可以是网络上的图像，如果插入的图像位于站点文件夹内，【属性】面板中【源文件】文本框中会显示相对路径。如果要插入的图像不在站点文件夹内，那么会出现提示对话框，询问是否将图像复制到站点文件夹内，选择单击【确定】按钮即可。也可以直接在【属性】面板【源文件】文本框中修改网页中显示的图像的路径和文件名。4.1.3 图像源文件如果网页中有的图像不能正常显示（如图像源文件路径错误

44、或浏览器图像显示被关闭等）就会导致浏览者看不到图像。使用图像【属性】面板中的【替换】文本框，可以给看不到的图像设置说明性文字。4.1.4 替换文本图像占位符是指在将最终图像插入到网页中之前所使用的替代图像，以便在不确定图像时对网页进行布局。图像占位符可以设置不同尺寸、颜色和文字来替代图像。插入图像占位符的步骤如下。将光标置于要插入图像占位符的位置。单击菜单【插入】|【图像对象】|【图像占位符】，打开【图像占位符】对话框。输入名称、宽度、高度、颜色等属性值，单击【确定】按钮，插入图像占位符，通过适当调整，使其满足设计需求。当需要插入真正的图片时，只需双击该位置的图形占位符，在【选择图像源文件】对

45、话框中找到并选择需要的图像，单击【确定】按钮完成插入。4.1.5 图像占位符网页中的图像为了满足布局要求，经常需要进行调整，利用【编辑图像设置】等功能可以对图像尺寸、类型和色彩等进行调整。4.2 调整图像4.2.1 课堂案例墙体装饰4.2.2 图像效果4.2 CSS样式控制面板案例学习目标：学习网页中图像调整的基本操作，包括裁剪、尺寸调整、亮度和对比度、锐化等效果调整。案例知识要点：在【属性】面板中，选择【编辑图像设置】、【裁剪】、【亮度和对比度】、【锐化】等按钮调整图像效果。素材所在位置：光盘/案例素材/ch04/课堂案例-墙体装饰。案例效果如图4-15所示。4.2.1 课堂案例墙体装饰1图

46、像裁剪2亮度和对比度3图像锐化4.2.2 图像效果网页不仅由图像和文字组成，而且音频、视频等多媒体也越来越广泛地应用在网页设计中，目前网页中可以插入的多媒体包括动画、视频、Java Applet对象和ActiveX控件等。虽然应用多媒体能丰富网页内容，但可能影响浏览速度，所以一般情况下网页中不会大量使用多媒体元素。4.3 网页中的多媒体4.3.1课堂案例度假村4.3.2插入Flash动画4.3.3插入Flv影片4.3.4插入插件瑜伽会所4.3.5插入Applet程序4.3 CSS属性案例学习目标：学习在网页中插入动画、FLV视频等元素。案例知识要点：使用【插入】面板的【媒体】|【SWF】和【F

47、LV】按钮插入多媒体元素。素材所在位置：光盘/案例素材/ch04/课堂案例-度假村。案例效果如图4-25、图4-26所示。4.3.1课堂案例-度假村插入Flash动画的步骤如下。在【文档】窗口中单击要插入Flash动画的位置。单击菜单【插入】|【媒体】|【SWF】，打开【选择SWF】对话框中，查找并选择需要插入的Flash动画文件，再单击【确定】按钮。插入的Flash动画显示在设计窗口中显示为占位符形式，单击【属性】面板的【播放】可以播放动画。4.3.2插入Flash动画在Dreamweaver中插入Flash视频的操作步骤如下。在【文档】窗口中单击要插入Flash视频的位置。单击菜单【插入】

48、|【媒体】|【FLV】，打开【插入FLV】对话框，选择【视频类型】，在【URL】属性单击【浏览】查找并选择要插入的Flv影片文件，选择【外观】，再设置FLV视频的【高度】和【宽度】，根据需要选择勾选【自动播放】和【自动重新播放】复选框。单击【确定】按钮，完成FLV影片插入。4.3.3插入Flv影片案例学习目标：学习在网页中使用插入插件方式插入视频和背景音乐。案例知识要点：使用【插入】面板的【媒体】|【插件】按钮插入多媒体元素。素材所在位置：光盘/案例素材/ch04/课堂案例-瑜伽会所。案例效果如图4-36所示。4.3.4插入插件瑜伽会所在网页中插入Applet程序操作步骤如下。在【文档】窗口中

49、单击要插入Applet程序的位置。选择菜单【插入】|【媒体】|【Applet】，在【选择文件】对话框中查找并选择一个Java Applet程序文件，单击【确定】按钮完成插入。4.3.5插入Applet程序4.4.1练习案例-五金机械4.4.2练习案例-心缘咖啡屋4.4练习案例案例练习目标：练习图像的插入和图像的调整。案例操作要点：1在中间单元格中插入图像，图像1.jpg的尺寸调整为宽117px高105px，亮度值为14，图像2.jpg尺寸为宽110px高91px，对比度值为26，图像3.jpg尺寸为宽110px高89px，锐化值为2。2右上角客服图片裁剪后尺寸调整为宽110px高147px，并

50、且在单元格中水平方向居中对齐。素材所在位置：光盘/案例素材/ch04/五金机械，效果如图4-45所示。4.4.1练习案例-五金机械案例练习目标：练习FLV影片和多媒体插件的插入和调整。案例操作要点：1在网页文档index.html中，插入1.FLV文件，尺寸调整为宽469px高350px，外观选择Clear Skin 3（最小宽度：260），自动和循环播放，原名保存。2在网页文档index1.html中，使用插入插件的方式插入文件1.wmv，在代码窗口设置插件尺寸宽469px高350px，自动和循环播放，原名保存。素材所在位置：光盘/案例素材/ch04/心缘咖啡屋，效果如图4-46所示。4.4

51、.2练习案例-心缘咖啡屋第5章 超链接网页设计与制作Dreamweaver CS6 标准教程1. 超链接的概念与路径知识2. 文本超链接3. 图像超链接4. 热点链接5. 锚点超链接6. 链接管理本章学习的主要内容：超级链接由两个端点和一个方向构成，通常将起始端点（即鼠标单击的位置）称为源端点（或源锚），将跳转到的目标位置称为目标端点（或目标锚）。源端点可以是文本、按钮、图像等对象，目标端点可以是同一页面的不同位置，也可以是一个其他页面、一幅图像、一个文件或一段程序等。5.1 超链接的概念与路径知识5.1.1 按超链接端点分类5.1.2 按超链接路径分类5.1 超链接的概念与路径知识按照源端点

52、来划分，超级链接可以分为文本超链接和非文本超链接两种。文本超链接是把文本作为源端点，而非文本超链接是用除文本外的其他对象作为源端点。按照目标端点来划分，超级链接可分为外部链接、内部链接和电子邮件链接等5.1.1按超链接端点分类超级链接根据链接路径的不同分为相对链接和绝对链接。相对链接无需给出目标端点完整的URL地址，只要给出相对于源端点的位置即可，如bbs/index.html。绝对链接给出链接目标端点完整的URL地址，包括使用的协议（网页中常用http:/协议），如/index.html。5.1.2按超链接路径分类文本超链接是以文本为对象构建的超级链接，链接的源端点是文本。文本超链接是网页中

53、最常使用的一种链接方式。5.2 文本超链接5.2.1 课堂案例婚礼公司5.2.2 创建文本链接5.2.3 页面文本链接的状态5.2.4 下载文件链接5.2.5 电子邮件链接5.2.6 空链接5.2 文本超链接案例学习目标：学习创建内部链接、外部链接、下载文件链接和电子邮件链接等多种文本超链接。案例知识要点：使用【属性】面板、【插入】菜单和直接拖曳等方法创建文本超链接。素材所在位置：光盘/案例素材/ch05/课堂案例-婚礼网站。案例效果如图5-1所示。5.2.1课堂案例婚礼公司1直接输入要链接文件的路径和文件名2使用【浏览文件】按钮3使用【指向文件】图标4设定链接【目标】5.2.2 创建文本链接

54、可通过【页面属性】设置文本链接状态，操作步骤如下。选择菜单【修改】|【页面属性】，打开【页面属性】对话框，在【分类】列表中选择【链接（CSS）】。单击【链接颜色】右侧的图标 ，打开调色板，选择一种颜色来设置链接文字的颜色。采用同样的方式，分别设置【已访问链接】、【变换图像链接】和【活动链接】的颜色。单击【下划线样式】下拉列表，设置链接文字是否带有下划线。5.2.3 页面文本链接的状态下载文件链接是通过单击链接来实现文件下载，建立方法和文字链接建立方法类似，所不同的是所链接的文件不是网页文件而是其他文件，如.rar压缩文件等，单击链接后并不是打开网页，而是实现下载。具体创建步骤如下：在【文档】窗

55、口中选择需要添加下载文件链接的对象。在【属性】面板的【链接】下拉文本框中设置链接的文件。5.2.4 下载文件链接电子邮件链接是当单击链接时打开邮件收发软件，并自动将设定好的邮箱地址作为收信人，方便浏览者发送邮件。建立电子邮件链接有以下两种方法。1使用【电子邮件链接】对话框2使用【属性】面板5.2.5 电子邮件链接空链接是一种特殊的链接，它实际上并没有指定具体的链接目标。创建空链接的步骤如下：在【文档】窗口中选择需要设置链接的文本、图像或其他对象；在【属性】面板的【链接】文本框中输入“#” 。5.2.6 空链接网页设计中经常需要实现单击图像打开链接的效果，这就需要给图像建立超链接。图像超链接可以

56、分为普通图像链接和鼠标经过图像超链接。5.3 图像超链接5.3.1课堂案例-手机商城5.3.2创建图像超链接5.3.3鼠标经过图像链接5.3 图像超链接案例学习目标：学习建立图像超链接和鼠标经过图像超链接。案例知识要点：使用【属性】面板为图像设置超链接，使用菜单【插入】|【图像对象】|【鼠标经过图像】建立鼠标经过图像超链接。素材所在位置：光盘/案例素材/ch05/课堂案例-手机商城。案例效果如图5-23所示。5.3.1课堂案例-手机商城建立图像超链接的操作步骤如下。在【文档】窗口中选择需要建立超链接的图像。在【属性】面板中，单击【链接】项文本框后的【浏览文件】按钮 ，为图像添加链接。在【替换】

57、项中可以输入替换文字。设置替换文字后，当图像不能正常显示时，会在图像的位置显示替换文字；浏览时把鼠标悬停在图像上也会显示替换文字。5.3.2创建图像超链接鼠标经过图像是指当鼠标指针经过一幅图像时，图像的显示会变为另一幅图像。鼠标经过图像实际上是由两张图像组成，一张称为原始图像，另一张称为鼠标经过图像。一般来说，原始图像和鼠标经过图像尺寸必须相同，如果图像的大小不同，Dreamweaver会自动调整鼠标经过图像的大小，使之与原始图像匹配。5.3.3鼠标经过图像链接建立鼠标经过图像的操作步骤如下。在【文档】窗口中将光标置于需要添加鼠标经过图像的位置。选择菜单【插入】|【图像】|【鼠标经过图像】，在

58、【插入鼠标经过图像】对话框中分别单击【原始图像】和【鼠标经过图像】文本框右侧的【浏览】按钮设置图像路径。在【替换文本】文本框中设置替换文字。在【按下时，前往的URL】文本框中设置跳转的网页文件路径，当浏览者单击图像时打开此网页。单击【确定】按钮，按键预览网页效果。5.3.3鼠标经过图像链接在一个图像中创建的不同几何图形区域称为热点或热区，以这些区域为超链接的源端点，建立的不同超链接被称为热点链接。5.4热点链接5.4.1课堂案例-儿童课堂5.4.2 创建热点链接5.4热点链接案例学习目标：学习创建热点链接。案例知识要点：使用【属性】面板创建热点链接。素材所在位置：光盘/案例素材/ch05/课堂

59、案例-儿童课堂。案例效果如图5-32所示。5.4.1课堂案例-儿童课堂创建热点链接的操作步骤如下。在【文档】窗口中单击选择一张图像，在【属性】面板的【地图】选项中选择热点工具。鼠标放在图像上，指针变成“+”，在图像上拖曳出相应形状的蓝色区域。可以通过【指针热点工具】 选择不同的热区，并通过热区边框的控制点调整热区大小，还可以通过复制得到多个相同的热区，建立多个矩形热区。用【指针热点工具】 选取某个热区，出现【属性】面板，在【链接】文本框中输入链接地址，在【替换】文本框中输入替换文字，这样就在一个图像上创建了几个热点链接。5.4.2 创建热点链接锚点链接是指目标端点位于网页中某个指定位置的一种超

60、链接。创建锚点链接可分两步完成，首先在网页的某个指定位置创建超链接的目标端点（即锚点），并为其命名；然后在超链接的源端点处建立指向该锚点的超链接。5.5 锚点链接5.5.1练习案例-数码商城5.5.2创建锚点链接5.5 锚点链接案例学习目标：学习建立锚点链接。案例知识要点：使用菜单【插入】|【命名锚记】和【属性】面板创建锚点链接。素材所在位置：光盘/案例素材/ch05/课堂案例-数码商城。案例效果如图5-43所示。5.5.1 练习案例-数码商城创建锚点链接的步骤如下。1创建锚点2链接到锚点5.5.2 创建锚点链接网站链接设置好后，Dreamweaver还提供了自动更新链接和链接检查功能，以便对