1、1网页设计1、课程网站主页的创建下面以制作现代教育技术课程网站为例，介绍 Dreamweaver的基本操作。（1）定义本地站点开始用 Dreamweaver制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片，甚至 Flash动画等，如果不进行管理归档就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。 在 D盘根目录下新建一个文件夹，命名为“myweb”，这个文件夹将作为网站的站点文件夹，以后所有的网页文件、素材都放在这个文件夹下。 选择“站点/新建站点”命令（或“站点/站点管理”命令，单击“新
2、建”按钮），弹出“定义站点”向导（图 4-1-3所示），输入站点的名字“现代教育技术”，单击“下一步”；图 4-1-3 定义本地站点 选择“否，不想使用服务器技术”； 在文件存储位置文本框中，设置文件存放路径：单击输入框右侧的文件夹图标，找到刚才在 D盘新建的 myweb文件夹，单击“选择”按钮。 “如何连接到远程服务器”选择“无”； 单击“完成”按钮，站点的名字就出现在站点管理器中，如图 4-1-4所示。2图 4-1-4 站点文件管理窗口（2）创建新文档选择“文件新建”命令，出现“新建文档”对话框，如图4-1-5所示。图 4-1-5 创建新文档文档的创建有两种方式，一是通过“常规”选项卡直接
3、创建，二是通过现有模板创建新文档。在“类别”列表中选择文档的类别，有“基本页”、“动态页”、“模板页”、“其他”、“CSS样式表”或“框架集”等；然后从右侧的列表中选择要创建的文档的类型。选择“基本页/HTML”，单击“创建”按钮创建一个HTML页面。新文档在“文档”窗口中打开，选择“文件/保存”命令，将该文档保存为index.html。（3）页面属性的设置 设置标题。在“文档”工具栏的“标题”文本框中输入标题，当用户浏览页面时，页面标题会在浏览器标题栏显示，可以帮助了解页面中的内容（图 4-1-6） 。图 4-1-6 设置页面标题 设置背景图片或颜色。选择菜单“修改页面属性”命令或单击属性面
4、板上的“页面属性”按钮，弹出“页面属性”对话框（图 4-1-7） 。选择“外观”分类，单击 “背景图像”按钮 给页面设置背景图像，从弹出的对话框中选择事先做好的背景图；“重复”用来设置背景图像在页面上的显示方式，包括：不重复、重复、横向重复、纵向重复，默认为图像在页面内重复显示，确定后可以看到页面背景。3图 4-1-7 设置页面背景颜色也可以单击“背景颜色”按钮 ，在调色板中选择一种颜色作为页面背景颜色。 设置页面边距。页面中的内容和浏览器边框之间存在一定的默认距离，打开图 4-1-7 所示的页面属性对话框，分别将页面左边距、上边距设为 0 像素，使页面内容靠浏览器的顶边和左边对齐。 设置背景
5、音乐。首先找一个 mid 格式的背景音乐文件，拷贝到站点文件夹 myweb 下的 sound 子文件夹。在标签下面的“文档”工具栏中点一下“拆分”标签，窗口分成两部分，上边是代码，下边是文档；在代码窗口中，找到标签，在它后面点一下鼠标，然后按一下回车键插入一个空行，切换到英文输入法状态，输入代码：src 表示背景音乐路径及文件名，loop 值设为-1 表示无限次循环播放。保存文件，按下F12快捷键或在文档工具栏右侧点击预览按钮 ，选择“预览在IExplore 6.0”命令就可以看到页面效果，单击浏览器工具栏上的停止按钮可以使音乐停止播放，点刷新重新播放。（4）文本的输入与编辑要向Dreamwe
6、aver文档添加文本，可以直接在 Dreamweaver文档窗口中键入文本，也可以从word 文件或其他文本文件中复制，还可以直接从其他文档导入文本。对文本的编辑，可以选中要编辑的文字后在“属性面板”中对文字进行相应设置，包括格式、字体、大小、颜色、对齐方式等。操作步骤如下：在页面中输入文字“现代教育技术” ，用鼠标选中后，属性面板中显示的是文字的属性。在“字体大小”中选择字号或者直接输入一个数值，在此输入45，单位为“像素” ，如图4-1-8：图 4-1-8 文字属性面板在属性面板中，单击 在调色板中选择蓝颜色，改变字体颜色。单击 按钮，将文字加粗显示。单击 按钮，使文字倾斜。单击 按钮，使
7、文字居中显示。字体类型采用的是默认字体，一般为宋体。单击右侧下拉按钮，在下拉列表中显示的都是英文字体，要设置其他字体需要编辑字体列表。单击列表中最后一项“编辑字体列表” ，弹出“字体列表”对话框，如图4-1-9所示：4图4-1-9 编辑字体列表对话框在“可用字体”中选择“隶书”，单击 按钮，将选中的字体添加到“选择的字体”框中。如果要再添加第二种字体，先单击 再选择字体。添加完后，单击“确定”按钮，此时所添加的字体出现在属性面板的选择字体下拉列表中。（5）插入水平线在文字“现代教育技术”后，按下回车键换行，下方插入一条水平线，使标题文字和内容分开。在“插入”工具栏中，单击“常用”右侧按钮，选择
8、“HTML”选项，选择“水平线”按钮 ，就可以在光标位置插入一条水平线（或者选择菜单命令“插入HTML水平线”亦可）。选中水平线，在属性面板中可以修改水平线的宽度、高度、对齐方式及阴影设置。阴影表示水平线是空心的，去掉后则为实心。要改变水平线颜色，则需要单击代码视图按钮 ，在代码中找到水平线标记，在其后添加color属性，如：，Dreamweaver中不能马上看到设置的颜色效果，需要按下F12键在浏览器中观看。按照同样的方法，在页面中再插入一条水平线，宽度、高度、颜色和上面水平线设置为相同，并去掉阴影。在第二条水平线下方，输入版权信息“版权所有 曲阜师范大学信息技术与传播学院”。在属性面板中，
9、设置文字居中对齐。（6）设置滚动字幕在Dreamweaver中设置滚动字幕，需要在代码视图中手动书写代码。将光标放在第一条水平下方，然后单击代码视图按钮进入代码视图，输入代码，在二者之间输入滚动的文字，如：欢迎您光临现代教育技术课程网站按下F12键预览页面，即可看到文字在页面中自右向左滚动。（7）使用表格进行内容排版表格在网页设计中有两种作用：数据存放和页面内容排版。在使用表格排版时，首先确定页面内各个区域插入的内容及所占的区域大小，再用表格进行区域划分，然后在相应单元格中插入内容，如图4-1-10中所示课程首页效果。5图 4-1-10 课程首页预览效果为了实现页面中的效果，下面在滚动字幕下方
10、插入一个表格用来存放图片和文字，步骤如下：选择“插入/表格”命令或选择“常用”插入栏中的插入表格按钮 ，弹出表格对话框，如图 4-1-11所示。输入行数 2，列数 2，宽度 600 像素，边框粗细、单元格边距、间距都设为 0 像素。图 4-1-11 表格对话框选中表格，可以在属性面板中对表格属性进行设置，包括行数、列数、间距、边框颜色、背景等，如图 4-1-12。图4-1-12 表格属性将鼠标放在表格的第一行左侧，出现 时单击鼠标，此时第一行单元格被选中，在表格内单击鼠标6右键，弹出菜单，选择“表格/合并单元格”命令，将第一行两个单元格合并为一个，如图4-1-13所示。图 4-1-13 右键菜
11、单 “表格”在合并后的单元格中输入“课程简介” 、 “课程大纲” 、 “教师队伍” 、 “电子讲义” 、 “教学录像”等栏目，使文字居中显示，并加粗，效果如图4-1-10所示。（8）图像的插入与编辑一个页面光有文本是无法吸引人的，插入一幅图片可以使页面更加生动，图文并茂。Dreamweaver 中常用的的图片格式有.gif、.jpg 、.png。为了保持良好的制作习惯，一般在站点文件夹 D:myweb 下建立一个名为“images”的文件夹，将网页中需要的图片都放在这个文件夹下（图 4-1-14） 。图 4-1-14 文件面板将光标置于表格第二行的左侧单元格，选择菜单“插入/图像”命令或单击“
12、常用”插入栏中的图像按钮 ，在弹出的对话框中选定图片， “确定”后图片被插入到单元格中。选中图片，在属性面板中可以对图片的宽度、高度、对齐方式等进行设置（图 4-1-15） 。图 4-1-15 图像属性设置选中图像后，四周出现黑色小方框表示的控制点，鼠标放在控制点上变成双向箭头，将图像调整到合适大小。（9）换行和空格图像设置好后，在表格第二行的右侧单元格中输入一段文字，如果是中文，到行末会自动换行；如果是英文，则不会自动换行，可以按下 Enter 键或 Shift+Enter 键换行。Dreamweaver 中只能插入全角空格，文字中加空格，则需要先输入法切换到全角状态然后再输入。（10）超链
13、接的创建网页的内容是非线性的，通过超链接可以实现各个页面之间的自由跳转。超链接的对象可以是文字，也可以是图片，链接的地址有三种：本地文件、网站 URL、E-Mail 地址。下面给五个栏目分别设置超链接，首先选择“文件/新建”命令，分别创建五个 HTML 页面，保存为7“jianjie.html”、 “dagang.html”、 “jiaoshi.html”、 “jiangyi.html”、 “luxiang.html”。 文字超链接。选中需要设置超链接的文字“课程简介” ，单击“属性面板”中“链接”列表框右侧的按钮 ，出现如图 4-1-16 所示对话框，选择要链接的文件 “jianjie.ht
14、ml”，单击“确定” ，文字的超链接就加完了。图 4-1-16 选择链接文件在页面上点一下，取消文字选中状态，这时看到加链接文字变为蓝色，并且带下划线。将光标定位在链接文字中，在属性面板上可以看到其链接文件，单击“目标”列表框，可以看到有四个选项，如图4-1-17：_blank：表示新开一个窗口打开链接文件。_parent：表示在当前窗口的父窗口打开链接文件。_self：默认值，表示在当前窗口打开链接文件。_top：表示在整页窗口打开链接文件，在框架网页中使用。在此，设置目标属性值为_blank，在新窗口打开页面。图 4-1-17 属性面板上设置文字超链接按照上述方法，分别给“课程大纲” 、
15、“教师队伍” 、 “电子讲义” 、 “教学录像”文字设置超链接。 图像超链接。选中网页中的图片，在属性面板中设置目标文件，或直接在“链接”文本框中输入目标地址，如输入“http:/ ”，用图形做链接时，其边框值一般都设为 0（图 4-1-18） 。8图 4-1-18 用图片作超链接 设置超链接的样式默认状态下，浏览器将未访问过的超链接设置为蓝色，访问过的超链接设置为紫红色，而且带有下划线，要改变设置操作步骤如下： 选择菜单命令“修改/页面属性 ”或在属性面板单击“页面属性”按钮 ，打开页面属性对话框，选择“链接”分类选项，如图 4-1-19 所示：图 4-1-19 页面属性对话框 链接颜色：表
16、示未访问过的超链接颜色，单击右侧按钮，在调色板中选择黑色。 已访问链接：表示访问过后的超链接颜色，设置为蓝色。 变换图像链接：表示鼠标移动超链接上方时的颜色，设置为红色。 活动链接：表示超链接被激活，即在超链接上按下鼠标时的颜色，在此采用默认设置。 下划线样式：选择“仅在图像变换时显示下划线” ，只有当鼠标移动超链接文字上方时才显示下划线，其他状态均不显示。设置完成后，单击“确定” ，保存网页，按下 F12 键即可在浏览器中看到页面效果。2框架网页的制作在 Dreamweaver 中，除了可以设计一般的网页外，还可以设计一种称为“框架网页”的特殊网页。简单的说，就是把一个浏览器窗口分成几个栏，
17、每个栏中可以显示一个页面。网络课程中导航非常重要，导航的方式有很多，如导航按钮、导航条、网站地图等。所谓“导航按钮”就是作者定义的、设置了超链接的对象，如：文字、图片等。这些按钮可以引导浏览者进入相关链接。导航按钮通常显示在框架页的某一个分栏中，且在载入该框架页后始终可见。点击导航按钮，它链接的页面可以在框架页的其它位置显示，如图 4-1-27 所显示的框架网页效果。9图 4-1-27 框架网页效果创建图 4-1-27 所示框架网页的步骤如下：（1）创建框架集选择菜单命令“文件/新建” 命令，打开“新建文档”对话框，在“类别”中选择“框架集” ，然后从右侧选择框架集结构，如图 4-1-28 设
18、置：图 4-1-28 新建文档对话框单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，单击“确定”按钮，Dreamweaver 中出现含有框架的网页。（2）保存框架集框架集是由多个页面构成的，保存时每个页面都要保存。使用“文件/保存全部”命令，弹出“另存为”对话框，此时文档窗口中显示的虚线边框表示当前保存文档的范围。选择保存位置，输入文件名：main.html，如图 4-1-29。10图 4-1-29 保存框架集单击“保存”按钮后，再次弹出“另存为”对话框，虚线框移至右侧，输入文件名 right.html。单击“保存”后，再次弹出“另存为”对话框，虚线框移至左侧，输入文件名 left.ht
19、ml。单击“保存”后，再次弹出“另存为”对话框，虚线框移至上方，输入文件名 top.html。连续保存四次，完成框架集的保存。（3）编辑框架网页将鼠标放在上方框架页面 top.html 中，插入 logo 图片，并设置该页面的背景颜色，将左边距和上边距设为 0 像素。拖动框架边线，可以改变框架范围，使图片处于恰当的位置。按照上述操作方法，参照图 4-1-27 分别在 left.html、right.html 页面中插入相应文字和图片。（4）设置导航链接左侧页面 left.html 为导航页面，显示一栏导航链接。当单击某个链接时，目标文件应该在 right.html位置区域显示，要实现此操作，必须将超链接的目标属性设置为目标框架的名称。选择“窗口/框架” ，在面板组右下角打开 “框架面板” ，可以在此选择每个框架查看框架的名称，可以看到 right.html 所在的框架名为 mainFrame，如图 4-1-30。图 4-1-30 框架面板在 left.html 中，选中“课程简介”文字，在属性面板中设置超链接文件，并在 “目标”右侧下拉列表中选择目标框架“mainFrame” ，即链接文件显示的位置，如图 4-1-31。
