Dreamweaver CS6网页设计与应用 (3)

合集下载

中文版 Dreamweaver CS6网页设计教程第3章

22
3.6 认识超链接
在创建超链接之前，首先得清楚文档的链接路径。概括起来，文档的链接路径主要有绝对路径、相对路径、根目录相对路径等三种形式。
绝对路径：一般指服务器上的文件，是完整的文件路径，包含其应用协议，例如/daquan/intro.htm。相对路径：本地站点内常用的文件路径，如果文件都在同一个目录中，使用相对路径则极为有效。如果要链接同一文件夹中的文档，则只需要输入文件名，例如cursor.htm；如果要链接同一目录下其他子文件夹中的文档，则需要输入文件夹名称和斜杠(/)，然后输入文件名，例如document/cursor.htm；如果要链接上一层文件夹中的文档，则需要在文件名称前面添加../，例如../cursor.htm。根目录相对路径：使用多个服务器的大型站点会用到这种文档路径，而对于一般的Web站点没有必要在页面中插入文本内容，一般可以通过以下两种方式来进行：一种是在网页编辑窗口中直接用键盘输入文本，这是文字输入最基本的方式。另一种是复制文本的方式，如果需要插入其他文档中或是网站页面中的文本，可以直接使用 “复制”功能，将大段的文本内容复制到网页的编辑窗口来进行排版的工作，如图3-1所示。
30
3.8.1 添加链接
如果要添加超链接，则可使用下面的操作步骤。 (1) 在站点管理窗口中单击选定文件，在其左上角出现图标。 (2) 执行下列操作之一可添加链接。
23
3.7 创建超链接
网页中的链接形态多种多样，根据链接对象的不同，可将其分为文本链接、图像链接、邮件链接、锚点链接。此外，还有图像映射、空链接、脚本链接等几种链接形式。本节中对这些链接的创建方法进行介绍。
24
3.7.1 创建文本链接

利用Dreamweaver CS6设计网页

第五章利用Dreamweaver CS6设计网页
引导案例
图5-2 网页组成示例
第五章利用Dreamweaver CS6设计网页
了解网页制作的基础知识熟悉Dreamweaver 8的工作环境掌握创建和管理站点的方法掌握在网页中创建文本的方法了解网页中常见的图像格式掌握使用局页面的方法了解使用框架布局网页的方法
引导案例
分析网页组成部分
一般而言，比较规范的商业网站的网页由以下几个重要部分组成： 1）网站或企业的标志（Logo），宣传口号（slogan）。 2）主栏目导航。 3）形象图片或动画。 4）新闻或介绍。 5）版权信息（如果觉得有必要，还可以包括一些辅助的内容）。 6）辅助快捷导航。 7）显示当前所处在网站位置的文字。 8）推荐产品展示，或希望观众第一眼看到的比较重要的内容。 9）辅助的企业形象图片或动画。 10）计数器。 11）音乐控制（一般以商业为目的的公司很少使用）。包括以上内容的网页如图5-2所示。
第五章利用Dreamweaver CS6设计网页
一、网页基础知识
GIF为Graphic Interchange Format的缩写，被称为图像交换格式，采用LZW 无损压缩算法。
JPEG为Joint Photograhic Experts Group 的缩写，是由联合图像专家组开发的图形标准，采用有损的压缩算法。
3）超链接超链接（也称超级链接）是网页中最常用的一种元素。所谓超链接，是指从一个网页指向一个目标的链接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。它表明网页文件之间所存在的相互链接关系。 4）动画
第五章利用Dreamweaver CS6设计网页

《网页设计与制作Dreamweaver CS6》电子教案

XXX中等职业学校教案
适用年级： XXX 课程名称：网页设计与制作 Dreamweaver CS6 任课教师： XXX
XXXX学校计算机专业组制
第1-4课时讲授2学时实践2学时
第5-10课时讲授2学时实践4学时
第11-16课时讲授2学时实践4学时
第16-21课时讲授2学时实践4学时
第22--27课时讲授2学时实践4学时
第28-37课时讲授4学时实践6学时
第38--41课时讲授2学时实践2学时
第41--50课时讲授4学时实践6学时
第51--56课时讲授2学时实践4学时
第57--60课时讲授2学时实践2学时
第61--68课时讲授4学时实践4学时
第69--74课时讲授2学时实践4学时
第75--80课时讲授2学时实践4学时
第81--90课时讲授4学时实践6学时
第91--94课时讲授2学时实践2学时。

