资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2018/12/27,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,2018/12/27,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,返回,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2018/12/27,#,2024/8/28,1,主要内容：,第,1,章：网页制作基础,第,2,章：,Dreamweaver MX 2004,第,3,章：插入网页基本元素,第,4,章：页面设计,第,5,章：高级网页制作,2023/9/41主要内容： 第1章,2024/8/28,2,第,1,章 网页制作基础,Web,和浏览器,Web,Web,的特点和结构,Web,最大的特点是使用了超文本（,Hypertext,）,WWW,采用,C/S,（客户机,/,服务器）工作模式,在浏览器和服务器之间应用,HTTP,（,Hyper Text Transfer Protocol,，超文本传输协议）作为网络应用层通信协议,2023/9/42第1章 网页制作基础Web和浏览器,2024/8/28,3,URL,Internet,上所有的资源都有一个唯一的,URL,地址，一般将,URL,地址称为网址。,URL,的完整格式如下：,协议,:/,主机名（或,IP,地址）：端口号,/,路径名,/,文件名,2023/9/43 URLInternet上所有的资源都有一,2024/8/28,4,【,例,】,几个,URL,的例子,.,（,1,）,，用,http,协议和缺省端口号（,80,）访问微软公司服务器,。这里没有指定路径和文件名，所以访问的结果是把一个缺省主页送给浏览器。,（,2,）,ftp:/ （1）htt,2024/8/28,5,（,3,）,http:/gnacademy.org: 8001/uu-gna/index.html,，从运行在端口号,8001,的,gnacademy.org,服务器上访问,index.html,主页。,（,4)http:/www.w3.org/Addressing/URL/5-BNF.html#httpaddress,，访问,www.w3.org,服务器上,Addressing/URL,目录下的,5-BNF.html,网页文件中锚点标识为,httpaddress,的地方。,2023/9/45 （3）http:/gnacadem,2024/8/28,6,浏览器,概述,分类,Internet Explorer,Netscape Navigator,Mosaic,等专业浏览器以及一些以上述浏览器为内核的专用浏览器。,其中使用最广泛的是,Microsoft,出品的,Internet Explorer 6.0,（简称,IE6,）。,2023/9/46浏览器概述,2024/8/28,7,IE6,的界面,标题栏,工具栏,菜单栏,地址栏,状态栏,浏览窗口,2023/9/47IE6的界面标题栏工具栏菜单栏地址栏状态栏,2024/8/28,8,IE6.0,的使用,浏览网页,“,停止”按钮,前进和后退,刷新页面,改变文字大小,选择编码,全屏幕显示,查看源文件,2023/9/48 IE6.0的使用浏览网页“停止”按钮,2024/8/28,9,打开多个窗口,用菜单栏上的“文件”“新建”“窗口”，会打开一个新的浏览器窗口。,一般情况下，打开四、五个窗口可以充分利用系统资源，而且通过调整窗口的大小和位置还可以同时浏览。,2023/9/49打开多个窗口 用菜单,2024/8/28,10,主页、临时文件和历史记录,浏览器在打开时自动调入的网页称为“主页”，主页可以通过“工具”“,Internet,选项”打开,Internet,选项对话框，在“常规”选项卡的“主页”栏设置,.,2023/9/410主页、临时文件和历史记录,2024/8/28,11,收藏夹的使用,使用菜单“收藏”“添加到收藏夹”打开添加到收藏夹对话框。,2023/9/411收藏夹的使用 使用菜单“,2024/8/28,12,使用菜单“收藏”“整理收藏夹”打开收藏夹整理对话框，进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。,2023/9/412 使用菜单“收藏”“整理收藏夹”打开收,2024/8/28,13,关闭图片显示,在网络速度较慢时，不观看网页中的图片和其它多媒体内容可以得到更快的下载速度。通过“工具”“,Internet,选项”打开,Internet,选项对话框，在“高级”选项卡中可以对浏览器的工作方式进行设置,2023/9/413关闭图片显示 在网络速,2024/8/28,14,关闭自动完成功能,通过工具,Internet,选项，打开,Internet,选项对话框，在“内容”选项卡的“个人信息”部分单击“自动完成”按钮打开自动完成设置对话框 。,2023/9/414关闭自动完成功能 通过工具Int,2024/8/28,15,搜索引擎的使用,1,、使用浏览器的“搜索”按钮,2,、使用专门的搜索引擎,(Google),(,摆渡,),(,雅虎,),(,搜狐,),2023/9/415搜索引擎的使用1、使用浏览器的“搜索”按,2024/8/28,16,认识网站,1.,门户网站,2.,个人网站,3.,专业网站,4.,职能网站,2023/9/416认识网站1.门户网站,2024/8/28,17,1.,门户网站,这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（,）、网易（,）等。,2023/9/4171.门户网站 这类网站是一种综合性网,2024/8/28,18,2.,个人网站,个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。,2023/9/4182.个人网站个人网站具有较强个性化，是以,2024/8/28,19,3.,专业网站,这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（,）即是一个专业文学网站。,2023/9/4193.专业网站这类网站具有很强的专业性，通,2024/8/28,20,4.,职能网站,职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴（,）、卓越网（,）和当当网上书店（,）等。,2023/9/4204.职能网站职能网站具有专门的功能，如政,2024/8/28,21,认识网页,Flash,动画,导航栏,GIF,动画,文字,表单,图片,超级链接,2023/9/421认识网页Flash动画,2024/8/28,22,网页中的元素,1.,文字,2.,图像,3.,表单,4.Flash,动画,5.,表格,6.,超级链接,7.,视频、音频,8. POP,窗口,9.,标题栏和状态栏文字,2023/9/422网页中的元素1.文字,2024/8/28,23,1.2,网页制作的相关知识,HTML,语言概述,是一种超文本标记语言，作为一种网页编辑语言，易学易懂。,2023/9/4231.2网页制作的相关知识HTML语言概,2024/8/28,24,1,、,HTML,网页,HTML,网页通常是由三部分内容组成的：版本信息、网页标题（,HEAD,）和文档主体（,BODY,）。,下面就是网页结构的总体框架：,2023/9/4241、HTML网页 H,2024/8/28,25,（,1,）版本信息,版本信息位于,HTML,网页文件的第一行,（,2,）,HTML,文件标记,大部分网页文件都是以,标记开始的，在文件的结尾处又以,结束,（,3,）头部信息,HEAD,标记之间是,HTML,文档的头部，用来标明当前文档的有关信息,在,HEAD,标记之间，使用频率最高的标记就是,TITLE,，它用于定义显示在浏览器标题栏的文档标题。,2023/9/425（1）版本信息（2）HTML文件标记（3,2024/8/28,26,【,例,】,给网页设置,“,励志学社,”,的文档标题，可在头部输入以下代码：,励志学社,2023/9/426【例】给网页设置 “励志学社”的文档标题,2024/8/28,27,（,4,）主体标记,网页的主体是,“,”,标记对作用的范围,标记用于定义,HTML,文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法如下所示：,Bgcolor,为背景颜色。关于颜色的值后面会详细介绍。,Text,为不包含超级链接的文字颜色。,Link,为超级链接文字的颜色。,Alink,为正被点击的超级链接文字的颜色。,2023/9/427（4）主体标记标记用于定,2024/8/28,28,Leftmargin,、,Topmargin,用于设置网页的左边距和上边框，它们是以像素为单位,【,例,1】,将网页的上边距和左边距分别设置为,40,和,30,个像素的宽度，使用黑色文本、白色背景，未访问的链接源采用蓝色，已访问的链接源标记为暗红色。,Vlink,为已经点击过的超级链接文字的颜色。,Background,设置，如果设置了背景图片，图片会覆盖已经设置的颜色。,2023/9/428Leftmargin、Topmarg,2024/8/28,29,2,、,XML,语言,XML,（,eXtensible Markup Language,）被称作是下一代的网页标记语言，也是采用各种标记来形成网页的源代码。,XML,中包括可扩展格式语言,XSL(Extensible Style Language),和可扩展链接语言,XLL(Extensible Linking Language),。,2023/9/4292、XML语言XML（eXtens,2024/8/28,30,1.22,静态网页和动态网页,静态网页指基本上全部使用,HTML,语言制作的网页，页面的内容是固定不变的。,动态网页（,DynamicHTML,，,DHTML,）利用,JavaScript,，,CSS (,层叠样式表,),及其它类似的语言如,VBScript,等与,HTML,进行有机的结合来使静态的,HTML,网页变成动态。,2023/9/4301.22 静态网页和动态网页静态网页,2024/8/28,31,1.23 Web,服务器端程序,专业的网站都是建立在使用数据库的基础上的，要将这些数据库变成可以通过浏览器显示和操作的,Web,页面，就需要编写服务器端的程序。用户向服务器传送提交的表单（个人信息、选择结果等）需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。,目前常用的服务器端编程技术主要有,CGI,、,ASP,、,PHP,、,JSP,等，不同的技术需要不同的系统环境支持。,2023/9/4311.23 Web服务器端程序专业的,2024/8/28,32,1.3,网页制作的基本方法,制作网页的基本步骤,1,、确定网页的内容,2,、设计网页的组织结构,3,、资料的收集与整理,4,、选择网页的设计方法,常用的网页制作工具有,Frontpage,、,Dreamweaver,等。服务器端的,ASP,程序可以使用,Visual Interdev,、,UltraDEV,等编辑。,2023/9/4321.3 网页制作的基本方法制作网页的基本,2024/8/28,33,开始网页制作,构建页面框架,创建导航条,填充内容,创建返回主页连接,2023/9/433开始网页制作构建页面框架,2024/8/28,34,网页制作的原则,站点要有创意,整体规划,动画不能过多,导航要明朗,制作通用网页,主题鲜明,优化图象,定时更新,2023/9/434网页制作的原则站点要有创意,2024/8/28,35,制作网页时要注意的问题,1,、网页的标题要简洁，明确。,2,、在文本中要使用水平线，以分割不同部分。,3,、对重点段落要强调显示。,4,、网页中插入的图片要尽量的小。,5,、图形要附加文字说明，以便关闭图像时查看。,6,、网页中引用的资料及商标（或图标），不能侵犯版权。,2023/9/435制作网页时要注意的问题 1、网页的标题要,2024/8/28,36,1.4 Macromedia Studio MX2004,Macromedia Studio MX2004,是目前应用最广泛的网页制作工具组件，使用方便、功能齐全，,Dreamweaver,、,Flash,、,Fireworks,被称作,“,网页三剑客,”,。,在,Dreamweaver,里用丰富的层叠样式表制作耐看，专业的网站。,Macromedia Flash,工具可较快的制作,SWF,文件。,Fireworks,通过自动变形，用动的效果，图片编辑工具和拖拽工具能传送较精彩的,Fireworks,图片。,2023/9/4361.4 Macromedia Studi,2024/8/28,37,思考题,1.1,什么是,WWW,？什么是网页？,1.2,一个完整的,URL,由哪几部分组成？举出几个,URL,的例子。,1.3,如何设置,IE,的主页？如何用,IE,收藏一个网页？,1.4,网页中一般都使用了哪些技术？,1.5 Macromedia Studio MX2004,有哪几部分组成？,2023/9/437思考题1.1 什么是WWW？什么是网页？,第,2,章,Dreamweaver MX 2004,本章要点,初识,Dreamweaver MX 2004,创建站点,Dreamweaver MX 2004,基本操作,第2章 Dreamweaver MX 2004本章,启动与退出,Dreamweaver MX 2004,安装好,Dreamweaver MX 2004,后就可以使用它进行网页制作了。接下来就讲解怎样启动与退出,Dreamweaver MX 2004,。,启动与退出Dreamweaver MX 2004安装好Dre,启动,Dreamweaver MX 2004,启动,Dreamweaver MX 2004,可选择,“,开始,/,所有程序,/Macromedia/Macromedia Dreamweaver MX 2004,”,命令。也可双击,Dreamweaver MX 2004,的桌面快捷方式。,启动Dreamweaver MX 2004启动Dream,启动,Dreamweaver MX,启动Dreamweaver MX,启动,Dreamweaver MX 2004,首次启动,Dreamweaver MX 2004,时，将弹出,“,工作区设置,”,对话框。在该对话框中可选择工作区布局，对于初学者来说，基本上不会涉及代码编写，可选择 单选按钮。,启动Dreamweaver MX 2004首次启动Dr,启动,Dreamweaver MX 2004,以上是首次启动,Dreamweaver MX 2004,所需进行的操作，以后启动会直接进入工作 界面。,启动Dreamweaver MX 2004以上是首次启动Dr,退出,Dreamweaver MX 2004,在结束网页编辑后若需退出,Dreamweaver MX 2004,，操作很简单，直接单击操作窗口右上角的 按钮或选择,“,文件,/,退出,”,命令即可。,退出Dreamweaver MX 2004 在结束网页编辑,Dreamweaver MX 2004,的工作界面,启动,Dreamweaver MX 2004,后即可进入其工作界面。,Dreamweaver MX 2004的工作界面启动Dre,Dreamweaver MX2004,的工作窗口,标题栏,菜单栏,编辑区,文档栏,属性面板,面板组,Dreamweaver MX2004的工作窗口,Dreamweaver MX 2004,的工作界面,菜单栏,起始页,工具栏,文档编辑窗口,属性面板,面板组,Dreamweaver MX 2004的工作界面菜单栏,创建站点,规划站点,创建站点,打开站点,编辑站点,创建站点 规划站点,规 划 站 点,进行网页制作之前需创建站点，利用站点的管理功能可对站点中的文件进行管理或测试。创建站点前首先应规划站点，再通过,Dreamweaver MX 2004,的站点管理功能创建站点的框架，包括主页、分支页面和相应的文件夹等。,规 划 站 点进行网页制作之前需创建站点，利用站点的,规 划 站 点,站点的概念,规划站点结构,创建导航草图,应用举例,规划,“,诚与,”,广告公司站点,规 划 站 点站点的概念,站点的概念,多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。,Dreamweaver MX 2004,提供了,3,类站点：本地站点、远程站点和测试站点。用户可通过本地站点和远程站点在本地磁盘和,Web,服务器之间传输文件，测试站点可用于对动态站点的测试。,本地站点,远程站点,测试站点,站点的概念多个网页文档通过各种链接关联起来就构成了站点，站点,规划站点结构,设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率，加快对站点的设计。,在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到,Web,服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网页内容。,规划站点结构设计站点的必要前提是规划站点结构。规划站点结构是,规划站点结构,在站点规划过程中，需使用合理的文件名称、文件夹名称，好的名称容易理解、记忆，能够表达出网页的内容。通常在命名时，可以采用与其内容相同的英文或拼音进行命名，应避免使用长文件名和中文，如电影文件夹可以命名为,movie,或,dianying,。,制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。如果是大型站点，可分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个名称为,picture,的文件夹用以存放主页中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件夹。,规划站点结构在站点规划过程中，需使用合理的文件名称、文件夹名,创建导航草图,做好了站点的规划后，就可根据规划制作出一个导航草图便于理清思路，制作时可直接在纸上粗略绘出导航草图。,创建导航草图做好了站点的规划后，就可根据规划制作出一个导航草,创建导航草图,创建导航草图,应用举例,规划,“,诚与,”,广告公司站点,将为一个名为,“,诚与,”,的广告公司网站进行站点结构的规划。,应用举例规划“诚与”广告公司站点将为一个名为“,规划诚与广告公司站点结构图,规划诚与广告公司站点结构图,【,实例,1】,创建一个站点,使用菜单,“,站点,”“,管理站点,”,打开站点管理对话框，进行操作,创建站点,【实例1】创建一个站点创建站点,打开站点和编辑站点信息,打开站点,编辑站点,打开站点和编辑站点信息打开站点,使用,“,高级,”,方式定义站点,在,“,定义站点,”,向导进行的任意一个步骤，选择对话框上部的,“,高级,”,标签，可打开高级站点定义对话框。,使用“高级”方式定义站点 在“定义站点”向导进行的任意一,Dreamweaver MX2004,的基本操作,实例二、制作一个简单的网页,Dreamweaver MX2004的基本操作实例二、,设置工作界面,关闭面板,标尺和网格,辅助显示,首选参数的设置,设置工作界面关闭面板,对象的大小和颜色,1.,修改文字大小,在属性面板上的大小中选择文字的大小，文字大小可设置绝对尺寸、相对尺寸、长度、百分比,2.,修改文字颜色,在默认的情况下，文本在浏览器窗口内显示为黑色。在属性面板的文本颜色按钮,上单击可打开调色板，选择要设置的颜色。,对象的大小和颜色1.修改文字大小2.修改文字颜色,设置图像大小的多种操作方式,1.,拖动改变大小,拖动图像下边、右边、右下角的三个控制点可快速改变图像大小。,2.,使用属性面板,在属性面板的宽、高栏输入宽、高的像素值，可改变图像大小。,3.,使用右键菜单,在图像上面单击右键，在弹出菜单中选择,“,改变大小,”,可重设图像大小。,设置图像大小的多种操作方式1.拖动改变大小2.使用属性面板,6.,使用面板组的属性面板,使用菜单,“,窗口,”,“,属性,”,或单击,“,标签检查器,”,面板组打开属性面板，在编辑窗口中选中要设置大小的图片，再单击,“,常规,”,前面的加号，列出图片的各种属性，在,width,和,height,中设置图片大小的值 。,4.,使用系统菜单,使用菜单,“,修改,”,“,图像,”,虽然不能修改图像的大小，但可以改变图像的其他属性,。,5.,使用代码编辑器,将显示模式设为代码模式或拆分模式，可直接编辑图片文件的,HTML,代码中的,width,和,height,属性的值，改变图像大小 。,设置图像大小的多种操作方式,6.使用面板组的属性面板4.使用系统菜单5.使用代码编辑器,2024/8/28,66,第,3,章 插入网页基本元素,本章要点,插入文字,插入图像,插入表格,插入媒体元素,插入表单,2023/9/466第3章 插入网页基本元素 本章要点,2024/8/28,67,插入文字,在,Dreamweaver,中为网页插入文本有两种方法：,直接输入文本,从其他文档中复制文本,2023/9/467插入文字在Dreamweaver中为网页,2024/8/28,68,插入特殊符号,将插入工具切换到,“,文本,”,工具组；,使用菜单,“,插入,”,“,HTML,”,“,特殊字符,”,。,2023/9/468插入特殊符号将插入工具切换到“文本”工具,2024/8/28,69,插入特殊符号,插入换行符,使用,Shift+Enter,组合键,2023/9/469插入特殊符号插入换行符,2024/8/28,70,插入特殊符号,插入空格,ctrl,shift,空格,插入特殊符号，不换行空格,插入转义符,2023/9/470插入特殊符号插入空格,2024/8/28,71,设置文字属性,进行设置时使用组合键,Ctrl+F3,或菜单,“,窗口,”“,属性,”,打开属性面板。,设置字体大小,设置字体颜色,设置字体列表,【,字体,】【,编辑字体列表,】,单击,在可用字体中选则，单击,按钮,2023/9/471设置文字属性进行设置时使用组合键Ctr,2024/8/28,72,使用样式设置文字格式,【,样式,】,选择 重命名、再进行修改。,把文字变为标题 在属性面板的格式中选择,设置文本对齐 在属性面板中设置,列表 在属性面板中进行设置,2023/9/472使用样式设置文字格式,2024/8/28,73,应用举例,设置网页文本格式,下面为“如果”网页中的文本进行格式设置，要求文本标题样式与正文不同，正文中某些文字需突出，以达到美化网页文本的目的。,2023/9/473 应用举例设置网页文本格式下面为“如,2024/8/28,74,网页效果图,2023/9/474网页效果图,2024/8/28,75,插入滚动字幕,1.,插入滚动字幕,（,1,）,单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。,（,2,）,在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码窗口中光标的位置。,（,3,）,将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择器对话框。,（,4,）,在标签选择器对话框左边窗口逐级选择“,HTML,标签” “页元素”“浏览器特定”，然后在右边窗口中单击“,marquee”,，再单击下面的“插入”按钮，,marquee,标签被插入到代码中，按“关闭”按钮关闭对话框。,（,5,）,在代码中出现,，在中间的两个尖括号“,”,之间输入要滚动的文字，如“欢迎访问励志学社的主页！” 。,2023/9/475插入滚动字幕1.插入滚动字幕（1）单击编,2024/8/28,76,设置滚动字幕的属性, ,direction,为滚动的目标方向，可选,right,、,left,、,up,、,down,。,scrollamount,和,scrolldelay,为滚动数量和延迟，可设置滚动速度和间隔时间。,loop,设置循环次数，小于,1,为连续循环。,Bgcolor,设置滚动区域的背景颜色。,width,和,height,设置滚动区域的大小，沿垂直方向（,up,或,down,）滚动时，必须设置一定的高度值，否则看不到滚动的文字。,2023/9/476设置滚动字幕的属性marquee di,2024/8/28,77,设置文本超级链接,1.,使用属性面板,设置超级链接,2.,使用工具按钮,（,1,）插入超级链接,单击工具栏上的超级链接按钮,（,2,）插入邮件链接,链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮,2023/9/477 设置文本超级链接1.使用属性面板2,2024/8/28,78,设置文本超级链接,3,、设置下载文件的超级链接,4,、创建外部链接,Http:/,5,、链接文字颜色的设置,通过页面属性来设置的。,2023/9/478设置文本超级链接3、设置下载文件的超级链,2024/8/28,79,使用,锚记,设置,锚记,使用,锚记,2023/9/479使用锚记 设置锚记,2024/8/28,80,插入水平线,水平线可用于页面上内容的分隔。,将工具按钮切换到“,HTML”,，单击水平线按钮,单击该水平线，可在属性面板中设置水平线的属性，如宽度、高度、对齐方式等。,水平线的颜色可以使用属性面板中的“快速标签编辑器”设置。值得注意的是水平线的颜色只能在预览时看出来。,2023/9/480 插入水平线 水平线可用于,2024/8/28,81,插入图像,图像的格式,用于网页的图像通常只有,GIF,、,JPE,和,PNG 3,种格式。,图像的获取方法,图像文件的保存,2023/9/481插入图像图像的格式,2024/8/28,82,插入图像,插入图像的步骤如下,：,（,1,）把工具栏切换到,“,常用,”,状态，然后单击,“,图像：图象,”,按钮,（,2,）选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图。,（,3,）单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。,2023/9/482插入图像插入图像的步骤如下 ：,2024/8/28,83,设置图像的基本属性,改变图像大小,图文混排,垂直边距和水平边距,图像替代,图像边框,2023/9/483设置图像的基本属性改变图像大小,2024/8/28,84,图片超级链接和图像地图,1.,图片超级链接,2.,图像地图,如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图象地图。,（,1,）设置矩形热区,（,2,）设置圆形热区,（,3,）设置多边形热区,2023/9/484图片超级链接和图像地图1.图片超级链接2,2024/8/28,85,图像占位符和轮换图像,1.,图象占位符,2.,插入鼠标经过图像,单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择图像占位符按钮,单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠标经过图像按钮,2023/9/485图像占位符和轮换图像1. 图象占位符2.,2024/8/28,86,设置网页图片属性最终效果图,2023/9/486设置网页图片属性最终效果图,2024/8/28,87,插入表格,添加表格,编辑表格,格式化表格,导入表格数据,2023/9/487插入表格 添加表格,2024/8/28,88,插入表格,表格的知识,表格由数个行与列组成的，行、列交叉组成表格的单元格，可以在表格的单元格内插入各种信息，包括文本、数字、链接，甚至是图像。,2023/9/488 插入表格表格的知识 表格由数个行,2024/8/28,89,添加表格,新建表格,修改表格属性,设置单元格属性,2023/9/489添加表格新建表格,2024/8/28,90,1.,新建表格,（,1,）将插入工具栏切换到“常用”模式，单击表格按钮,（,2,）在表格对话框中设置表格的样式。,（,3,）单击“确定”按钮就可以把表格插到网页中。,（,4,）在表格的各个单元格中分别输入内容。,2023/9/4901.新建表格（1）将插入工具栏切换到“常,2024/8/28,91,2.,修改表格属性,高,背景颜色,边框颜色,背景图像,对齐设置,2023/9/4912.修改表格属性高,2024/8/28,92,3.,设置单元格属性,文字（属性面板的上半部分）,水平,宽、高,垂直,标题,背景和背景颜色,边框,2023/9/4923.设置单元格属性文字（属性面板的上半,2024/8/28,93,应用举例,在网页中插入表格并添加网页元素,下面为“繁花似锦”网页进行表格的添加和网页元素的添加。,2023/9/493 应用举例在网页中插入表格并添加网,2024/8/28,94,最终效果图,2023/9/494最终效果图,2024/8/28,95,编辑表格,1.,合并单元格,拖动选中要合并的单元格，单击属性面板上的合并单元格按钮,2.,拆分单元格,在要拆分的单元格中单击，在单击属性面板上的拆分单元格按钮,3.,插入或删除行、列,使用菜单“插入”“表格”菜单中的插入行或列，删除行或列进行相应的操作。,2023/9/495编辑表格1.合并单元格拖动选中要合,2024/8/28,96,编辑表格,实例,1,、绘制课本,51,页的表格。,2023/9/496编辑表格实例1、绘制课本51页的表格。,2024/8/28,97,插入图像预览效果图,2023/9/497插入图像预览效果图,2024/8/28,98,格式化表格,在要格式化的表格中单击，再使用菜单“命令”“格式化表格”打开格式化表格对话框。,2023/9/498格式化表格在要格式化的表格中单击，,2024/8/28,99,导入表格数据,1.,导出,Excel,数据为文本文件,在,Excel,中使用菜单“文件”“另存为”打开另存为对话框，在“文件类型”中选择“文本文件（制表符分割）（*,.txt,）”，保存文件为,biaoge.txt,。,2.,导入位网页表格,将“插入”工具栏切换为“布局”模式，在右边单击表格数据按钮,选择数据文件为,Excel,导出的文本文件,biaoge.txt,，定界符选“,Tab”,。表格宽度设置单元格的宽度，选择“匹配内容”。也可以制定宽度。,2023/9/499导入表格数据1. 导出Excel数据为,2024/8/28,100,插入媒体元素,动态元素是一种重要的网页元素。这里我们将学习在网页中插入动态元素，如,Flash,影片、,Flash,按钮、,Flash,文本等，此外还将学习其他一些动态元素的插入方法。,2023/9/4100插入媒体元素 动态元素是一种重要的网页,2024/8/28,101,插入媒体元素,媒体文件的类型,插入,Flash,制作播放电影、背景声音的页面,2023/9/4101插入媒体元素 媒体文件的类型,2024/8/28,102,插入媒体元素,媒体文件的类型,1.RealVideo,的,.rm,、,.rmvb,视频影像格式和,.ra,的音频格式,2.Microsoft Media technology,的,.asf,格式,3. QuickTim,的,.mov,格式,4.Flash,的,.swf,格式,5.Metastream,的,.mts,格式,6.Authorware,的,.aam,多媒体教学课件格式,2023/9/4102插入媒体元素媒体文件的类型1.Rea,2024/8/28,103,插入,Flash,1.,插入,Flash,动画,将插入工具栏切换到“常用”模式，单击“媒体：,Flash”,按钮,2.,插入,Flash,按钮,将插入工具栏切换到“常用”模式，单击“媒体：,Flash”,按钮旁边的三角形，在菜单中选择“媒体：,Flash,按钮”按钮,3.,插入,Flash,文本,将插入工具栏切换到“常用”模式，单击“媒体：,Flash”,按钮旁边的三角形，在菜单中选择“媒体：,Flash,文本”按钮,2023/9/4103插入Flash1.插入Flash动画,2024/8/28,104,制作播电影、声音的页面,1.,插入插件,（,1,）将插入工具栏切换到“常用”模式，单击“媒体：,Flash”,按钮旁边的三角形，在菜单中选择“媒体：,Flash,文本”按钮,（,2,）选择一个要插入网页的电影格式的文件,（,3,）在编辑窗口中看到插入了一个灰色矩形插件标志，调整其大小可调整网页中的播放窗口的大小。,（,4,）单击属性面板上的“参数”按钮，可设置各种播放参数。,2023/9/4104制作播电影、声音的页面1.插入插件,2024/8/28,105,2.,插入背景声音,（,1,）,将插入工具栏设置为“常规”，单击标签选择器按钮,（,2,）,在标签选择器对话框左边窗口逐级选择“,HTML,标签” “页元素”“浏览器特定”，然后在右边窗口中单击“,bgsound”,，再单击下面的“插入”按钮，打开“标签编辑器,-bgsound”,对话框。,（,3,）,在“源”中指定背景音乐文件，可以是,.wav,、,.mid,或,.mp3,格式的音频文件。,（,4,）,在“循环”栏指定网页调入时背景音乐的播放次数，选择“无限（,-1,）”循环播放。其他选项根据需要设置。,（,5,）,单击“确定”，背景音乐就插入到网页中。关闭标签选择器对话框。,2023/9/41052.插入背景声音（1）将插入工具栏设置,2024/8/28,106,插入表单,文本字段,复选框,单选按钮,下拉式菜单,隐藏区域,按钮,2023/9/4106插入表单文本字段,2024/8/28,107,表 单 简 介,在网上浏览时常会遇到要求填写资料或提供信息的页面，如申请,QQ,号码时填写个人信息的页面，网上购物时填写的购物单等，这些页面即是表单页面。表单通常由多个表单对象组成，如单选按钮、复选框、文本字段以及按钮等，网站管理员可以通过表单从浏览者处收集需要的信息，从而实现信息的传递。,2023/9/4107表 单 简 介在网上浏览时常会遇到要求,2024/8/28,108,表单的工作原理,表单支持客户端,-,服务器关系中的客户端。当访问者在,Web,浏览器中显示的表单中输入信息，然后单击提交按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序在该处对这些信息进行处理。用于处理表单数据的常用服务器端技术包括,Macromedia ColdFusion,、,Microsoft Active Server Pages,（,ASP,）和,PHP,。,图,6-60,表单的组成对象,2023/9/4108 表单的工作原理 图6-60,2024/8/28,109,一个实例,制作一个个人简历调查表，收集个人的资料。该调查表是表单应用的典型实例。,实例效果,2023/9/4109一个实例 实例效果,2024/8/28,110,创建表单,将插入工具栏切换到“表单”模式，单击创建表单按钮,插入的表单区域用红色虚线表示，后面插入的所有表单元素都要插入到这个虚线中。,2023/9/4110创建表单将插入工具栏切换到“表单”,2024/8/28,111,文本字段,1.,单行文本,在表单中输入“用户名”，在单击工具栏上的文本字段按钮,2.,密码,密码输入区用于用户输入密码信息，用户在此区域输入的所有字符都显示为“*” 或黑点。,3.,多行文本,在单击工具栏上的文本区域按钮,2023/9/4111文本字段1.单行文本在表单中输入“,2024/8/28,112,复选框,单击工具栏上的复选框按钮,单选按钮,1.,单选按钮,单击工具栏上的单选按钮按钮,2.,单选按钮组,单击工具栏上的单选按钮组按钮,2023/9/4112复选框单击工具栏上的复选框按钮 单选按,2024/8/28,113,下拉菜单,1.,列表,/,菜单,单击工具栏上的列表,/,菜单按钮,2.,跳转菜单,在工具栏上单击跳转菜单按钮,2023/9/4113下拉菜单1.列表/菜单单击工具栏上的列,2024/8/28,114,隐藏区域,在工具栏上单击隐藏域按钮,在网页中插入一个隐藏域标志,按钮,在工具栏上单击按钮按钮,2023/9/4114隐藏区域在工具栏上单击隐藏域按钮 在网,第,4,章：页面设计,第4章：页面设计,2024/8/28,116,网页的风格,1,“,搜狐”的主页的内容很丰富，色彩鲜艳并有许多大幅广告和浮动广告栏。,2023/9/4116 网页的风格1 “搜狐”的主页的内,2024/8/28,117,网页的风格,2,微软中国的主页，内容比较专一，内容非常有条理，栏目突出，没有凌乱的感觉。,2023/9/4117 网页的风格2 微软中国的主页,2024/8/28,118,网页的风格,3,“,黑白音乐” 是一个个人主页，它看起来更简单，色彩也不够丰富，但感觉非常清新。,2023/9/4118网页的风格3 “黑白音乐” 是一,2024/8/28,119,本章要点,设置网页属性,页面布局,使用框架布局,层的使用,使用,CSS,CSS,属性,2023/9/4119本章要点设置网页属性,2024/8/28,120,网页标题,如果文档工具栏没有显示，使用菜单,“,查看,”,“,工具,”,“,文档,”,可打开其显示。,2023/9/4120网页标题 如果文档工具栏没有显示，使,2024/8/28,121,页面设置,1,外观,2,链接,3,标题,4,标题,/,编码,5,跟踪图像,2023/9/4121 页面设置1外观,2024/8/28,122,文件头设置,1.META,META,设置自定义的一组网页属性的描述。,2.,关键字,关键字设置网页网站的一组关键字，许多搜索引擎和网站关联性统计是通过关键字搜索网页的。,3.,描述,设置对网页的一些描述，一般是网页内容的概述，供其它开发者参考。,2023/9/4122文件头设置1.META2.关键字3.描,2024/8/28,123,4.,刷新,刷新定义网也调入后延迟一段时间的动作,5.,基础,设置网页的基准地址,6.,链接,链接用于设置需要链接的,CSS,等外部文件的地址和类型。,文件头设置,2023/9/41234.刷新5.基础6.链接文件头设置,2024/8/28,124,网页布局实例,1,2023/9/4124 网页布局实例1,2024/8/28,125,网页布局实例,2,2023/9/4125 网页布局实例2,2024/8/28,126,网页布局实例,3,标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。,2023/9/4126 网页布局实例3 标题正文型结构,2024/8/28,127,网页布局实例,4,2023/9/4127网页布局实例4,2024/8/28,128,网页布局实例,5,2023/9/4128 网页布局实例5,2024/8/28,129,网页布局实例,6,2023/9/4129 网页布局实例6,2024/8/28,130,网页的版面布局,1.,确定显示分辨率,2.,版面布局的模式,（,1,）,T,型结构布局,（,2,）口型布局,（,3,）三型布局,（,4,）对称对比布局,（,5,）,POP,布局,2023/9/4130网页的版面布局1.确定显示分辨率2.版,2024/8/28,131,画出网页布局草图,标题,图片栏,链接文字区,主要内容区,网站版权信息区,2023/9/4131画出网页布局草图 标题图片栏链接文字区,2024/8/28,132,表格布局,1,个实例,使用表格对课本,74,页的网页进行布局。,2023/9/4132表格布局1个实例,2024/8/28,133,操作步骤,（,1,）,插入一个,3,行,1,列的表格,a,。,a 760420,边框为,0,，填充、间距为,0,，对齐方式居中。,（,2,）,在表格,a,的第,3,行插入,1,条水平线，宽度为,70,。居中。文字,（,3,）,在表格,a,的第,1,行中插入,1,个,2,行,1,列的表格,b,。宽度,100,。其余,0,（,4,）,在表格,b,的第,1,行插入一个,1,行,2,列的表格,c,。宽度,100,。,2023/9/4133操作步骤（1） 插入一个3行1列,2024/8/28,134,（,5,）,在表格,b,的第,2,行插入一个,1,行,5,列的表格,d,。宽度,100,。,（,6,）,在表格,a,的第,2,行插入一个,1,行,2,列的表格,e,。宽度,100,。,（,7,）,在表格,e,的第,1,列插入一个,2,行,1,列的表格,f,。宽度,100,。,（,8,）,在表格,e,的第,2,列插入一个,2,行,1,列的表格,g,。宽度,100,。,（,9,）在表格,g,的第,2,行插入一个,1,行,3,列的表格,h,。宽度,100,。,2023/9/4134（5） 在表格b的第2行插入一个,2024/8/28,135,使用扩展模式布局,在工具栏上单击扩展表格模式按钮，既可切换到,“,扩展表格模式,”,。,扩展模式下并不是所见即所得的效果，最好不要在单元格中添加内容，只进行页面设计操作。,2023/9/4135 使用扩展模式布局 在工具栏上单击,2024/8/28,136,使用布局模式布局,用表格布局的页面，往往给人一种过于整齐的排列效果，而使用,“,布局模式,”,，则可以是网页中的元素快速、灵活地定位。,在,“,插入,”,工具栏单击,“,布局,”,按钮，进入布局模式。,2023/9/4136 使用布局模式布局用表格布局的页面,2024/8/28,137,使用布局模式布局,绘制布局表格,绘制布局单元格,2023/9/4137使用布局模式布局绘制布局表格,2024/8/28,138,使用框架布局,一个实例：,2023/9/4138使用框架布局一个实例：,2024/8/28,139,框架与框架集的概念,单个框架是指在网页上定义的一个区域，而框架集则记录了同一网页上多个框架的布局、链接和属性信息。,利用框架可以把浏览器窗口划分为多个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。,框架集与框架之间的关系是包含与被包含的关系，多个框架就组成了框架集，框架集包含了框架,1,、框架,2,和框架,3,共,3,个框架。,2023/9/4139 框架与框架集的概念单个框架是指在,2024/8/28,140,框架与框架集的概念,用框架布局网页时有如下的技巧和规则：,创建好框架或框架集后可对其属性进行设置。,每个框架就是不同的,HTML,网页，我们需要分别保存每个框架文件和框架集文件。,确保文件中的每个链接都正确。,2023/9/4140 框架与框架集的概念用框架布局网页,2024/8/28,141,使用框架布局,框架集网页,1.,创建一个新的框架集网页,创建框架网页前先要让框架边框显示。在,“,文档,”,工具栏的最右边单击视图选项按钮,在弹出的菜单中选择,“,可视化助理,”,“,框架边框,”,，使得框架边框被选中。,2023/9/4141使用框架布局框架集网页1.创建一个新的,2024/8/28,142,创建一个新的框架集网页的方法,保存设置框架集,编辑框架结构,2023/9/4142 创建一个新的框架集网页的方法,2024/8/28,143,父框架和子框架,该图的框架就是先分成上下框架，再把下框架分成左右框架。一般把下框架称为左右框架的父框架，则左右框架是下框架的子框架。,右下框架占最大的区域，用来显示主要的网页内容，称为主框架。,2023/9/4143父框架和子框架 该图的框架就是先分,2024/8/28,144,设置框架与框架集的属性,设置框架属性,设置框架集属性,2023/9/4144设置框架与框架集的属性设置框架属性,2024/8/28,145,设置框架属性,“,框架名称,”,文本框,“,源文件,”,文本框,“,滚动,”,下拉列表框,复选框,“,边框,”,下拉列表框,“,边框颜色,”,下拉列表框,“,边界宽度,”,文本框,“,边界高度,”,文本框,2023/9/4145 设置框架属性,2024/8/28,146,设置框架集属性,选择需设置属性的框架集。,框架集,“,属性,”,面板中各设置参数含义和框架,“,属性,”,面板中的基本相同，不同的是在,“,行,”,或,“,列,”,文本框中可设置框架的行或列的宽度，在,“,单位,”,下拉列表框中选择单位后即可输入所需数值。,2023/9/4146设置框架集属性选择需设置属性的框架集。,2024/8/28,147,框架链接的目标,1.,设置网页元素的链接目标,2.,设置网页的缺省显示区域,_blank,：打开一个新窗口显示目标网页。,_parent,：目标网页的内容在父框架窗口中显示。,_self,：目标网页的内容在当前所在框架窗口中显示。,_top,：目标网页的内容在最顶层框架窗口中显示。,使用菜单,“,插入,”“,HTML,”“,文件头标签,”“,基础,”,，打开,“,基础,”,对话框，在目标中可选择此网页中超链接的默认显示窗口。,Href,中设置默认查找的网络路径。,2023/9/4147框架链接的目标1.设置网页元素的链接,2024/8/28,148,一个实例,利用框架为,“,书香盈袖,”,网页布局页面，并为其添加网页元素。,202
展开阅读全文