网页设计基础教程与上机指导第版插入网页对象.ppt
《网页设计基础教程与上机指导第版插入网页对象.ppt》由会员分享,可在线阅读,更多相关《网页设计基础教程与上机指导第版插入网页对象.ppt(27页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、http:/网页设计基础教程与上机指导第版插入网页对象 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望http:/教学提示和教学目标教学提示和教学目标n教学提示:文本和图像是网页中最重要的两种元素。在网页的适教学提示:文本和图像是网页中最重要的两种元素。在网页的适当位置放置一些图像,不仅可使内容清晰易懂,而且可使网页更当位置放置一些图像,不仅可使内容清晰易懂,而且可使网页更具吸引力。网页中除了能够插入文本和图像之外,还有一些多媒具吸引力。网页中除了能够插入文本和图
2、像之外,还有一些多媒体元素是非常重要的。本章主要讲述文本的插入、使用列表、在体元素是非常重要的。本章主要讲述文本的插入、使用列表、在网页中插入文件头部内容、插入图像、插入媒体对象和插入其他网页中插入文件头部内容、插入图像、插入媒体对象和插入其他对象等。对象等。n教学目标:教学目标:掌握文本的插入掌握文本的插入掌握列表的使用掌握列表的使用掌握插入文件头部内容掌握插入文件头部内容掌握图像的插入掌握图像的插入掌握插入媒体对象掌握插入媒体对象对象对象创建图文混和网页创建图文混和网页插入插入JavaApplet制作特效网页制作特效网页http:/3.1插插入入文文本本n文本是网页中不可缺少的内容之一,担
3、负着文本是网页中不可缺少的内容之一,担负着传递信息的重要任务,虽然图像及多媒体在传递信息的重要任务,虽然图像及多媒体在网页中所占的比例越来越大,但是在网站中网页中所占的比例越来越大,但是在网站中文字的主导地位仍然是不可替代的。文字的主导地位仍然是不可替代的。n3.1.1插入普通文本插入普通文本n3.1.2设置文本属性设置文本属性n3.1.3插入特殊字符插入特殊字符http:/3.1.1插入普通文本插入普通文本n在网页中可直接输入文本信息,也可以将其在网页中可直接输入文本信息,也可以将其他应用程序中的文本直接粘贴到网页中,此他应用程序中的文本直接粘贴到网页中,此外还可以导入已有的外还可以导入已有
4、的Word文档。插入普通文文档。插入普通文本的方法非常简单,具体操作步骤如下。本的方法非常简单,具体操作步骤如下。(1)打开网页文档。打开网页文档。(2)将鼠标指针置于要输入文本的位置,输入文将鼠标指针置于要输入文本的位置,输入文本。本。http:/3.1.2设置文本属性设置文本属性n输入文本后,在文本【属性】面板中可以设置文本的各项属输入文本后,在文本【属性】面板中可以设置文本的各项属性,具体操作步骤如下。性,具体操作步骤如下。(1)打开网页文档。打开网页文档。(2)选中要设置属性的文本,在【属性】面板中的【字体选中要设置属性的文本,在【属性】面板中的【字体】下拉列表框中选择【编辑字体列表】
5、选项,弹出【编】下拉列表框中选择【编辑字体列表】选项,弹出【编辑字体列表】对话框。辑字体列表】对话框。(3)在对话框中的【可用字体】列表框中选择【宋体】,在对话框中的【可用字体】列表框中选择【宋体】,单击按钮,添加到【选择的字体】列表框中。单击按钮,添加到【选择的字体】列表框中。(4)单击【确定】按钮,将网页文本字体设置为【宋体】,单击【确定】按钮,将网页文本字体设置为【宋体】,将字体【大小】设置为将字体【大小】设置为14像素。像素。(5)单击【文本颜色】按钮,弹出颜色调色板,在调色板单击【文本颜色】按钮,弹出颜色调色板,在调色板中将【文本颜色】设置为中将【文本颜色】设置为#FF3F8B。ht
6、tp:/3.1.3插入特殊字符插入特殊字符n特殊字符包含换行符、不换行空格、版权、特殊字符包含换行符、不换行空格、版权、注册商标等特殊字符,网页中经常用到特殊注册商标等特殊字符,网页中经常用到特殊字符。下面讲述在网页中插入版权符号的方字符。下面讲述在网页中插入版权符号的方法,具体操作步骤如下。法,具体操作步骤如下。(1)打开网页文档。打开网页文档。(2)将鼠标指针置于要插入特殊字符的位置,选将鼠标指针置于要插入特殊字符的位置,选择【插入】择【插入】|【HTML】|【特殊字符】【特殊字符】|【版权【版权】命令,弹出】命令,弹出Dreamweaver提示框。提示框。(3)单击【确定】按钮,插入版权
7、符号。单击【确定】按钮,插入版权符号。(4)保存文档,按保存文档,按F12键在浏览器中预览效果。键在浏览器中预览效果。http:/3.2使使用用列列表表n在网页中使用列表可以清晰地创建可识别的在网页中使用列表可以清晰地创建可识别的大纲和目录结构。大纲和目录结构。Dreamweaver8中常用中常用的列表分为有序列表和无序列表两种形式。的列表分为有序列表和无序列表两种形式。n3.2.1插入项目列表插入项目列表n3.2.2插入编号列表插入编号列表http:/3.2.1插入项目列表插入项目列表n如果项目列表之间是并列关系,则需要生成如果项目列表之间是并列关系,则需要生成项目符号列表。插入项目列表的具
8、体操作步项目符号列表。插入项目列表的具体操作步骤如下。骤如下。(1)打开网页文档。打开网页文档。(2)将鼠标指针置于要插入项目列表的位置,选将鼠标指针置于要插入项目列表的位置,选择【文本】择【文本】|【列表】【列表】|【项目列表】命令,即可【项目列表】命令,即可插入项目列表。插入项目列表。http:/3.2.2插入编号列表插入编号列表n编号列表主要用于把文本内容设置为文本列表清单。编号列表主要用于把文本内容设置为文本列表清单。插入编号列表的具体操作步骤如下。插入编号列表的具体操作步骤如下。n打开网页文档,将鼠标指针置于要插入编号列表的打开网页文档,将鼠标指针置于要插入编号列表的位置,选择【文本
9、】位置,选择【文本】|【列表】【列表】|【编号列表】命令,【编号列表】命令,即可插入编号列表。即可插入编号列表。http:/3.3在网页中插入文件头部内容在网页中插入文件头部内容n文件头标签也就是通常说的文件头标签也就是通常说的META标签,文件头标标签,文件头标签在网页中是看不到的,它包含在网页中签在网页中是看不到的,它包含在网页中.标签之间。所有包含在该标标签之间。所有包含在该标签之间的内容在网页中都是不可见的。签之间的内容在网页中都是不可见的。n文件头标签主要包括文件头标签主要包括META、关键字、说明、刷新、关键字、说明、刷新、基础和链接等内容,下面学习常用的文件头标签的基础和链接等内
10、容,下面学习常用的文件头标签的使用。使用。n3.3.1插入插入META信息信息n3.3.2设置基础设置基础n3.3.3插入关键字插入关键字n3.3.4插入说明文字插入说明文字n3.3.5设置刷新设置刷新http:/3.3.1插入插入META信息信息nMETA元素用来描述网页文件自身的信息。元素用来描述网页文件自身的信息。META元素是网页中非常重要的元素,元素是网页中非常重要的元素,它可以记录有关当前页面的信息,也可以用来向服务器提供信息。插入它可以记录有关当前页面的信息,也可以用来向服务器提供信息。插入META信信息的具体操作步骤如下。息的具体操作步骤如下。(1)选择【插入】选择【插入】|【
11、HTML】|【文件头标签】【文件头标签】|【META】命令,弹出】命令,弹出META对话框。对话框。(2)在对话框中进行相应的设置,然后单击【确定】按钮,在代码视图中就在对话框中进行相应的设置,然后单击【确定】按钮,在代码视图中就可以看到插入的可以看到插入的META信息。信息。在在META对话框中可以进行如下设置。对话框中可以进行如下设置。【属性】:在其下拉列表框中包括【名称】和【属性】:在其下拉列表框中包括【名称】和【http-equivalent】两】两个选项。【名称】主要用于说明网页,对应于网页内容,以便于搜索引个选项。【名称】主要用于说明网页,对应于网页内容,以便于搜索引擎查找。擎查找
12、。http-equivalent相当于相当于HTTP文件头的作用,可以直接影响网页的传输。文件头的作用,可以直接影响网页的传输。【值】:表示【值】:表示META的类型。的类型。【内容】:【值】选项所对应的具体的【内容】:【值】选项所对应的具体的META中的信息中的信息http:/3.3.2设置基础设置基础n基础就是指在文件头中添加一个脚本的链接,该网页文档中所有的链接都以此链基础就是指在文件头中添加一个脚本的链接,该网页文档中所有的链接都以此链接为基准,而其他网页中的链接与该网页中的基准链接无关。设置基础的具体操接为基准,而其他网页中的链接与该网页中的基准链接无关。设置基础的具体操作步骤如下。
13、作步骤如下。(1)选择【插入】选择【插入】|【HTML】|【文件头标签】【文件头标签】|【基础】命令,弹出【基础【基础】命令,弹出【基础】对话框。】对话框。(2)在对话框中进行相应的设置,然后单击【确定】按钮,完成设置。在对话框中进行相应的设置,然后单击【确定】按钮,完成设置。在【基础】对话框中可以进行如下设置。在【基础】对话框中可以进行如下设置。Href:填入一个地址作为超级链接的基本地址,或单击【浏览】按钮选:填入一个地址作为超级链接的基本地址,或单击【浏览】按钮选择一个链接地址。择一个链接地址。【目标】:在下拉列表框中可选择链接的打开方式。【空白】是以新窗【目标】:在下拉列表框中可选择链
14、接的打开方式。【空白】是以新窗口的形式打开;【父】是在父窗口中打开;【自身】是在原来的窗口中口的形式打开;【父】是在父窗口中打开;【自身】是在原来的窗口中打开;【顶部】是在页面的顶部窗口打开。打开;【顶部】是在页面的顶部窗口打开。http:/3.3.3插入关键字插入关键字n关键字也就是与网页的主题内容相关的简短而有代表性的词汇,关键字也就是与网页的主题内容相关的简短而有代表性的词汇,这是给网络中的搜索引擎准备的。关键字一般要尽可能地概括网这是给网络中的搜索引擎准备的。关键字一般要尽可能地概括网页内容,这样浏览者只要输入很少的关键字,就能最大程度地搜页内容,这样浏览者只要输入很少的关键字,就能最
15、大程度地搜索网页。插入关键字的具体操作步骤如下。索网页。插入关键字的具体操作步骤如下。(1)选择【插入】选择【插入】|HTML|【文件头标签】【文件头标签】|【关键字】命令,【关键字】命令,弹出【关键字】对话框。弹出【关键字】对话框。(2)在对话框中的【关键字】文本框中输入有关网页的关键字,在对话框中的【关键字】文本框中输入有关网页的关键字,单击【确定】按钮,即可插入关键字。单击【确定】按钮,即可插入关键字。http:/3.3.4插入说明文字插入说明文字n关键字忌讳的是词汇的冗长,而说明则忌讳词汇过于简短。说明为设计关键字忌讳的是词汇的冗长,而说明则忌讳词汇过于简短。说明为设计者提供了可以详细
16、说明网页内容的机会,而关键字是为了让搜索引擎最者提供了可以详细说明网页内容的机会,而关键字是为了让搜索引擎最大程度地捕捉到网页。插入说明文字的具体操作步骤如下。大程度地捕捉到网页。插入说明文字的具体操作步骤如下。(1)选择【插入】选择【插入】|【HTML】|【文件头标签】【文件头标签】|【说明】命令,弹出【说明【说明】命令,弹出【说明】对话框。】对话框。(2)在对话框中的【说明】文本框中输入有关网页的说明,单击【确定】按在对话框中的【说明】文本框中输入有关网页的说明,单击【确定】按钮即可。钮即可。http:/3.3.5设置刷新设置刷新(1)选择【插入】选择【插入】|HTML|【文件头标签】【文
17、件头标签】|【刷新】命令,弹出【刷新【刷新】命令,弹出【刷新】对话框】对话框(2)在对话框中进行相应的设置,然后单击【确定】按钮,完成设置。在对话框中进行相应的设置,然后单击【确定】按钮,完成设置。在【刷新】对话框中可以进行如下设置。在【刷新】对话框中可以进行如下设置。【延迟】:网页被浏览器下载后所停留的时间,以秒为单位。【延迟】:网页被浏览器下载后所停留的时间,以秒为单位。【转到【转到URL】:通过单击右侧的【浏览】按钮来输入动作所转向的网】:通过单击右侧的【浏览】按钮来输入动作所转向的网页或文档的页或文档的URL。【刷新此文档】:重新将当前的网页从服务器载入,将更新的网页显【刷新此文档】:
18、重新将当前的网页从服务器载入,将更新的网页显示在浏览器中。示在浏览器中。http:/3.4插插入入图图像像n一幅幅图像和一个个漂亮的按钮、标记不但一幅幅图像和一个个漂亮的按钮、标记不但使网页更加美观、形象和生动,而且使网页使网页更加美观、形象和生动,而且使网页中的内容更加丰富多彩。可见,图像在网页中的内容更加丰富多彩。可见,图像在网页中的作用是非常重要的。中的作用是非常重要的。n3.4.1插入图像插入图像n3.4.2设置图像属性设置图像属性n3.4.3插入翻转图像插入翻转图像http:/3.4.1插入图像插入图像n在在Dreamweaver中插入图像非常简单,具体操作中插入图像非常简单,具体操
19、作步骤如下。步骤如下。n(1)打开网页文档,将鼠标指针置于要插入图像的位打开网页文档,将鼠标指针置于要插入图像的位置。置。n(2)选择【插入】选择【插入】|【图像】命令,弹出【选择图像【图像】命令,弹出【选择图像源文件】对话框,在对话框中选择图像。源文件】对话框,在对话框中选择图像。n(3)单击【确定】按钮,即可插入图像。单击【确定】按钮,即可插入图像。http:/3.4.2设置图像属性设置图像属性n插入图像后,其四周会出现可编辑的缩放手柄,这说明该图像被选择,同时【属性】面插入图像后,其四周会出现可编辑的缩放手柄,这说明该图像被选择,同时【属性】面板中显示出关于图像的属性设置,这时就可以根据
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 基础教程 上机 指导 插入 对象
限制150内