WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）主讲人：主讲人：学生作品展示西安正安环境技术有限公司www.spherical-comp.com域祺实业中国有限公司www.xledlight.tw西安意隆财务咨询有限公司www.xaylcw.com西安他米零食网www.tarmii.com西京学院经济管理一系jg1x.xijing.edu.cn贵州美菱冠萱净化设备有限公司www.meilinggz.com最便捷的售后最优质的服务联系我们西安信而富www.xaxrf.com西安迪沃特www.xadvt.com西安紫凤园青年旅舍www.xazfy.com西安必尔补习学校www.billjiaoyu.com西安我爱我妻家政网www.xawoaiwoqi.comhttp:/www.zcool.com.cn/站酷站酷http:/www.blueidea.com/蓝色理想蓝色理想http:/design.yesky.com/天极网设计在线天极网设计在线http:/www.websbook.com/网页设计手册网页设计手册http:/www.3lian.com/三联教程三联教程推荐参考书推荐参考书v朱印宏.全球最值得模仿的500个网站.2011.北京：北京希望电子出版社v胡崧，于慧.2007.新锐网页配色设计案例分析.北京：中国青年出版社v旭日东升.2011.网页设计与配色经典案例解析（第2版）.北京：电子工业出版社v潘基凯，江泓.2008.大视觉创意宝典网页设计.南京：江苏美术出版社第第1章章网站规划网站规划1.31.41.51.11.2网站和网页的基础知识网站和网页的基础知识网页设计的思考网页设计的思考认识认识Dreamweaver CC 2018Dreamweaver CC 2018其他网页制作工具其他网页制作工具上机练习上机练习v要制作精美的网页，除了要熟练使用要制作精美的网页，除了要熟练使用DreamweaverCC2018外，在动手设计网页之外，在动手设计网页之前，还要了解一些有关的概念和知识。前，还要了解一些有关的概念和知识。v本章主要介绍动手设计网页之前要做的一些准备、本章主要介绍动手设计网页之前要做的一些准备、网页设计流程和认识网页设计流程和认识DreamweaverCC2018。v学习目标v网站和网页的基础知识网站和网页的基础知识v选定网站主题和名称选定网站主题和名称v设计网站设计网站CI形象形象v认识认识DreamweaverCC20181.1网站和网页的基础知识网站和网页的基础知识一个好的网站其实是由多个精美的网页组成的一个整体，网页上又展现了各种图文并茂的信息。在进入学习制作网页之前，我们有必要先了解网站和网页的基础知识。v认识互联网v域名与空间v网页与网站静态网页与动态网页静态网页与动态网页v1.静态网页v静态网页是基于HTML和HTTP技术的，在没有网页制作软件之前，制作网页时需要专门的程序员来逐行编写代码，编写的文档称为HTML文档。现在我们可以利用诸如图形化网页制作软件，方图形化网页制作软件，方便快捷的便快捷的“画画”出想要的网页文件。静态网页扩出想要的网页文件。静态网页扩展名为展名为.html。v静态网页完全由HTML标签构成，可以直接响应浏览器的请求，它的特点包括：v制作速度快、成本低。v模板一旦确定，不易修改，更新开销大，常用于固定版式的网页。v除非网页设计者修改了网页的内容，否则网页的内容不会发生变化。v不能实现与浏览网页的用户之间的交互。v通常由文本、图像、动画、音频和视频等元素组成。v网页的URL是固定的。v本书的主要内容为静态网页的设计。v2.动态网页v动态网页是区别于静态网页而言的。相比与传统的静态网页，动态网页有了明显的交互性、自动更新性，以及因时因人而变的灵活性。动态网页里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务，动态网页以数据库技术为基础，网站维护的工作量较小。v动态网页的特点：v交互性，即网页会根据用户的要求和选择而动态改变和响应，将浏览器作为客户端界面,这将是今后WEB发展的大势所趋。v自动更新，即无须手动地更新HTML文档,便会自动生成新的页面，可以大大节省工作量。v因时因人而变，即当不同的时间，不同的人访问同一网址时会产生不同的页面。v除了早期的CGI外，目前主流的动态网页技术有JSP、ASP、PHP、.NET等网站的类型网站的类型v1. 门户网站v门户网站是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。v在全球范围中，最为著名的门户网站是雅虎等；在我国，著名的门户网站有新浪、网易、搜狐、腾讯、百度、新华网、人民网等。门户网站又可以分为综合性门户网站和地方性门户网站。v2.电子商务网站v电子商务网站就是企业、机构或者个人在互联网上建立的一个站点，是企业、机构或者个人开展电子商务的基础设施和信息平台，是实施电子商务的交互窗口，是从事电子商务的一种手段。我国著名的电子商务网站有淘宝网、京东商城、苏宁易购等v3.娱乐网站v娱乐网站和众多内容型网站一样，以内容为重点，用内容吸引用户。娱乐网站的内容主要为休闲娱乐的内容，我国比较有名的娱乐网站有爱奇艺、搜狐视频、腾讯视频、起点中文网等v4.教育文化网站v教育文化网站主要是教育和文化从业机构或者个人在互联网上建立的一个站点，是交流学习方法、提供教育信息、进行知识管理、传播文化的一些信息平台。我国著名的教育文化网站有各大高等院校网站、各大MOOC网站等v5.个人网站v个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。个人网站是万维网由个人创建的网页包含的内容，而不是个人性质的公司，组织或机构的代表。网页元素网页元素v网页是一个由多种元素组成的页面，主要包括：文本、图像、超链接、声音、动画、视频、表格、表单等。1.2网页设计的思考网页设计的思考v网站设计，包含的内容非常多。大体分两个方面：v一方面是纯网站本身的设计比如文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等；v另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互，制作策划，形象包装，宣传营销等等。v这两方面相辅相成，加之网络技术的飞速发展，要提出一个绝对正确和权威的设计思路是不可能的，所以笔者根据建设一个网站的思路，将几年以来的心得整理如下，希望大家在真正动手之前理清思路，为后续的学习带来帮助。选定网站主题和名称选定网站主题和名称v如何选定主题，也就是如何明确打算设计的网站的题材。v对于主题的选择，给读者的一点建议是：v主题要小而精。定位要小，内容要精。最新的调查结果也显示，“主题站”比“综合站”更受人们喜爱。v主题最好是喜爱或者拿手的内容。所谓“知之者不如好之者,好之者不如乐之者。”兴趣爱好是收集网站素材的动力，只有有兴趣才能制作出较好的网站作品。v主题不要太滥。读者要避免选择到处可见，人人都有的主题；也要避免已经有非常优秀、很知名站点的主题。v网站命名v与现实生活中一样，网站名称是否正气、易记、响亮，对网站的形象和宣传推广影响很大。给读者的建议是：v名正。名正则言顺，网站的命名要弘扬时代主旋律、要合法、和理、和情。不能用反动、低俗、迷信、危害社会安全的名词命名。v简短易记。根据中文网站浏览者的特点，网站名称最好使用中文名称，不建议用英文。网站名称字数建议6个汉字以内，同样为了好记；同时，站点logo也方便排版。v出色。如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，那就很出色了。当然实在做不到出色，名称平实也可以接受。设计网站设计网站CI形象形象vCI(corporateidentity)指通过视觉来统一企业的形象。v一个网站，和实体公司一样，也需要整体的形象包装和设计。CI设计，对网站的宣传推广有事半功倍的效果。在网站主题和名称定下来之后，需要思考的就是网站的CI形象。v标志、色彩、字体，是一个网站树立CI形象的关键v1.设计网站的标志(logo)v首先需要设计制作一个网站的标志(logo)。v标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。v网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以卡通化和艺术化。v网站有专业性的，可以以本专业有代表的物品作为标志。v最常用和最简单的方式是用自己网站的英文名称作标志。v2.网站色彩的搭配v网站给人的第一印象来自视觉冲击，网站的色彩搭配是网站是否成功的重要因素。不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。v一个网站的标准颜色最好不要超过3种，太多则让人眼花缭乱。标准颜色要用于网站的标志、标题、主菜单和主色块。给人以整体统一的感觉。至于其他色彩也可以使用，只是作为点缀和衬托，绝不能喧宾夺主。v一般来说，适合于网页标准色的颜色有：蓝色、黄/橙色、黑/灰/白色三大系列色。v3.设计网站的标准字体v和标准颜色一样，标准字体是指用于标志、标题，主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，我们可以根据需要选择一些特别字体。例如，为了体现专业可以使用粗仿宋体，体现设计精美可以用广告体，体现亲切随意可以用手写体等等。应该根据自己网站所表达的内涵，选择更贴切的字体。目前常见的中文字体有二三十种，常见的英文字体有近百种，网络上还有许多专用艺术字体下载。需要说明的是：使用非默认字体最好采用图片的形式。倘若浏览者的计算机里没有所用的特别字体，那么辛苦设计制作便无效。网页设计的一般流程网页设计的一般流程v规划网站结构。v规划网页布局。v收集网站素材。v编辑网页内容。v测试发布网页。认识认识DreamweaverCC2018vDreamweaverCC2018新功能v1HiDPI分辨率支持v2多显示器支持v3Git支持的增强功能v4全新欢迎界面DreamweaverCC2018工作界面工作界面其他网页制作工具其他网页制作工具vFrontpagevFlashvFireworksvPhotoshopHTML的概念的概念vHTML指的是超文本标记语言（HyperTextMarkupLanguage）是一种用于创建网页的标准标记语言。HTML不是一种编程语言，而是一种标记语言，是一套标记标签(markuptag)。vHTML标记是有括住的指令，主要分为单标记指令和双标记指令。HTML文件的基本结构如下所示：vvv放置文章标题v/这里是网页编码现在是gb2312vvvvv这里就是正文内容vv1.5上机练习上机练习v本章上机练习介绍了在DreamweaverCC2018中定义工作环境并保存定义的工作环境。对于本章中的其他内容，请读者根据相应内容进行练习。v【例1.1】启动DreamweaverCC2018，在“标准”工作区布局的基础上，在文档窗口下方嵌入“属性”面板，并保存自定义的工作区布局为“我的工作区”。WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人：第第2章规划网站结构创建站点章规划网站结构创建站点2.32.42.12.2规划网站结构规划网站结构创建本地站点创建本地站点创建站点文件创建站点文件上机练习上机练习v建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确、层次清晰；网站要做到结构清晰、目录简明、内容贴切。在创建网站之前，首先要设计并规划好整个站点需要有哪些栏目，有哪些页面，然后才能进行具体的网页制作的过程。v本章主要介绍如何规划网站结构，如何创建和管理站点，如何创建不同类型的网页文档。学习目标学习目标v规划网站结构v创建本地站点v创建站点文件夹v网页文档的基本操作v显示和编辑页面头部信息2.1规划网站结构规划网站结构在确定了网站的主题和整体风格之后，结合网站主题确定网站的目录结构、链接结构和整体风格创意设计。v设计目录结构v规划链接结构设计目录结构设计目录结构v1.目录应切合主题v（1）主要目录一定要紧扣主题。v（2）次要目录适当设置。v（3）所有程序一般都存放在特定目录，便于维护管理。（4）注意与浏览者的交互。v2根目录下尽量少存放文件v3在每个主要目录下都要有独立的images目录v4目录命名要科学。v5目录层次要简明。规划链接结构规划链接结构v网站的链接结构是指页面之间相互链接的拓扑结构。规划链接结构的目的在于：用最少的链接，使得网页的浏览最有效率。v树状结构v全网结构v混合策略首页1级页面11级页面21级页面31级页面442级页面12级页面22级页面32级页面42级页面52级页面6首页1级页面11级页面21级页面31级页面442级页面12级页面22级页面32级页面42级页面52级页面6v混合策略首页1级页面11级页面21级页面31级页面442级页面12级页面22级页面32级页面42级页面52级页面62.2创建本地站点创建本地站点v对同一网站中的文件是以“站点”为单位来进行组织和管理的，创建站点后用户可以对网站的结构有一个整体的把握，而创建站点并以站点为基础创建网页也是比较科学、规范的设计方法。v在创建站点之前，一般在本地将整个网站完成，然后再将站点上传到网络中的WEB服务器上给定的空间。2.3创建站点文件创建站点文件v创建好本地站点后，可以根据需要创建各栏目文件夹和文件，对于创建好的站点，也可以进行再次编辑、删除或复制这些站点。v2.3.1创建文件夹和文件创建文件夹和文件v2.3.2管理文件夹和文件管理文件夹和文件v2.3.3创建空白网页文档创建空白网页文档v2.3.4保存和打开网页文档保存和打开网页文档v2.3.5查看和编辑文件头内容v2.3.6HTML元素元素2.4上机练习上机练习WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人：第第3章首页设计与网页布局章首页设计与网页布局3.33.43.13.2首页布局首页布局设计视图选项设计视图选项 使用表格使用表格上机练习上机练习v首页是网站中非常重要的一页，网页内容的布局方式取决于网站的主题定位。在Dreamweaver中，表格是最常用的网页布局工具，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确定位，使网页页面效果显得整齐而有序。本章主要介绍如何使用表格规划首页布局。学习目标学习目标v网页布局v设计视图选项v网页中表格的作用v在网页中插入表格v编辑表格v导入和导出表格3.1首页布局首页布局网站首页的设计是非常重要的，关系着网站成功与否。浏览者往往看到第一页就已经对站点有一个整体的感觉。是否能够吸引浏览者继续单击进入，是否能够留住浏览者，就看首页。v版面布局规划链接结构v“国”字型（同字型）、T型、标题正文型、框架型、封面型、Flash型、变化型v首页布局简要步骤版面布局版面布局v对于版面布局的技巧，提供四个建议，请读者自己推敲：v加强视觉效果v加强文案的可视度和可读性v统一感的视觉v新鲜和个性是布局的最高境界首页布局简要步骤首页布局简要步骤v画草图v新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，读者可以尽可能的发挥你的想象力，将想象画上去。这仍然属于创意阶段，只需要粗陋的线条勾画出创意的轮廓。可以多画几张草图，最后选定一个满意的作为继续创作的脚本。v粗略布局v在草案的基础上，将你确定需要放置的功能模块安排到页面上。例如：网站标志、主菜单、新闻、搜索、友情链接、广告条、邮件列表、计数器、版权信息等。注意，必须遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的模块放在最显眼，最突出的位置，然后再考虑次要模块。v定稿v最后将粗略布局具体化、精细化，觉得满意就可以定稿。设计视图选项设计视图选项v“设计视图选项”功能，用于辅助设计网页文档。该功能包括“可视化助理”“样式呈现”“辅助线”“跟踪图像”“网格设置”“窗口大小”“缩放比率”和“标尺”等子菜单。其中，“标尺”功能可以辅助测量、组织和规划布局。“网格设置”功能可以使绝对定位的网页元素在移动时自动靠齐网格，还可以通过指定网格设置更改网格或控制靠齐行为。v使用使用“标尺标尺”功能功能v在设计页面时需要设置各种页面元素的位置，此时，可以使用“标尺”功能。选择“查看”“设计视图选项”“标尺”“显示”命令，可以在文档中显示标尺，如图3.9所示。重复操作，可以隐藏或显示标尺。v1.设置标尺的原点v在标尺的左上角区域单击，然后拖拽，会出现十字准星，将其拖拽到文档窗口中的适当位置。v2.恢复标尺初始位置v要恢复标尺初始位置，可以选择“查看”“设计视图选项”“标尺”“重设原点”命令，或者在标尺左上角交点处双击鼠标。v使用使用“网格设置网格设置”功能功能v“网格设置”功能的作用是在“设计”视图中对Div进行那个绘制、定位或大小调整时做可视化向导，可以对齐页面中的元素。v选择“查看”“设计视图选项”“网格设置”“显示网格”命令，可以在网页文档中显示网格。v如果要设置网格的相关属性，可以选择“查看”“设计视图选项”“网格设置”“网格设置”命令。v使用使用“跟踪图像跟踪图像”功能功能v可以采取临摹字帖的方法进行布局。可以将喜欢的某个网站进行截屏，并存为图片形式，然后利用“跟踪图像”功能，将其载入，进行临摹，照着布局。v【例3.1】新建页面，临摹给定图片的布局，并将其载入为跟踪图像。3.3使用表格使用表格v网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表达设计者的思想。v网页中表格的用途v表格是网页中最常用的排版方式之一插入表格插入表格v选择“插入”Table命令(或按下【Ctrl+Alt+T】组合键)，可以打开Table对话框，通过在该对话框中设置表格参数，可以在网页中插入表格。v【例3.2】在例3.1的基础上插入用于布局的表格，并设置相关属性。v接例3.1得到的效果，观察“跟踪图像”，进行分析，最上一行为网站标志，下面可能有若干行展示不同目录。v设置标尺原点为“跟踪图像”有内容展示的最左端，观察最右端的标尺读数为“1000”，表示实际展示内容的尺寸为1000像素，左右两边有相同的留白。v通过上述两步骤，明确了插入表格的相关参数，选择“插入”Table命令，设置相应参数如下：“行数”为“5”、“列”为“1”、“表格宽度”为“1000”像素、“边框粗细”为“0”。v选中该表格，或者在标签选择器中选择table标签，在下方“属性”面板可以看到刚插入表格的属性。设置Align（对齐）属性为“居中对齐”。可以发现，表格宽度正好匹配“跟踪图像”。编辑表格编辑表格v表格的编辑功能包括选择表格、调整大小、更改列宽和行高、添加和删除行列、拆分与合并单元格、设置表格属性、设置单元格属性、设置行列属性等。v选择表格是对表格进行编辑操作的前提。可以一次性选择整个表、行或列，也可以选择连续的单元格。HTML元素元素v设置表格属性v选中一个表格后，可以在属性面板中编辑表格的属性。v1）表格名称。v2）行、列和宽。v“行”“列”文本框显示所选表格中行和列的数量。“宽”文本框显示所选表格的宽度，以像素为单位或表示为占浏览器窗口宽度的百分比。可以通过修改这些文本框中的数值，从而改变对应的属性。v3）CellPad(单元格边距)、CellSpace(单元格间距)vAlign（对齐）、Border（边框）v4）Class。Class（类）用于对该表格设置一个CSS类。v5）“清除列宽”“清除行高”“将表格宽度转换成像素”“将表格宽度转换成百分比”按钮。设置单元格、行或列属性设置单元格、行或列属性v选中一个表格元素后，可以使用“属性”面板编辑该元素的相关属性。v1）水平，用于指定单元格、行或列内容的水平对齐方式。v2）垂直，用于指定单元格、行或列内容的垂直对齐方式。v3）宽和高，所选单元格的宽度和高度，以像素为单位或按整个表格宽度或高度的百分比指定。若要指定百分比，请在值后面使用百分比符号(%)。v4）背景，用于指定单元格、列或行的背景颜色。v5）合并单元格，将所选的单元格、行或列合并为一个单元格。v6）拆分单元格，将一个单元格分成两个或更多个单元格。v7）不换行，勾选此项属性可以防止换行，从而使给定单元格中的所有文本都在一行上。v8）标题，勾选此项属性可以将所选的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。调整表格、列和行的大小调整表格、列和行的大小v1）调整表格大小。v2）调整列和行的大小。v3）更改列宽度并保持整个表的宽度不变。v4）更改某个列的宽度并保持其他列的大小不变。v5）清除表格中所有设置的宽度和高度。v【例3.3】在例3.2的基础上，对用于布局的表格进行编辑，达到大约1个满屏大小的大块布局的效果。v观察例3.2所插入的表格，发现宽度基本与跟踪图像吻合，但是行的高度上需要进行进一步编辑。v鼠标指向第1行的下边沿，进行拖拽，到合适的位置释放鼠标。v依次修改第2、3行的行高，因为跟踪图像可能只截了一个屏幕的高度，因此，下方的图不能完全展示，可以参照第2行的行高，设置下方各行的高度，如图3.29所示，插入点设置在第2行是，“属性”面板中“高”的值可以做为后续各行行高的参考。v网页的高度，会随着布局表格各行的高度的扩展自动更新插入及删除行或列插入及删除行或列v要添加和删除行和列，请使用“编辑”“表格”下的各个菜单命令。v1）插入行或列。v2）删除行或列。v拆分或合并单元格v使用属性面板或选择“编辑”“表格”“拆分单元格”或“合并单元格”命令可以拆分或合并单元格。v选择连续行中形状为矩形的单元格。可以在一个矩形的单元格中合并单元格，如果所选部分不是矩形，不能合并单元格。v复制、粘贴和删除单元格v选定某表格元素后，执行“编辑”“剪切”、“拷贝”或“粘贴”可以剪切、复制或粘贴该表格元素，并保留单元格的格式设置。v嵌套表格v嵌套表格是在另一个表格的单元格中的表格。可以像对任何其他表格一样对嵌套表格进行格式设置；但是，其宽度受它所在单元格的宽度的限制。表格的其他操作表格的其他操作v对表格进行排序v可以选择“编辑”“表格”“排序表格”命令对表格进行排序。可以根据单个列的内容对表格中的行进行排序，还可以根据两个列的内容执行更加复杂的表格排序，但是不能对包含合并单元格的表格进行排序。v导入表格式数据v可以将在另一个应用程序（例如MicrosoftExcel）中创建并以分隔文本的格式（其中各项以制表符、逗号、冒号或分号隔开）保存的表格式数据导入到网页文档中并设置为表格格式。v导出表格v选择表格后，可以选择“文件”“导出”“表格”命令，用于导出表格HTML表格表格v表格由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格v标签标签描述描述v定义表格定义表格定义表格的表头定义表格的表头定义表格的行定义表格的行定义表格单元定义表格单元v定义表格标题定义表格标题定义表格列的组定义表格列的组定义用于表格列的属性定义用于表格列的属性v定义表格的页眉定义表格的页眉定义表格的主体定义表格的主体定义表格的页脚定义表格的页脚3.4上机练习上机练习v请读者参照例3.1-例3.4，选取江西农业大学官方网站为临摹对象，将该网站截图设置为跟踪图像，并进行网页的布局。WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人：第第4章章4.34.44.14.2 文本的使用文本的使用编辑文本编辑文本图像的使用图像的使用编辑图像编辑图像4.54.6HTMLHTML中的文本与图像中的文本与图像上机练习上机练习v文本和图像时网页最基本的元素，文本是传递和展示信息的主要手段，图像不仅可以美化网页，还可以展现生动的视觉效果。v本章主要介绍DreamweaverCC2018如何在网页中插入文本和图像，并对文本和图像进行编辑操作，制作基本网页，实现图文并茂。学习目标学习目标v在网页中插入文本v编辑文本v在网页中插入图像v编辑图像4.1文本的使用文本的使用文本既是网页中不可缺少的内容，也是网页中最基本的对象。由于文本的存储空间非常小，所以在一些大型网站中，其占有不可代替的主导地位。在一般网页中，文本一般以普通文字、段落或各种项目符号等形式显示。v向文档添加文本v直接输入文本：默认输入文本的排列方式是由左到右。v复制文本：可以将其他文档中的文本内容复制粘贴到网页文档中。v插入特殊字符v单击“插入”面板，选择“HTML”，往下拖动右侧滚动条，在“字符”菜单中选择字符名称v还有很多其他特殊字符可供使用；可以选择“插入”“HTML”“字符”“其他字符”命令。版面布局版面布局v不换行空格vHTML只允许字符之间有一个空格；若要在文档中添加其他空格，必须插入不换行空格。v设置允许添加多个连续的空格首选项v为了能方便的输入多个连续的空格，还可以设置允许添加多个连续空格选择“编辑”“首选项”命令，在“常规”类别中勾选“允许多个连续的空格”v插入日期v直接插入日期v如果要在网页文档中插入日期，可以选择“插入”面板中的“HTML”“日期”命令v插入动态变化的日期是通过插入代码来实现的。v【例4.1】新建一个网页文档，输入代码插入即时日期和时间。v新建网页文档，插入一个2行1列的表格。在第一行输入相应文字。v选择“查看”“代码”命令切换到“代码”视图，将光标移至标签之间，输入如下代码。vvdocument.write()v/输出显示时间日期的容器vsetInterval(function()vwith(newDate)time.innerText=(getFullYear()+年+(getMonth()+1)+月+getDate()+日星期+日一二三四五六.charAt(getDay()+getHours()+:+getMinutes()+:+getSeconds(),1000)v/设置id为time的对象内的文本为当前日期时间v/每1000毫秒(即1秒)执行一次本段代码vv单击“状态栏”右侧“实时预览”按钮，在快捷菜单中选择任意浏览器，按弹出的“Dreamweaver”对话框提示保存网页文档后，在浏览器显示动态时间v插入水平线v水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。选择“插入”“HTML”“水平线”命令，可以插入水平线。v“名称”文本框：可用于为水平线指定ID。v“宽”、“高”文本框：以像素为单位或以页面大小百分比的形式指定水平线的宽度和高度。v“对齐”下拉列表框：指定水平线的对齐方式，包括默认、左对齐、居中对齐或右对齐。仅当水平线的宽度小于浏览器窗口的宽度时，该设置才适用。v“阴影”:指定绘制水平线时是否带阴影。取消选择此选项将使用纯色绘制水平线。vClass（类）:可用于附加样式表，或者应用已附加的样式表中的类。v水平线对应的HTML代码是，在括号中设置“color”属性4.2编辑文本编辑文本v编辑文本操作，可以将网页中的文本进行各种设置，使得枯燥的文本更生动。文本格式设置与使用标准的字处理程序类似。可以为文本块设置默认格式设置样式（段落、标题1、标题2等）、更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式（如粗体、斜体、代码（等宽字体）和下划线）。v设置文本格式设置文本格式v文本的格式主要包括缩进方式、粗/斜体和缩进方式等。v应用标准格式v可以将光标定义在段落中，使用“属性”面板的“格式”下拉列表框，可以应用标准文本格式。应用标准格式的最小单位是段落，所以无法再同一段落中应用不同的标准格式。v设置粗或斜体v文本的加粗或倾斜也在“属性”面板中设置，单击“粗体”或“斜体”按钮，可以将所选文字进行加粗或者倾斜，此项设置最小单位是单个文本，所以在同一段落可以设置不同的加粗或者倾斜效果。读者切换到“代码”视图可以发现，此项设置是将或应用于所选文本。v3设置文本缩进v设置文本缩进包括增加缩进和减少缩进。将光标移至文档中需要设置格式的段落，在“属性”面板中设置单击“文本缩进”按钮，增加该段落的缩进；单击“文本凸出”按钮，减少段落的缩进。读者切换到“代码”视图可以发现，此项设置是将或应用于所选文本。设置列表设置列表v在网页中，用户可以使用很多种方法来排列项目，可以将多种项目没有顺序地排列，也可以为每个项目赋予编号后再进行排列。一般情况下，没有顺序的排列方式称为无序列表，也叫项目列表；而赋予编号排列的方式被称为有序列表，也叫编号列表;还可以由用户自定义列表，不使用项目符号点或数字这样的前导字符，并且通常用于词汇表或说明。v列表可以嵌套。嵌套列表是包含其他列表的列表。v创建新列表v将插入点放置在要添加列表之处，然后执行以下某项操作可以实现：v在HTML属性检查器中，单击“编号列表”或“列表项目”。v选择“插入”面板“HTML”，然后选择所需的列表类型：“项目列表”、“编号列表”或“列表项”命令。v输入完某一列表项目文本后，回车换行后，在下一行创建该列表下一项文本，可以继续输入，若要结束该列表，按两次回车即可。v使用现有文本创建列表v可以将一系列段落创建为列表。选中若干段落之后，再选择“插入”面板“HTML”“项目列表”、“编号列表”或“列表项目”即可。v创建嵌套列表v选择要嵌套的列表项目，再选择“编辑”“文本”“缩进”命令或“属性”面板上的“缩进”按钮。将缩进文本并创建一个单独的列表，该列表具有原始列表的HTML属性。v设置整个列表的列表属性v对列表进行属性设置，需要该列表至少有一个项目的文字。将插入点放到列表项目的文本中，然后单击“属性”面板右下方的“列表项目”按钮；或右键单击后，在弹出的快捷菜单中选择“列表”“属性”；或者在菜单栏选择“编辑”“列表”“属性”命令。4.3图像的使用图像的使用v图像是多媒体元素的代表之一，正因为网页中有了图像，才使得整个互联网丰富多彩。制作精美的图像可以大大增强网页的视觉效果。在网页中插入图像通常是用于展示具有视觉冲击力的内容、添加交互式设计元素或者做为图形界面元素v网页中的图像格式网页中的图像格式vJPEG（JPG）大约1670万种颜色vGIF最多显示256种颜色vPNG支持透明背景插入图像插入图像v直接插入图像v直接插入图像时最常用的插入图像方法。将光标移至所需插入图像的位置。选择“插入”面板“HTML”“image”命令，打开“选择图像源文件”对话框，选中图像文件后，单击“确定”按钮即可。v设置网页背景图像v通过设置页面属性，可以将某个图像文件设置为网页的背景图像。v【例4.2】新建一个网页文档，设置页面背景图片，并在网页中插入一个透明的PNG图像文件。v新建网页文档，在“属性”面板单击“页面属性”按钮。v默认打开的是“外观”分类选项，单击右侧“背景图像”文本框右侧的“浏览”按钮，弹出“选择图像源文件”对话框。v选择要设置为网页背景图像的文件，单击“确定”按钮，返回“页面属性”对话框。v如果要设置背景图片重复的效果，在“页面属性”对话框的“重复”下拉列表框选择不同的选项。v默认“重复”选项是“repeat”v选择“插入”“image”命令，在网页中插入一个PNGv应用鼠标经过图像v鼠标经过图像时由原始图像和鼠标经过图像两个图像文件组成，功能是当鼠标经过原始图像上方时，原始图像变成另一张图像，因此组成鼠标经过图像的两张图像一般应该是相同大小。如果两张图像大小不同，系统会自动按照原始图像的大小来调整鼠标经过图像。鼠标经过图像多用于达到进入某栏目的按钮。v选择“插入”“HTML”“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框。4.4编辑图像编辑图像vDreamweaverCC2018提供了基本的图像编辑功能，无需使用外部图像编辑应用程序即可修改图像。在Dreamweaver中对图像进行重新取样并裁切、优化和锐化图像，还可以调整图像的亮度和对比度。v设置图像属性设置图像属性v选中图像后，在“属性”面板允许设置图像的属性v内部编辑器vDreamweaverCC2018集成了Fireworks的基本图像编辑技术，可以不用借助外部图形图像编辑软件如Photoshop等，直接对图形进行基础的图像编辑。v选中网页文档中的图像，在“属性”面板中部，可以看到“编辑”系列按钮v【例4.3】对网页文件中的图像执行裁切操作。v打开包含要裁切的图像的页面，选择图像，单击“属性”面板中的“裁剪”按钮，或者选择“编辑”“图像”“裁剪”命令。弹出永久性改变警告，单击“确定”按钮。v所选图像周围会出现裁剪控制柄。v调整裁切控制柄直到边界框包含的图像区域符合所需大小。v在边界框内部双击或按Enter裁切选定内容。所选位图的定界框外的所有像素都将被删除，但图像中的其他对象会被保留。v“重新取样”按钮：添加或减少已调整大小的JPEG和GIF图像文件的像素，以与原始图像的外观尽可能地匹配。对图像进行重新取样会减小该图像的文件大小并提高下载性能。v调整图像大小时，可以对图像进行重新取样，以适应其新尺寸。对位图对象进行重新取样时，会在图像中添加或删除像素，以使其变大或变小。对图像进行重新取样以取得更高的分辨率一般不会导致品质下降。但重新取样以取得较低的分辨率总会导致数据丢失，并且通常会使品质下降。v“亮度和对比度”按钮：可以修改图像中像素的对比度或亮度。亮度和对比度会影响图像的高亮、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/对比度”。v“锐化”按钮：可以通过增加图像中边缘的对比度调整图像的焦点。扫描图像或拍摄数码照片时，大多数图像捕获软件的默认操作是柔化图像中各对象的边缘。这样扫描可以防止特别精细的细节从组成数码图像的像素中丢失。不过，要显示数字图像文件中的细节，往往需要锐化图像。使用“锐化”选项会增加边缘对比度，使图像更加清晰。HTML中的文本与图像中的文本与图像vHTML中的标题vHTML中的标题（Heading）是通过-标签进行定义的。定义最大的标题。定义最小的标题。在进行网页设计时，不要仅仅是为了生成粗体或大号的文本而使用标题，请注意将HTML标题标签只用于标题。因为搜索引擎使用标题为网页的结构和内容编制索引，而且用户可以通过标题来快速浏览网页，所以用标题来呈现文档结构很重要。v注意应该将h1用作主标题（最重要的），其后是h2（次重要的），再其次是h3，以此类推。vHTML中的注释v可以将注释插入HTML代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。v注释写法如下:合理地使用注释可以对未来的代码编辑工作产生帮助。vHTML中的段落vHTML可以将文档分割为若干段落。段落是通过标签定义的。浏览器会自动地在段落的前后添加空行。但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。如果您希望在不产生一个新段落的情况下进行换行（新行），请使用标签。vHTML格式化标签vHTML使用标签(bold)与(italic)对输出的文本进行格式,如：粗体或斜体。这些HTML标签被称为格式化标签vHTML中的图像v在HTML中，图像由标签定义。是空标签，它只包含属性，并且没有闭合标签。要在页面上显示图像，需要使用源属性（src）。src指source。源属性的值是图像的URL地址。4.6上机练习上机练习v本章的上机练习主要是在上一章节完成网页布局的基础上，插入文本和图像，制作一个基本网页，并应用鼠标经过图像制作相关目录的进入按钮。对于其他内容，读者可以根据相应内容和例题进行练习。v【例4.4】在上一章节例3.4所完成布局的网页文件index的基础上，制作网站主页。WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人：第第5章章精美内容网页的制作精美内容网页的制作5.15.2网页复用网页复用自制导航条自制导航条插入插入FLASHFLASH动画动画插入插入HTML5 VideoHTML5 Video和和HTML5 AudioHTML5 Audio插入插件插入插件背景音乐背景音乐5.35.45.55.65.75.8滚动条滚动条上机练习上机练习v主页制作完之后，快速的制作内容网页，学会网页复用，提高制作内容网页的效率。除此之外，网页内容还可以加入Flash动画、音乐、JavaApplet等动态元素和网页特效，可以使网页更具动感效果、让网页更加精美。v本章主要介绍DreamweaverCC2018如何插入多媒体元素来设计精美内容网页；另外还要求读者掌握重复使用网页部分内容，从而提高内容网页的制作效率。学习目标学习目标v网页复用自制导航条v在网页插入Flash动画插入其他媒体文件v插入声音文件应用网页特效5.1网页复用网页复用一般来说网站的主页和内容网页，或者内容网页和目录的主网页之间总有一些地方是几乎不会变化的。那么那些几乎不会变化的部分就可以重复使用，提高制作内容网页的效率。v【例5.1】在已有主页的基础上，利用复用思维，创建内容网页。v进入站点，打开已有主页index.html文件。通过观察发现，网页最上方和最下方的内容在其他内容网页需要保留。v将不需要的内容删除，选择“文件”“另存为”命令。为其取名“RGB01”，然后单击“保存”按钮。v此时，布局表格的最外层还在。适当调整表格各行的高度，进行内容网页布局。第二行用于放置整个网站的目录结构，也就是后续小节的自制导航条；第三行用于放置明确本页面所在网站的位置；第四行为页面的主体内容区域。v分别在网页位置和主体内容区域插入相应表格、文本、图像后，就可以快速得到一个内容网页的初稿。5.2自制导航条自制导航条vDreamweaverCC2018取消了导航条功能，但是在网站设计的工作中，发现网站中的所有网页中都应该有一个像图书目录一样部分，用于全面了解网站目录结构，也方便快速跳转到所需的页面。因此，本书单列此小节，以保证网站使用的方便快捷。v文本导航条文本导航条v导航条可以使用文本制作的一个目录，再加上后续超链接章节的内容就可以方便的实现跳转功能。v【例5.2】为例5.1制作的RGB01.html文件制作文本导航条。v打开RGB01.html网页文件，在预留做导航条的空白单元格插入表格。表格的行列根据网站目录结构设置，此处插入2行6列的表格。v选择“插入”“Table”命令，弹出“Talbe”对话框，设置设置“行数”为“2”，“列”为“6”，“表格宽度”为“100%”，“边框粗细”为“0”，“单元格边距”为“0”，“单元格间距”为“0”。v调整外层单元格的高度，与所插入表格匹配。v分别在各个单元格输入网站规划时设定的目录名称，并设置为“粗体”。在学习后续章节超链接知识之后，就可以真正实现导航功能。v图像导航条图像导航条v可以利用文本创建导航条，在事先准备好图像文件的前提下也可以用图像文件或鼠标经过图像创建导航条。v【例5.3】为某栏目创建该栏目的图像导航条。v参照上一小节的方法，删除主体内容，将网页位置修改为“第七章红色系”，上方表格中的文本导航暂时不变。v将空白区域的一个大单元格拆分成两列，左侧1列用于竖排若干导航图像，右侧1列则为主体内容区域。v此目录下，预计有8个页面，因此，左侧单元格内，嵌套一个9行1列的表格，第1行用于留白，其他8行用于安排竖向导航条。v展开右侧的“文件”面板，在“本地文件”栏目下找到“red”文件夹，双击展开，再进入“images”文件夹，可以看到事先准备好的导航图像正在其中。可以将“本地文件”中的图像文件图标直接拖放到对应的单元格中，完成插入图像文件的操作。v选中图像文件所在的整列表格，修改“水平”属性为“居中对齐”。到此为止，本栏目的图像导航条的制作完毕5.2插入插入Flash动画动画vFlash动画是网页上最流行的动画格式。Flash动画也是最常用的多媒体插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时使用了优化的算法将多媒体数据进行压缩，是文件变得很小，因此非常适合在网上传播。v认识Flash文件vFLA文件(.fla)是Flash的源文件，使用Flash创作工具创建。只能在Flash中打开。需要时，可以在Flash中打开FLA文件，然后将它发布为SWF或SWT文件以在浏览器中使用。vSWF文件(.swf)SWF文件是FLA(.fla)文件的编译版本，已进行优化，可以在Web上查看。SWF文件可以在浏览器中播放并且可以在Dreamweaver中进行预览，但不能在Flash中编辑此文件。vFLV文件(.flv)FLV文件是一种视频文件，它包含经过编码的音频和视频数据，用于通过FlashPlayer进行传送。例如，如果具有QuickTime或WindowsMedia视频文件，可以使用编码器将该视频文件转换为FLV文件。v插入SWF文件v在“文档”窗口的“设计”视图中，将插入点放置在要插入内容的位置，选择“插入”“HTML”“FlashSWF”命令。在弹出的“选择SWF”对话框中，选择一个SWF文件(.swf)，并单击“确定”按钮。将在“文档”窗口中显示一个SWF文件占位符。v按F12预览该网页，在弹出确认保存网页文件的警告框之后，还会弹出“复制相关文件”对话框，DreamweaverCC2018提示正在将两个相关文件（expressInstall.swf和swfobject_modified.js）保存到站点中的Scripts文件夹。在将SWF文件上传到Web服务器时，不要忘记上传这些文件，否则浏览器无法正确显示SWF文件。v设置SWF文件属性v在DreamweaverCC2018中可以使用“属性”面板设置SWF文件的属性。这些属性也适用于Shockwave影片。选择一个SWF文件或Shockwave影片，然后在“属性”面板中设置选项。vFlashVideo视频vFlashVIdeo视频并不是Flash动画，它的出现是为了解决Flash以前对连续视频只能使用JPEG图像进行帧内压缩，并且压缩效率低，文件很大，不适合视频存储的弊端。FlashVIdeo视频采用帧间压缩的方法，可以有效地缩小文件大小，并保证视频的质量。在Dreamweaver中选择“插入”“HTML”“FlashVideo”命令，弹出“插入FLV”对话框。v【例5.4】新建一个网页文件，在合适的位置插入FLV视频文件。v新建一个空白网页文件。v选择“插入”“HTML”“FlashVideo”命令，在弹出的“插入FLV”对话框中选择文件。v在“文档”窗口可以看到FLV文件标记。5.3插入插入HTML5Video和和HTML5Audiov允许在网页中插入HTML5视频Video和HTML5Audio，以使用户能够在浏览器中播放视频和音频文件，而无需使用外部增效工具或播放器。v插入插入HTML5VideovHTML5视频元素提供一种将电影或视频嵌入网页中的标准方式。v选择“插入”“HTML”“HTML5Video”。HTML5视频元素将会插入指定位置。v虽然可以在网页中嵌入任何视频，但“实时”视图并非始终呈现所有视频，往往只显示一个HTML5Video图标。DreamweaverCC2018使用AppleQuickTime增效工具来支持音频和视频标签。在Windows中，如果已安装AppleQuickTime插件，网页会呈现媒体播放器和媒体内容；否则不会呈现媒体内容。v插入HTML5AudiovHTML5音频元素提供一种将音频内容嵌入网页中的标准方式。选择“插入”“HTML”“HTML5Audio”。音频文件将会插入到指定位置，此时，“文档”窗口出现音频文件图标。5.4插入插件插入插件v现在浏览器支持的多媒体文件越来越多，文件也越来越小，但是表现的效果却一点也不逊色以前。允许在网页中通过插入插件的方式嵌入音频和视频。v网页中的音频格式vMP3格式最大的特点就是能以较小的比特率，较大的压缩比达到近科完美的CD音质。vWAV格式具有较好的声音品质，许多浏览器都支持此格式，并且不要求安装插件。vAIF格式AIF格式的音频文件也具有较好的声音品质，容量通常较大。vMIDI格式这种格式一般用于器乐类的音频文件。v.ra、.ram、.rpm或RealAudiov具有非常高的压缩比，文件大小比MP3小。歌曲文件可以在合理的时间范围内下载。必须下载并安装RealPlayer软件才能播放。插入音频插入音频v要在网页中加入声音，选择“插入”“HTML”“插件”命令，弹出“选择文件”对话框，选中要插入的音频文件，单击“确定”按钮即可。在“文档”窗口的“设计”视图，只能看到插件图标，并不会显示播放声音的状态。只有在实时预览时才能看到播放器。v插件的默认“宽”和“高”的值均为“32”。因此，在实时预览只能看到播放器的部分，那么需要对插件修改大小，以便网页中能完整显示播放器。修改插件大小可以直接用鼠标拖放插件的定位标尺，也可以在“属性”面板设置“宽”和“高”属性的值为合适大小。v1AVI格式v2MOV格式（QuickTime）v3MPEG/MPG/DAT格式v4RM(RealMedia)格式v5ASF(AdvancedStreamingFormat)格式网页中的视频格式网页中的视频格式插入视频插入视频v选择“插入”“HTML”“插件”命令，弹出“选择文件”对话框，选中要插入的视频文件，单击“确定”按钮即可。在“文档”窗口的“设计”视图，只能看到默认32*32像素大小的插件图标，因此必须拖放插件大小，以便完整播放视频的需要。5.5背景音乐背景音乐v插件隐身v设置背景音乐v在标签后输入“”,在下拉列表中选择“bgsound”标签5.6滚动条滚动条v插入滚动条v这里是滚动条v【例5.5】新建一个网页文件，在文档中插入一张图片，并使图片滚动起来。v新建一个网页文件，在文档中插入一张图片。v选择“查看”“代码”命令，切换到“代码”视图。v找到其中的标签，在标签前面和后面分别加入和，如图5.35所示。5.7上机练习上机练习v本章的上机练习，要求读者在上一章上机练习及本章例题练习的基础上，利用网页复用并插入多媒体内容，快速的完成一个栏目各个页面的制作。v【例5.6】打开例5.3完成的Red网页文档，在内容区域为其添加Flash动画，在动画下方合适位置添加滚动字幕，并设置为从左往右滚动，滚动速度为“2”。WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人：第第6章让网站活起来章让网站活起来6.16.2超链接的基础知识超链接的基础知识创建超链接创建超链接管理超链接管理超链接上机练习上机练习6.36.4v当网页制作完成后，一个个网页时单独孤立的，要使得他们能够成为一个整体，构成网站，并且让网站活起来，就需要在页面中创建链接。链接是一个网站的灵魂，网页设计者不仅要知道如何去创建页面之间的链接，更应了解链接地址的真正意义。学习目标学习目标v了解超链接的类型与路径v创建文本超链接v创建图像超链接v管理超链接6.1超链接的基础知识超链接的基础知识v超链接是网页中重要的组成部分，其本质上属于一个网页的一部分，它是一种允许网页访问者与其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件、甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一个字、一个词、一段文本或者一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。v当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签中使用了href属性来描述链接的地址。超链接的概念超链接的概念v超链接与URL及网页文件的存放路径是紧密相关的。URL(UniformResoureLocator，统一资源定位器)可以简单地称为网址，顾名思义，就是Internet文件在网上的地址，定义超链接其实就是指定一个URL地址来访问它指向的Internet资源。URL是使用数字和字母按一定顺序排列来确定的Internet地址，由访问方法、服务器名、端口号，以及文档位置组成。格式为scheme:/host.domain:port/path/filename。vscheme-定义因特网服务的类型。vhost-定义域主机（http的默认主机是www）vdomain-定义因特网域名，比如runoob.comv:port-定义主机上的端口号（http的默认端口号是80）vpath-定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。vfilename-定义文档/资源的名称Schemev访问协议访问协议说明说明http超文本传输协超文本传输协议议以以http:/开头的普通网页。开头的普通网页。不加密。不加密。https安全超文本传安全超文本传输协议输协议安全网页，加密所有信息交换。安全网页，加密所有信息交换。ftpv文件传输协议文件传输协议用于将文件下载或上传至网站。用于将文件下载或上传至网站。file计算机上的文件。计算机上的文件。超链接的类型超链接的类型v页间链接：利用该链接可以跳转到其他文档或文件，如图形、电影、PDF或声音文件。v页内链接：也称为锚点链接，利用它可以跳转到本站点指定网页文档内的特定位置。vE-mail链接：使用该链接，可以启动外部电子邮件程序，允许用户书写电子邮件，并发送到指定地址。v空链接及脚本链接：它允许用户附加行为至对象或创建一个执行JavaScript代码的链接。超链接的路径超链接的路径v从作为链接起点的文档到作为链接目标的文档之间的文件路径，对于创建链接至关重要。v路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。一般来说，链接路径可以分为绝对路径与相对路径两类。v绝对路径：以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。通常我们直接使用/代表从根目录开始的目录路径。v相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。v绝对路径与相对路径的不同处，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。v在制作网站的时候不能使用绝对路径，因为链接应该指向真正的域名而不是测试的。制作网站的时候，如果所有内容页面都使用绝对路径，那么要修改一个文件，其他页面上的路径无法变化，这样是比较麻烦的。v相对路径的优点在于：容易移动内容，可以整个目录移动；本地计算机测试方法比较灵活、方便。所以在网站制作时我们可选择使用相对路径。v为了避免在制作网页时出现路径错误，可以使用站点管理功能来管理站点。这样在站点中移动文件的时候，与这些文件关联的连接路径都会自动更改。6.2创建超链接创建超链接v创建超链接的常用方法v使用“属性”面板“链接”文本框直接输入文件路径v“目标”下拉列表框选项及其含义如下：v_blank将链接的文档载入一个新的、未命名的浏览器窗口。v_parent将链接的文档加载到该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档加载到整个浏览器窗口。v_self将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。v_top将链接的文档载入整个浏览器窗口，从而删除所有框架。vnew将链接文档载入一个新的窗口。v使用“属性”面板“指向文件”图标v单击“链接”文本框右侧的“指向文件”图标，拖动鼠标，会出现一条带箭头的细线，指示要拖动的位置，指向链接的文件后，释放鼠标，就完成了到该文件链接创建，指向所链接的文档的路径显示在“链接”文本框中。v使用“属性”面板“浏览文件”图标v如果“文件”面板未能展开，或者不能在“本地文件”看到要链接的目标文件。此时，可以单击“链接”文本框右侧的“浏览文件”图标，在弹出的“选择文件”对话框中浏览并选择一个文件v使用菜单命令创建超链接v选中要创建超链接的对象，选择“插入”“Hyperlink”命令，弹出“Hyperlink”对话框，完成各项设置，单击“确定”按钮即可。v“文本”文本框：此时显示为所选中的文本对象，也可以在此修改文本。v“链接”下拉菜单：从中选择要链接到的文件的名称。或者单击文件夹图标以浏览到要链接到的文件。v“目标”下拉菜单：选择链接打开的目标窗口或框架。v“标题”文本框：输入链接的标题。v“访问键”文本框：输入可用来在浏览器中选择该链接的等效键盘键（一个字母）。v“Tab键索引”文本框：输入Tab顺序的编号创建各类超链接创建各类超链接v创建文本超链接v文本超链接是指从文本出发链接到其他文件的超链接。v创建图像超链接v选中要创建超链接的图像，在“属性”面板的“超链接”文本框输入链接的URL地址，或者使用“指向文件”按钮和“浏览文件”按钮都可以。v创建锚点链接v偶尔在页面较长，不宜分页的情况下，还是需要锚点链接来实现页面内部不同位置的跳转。因此，读者任然可以通过“代码”视图命名锚点，并链接锚点。v创建E-mail链接vE-mail链接是一种特殊的链接，它并不是直接链接到电子邮件的地址，而是激活某个电子邮件收发软件，将指定的电子邮件地址自动填写到收件人处，以便用户直接撰写电子邮件后发送。v可以选中文本后在“属性”面板的“链接”文本框中输入“mailto:电子邮件地址”创建创建E-mail链接；也可以选择“插入”“HTML”“电子邮件链接”命令。v创建空链接v空链接是未指派的链接。空链接用于向页面上的对象或文本附加行为。一但对象或文本被激活，当光标经过该链接时，可以附加行为来交换图片或显示层。v要创建空链接，选中文本或图像后，在“属性”面板的“链接”文本框中输入“#”或者“JavaScript:;”即可。v在使用#号时要注意，当单击空链接时，某些浏览器可能调到页面的顶端。单击JavaScript空链接则不会产生任何效果，因此最好采取JavaScript空链接。v创建脚本链接v脚本链接用于执行JavaScript代码或调用JavaScript函数。创建脚本链接后，能够在不离开当前网页面的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单和完成其他处理任务。v要创建脚本链接和创建JavaScript空链接类似，只不过“；”用具体的代码或者函数替换。v创建站外链接v要创建站外链接，选中文本或图像后，在“属性”面板的“链接”文本框中输入站点外部的URL即可。创建图像地图创建图像地图v图像地图其实也是一种超链接，但是和图像链接不一样。图像链接是一个图像文件链接一个目标文件，而图像地图则是一个图像文件的不同部位链接不同的目标文件。这就需要用到篇幅稍微大点的图像文件。v创建图像地图，可以在图像上创建不规则区域的俩环节或某个部分区域的链接。图像地图是将图像分为若干个区域，这些区域也称为热点，单击不同的热点可以跳转到不同的链接，这样的链接就称为图像地图，也成为热点链接。v要创建图像地图，只需要选中图像文件后，在“属性”面板中单击“热点”按钮就可以快速便捷的实现。创建音频和视频链接创建音频和视频链接v网页文档中的文本或者图像文件还可以链接音频和视频文件。网页文档链接音乐或视频文件时，单击链接之后浏览器会自动运行内嵌的播放软件，从而播放相关内容，不同的浏览器打开的播放软件不同。v在软件和源代码下载网站中，下载链接是必不可少的，该链接可以帮助访问者下载相关的资料。创建下载链接的方法很简单。和音频、视频链接一样，目标文件指向要下载的某个软件或者压缩文件即可。v可以做为目标文件的文件类型有很多，例如word文档、excel文档、powerpoint文档、zip文档、rar文档等，只要浏览器不能直接打开的文件类型，就可以以文件下载的方式创建链接。v在不同浏览器中，单击创建了文件下载链接的文本或者图像，会采用不同的方式提示是否打开或保存该文件。创建文件下载链接创建文件下载链接6.3管理超链接管理超链接v通过管理网页中的超链接，可以对网页进行相应的管理。管理超链接操作主要包括自动更新超链接、修改超链接和测试超链接。v自动更新超链接自动更新超链接v移动或重命名本地站点内的文档时，可更新来自和指向该文档的链接。在将整个站点（或其中完全独立的一个部分）存储在本地磁盘上时，此项功能最适用。直到将本地文件放在远程服务器上或将其存回远程服务器后才更改远程文件夹中的文件。v为了加快更新过程，可创建缓存文件，从中存储有关本地文件夹中所有链接的信息。在添加、更改或删除本地站点上的链接时，该缓存文件以不可见的方式进行更新。v选择“编辑”“首选项”命令。在“首选项”对话框中，默认左侧的“分类”列表中是“常规”分类，如果不是请单击“常规”分类。在右侧“常规”分类的“文档选项”部分，从“移动文件时更新链接”下拉菜单中选择一个选项为站点创建缓存文件为站点创建缓存文件v选择“站点”“管理站点”，在弹出的“管理站点”对话框中选中某个站点，然后单击左下方“编辑”按钮。然后，在弹出的“站点设置对象”对话框中，展开“高级设置”并选择“本地信息”类别，在右侧选择“启用缓存”。v启动DreamweaverCC2018后首次更改或删除指向本地文件夹中文件的链接时，提示加载缓存。如果单击“是”，则加载缓存，并更新所有指向刚刚更改的文件的链接。如果单击“否”，则将更改记入缓存，不加载缓存或更新链接。修改超链接修改超链接v除移动或重命名文件时会自动更新链接之外，还可手动修改所有链接，使其指向其他某个文件或URL。v在“文件”面板的“本地文件”选中一个文件后，选择“站点”“站点选项”“改变整个站点链接”。在弹出的“改变整个站点链接”对话框中完成下列选项。如果更改的是电子邮件链接、FTP链接、空链接或脚本链接，则不需要先选中文件。v“更改所有的链接更改所有的链接”文文本框：单击文件夹图标，浏览到并选择要取消链接的目标文件。如果更改的是电子邮件链接、FTP链接、空链接或脚本链接，则输入要更改的链接的完整文本。v“变成新链接变成新链接”文本框：文本框：单击文件夹图标，浏览到并选择要链接到的新文件。如果更改的是电子邮件链接、FTP链接、空链接或脚本链接，请键入替换链接的完整文本。单击“确定”。测试链接测试链接v在DreamweaverCC2018中无法显示链接对象的，也无法单击链接跳转到其他网页，只可以在浏览器中预览网页时显示链接对象，可以通过测试链接操作来检查所有链接是否成功。单击链接在右键快捷菜单中选择“打开链接页面”命令。即可在新窗口中打开链接的网页文档。此时要注意，测试页面必须保存在本地站点中。6.4上机练习上机练习v本章的上机练习主要是在网页文档中创建各种超链接的方法。v【例6.6】打开例5.6完成的Red网页文档，修改为red01.html文档，并设置文本链接将其链接起来。根据网站规划本目录下还将有red02.html-red07.html等文档未创建，预先在Red网页文档设置文本链接将其他的网页文档链接起来。v【例6.7】打开Red.html文档，为网页左侧的图像导航条中的图像创建超链接。并完成red01.html中的图像和文本链接。6.5使用层使用层层是带有CSS样式的Div或Span代码，用于网页元素的精确定位。由于一个页面中可以拥有多个层，而不同的层之间可以相互重叠，通过设置透明度来决定每个层是否可见或者可见的程度，因而层可用来实现许多特效。6.5.1层的基本操作层的基本操作层就像是包含文字或图像等元素的胶片，按顺序叠放在一起，组合成页面的最终效果。层可以精确地定位页面上的元素，并且在层中可以加入文本、图像、表格、插件等元素，还可以插入嵌套层。在Dreamweaver中运用层，为设计者提供了强大的网页控制能力。层不但可以作为一种网页定位技术，也可以作为一种特效形式出现。6.5.2插入层插入层在网页文档中插入层后，在【代码】视图中会自动插入HTML标签。层的常用标签有和两种，默认是使用标签来插入层1、插入普通层2、插入嵌套层3、绘制层6.5.3层的基本操作层的基本操作在【AP元素】面板中可以管理网页文档中的所有插入的层元素，防止重叠，更改层的可见性，嵌套或堆叠层等。1、选择层2、设置层的属性3、移动层 4、调整层的大小5、删除和复制层 6、在层中插入元素6.5.4层的其他操作层的其他操作插入的层还有一些常用的操作，例如排列层，对齐层，隐藏层等。1、改变层的顺序2、设置层文本3、设置层的可见性 4、对齐层5、将层对齐风格例题7-36.5.5转换表格和层转换表格和层要改变网页中各元素的布局，最方便的方法就时将元素置于层内，然后通过移动层来改变网页的布局。要使用这种方法改变网页布局，首先要将表格转换为层。DreamweaverCS4允许使用层来创建布局，然后将层转换为表格，以使网页能够在浏览器中正确浏览；也可以将网页中的表格转换为层。1、将表格转换为层2、将层转换为表格6.5.6使用层布局网页使用层布局网页复杂的网页可以使用层来布局。例题7-46.6使用使用SPRY布局网页布局网页Spry框架是一个JavaScript库，使用它可以创建更丰富的网页。可以使用HTML、CSS和一些JavaScript将XML数据合并到HTML文档中、创建构建、向各种网页元素添加不同种类的效果等。6.6.1使用使用SPRY菜单栏菜单栏Srpy菜单栏是一组可导航的菜单按钮。当浏览网页时，将光标悬停在某个菜单按钮上时，可以显示相应的子菜单，使用菜单栏可以在有限的空间里显示大量导航信息，在浏览网页时，可以全面的了解站点包含信息，无需深入浏览网站。例题7-56.6.2使用使用SPRY选项卡面板选项卡面板Spry选项卡面板是一组面板，可以将内容存储到紧凑的空间中。访问站点时，可以单击所需访问的面板上的选项卡来显示或隐藏存储在选项卡面板中的内容。单击不同的选项卡时，会打开相应的面板，单只能同时打开一个面板。例题7-66.6.3使用使用SPRY折叠面板折叠面板Spry折叠式构件是一组可以折叠的面板，可以将大量的内容存储到紧凑的空间中。当访问站点时，可以单击该面板上的选项卡来显示或隐藏存储在折叠面板中的内容。当单击不同的选项卡时，相应的折叠面板会展开或收缩，但同时只能有一个面板处于可见状态。例题7-76.6.4使用使用SPRY可折叠面板可折叠面板使用Spry可折叠面板，可以将内容存储到紧凑的空间中，单击相应的选项卡，可以显示或隐藏可折叠面板中的内容。要使用Spry可折叠面板，选择【插入】|【布局对象】|【Spry可折叠面板】命令，即可在网页文档中插入Spry可折叠面板。例题7-8课后作业课后作业（1）实现如图效果WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人：第第7章章制作表单页面制作表单页面7.17.2表单的基础知识表单的基础知识表单标签表单标签表单对象表单对象表单按钮表单按钮7.37.47.5上机练习上机练习表单表单QQ登陆界面登陆界面v表单提供了从网页浏览者那里收集信息的方法，用于调查、订购和搜索等。一般表单由两部分组成，一部分是描述表单元素的HTML源代码，另一部分是客户端脚本或者是服务器端用来处理用户信息的程序。学习目标v表单的基础知识表单的基础知识v在网页中创建表单在网页中创建表单v设置表单的属性设置表单的属性v在表单中插入对象在表单中插入对象7.1表单的基础知识表单的基础知识v表单在网页中时提供给访问者填写信息的区域，从而可以收集客户端信息，使网页更加具有交互的功能。v表单的概念表单的概念v表单一般被设置在一个HTML文档中，访问者填写相关信息后提交表单，表单内容会自动从客户端的浏览器传送到服务器上，经过服务器上的ASP或CGI等程序处理后，再将访问者所需的信息传送到客户端的浏览器上。几乎所有网站都应用表单，例如登录框、搜索栏、论坛和订单等。v表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。v表单对象：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。v表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。7.2表单标签表单标签v表单用来创建，用于申明表单，定义采集数据的范围，也就是和里面包含的数据将被提交到服务器或者电子邮件里。vHTML语法：.vaction=url用来指定处理提交表单的格式。它可以是一个URL地址或一个电子邮件地址。vmethod=get或post指明提交表单的HTTP方法.可能的值为：post：POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中.get：不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器。这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用。vEnctype属性指明在发送到服务器之前应该如何对表单数据进行编码。这个特性的缺省值是application/x-www-form-urlencoded，表示在发送到服务器之前，所有字符都会进行编码；若值设置为multipart/form-data，则表示不对字符编码，在使用包含文件上传控件的表单时，必须使用该值；若值设置为text/plain，则表示将空格转换为+但不对特殊字符编码。vTARGET=.指定提交的结果文档显示的位置。7.3表单对象表单对象v表单输入类型称为表单对象。可以在网页中插入表单，并插入各种表单对象。要在网页文档中插入表单对象，可以在“插入”“表单”菜单中选择相应的命令。表单对象包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据。v文本框文本框v文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。单击“插入”“表单”“文本”，即可插入文本框对象。相应HTML代码格式如下：文本区域文本区域v文本区域是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。v单击“插入”“表单”“文本区域”，即可插入文本区域对象。相应HTML代码格式如下：Name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；vCols属性定义多行文本框的宽度，单位是单个字符宽度；vRows属性定义多行文本框的高度，单位是单个字符宽度；vWrap属性定义输入内容大于文本域时显示的方式，可选值如下：v默认值是文本自动换行；vOff，用来避免文本换行；vVirtual，允许文本自动换行。vPhysical，让文本换行，当数据被提交处理时换行符也将被一起提交密码域密码域v密码域是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其他符号代替，而输入的文字会被隐藏。单击“插入”“表单”“密码”命令，即可插入密码域对象。相应HTML代码格式如下：v主要属性如下：vtype=password定义密码框；vname属性定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；vsize属性定义密码框的宽度，单位是单个字符宽度；vmaxlength属性定义最多输入的字符数。隐藏域隐藏域v隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。,单击“插入”“表单”“隐藏”命令，即可插入隐藏域对象。相应HTML代码格式如下：v主要属性如下：vtype=hidden定义隐藏域；vname属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；vvalue属性定义隐藏域的值复选框和复选框组复选框和复选框组v复选框和复选框组允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。单击“插入”“表单”“复选框”命令，即可插入复选框对象。相应HTML代码格式如下：v主要属性如下：vtype=checkbox定义复选框；vname属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；vvalue属性定义复选框的值单选按钮和单选按钮组单选按钮和单选按钮组v当需要访问者在单选项中选择唯一的答案时，就需要用到单选按钮了。单击“插入”“表单”“单选按钮”命令，即可插入单选按钮对象。相应HTML代码格式如下：v主要属性如下：vtype=radio定义单选框；vname属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；vvalue属性定义单选框的值，在同一组中，它们的域值必须是不同的。v单击“插入”“表单”“单选按钮组”命令，弹出“单选按钮组”对话框。其HTML代码与复选框相同。文件域文件域v有时，需要用户上传自己的文件，文件上传框看上去和其他文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者单击浏览按钮选择需要上传的文件。单击“插入”“表单”“文件”命令，即可插入文件域对象。相应HTML代码格式如下：。v在使用文件域以前，先确定服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE=multipart/form-data来确保文件被正确编码；另外，表单的传送方式必须设置成POST。v主要属性如下：vtype=file定义文件上传框；vname属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；vsize属性定义文件上传框的宽度，单位是单个字符宽度；vmaxlength属性定义最多输入的字符数。选择框选择框v选择框允许你在一个有限的空间设置多种选项。单击“插入”“表单”“选择”命令，即可插入选择框对象。相应HTML代码格式如下：.v主要属性如下：vsize属性定义下拉选择框的行数；vname属性定义下拉选择框的名称；vmultiple属性表示可以多选，如果不设置本属性，那么只能单选；vvalue属性定义选择项的值；vselected属性表示默认已经选择本选项。7.4表单按钮表单按钮v提交按钮提交按钮v提交按钮用来将输入的信息提交到服务器。在DreamweaverCC2018中,单击“插入”“表单”“提交按钮”命令，即可插入提交按钮对象。相应HTML代码格式如下：v其主要属性如下：vtype=submit定义提交按钮；vname属性定义提交按钮的名称；vvalue属性定义按钮的显示文字；重置按钮重置按钮v重置按钮用来重置表单。单击“插入”“表单”“重置按钮”命令，即可插入重置按钮对象。相应HTML代码格式如下：v其主要属性如下：vtype=reset定义复位按钮；vname属性定义复位按钮的名称；vvalue属性定义按钮的显示文字；一般按钮一般按钮v一般按钮用来控制其他定义了处理脚本的处理工作。单击“插入”“表单”“按钮”命令，即可插入一般按钮对象，。相应HTML代码格式如下：v其主要属性如下：vtype=button定义一般按钮；vname属性定义一般按钮的名称；vvalue属性定义按钮的显示文字；vonClick属性，也可以是其他的事件，通过指定脚本函数来定义按钮的行为。v图像按钮用来控制其他定义了处理脚本的处理工作，与一般按钮一样，只是在网页文档上显示效果为所选图片。单击“插入”“表单”“图像按钮”命令，弹出“选择图像源文件”对话框。相应HTML代码格式如下：v其主要属性如下：vName属性定义一般按钮的名称；vSrc属性定义图像的路径；vFormAction属性，也可以是其他的事件，通过指定脚本函数来定义按钮的行为；vFormMethod属性，指明表单方图像按钮图像按钮7.5上机练习上机练习v本章上机练习主要介绍了在网页文档中插入各类表单对象的方法。v【例7.1】新建网页文档，在文档中插入表单对象，制作一个注册页面。WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人：第第8章使用行为制作网页特效章使用行为制作网页特效8.18.2认识行为认识行为“行为行为”面板面板使用行为应用图像使用行为应用图像使用行为显示文本使用行为显示文本8.38.48.7上机练习上机练习使用行为调节浏览器窗口使用行为调节浏览器窗口使用行为加载多媒体使用行为加载多媒体8.58.6v在网页中使用“行为”可以创建各种特殊的网页效果，例如弹出信息、交换图像、跳转菜单等。行为是一系列使用JavaScript程序预定义的页面特效工具，是JavaScript在DreamweaverCC2018中内建的程序库。学习目标学习目标v网页行为的基础知识网页行为的基础知识v“行为行为”面板面板v使用行为使用行为8.1认识行为认识行为vDreamweaverCC2018网页行为是Abobe公司借助JavaScript开发的一组交互特效代码库。在DreamweaverCC2018中，用户可以通过简单的可视化操作对交互特效代码进行编辑，从而创建出丰富的网页应用。v表行为的概念表行为的概念v行为是DreamweaverCC2018中重要的一个部分，通过行为，可以方便地制作许多网页效果，极大地提高了工作效率。行为由两个部分组成，事件和动作，通过事件的响应而执行对应的动作。v在网页中，事件是浏览器生成的消息，表明该页的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某个链接上是，浏览器为该链接生成一个onMouseOver事件。不同的网页元素定义了不同的事件。在大多数浏览器中，onMouseOver和onClick是与链接关联的事件，而onLoad是与图像和文档的body部分关联的事件。事件由浏览器定义、产生与执行。事件的分类事件的分类v行为事件可以分为鼠标事件、键盘事件、表单事件和页面事件。每个事件都含有不同的触发方式。v1鼠标事件vonClick：单击选定元素（如超链接、图像、按钮等）将触发该事件。vonDblClick：双击选定元素将触发该事件。vonMouseDown：当按下鼠标按钮（不必释放鼠标按钮）时触发该事件。vonMouseMove：当鼠标指针停留在对象边界时触发该事件。vonMouseOut：当鼠标指针离开对象边界时触发该事件。vonMouseOver：当鼠标首次移动指向特定对象时触发该事件。该事件通常用于链接。vonMouseUp：当按下的鼠标按钮别释放时触发该事件。v键盘事件vonKeyPress：当按下并释放任意键时触发该事件。vonKeyDown：当按下任何键时即触发该事件。vonKeyUp：按下键后释放该键时触发该事件。v表单事件vonChange：改变页面中数值时将触发该事件。例如，在菜单中选择了一个项目，或者修改了文本区中的数值，然后再页面任意位置单击均可触发该事件。vonFocus：当指定元素成为焦点时将触发该事件。例如，单击表单中的文本编辑框将触发该事件。vonBlur：当特定元素停止做为用户交互的焦点时触发该事件。例如，在单击文本编辑框后，在该编辑框区域以外单击，则系统将产生该事件。vonSelect：在文本区域选定文本时触发该事件。vonSubmit：确认表单时触发该事件。vonReset：当表单被复位到其默认值时触发该事件。v页面事件vonLoad：当图像或页面完成装载后触发该事件。vonUnload：离开页面时触发该事件。vonError：在页面或图像发生装载错误时，将触发该事件。vonMove：移动窗口或框架时将触发该事件。vonResize：当用户调整浏览器窗口或框架尺寸时触发该事件。vonScroll：当用户上、下滚动时触发该事件。v行为是由预先编写的JavaScript代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、播放声音或停止播放影片。当事件发生后，浏览器就查看是否存在与该事件对应的动作，如果存在，就执行它，这就是整个行为的过程。8.2“行为行为”面板面板v在“行为”面板中可以将DreamweaverCC2018中内置的行为附加到页面元素，并且可以修改以前所附加行为的参数。v选择“窗口”“行为”命令，打开“行为”面板。v在“行为”面板中显示了已经附加到当前所选页面元素的行为显示在行为列表中，并按事件以字母顺序列出。如果针对同一个事件列有多个动作，则会按在列表中出现的顺序执行这些动作。如果行为列表中没有显示任何行为，则表示没有行为附加到当前所选的页面元素。8.3使用行为应用图像使用行为应用图像v图像是网页设计中必不可少的元素。在Dreamweaver中，我们可以通过使用行为，以各种各样的方式在网页中应用图像元素，从而制作出富有动感的网页效果。使用行为应用图像，包括“预先载入图像”行为、“交换图像”行为和“恢复交换图像”行为。v“预先载入图像预先载入图像”行为行为v使用“预先载入图像”行为，可以是浏览器下载那些尚未在网页中显示但是可能显示的图像，并将之存储到本地缓存中，这样可以脱机浏览网页。v“交换图像交换图像”行为行为v“交换图像”行为主要用于动态改变图像对应标记的scr属性值，利用该动作，不仅可以创建普通的翻转图像，还可以创建图像按钮的翻转效果，甚至可以设置在同一刻改变页面上的多幅图像。v“恢复交换图像恢复交换图像”行为行为v与“交换图像”对应，使用“恢复交换图像”动作，可以将所有被替换显示的图像恢复为原始图像。一般来说，在设置替换图像动作是，会自动添加替换图像恢复动作，这样当光标离开对象时自动恢复原始图像。8.4使用行为显示文本使用行为显示文本v“弹出信息弹出信息”行为行为v使用“弹出信息”行为，可以弹出一个信息框，显示相应的消息文本。单击“行为”单击“行为”选项卡面板中的按钮，在弹出的菜单中选择“弹出信息”命令，打开“弹出信息”对话框。在“消息”文本区域中，输入文本后单击“确定”按钮即可。v“设置状态栏文本设置状态栏文本”行为行为v状态栏行为主要可以在浏览器窗口中的状态栏显示文本信息，用于优化网页细节。要对状态栏的文本进行编辑，或是对文本状态进行更多的控制，可以使用“行为”选项卡面板中的“设置状态栏文本”行为v“设置容器的文本设置容器的文本”行为行为v“设置容器的文本”行为将页面上的现有容器（可以包含文本或其他元素的任何元素）的内容和格式替换为指定的内容。该内容可以包括任何有效的HTML源代码。v可以在文本中嵌入任何有效的JavaScript函数调用、属性、全局变量或其他表达式。若要嵌入一个JavaScript表达式，请将其放置在大括号“”中。若要显示大括号，请在它前面加一个反斜杠“”。8.5使用行为调节浏览器窗口使用行为调节浏览器窗口v在网页中最常使用的JavaScript源代码是调节浏览器窗口的源代码，它可以按照设计者的要求打开新窗口或更换新窗口的形状。v“打开浏览器窗口打开浏览器窗口”行为行为v使用“打开浏览器窗口”行为，可以在一个新的浏览器窗口中载入位于制定URL位置上的文档。同时，还可以指定新打开浏览器窗口的属性，例如大小、是否显示菜单条等。单击“行为”选项卡面板上的按钮，在弹出的菜单中选择“打开浏览器窗口”命令，打开“打开浏览器窗口”对话框。v在“打开浏览器窗口”对话框中“要显示的URL”文本框用于输入在新浏览器窗口中载入的URL地址，也可以单击“浏览”按钮，选择链接目标文档。“窗口宽度”和“窗口高度”文本框用于输入新浏览器窗口的宽度和高度，单位是像素。“属性”选项区域用于设置新浏览器窗口中是否显示相应的元素，选中复选框则显示该元素，清除复选框则不显示该元素。这些元素包括导航工具栏、地址工具栏、状态栏、菜单条、需要时使用滚动条、调整大小手柄等。还可以在“窗口名称”文本框中为新打开的浏览器窗口定义名称。v“转到转到URL”行为行为v“转到URL”行为可在当前窗口或指定的框架中打开一个新页。此行为适用于通过一次单击更改两个或多个框架的内容。单击“行为”选项卡面板上的按钮，在弹出的菜单中选择“转到URL”命令，打开“转到URL”对话框，如图8.17所示。“打开在”列表自动列出当前框架集中所有框架的名称以及主窗口，如果没有任何框架，则主窗口是唯一的选项。“URL”文本框在“URL”框中输入该文档的路径和文件名或者单击“浏览”按钮，选择链接目标文档。v“调用调用JavaScript”行为行为v“调用JavaScript”行为可以设置当触发事件时调用相应的JavaScript代码，以实现相应的动作。选中网页中要附加行为的元素，单击“行为”选项卡面板上的按钮，在弹出的菜单中选择“调用JavaScript”命令，打开“调用JavaScript”对话框示。v在JavaScript文本框中可以输入需要执行的JavaScript代码，或函数的名称，单击“确定”按钮即可。8.6使用行为加载多媒体使用行为加载多媒体v可以利用行为控制网页中的多媒体，包括确认多媒体插件程序是否安装、显示隐藏元素、改变属性等。v检查插件检查插件v使用“检查插件”行为，可以检查在访问网页时，浏览器中是否安装有指定插件，通过这种检查，可以分别为安装插件和未安装插件的用户显示不同的页面。v显示显示-隐藏元素隐藏元素v给元素附加“显示-隐藏元素”行为，可以显示、隐藏或恢复一个或多个网页元素的默认可见性。此行为用于在进行交互时显示信息。例如，将光标移到一个图像上时，可以显示一个页面元素，此元素给出有关该图像的信息。v改变属性改变属性v使用“改变属性”行为可更改对象某个属性（例如div的背景颜色或表单的动作）的值。8.7上机练习上机练习v本章上机练习主要介绍DreamweaverCC2018中内置行为的使用方法，结合页面主题，灵活添加行为。有关本章中其他内容，可以参考相应章节进行练习。v【例8.3】新建一个网页文档，添加“打开浏览器窗口”行为，弹出广告窗口。课后作业课后作业（1）设计一个网页，并添加所学的各种行为。WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人：第第9章章使用模板使用模板8.18.2认识行为认识行为“行为行为”面板面板使用行为应用图像使用行为应用图像使用行为显示文本使用行为显示文本8.38.48.7上机练习上机练习使用行为调节浏览器窗口使用行为调节浏览器窗口使用行为加载多媒体使用行为加载多媒体8.58.6v在进行大型网站的制作时，很多页面会用到相同的布局、图片和文本元素。此时，使用DreamweaverCC2018提供的模板和库功能，可以将具有同样版面结构的页面制作成模板，将相同的元素制作成库项目，并集中保存，以便反复使用。学习目的学习目的v了解模板的概念了解模板的概念v掌握模板的创建方法掌握模板的创建方法v掌握模板的编辑方法掌握模板的编辑方法v掌握模板的管理方法掌握模板的管理方法v使用库项目使用库项目9.1了解模板了解模板v模板是一种具有固定格式的WEB页面文件。用户可以按照要求创建有个事的文档模板，以便在使用时自动生成具有相同风格的页面。在编辑网页时，只需输入每个文档中不同的内容即可。v在DreamweaverCC2018模板中，通过标记可编辑区域和锁定区域来设置站点中个页面的风格统一区域，将避免因操作失误导致模板被修改的情况。可编辑区域是指利用模板生成的新文档中可以被编辑的区域。锁定区域是指模板的固定格式区域，即不能被编辑的区域。9.2创建模板创建模板v模板必须保存在站点之中，因此在创建模板前应先建立站点。系统也会提示建立站点。可以将新建文档或现有文档以另存为的方式创建为模板，也可以在插入模板创建模板命令来创建新的模板。v将现有文档保存为模板将现有文档保存为模板v打开要作为模板的网页文档，执行文件存为模板菜单命令，打开另存模板对话框。在另存为文本框中输入要创建的模板的名称，单击保存按钮，模板文件被保存在指定站点的“Templates”文件夹中，文件扩展名为.dwt。创建空白模板创建空白模板v在已经创建站点的情况下，可以使用“新建文档”对话框来创建模板。默认情况下，模板保存在站点的Templates文件夹中。v执行文件新建命令，在弹出的新建文档对话框中，文档类型列表中选择HTML模板。v单击创建按钮后，会打开一个空白的未命名的文件。v此时，选择文件保存命令，会弹出警告框。v单击确定按钮，弹出另存模板对话框，在另存为文本框中输入模板的名称。v还可以在资源面板创建空白模板。9.3编辑模板编辑模板v创建可编辑区域创建可编辑区域v创建可编辑区域是给新创建的空白模板指定可编辑区域。在模板文件中，选择插入模板可编辑区域菜单命令。v在弹出的新建可编辑区域对话框中的名称文本框中输入名称后单击确定按钮。v模板中添加了一个绿色标签的可编辑区域。采用同样的方法，在同一模板文件的多个位置可创建可编辑区域。v取消对可编辑区域的标记取消对可编辑区域的标记v如果指定可编辑区域有误，或者要更改可编辑区域，可以在模板文件窗口取消对该可编辑区域的标记。v选取模板文的那个种需要取消的可编辑区域标记，选择模板删除模板标记菜单命令即可。v更改可编辑区域的名称更改可编辑区域的名称v插入可编辑区域后，可以更改其名称。单击可编辑区域左上角的选项卡从而选中该区域，在属性面板涨红输入一个新的名称。9.4用模用模板创建网页页v可以使用现有模板选择、预览和创建新文档，可在新建文档对话框从任何站点中选择模板，也可以应用资源面板从现有模板创建新的文档，还可以给当前文档应用模板。v创建基于现有模板的文档创建基于现有模板的文档v可以创建基于模板的新文档。选择文件新建菜单命令，打开新建文档对话框。单击网站模板选项卡。在站点列表中选择包含要使用模板的站点，然后从右侧列表中选择一个模板后，单击创建按钮即可。v在在资源资源面板中从模板创建新文档面板中从模板创建新文档v在资源面板中单击左侧的模板按钮，查看当前站点中的模板列表。右击要应用的模板，在弹出的快捷菜单中选择从模板新建命令，新文档将在文档窗口中打开。v为当前文档应用模板为当前文档应用模板v打开要应用模板的文档，单击资源面板左侧的模板按钮，打开模板列表。在模板列表中选中要应用的模板，然后单击应用按钮，也可以直接从模板面板将需要的模板拖到文件窗口中。9.5管理模板管理模板v创建模板，并利用模板创建文档后，还可以重命名、删除及更新模板。v重命名、删除模板重命名、删除模板v在资源面板打开模板列表，选取模板后，在右键快捷菜单中，选择重命名、删除命令即可完成相应操作。更新模板更新模板v创建模板文档后，文档与模板之间就建立起链接关系。这种应用了模板的文档常称为附着模板文档。修改模板后，系统自动更新附着模板的文档。v1打开文档所附模板v在站点中双击附着模板的文档，将其在当前窗口中打开。选择右击快捷菜单中的模板打开附加模板命令，在文档窗口中打开相应的模板，对其进行编辑、修改操作。v2更新模板v打开被应用在某网页的模板文件，完成编辑之后，选择文件保存命令，打开更新模板文件对话框。v单击更新或不更新按钮，保存模板。如果选择更新按钮，则弹出更新页面对话框。v更新当前页更新当前页v打开要更新的网页文档，执行模板更新当前页命令，打开不一致的区域名称对话框。在可编辑区域列表中选择当前文档需要更新的可编辑区的名称。在将内容移到新区域下拉列表框中选择要将文档中的可编辑区域移到模板中可编辑区域的什么位置。列表中显示了模板中的所有可编辑区域名称。单击确定按钮，更新当前页。9.5.4将将文档脱离模板文档脱离模板v如果不想再文档中附有模板，或不希望文档与模板有联系，可以使文档与模板分开。，选择工具模板从模板中分离命令进行分离。分离后，该文档中的任意区域都可以编辑。9.6使用库项目使用库项目v库用来存放文档中的页面元素，如图像、文本、Flash动画等。这些页面元素通常被广泛适用于整个站点，并且能被重复使用或经常更新，因此他们被称为库项目。v库是一种特殊的文件，它包括可添加到网页文档中的一组单个资源或资源副本。库中的这些资源成为库项目。库项目可以是图像、表格或SWF文件等元素。当编辑某个库项目时，可以自动更新应用该库项目的所有网页文档。v库项目存储在每个站点的本地根文件夹下的Library文件夹中。可以从网页文档中选中任意元素来创建库项目。对于链接，库只存储对该项的引用。原始文件必须保留在制定的位置，这样才能使库项目正确工作。v创建库项目创建库项目v在DreamweaverCC2018中，可以将网页文档中的任何元素创建为库项目，这些元素包括文本、图像、表格、表单、插件等。v要将元素保存为库项目，选中要保存为库项目的元素，选择工具库增加对象到库命令，即可将所选元素添加到库中。在资源面板，单击库按钮，可以显示添加到库中的对象。编辑库项目编辑库项目v可以方便的编辑库项目。在资源面板中选择创建的库项目后，可以直接拖动到网页文档中。v选中网页文档中插入的库项目。v在库项目的属性面板中主要参数选项具体作用如下。v打开按钮：单击该按钮，打开一个新文档窗口，可以对库项目进行各种编辑操作。v从源文件中分离按钮：用于断开所选库项目与其原文件之间的链接，使库项目成为文档中的普通对象。当分离一个库项目后，该对象不再随缘文件的修改而自动更新。v重新创建按钮：用于选定当前的内容并改写原始库项目，使用该功能可以在丢失或意外删除原始库项目时重新创建库项目。9.7上机练习上机练习v本章上机练习主要介绍了如何创建模板，以及在网站建设过程中如何使用模板来提高网页设计效率。v例9.1将例5.6完成的red.html网页文档修改后保存为模板，并采用该模板创建新的网页。WebWeb前端设计与开发技术前端设计与开发技术前端设计与开发技术前端设计与开发技术（HTML+CSS+JavaScriptHTML+CSS+JavaScript）江西农业大学计算机与信息工程学院江西农业大学计算机与信息工程学院主讲人：主讲人：第第10章章CSS基础基础10.310.410.510.110.2CSSCSS概述概述CSSCSS概述概述在在HTMLHTML中使用中使用CSSCSS的方法的方法CSSCSS取值与单位取值与单位CSSCSS字体字体第第10章章CSS基础基础10.810.910.1010.610.7CSSCSS文本文本CSSCSS背景背景CSSCSS框模型框模型CSSCSS超链接和设置光标属性超链接和设置光标属性CSS CSS 列表列表10.11CSS CSS 定位定位本章学习目标本章学习目标v了解了解CSSCSS的基本语法规则；的基本语法规则；v了解了解CSSCSS的常见取值与单位；的常见取值与单位；v熟悉熟悉CSSCSS样式表的层叠优先级；样式表的层叠优先级；v掌握掌握CSSCSS样式表的四种使用方式；样式表的四种使用方式；v掌握掌握CSSCSS常用选择器的使用；常用选择器的使用；v掌握掌握CSSCSS常用样式的使用；常用样式的使用；v掌握掌握CSSCSS的四种定位方法。的四种定位方法。10.1CSS概述概述vCSSCSS（Cascading Style SheetCascading Style Sheet，层叠样式表或级联，层叠样式表或级联样式表，简称样式表）是一种用来表现样式表，简称样式表）是一种用来表现HTMLHTML文件样文件样式的计算机语言，是网页文件的重要组成部分。式的计算机语言，是网页文件的重要组成部分。v网页的内容由网页的内容由HTMLHTML语言决定，利用语言决定，利用CSSCSS修饰修饰HTMLHTML各各个标记的风格，对网页中的元素进行精确的格式化个标记的风格，对网页中的元素进行精确的格式化控制。控制。10.1CSS概述概述vCSSCSS样式表的功能大致可以归纳为以下几点。样式表的功能大致可以归纳为以下几点。v（1 1）控制页面中文字的字体、颜色、大小、间距、）控制页面中文字的字体、颜色、大小、间距、风格及位置。风格及位置。v（2 2）设置文本块的行高、缩进，及具有三维效果）设置文本块的行高、缩进，及具有三维效果的边框。的边框。v（3 3）可以方便地定位网页中的任意元素，设置不）可以方便地定位网页中的任意元素，设置不同的背景颜色和背景图片。同的背景颜色和背景图片。v（4 4）精确控制网页中各元素的位置。）精确控制网页中各元素的位置。v（5 5）与）与DIVDIV元素结合布局网页。元素结合布局网页。10.2CSS的组成的组成v10.2.1 10.2.1 基本语法规则基本语法规则v1.1.构造样式规则：构造样式规则：v选择符选择符 属性属性1:1:属性值属性值; ; 属性属性2:2:属性值属性值; ; v（1 1）选择符也称选择器，是）选择符也称选择器，是CSSCSS的核心，可以是需的核心，可以是需要改变样式的要改变样式的HTMLHTML标记。将标记。将HTMLHTML标记作为选择符定标记作为选择符定义后，则在义后，则在HTMLHTML页面中，该标记下的内容都会按照页面中，该标记下的内容都会按照CSSCSS定义的规则显示在浏览器中。定义的规则显示在浏览器中。 v（2 2）属性和值的组合称为声明，表示选择符中要）属性和值的组合称为声明，表示选择符中要改变的规则。改变的规则。10.2CSS的组成的组成v2.2.注释：注释：v以以“/*/*”开头，以开头，以“*/*/”结尾的，支持单行和多行结尾的，支持单行和多行注释。注释。vppv color:purple; /* color:purple; /*字体颜色设置字体颜色设置*/*/v height:30px; /* height:30px; /*段落高度设置段落高度设置*/*/v v注意：注释不能嵌套。注意：注释不能嵌套。10.2CSS的组成的组成v3.3.继承继承v继承是继承是CSSCSS的一个主要特征，许多属性不但影响选的一个主要特征，许多属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。择符所定义的元素，而且会被这些元素的后代继承。vv vv继承性不起作用：边框（继承性不起作用：边框（BorderBorder）、边距）、边距（MarginMargin）、填充（）、填充（PaddingPadding）和背景）和背景（BackgroundBackground）及表格（）及表格（TableTable）等。）等。10.2CSS的组成的组成v10.2.2 10.2.2 选择符的分类选择符的分类v1.1.基础选择符基础选择符 v（1 1）通配符选择符（）通配符选择符（* *）。）。v（2 2）标记选择符。）标记选择符。 v（3 3）类选择符。）类选择符。 v如：如：.p1color: purple; text-align:center; .p1color: purple; text-align:center; v（4 4）idid选择符。选择符。 v如：如：#div1background-color:#ccc000; #div1background-color:#ccc000; 10.2CSS的组成的组成v2.2.伪类选择符伪类选择符 v伪类选择符也是选择符的一种，伪类是以伪类选择符也是选择符的一种，伪类是以“: :”来来表示的，但是用伪类定义的表示的，但是用伪类定义的CSSCSS样式并不是作用在样式并不是作用在HTMLHTML标记上，而是作用在标记的某种状态上。标记上，而是作用在标记的某种状态上。v伪类选择符与类选择符的区别是：类选择符可以自伪类选择符与类选择符的区别是：类选择符可以自由命名，而伪类选择符是由命名，而伪类选择符是CSSCSS中已经定义好的选择中已经定义好的选择符，不能随便命名和定义。其语法格式如下：符，不能随便命名和定义。其语法格式如下： v: :伪类选择符伪类选择符 属性属性1:1:值值; ; 属性属性2:2:值值; ; 10.2CSS的组成的组成v3.3.层次选择符层次选择符 v层次选择符是一些基础选择符按照一定的关系进行层次选择符是一些基础选择符按照一定的关系进行组合的选择符组合。组合的选择符组合。v（1 1）包含选择符。）包含选择符。vh2 strongcolor:red;h2 strongcolor:red;v（2 2）子选择符。）子选择符。v h2strongcolor:red;h2strongcolor:red;10.2CSS的组成的组成v4 4选择符组选择符组vh1,h2,h3,p,licolor:#666666; h1,h2,h3,p,licolor:#666666; v5 5属性选择符属性选择符 vEattr Eattr vEattrEattr是最简单的一种，用来选择具有是最简单的一种，用来选择具有attrattr属性属性的的E E元素，而不论这个属性值是什么。其中元素，而不论这个属性值是什么。其中E E可以省可以省略，表示选择定义了略，表示选择定义了attrattr属性的任意类型元素。属性的任意类型元素。10.3在在HTML中使用中使用CSS的方法的方法v在在HTMLHTML文档中使用文档中使用CSSCSS样式表有样式表有4 4种方法：种方法：v（1 1）行内样式）行内样式v（2 2）内部样式）内部样式v（3 3）链接样式）链接样式v（4 4）导入样式）导入样式10.3在在HTML中使用中使用CSS的方法的方法v（1 1）行内样式）行内样式v v Nv例如，为某个段落标记例如，为某个段落标记设置样式：设置样式：v行内行内样式样式10.3在在HTML中使用中使用CSS的方法的方法v（2 2）内部样式）内部样式v v选择符选择符 v属性名称属性名称1:1:属性值属性值1;1;v属性名称属性名称2:2:属性值属性值2;2;v.v属性名称属性名称N:N:属性值属性值N; N; v v 10.3在在HTML中使用中使用CSS的方法的方法v（3 3）链接样式）链接样式vlink type=text/css rel=stylesheet vrelrel：指定当前文档和链接文件之间的关系，这里：指定当前文档和链接文件之间的关系，这里是一个样式链接；是一个样式链接；typetype：指定链接的文件的：指定链接的文件的MIMEMIME类类型；型；hrefhref：指定链接的文件的位置，这里是到外部：指定链接的文件的位置，这里是到外部样式表（样式表（.css.css）文件的路径，一般使用相对路径。）文件的路径，一般使用相对路径。10.3在在HTML中使用中使用CSS的方法的方法v（4 4）导入样式）导入样式vvimport url(import url(外部样式表的文件名称外部样式表的文件名称););vv（1 1）importimport语句后的语句后的“；”号，一定要加上！号，一定要加上！v（2 2）外部样式表的文件名称是的是要嵌入的样式）外部样式表的文件名称是的是要嵌入的样式表文件名称，后缀为表文件名称，后缀为.css.css；v（3 3）importimport应该放在应该放在stylestyle元素的任何其他样式元素的任何其他样式规则前面。规则前面。10.3在在HTML中使用中使用CSS的方法的方法v各种样式表的优先级各种样式表的优先级v行内样式行内样式 内部样式内部样式 外部样式外部样式 浏览器的默浏览器的默认设置认设置10.4CSS取值与单位取值与单位v10.4.1 10.4.1 数字数字v浮点数值、整数值和百分比浮点数值、整数值和百分比v10.4.2 10.4.2 长度长度v相对长度单位和绝对长度单位相对长度单位和绝对长度单位v10.4.3 10.4.3 角度角度v10.4.4 10.4.4 时间时间10.4CSS取值与单位取值与单位v10.4.5 10.4.5 文本文本v表示字符串表示字符串v表示图像、文件或浏览器支持的其他任意资表示图像、文件或浏览器支持的其他任意资源的地址源的地址v表示用户自定义的标识名称表示用户自定义的标识名称v10.4.6 10.4.6 颜色颜色vRGB RGB 颜色、十六进制颜色、颜色名颜色、十六进制颜色、颜色名10.5CSS字体字体v10.5.1 10.5.1 字体系列字体系列font-familyfont-familyv语法：语法：font-family:font-family:字体一，字体二，字体三字体一，字体二，字体三v10.5.2 10.5.2 字体风格字体风格font-stylefont-stylev语法：语法：font-stylefont-style：normal | italic | obliquenormal | italic | obliquev语法说明：语法说明：normalnormal为默认值，一般以浏览器默认的为默认值，一般以浏览器默认的字体来显示，字体来显示，italicitalic为斜体效果，为斜体效果，obliqueoblique为歪斜为歪斜体效果。体效果。10.5CSS字体字体v10.5.3 10.5.3 字体变化字体变化font-variantfont-variantv语法：语法：font-variant:normal | small-capsfont-variant:normal | small-capsv语法说明：语法说明：normalnormal表示默认值，表示默认值，small-capssmall-caps表示英表示英文字体显示为小型的大写字母。如果当前页面的指文字体显示为小型的大写字母。如果当前页面的指定字体不支持定字体不支持small-caps small-caps 这种形式，则显示为正这种形式，则显示为正常大小字号的大写字母。常大小字号的大写字母。10.5CSS字体字体v10.5.4 10.5.4 字体粗细字体粗细font-weightfont-weightv语法：语法：font-weightfont-weight：normal | blod | bolder | normal | blod | bolder | lighter | 100-900lighter | 100-900v语法说明：语法说明：normalnormal表示默认字体，表示默认字体，boldbold表示粗体，表示粗体，bolderbolder表示粗体再加粗，表示粗体再加粗，lighterlighter表示比默认字体表示比默认字体还细，还细，100-900100-900共分为九个层次（共分为九个层次（100100、200200、900900），数字越小字体越细、数字越大字体越粗。），数字越小字体越细、数字越大字体越粗。其中其中400400等同于等同于normalnormal，700 700 等同于等同于boldbold。10.5CSS字体字体v10.5.5 10.5.5 字体大小字体大小font-sizefont-sizev语法：语法：font-sizefont-size：绝对大小：绝对大小 | | 相对大小相对大小v（1 1）pxpx：含义为像素，：含义为像素，1px 1px 指的是屏幕上显示的指的是屏幕上显示的一个小点，它是绝对单位。一个小点，它是绝对单位。v（2 2）emem：含义为当前元素的默认字体尺寸，是相：含义为当前元素的默认字体尺寸，是相对单位。浏览器默认字体大小是对单位。浏览器默认字体大小是16px16px，因此在用户，因此在用户未作更改的情况下，未作更改的情况下，1em=16px1em=16px。v（3 3）% %：含义为相对于父元素的比例，例如，：含义为相对于父元素的比例，例如，20%20%指的就是父元素宽度的指的就是父元素宽度的20%20%，也是一个相对单位。，也是一个相对单位。10.5CSS字体字体v10.5.6 10.5.6 字体简写字体简写fontfontv声明顺序如下：声明顺序如下：font-style font-variant font-style font-variant font-weight font-size font-familyfont-weight font-size font-familyv属性值之间用空格隔开，如果其中某个属性没有规属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。定可以省略不写。v例如：例如：pfont: italic bold 20pxpfont: italic bold 20px； 10.6CSS文本文本v10.6.1 10.6.1 文本对齐文本对齐text-aligntext-alignv语法：语法：text-aligntext-align：left | right | center | left | right | center | justifyjustifyv语法说明：语法说明：leftleft为默认值，表示文本内容左对齐，为默认值，表示文本内容左对齐，rightright表示文本内容右对齐，表示文本内容右对齐，centercenter表示文本内容表示文本内容居中对齐，居中对齐，justifyjustify表示文本内容两端对齐。表示文本内容两端对齐。10.6CSS文本文本v10.6.2 10.6.2 文本装饰文本装饰text-decorationtext-decorationv语法：语法：text-decorationtext-decoration：underline | line-underline | line-through | overline | nonethrough | overline | nonev语法说明：语法说明：underlineunderline表示为文本添加下划线，表示为文本添加下划线，line-throughline-through表示为文本添加删除线，表示为文本添加删除线，overlineoverline表表示为文本添加上划线，示为文本添加上划线，nonenone表示默认值。表示默认值。10.6CSS文本文本v10.6.3 10.6.3 文本缩进文本缩进text-indenttext-indentv语法：语法：text-indenttext-indent：长度单位：长度单位 | | 百分比单位百分比单位v语法说明：长度单位可以用相对长度单位，也可以语法说明：长度单位可以用相对长度单位，也可以用绝对长度单位。百分比单位表示相对于元素的宽用绝对长度单位。百分比单位表示相对于元素的宽度（度（widthwidth）来设置缩进。）来设置缩进。10.6CSS文本文本v10.6.4 10.6.4 文本颜色文本颜色colorcolorv语法：语法：color: color: 颜色名称颜色名称 | RGB | | RGB | 十六进制数十六进制数v如：如：pcolor:red;pcolor:red;，h1color:purple;h1color:purple;v10.6.5 10.6.5 字符间距字符间距letter-spacingletter-spacingv语法：语法：letter-spacingletter-spacing：normal | normal | 长度单位长度单位v语法说明：语法说明：vnormalnormal表示默认值，此处的长度单位可使用负数表示默认值，此处的长度单位可使用负数10.7CSS背景背景v10.7.1 10.7.1 背景颜色背景颜色background-colorbackground-colorv语法：语法：background-colorbackground-color：关键字：关键字 | RGB| RGB值值 | | transparenttransparentv语法说明：语法说明：background-color background-color 属性的默认值是属性的默认值是transparenttransparent（透明的），因此如果没有特别规定（透明的），因此如果没有特别规定HTMLHTML元素的背景颜色，那么该元素就是透明的，以元素的背景颜色，那么该元素就是透明的，以便使其覆盖的元素为可见。便使其覆盖的元素为可见。10.7CSS背景背景v10.7.2 10.7.2 背景图像背景图像background-imagebackground-imagev语法：语法：background-image:url | nonebackground-image:url | nonev语法说明：语法说明：urlurl表示要插入背景图片的路径，路径表示要插入背景图片的路径，路径可以是绝对路径也可以是相对路径，可以是绝对路径也可以是相对路径，nonenone表示不加表示不加载图片。载图片。10.7CSS背景背景v10.7.3 10.7.3 背景图像平铺方式背景图像平铺方式background-repeatbackground-repeatv语法：语法：background-repeatbackground-repeat：repeat | repeat-x | repeat | repeat-x | repeat-y | no-repeatrepeat-y | no-repeatv语法说明：语法说明：repeatrepeat表示背景图片在水平和垂直方向表示背景图片在水平和垂直方向平铺，是默认值；平铺，是默认值；repeat-xrepeat-x表示背景图片在水平方表示背景图片在水平方向平铺；向平铺；repeat-yrepeat-y表示背景图片在垂直方向平铺；表示背景图片在垂直方向平铺；no-repeatno-repeat表示背景图片不平铺。表示背景图片不平铺。10.7CSS背景背景v10.7.4 10.7.4 固定固定/ /滚动背景图像滚动背景图像background-background-attachmentattachmentv语法：语法：background-attachmentbackground-attachment：scroll | fixedscroll | fixedv语法说明：语法说明：scrollscroll表示背景图片是随着滚动条的移表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；动而移动，是浏览器的默认值；fixedfixed表示背景图表示背景图片固定在页面上不动，不随着滚动条的移动而移动。片固定在页面上不动，不随着滚动条的移动而移动。10.7CSS背景背景v10.7.4 10.7.4 固定固定/ /滚动背景图像滚动背景图像background-background-attachmentattachmentv语法：语法：background-attachmentbackground-attachment：scroll | fixedscroll | fixedv语法说明：语法说明：scrollscroll表示背景图片是随着滚动条的移表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；动而移动，是浏览器的默认值；fixedfixed表示背景图表示背景图片固定在页面上不动，不随着滚动条的移动而移动。片固定在页面上不动，不随着滚动条的移动而移动。10.7CSS背景背景v10.7. 5 10.7. 5 定位背景图像定位背景图像background-positionbackground-positionv语法：语法：background-positionbackground-position：百分比：百分比 | | 长度长度 | | 关键字关键字v语法说明：利用百分比和长度来设置图片位置时，语法说明：利用百分比和长度来设置图片位置时，都要指定两个值，并且这两个值都要用空格隔开。都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。水平方向一个代表水平位置，一个代表垂直位置。水平方向的主要有的主要有leftleft、centercenter、rightright，垂直方向的主要，垂直方向的主要有有toptop、centercenter、bottombottom。水平方向和垂直方向相。水平方向和垂直方向相互搭配使用。互搭配使用。10.7CSS背景背景v10.7.6 10.7.6 背景简写背景简写backgroundbackgroundv语法：语法：background-attachmentbackground-attachment：scroll | fixedscroll | fixedv语法说明：语法说明：scrollscroll表示背景图片是随着滚动条的移表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；动而移动，是浏览器的默认值；fixedfixed表示背景图表示背景图片固定在页面上不动，不随着滚动条的移动而移动。片固定在页面上不动，不随着滚动条的移动而移动。10.8CSS框模型框模型v10.8.1 10.8.1 内边距内边距paddingpaddingv语法：语法：padding:padding:长度长度 | | 百分比百分比v语法说明：语法说明：paddingpadding属性值可以是长度值或者百分比值，但属性值可以是长度值或者百分比值，但是不可以使用负数。设置一个值：四个内边距均使用一个是不可以使用负数。设置一个值：四个内边距均使用一个值。设置两个值：上边内边距和下边内边距调用第一个值，值。设置两个值：上边内边距和下边内边距调用第一个值，右边内边距和左边内边距调用第二个值。设置三个值：上右边内边距和左边内边距调用第二个值。设置三个值：上边内边距调用第一个值，右边内边距和左边内边距调用第边内边距调用第一个值，右边内边距和左边内边距调用第二个值，下边内边距调用第三个值。设置四个值：四个内二个值，下边内边距调用第三个值。设置四个值：四个内边距均的调用顺序为上、右、下、左。边距均的调用顺序为上、右、下、左。10.8CSS框模型框模型v10.8.2 10.8.2 边框边框borderborderv（1 1）边框样式）边框样式border-styleborder-stylevCSS CSS 中的中的border-style border-style 属性用于定义属性用于定义HTML HTML 元素边元素边框的样式。该属性有框的样式。该属性有10 10 种取值。种取值。v基本语法：基本语法：vborder-style:border-style:样式值样式值vborder-top/bottom/left/right-style:border-top/bottom/left/right-style:样式值样式值10.8CSS框模型框模型v（2 2）边框宽度）边框宽度border-widthborder-widthvCSSCSS中的中的border-widthborder-width属性用于定义属性用于定义HTMLHTML元素边框元素边框的宽度。该属性有四种取值。的宽度。该属性有四种取值。v基本语法：基本语法：vborder-width: thin | medium | thick | border-width: thin | medium | thick | 像素值像素值vborder-top/bottom/left/right-width: thin | border-top/bottom/left/right-width: thin | medium | thick | medium | thick | 像素值像素值10.8CSS框模型框模型v（3 3）边框颜色）边框颜色border-colorborder-colorvCSS CSS 中的中的border-color border-color 属性用于定义属性用于定义HTML HTML 元素边元素边框的颜色。其属性值为正常的颜色值即可。框的颜色。其属性值为正常的颜色值即可。v基本语法：基本语法：vborder-color:border-color:颜色关键字颜色关键字 | RGB| RGB值值 vborder-top- color: border-top- color: 颜色关键字颜色关键字 | RGB| RGB值值 vborder-top/bottom/left/right-color: border-top/bottom/left/right-color: 颜色关键颜色关键字字 | RGB| RGB值值 10.8CSS框模型框模型v（4 4）边框简写）边框简写borderbordervCSSCSS中的中的borderborder属性可以用于概括其他三种边框属属性可以用于概括其他三种边框属性，将相关属性值汇总写在同一行。当需要为同一性，将相关属性值汇总写在同一行。当需要为同一个元素声明多项边框属性时可以使用个元素声明多项边框属性时可以使用borderborder属性进属性进行简写。属性值无规定顺序，彼此之间用空格隔开，行简写。属性值无规定顺序，彼此之间用空格隔开，如果其中某个属性没有规定可以省略不写。如果其中某个属性没有规定可以省略不写。v基本语法：基本语法：vborder:border:边框宽度边框宽度 | | 边框样式边框样式 | | 边框颜色边框颜色10.8CSS框模型框模型vborder-top:border-top:上边框宽度上边框宽度 | | 上边框样式上边框样式 | | 上边框上边框颜色颜色 vborder-bottom:border-bottom:下边框宽度下边框宽度 | | 下边框样式下边框样式 | | 下边下边框颜色框颜色vborder-left:border-left:左边框宽度左边框宽度 | | 左边框样式左边框样式 | | 左边框左边框颜色颜色vborder-right:border-right:右边框宽度右边框宽度 | | 右边框样式右边框样式 | | 右边右边框颜色框颜色10.8CSS框模型框模型v10.8.2 10.8.2 外边距外边距marginmarginv（1 1）设置各边外边距）设置各边外边距v基本语法：基本语法：margin:margin:长度长度 | | 百分比百分比v（2 2）单边外边距）单边外边距v如果只需要为如果只需要为HTML HTML 元素的某一个边设置外边距，元素的某一个边设置外边距，可以使用可以使用margin margin 属性的属性的4 4种单边外边距属性。种单边外边距属性。v基本语法：基本语法：vmargin-top/right/bottom/left:margin-top/right/bottom/left:长度单位长度单位 | | 百分百分比单位比单位10.9CSS超链接和设置光标属性超链接和设置光标属性v10.9.1 CSS10.9.1 CSS超链接超链接状态名称状态名称描述描述a:linkv未被访问的超链接未被访问的超链接a:visited已被访问的超链接已被访问的超链接a:hover鼠标悬浮在上面的超链接鼠标悬浮在上面的超链接va:active正在被点击的超链接正在被点击的超链接10.9CSS超链接和设置光标属性超链接和设置光标属性v10.9.2 10.9.2 设置光标属性设置光标属性v基本语法：基本语法：vcursor:s-resizecursor:s-resizev语法说明：语法说明：vs-resizes-resize：cursorcursor属性共提供了属性共提供了1717种属性值。种属性值。10.10CSS列表列表v10.10.1 10.10.1 样式类型样式类型list-style-typelist-style-typevCSS CSS 中的中的list-style-typelist-style-type属性可以用于设置列表属性可以用于设置列表的标志样式，此属性通常搭配的标志样式，此属性通常搭配或或标记使用。标记使用。v基本语法：基本语法：vlist-style-type: list-style-type: 属性值属性值v语法说明：语法说明：vlist-style-typelist-style-type属性在属性在CSS2CSS2版本已有版本已有2121种取值内种取值内容。容。10.10CSS列表列表v10.10.2 10.10.2 样式图片样式图片list-style-imagelist-style-imagev基本语法：基本语法：vList-style-image: url | noneList-style-image: url | nonev语法说明：语法说明：vurlurl是指定要载入的图片路径，在使用上与插入图是指定要载入的图片路径，在使用上与插入图片片的用法差不多；的用法差不多；nonenone表示不使用图片式的表示不使用图片式的列表符号。列表符号。10.10CSS列表列表v10.10.3 10.10.3 样式位置样式位置list-style-positionlist-style-positionv基本语法：基本语法：vlist-style-position:inside|outside|inheritlist-style-position:inside|outside|inheritv语法说明：语法说明：vinsideinside是属性的默认值，表示列表标志放置在文本是属性的默认值，表示列表标志放置在文本左侧。左侧。outsideoutside表示列表标志放置在文本内部，多表示列表标志放置在文本内部，多行文本根据标志对齐。行文本根据标志对齐。inheritinherit表示继承父元素的表示继承父元素的list-style-positionlist-style-position属性值。属性值。10.11CSS定位定位v10.11.1 10.11.1 绝对定位绝对定位v绝对定位指的是通过规定绝对定位指的是通过规定HTMLHTML元素在水平和垂直方元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占向上的位置来固定元素，基于绝对定位的元素不占据空间。据空间。v例如：例如：pposition: absolute;pposition: absolute; top:100px;left:100px; top:100px;left:100px;10.11CSS定位定位v10.11.2 10.11.2 相对定位相对定位v使用相对定位需要将使用相对定位需要将HTMLHTML元素的元素的positionposition属性值设属性值设置为置为relativerelative（绝对的），与绝对定位的区别在于（绝对的），与绝对定位的区别在于它的参照点不是左上角的原点，而是该元素本身原它的参照点不是左上角的原点，而是该元素本身原先的起点位置。并且即使该元素偏移到了新的位置，先的起点位置。并且即使该元素偏移到了新的位置，也仍然从原始的起点处占据空间。也仍然从原始的起点处占据空间。10.11CSS定位定位v10.11.3 10.11.3 层叠效果层叠效果v在在CSSCSS中，除了定义中，除了定义HTMLHTML元素在水平和垂直方向上元素在水平和垂直方向上的位置，还可以定义多个元素在一起叠放的层次。的位置，还可以定义多个元素在一起叠放的层次。使用属性使用属性z-indexz-index可以为元素规定层次顺序，其属可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位性值为整数，并且该数值越大将叠放在越靠上的位置。置。10.11CSS定位定位v10.11.4 10.11.4 浮动浮动v（1 1）浮动效果）浮动效果floatfloatv基本语法：基本语法：vfloat: left | right | none | inheritfloat: left | right | none | inheritv语法说明：语法说明：vleftleft表示元素向左浮动。表示元素向左浮动。rightright表示元素向右浮动。表示元素向右浮动。nonenone是是floatfloat属性的默认值，表示元素不浮动。属性的默认值，表示元素不浮动。inheritinherit表示继承父元素的表示继承父元素的floatfloat属性值。属性值。10.11CSS定位定位v（2 2）清理浮动）清理浮动clearclearvCSSCSS中的中的clearclear属性可以用于清理浮动效果，它可以属性可以用于清理浮动效果，它可以规定元素的哪一侧不允许出现浮动元素。规定元素的哪一侧不允许出现浮动元素。v基本语法：基本语法：vclear: left | right | both | none | inheritclear: left | right | both | none | inherit10.12小实例小实例