现代教育技术工业和信息化普通高等教育“十二五”规划教材课件作者周玉萍第8章节网络课程设计与制作.pptVIP

4．制作主页 回到Microsoft Expression Web软件界面，选择“文件”菜单中的“新建”→“网页”→“框架网页”命令，新建一个“嵌套式层次结构”的框架网页来决定主页的结构。 5．保存框架网页 新建三个子框架网页，保存框架网页，左框架命名为“left.htm”，右上框架命名为“right.htm”，右下框架命名为“main.htm”，总框架命名为“default.htm”。 6．布局网页 在布局网页时，考虑到是以图片为主的摄影课程的网站，选择深色背景浅色文字比较能够突出照片的效果。为了使网页的效果更生动，采用表格布局网页，插入文字、图片等元素。 （1）设置框架属性 在布局网页时，考虑到是以图片为主的摄影课程的网站，选择深色背景浅色文字比较能够突出照片的效果。为了使网页的效果更生动，采用表格布局网页，插入文字、图片等元素。 （1）设置框架属性，添加标题 单击鼠标右键，选择“框架属性”→“框架网页”→“常规”，在“标题”栏里输入“《摄影技术》网络课程”，预览网页时就可以显示网页的标题了。 （2）设置背景颜色 光标放在左框架中，单击鼠标右键，选择“网页属性”→“格式”→“颜色”→“背景”，选择恰当的颜色。 （3）在左框架中插入表格 选择“表格”菜单中的“插入表格”命令。在第1行插入网站的logo，在第2行中插入一个7行1列的表格作为网站的导航模块，在7行中分别输入导航模块的名称。调整单元格的宽度和高度属性直至合适。 （4）在右框架中插入图片 在右上框架和右下框架中分别插入合适的图片。 （5）设置图片属性 右键菜单中的“图片属性”命令，打开“图片属性”对话框，选择其中的“外观”选项卡，修改布局、大小等属性，设置图片的对齐方式等。 （6）插入超链接 为左框架中的导航条加上超链接，单击超链接后能够在右下框架中显示。利用“插入”菜单或右键菜单中“超链接”命令，打开“插入超链接”对话框进行设置，打开超链接的“目标框架”选择“右下框架”。 （7）插入其他效果 如果想使网页的效果更丰富，可以插入“交互式按钮”、“HTML”控件和“ASP.NET控件”等。 7．保存和预览网页 制作过程中要及时保存网页。保存后，单击键盘上的F12键可以在浏览器中打开网页，浏览该网页的最终效果。 8.4 使用Dreamwaver制作网页 8.4.1 Dreamweaver CS4工作界面 8.4.2 Dreamwaver制作网页实例 第8章 8.4.1 Dreamweaver CS4工作界面 第8章 8.4.2 Dreamwaver制作网页实例 以《现代教育技术》网络课程首页的制作为例，讲解如何用Dreamweaver CS4设计静态网页. 由于表格可以控制文本、图像、Flash在页面上出现的位置，不必担心页面的整体结构遭到破坏，或者在浏览时无法正常显示。因此在设计主页时，可以使用表格来控制页面的版式，再使用图文混排的方式进行布局。 还可以通过设置文本的大小、颜色、对齐方式等属性，使网页更加美观，并可以对一些文本突出显示。 第8章 1．新建站点 打开Dreamweaver CS4软件，新建《现代教育技术》网络课程的站点，站点路径为“D:\etsite\”。然后在站点中新建主页文件（index.html）和图像文件夹（images），将图像素材复制到image文件夹中。 第8章 2．设计网页 在主页中单击鼠标右键，选择“页面属性”命令，在打开的“页面属性”对话框中设置“左边距”、“右边距”、“上边距”和“下边距”都为0，在“标题/编码”对话框的“标题”文本框中输入“现代教育技术主页”，单击“确定”按钮 3．创建表格 单击“插入”选项卡中的“表格”按钮 ，打开“表格”对话框，设置“行数”和“列数”均为1，“表格宽度”为1024像素，“边框粗细”为0像素，单击“确定”按钮创建第1个表格。 4．设置单元格属性 单击选中这个单元格，在“属性”面板上设置单元格的高度为172。进入“拆分”视图，输入代码“background=images/header.jpg”为单元格设置一张背景图片。 第8章 5．制作导航栏目 单击“插入”选项卡中的“表格”按钮，创建第2个表格，设置为8列、间距为1。选择表格，然后单击标签tr选中该行，在“属性”面板中，设置“高”为20、“背景颜色”为#8DCFFF、“水平”对齐方式为“居中对齐”、“垂直”为“居中”，单击“CSS”,设置字体“大小”为14、“文本颜色”为白色#FFF中。 尚辅网 / 第8章 网络课程设计与制作 海南师范大学 信息科学技术学院 第8章 网络课程设计与制作 本章学习目标： 通过本章的学习，使学生了解网络课程的概念，掌握网络课程