officeword培训教程.ppt

《officeword培训教程.ppt》由会员分享，可在线阅读，更多相关《officeword培训教程.ppt（51页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、 2010 Tieto Corporation网页设计与制作网页设计与制作 信息科学与技术学院喻琇瑛 2010 Tieto Corporation第1章 网页制作基础Web和和浏览器浏览器WebWeb的特点和结构的特点和结构的特点和结构的特点和结构WebWeb最最最最 大大大大 的的的的 特特特特 点点点点 是是是是 使使使使 用用用用 了了了了 超超超超 文文文文 本本本本（HypertextHypertext）WWWWWW采用采用采用采用C/SC/S（客户机（客户机（客户机（客户机/服务器）工作模式服务器）工作模式服务器）工作模式服务器）工作模式在在在在浏浏浏浏览览览览器器器器和和和和服服

2、服服务务务务器器器器之之之之间间间间应应应应用用用用HTTPHTTP（Hyper Hyper Text Text Transfer Transfer ProtocolProtocol，超超超超文文文文本本本本传传传传输输输输协协协协议议议议）作作作作为网络应用层通信协议为网络应用层通信协议为网络应用层通信协议为网络应用层通信协议 2010 Tieto Corporation URLURL InternetInternet上所有的资源都有一个唯一的上所有的资源都有一个唯一的URLURL地址，一般将地址，一般将URLURL地址称为网址。地址称为网址。URL URL的完整格式如下：的完整格式如下：协

3、议:/主机名（或IP地址）：端口号/路径名/文件名 2010 Tieto Corporation【例例】几个几个URLURL的例子的例子.（1 1）http:/http:/，用，用httphttp协议协议和缺省端口号（和缺省端口号（8080）访问微软公司服务器）访问微软公司服务器。这里没有指定路径和文件名，。这里没有指定路径和文件名，所以访问的结果是把一个缺省主页送给浏览器。所以访问的结果是把一个缺省主页送给浏览器。（2 2）ftp:/ 2010 Tieto Corporation（3 3）http:/gnacademy.org:8001/uu-http:/gnacademy.org:8001

4、/uu-gna/index.htmlgna/index.html，从运行在端口号，从运行在端口号80018001的的gnacademy.orggnacademy.org服务器上访问服务器上访问index.htmlindex.html主页。主页。（4)http:/www.w3.org/Addressing/URL/5-BNF.html#httpaddress，访问，访问www.w3.org 服务器上服务器上Addressing/URL目录下的目录下的5-BNF.html 网页文件中锚点网页文件中锚点标识为标识为httpaddress的地方。的地方。5 2010 Tieto Corporation

5、浏览器v概述v分类 Internet ExplorerNetscape NavigatorMosaic等专业浏览器以及一些以上述浏览器等专业浏览器以及一些以上述浏览器为内核的专用浏览器。为内核的专用浏览器。其中其中使用最广泛的是使用最广泛的是Microsoft出品的出品的Internet Explorer 6.0（简称（简称IE6）。2010 Tieto CorporationIE6IE6的界面的界面标题栏工具栏菜单栏地址栏状态栏浏览窗口 2010 Tieto Corporation认识网站 2010 Tieto Corporation门户网站门户网站 这类网站是一种综合性网站，涉及领域非常广

6、泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（）网易（）等。2010 Tieto Corporation个人网站个人网站 个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。2010 Tieto Corporation专业网站专业网站 这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（）即是一个专业文学网站。2010 Tieto Corporation职能网站职能网站 职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电

7、子商务网站有淘宝（）、卓越网（）和当当网上书店（）等。2010 Tieto Corporation认识网页认识网页Flash动画导航栏GIF动画文字表单图片超级链接13 2010 Tieto Corporation网页中的元素网页中的元素 2010 Tieto Corporation网页制作的相关知识网页制作的相关知识HTMLHTMLHTMLHTML语言概述语言概述语言概述语言概述 是是是是一种超文本标记语言，作为一种网页编辑语一种超文本标记语言，作为一种网页编辑语一种超文本标记语言，作为一种网页编辑语一种超文本标记语言，作为一种网页编辑语言，易学易懂。言，易学易懂。言，易学易懂。言，易学易懂

