计算机高级教程第8章_第1页
计算机高级教程第8章_第2页
计算机高级教程第8章_第3页
计算机高级教程第8章_第4页
计算机高级教程第8章_第5页
已阅读5页，还剩52页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

大学计算机高级教程主讲教师:E-Mail:2目录计算机硬件技术基础1.计算机软件技术基础2.WINDOWS7操作系统及应用3.办公自动化软件应用技术4.计算机网络技术5.3目录信息管理技术7.网页制作技术8.常用工具软件介绍9.信息安全技术10.多媒体技术6.48.1网页设计与制作概述8.2HTML语言基础8.3使用Dreamweaver制作网页第8章网页制作技术5网页是构成Web站点的基本单位，是一种包含HTML格式内容的文本文件，它存放在Internet上的Web服务器中，当用户在客户端浏览器中输入网址发出请求时，网页就被快速传送到客户机上，经过浏览器解释，在窗口中显示丰富多彩的内容。网站是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。利用这些网页，将各种各样的信息资源发布在互联网上供用户浏览使用，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。8.1网页设计与制作概述一、网页与网站第8章网页制作技术61.网页设计软件（1）文本编辑软件

HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。网页可以使用多种文本编辑器进行编辑，例如记事本、EditPlus等。8.1网页设计与制作概述二、网页设计常用软件第8章网页制作技术71.网页设计软件（2）FrontpageFrontpage，是微软公司出品的一款网页制作入门级软件，Frontpage能够方便、快捷、直观地创建和发布网页，简化了大量工作，微软公司将Frontpage封装入Office之中，称为Office家族中的一员。

8.1网页设计与制作概述二、网页设计常用软件第8章网页制作技术81.网页设计软件（3）Dreamweaver

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。用户使用Dreamweaver不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不久能满足专业网页编辑人员的需要，同时也容易被广大用户所掌握。所以Dreamweaver是网页设计者的首选工具。8.1网页设计与制作概述二、网页设计常用软件第8章网页制作技术92.网页美化软件（1）PhotoshopPhotoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。其功能完善、性能稳定、使用方便，是美化网页的常用工具。8.1网页设计与制作概述二、网页设计常用软件第8章网页制作技术102.网页美化软件（2）FireworksFireworks是由Macromedia公司开发的图形处理工具，是专门为制作网页图形而设计的软件。Fireworks能自动切割图像、生成光标动态感应的JavaScript程序等，而且Fireworks具有强大的动画功能和相当完美的网络图像生成器。8.1网页设计与制作概述二、网页设计常用软件第8章网页制作技术112.网页美化软件（3）FlashFlash是美国Macromedia公司所设计的一种二维矢量动画软件（现Adobe公司产品），是一种交互式动画设计软件，用它可以将音乐、声效、动画以及富有创意的界面融合在一起，制作出高品质的网页动态效果。Flash主要用于网页设计和多媒体创作领域，功能十分强大和独特，已经成为交互式矢量动画的标准，Flash广泛应用于网页动画制作、教学动画演示、在线游戏等的制作中。Flash、Dreamweaver和Fireworks通常被称为“网页三剑客”。8.1网页设计与制作概述二、网页设计常用软件第8章网页制作技术128.1网页设计与制作概述8.2HTML语言基础8.3使用Dreamweaver制作网页第8章网页制作技术138.2HTML语言基础一、HTML文档的基本结构第8章网页制作技术一个基本的HTML文档的基本结构如下：<html><head><title>

网页的标题

</title></head><body>

网页的主体部分

