网页设计与制作03课件.ppt

1、第3章 创建“我们的班”网页 本章要点：u创建本地站点u创建网页文件夹与文件u制作网页u建立超级链接u保存完整的Web站点u申请主页空间与注册域名u上传网页与更新网站 3.1 创建“我们的班”站点 3.1.1 设置站点存储位置 操 作 实 例操 作 实 例 3-1 在在 C盘 建 立 本 地 站 点 文 件 夹盘 建 立 本 地 站 点 文 件 夹myweb操作步骤：操作步骤：在桌面双击打开“我的电脑”窗口。在“我的电脑”窗口中双击打开用于存储站点的硬盘驱动器C。使用“文件”菜单中的“新建”、“文件夹”选项，在C盘建立一个新文件夹myweb。3.1.2 建立Dreamweaver站点 启动Dr

2、eamweaver MX2004工作窗口，在“站点”菜单中选择“管理站点”选项，弹出“管理站点”对话框，单击“新建”按钮开始创建站点。操作实例操作实例3-2 3-2 建立一个名称为建立一个名称为“0011100111G G”的站点。的站点。操作步骤：操作步骤：启动“管理站点”对话框。单击“新建”按钮，在下拉菜单中选择“站点”选项，弹出“站点定义为”对话框。选择“高级”标签，在“分类”中选择“本地信息”。在“站点名称”文本框中输入“00111G”；在“本地根文件夹”文本框中输入C:myweb（或单击黄色的浏览器按钮，选择“C：myweb”）作为本地根文件夹。单击“确定”按钮，返回“管理站点”对话

3、框。单击“完成”按钮，完成创建。3.1.3 建立站点文件夹 操作实例操作实例3-3 在在“00111G”站点中建立站点子文件夹。站点中建立站点子文件夹。操作步骤：操作步骤：在“00111G”站点窗口，选中“C：myweb”文件夹，单击鼠标右键，在快捷菜单中选择“新建文件夹”选项。输入文件夹名“image”，此文件夹用于存放图像文件参照步骤，依次建立文件夹“swf”（用于存放Flash动画）、“html”（用于存放非首页的其他网页）、“music”（用于存放音乐文件）。3.1.4 建立网页新文件 主页是浏览者登录网站后显示的第一个页面。主页文件一般命名为index.htm或default.htm

4、。主页文件必须存放在本地站点根文件夹下。其他网页文件应放在指定的子文件夹下，以便于管理。操作实例操作实例3-4 在在“00111G”站点中建立网页新文件站点中建立网页新文件操作步骤：操作步骤：在“00111G”站点窗口，选中“C：myweb”文件夹，在“文件”菜单中选择“文件”、“新建文件”选项。输入主页文件名“index.htm”。选中“html”文件夹，在“文件”菜单中选择“文件”、“新建文件”选项，建立网页文件classrecord.htm（班级档案）。参照步骤，分别建立网页文件classphoto.htm（班级图片）、newknow.htm（新知识）、honorroom.htm（荣誉室

5、）、learngarden.htm（学习园地）、life.htm（课余生活）、classcomm.htm（班委会）。3.1.5 打开站点窗口 操作实例操作实例3-5 打开打开“00111G”站点站点操作步骤：操作步骤：方法一：启动Dreamweaver，在文档窗口中使用“站点”菜单中的“管理站点”选项，弹出对话框，选中需要打开的“00111G”站点名称，单击“完成”按钮即可打开相应的站点。方法二：在站点窗口打开“显示”下拉列表，单击需要打开的站点名称，即可打开相应的站点。3.2.1 制作网页标题 操作实例操作实例3-6 打开打开“我们的班我们的班”主页主页操作步骤操作步骤启动Dreamweav

6、er，在如图3-8所示的界面上，在“打开最近项目”中，单击“打开”选项，弹出“打开”对话框，如图3-9所示。在“查找范围”中，选择网页所在的文件夹，然后选中指定的文件。例如，打开myweb文件夹下index.htm文件。单击“打开”按钮，网页文件被打开。此时主页是一个空白页。2、添加标题图像、添加标题图像 操作实例操作实例3-7 插入主页标题插入主页标题“我们的班我们的班-00111G”操作步骤操作步骤：在插入面板上单击“常用”工具栏中的插入“图像”按钮，弹出“选择图像源文件”对话框，如图3-10所示。如果“常用”工具栏未显示，可按快捷键Ctrl+F2打开。在指定文件夹中找到标题图像文件，选择