8、。2010 Tieto Corporation1）HTML网页网页 HTML HTML HTML HTML网页通常是由三部分内容组成的：版本网页通常是由三部分内容组成的：版本网页通常是由三部分内容组成的：版本网页通常是由三部分内容组成的：版本信息、网页标题（信息、网页标题（信息、网页标题（信息、网页标题（HEADHEADHEADHEAD）和文档主体（）和文档主体（）和文档主体（）和文档主体（BODYBODYBODYBODY）。）。）。）。下面就是网页结构的总体框架：下面就是网页结构的总体框架：2010 Tieto Corporation（1）版本信息）版本信息 版本信息位于版本信息位于HTML

9、网网页文件的第一行文件的第一行（2）HTML文件文件标记 大部分网大部分网页文件都是以文件都是以标记开始的，在文件开始的，在文件的的结尾尾处又以又以结束束（3）头部信息部信息 HEAD标记之之间是是HTML文档的文档的头部，用来部，用来标明当明当前文档的有关信息前文档的有关信息 在在HEAD标记之之间，使用，使用频率最高的率最高的标记就是就是TITLE，它用于定，它用于定义显示在示在浏览器器标题栏的文档的文档标题。2010 Tieto Corporation【例例】给网网页设置置“励志学社励志学社”的文档的文档标题，可在可在头部部输入以下代入以下代码：励志学社励志学社 2010 Tieto C

10、orporation（4）主体）主体标记 网网页的主体是的主体是“”标记对作用作用的范的范围 标记用于定用于定义HTML文档主体的开始，它能文档主体的开始，它能够设置网置网页的背景的背景图像、背景像、背景颜色、色、链接接颜色和网色和网页边距距等属性，其基本用法如下所示：等属性，其基本用法如下所示：Bgcolor为背景背景颜色。关于色。关于颜色的色的值后面会后面会详细介介绍。Text为不包含超不包含超级链接的文字接的文字颜色。色。Link为超超级链接文字的接文字的颜色。色。Alink为正被点正被点击的超的超级链接文字的接文字的颜色。色。2010 Tieto CorporationLeftmarg

11、in、Topmargin用于用于设置网置网页的左的左边距和上距和上边框，它框，它们是以像素是以像素为单位位【例例1】将网将网页的上的上边距和左距和左边距分距分别设置置为40和和30个像个像素的素的宽度，使用黑色文本、白色背景，未度，使用黑色文本、白色背景，未访问的的链接源采接源采用用蓝色，已色，已访问的的链接源接源标记为暗暗红色。色。Vlink为已已经点点击过的超的超级链接文字的接文字的颜色。色。Background设置，如果置，如果设置了背景置了背景图片，片，图片会覆盖片会覆盖已已经设置的置的颜色。色。2010 Tieto Corporation2）XML语言语言XML（eXtensible

12、MarkupLanguage）被称）被称作是下一代的网页标记语言，也是采用各种标记来作是下一代的网页标记语言，也是采用各种标记来形成网页的源代码。形成网页的源代码。XML中包括可中包括可扩展格式展格式语言言XSL(Extensible Style Language)和可和可扩展展链接接语言言XLL(Extensible Linking Language)。2010 Tieto Corporation3 3）静态网页和动态网页静态网页和动态网页静静态网网页指基本上全部使用指基本上全部使用HTML语言言制作的网制作的网页，页面的内容是固定不面的内容是固定不变的。的。动态网网页（DynamicHTM

13、L，DHTML）利用利用JavaScript，CSS(层叠叠样式表式表)及其它及其它类似的似的语言如言如VBScript等与等与HTML进行有机的行有机的结合来使静合来使静态的的HTML网网页变成成动态。2010 Tieto Corporation4 4）WebWeb服务器端程序服务器端程序专业的网站都是建立在使用数据库的基础上的，要将这些数据库变成可以通过浏览器显示和操作的Web页面，就要编写服务器端的程序。用户向服务器传送提交的表单（个人信息、选择等）需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。目前常用的服务器端编程技术主要有CGI、ASP、PH