《边做边学——Dreamweaver CS6网页设计案例教程(第3版)(微课版)》配套教学教案

1．改变文本的大小
2．改变文本的颜色
3．改变文本的字体
4．改变文本的对齐方式
5．设置文Leabharlann 样式6．段落文本7．插入换行符
8．设置项目符号或编号
9．修改项目符号或编号
10．设置文本缩进格式
11．插入日期
12．特殊字符
2.2.5【实战演练】——快乐购物网页
2.3休闲度假网页
2.3.1【案例分析】
2.3.2【设计理念】
小结
1、熟练掌握Dreamweaver CS6界面的操作方法和技巧。
2、熟练掌握在Dreamweaver CS6中站点的创建、编辑、复制、删除和导出的方法，掌握新建、保存的技巧。
第2讲
课时内容
文本与文档
授课时间
180分钟
课时
4
教学目标
了解文本与文档的创建方法和使用技巧。
掌握项目符号和编号列表使用方法和区别。
1.1操作界面
1.1.1【操作目的】
1.1.2【操作步骤】
1.1.3【相关工具】
1．开始页面
2．不同风格的界面
3．伸缩自如的功能面板
4．多文档的编辑界面
5．插入面板
6．更完整的CSS功能
1.2创建网站框架
1.2.1【操作目的】
1.2.2【操作步骤】
1.2.3【相关工具】
1.3管理站点
1.3.1【操作目的】
2、在Dreamweaver CS6中如何输入多个连续空格？
3、在Dreamweaver CS6中如何更改文字颜色、字号等设置？
内容大纲：具体可结合本项目的PPT课件进行配合讲解。
2.1轩宇门窗网页
2.1.1【案例分析】
2.1.2【设计理念】

DreamweaverCS6网页设计教学教案

使用“项目列表”按钮，设置项目列表效果云盘/Ch02/使用“页面属性”命令，设置页面边距和标题；使用“首选参数”命令，设置允许多个云盘/Ch02/使用“图像”按钮，插入图像云盘/Ch03/使用“云盘/Ch03/使用“命名锚记”按钮，插入锚点制作文档底部移动到顶部的效果。

云盘/Ch04/使用“电子邮件链接”按钮，制作电子邮件链接效果；使用“属性”面板，为文字制作云盘/Ch04/使用“页面属性云盘/Ch05/使用“导入表格式数据”命令，导入外部表格数据；使用“属性”面板，改变表格的高云盘/Ch05/使用云盘/Ch06/使用“对齐上缘”命令，制作网页的结构图效果云盘/Ch06/使用“绘制云盘/Ch07/使用“云盘/Ch07/使用“项目列表”按钮，创建无序列表云盘/Ch08/使用“云盘/Ch08/使用“另存模板”命令，将页面存为模板；使用“可编辑区域”按钮，添加可编辑区。

云盘/Ch09/使用“库”面板，添加库项目；使用库中注册的项目，制作网页文档。

云盘/Ch09/使用“文本字段”按钮，制作用户名、手机、密码和验证码文本框；使用“云盘/Ch10/使用“文本字段”按钮，插入文本字段；使用“图像域”按钮，插入图像域；使用“选云盘/Ch10/使用“弹出信息”行为命令，制作弹出信息效果；使用“状态栏文本”行为命令，制作云盘/Ch11/使用“交换图像”命令，制作鼠标经过图像发生变化效果。

云盘/Ch11/使用“插入标签”命令，制作浮动框架效果。

云盘/Ch12/使用“云盘/Ch13/使用“云盘/Ch13/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“图像”按钮，插云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch15/使用“页面属性”命令，改变页面字体、大小、颜色、背景颜色和页边距效果；使用“云盘/Ch15/使用“图像”按钮，添加网页标志和广告图；使用“云盘/Ch16/使用“鼠标经过图像”按钮，制作导航效果；使用“属性”面板，设置单元格高度和对云盘/Ch16/使用“页面属性”面板，更改页面属性；使用“云盘/Ch17/使用“页面属性”命令，设置页面字体、大小、颜色和页面边距；使用“属性”面板，云盘/Ch17/使用“表格”按钮，布局网页；使用“页面属性”命令，控制页面的整体字体、大小和云盘/Ch17/使用“页面属性”命令，设置网页背景颜色及边距；使用输入代码方式设置图片与文字云盘/Ch17/。