7、标题图像文件后，对话框右侧将显示该图像的预览图，单击“确定”按钮，插入结束。3.3.添加水平分割线添加水平分割线 为了将标题区与正文内容分隔开，通常在标题下面插入一条水平分隔线。操作实例操作实例3-8 插入水平分隔线插入水平分隔线操作步骤：操作步骤：将光标移动到需要插入分隔线的地方（标题下方）。在“插入”面板上单击“HTML”工具栏中的“水平线”图标。标题图像的下面出现一条水平分隔线，并处于选中状态，如图3-12所示。在属性面板中可以设置其属性，如图3-13所示。改变分隔线的宽度与高度插入垂直分隔线改变分隔线的对齐方式为分隔线添加阴影效果 3.2.2 设置导航栏 导航栏的作用是与其他网页链接。

8、导航栏既可以使用文字，也可以使用图像。操作实例操作实例3-9 3-9 插入表格并添加文字插入表格并添加文字操作步骤：操作步骤：在水平分隔线下单击鼠标，出现光标插入点。在插入面板上单击“常用”工具栏中的“表格”按钮，弹出“表格”对话框，设置“行数”为7，“列数”为1，“宽度”为25，单位为“百分比”。如图3-14所示。单击“确定”按钮，表格插入。此时表格处于选中状态，拖动控点（黑点）可以调整表格的大小。如图3-15所示。参照图3-16，在属性面板中设置表格的背景颜色。在表格的第一个单元格里单击鼠标，出现光标插入点，通过键盘输入文字“班级档案”。选中文字“班级档案”，可以在属性面板中设置其字体、大

9、小、对齐方式，如图3-17所示。参照步骤，输入和设置其他导航栏：“班级图片”、“荣誉室”、“学习园地”、“新知识”、“课余生活”、“班委会”。3.2.3 设置网页内容 1.1.设置文字区域设置文字区域 操作实例操作实例3-10 设置文字区域并添加文字设置文字区域并添加文字操作步骤：操作步骤：在插入面板的“布局”工具栏上，单击“描绘层”按钮。在页面需要放置文字的地方，按住鼠标左键拖动出一个矩形层区域，如图3-18所示。此时层处于选中状态，通过拖动控点可以调整层的大小。将鼠标放在层的边缘线上，鼠标呈“十字”箭头时，拖动鼠标可以移动层的位置。在层内单击鼠标，出现插入点后，即可输入文字。2.2.设置图

10、像区域设置图像区域 操作实例操作实例3-11 设置图像区域设置图像区域操作步骤：操作步骤：在“插入”面板中的“布局”工具栏上，单击“描绘层”按钮，在文字区域的下方拖出一个矩形层区域。适当调整层区域的大小和位置。在层内单击鼠标，出现插入点。在“插入”面板中的“常用”工具栏上，单击“图像”按钮，插入所需要的图像。至此，页面的基本结构制作完成。3.2.4 网页的超级链接 超级链接可以是一段文本、一幅图像或者其他的网页元素。在网页浏览器中用鼠标单击这些对象时，将会载入一个新的页面或者跳到页面的其它位置。1.1.文字的超级链接文字的超级链接 操作实例操作实例3-12 文字的超级链接文字的超级链接操作步骤

11、：操作步骤：首先选中设置超级链接的文字“班级档案”。单击属性面板中的“浏览文件”图标（如图3-17所示），弹出“选择文件”对话框，如图3-19所示。双击打开“html”文件夹，单击选中与“班级档案”相链接的网页文件classrecord.htm，单击“确定”按钮后，在属性面板的链接框内显示出链接的网页文件及路径。也可以在“链接”框中直接输入需要链接的网址或文件路径。建立超级链接的文字颜色呈蓝色，并且出现一条下划参照步骤，设置其他导航栏的文字链接。2.2.图像的超级链接图像的超级链接 操作实例操作实例3-13 图图像的超级链接像的超级链接操作步骤：操作步骤：首先选中设置超级链接的图像，本例中为文