</body></html>14第8章网页制作技术8.2HTML语言基础一、HTML文档的基本结构一个完整的HTML文档通常包括以下4对标记。1.HTML标记：<html>…</html><html>是开始标记，</html>是结束标记，它们分别是网页的第一个和最后一个标记，其他标记都位于这两个标记之间。2.头部标记：<head>…</head>提供与网页有关的各种信息，其间可以包含网页的标题、使用的脚本、样式定义等。3.标题标记：<title>…</title>这两个标记之间的文字出现在浏览器标题栏中，标题标记只能放在头部标记<head>与</head>之间。4.主体标记：<body>…</body>定义HTML文档的主体部分。15第8章网页制作技术一、HTML文档的基本结构8.2HTML语言基础下面介绍一个简单的示例：1.打开记事本，在记事本中输入下面的HTML代码。<html><head><title>安徽理工大学计算机科学与工程学院</title></head><bodybgcolor="#eeeeee">计算机科学与工程学院欢迎您！</body></html>16第8章网页制作技术一、HTML文档的基本结构8.2HTML语言基础2.将记事本中的文件保存为HTML文档格式，文件后缀名为html或htm，例如将该文件保存为Exam1.html，用浏览器打开该网页。17第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础在HTML中通过文本格式标记可以设置文本的显示样式，以满足用户的要求；通过多媒体元素标记可以在网页中插入图像、动画、背景音乐、滚动字幕等，使网页变得更加生动。下面介绍常用的文本格式标记和多媒体元素标记。18第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础1.字体标记字体标记的作用是设置文本的字体、大小、颜色等。字体标记为<font>…</font>，该标记的常用属性如下表所示。属性功能示例face设置文本的字体，其值为“宋体”、“黑体”、“楷体”等<fontface=“楷体”>字体为楷体</font>size设置文本的字体大小，其值为1、2、3等<fontsize=“3”>3号字体</font>color设置文本的显示颜色<fontcolor=“red”>红色</font>192.字形标记字形标记用于设置标记之间的文本样式，例如加粗、斜体、下划线等。加粗标记<b>…</b>斜体标记<i>…</i>下划线标记<u>…</u>第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础思考：如何使文本的显示效果为粗体、斜体和带下划线？203.标题标记使用标题标记可以设置文档的各级标题，标题标记的格式为<hn>…</hn>，其中n的取值为1~6，代表标题的级别，n取值越小字体越大，例如<h1>…</h1>定义一级标题，字体最大；<h6>…</h6>定义六级标题，字体最小。标题标记常用的属性为align，该属性定义标题的对齐方式，align=left表示左对齐，align=right表示右对齐，align=center表示居中。

第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础21下面是一个简单的示例：<html><head><title>标题标记实例</title></head><body><h1align=center>这是一级标题居中</h1><h2align=left>这是二级标题左对齐</h2><h3align=right>这是三级标题右对齐</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body></html>第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础22第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础4.段落标记使用段落标记可以是标记后面的文本另起一段，下一段内容与上一段内容之间空一行，段落标记的格式为<p>，也可以使用双标记<p>…</p>。段落标记的常用属性为align，用于设置段落文本的对齐方式，段落标记的align属性使用方法与标题标记相同。23第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础5.水平线标记

在网页中经常用到水平线以美化页面，水平线标记为<hr>，该标记是单标记，通过水平线标记的相关属性可以设置水平线的显示样式，其常用属性如下表所示。属性功能示例align设置水平线对齐方式，取值可以为left,right,center水平线居中：<hralign=“center”>size设置水平线的宽度，单位为像素水平线宽度为2：<hrsize=“2”>width设置水平线的长度，单位可以为页面百分比或像素水平线长度为页面宽度的80%：<hrwidth=“80%”>color设置水平线的颜色水平线红色：<hrcolor=“red”>246.换行标记与特殊字符在网页中如果要换行需要使用换行标记<br>，如果要插入特殊字符也需要使用相应的特殊字符标记，下表给出了常用特殊字符的标记。第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础字符标记字符标记换行<br>注册符号（®）®空格

人民币符号（¥）¥引号(“)"大于号（>）>与符号(&)&小于号（<）<版权符号(©)©正负号（±）±257.多媒体元素标记在网页中插入多媒体元素，如图像、音乐、滚动字幕等，可以制作出图文并茂的网页，使得页面更加生动。（1）图像标记<img>

使用图像标记<img>可以在网页中插入图像，支持的图像格式有GIF、JPEG、BMP、PNG等，其中在网页中显示的图像的常见格式为JPEG和GIF。图像标记的基本格式如下：<imgsrc=“图像的文件名”

align=“对齐方式”

…>第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础26在<img>标记中可以使用相关属性，常用属性如下表所示。第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础属性功能示例src设置插入图像的文件名<imgsrc=“01.gif”>align设置图像的对齐方式，取值可以为left,center,right,top,bottom<imgsrc=“01.gif”align=“center”>width设置图像的宽度，单位为像素<imgsrc=“01.gif”width=“300”>height设置图像的高度，单位为像素<imgsrc=“01.gif”heigth=“300”>border设置图像的边框，默认为0，无边框<imgsrc=“01.gif”border=“0”>alt设置图像的替换文本，当浏览器不能显示图像、鼠标指向该图像或加载时间过长时显示该文本<imgsrc=“01.gif”alt=“这是一张图片”>27下面是一个简单的示例：<html><head><title>图像标记实例</title></head><body><h2align="left">计算机科学与工程学院主页图片</h2><imgsrc="05.jpg"width="778"height="130"border="0"alt="计算机科学与工程学院"></body></html>