14、P、JSP等，不同的技术需要不同的系统环境支持。2010 Tieto Corporation 网页制作的基本方法网页制作的基本方法制作网制作网页的基本步的基本步骤常用的网常用的网页制作工具有制作工具有Frontpage、Dreamweaver等。等。2010 Tieto Corporation网页制作的原则网页制作的原则 2010 Tieto Corporation制作网页时要注意的问题制作网页时要注意的问题 2010 Tieto Corporation 开始开始网页制作网页制作 2010 Tieto CorporationMacromediaStudioMX2004Macromedia St

15、udio MX2004Macromedia Studio MX2004是目前应用广泛的是目前应用广泛的网页制作工具组件，使用方便、功能齐全，网页制作工具组件，使用方便、功能齐全，DreamweaverDreamweaver、FlashFlash、FireworksFireworks被称作被称作“网页三网页三剑客剑客”。在在Dreamweaver Dreamweaver 里用丰富的层叠样式表制作耐里用丰富的层叠样式表制作耐看，专业的网站。看，专业的网站。Fireworks Fireworks通过自动变形，用动的效果，图片通过自动变形，用动的效果，图片编辑工具和拖拽工具能传送较精彩的编辑工具和拖拽

16、工具能传送较精彩的 Fireworks Fireworks 图片。图片。2010 Tieto CorporationDreamweave8的菜的菜单共有共有10个，即文件、个，即文件、编辑、视图、插、插入、修改、文本、命令、站点、窗口和帮助。其中，入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜菜单里提供了里提供了对Dreamweaver菜菜单中中首首选参数参数的的访问。文件：用来管理文件。例如新建，打开，保存，另存文件：用来管理文件。例如新建，打开，保存，另存为，导入，入，输出打印等。出打印等。编辑：用来：用来编辑文本。例如剪切，复制，粘文本。例如剪切，复制，粘贴，查找，找，替替换和参数

17、和参数设置等。置等。查看：用来切看：用来切换视图模式以及模式以及显示、示、隐藏藏标尺、网格尺、网格线等等辅助助视图功能。功能。2010 Tieto Corporation插入：用来插入各种元素，例如插入：用来插入各种元素，例如图片、多媒体片、多媒体组件，表格、框件，表格、框架及超架及超级链接等。接等。修改：具有修改：具有对页面元素修改的功能，例如在表格中插入表格，面元素修改的功能，例如在表格中插入表格，拆分、合并拆分、合并单元格，元格，对其其对象等。象等。文本：用来文本：用来对文本操作，例如文本操作，例如设置文本格式等。置文本格式等。命令：所有的附加命令命令：所有的附加命令项站点：用来站点：用

18、来创建和管理站点建和管理站点窗口：用来窗口：用来显示和示和隐藏控制面板以及切藏控制面板以及切换文档窗口文档窗口帮助：帮助：联机帮助功能。例如按下机帮助功能。例如按下F1键，就会打开，就会打开电子帮助文本子帮助文本 2010 Tieto Corporation思考题思考题1.1 1.1 1.1 1.1 什么是什么是什么是什么是WWWWWWWWWWWW？什么是网页？什么是网页？什么是网页？什么是网页？1.2 1.2 1.2 1.2 一个完整的一个完整的一个完整的一个完整的URLURLURLURL由哪几部分组成？举出几个由哪几部分组成？举出几个由哪几部分组成？举出几个由哪几部分组成？举出几个URLU

19、RLURLURL的例子。的例子。的例子。的例子。1.3 1.3 1.3 1.3 如何设置如何设置如何设置如何设置IEIEIEIE的主页？如何用的主页？如何用的主页？如何用的主页？如何用IEIEIEIE收藏一个网页？收藏一个网页？收藏一个网页？收藏一个网页？1.4 1.4 1.4 1.4 网页中一般都使用了哪些技术？网页中一般都使用了哪些技术？网页中一般都使用了哪些技术？网页中一般都使用了哪些技术？1.5 Macromedia Studio MX20041.5 Macromedia Studio MX20041.5 Macromedia Studio MX20041.5 Macromedia S

20、tudio MX2004有哪几部分组成？有哪几部分组成？有哪几部分组成？有哪几部分组成？2010 Tieto Corporation1 1 站点设置站点设置站点的概念站点的概念规划站点结构规划站点结构创建站点创建站点 2010 Tieto Corporation站点的概念站点的概念多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。Dreamweaver MX 2004提供了3类站点：本地站点、远程站点和测试站点。用户可通过本地站点和远程站点在本地磁盘和Web服务器之间传输文件，测试站点可用于对动态站点的测试。本地站点本地站点 远程站点远程站点 测试站点测试