12、字区域下的图像。单击属性面板中的“浏览文件”图标，弹出“选择文件”对话框。选择与此图像相链接的网页文件，单击“确定”按钮后，在属性面板的链接框显示出链接的网页文件及路径。3.2.5 设置页面属性设置页面属性 网页页面属性主要包括网页标题、网页背景图像与颜色、文本与超级链接颜色、页边距等。1.设置网页标题 操作实例操作实例3-14 为网页添加标题为网页添加标题“00111G”操作步骤：操作步骤：方法一：直接在Dreamweaver文档工具栏的“标题”框中输入新标题。例如，输入00111G。然后按回车键确定。如果工具栏没有显示，可通过“查看”菜单打开工具栏。方法二：在“查看”菜单中，选择“文件头内

13、容”选项，显示出文件头部分的内容。如图3-21所示。单击“标题”按钮，在属性面板的标题框中输入新标题，然后按回车键确定。方法三：单击文档工具栏上的“代码”按钮，然后在和标签之间输入新标题，如图3-22所示。2.设置网页的背景图像或颜色 使用“页面属性”对话框可以设置网页的背景图像或颜色。操作实例操作实例3-15 为网页设置背景图像和颜色为网页设置背景图像和颜色操作步骤：操作步骤：打开“页面属性”对话框，在“分类”中选中“外观”选项，单击“背景图像”文本框右侧的“浏览”按钮，弹出“选择图像源文件”对话框；或者在“背景图像”文本框中直接输入背景图像文件名与路径。如图3-24所示。在“选择图像源文件

14、”对话框中选择一个图像文件，单击“确定”按钮。单击“页面属性”对话框中的“应用”按钮，背景图像将应用到网页中。在“页面属性”对话框中单击“背景颜色”右侧的按钮，鼠标变为滴管形状，并弹出一个颜色面板，可以使用取色滴管在颜色面板中选取一种颜色，也可以使用取色滴管选取屏幕上任意一点的颜色作为设定值。3.设置网页文本的属性 设置网页中文本的字体、大小与颜色。操作实例操作实例3-16 3-16 为网页设置为网页设置文本文本颜色颜色操作步骤：操作步骤：在如图3-24所示的“页面属性”对话框中，单击“文本颜色”右侧的按钮，弹出颜色面板，使用取色滴管选取文本的颜色。在“页面属性”对话框的“分类”中，选中“链接

15、”选项，设置链接颜色、已访问链接与活动链接的默认颜色。如图3-27所示。对于网页的文本颜色与背景颜色的设置，可以直接选用Dreamweaver提供的“配色方案。在“命令”菜单中选择“设定配色方案”选项，弹出“设置配色方案命令”对话框。如图3-28所示。在“背景”列表中选择背景颜色；在“文本和链接”列表中选择文本和链接文本的颜色；右边的示例框显示所选的配色方案。在找到满意的配色方案之后，单击“确定”按钮或“应用”按钮。4.设置页面边距 通过设置页面边距，可以使网页周围留出一些距离。设置页面边距的操作是在“页面属性”对话框中实现的。左边距：文档中左侧边缘的空白数值。右边距：文档中右侧边缘的空白数值

16、。上边距：文档中上侧边缘的空白数值。下边距：文档中下侧边缘的空白数值。5.设置文档编码 在“页面属性”对话框的“标题/编码”对话框中，可以选择使用的汉字编码类型。对于中文网页，一般选用“简体中文（GB2312）”。3.2.6 保存网页 操作实例操作实例3-17 保存网页保存网页操作步骤：操作步骤：在“文件”菜单中选择“保存”选项，或单击标准工具栏上的“保存”按钮，或按快捷键“Ctrl+S”。如果网页文件已经建好或以前保存过，则文件继续保存；如果文件从未保存过，则弹出“另存为”对话框，如图3-29所示。在“保存在”列表中选择一个文件路径（注意：网页文件应保存在站点文件夹内），在“文件名”文本框中

17、输入文件名，“保存类型”选择HTML文件，最后单击“保存”按钮。3.2.7 浏览页面 操作实例操作实例3-18 在浏览器中预览“我们的班”主页操作步骤：操作步骤：在“文件”菜单中选择“在浏览器中预览”、“iexplore”选项，或按快捷键F12，将启动IE浏览器，并将当前编辑的网页显示在窗口。也可单击文档工具栏上的“在浏览器中预览”按钮。将鼠标指向链接的文字或图像时，鼠标形状变为手形，状态栏将显示被链接文件的名称，单击即可切换到链接的页面。3.2.8 设置首页及应用站点地图 操作实例操作实例3-19 设置首页设置首页操作步骤：操作步骤：在“站点”菜单选择“管理站点”选项，弹出如图3-2所示的“