第8章网页制作技术二、文本格式与多媒体元素标记8.2HTML语言基础28（2）背景音乐标记<bgsound>

通过背景音乐标记可以在页面中插入背景音乐，网页打开后自动播放音乐，背景音乐标记的使用格式如下：

<bgsoundsrc=“音乐文件名”loop=“n1”balance=“n2”volume=“n3”>

其中src属性设置要播放的音乐文件，音乐文件的格式可以是mid文件、wav文件、mp3文件等；loop属性设置音乐播放的次数，取值为整数，如果要让背景音乐循环播放，应将属性值设置为-1，该属性的默认值为1；balance属性设置音量如何分配到左右声道中，取值范围为-10000~，若表示左右声道平衡状态应取值为0；volume属性确定背景音乐的音量，取值范围为-10000~0之间，0表示最大音量。二、文本格式与多媒体元素标记8.2HTML语言基础第8章网页制作技术29（3）滚动字幕标记<marquee>…</marquee>

在网页中使用滚动字幕可以增强信息的关注度，使页面更加生动活泼，滚动字幕的常用格式如下：

<marqueebehavior=“滚动方式”

direction=“滚动方向”

bgcolor=“背景颜色”

width=“宽度”

height=“高度”

scrollamount=“每次移动的像素值”

scrolldelay=“两次移动的时间间隔”

loop=“循环次数”>…</marquee>二、文本格式与多媒体元素标记8.2HTML语言基础第8章网页制作技术30<marquee>标记的属性较多，其中bgcolor、width、height、loop属性的作用与前面介绍的相同，这里不在赘述。下表列出了<marquee>标记的其他常用属性。二、文本格式与多媒体元素标记8.2HTML语言基础第8章网页制作技术属性功能behavior设置字幕的滚动方式，取值有alternate、scroll和slide，其中alternate表示字幕左右交替移动；scroll表示按direction属性中规定的方向滚动；slide表示按direction属性规定的方向滚动，滚动到末端停止。direction设置字幕滚动方向，取值有down、up、left和rightscrollamount设置滚动字幕每次移动的像素值，值越大，移动越快scrolldelay设置两次移动的时间间隔，值越大，移动越慢onmouseover鼠标移到滚动字幕上的事件onmouseout鼠标移出滚动字幕上的事件31超链接是一种允许同其他网页或站点之间进行连接的元素，是由源端点到目的端点的一种跳转，源端点可以是网页中的文本或图像等，目标端点可以是任意的网络资源，例如网页、图像、音乐、动画或其他文件等。超链接标记为<a>…</a>，该标记的使用格式如下：<ahref=“url”title=“提示信息”

target=“_blank”>…</a>三、超链接标记8.2HTML语言基础第8章网页制作技术32超链接标记的常用属性三、超链接标记8.2HTML语言基础第8章网页制作技术属性功能示例href设置超链接目标地址<ahref=“”>网易</a>title设置超链接提示标题文本<ahref=“”title=“网易首页”>网易</a>target设置目标文档打开的位置，其值可以是一个窗口名称，也可以是_blank、_self，该属性为可选项，默认为_self表示在源窗口中打开目标地址，_blank表示在新窗口中打开在空白窗口中打开目标文档：<ahref=“”target=“_blank”>网易</a>33三、超链接标记8.2HTML语言基础第8章网页制作技术<a.>…</a>标记之间的内容为源端点，href属性值为目标地址，根据目标地址的不同，可以将链接分为三类：1、相对链接2、绝对链接3、锚点链接

<html><head><title>超链接实例</title></head><body>这是一个锚点：<aname="top">顶端</a><br><br>这是一个相对链接：<ahref="index.html">本站首页</a><br><br>这是一个绝对链接：<ahref="d:\images\1.jpg">我的照片</a><br><br>这是一个锚点链接：<ahref="#top">本页顶端</a><br></body></html>34在网页中表格常用于页面布局和信息组织，是网页设计中应用非常广泛的一种页面格式，表格标记的基本格式如下：<table><tr><td>列标题</td>…<td>列标题</td></tr><tr><td>单元格内容</td>…<td>单元格内容</td></tr>…<tr><td>单元格内容</td>…<td>单元格内容</td></tr></table>