DreamweaverCS6网页设计与制作课程设计

Dreamweaver CS6网页设计与制作课程设计一、前言Dreamweaver CS6是一款功能强大的网页设计软件，无论是设计静态网页还是动态网页，都可以方便快捷地完成。

本课程旨在教授学生如何使用Dreamweaver CS6进行网页设计与制作。

通过本课程的学习，学生可以掌握基本的HTML、CSS和JavaScript知识，并且能够使用Dreamweaver CS6进行网页的设计、制作、发布和维护。

二、教学目的1.了解网页设计的基本知识和流程；2.掌握HTML、CSS和JavaScript的基础知识；3.熟练使用Dreamweaver CS6进行网页的设计、制作、发布和维护；4.培养学生的网页设计和制作能力。

三、教学内容1.网页设计基础知识–网页设计的概念和流程–网页设计的原则和规范2.HTML基础知识–HTML的基本语法和标签–HTML的常用标签和属性–HTML的表单和表格3.CSS基础知识–CSS的基本语法和选择器–CSS的常用属性和值–CSS的盒模型和浮动4.JavaScript基础知识–JavaScript的基本语法和数据类型–JavaScript的基本操作和事件–JavaScript的DOM和jQuery库5.Dreamweaver CS6的使用–Dreamweaver CS6的安装和配置–Dreamweaver CS6的界面和功能–Dreamweaver CS6的网页设计和制作–Dreamweaver CS6的发布和维护四、教学方法1.讲授：通过课堂讲授、演示和实例等形式，讲解课程内容，引导学生掌握基本知识和技能；2.实践：通过编写网页实例和课后作业等形式，加强学生的动手能力和实践能力；3.课程设计：通过小组或个人课程设计，让学生运用所学知识进行网站设计和制作，培养学生的创新能力和综合能力。

五、教材参考1.《Dreamweaver CS6网页设计与制作教程》2.《HTML与Web设计基础》3.《CSS网站布局基础》4.《JavaScript DOM编程艺术》六、考核方式1.平时成绩：包括作业和实验成绩等；2.期末考试：根据教学计划进行考试；3.课程设计：个人或小组完成网站设计和制作，进行答辩和评分。

网页设计与制作Dreamweaver CS6标准教-ppt课件-03

页中的文字样式。案例知识要点：使用CSS样式改变文本大小、颜色、字体等样式。素材所在位置：光盘/案例素材/ch03/课堂案例 -百货公司。案例效果如图3-33所示。

Dreamweaver基于层叠样式表（CSS）对网页进行设置，即事先定义好文本的CSS样式再应用到文本上。定义的一个CSS样式可以应用在多处文本上，要改变文本样式属性只需修改CSS样式属性。
网页设计与制作 Dreamweaver CS6 标准教程

1. 页面属性 2. 文本属性 3. 项目列表和编号列表

网页页面属性主要包括网页标题、网页背景图像和颜色、网页边距、网页默认文字大小和颜色、超链接颜色等。可以通过菜单【修改】| 【页面属性】来进行设置和修改。

网页标题设置有两种方法。（1）利用【页面属性】对话框选择菜单【修改】|【页面属性】或点击文本【属性】面板中的【页面属性】按钮。单击【页面属性】对话框中【分类】栏中的【标题/编码】，在【标题】文本框中输入页面标题，如图3-22所示，单击【确定】完成设置。（2）在文档工具栏【标题】文本框中，输入页面标题文字完成设置。

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

网页设计与制作Dreamweaver CS6标准教程(微课版第3版)第五章

网页设计与制作Dreamweaver CS6标准教程（微课版第3版）第五章该节介绍了网页设计的基本原则，包括布局、色彩、字体、图片等方面的要点。

该节详细介绍了如何使用Dreamweaver CS6创建网页，包括新建网页、添加文本、插入图片等操作步骤。

该节讲解了如何使用CSS样式来美化网页，包括设置背景色、文本样式、边框效果等。

该节教授了如何创建超链接，包括内部链接和外部链接的创建方法。

该节介绍了如何使用Dreamweaver CS6中的模板和库来快速创建和管理网页。