18、管理站点”对话框。选中站点名称“00111G”，然后单击“编辑”按钮。在“00111G站点定义为”对话框的“分类”列表中选中“站点地图布局”。如图3-30所示。在“主页”文本框中输入主页的文件名与路径，或按“浏览”按钮查找主页文件。单击“确定”按钮返回“管理站点”窗口，单击“完成”按钮，首页设置完成。操作实例操作实例3-20 应用站点地图应用站点地图操作步骤：操作步骤：打开站点窗口，默认的状态是“站点文件”状态，如图3-6所示。单击“站点地图”按钮，窗口显示站点地图，最上面的index.htm为首页，下面是链接的所有页面，如图3-31所示。在“站点地图”按钮的下拉列表中可以设置站点地图的显示方

19、式。在窗口左下角的弹出式列表中，可以设置站点地图的显示大小。3.3 网站上传 将制作完成的网站发布到Internet，一般需要三个步骤：（1）在本地计算机保存完整的Web站点。（2）申请网页空间。（3）上传网页文件到服务器。3.3.1 保存完整的保存完整的Web站点站点 所谓完整的Web站点，是指保存在本地计算机上的站点必须具有完整性与独立性。站点文件夹必须包含所用到的全部文件。操作实例操作实例3-21 检查站点的文件链接检查站点的文件链接操作步骤：操作步骤：在“文件”面板打开指定的站点。或在“站点”菜单选择“管理站点”选项，在“管理站点”对话框打开指定的站点。在“站点”菜单选择“检查站点范围

20、的链接”选项，弹出“链接检查器”面板，自动检查整个站点中的链接情况并显示检查结果。如图3-33所示。在“检查链接”按钮中，有三种检查方式可供选择。检查结果将显示在面板窗口中。在“显示”下拉列表中提供了三种显示模式，用于显示检查结果。3.3.2 申请网页空间与注册域名 1申请主页空间 创建本地站点之后，需要申请网页空间，才能把本地站点上传到Internet上。获取网页空间有两种方式：（1）租用虚拟主机。适合于公司、企业和具有特殊需要的人。（2）申请免费空间。适合于个人。2注册域名 域名（Domain Name）就是Web站点的名字，是Web站点在Internet中的地址。在Internet中，域

21、名是惟一的。在商界领域，域名已被誉为“企业的网上商标”。注册域名的规则是先申请再批准。3.3.3 上传本地站点 上传网页就是将制作好的网页发布到Internet上，上传网页前应准备好如下信息：（1）制作好的网页，一般是一个文件或文件夹。（2）上传网页的域名。（3）ISP服务商所提供的服务器的URL地址。（4）ISP服务商所分配的用户名与密码。操作实例操作实例3-22 设置远程设置远程站点站点操作步骤：操作步骤：打开制作好的本地站点窗口，复制一个上传版本，然后将复制的站点窗口打开。在“站点”菜单选择“管理站点”选项，弹出“管理站点”对话框。在对话框的站点列表选中指定的站点，单击“编辑”按钮，弹出

22、“站点定义为”对话框。选择“高级”标签，在“分类”列表中选择“远程信息”，在“访问”下拉列表中选择“FTP”。如图3-34所示。做如下设置：“访问”：选择“FTP”。FTP主机：填入Web服务器的FTP地址。当用户申请主页空间时，Web服务器的管理员将使用E-mail告诉用户该地址。“登录”：此选项与“密码”选项是ISP授权的用户名与密码，是在申请网页空间时获取的。应填入申请网页空间时的“用户名”。“密码”：填入用户登录的密码。单击“确定”按钮完成。操作实例操作实例3-23 上传上传站点站点操作步骤：操作步骤：连接到Internet。在“站点窗口”或“文件”面板，单击“连接到远端主机”按钮，开始连接到远程的FTP服务器。如果设置正确，将很快连接成功，“站点窗口”的左侧窗口将显示远程服务器上的文件列表。在“站点窗口”的左侧窗口，选择需要上传到的目标文件夹。在“站点窗口”的右侧窗口，选中需要上传的文件或文件夹。按住鼠标左键，将右侧窗口选中的文件或文件夹拖放到左侧窗口的目标文件夹即可。上传成功，断开远程连接。在浏览器输入URL地址，浏览上传后的网页。