《网页设计与制作》第四章：页面设计
网页设计与制作4
网页设计艺术
（2）在现有的表格中插入单元列 将光标移到在插入单元列的右边一列， 将光标移到在插入单元列的右边一列，选 修改” 表格 表格” 插入列 命令。 插入列” 择“修改”|“表格”|“插入列”命令。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，按 组合键“Ctrl+Shift+A”。 组合键“Ctrl+Shift+A 。 将光标移到要插入单元列的右边一列， 将光标移到要插入单元列的右边一列，单 击鼠标右键， 击鼠标右键，在弹出的快捷菜单中选择 表格” 插入列 命令。 插入列” “表格”|“插入列”命令。
网页设计艺术 第四章 网页表格的处理
表格是控制网页页面布局最有力的工具。 使用表格可以对列表数据进行布局，布局 网页文本、图像、媒体等。 通过本章学习应该掌握以下内容: 利用HTML创建和编辑网页表格 利用Dreamweaver MX处理表格
№1
网页设计艺术
4.1 利用Dreamweaver MX处理网页表格 4.2 利用HTML创建和编辑网页表格
№ 14
网页设计艺术
（3）选择多个单元格 选择多个单元格 按住Ctrl键 单击所要选择的所有单元格。 按住Ctrl键，单击所要选择的所有单元格。 Ctrl 将光标置于单元格中，拖动鼠标， 将光标置于单元格中，拖动鼠标，选择多 个单元格。 个单元格。 如果要选择整行， 如果要选择整行，将光标置于该行的左边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。 如果要选择整列， 如果要选择整列，将光标置于该列的上边 图标时单击鼠标左键。 缘，当光标变成 图标时单击鼠标左键。
№ 19
网页设计艺术
删除整行/ （4）删除整行/整列 先选择欲删除的整行或整列，直接按Del 先选择欲删除的整行或整列，直接按Del 即可删除。 键，即可删除。 先将光标移到要删除的行或列中， 先将光标移到要删除的行或列中，选择 修改” 表格 表格” 删除行 删除行” 删除列” “修改”|“表格”|“删除行”或“删除列” 命令。 命令。 将光标移到要删除的行或列中， 将光标移到要删除的行或列中，单击鼠标 右键，在弹出的快捷菜单中选择“表 右键，在弹出的快捷菜单中选择“ 删除行” 删除列”命令。 格”|“删除行”或“删除列”命令。 删除行
网页设计与制作第四章
（3）定义CSS样式的区块属性
在CSS样式定义对话框中的“分类”列表中选择 “区块”选项，设置CSS样式的“区块”属性， 包括单词间距、字母间距、对齐方式、文字缩进 等内容。
（4）定义CSS样式的方框属性
在CSS样式定义对话框中的“分类”列表中选择 “方框”选项，设置CSS样式的“方框”属性 。
4.1 CSS样式 样式
一.使用CSS样式面板 使用CSS样式面板 CSS
使用Dreamweaver MX 2004的CSS样式面板可以创建和管 理CSS样式。用下面的方法之一可以打开CSS样式面板： （1）选择命令“窗口”→“CSS样式”。 （2）单击“设计”面板上的小三 角形将 “设计”面板展开，选择 样 面板上的“CSS样式”标签。 式 面 （3）使用快捷键“Shift+F11” 板
二.模板的编辑 模板的编辑
1．编辑页面共用部分
（1）打开模板面板，然后 在模板面板的列表中选中 要修改的模板，单击“编 辑”按钮，或双击已有模 板名将模板打开； （2）编辑页面共用部分
2．定义可编辑区域
（1）将光标放在表格右边单元格中，单击鼠标右键 选择“模板”→“新建可编辑区域”，出现新建 可编辑区域对话框，为该区域输入一个名称；
4.2 模板
模板的创建 模板的编辑
模板
在一个网站中，有大量的网页具有相同的格式， 我们可以创建一个网页样本，在此样本中包含有 可编辑区域和不可编辑区域。不可编辑区域的内
模板 容是固定的，通常为标记、图标、导航栏目，而
可编辑区域内容是可变的，这就是模板。使用模 板可以大大提高制作网页的效率。
一、模板的创建
CSS 图
二.新建和编辑CSS样式 新建和编辑CSS样式 CSS 1.新建CSS样式 2.设置CSS样式定义对话框参数 3.编辑CSS样式表
网页设计与制作教程
网页设计与制作教程网页设计与制作是一门很有趣的技术，可以通过学习和实践来掌握。
下面将为大家分享一些关于网页设计与制作的教程。
第一步：准备工作在进行网页设计与制作之前，首先要做好准备工作。
这包括确定网页的主题和目标，以及收集所需的素材和资源。
可以通过调研、分析竞争对手和用户需求来确定网页的主题和目标。
同时，也要收集所需的图片、文字和其他媒体资源。
第二步：规划网页结构在进行网页设计与制作之前，需要规划网页的结构。
这可以通过制作网页原型来实现。
网页原型是网页的草图，可以用纸笔或专门的原型工具来制作。
在制作网页原型时，要考虑网页的布局、导航和内容组织。
第三步：选择合适的设计风格选择合适的设计风格是网页设计与制作的重要一步。
可以根据网页的主题和目标来选择适合的设计风格。
常见的设计风格包括简约风格、扁平化风格和材料设计风格等。
在选择设计风格时，要考虑网页的整体风格和用户体验。
第四步：设计网页布局设计网页布局是网页设计与制作的核心环节。
可以使用设计软件或代码来实现网页布局。
要注意网页的整体结构和各个部分的排列。
可以使用网格系统来实现网页布局，使网页看起来更加整齐和美观。
第五步：添加内容和媒体在设计网页布局之后，可以开始添加内容和媒体。
这包括文字、图片、音频和视频等。
在添加内容和媒体时，要注意选择合适的字体、颜色和大小，并保持整体风格的一致性。
同时，也要考虑内容的可读性和媒体的加载速度。
第六步：优化网页性能优化网页性能是网页设计与制作的重要一环。
可以通过压缩图片、合并脚本和样式表、使用缓存等技术来提升网页的加载速度。
还可以进行网页的优化测试，找出并解决性能问题。
第七步：测试和发布网页在完成网页设计与制作之后，要进行测试和发布。
可以在不同的浏览器和设备上进行测试，确保网页在各种环境下正常显示和运行。
测试通过后，可以将网页发布到线上服务器，并进行必要的优化和维护工作。
综上所述，网页设计与制作需要经过一系列的步骤，包括准备工作、规划网页结构、选择设计风格、设计网页布局、添加内容和媒体、优化网页性能、测试和发布网页。
《网页设计与制作》第4章课件
如何实现窗口间的关联3-1
如何实现左列导 航，在右面显示 相关页面？
使用<a>标签的target目标窗口属性
如何实现窗口间的关联3-2
实现窗口间关联的步骤 1、设置窗口名（框架主页）
设置右窗口名为： rightFrame
…… <frameset rows="20%,*" frameborder="0"> ... ... <frame src="subframe/right.html" name="rightFrame"> ... ... </frameset> ……
操作演示：iframe常用属性
练习——引用google主页
需求说明：
根据提供的素材实现
引用Google主页
练习——<iframe>实现页面复用
需求说明：
根据提供的素材实现
总结2-1
框架的基本语法？ 如何实现2行2列的典型框架？
如何实现窗口间关联？
内嵌框架的语法？
……
<body> <iframe src="" width="400px" height="236px" frameborder="1" scrolling="no" > <iframe/>
引用站内页面 <iframe src="subframe/the_second.html" width="400px" height="236px" scrolling="no" > <iframe/> </body> …… 引用站外页面： sohu
网页设计与制作第4章PPT课件
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流，下表列出了当前Audio元素支持的3种音频格式及其所适用 的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站 点文件夹，在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。 Flash回退：用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。 将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打 开“选择文件”对话框。 在对话框的文件列表中选择要 插入的文件“cj.mp3”，并单 击“确定”按钮，插入插件， 如右图所示。
第4章网页设计与制作
3
4
• 在设计网页时，可以直接绘制表格，也可以导入表格数 据，并将其转化为表格。
• 表格是网页中对文本和图像布局的强有力的工具。一个 表格通常由行、列和单元格组成，每行由一个或多个单 元格组成。表格中的横向称为行，纵向称为列，一行与 一列相交所产生的区域则称为单元格。要将相关数据有 序地组织在一起，必须先插入表格，然后才能有效组织 数据。 • 绘制表格的具体操作步骤如下： • （1）在“文档”窗口的“设计”视图中，将插入点放在 需要表格出现的位置。 • 提示： 如果您的文档是空白的，则只能将插入点放置在 文档的开头。
18
4.2.5设置表格边框
• 表格中的一些效果是通过设置表格边框的属性来实 现的，对于表格边框，可以设置它的粗细和颜色。
• 1）边框的粗细
• 在表格【属性】面板上的“边框”问半框用来设置 表格边框的粗细，默认情况下设置为1，即如果没有 明确指定边框的值，则大多数浏览器按边框值为1的 设置显示表格。通过改变该文本框中的数值，可以 调整表格边框的粗细。如下图所示为分别将表格的 边框设置为0、1和10的效果。
5
• （2）通过以下几种方法启用【表格】对话框。 • 在菜单栏中选择【插入】→【表格】命令。 • 在【插入】面板的【常用】模式中，单击【表格】按钮 。 • 弹出【表格】对话框，如图所示。其中，各选项的含义如 下：
6
• 行数：确定表格行的数目。
• 列数：确定表格列的数目。 • 表格宽度：以像素为单位或按占浏览器窗口宽度的百分 比指定表格的宽度。 • 边框粗细：指定表格边框的宽度（以像素为单位）。 • 单元格间距：决定相邻的表格单元格之间的像素数。如 果没有明确指定边框粗细或单元格间距和单元格边距的 值，则大多数浏览器都按边框粗细和单元格边距设置为 1 、单元格间距设置为 2 来显示表格。若要确保浏览器显 示表格时不显示边距或间距，请将“单元格边距”和“ 单元格间距”设置为 0。 • 单元格边距：确定单元格边框与单元格内容之间的像素 数。
《网页设计与制作》模块4图文模板
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
9、图片格式为JPEG，它就是JPG，一样的。关键是品质的设定，我们都 知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品 质设的越小，它的大小就越小，但是如果品质太差，图片会变模糊，所 以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较 小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求， 试试就知道了。这里有个问题是你只是对其中一个切片设置品质，其他 切片又要重新设置，所以存的时候最好检查一下。
模块4：网页切图
学习导入
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
在本模块中着重介绍切片工具、切片选择工具在切图面 方面的应用，通过讲解一个简单的例子，掌握切图的方法和技巧
模块4：网页切图
学习目标
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
图4-10
图4-
10、前面设置好后点击存储会显示以上界面。格式选11项选择HTML和图
像，默认是图像的，这样我们就能得到网页代码了。
模块4：网页切图
任务评价
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结 备知
11、保存后得到一个图片文件夹和一个网页，你看到的网页图标可 能与4-12不一样，这个没有关系，因为浏览器不一样。
日期：
60%
模块4：网页切图
任务总结
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
《网页设计与制作》页面设计免费学技术改变生活
框架与框架集的概念
• 用框架布局网页时有如下的技巧和规则：
• • 创建好框架或框架集后可对其属性进行设置。 每个框架就是不同的HTML网页，我们需要
26
分别保存每个框架文件和框架集文件。
• 确保文件中的每个链接都正确。
使用框架布局
框架集网页
1.创建一个新的框架集网页
创建框架网页前先要让框架边框显示。在“文档” 工具栏的最右边单击视图选项按钮 在弹出的菜单中选择“可视化助理”→“框架边 框”，使得框架边框被选中。
多个层的大小调整
47
• 选择需调整大小的多个层，然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令，则所有选择的层 将设置为最后选择层的宽度或高度，也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值，再按Enter键， 选择的所有层将调整为设定的大小。
设置层的属性
44
层的大小调整
• 在网页制作过程中，通常创建的层大小都 不符合要求，需对其进行大小的调整。单 个层和多个层调整大小的方法不相同。
45
单个层的大小调整
46
• 调整单个层大小只需进行如下任一操作即可： • 选择层，在“属性”面板的“宽”、“高”文本 框中输入所需的宽度和高度值，再按Enter键。 • 将光标移至层的边缘，将其拖动到所需大小后释 放鼠标。 • 按住Ctrl键再按键盘上的方向键，可以移动层的 右边框和下边框，每次调整1个像素的大小；按 住Shift+Ctrl键的同时再按键盘上的方向键可每次 调整10个像素的大小。
58
重定义标签的外观 新建样式——选择器类型——标签 使用类定义样式 新建CSS样式——选择器类型——类 使用伪类定义超级链接的样式 新建CSS样式——选择器类型——高级 a:link、a:visited、a:hover、a:active
页面布局设计
4.3 使用表格排版
表格是由一些被线条分开的单元格组成。线条即表格的边 框，被边框分开的区域被称为单元格，数据、文字、图像 等网页元素均可根据需要放置在相应的单元格中。如图所 示。
在网页中使用表格一般有两种情况：一种是在需要组织数 据显示时用；另一种是在布局网页时用。当表格被用作布 局时，需要对表格的属性进行设置。
步骤2 单击“绘制布局单元格”按钮，鼠标在页面 上变为“+”形，按下鼠标左键拖动可绘制布局单元格。
4.3.4 在布局模式下插入表格和单元格
如图所示：
4.3.5 表格排版实例的制作过程
本小节讲解【例4.1】利用表格进行网页布局的制作过程。 作为专业的设计者，首先利用图形制作软件如： Fireworks、Photoshop等，绘制一张网页草图，然后根 据网页草图利用表格对网页进行排版。
在布局模式下，使用表格进行布局具有定位简单、容 易调整等优点。例如：在布局模式中可以在页面上方便地 绘制布局单元格，可将这些单元格拖动到所需的位置；还 可以方便地创建固定宽度的布局或自动伸展为整个浏览器 窗口宽度的布局。
4.3.4 在布局模式下插入表格和单元格
1、绘制布局表格与布局单元格 首先从标准模式切换到布局模式：单击“插入”栏｜
4.4 使用层排版
除了表格以外，层是另外一种定位网页元素的方法。本 节介绍层的概念和操作，并通过一个实例说明如何利用层 进行页面布局的设计。
4.4.1 实例导入：层排版网页
Dreamweaver中的层是一种网页元素定位技术，它可 以包含文字、图像、表格、插件甚至其它层。一个网页中 可以含有多个层，层的特点在于各个层之间可以重叠，并 可以决定每个层是否可见，还可以定义各个层之间的层次 关系。层可以转换成表格，通过与“时间轴”及行为的结 合，能够实现动态交互效果。
网页设计与制作 第4章 网页特效设计
Step3
4.1
使用Spry框架构件
Step2
输入标签对应的内容。我们可以在“数字传媒系”中输入文本、图像、 表格、超链接等网页元素。在第二步的基础上，在标签“软件工程系”对应的内容 中输入“软件开发专业、对日软件专业、移动软件专业”，在标签“数字传媒系” 对应的内容中输入“动漫设计与制作专业、图形图像制作专业、计算机多媒体专 业”，依此类推，在其它选项卡中也输入相应的专业名称。
Step1
4.1
使用Spry框架构件
4.1.3 使用Spry选项卡式面板构件 编辑选项卡式面板构件。在文件窗口中单击“Spry选项卡式面板”构件 上方的蓝色选择柄，就可以选中该构件。此时在Dreamweaver的属性面板中可设置 折叠式构建的属性“参数”。单击面板右侧的“+”和“-”可以增加或删除标签；选 中相应的标签，单击面板右侧的箭头可以设置各标签的顺序。在属性面板中单击 “+”将标签的数量增加到7个，并在文件窗口中修改标签分别分：“软件工程系”、 “网络工程系”、“数字传媒系”、“智能工程系”、“信息工程系”、“经济管 理系”、“社会科学系”。
Spry在英语中是“充满生气的、活泼的、敏捷的”意思，Spry框架 是一个JavaScript和CSS库，网页设计者使用Spry框架构建能够 向站点访问者提供更丰富体验的网页。Spry框架中的每个构件都 与唯一的CSS和JavaScript文件相关联。通过在网页中插入Spry 4.1HTML、CSS和JavaScript将数据合并 框架，网页设计者可以使用 到HTML文档中，向各种不同页面元素添加不同的效果。在Drea mweaver中使用Spry框架，Dreamweaver会自动将这些文件进 行关联，通过Dreamweaver属性栏设置Spry的相关参数，实现可 视化编程。
网页设计与制作课件第4章
Firefox 3.5+
No 4.0+
Opera 10.5+
No 10.6+
Chrome 5.0+
5.0+ 6.0+
Safari No
3.0+ No
Ogg
MPEG 4 WebM
项目四 为网页设置音视频和超链接
16
二、为网页设置背景音乐
步骤 01 步骤 02 步骤 03
打开要添加背景音乐的网页，此处打开“blog”站点中的“bowen1.html”。 将插入点定位在网页最下方，单击“插入”面板“HTML”类别中的“HTML 5 Audio”，插
接对象的相对路径；也可以通过单击“链接”编辑框右侧的“浏览文件”按钮 ，在弹出的“选 择文件”对话框中选择链接对象。
步骤 01
打开站点“blog”根目录下的网页文档 “index.html”，选中导航栏中的文本
“乐曲欣赏”，单击“属性”面板上
“链接”编辑框右侧的“浏览文件”按 钮，如右图所示。
项目Байду номын сангаас 为网页设置音视频和超链接
IE 9 Ogg Vorbis MP3 Wav √
Firefox 3.5 √
Opera 10.5 √
Chrome 3.0 √ √
Safari 3.0
√ √
√
√
项目四 为网页设置音视频和超链接
15
HTML 5提供了展示视频的标准，当前Video元素支持的视频格式及其适用的浏览器如下表所示。
格式
IE 9 No
如右图所示。
项目四 为网页设置音视频和超链接 29
步骤 03
单击其中的“矩形热点工具” ，然后移动鼠标到所选图像上“more>>”所在区域，单 击鼠标左键并拖动，绘制一个矩形区域，如下图所示。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。
《网页设计与制作》课程标准
《网页设计与制作》课程标准《网页设计与制作》课程标准前言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用，一、课程的说明：通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。
为今后从事网页设计与制作、网站开发和管理奠定基础。
在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。
二、课程内容与基本要求：该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：网页设计开发岗位职业能力教学内容（理实一体化课）基本开发工具的使用网页基本概念（第1章）DW CS6软件介绍（第2章）建立与管理站点（第3章）网页基本元素的处理制作主要内容为文本的网页（第4章）插入与编辑图像（第5章）插入多媒体元素（第6章）创建超级链接（第7章）HTML基础（第13章）网页布局表格处理与网页布局（第6章）AP Div的应用（第9章）使用CSS+DIV布局网页（第11章）网页美化CSS样式表（第10章）网页交互行为（第12章）动态网页基础（第15章）网页及元素的复用创建和使用模板（第9章）创建和使用库（第10章）网页与网站基本概念、网页基本组成元素、常用网页制作软件主要教学内容：1.1 网页制作基础知识1.2 网页的基本构成元素1.3 网页制作常用软件和技术第二章Dreamweaver CS6轻松入门（2学时）教学目标：DW CS6软件的安装、用DW建立网页的方法、打开和保存网页的方法主要教学内容：2.1 Dreamweaver CS6工作环境2.2 [插入]栏2.3 Dreamweaver CS6新功能第三章站点的搭建与管理（4学时）教学目标：本地站点与远程站点的概念、站点文件夹的管理主要教学内容：3.1 创建本地站点3.2 管理点站3.3 管理站点中的文件4.3 使用站点地图第四章网站建设规范和基本流程（2学时）教学目标：IIS信息服务器的搭建与管理、建立、发布主页、建立和管理站点主要教学内容：4.1 网站建设规范4.2 网站建设的基本流程第五章创建结构清晰的文本网页（6学时）教学目标：1. 在网页中添加文字和字符2. 使用背景、列表美化文本网页主要教学内容：5.1 设置文本属性5.2 插入其他元素5.3 创建项目列表和编号列表5.4 插入网页头部内容5.5 综合案例-创建基本文本网页第六章创建绚丽多彩的图像和多媒体网页（6学时）教学目标：1. 了解网页中常用的图像格式2. 网页中插入图像的方法3. 网页中插入多媒体的方法主要教学内容：6.1 网页中常用的图像格式6.2 编辑图像6.3 插入多媒体6.4 综合案例-创建图文混排网页第七章创建超级链接（6学时）教学目标：超级链接的概念、文字与网页间的链接、图片热点和锚记主要教学内容：7.1 超级链接的基本概念7.2 创建超级链接的方法7.3 创建各种类型的链接7.4 管理超链接7.5 综合实例第八章使用表格排版网页（6学时）教学目标：1. 表格的编辑处理2. 用表格制作网页元素主要教学内容：8.1 创建表格8.2 设置表格及其元素属性8.3 表格的基础操作8.4 表格的基本应用8.5 综合实例-利用表格排版网页第九章使用DIV和Spry灵活布局网页（4学时）教学目标：1. AP Div的创建2. 在AP Div中插入网页元素3. 设置AP Div的属性主要教学内容：9.1 插入AP Div9.2 设置AP Div属性9.3 使用Spry布局对象第十章使用CSS修饰美化网页（6学时）教学目标：1、CSS样式表的类型2、CSS样式表的创建3、不同样式表的样式应用主要教学内容：10.1 CSS简介10.2 使用CSS10.3 设置CSS样式10.4 CSS滤镜设计特效文字10.5 综合实例第11章CSS+DIV布局方法（6学时）教学目标：盒子模型概念、CSS布局理念、常见布局类型主要教学内容：11.1 初识DIV11.2 CSS定位11.3 CSS布局理念11.4 常见的布局类型第12章使用模板和库提高网页制作效率（6学）教学目标：了解模型的库的概念，会使用库创建项目主要教学内容：12.1 创建模板12.2 使用模板12.3 管理模板12.4 创建和应用库项目第13章使用行为和动作为网页添加活力（6学时）教学目标：重点区分行为、触发事件、动作、对象等概念和区别主要教学内容：13.1 行为的概念13.2 行为的动作和事件13.3 使用Dreamweaver内置行为第14章网站页面布局设计与色彩搭配（2学时）教学目标：网页色彩搭配知识、常见页面版式主要教学内容：14.1 网页版面布局设计14.2 常见版面布局形式14.3 网页色彩搭配知识第15章用表单创建交互式网页（6学时）教学目标：表单的基本概念、常用表单元素的插入方法主要教学内容：15.1 表单概述15.2 创建表单域15.3 插入文本域15.4 复选框和单选按钮15.5 列表和菜单15.6 跳转菜单的使用15.7 使用按钮激活表单15.8 使用隐藏域和文件域15.9 综合案例五、课程实施条件本课程需要一间高性能联网的计算机实训室，需满足每位学生一台电脑。
《网页设计与制作》第04章
• 步骤4：拖动鼠标在页面上绘制出所需要的表格，即可完成布
局模式的创建。布局表格为浅绿色，上面带有布局表格的标签 和列标题栏。在列标题栏上显示着每列的宽度，单击列标题栏 可以打开列标题菜单。
• 步骤5：绘制完布局表格和单元格后，系统会自动生成表格。
• 2. 设置表格属性
如果需要查看表格的属性，可以选中表格，弹出表格属性 面板。
• 表格属性面板参数说明： • 表格Id：表格名称，用于脚本语言中的引用。 • 行、列：表格的行与列。可输入数值改变表格的行数和列数。 • 宽、高：表格的宽与高。可输入数值改变表格的宽与高，单位
有百分比和像素。
• 填充：单元格边框相对于单元格内容的距离。 • 间距：表格内单元格之间的距离。 • 对齐：可以设置表格水平对齐方式，包括默认、左对齐、居中
动到适当的位置。
4.2.3 重设布局表格和单元格的大小
• 步骤1：打开buju.htm，切换到布局模式下。 • 步骤2：选中要调整的布局表格，出现控制点，用鼠标
拖动控制点，调整布局表格的大小。
• 步骤3：选中要调整的布局单元格，出现控制点，用鼠
标拖动控制点，调整布局表格的大小。
4.2.4 清除单元格高度
击“插入”按钮。
• 步骤3：在“标签编辑器-Iframe”对话框中，根据面板提示
操作。最基本的两项是“源”和“名称”。
• 步骤4：设置链接在某个iframe中打开。选中链接，在属性
面板中的“目标”项，手工输入目标iframe的名称。
• 步骤5：iframe透明。为了使iframe内容和网页背景相同，
择链接的文档应在其中显示的框架或窗口。
网页设计与制作教学大纲
《网页设计与制作》教学大纲第一部分大纲说明一、课程的性质和任务：《网页设计与制作》是一门操作性和实践性很强的课程,为网络专业和计算机相关专业的必修课。
本课程的主要内容包括了网页编辑与制作软件Dreamweaver MX建站的全过程。
教材体现网页制作技术的的特点，注重实用性和操作性,综合讲述了网页制作中的网页编辑、Web图像制作以及网页中动画设计的基本概念和基本操作技能。
书中文字叙述简单明了、通俗易懂。
按照Macromidia公司出品的网页制作系列软件的系统内容，由浅入深、循序渐进，符合学习者的认知规律。
书中列举了部分实例，各章都编排了适量的习题、思考题，以使学生更好地理解和掌握书中所讲述的内容。
二、培养目标：结业后能独立完成公司或个人主页的制作、维护、站点管理、设计制作精美的网页，能够更好地把企业通过互联网推向全球，并通过考试可获得网页设计师相关证书。
三、授课对象：高职高专类网络专业和计算机相关专业四、课程的特点和教学基本要求课程在重点介绍网页设计软件Dreamweaver MX的操作与应用的基础上，通过大量实例和光盘教学素材，详细地阐述了网页设计软件的应用技巧，使学生在学习过程中得以融会贯通，掌握网页设计软件的高级应用。
同时，授课过程中将始终遵循“用户界面感受第一”的基本原则，教导学生在策划、设计过程中设身处地为用户着想，让创意为用户服务，培养学生独立思考、独立创作的良好学习习惯，为学生成为一名优秀的网页设计师打下坚实的基础。
课程设置的根本思路是为使学生能够最大程度满足企业对于网页设计人员的需求，达到学以致用的目的，从而为企业培养优秀的网页设计实用人才。
五、课程教学要求的层次1、掌握：在网页文档中添加文本和文本的格式化方法、插入日期和时间、插入水平线、设置网页的属性等操作方法。
在Dreamweaver MX中使用的图像格式、在网页文档中插入图像、为页面背景添加图像、图像属性的设置、图像与文本的混合排版、设置图像的位置和边框、设置图像的缩略图的操作方法，会使用图像编辑器，会在网页中插入翻转图像和导航条的操作、表格的组成和基本操作方法及创建表格、表格操作、表格编辑的方法、表格和单元格的属性设置，会用表格组织网页的总体布局，掌握使用布局视图布局页面的总体布局。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
36
层的基本操作
• 对层可进行选择、移动、调整大小和对齐 等操作，这些操作大多数都可在“层”面 板中进行。
37
返回
层的基本操作
• • • • • • 显示“层”面板 层的选择 层的拖动 层的对齐 层的大小调整 应用举例——利用层布局页面
38
返回
显示“层”面板
• 选择“窗口/层”命令或按F2键显示“层” 面板，“层”面板用于对层进行管理和操 作。 • 当前网页中的层都会显示在“层”面板的 列表中，嵌套层以树状结构显示。
改”→“转换”→“表格到层”打开转换表格为层 对话框。
返回
使用层实现图文混排1
使光标出现在编辑区中，移动鼠标指针到“ 插入”面板的“常用”选项卡中，单击描绘层 按钮。在网页编辑区中拖动鼠标，画出一个区 域，该区域即为插入层的大小。
注意，每插 入一个新层，在 网页顶端就会增 加一个层标记，
51
返回
使用层实现图文混排2
返回
多个层的大小调整
47
• 选择需调整大小的多个层，然后选择“修 改/对齐”菜单中的“设成宽度相同”或 “设成高度相同”命令，则所有选择的层 将设置为最后选择层的宽度或高度，也可 在“属性”面板的“宽”、“高”文本框 中输入所需的宽度和高度值，再按Enter键， 选择的所有层将调整为设定的大小。
返回
34
返回
35
返回
层的使用
在网页中插入层
1.新建一个层
（1）打开要创建层的网页。 （2）将“插入”工具栏切换到“布局”模式。 （3）单击描绘层按钮 鼠标移动到编辑窗口时变成十字形状，可以在 网页中的任意位置拖动绘制一个层的边框。 （4）在层的边框中可以插入各种网页元素，如文 字、图片、表格等。
返回
META设置自定义的一组网页属性的描述。
8
2.关键字
关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。
3.描述
设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。 返回
文件头设置
4.刷新
刷新定义网也调入后延迟一段时间的动作
9
5.基础
设置网页的基准地址
返回
框架与框架集的概念
• 用框架布局网页时有如下的技巧和规则：
• • 创建好框架或框架集后可对其属性进行设置。 每个框架就是不同的HTML网页，我们需要
26
分别保存每个框架文件和框架集文件。
• 确保文件中的每个链接都正确。
返回
使用框架布局
框架集网页
1.创建一个新的框架集网页
创建框架网页前先要让框架边框显示。在“文档” 工具栏的最右边单击视图选项按钮 在弹出的菜单中选择“可视化助理”→“框架边 框”，使得框架边框被选中。
27
返回
28
创建一个新的框架集网页的方法
保存设置框架集 编辑框架结构
返回
父框架和子框架
该图的框架就是先分成上下框架，再把下框架分成左右 框架。一般把下框架称为左右框架的父框架，则左右框架 是下框架的子框架。
29
右下框架占最大的区域，用来显示主要的网页内容，称 为主框架。
返回
设置框架与框架集的属性
设置层的属性
在网页中的层的边框上单击可选中这个层，设
48
置其属性。
拖动边框上的8个控制点可改变层的大小。将鼠标 放在层边框上除控制点的其他位置，此时鼠标变成十 字箭头形状，拖动鼠标可移动层的位置。
返回
层的叠加和嵌套
1.层的叠加
使用菜单“窗口”→“层”打开层面板组 。
49
2.层的嵌套
在一个已有的层中描绘新层时按住[Alt]键可绘制
返回
使用扩展模式布局
在工具栏上单击扩展表格模式按钮，既可切换到 “扩展表格模式” 。
扩展模式下并不是所见即所得的效果，最好不要在 单元格中添加内容，只进行页面设计操作。
21
返回
使用布局模式布局
用表格布局的页面，往往给人一种过于整齐的排列 效果，而使用“布局模式”，则可以是网页中的元素快 速、灵活地定位。 在“插入”工具栏单击“布局”按钮，进入布局模 式。
返回
58
重定义标签的外观 新建样式——选择器类型——标签 使用类定义样式 新建CSS样式——选择器类型——类 使用伪类定义超级链接的样式 新建CSS样式——选择器类型——高级 a:link、a:visited、a:hover、a:active
22
返回
使用布局模式布局
绘制布局表格
绘制布局单元格
23
返回
使用框架布局
一个实例：
24
返回
框架与框架集的概念
25
• 单个框架是指在网页上定义的一个区域， 而框架集则记录了同一网页上多个框架的 布局、链接和属性信息。 • 利用框架可以把浏览器窗口划分为多个区 域，每个区域可以添加任意网页元素，也 可分别显示不同的网页。 • 框架集与框架之间的关系是包含与被包含 的关系，多个框架就组成了框架集，框架 集包含了框架1、框架2和框架3共3个框架。
33
_top：目标网页的内容在最顶层框架窗口中显示。
2.设置网页的缺省显示区域 使用菜单“插入”“HTML”“文件头标签”“基
础”，打开“基础”对话框，在目标中可选择此网页 中超链接的默认显示窗口。Href中设置默认查找的网 络路径。
返回
一个实例
利用框架为“书香盈袖”网页布局页面，
并为其添加网页元素。
6.链接
链接用于设置需要链接的CSS等外部文件的地址和类型。
返回
网页布局实例1
10
返回
网页布局实例2
11
返回
网页布局实例3
12
标题正文型结构的顶端是网站标识和标题 ，下面是网页正文。内容非常简单。
返回
网页布局实例4
13
返回
网页布局实例5
14
返回
网页布局实例6
15
返回
16
网页的版面布局
页面设计
南海学院计算机系制作
网页的风格1
2
“搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。
返回
网页的风格2
3
微软中国的主页，内容比较专一，内容非 常有条理，栏目突出，没有凌乱的感觉。
返回
网页的风格3
4
“黑白音乐” 是一个个人主页，它看起来 更简单，色彩也不够丰富，但感觉非常清新。
返回
CSS的作用
54
（1）将格式和结构分离
（2）更容易控制页面的布局 （3）可以制作出体积更小下载更快的网页 （4）可以更快更容易地维护及更新大量的网页
（5）良好的浏览器兼容性
返回
• • • • • • • • •
编辑——首选参数——常规——使用CSS 实例1 第一段文字大小24，颜色红色。 第2段文字设置为大小12，颜色绿色，加 粗。 选中第3段文字，大小style1 选中第4段文字，大小style2 对style1进行重命名，名称为redbig 试删除一个样式 选中一个样式，将其加上背景。
返回
52
使用CSS
CSS基础
1.什么是CSS
CSS（Cascading Style sheet）是1996年出现的有关 网页制作的技术，中文叫做级联风格页或层叠样式表。 使用CSS定义的网页风格可以控制HTML语言标志的一 些诸如字体、边框、颜色与背景等属性，也可以通过定
53
义外部风格文件实现整个网站页面风格的统一。
重复上述操作，再次插入两个新层。这样 在该单元格中共插入三个层，我们将图片移到 在左上方的层中，文字移到右上方和下面的层 中。 单击该标记可以选中其所对应的层。单击层 的外围框线，选中层。将鼠标指针移动到框线 上，拖动鼠标，更改层的大小为图像大小。 调整文字的字 号和字体 ，以 及层的位置， 实现图文混排 。
设置框架属性
设置框架集属性
30
返回
设置框架属性
“框架名称”文本框
“源文件”文本框
31
“滚动”下拉列表框
复选框 “边框”下拉列表框 “边框颜色”下拉列表框 “边界宽度”文本框 “边界高度”文本框
返回
设置框架集属性
选择需设置属性的框架集。
框架集“属性”面板中各设置参数含义和
39
返回
层的选择
• 要对层进行操作和设置需先将其选择，单 个层和多个层的选择方法不同。
40
返回
1．单个层的选择
• 选择单个层有如下几种方法：
• • • • 单击所需层的边框。 在“层”面板中单击所需层的名称。 按住Shift+Ctrl键在所需层中单击。 选择层后，在“层”面板中会以反白方式显示该 层名称。
1.确定显示分辨率
（1）T型结构布局
2.版面布局的模式
（2）口型布局
（3）三型布局
（4）对称对比布局 （5）POP布局 返回
画出网页布局草图
标题 图片栏
17
链接文 字区
主要内容区
网站版权信息区
返回
表格布局
1个实例
使用表格对课本74页的网页进行布局。
18
返回
操作步骤
• （1） 插入一个3行1列的表格a。a 760×420 边框为0，填充、间距为0，对 齐方式居中。 • （2） 在表格a的第3行插入1条水平线， 宽度为70％。居中。文字 • （3） 在表格a的第1行中插入1个2行1列 的表格b。宽度100％。其余0 • （4） 在表格b的第1行插入一个1行2列 的表格c。宽度100％。
44
返回
层的大小调整
• 在网页制作过程中，通常创建的层大小都 不符合要求，需对其进行大小的调整。单 个层和多个层调整大小的方法不相同。