《officeword培训教程(共52张).pptx》由会员分享，可在线阅读，更多相关《officeword培训教程(共52张).pptx（52页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、swjtu网页设计与制作网页设计与制作 信息科学与技术学院喻琇瑛 2010 Tieto Corporation第1章 网页制作基础 2010 Tieto Corporation URLURL InternetInternet上所有的资源都有一个唯一的上所有的资源都有一个唯一的URLURL地址，一般将地址，一般将URLURL地址称为网址。地址称为网址。 URL URL的完整格式如下：的完整格式如下： 协议:/主机名（或IP地址）：端口号/路径名/文件名 2010 Tieto Corporation4【例例】几个几个URLURL的例子的例子. . （2 2）ftp:/ 2010 Tieto Cor
2、poration5（3 3）http:/gnacademy.org: 8001/uu-http:/gnacademy.org: 8001/uu-gna/index.htmlgna/index.html，从运行在端口号，从运行在端口号80018001的的gnacademy.orggnacademy.org服务器上访问服务器上访问index.htmlindex.html主页。主页。 2010 Tieto Corporation浏览器v概述v分类 Internet ExplorerNetscape NavigatorMosaic等专业浏览器以及一些以上述浏览器等专业浏览器以及一些以上述浏览器为内核的
3、专用浏览器。为内核的专用浏览器。 其中其中使用最广泛的是使用最广泛的是Microsoft出品的出品的Internet Explorer 6.0（简称（简称IE6）。 2010 Tieto CorporationIE6IE6的界面的界面标题栏工具栏菜单栏地址栏状态栏浏览窗口 2010 Tieto Corporation认识网站门户门户网站网站个人个人网站网站专业专业网站网站职能职能网站网站 2010 Tieto Corporation门户门户网站网站 2010 Tieto Corporation个人个人网站网站 个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个
4、性的。 2010 Tieto Corporation专业专业网站网站 2010 Tieto Corporation职能职能网站网站 2010 Tieto Corporation13认识网页认识网页Flash动画导航栏GIF动画文字表单图片超级链接 2010 Tieto Corporation网页中的元素网页中的元素1.文字文字2.2.图像图像3.3.表单表单4.Flash4.Flash动画动画5. 5. 表格表格6. 6. 超级超级链接链接7. 7. 视频、视频、音频音频8. POP8. POP窗口窗口9. 9. 标题栏和标题栏和状态栏文字状态栏文字 2010 Tieto Corporatio
5、n 2010 Tieto Corporation 下面就是网页结构的总体框架：下面就是网页结构的总体框架： 2010 Tieto Corporation（1）版本信息）版本信息 版本信息位于版本信息位于HTML网页文件的第一行网页文件的第一行 （2）HTML文件标记文件标记 大部分网页文件都是以大部分网页文件都是以标记开始的，在文件标记开始的，在文件的结尾处又以的结尾处又以结束结束 （3）头部信息）头部信息 HEAD标记之间是标记之间是HTML文档的头部，用来标明当文档的头部，用来标明当前文档的有关信息前文档的有关信息 在在HEAD标记之间，使用频率最高的标记就是标记之间，使用频率最高的标记就
6、是TITLE，它用于定义显示在浏览器标题栏的文档标题。，它用于定义显示在浏览器标题栏的文档标题。 2010 Tieto Corporation【例例】给网页设置给网页设置 “励志学社励志学社”的文档标题，的文档标题，可在头部输入以下代码：可在头部输入以下代码：励志学社励志学社 2010 Tieto Corporation（4）主体标记）主体标记 网页的主体是网页的主体是“”标记对作用标记对作用的范围的范围 标记用于定义标记用于定义HTML文档主体的开始，它能文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色和网页边距够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法
7、如下所示：等属性，其基本用法如下所示： Bgcolor为背景颜色。关于颜色的值后面会详细介绍。为背景颜色。关于颜色的值后面会详细介绍。Text为不包含超级链接的文字颜色。为不包含超级链接的文字颜色。Link为超级链接文字的颜色。为超级链接文字的颜色。Alink为正被点击的超级链接文字的颜色。为正被点击的超级链接文字的颜色。 2010 Tieto CorporationLeftmargin、Topmargin用于设置网页的左边距和上边用于设置网页的左边距和上边框，它们是以像素为单位框，它们是以像素为单位 【例例1】将网页的上边距和左边距分别设置为将网页的上边距和左边距分别设置为40和和30个像个
8、像素的宽度，使用黑色文本、白色背景，未访问的链接源采素的宽度，使用黑色文本、白色背景，未访问的链接源采用蓝色，已访问的链接源标记为暗红色。用蓝色，已访问的链接源标记为暗红色。Vlink为已经点击过的超级链接文字的颜色。为已经点击过的超级链接文字的颜色。Background设置，如果设置了背景图片，图片会覆盖设置，如果设置了背景图片，图片会覆盖已经设置的颜色。已经设置的颜色。 2010 Tieto CorporationXML（eXtensible Markup Language）被称作）被称作是下一代的网页标记语言，也是采用各种标记来形成是下一代的网页标记语言，也是采用各种标记来形成网页的源代
9、码。网页的源代码。 XML中包括可扩展格式语言中包括可扩展格式语言XSL(Extensible Style Language) 和可扩展链和可扩展链接语言接语言XLL(Extensible Linking Language)。 2010 Tieto Corporation静态网页指基本上全部使用静态网页指基本上全部使用HTML语言语言制作的网页，页面的内容是固定不变的。制作的网页，页面的内容是固定不变的。动态网页（动态网页（DynamicHTML，DHTML）利用利用JavaScript，CSS (层叠样式表层叠样式表) 及其它类及其它类似的语言如似的语言如VBScript等与等与HTML进行
10、有机的进行有机的结合来使静态的结合来使静态的HTML网页变成动态。网页变成动态。 2010 Tieto Corporation专业的网站都是建立在使用数据库的基础上的，要将这些数据库变成可以通过浏览器显示和操作的Web页面，就要编写服务器端的程序。用户向服务器传送提交的表单（个人信息、选择等）需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。目前常用的服务器端编程技术主要有CGI、ASP、PHP、JSP等，不同的技术需要不同的系统环境支持。 2010 Tieto Corporation常用的网页制作工具有常用的网页制作工具有Frontpage、Dreamw
11、eaver等等。 1 1、确定网页的内容、确定网页的内容2 2、设计网页的组织结构、设计网页的组织结构3 3、资料的收集与整理、资料的收集与整理4 4、选择网页的设计方法、选择网页的设计方法 2010 Tieto Corporation站点要有创意站点要有创意整体规划整体规划动画不能过多动画不能过多导航要明朗导航要明朗制作通用网页制作通用网页主题鲜明主题鲜明优化图象优化图象定时更新定时更新 2010 Tieto Corporation1、网页的标题要简洁，明确。、网页的标题要简洁，明确。2、在文本中要使用水平线，以分割不同部分。、在文本中要使用水平线，以分割不同部分。3、对重点段落要强调显示。
12、、对重点段落要强调显示。4、网页中插入的图片要尽量的小。、网页中插入的图片要尽量的小。5、图形要附加文字说明，以便关闭图像时查看。、图形要附加文字说明，以便关闭图像时查看。6、网页中引用的资料及商标（或图标），不能侵犯版权。、网页中引用的资料及商标（或图标），不能侵犯版权。 2010 Tieto Corporation构建页面框架创建导航条填充内容创建返回主页连接 2010 Tieto CorporationMacromedia Studio MX2004Macromedia Studio MX2004是目前应用广泛是目前应用广泛的网页制作工具组件，使用方便、功能齐全，的网页制作工具组件，使用
13、方便、功能齐全，DreamweaverDreamweaver、FlashFlash、FireworksFireworks被称作被称作“网页三网页三剑客剑客”。 在在Dreamweaver Dreamweaver 里用丰富的层叠样式表制作耐里用丰富的层叠样式表制作耐看，专业的网站。看，专业的网站。 Fireworks Fireworks通过自动变形，用动的效果，图片通过自动变形，用动的效果，图片编辑工具和拖拽工具能传送较精彩的编辑工具和拖拽工具能传送较精彩的 Fireworks Fireworks 图片。图片。 2010 Tieto Corporation Dreamweave 8的菜单共有的菜
14、单共有10个，即文件、编辑、视图、插个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜单里提供了对单里提供了对Dreamweaver菜单中菜单中首选参数首选参数的访问。的访问。文件：用来管理文件。例如新建，打开，保存，另存文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。为，导入，输出打印等。 编辑：用来编辑文本。例如剪切，复制，粘贴，查找，编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。替换和参数设置等。 查看：用来切换视图模式以及显示、隐藏标尺、网格查看：用来切换视图模式以及
15、显示、隐藏标尺、网格线等辅助视图功能。线等辅助视图功能。 2010 Tieto Corporation插入：用来插入各种元素，例如图片、多媒体组件，表格、框插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。架及超级链接等。 修改：具有对页面元素修改的功能，例如在表格中插入表格，修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。拆分、合并单元格，对其对象等。 文本：用来对文本操作，例如设置文本格式等。文本：用来对文本操作，例如设置文本格式等。 命令：所有的附加命令项命令：所有的附加命令项 站点：用来创建和管理站点站点：用来创建和管理站点 窗口
16、：用来显示和隐藏控制面板以及切换文档窗口窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能。例如按下帮助：联机帮助功能。例如按下F1键，就会打开电子帮助文本键，就会打开电子帮助文本 2010 Tieto Corporation 2010 Tieto Corporation1 1 站点设置站点设置站点的概念站点的概念规划站点结构规划站点结构创建站点创建站点 2010 Tieto Corporation站点的概念站点的概念 多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。 Dreamweaver MX 2004提供了3类站点：本地站点、远程站点
17、和测试站点。用户可通过本地站点和远程站点在本地磁盘和Web服务器之间传输文件，测试站点可用于对动态站点的测试。本地站点本地站点远程站点远程站点测试站点测试站点 2010 Tieto Corporation规划站点结构规划站点结构 设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率，加快对站点的设计。 在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到Web服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同
18、类型的网页内容。 2010 Tieto Corporation 在站点规划过程中，需使用合理的文件名称、文件夹名称。通常在命名时，可以采用与其内容相同的英文采用与其内容相同的英文或拼音进行命名或拼音进行命名，应避免使用长文件名和中文。 制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。若是大型站点，可分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个名称为picture的文件夹用以存放主页中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件夹。规划站点结构规划站点结构 2010 Tieto Corporation注意：注意： 2010 Ti
19、eto Corporation【实例实例1】创建一个站点创建一个站点使用菜单使用菜单“站点站点”“”“管理站点管理站点”打开站点打开站点管理对话框，进行管理对话框，进行操作操作.创建站点创建站点 2010 Tieto Corporation使用使用“高级高级”方式定义站点方式定义站点 在“定义站点”向导进行的任意一个步骤，选择对话框上部的“高级”标签，可打开高级站点定义对话框。 2010 Tieto Corporation2 2 网页中的文本网页中的文本输入文字输入文字使用键盘的“enter”对文本分段用Shift+Enter组合键可使文本强制换行设置属性设置属性用“格式”下拉选项设置文字大小
20、用“大小”下拉选项设置文本大小设置段落对齐方式设置文字的加粗、倾斜和颜色属性设置文字的字体与使用与使用“格式格式”框不同，框不同，“大小大小”框设定的数据仅框设定的数据仅对选中的文字起对选中的文字起作用作用 2010 Tieto Corporation 1）【修改】-【页面属性】-【标题/页面编码】 2）直接在标题栏修改网页标题修网页标题修改多种途径改多种途径 修改-页面属性-标题正文标题文正文标题文字格式设置字格式设置 在属性栏选择相应选项文字大小颜文字大小颜色与对齐色与对齐 SHIFT+ENT段落切换与段落切换与强行换行强行换行2 2 网页中的文本网页中的文本- -文本与列表控制文本与列表
21、控制 2010 Tieto Corporation 类似属性中的相关选项，自行练习文本编辑基础文本编辑基础 复制相应文档后，选择：【编辑】-【选择性粘贴】（可将word或excel中文本等内容原样粘贴） 【文件】-【导入】-word文档或excel文档从外部导入文从外部导入文本内容本内容 【属性】-【项目列表】（形成无序列表） 【属性】-【编号列表】（形成有序列表）列表与排序列表与排序 【HTML】-【插入横线】插入排版水平插入排版水平线线2 2 网页中的文本网页中的文本- -文本与列表控制文本与列表控制 2010 Tieto Corporation问题：文本中输入空格问题：文本中输入空格1）
22、【工具箱】-【文本】-【不换行空格】2）直接在代码中粘贴空格符号3）全角模式下直接输入4）【编辑】-【首选参数】-【常规】：选中“允许多个连续的空格” 2010 Tieto Corporation3 3 链接的使用链接的使用 【属性属性】- -【链接链接】，选择相应，选择相应的链接文件的链接文件 指向法指向文件目录中相应文指向法指向文件目录中相应文件件 选择文字选择文字-Shift-Shift-通过箭头直接通过箭头直接指向链接文件指向链接文件内部链接内部链接（相对地址）（相对地址） 【属性属性】- -【链接链接】，输入：，输入：http:/http:/外部链接外部链接（绝对地址）（绝对地址）
23、2010 Tieto Corporation说明说明n 目标：目标： _blank：打开一个新窗口显示目标网页。 _parent：目标网页的内容在父框架窗口中显示。 _self：目标网页的内容在当前所在框架窗口中显示。 _top：目标网页的内容在最顶层框架窗口中显示n 代码：代码：n 链接文字颜色的设置链接文字颜色的设置 通过【修改】-【页面属性】-【外观】来设置的3 3 链接的使用链接的使用 2010 Tieto Corporation3 3 链接的使用链接的使用 锚设置锚设置 锚链接：锚链接：【属性属性】- -【链接链接】- -直直接指向锚或者输入代码（接指向锚或者输入代码（# #锚名称）
24、锚名称）锚链接锚链接设置锚设置锚 2010 Tieto Corporation4 4 网页中的图像网页中的图像- -插入图片插入图片 图像的格式 用于网页的图像通常只有GIF、JPE和PNG 3种格式。 插入图像的步骤如下 ：（1）把工具栏切换到“常用”状态，然后单击“图像：图象”按钮（2）选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图。（3）单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。 2010 Tieto Corporation练习： 改变图像大小 图文混排 垂直边距和水平边距 图像替代 图像边框4 4
25、网页中的图像网页中的图像- -属性设置属性设置 2010 Tieto Corporation1.1.图片超级链接图片超级链接2.2.图像地图图像地图 如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图像地图。 （1）设置矩形热区（2）设置圆形热区（3）设置多边形热区4 4 网页中的图像网页中的图像- -超级链接和图像地图超级链接和图像地图 2010 Tieto Corporation 单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择图像占位符按钮 4 4 网页中的图像网页中的图像- -图像图像占位符和轮换图像占位符和轮换图像1. 1. 图象占位符图象占位符2.2.插
26、入鼠标经过图像插入鼠标经过图像 单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠标经过图像按钮 2010 Tieto Corporation4 4 网页中的图像网页中的图像- -效果效果图图 2010 Tieto Corporation实例实例1 1 制作制作一个简单的网页一个简单的网页要求:熟悉Dreamweaver各项菜单及工具，完成以下任务：1、以我的家乡作为主题，进行内容的规划（2、利用表格对页面进行划分3、插入相应的列表及链接，要分别有文字的链接和图片的链接。4、文字链接对应的页面，要有某个景点或特产的详细介绍，第一段斜体红色字，第二段粗体蓝色字，其他段落为绿色字。5、文字详细介绍页设置锚链接。 2010 Tieto Corporation演讲完毕，谢谢观看！