《网页设计与制作》课件.ppt

2020/5/11,1,主要内容：,第1章：网页制作基础第2章：Dreamweaver第3章：插入网页基本元素第4章：页面设计第5章：高级网页制作,2020/5/11,2,第1章网页制作基础,Web和浏览器WebWeb的特点和结构Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式在浏览器和服务器之间应用HTTP（HyperTextTransferProtocol，超文本传输协议）作为网络应用层通信协议,2020/5/11,3,URL,Internet上所有的资源都有一个唯一的URL地址，一般将URL地址称为网址。,URL的完整格式如下：,协议:/主机名（或IP地址）：端口号/路径名/文件名,2020/5/11,4,【例】几个URL的例子.,（1），用http协议和缺省端口号（80）访问微软公司服务器。这里没有指定路径和文件名，所以访问的结果是把一个缺省主页送给浏览器。,（2）ftp:/,2020/5/11,5,（3）:8001/uu-gna/index.html，从运行在端口号8001的服务器上访问index.html主页。,（4)/Addressing/URL/5-BNF.html#httpaddress，访问服务器上Addressing/URL目录下的5-BNF.html网页文件中锚点标识为httpaddress的地方。,2020/5/11,6,浏览器,概述分类InternetExplorerNetscapeNavigatorMosaic等专业浏览器以及一些以上述浏览器为内核的专用浏览器。其中使用最广泛的是Microsoft出品的InternetExplorer6.0（简称IE6）。,2020/5/11,7,IE6的界面,2020/5/11,8,IE6.0的使用,浏览网页,“停止”按钮前进和后退刷新页面改变文字大小选择编码全屏幕显示查看源文件,2020/5/11,9,打开多个窗口,用菜单栏上的“文件”“新建”“窗口”，会打开一个新的浏览器窗口。,一般情况下，打开四、五个窗口可以充分利用系统资源，而且通过调整窗口的大小和位置还可以同时浏览。,2020/5/11,10,主页、临时文件和历史记录,浏览器在打开时自动调入的网页称为“主页”，主页可以通过“工具”“Internet选项”打开Internet选项对话框，在“常规”选项卡的“主页”栏设置.,2020/5/11,11,收藏夹的使用,使用菜单“收藏”“添加到收藏夹”打开添加到收藏夹对话框。,2020/5/11,12,使用菜单“收藏”“整理收藏夹”打开收藏夹整理对话框，进行收藏夹中网页的移动、删除、改名及创建新文件夹等操作。,2020/5/11,13,关闭图片显示,在网络速度较慢时，不观看网页中的图片和其它多媒体内容可以得到更快的下载速度。通过“工具”“Internet选项”打开Internet选项对话框，在“高级”选项卡中可以对浏览器的工作方式进行设置,2020/5/11,14,关闭自动完成功能,通过工具Internet选项，打开Internet选项对话框，在“内容”选项卡的“个人信息”部分单击“自动完成”按钮打开自动完成设置对话框。,2020/5/11,15,搜索引擎的使用,1、使用浏览器的“搜索”按钮2、使用专门的搜索引擎(Google)(摆渡)(雅虎)(搜狐),2020/5/11,16,认识网站,1.门户网站2.个人网站3.专业网站4.职能网站,2020/5/11,17,1.门户网站,这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容，具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐（）、网易（）等。,2020/5/11,18,2.个人网站,个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等都是非常有个性的。,2020/5/11,19,3.专业网站,这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。如榕树下网站（）即是一个专业文学网站。,2020/5/11,20,4.职能网站,职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站，较有名的电子商务网站有阿里巴巴（）、卓越网（）和当当网上书店（）等。,2020/5/11,21,认识网页,2020/5/11,22,网页中的元素,1.文字2.图像3.表单4.Flash动画5.表格6.超级链接7.视频、音频8.POP窗口9.标题栏和状态栏文字,2020/5/11,23,1.2网页制作的相关知识,HTML语言概述是一种超文本标记语言，作为一种网页编辑语言，易学易懂。,2020/5/11,24,1、HTML网页,HTML网页通常是由三部分内容组成的：版本信息、网页标题（HEAD）和文档主体（BODY）。,下面就是网页结构的总体框架：,2020/5/11,25,（1）版本信息版本信息位于HTML网页文件的第一行,（2）HTML文件标记大部分网页文件都是以标记开始的，在文件的结尾处又以结束,（3）头部信息HEAD标记之间是HTML文档的头部，用来标明当前文档的有关信息,在HEAD标记之间，使用频率最高的标记就是TITLE，它用于定义显示在浏览器标题栏的文档标题。,2020/5/11,26,【例】给网页设置“励志学社”的文档标题，可在头部输入以下代码：励志学社,2020/5/11,27,（4）主体标记网页的主体是“”标记对作用的范围,标记用于定义HTML文档主体的开始，它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性，其基本用法如下所示：Bgcolor为背景颜色。关于颜色的值后面会详细介绍。Text为不包含超级链接的文字颜色。Link为超级链接文字的颜色。Alink为正被点击的超级链接文字的颜色。,2020/5/11,28,Leftmargin、Topmargin用于设置网页的左边距和上边框，它们是以像素为单位,【例1】将网页的上边距和左边距分别设置为40和30个像素的宽度，使用黑色文本、白色背景，未访问的链接源采用蓝色，已访问的链接源标记为暗红色。,Vlink为已经点击过的超级链接文字的颜色。Background设置，如果设置了背景图片，图片会覆盖已经设置的颜色。,2020/5/11,29,2、XML语言,XML（eXtensibleMarkupLanguage）被称作是下一代的网页标记语言，也是采用各种标记来形成网页的源代码。,XML中包括可扩展格式语言XSL(ExtensibleStyleLanguage)和可扩展链接语言XLL(ExtensibleLinkingLanguage)。,2020/5/11,30,1.22静态网页和动态网页,静态网页指基本上全部使用HTML语言制作的网页，页面的内容是固定不变的。,动态网页（DynamicHTML，DHTML）利用JavaScript，CSS(层叠样式表)及其它类似的语言如VBScript等与HTML进行有机的结合来使静态的HTML网页变成动态。,2020/5/11,31,1.23Web服务器端程序,专业的网站都是建立在使用数据库的基础上的，要将这些数据库变成可以通过浏览器显示和操作的Web页面，就需要编写服务器端的程序。用户向服务器传送提交的表单（个人信息、选择结果等）需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。目前常用的服务器端编程技术主要有CGI、ASP、PHP、JSP等，不同的技术需要不同的系统环境支持。,2020/5/11,32,1.3网页制作的基本方法,制作网页的基本步骤,1、确定网页的内容,2、设计网页的组织结构,3、资料的收集与整理,4、选择网页的设计方法,常用的网页制作工具有Frontpage、Dreamweaver等。服务器端的ASP程序可以使用VisualInterdev、UltraDEV等编辑。,2020/5/11,33,开始网页制作,构建页面框架创建导航条填充内容创建返回主页连接,2020/5/11,34,网页制作的原则,站点要有创意整体规划动画不能过多导航要明朗制作通用网页主题鲜明优化图象定时更新,2020/5/11,35,制作网页时要注意的问题,1、网页的标题要简洁，明确。2、在文本中要使用水平线，以分割不同部分。3、对重点段落要强调显示。4、网页中插入的图片要尽量的小。5、图形要附加文字说明，以便关闭图像时查看。6、网页中引用的资料及商标（或图标），不能侵犯版权。,2020/5/11,36,1.4MacromediaStudioMX2004,MacromediaStudioMX2004是目前应用最广泛的网页制作工具组件，使用方便、功能齐全，Dreamweaver、Flash、Fireworks被称作“网页三剑客”。,在Dreamweaver里用丰富的层叠样式表制作耐看，专业的网站。,MacromediaFlash工具可较快的制作SWF文件。,Fireworks通过自动变形，用动的效果，图片编辑工具和拖拽工具能传送较精彩的Fireworks图片。,2020/5/11,37,思考题,1.1什么是WWW？什么是网页？1.2一个完整的URL由哪几部分组成？举出几个URL的例子。1.3如何设置IE的主页？如何用IE收藏一个网页？1.4网页中一般都使用了哪些技术？1.5MacromediaStudioMX2004有哪几部分组成？,第2章DreamweaverMX2004,本章要点初识DreamweaverMX2004创建站点DreamweaverMX2004基本操作,启动与退出DreamweaverMX2004,安装好DreamweaverMX2004后就可以使用它进行网页制作了。接下来就讲解怎样启动与退出DreamweaverMX2004。,启动DreamweaverMX2004,启动DreamweaverMX2004可选择“开始/所有程序/Macromedia/MacromediaDreamweaverMX2004”命令。也可双击DreamweaverMX2004的桌面快捷方式。,启动DreamweaverMX,启动DreamweaverMX2004,首次启动DreamweaverMX2004时，将弹出“工作区设置”对话框。在该对话框中可选择工作区布局，对于初学者来说，基本上不会涉及代码编写，可选择单选按钮。,启动DreamweaverMX2004,以上是首次启动DreamweaverMX2004所需进行的操作，以后启动会直接进入工作界面。,退出DreamweaverMX2004,在结束网页编辑后若需退出DreamweaverMX2004，操作很简单，直接单击操作窗口右上角的按钮或选择“文件/退出”命令即可。,DreamweaverMX2004的工作界面,启动DreamweaverMX2004后即可进入其工作界面。,DreamweaverMX2004的工作窗口,标题栏,菜单栏,编辑区,文档栏,属性面板,面板组,DreamweaverMX2004的工作界面,菜单栏起始页工具栏文档编辑窗口属性面板面板组,创建站点,规划站点创建站点打开站点编辑站点,规划站点,进行网页制作之前需创建站点，利用站点的管理功能可对站点中的文件进行管理或测试。创建站点前首先应规划站点，再通过DreamweaverMX2004的站点管理功能创建站点的框架，包括主页、分支页面和相应的文件夹等。,规划站点,站点的概念规划站点结构创建导航草图应用举例规划“诚与”广告公司站点,站点的概念,多个网页文档通过各种链接关联起来就构成了站点，站点可以小到一个网页，也可以大到整个网站。DreamweaverMX2004提供了3类站点：本地站点、远程站点和测试站点。用户可通过本地站点和远程站点在本地磁盘和Web服务器之间传输文件，测试站点可用于对动态站点的测试。本地站点远程站点测试站点,规划站点结构,设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率，加快对站点的设计。在制作站点时通常先在本地磁盘上创建一个文件夹，将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时，直接将这些文件夹上传到Web服务器上即可。如果站点内容较多或站点较大，则还需建立子文件夹以存放不同类型的网页内容。,规划站点结构,在站点规划过程中，需使用合理的文件名称、文件夹名称，好的名称容易理解、记忆，能够表达出网页的内容。通常在命名时，可以采用与其内容相同的英文或拼音进行命名，应避免使用长文件名和中文，如电影文件夹可以命名为movie或dianying。制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。如果是大型站点，可分别创建相应的文件夹在各个类别的文件夹下，如在站点根目录下创建一个名称为picture的文件夹用以存放主页中用到的图片和动画。如果站点内容较少，可以只在站点的根目录下创建一个文件夹。,创建导航草图,做好了站点的规划后，就可根据规划制作出一个导航草图便于理清思路，制作时可直接在纸上粗略绘出导航草图。,创建导航草图,应用举例规划“诚与”广告公司站点,将为一个名为“诚与”的广告公司网站进行站点结构的规划。,规划诚与广告公司站点结构图,【实例1】创建一个站点使用菜单“站点”“管理站点”打开站点管理对话框，进行操作,创建站点,打开站点和编辑站点信息,打开站点编辑站点,使用“高级”方式定义站点,在“定义站点”向导进行的任意一个步骤，选择对话框上部的“高级”标签，可打开高级站点定义对话框。,DreamweaverMX2004的基本操作,实例二、制作一个简单的网页,设置工作界面,关闭面板标尺和网格辅助显示首选参数的设置,对象的大小和颜色,1.修改文字大小在属性面板上的大小中选择文字的大小，文字大小可设置绝对尺寸、相对尺寸、长度、百分比,2.修改文字颜色在默认的情况下，文本在浏览器窗口内显示为黑色。在属性面板的文本颜色按钮上单击可打开调色板，选择要设置的颜色。,设置图像大小的多种操作方式,1.拖动改变大小拖动图像下边、右边、右下角的三个控制点可快速改变图像大小。,2.使用属性面板在属性面板的宽、高栏输入宽、高的像素值，可改变图像大小。,3.使用右键菜单在图像上面单击右键，在弹出菜单中选择“改变大小”可重设图像大小。,6.使用面板组的属性面板使用菜单“窗口”“属性”或单击“标签检查器”面板组打开属性面板，在编辑窗口中选中要设置大小的图片，再单击“常规”前面的加号，列出图片的各种属性，在width和height中设置图片大小的值。,4.使用系统菜单使用菜单“修改”“图像”虽然不能修改图像的大小，但可以改变图像的其他属性。,5.使用代码编辑器将显示模式设为代码模式或拆分模式，可直接编辑图片文件的HTML代码中的width和height属性的值，改变图像大小。,设置图像大小的多种操作方式,2020/5/11,66,第3章插入网页基本元素,本章要点插入文字插入图像插入表格插入媒体元素插入表单,2020/5/11,67,插入文字,在Dreamweaver中为网页插入文本有两种方法：直接输入文本从其他文档中复制文本,2020/5/11,68,插入特殊符号,将插入工具切换到“文本”工具组；使用菜单“插入”“HTML”“特殊字符”。,2020/5/11,69,插入特殊符号,插入换行符使用Shift+Enter组合键,2020/5/11,70,插入特殊符号,插入空格ctrlshift空格插入特殊符号，不换行空格插入转义符,2020/5/11,71,设置文字属性,进行设置时使用组合键Ctrl+F3或菜单“窗口”“属性”打开属性面板。设置字体大小设置字体颜色设置字体列表【字体】【编辑字体列表】单击在可用字体中选则，单击按钮,2020/5/11,72,使用样式设置文字格式【样式】选择重命名、再进行修改。把文字变为标题在属性面板的格式中选择设置文本对齐在属性面板中设置列表在属性面板中进行设置,2020/5/11,73,应用举例设置网页文本格式,下面为“如果”网页中的文本进行格式设置，要求文本标题样式与正文不同，正文中某些文字需突出，以达到美化网页文本的目的。,2020/5/11,74,网页效果图,2020/5/11,75,插入滚动字幕,1.插入滚动字幕,（1）单击编辑窗口上方的“拆分”按钮，将视图切换为拆分模式。,（2）在下方的设计窗口中单击要插入滚动字幕的位置，此时注意查看代码窗口中光标的位置。,（3）将插入工具栏设置为“常规”，单击标签选择器按钮，打开标签选择器对话框。,（4）在标签选择器对话框左边窗口逐级选择“HTML标签”“页元素”“浏览器特定”，然后在右边窗口中单击“marquee”，再单击下面的“插入”按钮，marquee标签被插入到代码中，按“关闭”按钮关闭对话框。,（5）在代码中出现，在中间的两个尖括号“”之间输入要滚动的文字，如“欢迎访问励志学社的主页！”。,2020/5/11,76,设置滚动字幕的属性,direction为滚动的目标方向，可选right、left、up、down。scrollamount和scrolldelay为滚动数量和延迟，可设置滚动速度和间隔时间。loop设置循环次数，小于1为连续循环。Bgcolor设置滚动区域的背景颜色。width和height设置滚动区域的大小，沿垂直方向（up或down）滚动时，必须设置一定的高度值，否则看不到滚动的文字。,2020/5/11,77,设置文本超级链接,1.使用属性面板设置超级链接,2.使用工具按钮,（1）插入超级链接单击工具栏上的超级链接按钮,（2）插入邮件链接链接目标是电子邮件地址时，单击工具栏上的电子邮件链接按钮,2020/5/11,78,设置文本超级链接,3、设置下载文件的超级链接4、创建外部链接Http:/5、链接文字颜色的设置通过页面属性来设置的。,2020/5/11,79,使用锚记,设置锚记使用锚记,2020/5/11,80,插入水平线,水平线可用于页面上内容的分隔。将工具按钮切换到“HTML”，单击水平线按钮,单击该水平线，可在属性面板中设置水平线的属性，如宽度、高度、对齐方式等。水平线的颜色可以使用属性面板中的“快速标签编辑器”设置。值得注意的是水平线的颜色只能在预览时看出来。,2020/5/11,81,插入图像,图像的格式用于网页的图像通常只有GIF、JPE和PNG3种格式。图像的获取方法图像文件的保存,2020/5/11,82,插入图像,插入图像的步骤如下：（1）把工具栏切换到“常用”状态，然后单击“图像：图象”按钮（2）选择要插入的图像文件，在文件列表中单击一个图象文件时，图象预览区会显示这个图象的缩略图。（3）单击确定按钮，如果图像文件在站点文件夹中，就会直接插入到网页中，同时在编辑窗口显示出图像。,2020/5/11,83,设置图像的基本属性,改变图像大小图文混排垂直边距和水平边距图像替代图像边框,2020/5/11,84,图片超级链接和图像地图,1.图片超级链接,2.图像地图,如果想在一个图像的不同位置上点击，就跳转到相应的目标网页，就需要使用图象地图。,（1）设置矩形热区（2）设置圆形热区（3）设置多边形热区,2020/5/11,85,图像占位符和轮换图像,1.图象占位符,2.插入鼠标经过图像,单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择图像占位符按钮,单击工具栏上的图像按钮旁边的小三角形，在下拉式菜单中选择鼠标经过图像按钮,2020/5/11,86,设置网页图片属性最终效果图,2020/5/11,87,插入表格,添加表格编辑表格格式化表格导入表格数据,2020/5/11,88,插入表格,表格的知识,表格由数个行与列组成的，行、列交叉组成表格的单元格，可以在表格的单元格内插入各种信息，包括文本、数字、链接，甚至是图像。,2020/5/11,89,添加表格,新建表格修改表格属性设置单元格属性,2020/5/11,90,1.新建表格,（1）将插入工具栏切换到“常用”模式，单击表格按钮,（2）在表格对话框中设置表格的样式。,（3）单击“确定”按钮就可以把表格插到网页中。,（4）在表格的各个单元格中分别输入内容。,2020/5/11,91,2.修改表格属性,高背景颜色边框颜色背景图像对齐设置,2020/5/11,92,3.设置单元格属性,文字（属性面板的上半部分）水平宽、高垂直标题背景和背景颜色边框,2020/5/11,93,应用举例在网页中插入表格并添加网页元素,下面为“繁花似锦”网页进行表格的添加和网页元素的添加。,2020/5/11,94,最终效果图,2020/5/11,95,编辑表格,1.合并单元格,拖动选中要合并的单元格，单击属性面板上的合并单元格按钮,2.拆分单元格,在要拆分的单元格中单击，在单击属性面板上的拆分单元格按钮,3.插入或删除行、列,使用菜单“插入”“表格”菜单中的插入行或列，删除行或列进行相应的操作。,2020/5/11,96,编辑表格,实例1、绘制课本51页的表格。,2020/5/11,97,插入图像预览效果图,2020/5/11,98,格式化表格,在要格式化的表格中单击，再使用菜单“命令”“格式化表格”打开格式化表格对话框。,2020/5/11,99,导入表格数据,1.导出Excel数据为文本文件,在Excel中使用菜单“文件”“另存为”打开另存为对话框，在“文件类型”中选择“文本文件（制表符分割）（*.txt）”，保存文件为biaoge.txt。,2.导入位网页表格,将“插入”工具栏切换为“布局”模式，在右边单击表格数据按钮,选择数据文件为Excel导出的文本文件biaoge.txt，定界符选“Tab”。表格宽度设置单元格的宽度，选择“匹配内容”。也可以制定宽度。,2020/5/11,100,插入媒体元素,动态元素是一种重要的网页元素。这里我们将学习在网页中插入动态元素，如Flash影片、Flash按钮、Flash文本等，此外还将学习其他一些动态元素的插入方法。,2020/5/11,101,插入媒体元素,媒体文件的类型插入Flash制作播放电影、背景声音的页面,2020/5/11,102,插入媒体元素,媒体文件的类型,1.RealVideo的.rm、.rmvb视频影像格式和.ra的音频格式,2.MicrosoftMediatechnology的.asf格式,3.QuickTim的.mov格式,4.Flash的.swf格式,5.Metastream的.mts格式,6.Authorware的.aam多媒体教学课件格式,2020/5/11,103,插入Flash,1.插入Flash动画,将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮,2.插入Flash按钮,将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash按钮”按钮,3.插入Flash文本,将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash文本”按钮,2020/5/11,104,制作播电影、声音的页面,1.插入插件,（1）将插入工具栏切换到“常用”模式，单击“媒体：Flash”按钮旁边的三角形，在菜单中选择“媒体：Flash文本”按钮,（2）选择一个要插入网页的电影格式的文件,（3）在编辑窗口中看到插入了一个灰色矩形插件标志，调整其大小可调整网页中的播放窗口的大小。,（4）单击属性面板上的“参数”按钮，可设置各种播放参数。,2020/5/11,105,2.插入背景声音,（1）将插入工具栏设置为“常规”，单击标签选择器按钮,（2）在标签选择器对话框左边窗口逐级选择“HTML标签”“页元素”“浏览器特定”，然后在右边窗口中单击“bgsound”，再单击下面的“插入”按钮，打开“标签编辑器-bgsound”对话框。,（3）在“源”中指定背景音乐文件，可以是.wav、.mid或.mp3格式的音频文件。,（4）在“循环”栏指定网页调入时背景音乐的播放次数，选择“无限（-1）”循环播放。其他选项根据需要设置。,（5）单击“确定”，背景音乐就插入到网页中。关闭标签选择器对话框。,2020/5/11,106,插入表单,文本字段复选框单选按钮下拉式菜单隐藏区域按钮,2020/5/11,107,表单简介,在网上浏览时常会遇到要求填写资料或提供信息的页面，如申请QQ号码时填写个人信息的页面，网上购物时填写的购物单等，这些页面即是表单页面。表单通常由多个表单对象组成，如单选按钮、复选框、文本字段以及按钮等，网站管理员可以通过表单从浏览者处收集需要的信息，从而实现信息的传递。,2020/5/11,108,表单的工作原理表单支持客户端-服务器关系中的客户端。当访问者在Web浏览器中显示的表单中输入信息，然后单击提交按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序在该处对这些信息进行处理。用于处理表单数据的常用服务器端技术包括MacromediaColdFusion、MicrosoftActiveServerPages（ASP）和PHP。,图6-60表单的组成对象,2020/5/11,109,一个实例制作一个个人简历调查表，收集个人的资料。该调查表是表单应用的典型实例。,实例效果,2020/5/11,110,创建表单,将插入工具栏切换到“表单”模式，单击创建表单按钮,插入的表单区域用红色虚线表示，后面插入的所有表单元素都要插入到这个虚线中。,2020/5/11,111,文本字段,1.单行文本,在表单中输入“用户名”，在单击工具栏上的文本字段按钮,2.密码,密码输入区用于用户输入密码信息，用户在此区域输入的所有字符都显示为“*”或黑点。,3.多行文本,在单击工具栏上的文本区域按钮,2020/5/11,112,复选框,单击工具栏上的复选框按钮,单选按钮,1.单选按钮,单击工具栏上的单选按钮按钮,2.单选按钮组,单击工具栏上的单选按钮组按钮,2020/5/11,113,下拉菜单,1.列表/菜单,单击工具栏上的列表/菜单按钮,2.跳转菜单,在工具栏上单击跳转菜单按钮,2020/5/11,114,隐藏区域,在工具栏上单击隐藏域按钮,在网页中插入一个隐藏域标志,按钮,在工具栏上单击按钮按钮,第4章：页面设计,2020/5/11,116,网页的风格1,“搜狐”的主页的内容很丰富，色彩鲜艳并有许多大幅广告和浮动广告栏。,2020/5/11,117,网页的风格2,微软中国的主页，内容比较专一，内容非常有条理，栏目突出，没有凌乱的感觉。,2020/5/11,118,网页的风格3,“黑白音乐”是一个个人主页，它看起来更简单，色彩也不够丰富，但感觉非常清新。,2020/5/11,119,本章要点,设置网页属性页面布局使用框架布局层的使用使用CSSCSS属性,2020/5/11,120,网页标题,如果文档工具栏没有显示，使用菜单“查看”“工具”“文档”可打开其显示。,2020/5/11,121,页面设置,1外观2链接3标题4标题/编码5跟踪图像,2020/5/11,122,文件头设置,1.METAMETA设置自定义的一组网页属性的描述。,2.关键字关键字设置网页网站的一组关键字，许多搜索引擎和网站关联性统计是通过关键字搜索网页的。,3.描述设置对网页的一些描述，一般是网页内容的概述，供其它开发者参考。,2020/5/11,123,4.刷新刷新定义网也调入后延迟一段时间的动作,5.基础设置网页的基准地址,6.链接链接用于设置需要链接的CSS等外部文件的地址和类型。,文件头设置,2020/5/11,124,网页布局实例1,2020/5/11,125,网页布局实例2,2020/5/11,126,网页布局实例3,标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。,2020/5/11,127,网页布局实例4,2020/5/11,128,网页布局实例5,2020/5/11,129,网页布局实例6,2020/5/11,130,网页的版面布局,1.确定显示分辨率,2.版面布局的模式,（1）T型结构布局,（2）口型布局,（3）三型布局,（4）对称对比布局,（5）POP布局,2020/5/11,131,画出网页布局草图,2020/5/11,132,表格布局,1个实例使用表格对课本74页的网页进行布局。,2020/5/11,133,操作步骤,（1）插入一个3行1列的表格a。a760420边框为0，填充、间距为0，对齐方式居中。（2）在表格a的第3行插入1条水平线，宽度为70。居中。文字（3）在表格a的第1行中插入1个2行1列的表格b。宽度100。其余0（4）在表格b的第1行插入一个1行2列的表格c。宽度100。,2020/5/11,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。,2020/5/11,135,使用扩展模式布局,在工具栏上单击扩展表格模式按钮，既可切换到“扩展表格模式”。,扩展模式下并不是所见即所得的效果，最好不要在单元格中添加内容，只进行页面设计操作。,2020/5/11,136,使用布局模式布局,用表格布局的页面，往往给人一种过于整齐的排列效果，而使用“布局模式”，则可以是网页中的元素快速、灵活地定位。,在“插入”工具栏单击“布局”按钮，进入布局模式。,2020/5/11,137,使用布局模式布局,绘制布局表格绘制布局单元格,2020/5/11,138,使用框架布局,一个实例：,2020/5/11,139,框架与框架集的概念,单个框架是指在网页上定义的一个区域，而框架集则记录了同一网页上多个框架的布局、链接和属性信息。利用框架可以把浏览器窗口划分为多个区域，每个区域可以添加任意网页元素，也可分别显示不同的网页。框架集与框架之间的关系是包含与被包含的关系，多个框架就组成了框架集，框架集包含了框架1、框架2和框架3共3个框架。,2020/5/11,140,框架与框架集的概念,用框架布局网页时有如下的技巧和规则：创建好框架或框架集后可对其属性进行设置。每个框架就是不同的HTML网页，我们需要分别保存每个框架文件和框架集文件。确保文件中的每个链接都正确。,2020/5/11,141,使用框架布局,框架集网页,1.创建一个新的框架集网页,创建框架网页前先要让框架边框显示。在“文档”工具栏的最右边单击视图选项按钮,在弹出的菜单中选择“可视化助理”“框架边框”，使得框架边框被选中。,2020/5/11,142,创建一个新的框架集网页的方法保存设置框架集编辑框架结构,2020/5/11,143,父框架和子框架,该图的框架就是先分成上下框架，再把下框架分成左右框架。一般把下框架称为左右框架的父框架，则左右框架是下框架的子框架。,右下框架占最大的区域，用来显示主要的网页内容，称为主框架。,2020/5/11,144,设置框架与框架集的属性,设置框架属性设置框架集属性,2020/5/11,145,设置框架属性,“框架名称”文本框“源文件”文本框“滚动”下拉列表框复选框“边框”下拉列表框“边框颜色”下拉列表框“边界宽度”文本框“边界高度”文本框,2020/5/11,146,设置框架集属性,选择需设置属性的框架集。框架集“属性”面板中各设置参数含义和框架“属性”面板中的基本相同，不同的是在“行”或“列”文本框中可设置框架的行或列的宽度，在“单位”下拉列表框中选择单位后即可输入所需数值。,2020/5/11,147,框架链接的目标,1.设置网页元素的链接目标,2.设置网页的缺省显示区域,_blank：打开一个新窗口显示目标网页。_parent：目标网页的内容在父框架窗口中显示。_self：目标网页的内容在当前所在框架窗口中显示。_top：目标网页的内容在最顶层框架窗口中显示。,使用菜单“插入”“HTML”“文件头标签”“基础”，打开“基础”对话框，在目标中可选择此网页中超链接的默认显示窗口。Href中设置默认查找的网络路径。,2020/5/11,148,一个实例,利用框架为“书香盈袖”网页布局页面，并为其添加网页元素。,2020/5/11,149,2020/5/11,150,层的使用,在网页中插入层,1.新建一个层,（1）打开要创建层的网页。,（2）将“插入”工具栏切换到“布局”模式。,（3）单击描绘层按钮,鼠标移动到编辑窗口时变成十字形状，可以在网页中的任意位置拖动绘制一个层的边框。,（4）在层的边框中可以插入各种网页元素，如文字、图片、表格等。,2020/5/11,151,层的基本操作,对层可进行选择、移动、调整大小和对齐等操作，这些操作大多数都可在“层”面板中进行。,2020/5/11,152,层的基本操作,显示“层”面板层的选择层的拖动层的对齐层的大小调整应用举例利用层布局页面,2020/5/11,153,显示“层”面板,选择“窗口/层”命令或按F2键显示“层”面板，“层”面板用于对层进行管理和操作。当前网页中的层都会显示在“层”面板的列表中，嵌套层以树状结构显示。,2020/5/11,154,层的选择,要对层进行操作和设置需先将其选择，单个层和多个层的选择方法不同。,2020/5/11,155,1单个层的选择,选择单个层有如下几种方法：单击所需层的边框。在“层”面板中单击所需层的名称。按住Shift+Ctrl键在所需层中单击。选择层后，在“层”面板中会以反白方式显示该层名称。,2020/5/11,156,2多个层的选择,选择多个层可按住Shift键后依次在层中或层边框上单击，也可按住Shift键后依次在“层”面板中单击层的名称。,2020/5/11,157,层的拖动,选择需移动的层，将光标移到层边框上，按住鼠标左键将其拖动到需要的位置后释放鼠标即可。,2020/5/11,158,层的对齐,在设计网页过程中经常需要将层对齐。对齐层的操作比较简单，选择需对齐的层，选择“修改/对齐”菜单中的相应子命令即可。层的对齐有左对齐、右对齐、对齐上缘、对齐下缘几种方式。,2020/5/11,159,层的大小调整,在网页制作过程中，通常创建的层大小都不符合要求，需对其进行大小的调整。单个层和多个层调整大小的方法不相同。,2020/5/11,160,单个层的大小调整,调整单个层大小只需进行如下任一操作即可：选择层，在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键。将光标移至层的边缘，将其拖动到所需大小后释放鼠标。按住Ctrl键再按键盘上的方向键，可以移动层的右边框和下边框，每次调整1个像素的大小；按住Shift+Ctrl键的同时再按键盘上的方向键可每次调整10个像素的大小。,2020/5/11,161,多个层的大小调整,选择需调整大小的多个层，然后选择“修改/对齐”菜单中的“设成宽度相同”或“设成高度相同”命令，则所有选择的层将设置为最后选择层的宽度或高度，也可在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键，选择的所有层将调整为设定的大小。,2020/5/11,162,设置层的属性,在网页中的层的边框上单击可选中这个层，设置其属性。,拖动边框上的8个控制点可改变层的大小。将鼠标放在层边框上除控制点的其他位置，此时鼠标变成十字箭头形状，拖动鼠标可移动层的位置。,2020/5/11,163,层的叠加和嵌套,1.层的叠加,使用菜单“窗口”“层”打开层面板组。,2.层的嵌套,在一个已有的层中描绘新层时按住Alt键可绘制现有层的嵌套层，如果不按住Alt键绘制的是连个重叠的层。,在层面板中按住Ctrl键将一个层拖动到层列表的另一个层上，可将其变为后者的子层。,2020/5/11,164,层与表格的互相转换,1.将层转换成表格,选中要转换的层，使用菜单“修改”“转换”“层到表格”打开转换层为表格对话框。,2.将表格转换成层,选中要转换为层的表格，使用菜单“修改”“转换”“表格到层”打开转换表格为层对话框。,2020/5/11,165,使用层实现图文混排1,使光标出现在编辑区中，移动鼠标指针到“插入”面板的“常用”选项卡中，单击描绘层按钮。在网页编辑区中拖动鼠标，画出一个区域，该区域即为插入层的大小。,注意，每插入一个新层，在网页顶端就会增加一个层标记，,2020/5/11,166,使用层实现图文混排2,重复上述操作，再次插入两个新层。这样在该单元格中共插入三个层，我们将图片移到在左上方的层中，文字移到右上方和下面的层中。,单击该标记可以选中其所对应的层。单击层的外围框线，选中层。将鼠标指针移动到框线上，拖动鼠标，更改层的大小为图像大小。,调整文字的字号和字体，以及层的位置，实现图文混排。,2020/5/11,167,使用CSS,CSS基础,1.什么是CSS,CSS（CascadingStylesheet）是1996年出现的有关网页制作的技术，中文叫做级联风格页或层叠样式表。,使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色与背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。,2020/5/11,168,CSS的作用,（1）将格式和结构分离,（2）更容易控制页面的布局,（3）可以制作出体积更小下载更快的网页,（4）可以更快更容易地维护及更新大量的网页,（5）良好的浏览器兼容性,2020/5/11,169,编辑首选参数常规使用CSS实例1第一段文字大小24，颜色红色。第2段文字设置为大小12，颜色绿色，加粗。选中第3段文字，大小style1选中第4段文字，大小style2对style1进行重命名，名称为redbig试删除一个样式选中一个样式，将其加上背景。,2020/5/11,170,CSS代码将试图切换到代码状态。认识“CSS样式”面板选择“窗口/CSS样式”命令可在浮动面板组打开“CSS样式”面板,2020/5/11,171,新建样式,1.新建样式,（1）在属性面板样式的样式菜单中选择“管理样式”，在打开的编辑样式表对话框中单击“新建”按钮。,（2）使用菜单“文本”“CSS样式”“新建”。,（3）使用菜单“文本”“CSS样式”“管理样式”，在打开的编辑样式表对话框中单击“新建”按钮。,（4）使用菜单“窗口”“CSS样式”打开“设计”面板组中的“CSS样式”面板，单击下面的新建CSS样式按钮,（5）在编辑窗口中单击右键，在弹出的菜单中选择“CSS样式”下的“管理样式”或“新建”。,2020/5/11,172,重定义标签的外观新建样式选择器类型标签使用类定义样式新建CSS样式选择器类型类使用伪类定义超级链接的样式新建CSS样式选择器类型高级a:link、a:visited、a:hover、a:active,2020/5/11,173,实例2将超级链接文字的样式设置为：超级链接文字无下划线，鼠标移过时出现下划线，访问过的超级链接文字与超级链接文字样式相同。,2020/5/11,174,使用ID定义样式新建CSS样式选择器类型高级（ID）,2020/5/11,175,附加样式表文件样式定义代码的3种存放方式：存放在HTML标签的属性中。如：存放在文件头的标签的存放在一个外部文件中，这个文件称作样式表文件。,2020/5/11,176,保存起来的样式表文件可以应用到任意网页中。执行链接：直接链接到外部样式表文件导入：将外部样式表文件导入到当前网页的头部。,2020/5/11,177,使用内置的CSS样式,DreamweaverMX2004提供了方便的CSS属性操作和应用功能的同时，还提供了大量现成的CSS应用模板，可以在制作网页时直接使用。,2020/5/11,178,CSS网页文件新建页面设计CSS,2020/5/11,179,CSS文件模板文件新建CSS样式表,2020/5/11,180,设置CSS属性,使用样式属性对话框通过管理或新建样式使用面板组执行窗口CSS样式使用窗口标签检查器CSS属性面板CSS属性面板可以设置样式面板中的8类属性。,2020/5/11,181,CSS属性,类型,1.字体（font-family）,2.大小（font-size）,3.粗细（font-weight）,4.样式（font-style）,5.变量,6.行高（line-height）,7.大小写（text-transform）,8.颜色（color）,9.修饰（text-decoration）,2020/5/11,182,背景,1.背景颜色（background-color）,2.背景图像（background-image）,3.重复（background-repeat）,4.附件（background-attachment）,5.背景图片位置（background-position）,2020/5/11,183,区块,1.字母间距（letter-spacing）,2.字词间距（word-spacing）,3.垂直对齐（vertical-align）,4.文本对齐（text-align）,5.文本缩进（text-indent）,6.空格（white-space）,7.显示（display）,2020/5/11,184,方框,1.宽（width）和高（height）,2.漂浮（float）和清除（clear）,3.填充（padding）,4.边界（margin）,2020/5/11,185,边框,1.样式（border-style）,2.宽度（border-width）,3.边框颜色（border-color）,列表,1.类型（list-style-type）,2.项目符号图像（list-style-image）,3.位置（list-style-position）,2020/5/11,186,定位,定位属性包括类型、溢出、Z轴、宽、高、位置、剪辑的等，其作用和前面介绍的层的定义相同。事实上，在对层的属性进行定义时，就是在层代码行中加入了CSS代码。,2020/5/11,187,实例3：采用绝对定位，指定元素blockDiv距离窗口左边180px，顶部50px花生,2020/5/11,188,扩展,1.分页（page-break）2.光标,2020/5/11,189,CSS滤镜,1、Alpha滤镜,2.BlendTrans滤镜,3.Blur滤镜,Alpha滤镜是把一个目标元素与背景混合，可以指定数值来控制混合的程度，通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明