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