站点的创建与网页制作

第4周站点的创建与网页制作

【计划课时】：3课时

【授课班级】：10班

【教学目的与要求】

◆熟悉Dreamweaver8工作界面中各个工具的作用

◆熟悉Dreamweaver8工作界面中各个面板的调用

◆掌握构建本地站点的方法

◆掌握网页中超链接的创建、图像的插入、导航条的制作

【教学方法与手段】

多媒体教学：借助多媒体手段，进行课堂理论教学；

启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；

【教学重点与难点】：

基础知识：学会构建本地站点

重点知识：学会规划与构建站点结构

网页中超链接的创建、图像的插入、导航条的制作

【教学组织过程】

1．上讲回顾

2．教授新知

【授课内容】

一、利用dreamweaver8进行网页设计的基本步骤：

1. 打开dreamweaver8

2. 创建站点

3. 在站点根目录下新建网页（HTML文件），并按要求命名

4. 打开所创建的网页（HTML文件），对网页进行布局、创建超链接等

二、新建站点的操作（站点：以自己的名字命名的文件夹）

1．在桌面上找到位dreamweaver8并运行它。在“站点”菜单中点“新建站点”

2．在弹出的窗口中，给你的站点以你的名字命名，并点“下一步”，如下图：

3．在选择服务技术页面选“否，我不想使用服务技术”并直接点“下一步”。

4．在您把文件存储在计算机的什么位置上选择你前面建立的你自己的文件夹，并点“下一步”，如下图：

5．在您如何连接到远程服务器窗体选择您打算将你的文件存储在服务器上的什么文件夹中选中你前面创建的自己的文件夹，然后“下一步”

6.然后点“完成”，你的站点就建立完毕。注意dreamweamver的右边显示你的站点。

三、在站点中新建一个网页（HTML文件）

1.在如图所示的地方（站点根目录）右键点击

2. 给新建的HTML文件命名

四、布局网页的一些操作

1. 设置标题：

在网页上方的“标题”处写上你的网页标题：如下图

2. 设置背景图片：

在最下面找到“页面属性”按钮点击它，然后选择“背景图像”，如下图：

3. 设置页面文字和字体：

选中文字，在下面的属性中设置它的字体大小和颜色，加粗, 居中等

4. 插入图片：

在“插入”菜单中选择“图像”如图，，并选中sc文件夹中的img1_2.jpg

文件：

5. 图片的对齐方式：

选中图像，在下面设置它的对齐为“右对齐”，如下图：

6. 设置文字列表形式：

在“文本”-“列表”-“项目列表”将所选文字设为列表,如下图：

五、上机练习(共3个)

在考试文件夹中将“站点的创建与网页制作”文件夹改为(学号姓名)如(2009××××张三)命名的文件夹，在已改为你的学号姓名的文件夹中，建立网页站点，所需素材均在“SC”文件夹中。站点取名“myweb”，以下三道题都保存在这个站点里。

注意：在编辑—>首选参数里将“使用CSS而不是HTML标签”的复选框去掉打勾，如下所示。

1、请参照图1制作一个“梅花颂”的网页。文件保存为梅花.html。

操作提示：1、录入相关文字，2、插入图片，3、页面设置（标题输入、“元代诗人”链接到SC\YDSR.htm、“页面属性”中插入背景图像），4、插入图像并设置其属性。

图1

要注意的操作：

Shift+Enter：换行不分段；SHIFT+CTRL+SPACE：输入空格；

在全角状态下才能输入空格。

2、完成网页如图2所示，文件名香山红叶.html。

操作提示：1、录入相关文字，2、插入图片（图片之间的间隔：插入高为120、宽为22的背景图像），3、对第一副图像设置反转：鼠标经过图像。

图2

3、完成网页如图3所示，文件名剪纸浏览.html。

操作提示：1、插入一个三行两列的表格，并合并第一行和第二行；2、第一行导入标题图像，第三行的左边单元格插入三个自转球（复制三组），第三行的右边单元格插入日期；3、第二行插入导航条（插入--图像）,在导航条里创建六个项目，分别在“状态图像”、“鼠标经过图像”和“按下时，前往的URL”文本框内插入“剪纸2-1.jpg”、“剪纸1-1.jpg”和“剪

纸1-1.jpg”。

图3