其中<table>…</table>表示插入表格；<tr>…</tr>表示在表格中插入一行；<td>…</td>表示在行中插入一列。四、表格标记8.2HTML语言基础第8章网页制作技术35表格标记有大量的属性，可以设置不同的显示效果，下面介绍常用的表格标记属性。1.align属性

align属性用于设置表格在页面中的对齐方式，默认值为left，还可以取值为center和right。2.width和height属性

width和height属性用于设置表格的宽度和高度，宽度和高度的单位可以是像素，也可以是百分数。3.bgcolor和background属性

bgcolor属性用于设置表格的背景色，background用于设置表格的背景图像。四、表格标记8.2HTML语言基础第8章网页制作技术364.cellspacing和cellpadding属性

cellspacing用于设置单元格之间的距离，cellpadding设置表格内文本和单元格边框之间的距离。5.border和bordercolor属性

border属性用于设置表格边框线的宽度，单位为像素，默认值为0，表示无边框；bordercolor属性用于设置表格边框线的颜色，bordercolor属性要与border属性一起使用，只有当border取值不为0时bordercolor属性才能生效。四、表格标记8.2HTML语言基础第8章网页制作技术37思考：下面网页中的表格如何实现？四、表格标记8.2HTML语言基础第8章网页制作技术388.1网页设计与制作概述8.2HTML语言基础8.3使用Dreamweaver制作网页第8章网页制作技术39Dreamweaver是美国MACROMEDIA公司开发的集网页制作和网站管理于一身的所见即所得网页设计软件，它具有强大的网页制作功能和简单易用等特性，使用Dreamweaver设计网页使用户的工作变得更加轻松。使用Dreamweaver的可视化编辑功能，可以快速创建Web页面而无需编写任何代码，能够查看站点的所有元素和资源，并将它们从易于使用的面板直接拖拽到网页文档中。一、Dreamweaver8操作界面简介8.3使用Dreamweaver制作网页第8章网页制作技术40Dreamweaver8安装完成后，就可以运行软件来进行网页设计与制作，初次运行软件时会出现“工作区设置”对话框。一、Dreamweaver8操作界面简介8.3使用Dreamweaver制作网页第8章网页制作技术41Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。一、Dreamweaver8操作界面简介8.3使用Dreamweaver制作网页第8章网页制作技术42要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站传到互联网的web服务器上，放置在本地磁盘上的网站被称为本地站点，位于互联网web服务器里的网站被称为远程站点。下面介绍本地站点的创建与管理方法。1.规划站点结构

2.创建站点3.搭建站点结构4.文件与文件夹的管理

二、建立与管理站点8.3使用Dreamweaver制作网页第8章网页制作技术43Dreamweaver8建立站点演示：选择菜单栏“站点”→“管理站点”，出现“管理站点”对话框，点击“新建”按钮，选择弹出菜单中的“站点”项。

二、建立与管理站点8.3使用Dreamweaver制作网页第8章网页制作技术44搭建站点结构演示：站点是文件与文件夹的集合，站点创建成功后应对站点的结构进行规划，可以把文件分门别类的放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。二、建立与管理站点8.3使用Dreamweaver制作网页第8章网页制作技术451.页面属性设置在Dreamweaver8中打开任意页面进入页面的编辑窗口，通过窗体下方的属性面板可以对页面的相关属性进行设置。三、Dreamweaver页面设计8.3使用Dreamweaver制作网页第8章网页制作技术462.文本插入与编辑（1）插入文本（2）编辑文本格式（3）设置字体组合（4）文字的其它设置三、Dreamweaver页面设计8.3使用Dreamweaver制作网页第8章网页制作技术473.图像操作与应用（1）插入图像插图图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用插入栏的“图像”按钮。三、Dreamweaver页面设计8.3使用Dreamweaver制作网页第8章网页制作技术48（2）设置图像属性选中图像后，在属性面板中显示出了图像的属性。8.3使用Dreamweaver制作网页第8章网页制作技术三、Dreamweaver页面设计49（3）插入其它图像元素在单击常用插入栏的“图像”按钮时，除了第1项“图像”外，还有“图像占位符

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论