Dreamweaver实例视频教程之网页设计与制作100例
《Dreamweaver网页制作案例教程》(黄世吉)377-9课件 项目九
2．设置模板内容
此处的模板内容主要指文档中不可编辑区域部分的 内容（具体操作见视频1-1-2）。
3．设置可编辑区域
本节要制作的可编辑区域不同于以往的类型，需要 使用嵌入式框架来实现（具体操作见视频1-1-3）。
二、应用模板创建网站主页
创建网站主页主要是制作可编辑区域（此处就是嵌 入式框架）中的内容。本节我们首先来制作一个简 单的网页，然后将其设置为嵌入式框架的起始页， 便完成了主页的创建（具体操作见视频1-2）。
实施步骤
一、定义“top”和“bottom”库项目
在学习了库项目的相关知识后，下面来制作一个使用 库项目制作的个人网站——幸福一家。本节首先来制 作网站要用到的两个库项目“top”和“bottom”（具 体操作见视频2-1）。
二、应用库项目创建“心情日记”网页
在创建了“top”和“bottom”库项目后，本节我们就 应用它们来制作网站子页——心情日记（具体操作见 视频2-2）。
项目九 制作个人网站 ——应用模板和库
创建“梦幻花园”首页——应用模板 创建“幸福一家”网页——应用库项目
任务一 创建“梦幻花园”首页——应用模 板 相关知识
一、创建并保存模板文档
创建模板文档的方法 有两种。一种是新建 空白模板文档，然后 像制作普通网页一样 制作和编辑模板内容 ；还有一种是将普通 网页另存为模板。本 节讲解如何将普通网 页另存为模板。
选择“修改 ”>“库”>“增 加对象到库” 菜单，打开提 示框
三、应用库项目
应用库项目的方法非常简单，只需在“资源”面板的 库窗口中将其拖入到文档的适当位置即可。此外，也 可在定位插入点后，选中库中的项目并单击“资源” 面板底部的“插入”按钮，将库项目插入到文档中。
《网页设计与制作案例实战教程》-教案
网页设计与制作案例实战教程教案第1章网页设计基础1.收集不同汽车网页并分析其特点,如图为比亚迪官方网站首页。
2.收集不同手机网页并分析其特点,如图为华为官方网站首页。
第2章 Dreamweaver入门操作件。
小结熟悉Dreamweaver 的工作界面掌握站点的创建与管理掌握文档的基础操作课后练习1.酷乐冰屋根据所学内容制作酷乐冰屋网页。
2.哎呀宠物根据所学内容制作哎呀宠物网页。
第3章 HTML知识准备1.微著齿轮根据所学内容制作微著齿轮网页。
2.闪电速运根据所学内容制作闪电速运网页。
第4章页面与文本第5章图像与多媒体元素1.美相图片根据所学内容制作美相图片网页。
2.赛克音乐根据所学内容制作赛克音乐网页。
第6章超链接的应用第7章使用表格布局网页1.倏尔鲜花根据所学内容制作倏尔鲜花网页。
2.卓越办公根据所学内容制作卓越办公登录页。
第8章 CSS网页美化技术根据所学内容美化瑞成文具网页，前后对比效果如图。
根据所学内容美化玩偶之家网页，前后对比效果如图。
第9章 Div+CSS网页布局技术掌握CSS与Div布局基础小结掌握CSS布局方法1.湖江船业根据所学内容制作湖江船业网页，效果如图。
2.安居养老根据所学内容制作安居养老网页，效果如图。
第10章表单的应用1.倏尔鲜花根据所学内容制作倏尔鲜花网页。
2.卓越办公根据所学内容制作卓越办公登录页。
第11章模板和库根据所学内容制作格纹帽业网页。
第12章行为的应用根据所学知识为动物保护协会网页添加行为。
电子课件-《Dreamweaver MX网页设计与制作》-A06-5452 06
第6章 一些制作惯例：底部留联系方式……
第6章
6.7 总结提高
本章的前主要介绍了静态网页的制作，通过制作静态网页的学习，读 者可以制作出花样翻新的网页布局形式，网页中主要用到的表格、框架和 层对象在这些内容中都使用到了。在制作过程中，穿插着讲述了一些制作 技巧，以及经常在Internet网页上出现的新奇网页制作效果。读者通过学 习这些技巧，也可以应用到其它形式的网页上，美化和增加网页的趣味性。
第6章
6.3.2 上机操作
制作星座主页的导航条
选择附加CSS样式，装饰主页
第6章 制作星座介绍的表格
应用CSS样式，制作表格
第6章
6.4 商务网站首页：网上商城
6.4.1 基本概念
电子商务现在在中国正 如火如荼地发展着，原来习 惯去商场购物的白领人士， 现在更热衷于在网上通过订 购和网上银行进行支付。这 个生活方式的改变现在虽然 还不是很彻底，还有很多人 不习惯用电脑，但是可以看 到，随着由电脑伴随着长大 的这一代人的兴起，电子商 务，网上购物会更加深入人 心。本例就指导大家制作一 个电子商务的网站首页。
第6章
6.8 本章习题
1．在Dreamweaver中，插入换行符的快捷键是___________________。
2．文本列表有_________________和_________________两种形式。
3．CSS样式选择器类型有 _________________、_________________和
10．创建超链接可以链接到不同的目标，在网页中创建超链接的目 标 有 ： _______________ 、 _______________ 、 _______________ 、 _______________等。
Dreamweaver-cs-基础与实例教程
Flash等对象。然后鼠标右键单击“CSS样式”面板中 相应旳样式名称，弹出它旳快捷菜单，再单击该菜单 中旳“套用”菜单命令。 （2）利用“属性”栏 选中要应用CSS样式旳文本对象，在其“属性”栏旳“样 式”下拉列表框中选择需要旳CSS样式名称，即可将选 中旳CSS样式应用于选中旳文本对象。
（2）若要重定义特定 HTML 标签旳默认格式设置，请选择“标签” 选项，然后在“标签”文本框中输入一种 HTML 标签，或从弹出 式菜单中选择一种标签。
（3）若要为详细某个标签组合或全部涉及特定 Id 属性旳标签定 义格式设置，请选择“高级”选项，然后在“选择器”文本框中 输入一种或多种 HTML 标签，或从弹出式菜单中选择一种标签。 弹出式菜单中提供旳选择器（称作伪类选择器）涉及 a:active、 a:hover、a:link 和 a:visited。
环节3：选择定义样式旳位置： （1）若要创建外部样式表，请选择“新建样式表文件”。
（2）若要在目前文档中嵌入样式，请选择“仅对该文 档”。
环节4：单击该对话框中旳“拟定”按钮，即可退出该 对话框，弹出“CSS规则定义”对话框。
2.3.2 将外部样式表导入到目前文档
环节1：在CSS面板上，单击附加样式表按钮，打开 “链接外部样式表对话框”，单击对话框中“浏览” 按钮，浏览到外部 CSS 样式表，或者直接在“文件 /URL”框中键入该样式表旳途径。
2.1.2 插入水平线
在文档编辑区将插入点定位到所需位置，选择“插入” 菜单中旳“HTML”子菜单下旳“水平线”命令或单击 “插入”栏中旳“HTML”选项卡，在其中单击水平线 按钮即可添加水平线。初始绘制旳水平线旳格式往往 不能满足实际需要，此时可经过属性面板对其进行修 改。
电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目六
课程教案项目效果【任务】制作电影网首页——框架网页入门除表格外，框架也是一种重要的网页布局工具，与使用表格布局网页不同的是，框架布局通常适合页面中一个区域发生变化，而其他区域不发生变化的网页，如网站后台管理界面和一些论坛网页。
（一）了解框架和框架集在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架。
每个框架可显示不同文档的内容，彼此之间互不干扰。
框架网页由框架集定义，框架集是特殊的HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。
框架集文件本身不包含要在浏览器中显示的HTML内容，只是向浏览器提供如何显示一组框架，以及在这些框架中应显示哪些文档的信息。
要在浏览器中查看一组框架，需要输入框架及文件的URL，浏览器随后打开要显示在这些框架中的相应文档。
使用框架最常见的情况是，一个框架显示包含导航控件的文档，另一个框架显示含有主要内容的文档。
例如，下图显示了一个由两个框架组成的框架网页：一个较窄的框架位于右侧，其中包含导航条；一个大框架占据了页面的其余部分，包含网页的主要内容。
当访问者浏览站点时，单击左侧框架中的某一超链接，或者展开或收缩其中的栏目，或者更改左侧框架的内容。
（二）了解框架构造上图所示的网页至少由三个单独的网页文档组成：两个框架区域中显示的两个网页文档和把这两个文档显示在一个界面上的框架集文档。
在Dreamweaver中设计使用框架集的网页时，必须全部保存这三个文件，框架集网页才能在浏览器中正常显示。
下图显示了该框架集文档的结构。
在制作框架集文档时，每个框架都有自己的名称。
如果没有理解前面所讲框架的概念，可能会搞不清楚框架名称和网页文档名称的区别。
为方便记忆和理解，可自行设置框架名称。
方法为：选择框架后，在“属性”面板上的“框架名称”编辑框中直接输入（一般在创建框架时会自动指定框架名称）。
（三）制作并保存框架集文档在Dreamweaver中创建框架集的方法有很多，可以选择“文件”→“新建”菜单，打开“新建文档”对话框，然后在左侧的“文档类型”列表中选择“示例中的页”，在“示例文件夹”列表中选择“框架集”，最后在“示例页”列表中选择框架类型并单击“创建”按钮；也可以通过选择“修改”→“框架集”菜单下的子菜单，将普通页面拆分为框架集；另外，还可以单击“布局”插入栏中的“框架”按钮，在普通页面中插入预定义的框架集。
电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目五
课程教案项目效果【任务一】布局主页 index.html——表格的基本应用所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），如图5—1所示。
行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。
（一）插入表格Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。
步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。
步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。
下面简单介绍一下“表格”对话框中几个重要选项的意义。
●表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。
●在Dreamweaver中，最常使用的单位是像素和百分比。
像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。
●边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。
整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。
●单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。
●单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。
（二）选择表格和单元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。
当表格外框显示为黑色粗实线时，就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。
具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“<table>”标签，该表格便处于选中状态。
Dreamweaver网页设计与制作案例教程 (11)
11.3.2 定义模板可编辑区域
2．删除可编辑区域 步骤1执行【文件】|【打开】菜单命令，弹出 【打开】对话框，在该对话框中选择站点根目录 “Templates”文件夹中的“mb.dwt”模板文件， 单击“打开”按钮将其打开 。 步骤2将光标放在可编辑区域EditRegion1中， 执行【修改】|【模板】|【删除模板标记】菜单命 令，即可删除选中的可编辑区域 。
步骤6 在文档中右下方的表格中定位光标， 用于步骤4、5同样的方法创建可编辑区域： rightEditRegion 。
11.2 网页制作
11.2.2 利用模板创建网页 步骤1 执行【文件】|【新建】菜单命令， 打开【新建文档】对话框 。 步骤2 在【新建文档】对话框中选择 【模板中的页】选项，从中选择存储的模板对 象“moban” 。 步骤3 单击“创建”按钮，即可用模板 创建网页文档。
11.3.1 创建模板
在DreamweaverCS4中可通过两种方法创建模板。 1．将现有文档保存为模板 将现有文档保存为模板的具体操作步骤如下： 步骤1 执行【文件】|【打开】菜单命令，弹出 【打开】对话框，在该对话框中选择站点根目录 “ch12”文件夹中的“TravelPageXiangGang.html” 文件，单击“打开”按钮将其打开。
“旅游度假”页面效果
11.2 网页制作
11.2.1 创建模板 步骤1 启动Dreamweaver CS4，在“乐途网” 站点中，执行【窗口】|【资源】命令，打开【资 源】面板。 步骤2 在【资源】面板中单击“模板”按 钮，再单击右下方的“新建模板”按钮，输入新 模板名称：moban。 步骤3 在【资源】面板的模板列表中，选 中“moban”模板文档，双击打开该模板，在 【设计】视图中设计网页 。
《中文版Dreamweaver CS6网页制作案例教程》教学课件 项目七
网页制作案例教 程
江苏大学出版社
项目七 综合实训 ——学院精品课网站设计与制
作
任务一 网站策划 任务二 制作首页及二级页面效果图 任务三 网站制作 任务四 网站测试 任务五 网站发布
项目分析
制作精品课网站首先要了解需求，确定创建 网站的目的及意义，满足其实用性和易用性 的要求；确立网站的结构和导航，网站的主 色调和配色。
二、学习相关资料
在接到网站任务后要从客户方获取相关资料， 对资料进行分析研究，学习网站建设文件， 这样设计才有依据，作品才能符合用户要求， 也才能通过网站准确地传播信息。
三、写出网站策划书
“Photoshop平面设计精品课”网站策划书 包括下面几部分。 1．市场分析 2．网站建设的目的及功能定位 3．网站所使用的技术 4．网站内容及实现方式 5．整体设计 6．费用预算 7．网站测试和发布 8．网站建设日程表
任务一 网站策划
任务描述
本任务主要是根据高职教育的发展需要，进行 精品课网站策划，主要工作包括对网站进行分 析，和相关技术人员讨论，确定网站的目的和 功能，然后据此对网站建设中的技术、内容、 测试、维护、人员等做出规划。
任务实施
一、了解需求
1．建设网站的目的 2．网站的用户群 3．网站需要哪些栏目 4．用什么技术来实现 5．网站设计上的要求 6．后期的维护和更新要求
三、制作二级页面
在制作二级页面时，可参考以下制作要点。 （1）首先制作二级页面模板。 （2）利用模板制作二级栏目对应的页面， 在可编辑区域添加对应的内容。
任务四 网站测试
任务描述
本任务是在完成网站制作后进行必要的检测， 主要对浏览器的兼容性和网页的链接进行测 试，这样可以保证网站在不同浏览器上正常 显示，同时还可对存在的错误链接进行纠错。