21、站点 2010 Tieto Corporation规划站点结构规划站点结构设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率，加快对站点的设计。在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到Web服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网页内容。2010 Tieto Corporation在站点规划过程中，需使用合理的文件名称、文件夹名称。通常在命名时，可以采用与其内容相同的英文采用与

22、其内容相同的英文或拼音进行命名或拼音进行命名，应避免使用长文件名和中文。制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。若是大型站点，可分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个名称为picture的文件夹用以存放主页中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件夹。规划站点结构规划站点结构 2010 Tieto Corporation注意：注意：2010 Tieto Corporation【实例实例1】创建一个站点创建一个站点使用菜单使用菜单“站点站点”“管理站点管理站点”打开站点打开站点管理对话框，进行操作管理对话框，进

23、行操作.创建站点创建站点 2010 Tieto Corporation使用使用“高级高级”方式定义站点方式定义站点 在“定义站点”向导进行的任意一个步骤，选择对话框上部的“高级”标签，可打开高级站点定义对话框。2010 Tieto Corporation2 2 网页中的文本网页中的文本与使用与使用“格式格式”框不同，框不同，“大小大小”框设定的数据框设定的数据仅对选中的文字仅对选中的文字起作用起作用 2010 Tieto Corporation2 2 网页中的文本网页中的文本-文本与列表控制文本与列表控制 2010 Tieto Corporation2 2 网页中的文本网页中的文本-文本与列表

24、控制文本与列表控制 2010 Tieto Corporation问题：文本中输入空格问题：文本中输入空格1）【工具箱】-【文本】-【不换行空格】2）直接在代码中粘贴空格符号3）全角模式下直接输入4）【编辑】-【首选参数】-【常规】：选中“允许多个连续的空格”2010 Tieto Corporation3 3 链接的使用链接的使用 2010 Tieto Corporation说明说明n目标：目标：_blank：打开一个新窗口显示目标网页。_parent：目标网页的内容在父框架窗口中显示。_self：目标网页的内容在当前所在框架窗口中显示。_top：目标网页的内容在最顶层框架窗口中显示n代码：代码

25、：n链接文字颜色的设置链接文字颜色的设置 通过【修改】-【页面属性】-【外观】来设置的3 3 链接的使用链接的使用 2010 Tieto Corporation3 3 链接的使用链接的使用设置锚设置锚 2010 Tieto Corporation4 4 网页中的图像网页中的图像-插入图片插入图片图像的格式 用于网页的图像通常只有GIF、JPE和PNG 3种格式。插入图像的步骤如下：（1）把工具栏切换到“常用”状态，然后单击“图像：图象”按钮（2）选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图。（3）单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到

26、网页中，同时在编辑窗口显示出图像。2010 Tieto Corporation练习：改变图像大小图文混排垂直边距和水平边距图像替代图像边框4 4 网页中的图像网页中的图像-属性设置属性设置 2010 Tieto Corporation1.1.图片超级链接图片超级链接2.2.图像地图图像地图 如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图像地图。（1）设置矩形热区（2）设置圆形热区（3）设置多边形热区4 4 网页中的图像网页中的图像-超级链接和图像地图超级链接和图像地图 2010 Tieto Corporation 单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择

27、图像占位符按钮 4 4 网页中的图像网页中的图像-图像占位符和轮换图像图像占位符和轮换图像1.1.图象占位符图象占位符2.2.插入鼠标经过图像插入鼠标经过图像 单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠标经过图像按钮 2010 Tieto Corporation4 4 网页中的图像网页中的图像-效果图效果图 2010 Tieto Corporation实例实例1 1 制作一个简单的网页制作一个简单的网页要求:熟悉Dreamweaver各项菜单及工具，完成以下任务：1、以我的家乡作为主题，进行内容的规划（2、利用表格对页面进行划分3、插入相应的列表及链接，要分别有文字的链接和图片的链接。4、文字链接对应的页面，要有某个景点或特产的详细介绍，第一段斜体红色字，第二段粗体蓝色字，其他段落为绿色字。5、文字详细介绍页设置锚链接。