模板是预先设计好的网页样式和布局，可以用于多个网页。

通过使用模板，您可以避免重复性的工作，节省时间和精力。

在Dreamweaver CS6中，您可以选择现有的模板，也可以自定义创建自己的模板。

本节将向您展示如何使用这些模板。

库是一组可以在不同网页中重复使用的元素或代码片段。

通过使用库，您可以轻松地在多个网页中保持一致的元素和代码。

本节将向您介绍如何创建并使用库。

___:了解如何使用Dreamweaver CS6中的模板创建网页学会创建自定义模板掌握如何使用库在网页中重复使用元素和代码学会创建和管理库5.1 使用模板创建网页Dreamweaver CS6提供了一系列模板供您选择，包括网站模板和文档类型模板。

您可以根据自己的需求选择适合的模板，并进行自定义设置，如网页标题、导航菜单、页脚等。

本节将向您展示如何使用Dreamweaver CS6中的模板创建网页。

5.1.1 选择现有模板Dreamweaver CS6中内置了许多现有的网站和文档类型模板供您使用。

您可以从模板库中选择适合您的模板，并进行进一步的定制。

本节将向您介绍如何选择并使用现有的模板。

5.1.2 创建自定义模板除了使用现有模板外，您还可以创建自己的模板。

自定义模板可以根据您的需求进行设计和设置，并在创建新网页时使用。

创建自定义模板的过程相对复杂一些，但是一旦创建完成，您可以多次重复使用它。

边做边学——Dreamweaver CS6网页设计案例教程(第3版)(共12单元)10

4.隐藏域
隐藏域在网页中不显示，只是将一些必要的信息存储并提交给服务器。插入隐藏域的操作类似于在高级语言中定义和初始化变量，对于初学者而言，不建议使用隐藏域。
若要在表单域中插入隐藏域，先将光标放在表单轮廓内需要插入隐藏域的位置，然后插入隐藏域。
5.单选按钮
为了使单选按钮的布局更加合理，通常采用逐个插入单选按钮的方式。若要在表单域中插入单选按钮，先将光标放在表单轮廓内需要插入单选按钮的位置，然后插入单选按钮。
6.单选按钮组
先将光标放在表单轮廓内需要插入单选按钮组的位置，然后打开“单选按钮组”对话框。
打开“单选按钮组”对话框有以下几种方法。（1）单击“插入”面板“表单”选项卡中的“单选按钮组”按钮。（2）选择“插入 > 表单 > 单选按钮组”命令。
“单选按钮组”对话框
单选按钮
7.复选框为了使复选框的布局更加合理，通常采用逐个插入复选框的方
课堂学习目标
使用表单和文本域应用复选框和单选按钮创建列表和菜单创建文件域和提交按钮行为的使用
10.1 废品回收网页
案例分析设计理念操作步骤相关工具
10.1.1 案例分析
废品回收的顾名思义是一种有偿性的废品处理生活服务，废品回收这项服务对保护环境、节约能源和带动社会效益起着积极的作用。网页设计方面要求体现出绿色环保的概念。
4.打开浏览器窗口
“打开浏览器窗口”动作的功能是在一个新的窗口中打开指定网页。此行为可以指定新窗口的属性、特性和名称，是否可以调整窗口大小，是否具有菜单栏等。
5.转到URL
“转到URL”动作的功能是在当前窗口或指定的框架中打开一个新页。此操作尤其适用于通过一次单击操作更改两个或多个框架的内容。

Dreamweaver CS6网页设计案例教程(微课版)

读书笔记
读书笔记
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的心得。
精彩摘录
精彩摘录
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
作者介绍
同名作者介绍
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，暂无该书作者的介绍。
第10章表单与行为
10.1废品回收页 10.2卫浴页 10.3综合演练——问卷调查页 10.4综合演练——全麦面包页
第11章页代码
11.1设计无忧页 11.2油画艺术馆页 11.3综合演练——机电设备页 11.4综合演练——自行车页
第12章综合设计实训
12.1个人页——张美丽的个人页 12.2游戏娱乐页——娱乐星闻页 12.3旅游休闲页——篮球运动页 12.4房产页——焦点房产页 12.5文化艺术页——书法艺术页
1.1操作界面 1.2创建站框架 1.3管理站点 1.4页文件头设置
第2章文本与文档
2.1轩宇门窗页 2.2休闲旅游页 2.3休闲度假页 2.4综合演练——家居装饰页 2.5综合演练——有机果蔬页 3.1咖啡馆页
第3章图像和多媒体
3.2物流运输页 3.3综合演练——儿童零食页 3.4综合演练——房源页
目录分析
1
文前
2
内容提要
3 第1章初识
Dreamweaver CS6
4
第2章文本与文档
5
第3章图像和多媒体
1
第4章超链接
2
第5章使用表格
3
第6章使用框架
4
第7章使用层

