信息技术 第2讲 Computer Base Series Course 主讲人:夏耘 Copyright_2008, By USST 网址：http://202.120.222.9
上周实验中的问题
图像 图1-2 Photoshop CS的工作界面 选取工具 渐变和油漆桶工具 前景/背景颜色设置 菜单栏 工具属性栏 工具箱 控制面板 标题栏 工作区 状态栏 图1-2 Photoshop CS的工作界面 选取工具 渐变和油漆桶工具 前景/背景颜色设置
图章在两张图片背景相同的情况下使用,例如P119的蝴蝶与兰花 新建图片文件时注意选择RGB模式
动画 运动动画的变化: 位置 方向 颜色 大小 透明 案例1
动画 分图层存放对象,一个对象占一个图层 案例2
本课要点 了解HTML语言 认识Dreamweaver 站点管理 编辑网页文本和图像 超链接的应用
具体要求 了解HTML语言 掌握本地站点的创建与管理方法 掌握文档属性的设置方法 掌握文本的插入及属性设置方法 掌握不同图像的插入及编辑方法 掌握创建文本、图像、热点、锚点及邮件超链接的方法
网页基础语言——HTML HTML语言可以在代码视图和“记事本”等编辑器中编写。本书着重于介绍设计视图，因为它的直观性更强，添加对象后马上就能看到其效果。HTML语言都是由标签构成的，标签有两大类：一是封闭标签，即由起始标签（首标签）和末标签组成，也称为成对标签，如<html>和</html>；另一种是不封闭标签，即只有首标签，没有末标签，如<br>。
例1 <html> <head> <title>我的第一个HTML文档</title> <body> <h1 align =center >我的一号字标题</h1> <h2 align =center >我的二号字标题</h2> <h3 align =right>我的三号字标题</h3> <h4 align =right>我的四号字标题</h4> <h5 align =left >我的五号字标题</h5> <h6 >我的六号字标题</h6> </body> </html>
例2 <html> <head> <title>文章字体举例</title> <body> <font color="red" size="1">1号字体红色</font> <font color="blue" size="2">2号字体蓝色</font> <font color="yellow" size="3">3号字体黄色</font> <font color="green" size="4">4号字体绿色</font> <font color="orange" size="5">5号字体橙色</font> <font color="purple" size="6">6号字体紫色</font> <font color="black" size="7">7号字体黑色</font> <font color="#ff0000" size="1">1号字体红色</font> <font color="#0000ff" size="2">2号字体蓝色</font> <font color="#ffff00" size="3">3号字体黄色</font> <font color="#00ff00" size="4">4号字体绿色</font> <font color="#ffa500" size="5">5号字体橙色</font> <font color="#800080" size="6">6号字体紫色</font> <font color="#000000" size="7">7号字体黑色</font> </body> </html>
例3 <html> <body> <font size=7 color =green> <b>我中黑体</b> <i>我是斜体</i> <p><u color=green>我是下划线</u></p> </font> <font size=7color =red >25<sup>3</sup></font><br> <font size=7color =green>a<sub><font size =4 color =blue>(3)</font></sub></font><p> <font size=3 color =bule ><strike >兰色字</strike></font> </body> </html>
例4 <html> <body> <!-- <marquee direction =right >direction right 我的右移动文字体</marquee> <marquee direction =left>direction left 我的左移动文字体</marquee> <marquee behavior =scroll> behavior scoll 从左开始循环，不停</marquee> <marquee behavior =slide >behavior slide 只循环一次,文本显示</marquee> <marquee behavior =alternate >behavior alternate 从左到右来回循环</marquee> <marquee loop =1 >说明循环的次数，文本不显示</marquee> <marquee scrollamount =4>数值越大移动的越快，从1开始</marquee>//--> <marquee width =800 height =100 bgcolor =red >缺省：direction: left behavior:scroll</marquee>
例4 <marquee direction =right behavior =scroll loop=0 scrollamount=7 scrolldelay =1 width =900 height =100 bgcolor =green> <font size=7>我的第一个滚动文本</font></marquee> <marquee width =600 height =400 ><marquee direction =up ><div align=center >这是我的上下文本</div></marquee></marquee> <marquee direction =up><center>这是我的上下文本</center></marquee> </body> </html>
例5 <html> <head> <title>换行举例</title> <body> 测试换行和分段，这个是分段的效果。<p> 下面是换行的效果。 <p> </p> 测试换行和分段，这个是换行的效果。<br> 上面是分段的效果。 </body> </html>
§1.1 HTML的基本概念 1．标记 在HTML中用于描述功能的符号称为“标记”，它是用来控制文字、图像等显示方式的符号。标记在使用时必须用“< >” 括起来，标记有单标记和双标记之分。 1）单标记 所谓“单标记”是指只需单独使用就能完整地表达意思的标记。这类标记的语法是：<标记名称>。 2）双标记 所谓“双标记”是指由“始标记”和“尾标记”两部分构成，必须成对使用的标记。其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器到这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。双标记的语法是： <标记>内 容</标记>，其中“内容”是指要被这对标记施加作用的部分。
2．标记属性 许多单标记和双标记的始标记内可以包含一些属性，其语法是：<标记名称 属性1 属性2 属性3 … >，各属性之间无先后次序，属性也可省略（即取默认值）。例如单标记<HR>表示在文档当前位置画一条水平线，一般是从窗口中当前行的最左端一直画到最右端，它可以带这么一些属性：<HR size="3" align="LEFT" width="75%">。其中，size属性定义线的粗细，属性值取整数，缺省值为1；align属性表示对齐方式，可取LEFT（左对齐，默认值），CENTER（居中），RIGHT（右对齐）；width属性定义线的长度，可取相对值（由一对" "号括起来的百分数，表示相对于整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如width="300"），默认值是100%。
3．注释语句 和其他计算机语言一样，HTML语言也提供了注释语句。注释语句的格式为：<！--注释文-->，“<！--”表示注释开始，“-->”表示注释结束，中间的所有内容表示注释文。注释语句可以放在任何地方，注释内容不在浏览器中显示出来，仅供设计人员阅读方便。
§ 1.2 HTML的基本结构 HTML网页文件主要由文件头和文件体两部分内容构成。其中，文件头是对文件进行一些必要的定义，文件体是HTML网页的主要部分，它包括文件所有的实际内容。下面是HTML网页的基本结构。 <HTML> HTML文件开始 <HEAD> 文件头开始 文件头 </HEAD> 文件头结束 <BODY> 文件体开始 文件体 </BODY> 文体结束 </HTML> HTML文件结束
在HTML网页文件的基本结构中主要包含以下几种标记。 <HTML>和</HTML>标记放在网页文档的最外层，表示这对标记间的内容是HTML文档。<HTML>放在文件开头，</HTML> 放在文件结尾，中间嵌套其他标记。 2．HEAD文件头部标记 文件头用<HEAD>和</HEAD>标记，该标记出现在文件的起始部分，标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间、搜索引擎可用的关键词等。 在HEAD标记内最常用的标记是网页主题标记——TITLE标记，它的格式为：<TITLE>网页标题</TITLE>。网页标题是提示网页内容和功能的文字，它将出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。
3．BODY文件主体标记 文件主体用<BODY>和</BODY>标记，它是HTML文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。它的格式为：<BODY background=“image-URL” bgcolor=“color” text=“color” link=“color” alink=“color” vlink=“color” leftmargin=“value” topmargin=“value”>…</BODY>。
§1.3 HTML的语法规则 HTML语言应遵循以下的语法规则。 （1）HTML文件以纯文本形式存放，扩展名为“*.HTM”或“*.HTML”。 （2）HTML标记不区分大小写。 （3）多数HTML标记可以嵌套，但不可以交叉。 （4）HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。
（5）HTML源文件中的换行、回车符和空格在显示效果中是无效的。显示内容如果要换行必须用<BR>标记，换段用<P>标记，<P>表示段落开始，</P>表示段落结束。页面中的空格是通过代码控制的，一个半角空格使用一个 表示，多个空格只需使用多次即可。 与空格的表示方法有些相似，一些特殊符号是凭借特殊的符号码来表现。通常由“&”前缀，加上字符对应的名称，再加上后缀“；”而组成。如书中表3-1所示列出了一些常见的HTML特殊符号的表示方法。 （6）网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。
§1.4 HTML的文本格式标记 在“<BODY>…</BODY>”标记对之间直接输入文字就可以显示在浏览器窗口中，但是要制作出真正实用的网页，还必须对输入的文字进行适当的修饰。 1.4. 1 标题格式标记 功能：用于定义文章内章节标题的显示格式。 格式：<Hn align=“对齐方式”>标题内容</Hn>。 属性：n 表示标题字号的级别，可以是1～6之间的任意整数，数字越小，字号越大。align表示水平对齐方式，取值可以为LEFT（左对齐）、RIGHT（右对齐）、CENTER（居中对齐）、BOTTOM（位于底端）和TOP（位于顶部）。 说明：用该标记实现文章标题的效果有限，通常用FONT标记实现文章标题丰富多彩的效果。
1.4. 2 文字格式标记 功能：设置网页中普通文字的显示效果。 格式：<FONT face=“字体” size=“字号” color=“颜色”>文字</FONT>。 属性：face 表示文字的字体，如“黑体”表示黑体，“宋体”表示宋体。size表示字号，用来设定文字的大小，其值为1~7的整数，值越大，字越大；若数字前面加上“+”或“—”号，则表示相对基准字号的大小，如基准字号为3号，则+3表示6号字。基准字号用如下标记定义：<BASEFONT size=“基准字号”>，其中“基准字号”也是1~7之间的整数。color用来设定文字的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。
1.4. 3 字型设置标记 功能：设置文字的风格，如黑体、斜体、带下划线等，可以单独使用，也可以混合使用产生复合修饰效果 <B>…</B>：文字以粗体显示。 <I>…</I>：文字显示为斜体。 <U>…</U>：显示下划线。 <STRIKE>…</STRIKE>：删除线。 <BIG>…</BIG>：使文字大小相对于前面的文字增大一级 <SMALL>…</SMALL>：使文字大小相对于前面的文字减小一级。 <SUP>…</SUP>：使文字成为前一个字符的上标 <SUB>…</SUB>：使文字成为前一个字符的下标。 <BLINK>…</BLINK>：使文字显示为闪烁效果。 <TT>…</TT>：以等宽体显示西文字符。 <CITE>…</CITE>：输出引用方式的字体，通常是斜体。 <EM>…</EM>：强调文字，通常用斜体加黑体 <STRONG>…</STRONG>：特别强调的文字，通常也是斜体加黑体。 注：有些标记的效果必须在动态环境下才能显示，例如<BLINK>标记。
1.4. 4 段落标记 功能：设置文章段落的开始和结束。浏览器在解释HTML文档时，会自动忽略文档中的回车、空格以及其他一些符号，所以在文档中输入回车，并不意味着在浏览器内将看到一个不同的段落，当需要在网页中插入新的段落时，可以使用段落标记，它可以将标记后面的内容另起一段。 格式：<P align=“水平对齐方式”>…</P>。 属性：align是水平对齐方式，取值可以为LEFT（左对齐）、RIGHT（右对齐）和CENTER（居中对齐）。
功能：另起一行显示文字。 1.4. 5 强制换行标记 格式：<BR> 说明：这是一个单标记，与段落标记在显示效果上都是另起一行书写，但它们的不同之处是：段落标记的行距要宽。在<BR>使用上还有一定的技巧，如果把<BR>加在<P></P>标记对的外边，将创建一个大的回车换行，即<BR>前边和后边文本的行与行之间的距离比较大，若放在<P></P>的里边则<BR>前边和后边文本的行与行之间的距离将比较小。
1.4. 6 预排格式标记 功能：保留文字在纯文字编辑器中的格式，原样显示，不受前面的文字格式和段落格式的影响。 格式：<Pre>预排格式的文本</Pre>。 说明：若用其他文本编辑器编好了一段文本，如果把它放进网页文件，常常需要加许多标记才能达到原来的显示效果，否则浏览器会自动忽略文档中的回车、空格以及其他一些符号。如果在文本开头加上<Pre>，在末尾加上</Pre>，那么中间就不用加其他标记了，这时中间的回车换行符等就起作用了，可以原样显示。
1.4. 7 插入水平线标记 功能：在页面上画横线，可用于页面上内容的分割。 1.4. 7 插入水平线标记 功能：在页面上画横线，可用于页面上内容的分割。 格式：<HR width=“value1” size=“value2” align=“value3” color=“color1” noshade>。 属性：width用来设置水平线的宽度长度，value1可以是点数，如50、100、200等，窗口改变时，横线宽度不变；也可以是相对窗口的百分比，如50%、100%,默认是100%。size 用来设置水平线的厚度，value2的值可以是绝对点数，也可以是（相对长度的）百分比，默认高度为1。align用来设置水平线的对齐方式，value3的值可以是LEFT（居左）、RIGHT(居右)、CENTER（居中），默认是居中。color用来设置水平线的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。noshade属性不用赋值，而是直接加入标记即可使用，它表示加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。
功能：使用缩排标记，可以实现页面文字的段落缩排，实现多次缩排可以使用多次缩排标记。 1.4. 8 文本缩排标记 功能：使用缩排标记，可以实现页面文字的段落缩排，实现多次缩排可以使用多次缩排标记。 格式：<Blockquote>文本</Blockquote>。
1.4. .9 列表标记 分段排列出一组级别相同的项目称为列表。如果在每段前面加上一个相同的符号，则称为无序列表；如果每段前面加上一个序号，则称为有序列表。 1．无序列表 功能：设置无序列表。 格式： <UL type=“加重符号类型”> <LI type=“加重符号类型”>列表项目1 <LI type=“加重符号类型”>列表项目2 …… </UL>。 属性：在无序列表的开始和结束处，分别是<UL>和</UL>标记，每一项列表条目之前必须加上<LI>标记。type 属性表示在每个项目前显示加重符号的类型，共有三种选择：type=“disc”时，列表符号为“●”（实信圆），type=“circle”时，列表符号为“○”（空心圆），type=“square”时，列表符号为“■”（实心方块）。<UL>和<LI>标记都可以定义type参数，使得在一个列表中，不同的列表项目可以用不同的列表符号，但一般情况下不要这样设置。
2．有序列表 功能：设置有序列表。 格式： <OL type=“序号类型”start=“起始号码”> <LI type=“序号类型”>列表项目1 <LI type=“序号类型”>列表项目2 …… </OL>。 属性：在有序列表的开始和结束处，分别是<OL>和</OL>标记，每一项列表条目之前必须加上<LI>标记。type 属性表示在每个项目前显示的序号类型，其值可以为1（阿拉伯数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）。start 用于设置编号的开始值，默认值为1，<LI>标记设定该条目的编号，其后的条目将以此作起始数目逐渐递增。 说明：无序列表和有序列表可以嵌套，产生缩进的、有层次的列表项目。
3．定义列表 功能：用于需要对列表条目进行简短说明的场合。 格式： <DL> <DT>列表条目1 <DD>条目1的说明 <DT>列表条目2 <DD>条目2的说明 …… </DL>。 属性：在定义列表的开始和结束处，分别是<DL>和</DL>标记，每一项列表条目之前必须加上<DT>标记，用<DD>标记定义的条目说明文字自动向右缩进。
2）bgcolor ：为滚动文字添加背景颜色。 1.4. 10 文字滚动标记 功能：在页面中制作文字滚动的效果。 格式：<MARQUEE behavior =“value” bgcolor =“color” direction =“value” height =“value” width =“value” loop =“value ” scrollamount =“value ” scrolldelay =“value” hspace=“value” vspace=“value”>滚动文字</MARQUEE>。 属性如下。 1） behavior ：设置文字滚动方式。共有三种滚动方式供选择：behavior =“alternate”时，文字将交替进行滚动；behavior =“scroll”时，文字将循环往复滚动；behavior =“slide”时，文字将只进行一次滚动。 2）bgcolor ：为滚动文字添加背景颜色。 3）direction ：设置文字滚动的方向，value的取值可以为up、down、left和right四种，分别表示滚动文字的方向向上、向下、向左和向右。 4）height和width：设置文字滚动的区域，取值为点数或相对于窗口的百分比。 5）loop ：设置文字滚动的循环次数。默认值为-1，-1表示无限次循环次数。
6）scrollamount ：调整文字滚动速度，数值越大速度越快。 7）scrolldelay ：设置在每一次滚动的间隔产生一段时间的延迟，数值越大延迟越长 8）hspace和vspace ：设置文字滚动的水平垂直空间。
1.2 初识Dreamweaver 8 1.2.1 Dreamweaver 8的启动 “开始”｜“Macromedia”｜”Dreamweaver 8” 工作区设置对话框
1.2.2 Dreamweaver 8的工作环境 面板组 文件面板 文档编辑窗口 插入栏 文档工具栏 标签状态栏 属性检查器
1.2 初识Dreamweaver 8 1.2.2 Dreamweaver 8的工作环境 “插入”面板组 文档 工具栏
1.2 初识Dreamweaver 8 1.2.2 Dreamweaver 8的工作环境 “属性”检查器 文档编辑窗口
1.2 初识Dreamweaver 8 1.2.2 Dreamweaver 8的工作环境 浮动面板组 常用的浮动面板组 的操作方法如下： 展开和折叠浮动面板组 移动浮动面板组 重新组合浮动面板
Dreamweaver是一种所见即所得的可视化网页编辑软件。它有3种设计视图可供选择，熟悉HTML语言的用户可以直接在代码视图中编写网页，熟悉排版的用户可以直接在设计视图中编辑。无论以哪一种方式制作网页，都必须先创建站点，再进行文本及图像编辑。 制作的网页（包括网页中用到的图像）需要上传到网络上。为了网页图像正确显示，也为了便于文件调用，常在制作网站内容前先建立站点，将网站中用到的所有素材都放置于站点中进行管理，所以建立站点是制作网页的第一步。
1.3 创建本地站点 规划： 在F盘新建文件夹，作为整个站点内容的文件夹，也是网站的根目录。 1.3 创建本地站点 规划： 在F盘新建文件夹，作为整个站点内容的文件夹，也是网站的根目录。 命名网站，分栏目，将栏目内容分别存放在网站根目录下的对应文件夹里。 网站所有素材图像存放于根目录下的文件夹“image”中。
1.3 创建本地站点 创建一个网站应遵循的流程为： 1.对站点进行规划 2.素材准备 3.管理站点。（首先要创建一个站点） 1.3 创建本地站点 创建一个网站应遵循的流程为： 1.对站点进行规划 2.素材准备 3.管理站点。（首先要创建一个站点） 4.制作Web页面。 7.设置Web应用程序运行环境。 8.创建动态页。 9. 测试站点。 10. 上传站点到远程服务器
1.4 创建网站 1.4.1 网站的规划 确定站点目标 规划站点结构 规划站点内容 规划站点的导航机制 明确站点的风格
1.4 创建网站 1.4.2 定义本地站点 菜单【站点】｜ 【管理站点】 创建新站点 编辑站点 复制站点 删除站点 导入和导出站点 1.4 创建网站 1.4.2 定义本地站点 菜单【站点】｜ 【管理站点】 创建新站点 通过“站点定义向导”创建 通过“高级”设置对话框创建 编辑站点 复制站点 删除站点 导入和导出站点
1.4 创建网站 1.4.3 管理站点 在站点中选择多个文件 在本地站点中剪切、粘帖、复制、删除、重命名文件或文件夹 创建文件或文件夹
1.4 创建网站 1.4.3 管理站点 文件面板的使用 站点文件视图 测试服务器视图 站点地图视图
1.4 创建网站 1.4.3 管理站点 站点地图视图 利用站点地图可以以图形化的方式查看站点结构，构建网页之间的链接。 1.4 创建网站 1.4.3 管理站点 站点地图视图 利用站点地图可以以图形化的方式查看站点结构，构建网页之间的链接。 可用于管理站点内的文件和目录，对站点内的文件进行改名、编辑和删除等基本操作。 可用于完成添加、删除、更改站点内的超链接等操作。
1.4 创建网站 1.4.4 网页文件的基本操作 创建HTML文档 打开已建的HTML文档 保存指定文件 关闭文件 1.4 创建网站 1.4.4 网页文件的基本操作 创建HTML文档 文件→新建→新建文档→常规→类别→基本页 在文件面板中→右击→新建文件→双击 打开已建的HTML文档 文件→打开 在文件面板中→双击该文档 保存指定文件 文件→保存（或Ctrl+S) 文件→另存为 文件→保存全部 关闭文件 文件→关闭