DW8网页链接与站点导航.

《dreamweaver8网页设计》目录第一章遨游DREAMWEA VER8精彩世界1第二章创建与规划站点3第三章文本及其格式化10第四章表格13第五章图像15第六章框架18第七章页面布局视图的使用21第八章链接24第九章层与时间轴 28第十章表单32第十一章行为35第十二章制作动态页面38第十三章代码片断、库项目和模板 42第十四章网页的制作45第十五章网站的测试与上传49第十六章使用FIREWORKS 8处理网页图像 52第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。

（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。

2、讲授新课（1） Dreamweaver的界面a．文档窗口：主菜单、工具栏、底部启动条、文档编辑区b．对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d．属性面板：随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。

快速上手使用Dreamweaver进行网站导航和链接第一章：认识DreamweaverDreamweaver是Adobe公司开发的一款专业网页设计软件，它具有强大的编辑和设计功能，能够帮助用户轻松地创建和编辑网页。

通过使用Dreamweaver，用户可以方便地管理网站的导航和链接。

第二章：创建网站导航栏要创建一个有效的网站导航栏，首先需要打开Dreamweaver软件并创建一个新的HTML文档。

接下来，选择“插入”菜单中的“导航栏”选项。

在弹出的“导航栏”对话框中，可以选择不同的导航栏样式，也可以根据需要进行自定义设置。

在设置完成后，点击“确定”按钮即可生成导航栏。

第三章：编辑网站导航栏生成导航栏后，可以通过双击导航栏进行编辑。

在编辑模式下，可以根据需要添加、删除或修改导航栏中的链接和按钮。

可以通过选择按钮来更改其外观，调整按钮的大小和位置，并更改按钮上显示的文本。

如果需要添加子菜单，可以在按钮上右键单击并选择“添加子菜单”选项。

通过编辑导航栏的设置，可以实现更加个性化的导航栏效果。

第四章：设置网站链接在Dreamweaver中设置网站链接非常简单。

首先需要选择要添加链接的文字或图像，并点击工具栏中的“链接”按钮。

在弹出的“链接”对话框中，可以选择链接的类型。

例如，可以将链接设置为跳转到其他网页、网站内的锚点或电子邮件地址。

在对话框中还可以设置链接的目标窗口和链接的标题等属性。

设置完成后，点击“确定”按钮即可创建链接。

第五章：管理网站导航和链接除了创建和编辑导航栏和链接外，Dreamweaver还提供了其他功能来管理网站导航和链接。

例如，可以使用“站点管理器”功能来管理整个网站的导航和链接。

在站点管理器中，可以查看和编辑网站的目录结构，并针对不同的页面设置导航和链接。

此外，Dreamweaver还提供了一些检查链接有效性的工具，可以帮助用户快速定位和解决链接错误。

第六章：优化网站导航和链接为了提高用户体验和网站的可用性，有几个技巧可以帮助优化网站的导航和链接。

填空：1.网页可以分为（静态）网页和（动态）网页。

2.在Dreamweaver8中可以创建（本地站点），（远程站点）和（测试站点）3种站点。

3.Dreamweaver8的工作界面有（设计器）工作界面和（编码器）工作界面。

4.默认情况下，在界面中打开4个面板组，分别是（“应用程序”面板组）、（“文件”面板组）、（CSS面板组）和（“标签”面板组）。

5.在“页面属性”对话框中可以对5大类页面属性进行设置，分别是（外观）、（链接）、（标题）、（标题/编码）和（跟踪图像）。

6.常见的网页元素包括（文本）、（图片）和（多媒体）。

7.在输入文本是，可以按（Enter）键分段换行，按（Shift+Enter）键则不分段换行。

8.网页中最常见的图片格式有（GIF）、（JPEG）和（PNG）。

9.可以在两种视图下使用表格布局网页，分别是（布局）视图和（标准）视图。

10.设置表格宽度可以使用两种单位，分别是（像素）和（百分比）。

11.在网页的HTML代码中（<table>）标签标识表格、（<tr>）标签标识一行单元格、（<td>）标签标识一个单元格。

12.框架集由（<frameset>）标签标识，框架由（<frame>）标签标识。

13.在Dreamweaver 8中可以创建（预定义）框架集和（自定义）框架集。

14.框架集的边框有3个设置选项，分别是（边框）、（边框颜色）和（边框宽度）。

15.表单的提交方式有（默认）、（GET）和（POST）。

16.要使一组单选按钮是互斥的，必须（将同一组中的单选按钮的名字都设为相同的）。

17.按钮的“属性”面板提供了按钮的3种动作，分别是（提交表单）、（重设表单）和（无）。

18.层具有（可移动）、（可重叠）和（可隐藏）的特点。

19.层的可见性有4个选项，分别是（default）、（inherit）、（visible）和（hidden）。

实验名称：Dreamweaver8基本操作、站点管理实验学时： 3学时班级：信管091班学号： *********** *名：***指导教师：***实验时间： 2011-3-6一、实验目的和要求1.掌握Dreamweaver 8启动和退出方法。

2.掌握本站点的设置方法。

3.掌握创建、打开和保存HTML文档的方法。

二、实验内容及步骤1.网页编辑器的基本操作。

（1）用不同的方法启动和退出Dreamweaver 8。

①双击Dreamweaver 8的快捷方式；②右击Dreamweaver 8快捷方式，左键打开；③“开始”→“程序”→“Dreamweaver 8”。

（2）用快捷键打开或关闭【插入】面板和【属性】面板。

Ctrl+F2和Ctrl+F3。

（3）将【代码】浮动面板组打开后，先移出，再移入浮动面板放置区，然后再将【设计】浮动面板组中的【CSS样式】组合到【代码】浮动面板组中。

查看浮动面板组操作后的效果。

（4）用快捷键关闭和打开浮动面板组，用鼠标折叠和展开各个浮动面板组，察看浮动面板组操作后的效果。

（5）启动Dreamweaver 8后，打开、关闭标尺显示，设置标尺单位分别为厘米、英寸、像素；显示和隐藏网格，设置网格属性，【间隔】为10像素，【显示】为线，【颜色】为#CCCC99，选中【靠齐到网格】复选项。

2.建立网站的基本操作。

（1）打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为myweb的文件夹。

（2）把文件夹myweb设置为本地站点的根文件夹。

然后建立名为image文件夹。

（3）在本地计算机的当前盘根文件夹中，建立名为our site的子文件夹，并切换为本地站点的根文件夹。

3.文件管理基本操作。

（1）将ch12\material文件夹中的两个文件bg0004.gif和bg0093.gif及my rose中的文件rose.htm，分别复制到本地站点“我们的站点”的our site文件夹中。