Dreamweaver CS6网页设计立体化教程第2版第3章插入图像和多媒体对象

本实训主要包括添加HTML5动画、插入与编辑图像，以及美化与优化图像等内容，操作思路如下所示。
3.3.2 制作“科技产品”网页
20
1. 实训目标
本实训需要制作“科技产品”网页，科技类产品的功能和概念比较抽象，设计者在制作这类网页时，通常会采用形象的图片和科技产品的使用方法或制作原理视频来具体展现。因此，可通过插入HTML5动画、图像、图像占位符来直观地展示网页中的内容，并编辑图像，最后输入文本。完成后的效果如右图所示。
按钮。打开“锐化”对话框，在“锐化”文本框中输入“5”，单击
按钮即可。
3.1.2 美化与优化图像
8
3. 裁剪图像
选择插入的图像，单击“属性”面板中的“裁剪”按钮，在打开的提示对话框中单击按钮，此时图像上将出现裁剪区域，拖动该区域四周的控制点调整裁剪后保留的图像范围，调整好裁剪范围后按【Enter】键确认裁剪即可。
3.3 项目实训 3.4 课后练习
3.2.1 添加多媒体插件
12
选择【插入】/【媒体】/【插件】菜单命令，打开“选择文件”对话框，选择“bgmusic.mp3”
音乐文件，单击
按钮，选择插入音乐文件后创建的图标，在“属性”面板中将宽度和高度分
别设置为“300”和“45”，保存网页后预览即可看到效果。
行业提示：插入网页图像的注意事项
3
好的设计者应该合理使用各种图像，并灵活运用图像处理技巧。好的网页图像在传达信息和美化页面的同时又不会降低用户的浏览速度。一般来讲，使用图像时首先要注意位置，如网站Logo图像、网站Banner图像，以及网站导航条图像的放置位置等；其次应注重图像的尺寸、清晰度与图像文件大小和下载速度的平衡。掌握以上两点，就能提高设计者使用图像的能力。

Dreamweaver-CS6网页制作第3章

目录
前进
后退
结束
3.2使用Div+CSS制作模板
至此，5个Div标签添加完毕，其中div0是其他4个Div标签的容器，由于已经删掉了其中的文本内容，所以div0在“设计”视图中看不到，如下图所示
目录
前进
后退
结束插入全部Div标签效果图
3.2使用Div+CSS制作模板
步骤五在Div内添加内容
目录
前进
后退
结束 “插入Div标签对话框”
3.2使用Div+CSS制作模板
（5）在div0中的div2下方添加div3。插入Div标签，在“插入”下拉列表框中选择“在标签之后”“<div id=“div2”>”,“ID”组合框中输入“div3” ，新建#div3的CSS规则：“方框”属性中宽度为1000像素。（6）在div0中的div3下方添加div4。插入Div标签，在“插入”下拉列表框中选择“在标签之后”“<div id=“div3”>”,“ID”组合框中输入“div4” ，新建#div4的CSS规则：在“类型”分类中设置文字大小为14像素；在“区块”分类中设置对齐为居中； “方框”分类属性中宽度为1000像素，高度设为28像素，上填充为10 像素，下、左、右填充均为0。
前进
后退
结束 “新建文档”对话框
3.2使用Div+CSS制作模板
（2）单击“创建”按钮，新建一个空白模板页面。单击“文件”�� 所示： “保存”菜单项，弹出对话框，如下图
目录
前进
后退
提示对话框结束
3.2使用Div+CSS制作模板
（3）单击“确认”按钮，打开“另存模板”对话框，选中“悠悠我心的个人网站”站点，在“另存为”文本框中输入模板名称 “modle”，如下图所示，单击“保存”按钮，保存模板。此时 “文件”面板中增加了一个templates文件夹，其中有一个模板文件model.dwt。