《网页设计与制作案例实战教程》全套教学课件_第1页
《网页设计与制作案例实战教程》全套教学课件_第2页
《网页设计与制作案例实战教程》全套教学课件_第3页
《网页设计与制作案例实战教程》全套教学课件_第4页
《网页设计与制作案例实战教程》全套教学课件_第5页
已阅读5页,还剩283页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第1章网页设计基础网页设计与制作案例实战教程全套可编辑PPT课件目录Contents1.1

网页的基本概念1.2

网站制作流程1.3

网页布局与配色1.4

网页设计常用工具1.5

AIGC在网页设计中的应用1.6

课后练习1.1.1

网页与网站网页与网站都是互联网词汇。网页是构成网站的基本元素,承载着各种网站应用;网站是指根据一定的规则制作的用于展示特定内容相关网页的集合。1.网页网页是一个包含HTML标签的纯文本文件,可以存放在世界某个角落的某一部计算机中,这部计算机必须与互联网相连。2.网站网站是有独立域名、独立存放空间的内容集合,这些内容可能是网页,也可能是程序或其他文件。1.1.2静态网页与动态网页静态网页和动态网页的区别在于网页是否会根据数据操作的结果而发生变化。与静态网页相比,动态网页的交互性更强,用户可以主动参与到页面中,如登录、注册网页等。1.静态网页在网站设计中纯粹HTML格式的网页通常被称为“静态网页”,早期的网站一般都是由静态网页制作的。2.动态网页动态网页是与静态网页相对的一种网页编程技术。1.1.3网页标准化技术网页主要由结构、表现和行为三部分构成,对应的技术标准为HTML、CSS样式和脚本语言。1.HTML(超文本标记语言)2.CSS样式(层叠样式表)3.脚本语言目录Contents1.1

网页的基本概念1.2

网站制作流程1.3

网页布局与配色1.4

网页设计常用工具1.5

AIGC在网页设计中的应用1.6

课后练习1.2网站制作流程网站制作一般包括规划与需求分析、网站设计、网站开发、测试、部署与上线、维护与更新等步骤。遵循流程进行操作,可以使网站制作更加轻松合理,减少差错率。1.规划与需求分析2.网站设计3.网站开发4.网站测试5.网站发布6.维护与更新目录Contents1.1

网页的基本概念1.2

网站制作流程1.3

网页布局与配色1.4

网页设计常用工具1.5

AIGC在网页设计中的应用1.6

课后练习1.3.1网页的布局类型骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型10种类型是网页主要的布局类型。1.骨骼型2.满版型3.分割型4.中轴型5.曲线型6.倾斜型7.对称型8.焦点型9.三角型10.自由型1.3.2网页色彩基础色彩是最具表现力的视觉元素之一,具有信息传达、情感传递、增强视觉表现力等作用。1.色彩三要素色彩分为无彩色系和有彩色系两大类,其中黑、白、灰属于无彩色系,其他色彩属于有彩色系。2.Web安全色Web安全色是指在不同硬件环境、不同操作系统、不同浏览器中具有一致显示效果的颜色,共包括216种。1.3.3网页配色技巧网页配色在网站页面效果中占据重要地位,优秀的网页配色可以提高网站的页面效果,增加页面浏览量。1.网页配色要点2.网页设计色彩搭配原则3.网页色彩搭配方式目录Contents1.1

网页的基本概念1.2

网站制作流程1.3

网页布局与配色1.4

网页设计常用工具1.5

AIGC在网页设计中的应用1.6

课后练习1.4网页设计常用工具根据各网页制作工具功能侧重点的不同,在制作网页时往往需要综合利用多种网页制作工具,以节省工作时间,提高工作效率。1.Photoshop2.Illustrator3.Flash4.Dreamweaver目录Contents1.1

网页的基本概念1.2

网站制作流程1.3

网页布局与配色1.4

网页设计常用工具1.5

AIGC在网页设计中的应用1.6

课后练习1.5AIGC在网页设计中的应用AIGC(ArtificialIntelligenceGeneratedContent)中文名称人工智能生成内容,其核心在于使用机器学习、深度学习等算法对大量数据进行学习和模式识别,然后根据用户的需求或输入条件,生成与之相关的内容。在网页设计领域,AIGC可以起到内容生成与优化、交互原型设计等作用。1.自动内容生成2.交互式元素和动画3.快速原型与概念生成4.设计反馈与迭代目录Contents1.1

网页的基本概念1.2

网站制作流程1.3

网页布局与配色1.4

网页设计常用工具1.5

AIGC在网页设计中的应用1.6

课后练习1.6课后练习1.收集不同汽车网页并分析其特点。2.收集不同手机网页并分析其特点。3.利用人工智能工具了解更多网页设计的知识。学习进步网页设计与制作案例实战教程第2章Dreamweaver入门操作网页设计与制作案例实战教程目录Contents2.1

Dreamweaver的工作界面2.2

站点的创建与管理2.3

文档的基础操作2.4

课堂实战利农农机2.5

课后练习2.1.1

启动Dreamweaver安装完成Dreamweaver后,双击桌面上的快捷按钮或是通过“开始”菜单选择所有程序中的AdobeDreamweaver选项,即可启动Dreamweaver应用程序。2.1.2自定义软件界面用户可以通过自定义软件界面使界面更符合个人需求,从而自在从容地应用软件。1.设置首选项2.工作区的调整3.显示/隐藏面板和工具栏4.自定义收藏夹2.1.3

四种视图模式Dreamweaver软件中的视图包括代码视图、拆分视图、实时视图和设计视图4种模式。选择不同的视图模式,Dreamweaver软件文档窗口中显示的内容也将有所不同。2.1.4实操案例:自定义首选项本案例将以自定义根首选项为例,自定义软件。目录Contents2.1

Dreamweaver的工作界面2.2

站点的创建与管理2.3

文档的基础操作2.4

课堂实战利农农机2.5

课后练习2.2.1创建站点Dreamweaver软件中包括本地站点和远程站点2种站点,其作用是存储网站中使用的文件和资源。1.创建本地站点本地站点主要用于存储和处理本地文件。2.创建远程站点远程站点和本地站点的创建方法类似,只是多了设置远程文件夹的步骤。2.2.2编辑站点创建完成的站点,还可以通过“管理站点”对话框进行复制、修改、删除等操作。1.管理站点通过“管理站点”对话框可以修改编辑站点的属性。2.复制站点利用站点的可复制性,可以创建多个结构相同或类似的站点,再对复制的站点进行编辑调整,以达到需要的效果。3.删除站点针对一些不需要的站点,可以将其从站点列表中删除。2.2.3导入和导出站点在“管理站点”对话框中,可以通过“导入站点”按钮和“导出当前选定的站点”按钮,实现Internet网络中各计算机之间站点的移动,或者与其他用户共享站点的设置。2.2.4新建文件或文件夹若要在站点中创建文件夹,执行“窗口>文件”命令,打开“文件”面板,选中站点,在“文件”面板中右击鼠标,在弹出的快捷菜单中选择“新建文件夹”命令,即可创建一个新文件夹。选中文件夹,右击鼠标,在弹出的快捷菜单中选择“新建文件”选项命令,即可新建文件。2.2.5编辑文件或文件夹在“文件”面板中,可以利用剪切、复制、粘贴等功能来编辑文件或文件夹。目录Contents2.1

Dreamweaver的工作界面2.2

站点的创建与管理2.3

文档的基础操作2.4

课堂实战利农农机2.5

课后练习2.3.1新建文档Dreamweaver支持创建HTML文档、CSS文档等多种类型的文档。2.3.2打开文档在实际应用过程中,除了新建文档外,用户还可以使用Dreamweaver打开HTML、ASP、DWT、CSS等多种格式的文档。2.3.3插入文档制作网页文档时,为了节省时间可以将编辑好的文档直接插入到网页中。2.3.4保存文档在制作网页的过程中,可以及时保存文档,以避免误操作关闭文档或其他情况。2.3.5关闭文档完成网页的制作与保持后,即可关闭网页文档。执行“文件>关闭”命令,或单击文档名称后的“关闭”按钮即可关闭当前文档。执行“文件>全部关闭”命令,将关闭软件中所有打开的文档。目录Contents2.1

Dreamweaver的工作界面2.2

站点的创建与管理2.3

文档的基础操作2.4

课堂实战利农农机2.5

课后练习2.4课堂实战本案例将以利农农机站点的制作为例,对站点的创建与应用进行介绍。目录Contents2.1

Dreamweaver的工作界面2.2

站点的创建与管理2.3

文档的基础操作2.4

课堂实战利农农机2.5

课后练习2.5课后练习1.酷乐冰屋根据所学内容制作酷乐冰屋网页。2.哎呀宠物根据所学内容制作哎呀宠物网页。学习进步网页设计与制作案例实战教程第3章HTML知识准备网页设计与制作案例实战教程目录Contents3.1

认识HTML3.2

HTML的基本标签3.3

HTML5的应用3.4

课堂实战3.5

课后练习3.1.1HTML语言基础HTML(HyperTextMarkupLanguage)并不是程序设计语言,而是一种排版网页中资料显示位置的标记结构语言。HTML文件是一种可以用任何文本编辑器创建的ASCII码文档。常见的文本编辑器包括记事本、写字板等,这些文本编辑器都可以编写HTML文件,在保存时以.htm或.html作为文件扩展名保存即可。当使用浏览器打开这些文件时,浏览器将对其进行解释,浏览者就可以从浏览器窗口中看到页面内容。3.1.2文件开始标签<html><html>与</html>标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。语法描述如下:<html>…</html>3.1.3文件头部标签<head><head>标签用于定义文档的头部,它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。语法描述如下:<head>…</head>3.1.4标题标签<titie><title标签可定义文档的标题,是head部分中唯一必需的元素。浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。语法描述如下:<title>…</title>3.1.5标题标签<titie><title标签可定义文档的标题,是head部分中唯一必需的元素。浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。语法描述如下:<title>…</title>3.1.6主体标签<body><body>标签定义文档的主体,包含文档的所有内容,比如文本、超链接、图像、表格和列表等。语法描述如下:<body>…</body>3.1.7

UI设计常用软件<meta>标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部,不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。<meta>标签永远位于head元素内部。name属性提供了名称/值对中的名称。语法说明如下:<metaname="description/keywords"content="页面的说明或关键字"/>目录Contents3.1

认识HTML3.2

HTML的基本标签3.3

HTML5的应用3.4

课堂实战3.5

课后练习3.2.1标题文字HTML中设置文章标题的标签为<h></h>。语法描述如下:<h1>…</h1>标题标签<h1>-<h6>标签可定义标题,<h1>定义最大的标题,<h6>定义最小的标题。3.2.2文字字体Face属性可以设置HTML语言中文字的不同字体效果。若浏览器中没有安装相应字体,设置的效果将会被浏览器中的通用字体替代。语法描述如下:<fontface="字体">文本内容</font>3.2.3段落换行换行标签<br>可以设置一段很长的文字换行,以便于浏览和阅读。语法描述如下:<br>3.2.4不换行标签<nobr>标签可以帮助用户解决浏览器的限制,避免自动换行。语法描述如下:<nobr>不需换行文字</nobr>3.2.5图像标签制作网页时,插入图片可以更好的美化网页,吸引用户浏览。在HTML语言中,插入图片的标签为<img>。语法描述如下:<imgsrc="图片文件地址">3.2.6超链接标签超链接是指从一个网页指向一个目标的连接关系。通过超链接可以连接各个网页,使其构成真正的网站。下面将针对HTML语言中的超链接标签进行介绍。1.页面链接在HTML中创建超链接需要使用<a>标记,具体格式是:<ahref="URL"target="_blank">链接</a>2.锚记链接建立锚记链接,可以对同一网页的不同部分进行链接。3.电子邮件链接若将href属性的取值指定为“mailto:电子邮件地址”,则可以获得指向电子邮件的超链接。3.2.7列表标签在HTML中的列表分为有序列表和无序列表2种。有序列表是指带有序号标志(如数字)的列表;无序列表是指没有序号标志的列表。1.有序列表有序列表的标签是<ol>,其列表项标签是<li>。2.无序列表无序列表的标签是<ul>,其列表项标签是<li>。3.2.8表格标签使用表格可以有效的管理网页信息,使页面布局整齐美观。表格一般由行、列、单元格三个部分组成。在网页中使用表格会用到3个标签,即<table>、<tr>、<td>。<table>标签表示表格对象,<tr>标签表示表格中的行,<td>标签表示单元格,<td>标签必须包含在<tr>标签内。语法描述如下:<table><tr><td>表项目1</td>……<td>表项目n</td></tr>……<tr><td>表项目1</td>……<td>表项目n</td></tr></table>3.2.9表单标签使用表单可以增加网站与用户之间的互动,实现更多的功能,如网站登录、账户注册等等。表单是由<form>标签定义的。常用的表单元素有下面6种:文本框复选框单选按钮提交按钮多行文本框下拉菜单3.2.10实操案例:丝竹诗文本案例将以丝竹诗文网页的制作为例,对<img>、<br>等标签的应用进行介绍。目录Contents3.1

认识HTML3.2

HTML的基本标签3.3

HTML5的应用3.4

课堂实战3.5

课后练习3.3.1HTML5的语法变化HTML语法是在SGML(StandardGeneralizedMarkupLanguage,标准通用标记语言)语言的基础上建立的,但是由于SGML的语法非常复杂,文档结构解析程序的开发也不太容易,多数Web浏览器不作为SGML解析器运行。HTML规范中虽然要求“应遵循SGML的语法”,但实际情况却是,对于HTML的执行在各浏览器之间并没有一个统一的标准,因此也就有了HTML5。在HTML5中,提高Web浏览器间的兼容性是HTML5要实现的重大的目标。要确保兼容性,必须消除规范与实现的背离。HTML5分析了各个浏览器之间的特点和功能,在此基础上要求这些浏览器所有内部功能符合一个通用标准,从而大大提高了各浏览器正常运行的可能性。3.3.2

HTML5中的标记方法HTML5的标记方法主要有以下3种:1.内容类型(ContentType)HTML5的文件扩展符与内容类型保持不变。2.DOCTYPE声明DOCTYPE声明是HTML文件中必不可少的,它位于文件第一行。3.字符编码的设置字符编码的设置方法也有些新的变化。3.3.3HTML5中新增元素在HTML5中,新增了以下元素:1.section元素2.article元素3.aside元素4.header元素5.fhgroup元素6.footer元素7.nav元素8.figure元素9.video元素10.audio元素11.embed元素12.mark元素13.progress元素14.meter元素15.time元素16.wbr元素17.canvas元素18.command元素19.details元素20.datalist元素

3.3.4HTML5中新增属性元素在HTML5中,还新增加了很多的属性,下面简单介绍一些新增的属性。1.表单相关的属性2.与链接相关的属性3.其它属性目录Contents3.1

认识HTML3.2

HTML的基本标签3.3

HTML5的应用3.4

课堂实战3.5

课后练习3.4课堂实战综合本章所学制作恬逸沙发网页。目录Contents3.1

认识HTML3.2

HTML的基本标签3.3

HTML5的应用3.4

课堂实战3.5

课后练习3.5课后练习1.微著齿轮根据所学内容制作微著齿轮网页。2.闪电速运根据所学内容制作闪电速运网页。学习进步网页设计与制作案例实战教程第4章页面与文本网页设计与制作案例实战教程目录Contents4.1

页面属性4.2

创建文本4.3

设置网页中的文本属性4.4

在网页中插入特殊元素4.5

课堂实战4.6

课后练习4.1.1

设置外观“页面属性”对话框中包括“外观(CSS)”和“外观(HTML)”2个选项卡,用户可以在“外观(CSS)”选项卡中设置网页的基本页面布局选项,包括字体、背景颜色、背景图像等。1.设置页面文字属性2.设置背景属性3.设置页边距4.1.2设置标题网页标题是访问网页时浏览器标题栏中显示的信息,可以帮助用户快速了解网页内容。设置网页标题有以下3种方式:1.新建文档时设置2.使用“页面属性”对话框3.“代码”视图设置4.1.3实操案例:青木桌椅本案例将以青木桌椅网页制作为例,对网页标题及背景的添加进行介绍。目录Contents4.1

页面属性4.2

创建文本4.3

设置网页中的文本属性4.4

在网页中插入特殊元素4.5

课堂实战4.6

课后练习4.2.1输入文本Dreamweaver支持用户直接在文档中输入文本,移动鼠标至需要输入文本的地方输入文字即可。4.2.2导入文本除了直接输入文本外,用户还可以导入外部的文档添加文本信息。打开需要导入文本的网页文件,从“文件”面板中选择Word文档,拖拽至文档窗口中,在弹出的“插入文档”对话框中设置参数。完成后单击“确定”按钮,即可插入文档。目录Contents4.1

页面属性4.2

创建文本4.3

设置网页中的文本属性4.4

在网页中插入特殊元素4.5

课堂实战4.6

课后练习4.3.1“属性”面板“属性”面板包括HTML属性检查器和CSS属性检查器两部分内容,其中在HTML属性检查器中可以设置文本的字体、大小、颜色、边距等;在CSS属性检查器中可以通过层叠样式表(CSS)设置文本格式。4.3.2设置文本格式“属性”面板可以设置文本的字体、字号、颜色等参数,下面将对此进行介绍。1.设置字体在制作网页时,一般使用宋体或黑体这两种字体。2.设置字体颜色为文本设置颜色,可以突出文本信息,增强网页的表现力。3.设置字号字号是指字体的大小,用户可以在“属性”面板中设置文字字号。4.3.3设置段落格式段落格式的设置可以使页面中的文本更具条理性。1.设置段落格式选中文本段落,在HTML属性检查器中单击“格式”右侧的下拉按钮,在弹出的列表中选择格式即可设置段落格式。2.设置段落对齐方式段落对齐方式是指段落相对于文件窗口(或浏览器窗口)在水平位置的对齐方式,包括“左对齐”、“居中对齐”、“右对齐”和“两端对齐”4种。3.设置段落缩进缩进是指文档内容相对于文档窗口(或浏览器窗口)左端产生的间距。4.3.4设置文本样式文本样式是指文本的外观显示样式,包括文本的粗体、斜体、下划线和删除线等。4.3.5使用列表在文档中使用列表可以使文本结构更加清晰。用户可以用现有文本或新文本床架编号列表、项目列表和定义列表。1.无序列表无序列表常应用于列举类型的文本中。2.有序列表有序列表常应用于条款类型的文本中。3.定义列表定义列表不使用项目符号或数字等的前缀符,通常用于词汇表或说明中。4.3.6实操案例:缘心志愿以缘心志愿网页的制作为例,介绍文本的添加与设置。目录Contents4.1

页面属性4.2

创建文本4.3

设置网页中的文本属性4.4

在网页中插入特殊元素4.5

课堂实战4.6

课后练习4.4.1插入特殊符号除了常规的字母、字符、数字外,在网页中还可以插入特殊的符号,如商标符、版权符等。4.4.2插入水平线水平线可以帮助浏览者区分文章标题和正文,是网页中常用到的元素。在网页中插入水平线的方式非常简单。执行“插入>HTML>水平线”命令,即可在网页中插入水平线。4.4.3插入日期日期是许多网页中常见的内容,用户可以通过“插入”命令插入可更新的日期文字。4.4.4实操案例:绿其茶业本案例将以绿其茶业网页中特殊元素的添加为例,对网页特殊元素的应用进行介绍。目录Contents4.1

页面属性4.2

创建文本4.3

设置网页中的文本属性4.4

在网页中插入特殊元素4.5

课堂实战4.6

课后练习4.5课堂实战每日读书本案例将以每日读书网站首页的制作为例,对网页页面的设计及文本的添加等进行介绍。目录Contents4.1

页面属性4.2

创建文本4.3

设置网页中的文本属性4.4

在网页中插入特殊元素4.5

课堂实战4.6

课后练习4.6课后练习1.福睿斯蔬果根据所学内容制作福睿斯蔬果网页。2.艾森散文根据所学内容制作艾森散文网页。学习进步网页设计与制作案例实战教程第5章图像与多媒体元素网页设计与制作案例实战教程目录Contents5.1

在网页中插入图像5.2

插入多媒体元素5.3

课堂实战5.4

课后练习5.1.1

常用图像格式GIF、JPEG、PNG等格式是网页中常用的图像格式。1.GIF格式GIF是英文单词GraphicsInterchangeFormat的缩写,即图像交换格式。2.JPEG格式JPEG即JointPhotographicExpertsGroup的缩写,是用于连续色调静态图像压缩的一种标准,是最常用的图像文件格式。3.PNG格式PNG是PortableNetworkGraphic的缩写,即便携式网络图形。5.1.2插入图像通过“插入”命令可以在网页文档中添加图像,美化网页页面。5.1.3图像的属性设置执行“窗口>属性”命令或按Ctrl+F3组合键打开“属性”面板,选中要设置的图像,在“属性”面板中可查看设置其参数。1.宽和高2.图像源文件3.链接4.地图名称和热点工具5.目标6.编辑5.1.4图像的对齐方式通过设置插入图像的对齐方式,可以使页面整齐且具有条理。用户可以设置图像与同一行中的文本、图像、插件或其他元素对齐,也可以设置图像的水平对齐方式。5.1.5替换文本“属性”面板中的“替换”选项可以指定在只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。如果用户的浏览器不能正常显示图像时,替换文字代替图像给用户以提示。对于使用语音合成器(用于只显示文本的浏览器)的有视觉障碍的用户,将大声读出该文本。在某些浏览器中,当鼠标指针滑过图像时也会显示该文本。5.1.6鼠标经过图像鼠标经过图像可以制作在浏览器中查看并使用鼠标经过时发生变化的图像。创建鼠标经过图像必须有原始图像和鼠标经过图像两个图像。5.1.7实操案例:米格餐具本案例将以米格餐具网页制作为例,对图像的添加与应用进行介绍。目录Contents5.1

在网页中插入图像5.2

插入多媒体元素5.3

课堂实战5.4

课后练习5.2.1插入HTML5Video元素在HTML5网页中可以通过插入HTML5Video元素的方式插入视频。HTML5Video元素支持Ogg、MPEG4和WebM3种视频格式。5.2.2插入HTML5Audio元素HTML5网页中可以通过插入Audio元素的方式插入音频,Audio元素能够播放声音文件或者音频流,支持OggVorbis、MP3和WAV3种音频格式。5.2.3实操案例:青鸟视频本案例将以青鸟视频网页中视频元素的添加为例进行介绍。目录Contents5.1

在网页中插入图像5.2

插入多媒体元素5.3

课堂实战5.4

课后练习5.3课堂实战本案例将以曲乐影音网站首页的制作为例,对网页中图像及多媒体元素的添加进行介绍。目录Contents5.1

在网页中插入图像5.2

插入多媒体元素5.3

课堂实战5.4

课后练习5.5课后练习1.美相图片根据所学内容制作美相图片网页。2.赛克音乐根据所学内容制作赛克音乐网页。学习进步网页设计与制作案例实战教程第6章超链接的应用网页设计与制作案例实战教程目录Contents6.1

超链接概念6.2

管理网页超链接6.3

文本链接6.4

图像链接6.5

锚点链接6.6

课堂实战6.7

课后练习6.1.1

相对路径相对路径无需给出目标端点完整的URL地址,只要给出相对于源端点的位置即可。一般可以将其分为文档相对路径和站点根目录相对路径2种类型。1.文档相对路径文档相对路径对于有大多数站点的本地链接来说是最合适的路径。2.站点根目录站点根目录相对路径指从站点的根文件夹到文档的路径。6.1.2绝对路径绝对路径是指包括服务器规范在内的完全路径,通常使用http://来表示。与相对路径相比,采用绝对路径的优点在于它同链接的源端点无关。只要网站的地址不变,无论文档在站点中如何移动,都可以正常实现跳转。采用绝对路径的缺点在于这种方式的链接不利于测试。如果在站点中使用绝对地址,要想测试链接是否有效,必须在Internet服务器端对链接进行测试。目录Contents6.1

超链接概念6.2

管理网页超链接6.3

文本链接6.4

图像链接6.5

锚点链接6.6

课堂实战6.7

课后练习6.2.1自动更新链接当本地站点中的文档发生移动或重命名后,Dreamweaver可更新来自和指向该文档的链接,直到将本地文件放在远程服务器上或将其存回远程服务器后才更改远程文件夹中的文件。6.2.2检查站点中的链接错误发布网页前需要对网站中的超链接进行测试,为了节省检查时间,Dreamweaver中的“链接检查器”面板就提供了对整个站点的链接进行快速检查的功能。通过这一功能,可以找出断掉的链接、错误的代码和未使用的孤立文件等,以便进行纠正和处理。6.2.3修复链接修复链接是指重新设置检查出的断掉链接,一般通过以下2种方式实现:双击“链接检查器”面板右侧列表中断掉链接的“文件”中的文件名,Dreamweaver会在“代码”视图和“设计”视图中定位链接出错的位置,同时“属性”面板也会指示出链接便于用户修改;在“链接检查器”面板“断掉的链接”列表中单击直接修改链接路径,或单击“浏览文件”按钮重新定位链接文件。目录Contents6.1

超链接概念6.2

管理网页超链接6.3

文本链接6.4

图像链接6.5

锚点链接6.6

课堂实战6.7

课后练习6.3.1文本链接Dreamweaver中一般通过以下3种方法创建文本链接:1.直接输入链接路径2.“浏览文件”按钮3.“指向文件”按钮6.3.2下载链接用户可以单击下载链接实现文件下载,其创建步骤与文本链接一致,区别只在于下载链接链接的文件不是网页文件,而是.exe、.doc、.rar等类型的其他文件。选中要添加下载文件链接的对象,在“属性”面板“链接”下拉文本框中设置链接的文件即可。设置完成后按F12键预览,单击该链接对象将下载链接的文件。6.3.3电子邮件链接电子邮件链接是指用户点击时直接打开电子邮件,并以设置好的邮箱地址作为收信人的链接。一般电子邮件链接有以下3种创建方法:1.使用“插入”命令2.使用“属性”面板3.使用代码6.3.4空链接空链接是指没有指定具体链接目标的链接。选中要创建链接的对象,在“属性”面板“链接”文本框中输入“#”即可。6.3.5实操案例:景澜酒店本案例将以景澜酒店网页制作为例,介绍超链接的应用。目录Contents6.1

超链接概念6.2

管理网页超链接6.3

文本链接6.4

图像链接6.5

锚点链接6.6

课堂实战6.7

课后练习6.4.1图像链接选中要建立链接的图像,单击“属性”面板“链接”文本框右侧的“浏览文件”按钮,打开“查找文件”对话框进行设置即可。用户也可以直接在“代码”视图中输入相应的代码设置图像链接:<body><ahref="#"><imgsrc="02.jpg"width="1280"height="853"alt=""/></a></body>6.4.2图像热点链接图像热点链接可以在一个图像中创建多个热点链接,当用户单击某个热点时,将打开对应的链接内容。图像热点是一个非常实用的功能。图像映射是将整张图片作为链接的载体,将图片的整个部分或某一部分设置为链接。热点链接的原理就是利用HTML语言在图片上定义一定形状的区域,然后给这些区域加上链接,这些区域被称之为热点或热区。常用的热点工具包括以下3种:矩形热点工具圆形热点工具多边形热点工具6.4.3实操案例:微光摄像本案例将以微光摄像网页链接的制作为例,介绍图像链接的应用。目录Contents6.1

超链接概念6.2

管理网页超链接6.3

文本链接6.4

图像链接6.5

锚点链接6.6

课堂实战6.7

课后练习6.5锚点链接锚点链接是指目标端点位于网页中某个指定位置的超链接。在创建锚点链接时首先需要创建链接的目标端点并为其命名,然后再创建到该锚点的链接。在“文档”窗口中选中要作为锚点的项目,在“属性”面板中为其设置唯一的ID。在“设计”视图中,选中要从其创建链接的文本或图像,在“属性”面板的“链接”文本框中输入数字符号(#)和锚点ID即可。用户也可以选择要从其创建链接的文本或图像,按住“属性”面板的“链接”文本框右侧的“指向文件”按钮拖拽至要链接到的锚点上。目录Contents6.1

超链接概念6.2

管理网页超链接6.3

文本链接6.4

图像链接6.5

锚点链接6.6

课堂实战6.7

课后练习6.6课堂实战本案例将以美家装饰网页的制作为例,介绍网页超链接的应用。目录Contents6.1

超链接概念6.2

管理网页超链接6.3

文本链接6.4

图像链接6.5

锚点链接6.6

课堂实战6.7

课后练习6.7课后练习1.长风文学根据所学内容为长风文学网页添加链接。2.可丽甜点根据所学内容为可丽甜点网页添加链接。学习进步网页设计与制作案例实战教程第7章使用表格布局网页网页设计与制作案例实战教程目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.1.1

表格的组成表格由行、列和单元格组成。在一个表格中,横向的称为行,纵向的称为列;行与列交叉的部分叫做单元格;单元格中的内容和单元格边框之间的距离叫做边距;单元格和单元格之间的距离叫做间距;整个表格的边缘叫做边框。7.1.2插入表格在网页文档中将鼠标移动至要插入表格的位置,执行“插入丨Table”命令,或按Ctrl+Alt+T组合键打开“Table”对话框。在该对话框中设置参数后,单击“确定”按钮即可根据设置插入表格。目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.2.1设置表格属性选中整个表格后可以在“属性”面板中设置表格属性参数,如图为选中表格的“属性”面板。7.2.2设置单元格属性选中表格中的某一单元格,在“属性”面板中颗设置该单元格的属性。7.2.3鼠标经过颜色onMouseOut、onMouseOver属性可以创建鼠标经过时单元格颜色改变的效果。7.2.4表格的属性代码通过在“代码”视图中添加width、border等属性代码,同样可以设置表格参数。1.width属性用于指定表格或某一个表格单元格的宽度,单位可以是像素或百分比。

2.height属性用于指定表格或某一个表格单元格的高度,单位可以是像素或百分比。3.border属性用于设置表格的边框及边框的粗细。值为0时不显示边框;值为1或以上时显示边框,值越大,边框越粗。4.Bordercolor用于指定表格或某一个表格单元格边框的颜色。7.2.4表格的属性代码5.bordercolorlight属性用于指定表格亮边边框的颜色。6.bordercolordark属性用于指定表格暗边边框的颜色。7.bgcolor属性用于指定表格或某一个表格单元格的背景颜色。8.background属性用于指定表格或某一个表格单元格的背景图像。9.cellspacing属性用于指定单元格间距,即单元格和单元格之间的距离。7.2.4表格的属性代码10.cellpadding属性用于指定单元格边距(或填充),即单元格边框和单元格中内容之间的距离。11.align属性用于指定表格或某一表格单元格中内容的垂直水平对齐方式。属性值有left(左对齐)、center(居中对齐)和right(右对齐)。12.valign属性用于指定单元格中内容的垂直对齐方式。属性值有top(顶端对齐)、middle(居中对齐)、bottom(底部对齐)和baseline(基线对齐)。7.2.5实操案例:陶瓷展览馆以陶瓷展览馆网页制作为例,对表格的添加与设置进行介绍。目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.3.1选择整个表格选中表格后才可以对其进行编辑,常用地选择整个表格的方式有以下4种:插入表格,单击表格上下边框即可选择整个表格。在“代码”视图或“拆分”视图下,选中表格代码,即<table>和</table>标签之间所有部分,即可选中表格。单击某个单元格,右击鼠标,在弹出的快捷菜单中选择“表格>选择表格”命令即可选中表格。单击某个单元格,执行“编辑>表格>选择表格”命令即可选中表格。7.3.2选择单个单元格选中表格中的单元格时,该单元格四周将出现深色实线边框,如图7-19所示。用户可以通过以下2种方式选择单个单元格:按住鼠标左键不放,从单元格的左上角拖至右下角,即可选择该单元格。按住Ctrl键,单击单元格即可选中该单元格。目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.4.1拷贝和粘贴表格制、粘贴单个单元格或多个单元格可以节省表格制作的时间,提高效率,在复制时用户可以选择保留单元格的格式设置。若要粘贴多个表格单元格,剪贴板的内容必须和表格的结构或表格中将粘贴这些单元格的部分兼容。7.4.2增减表格的行和列打开网页文档,单击某个单元格,执行“编辑>表格>插入行”命令或按Ctrl+M组合键,即可在插入点上方插入1行表格。7.4.3删除表格和清除表格内容删除表格会一同删除表格中的内容,而清除表格内容只会清除表格中的内容而不影响表格。下面将对此进行介绍。1.删除表格选中整个表格按Delete键即可删除表格及表格内的内容。若只是想删除某行或某列单元格,可以选中整行或整列后按Delete键删除。2.清除表格内容当单个单元格或多个单元格不能构成整行或整列时,只能清除单元格中的内容而不删除表格。用户可以选择要清除的单元格后按Delete键删除其中的内容。7.4.4合并或拆分单元格合并或拆分单元格可以丰富表格效果,使其呈现出不规则的质感。1.合并单元格选中网页文档中表格中连续的单元格,执行“编辑>表格>合并单元格”命令,即可合并单元格。2.拆分单元格选中表格中要拆分的单元格,执行“编辑>表格>拆分单元格”命令,打开“拆分单元格”对话框。7.4.5实操案例:尔肆手表以尔肆手表网页制作为例,对表格的设置与编辑进行介绍。目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.5课堂实战春林建筑本案例将以春林建筑网页制作为例,对表格的应用与编辑进行介绍。目录Contents7.1

插入表格7.2

表格属性7.3

选择表格元素7.4

编辑表格7.5

课堂实战7.6

课后练习7.6课后练习1.倏尔鲜花根据所学内容制作倏尔鲜花网页。2.卓越办公根据所学内容制作卓越办公登录页。学习进步网页设计与制作案例实战教程第8章CSS网页美化技术网页设计与制作案例实战教程目录Contents8.1

CSS概述8.2

创建CSS样式8.3

CSS规则定义8.4

课堂实战8.5

课后练习8.1.1CSS的特点CSS是描述网页元素格式的一组规则,一般具有以下5个特点:样式定义丰富:CSS可以设置丰富的文档样式外观。便于使用和修改:使用CSS时,可以完成修改一个小的样式从而更新所有与其相关的页面元素的操作,简化操作步骤,使CSS样式的修改与使用更为便捷。重复使用:在Dreamweaver软件中,可以创建单独的CSS文件,在多个页面中进行使用,从而制作页面风格统一的网页。层叠:通过CSS,可以对一个元素多次设置样式,后面定义的样式将重写前面的样式设置,在浏览器中可以看到最后设置的样式效果。精简HTML代码:通过使用CSS,可以将样式声明单独放到CSS样式表中,减少文件大小,减少加载页面和下载的时间。8.1.2

CSS的定义CSS格式设置规则由选择器和声明两部分组成,选择器是标识已设置格式元素的术语,声明大多数情况下为包含多个声明的代码块,用于定义样式属性。声明又包括属性和值两部分。1.CSS语法CSS基本语法如下:选择器{属性名:属性值;}即selector{properties:value;}2.选择器CSS中的选择器分为标签选择器、类选择器、ID选择器、伪类选择器等,不同选择器的作用也有所不同。目录Contents8.1

CSS概述8.2

创建CSS样式8.3

CSS规则定义8.4

课堂实战8.5

课后练习8.2.1CSS设计器“CSS设计器”面板中可以创建CSS样式及选择器等内容,执行“窗口>CSS设计器”命令,打开“CSS设计器”面板。8.2.2创建CSS样式通过“CSS设计器”面板可以创建内部或外部CSS样式。1.创建新的CSS文件“创建新的CSS文件”选项可以创建新CSS文件并将其附加到文档。2.附加现有的CSS文件用户还可以为不同的网页的HTML元素附加相同外部样式,节省操作时间。3.在页面中定义“在页面中定义”命令可以将CSS文件定义在当前文档中。8.2.3CSS属性CSS属性可以调整网页元素的格式和外观,是CSS样式的重要组成部分。在Dreamweaver软件中,用户可以选中选择器后在“属性”选项组设置CSS属性。该选项组中包括布局、文本、边框和背景4个属性列表。8.2.4实操案例:启乐运动本案例将以启乐运动网页的制作为例,对CSS的样式的创建及应用进行介绍。目录Contents8.1

CSS概述8.2

创建CSS样式8.3

CSS规则定义8.4

课堂实战8.5

课后练习8.3.1类型在“CSS设计器”面板中选中选择器中的CSS规则,在“属性”面板中设置“目标规则”为选中对象,单击“编辑规则”按钮,即可打开“CSS规则定义”对话框。8.3.2背景“背景”选项卡中选项的功能主要是在网页元素后面添加固定的背景颜色或图像。8.3.3区块“区块”选项卡中选项功能主要是定义样式的间距和对齐设置。8.3.4方框网页中的所有元素包括文本、图像等都被看作为包含在方框内。8.3.5边框“边框”选项卡中的选项可用来设置网页元素的边框外观。8.3.6列表“列表”选项卡中包括List-style-type、List-style-type、List-style-position等选项。8.3.7定位“定位”选项卡中的选项包括Position、Visibility、placement、clip等。8.3.8扩展“扩展”选项卡中的选项包括break-before、break-after、Cursor、Filter。8.3.9过渡使用“过渡”选项卡中的选项可将平滑属性变化更改应用于基于CSS的页面元素,以响应触发器事件,如悬停、单击和聚焦。8.3.10实操案例:微景绿植本案例将以微景绿植网页样式的设置为例,对“CSS规则定义”对话框的应用进行介绍。目录Contents8.1

CSS概述8.2

创建CSS样式8.3

CSS规则定义8.4

课堂实战8.5

课后练习8.4课堂实战跃野自行车本案例将以跃野自行车网页的制作为例,介绍CSS样式的应用。目录Contents8.1

CSS概述8.2

创建CSS样式8.3

CSS规则定义8.4

课堂实战8.5

课后练习8.5课后练习1.瑞成文具根据所学内容美化瑞成文具网页,前后对比效果。2.玩偶之家根据所学内容美化玩偶之家网页,前后对比效果。学习进步网页设计与制作案例实战教程第9章Div+CSS网页布局技术网页设计与制作案例实战教程目录Contents9.1

CSS与Div布局基础9.2

CSS布局方法9.3

课堂实战9.4

课后练习9.1.1

什么是Web标准Web标准即网页标准,是指有关于全球资讯网各个方面的定义和说明的正式标准以及技术规范。网页主要由结构、表现和行为三部分组成,对应的标准也分三方面:1.结构结构用于对网页中用到的信息进行分类与整理。结构标准语言主要包括XHTML和XML。2.表现表现用于对信息进行版式、颜色和大小等形式进行控制。表现标准语言主要包括CSS。3.行为行为是指文档内部的模型定义及交互行为的编写,用于编写交互式的文档。行为标准主要包括DOM和ECMAScript。9.1.2

Div概述Div全称为DIVision,即划分,用于在页面中定义一个区域,使用CSS样式控制Div元素的表现效果。Div可以将复杂的网页内容分割成独立的区块,一个Div可以放置一个图片,也可以显示一行文本。简单来讲,Div就是容器,可以存放任何网页显示元素。Div具有以下3个优点:(1)节省页面代码(2)加快网页浏览速度(3)便于网站推广9.1.3创建Div在使用Div布局网页前需要现在网页中创建Div区块,在Dreamweaver中,用户可以在“代码”视图中添加<div></div>标签创建Div,也可以通过执行“插入”命令或通过“插入”面板插入Div。9.1.4实操案例:琳琅首饰本案例将以琳琅首饰网页的制作为例,介绍Div和CSS的应用。目录Contents9.1

CSS与Div布局基础9.2

CSS布局方法9.3

课堂实战9.4

课后练习9.2.1盒子模型盒子模型时CSS样式布局的重要概念,掌握盒子模型及其使用方法,才可以真正地控制页面中的各种元素。盒子模型是指将页面中的各个元素及其周围的空间看成一个盒子,该盒子占据着一定的页面空间。用户可以通过调整盒子的边框和距离等参数,来调节盒子的位置。一个盒子模型由内容(content)、边框(border)、填充(padding)和空白边(margin)这4个部分组成。9.2.2外边距设置margin属性可以设置外边距,margin边界环绕在该元素的content区域四周。若margin的值为0,则margin边界与border边界重合。margin属性接受任何长度单位,可以使用像素、毫米、厘米和em等,也可以设置为auto(自动)。常见做法是为外边距设置长度值,允许使用负值。9.2.3外边距合并外边距合并是指当两个垂直外边距相遇时,他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。在实践中对网页进行布局时,它会造成许多混淆。以下3种情况都有可能出现外边距合并的现象:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上/或下外边距也会发生合并。外边距甚至可以与自身发生合并。假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们也会发生合并。9.2.4内边距设置CSS中的padding属性控制元素的内边距。padding属性定义元素边框与元素内容之间的空白区域,接受长度值或百分比值,但不允许使用负值。若希望所有h1元素的各边都有5像素的内边距,代码描述如下:h1{padding:5px;}9.2.5实操案例:时刻餐厅本案例将练习制作时刻餐厅网页,对Div和CSS的应用进行介绍。目录Contents9.1

CSS与Div布局基础9.2

CSS布局方法9.3

课堂实战9.4

课后练习9.3课堂实战飞扬咖啡本案例将练习制作飞扬咖啡网页,对Div和CSS的创建与应用进行介绍。目录Contents9.1

CSS与Div布局基础9.2

CSS布局方法9.3

课堂实战9.4

课后练习9.4课后练习1.湖江船业根据所学内容制作湖江船业网页。2.安居养老根据所学内容制作安居养老网页。学习进步网页设计与制作案例实战教程第10章表单的应用网页设计与制作案例实战教程目录Contents10.1

使用表单10.2

文本类表单10.3

单选按钮和复选框表单10.4

其他常用表单10.5

课堂实战10.6

课后作业10.1.1

认识表单表单中可以存储文本、密码、单选按钮、复选框、数字以及提交按钮等对象,这些对象也被称为表单对象。10.1.2

基本表单元素创建表单域后,可以在该区域中插入各类表单元素。目录Contents10.1

使用表单10.2

文本类表单10.3

单选按钮和复选框表单10.4

其他常用表单10.5

课堂实战10.6

课后作业10.2.1文本文本可用于接收用户输入的较短的信息,如姓名、电话等。10.2.2密码密码可用于输入需要保密的信息,当用户在密码域中输入文本时,输入的文本将被替换为隐藏符号,以便于保护这些信息。10.2.3文本区域文本区域可用于接收较多的信息。10.2.4实操案例:亿联科技登录页本案例将以亿联科技登录页的制作为例,介绍表单、文本、密码等表单元素。目录Contents10.1

使用表单10.2

文本类表单10.3

单选按钮和复选框表单10.4

其他常用表单10.5

课堂实战10.6

课后作业10.3.1单选按钮和单选按钮组“单选按钮”和“单选按钮组”选项都可以创建单选按钮,区别在于“单选按钮组”可以一次性生成多个单选按钮。1.单选按钮移动鼠标至要添加单选按钮的表单中,执行“插入>表单>单选按钮”命令,即可插入单选按钮。2.单选按钮组“单选按钮组”与“单选按钮”作用类似。移动鼠标至要添加单选按钮组的表单中,执行“插入>表单>单选按钮组”命令,打开“单选按钮组”对话框。在该对话框中设置参数后,单击“确定”按钮即可插入单选按钮组。10.3.2复选框和复选框组“复选框”和“复选框组”可以让用户在网页一组选项中选择多个选项。目录Contents10.1

使用表单10.2

文本类表单10.3

单选按钮和复选框表单10.4

其他常用表单10.5

课堂实战10.6

课后作业10.4.1“提交”和“重置”按钮“提交”按钮可以将表单数据内容提交到服务器。执行“插入>表单>提交”命令即可在表单中添加“提交”按钮。“重置”按钮可以重置表单中输入的信息。执行“插入>表单>重置”命令即可在表单中添加“重置”按钮。10.4.2文件“文件”表单可以实现在网页中上传文件的功能。执行“插入>表单>文件”命令,可以在表单中添加文件域,按F12键在浏览器中测试效果,单击“浏览”按钮将打开“打开”文件夹上传文件。10.4.3选择“选择”表单可以制作下拉列表框,增加选项的延展性。10.4.4实操案例:晴空旅社客房预订页本案例将以晴空旅社客房预定网页的制作为例,介绍文本、单选按钮组、选择等表单的应用。目录Contents10.1

使用表单10.2

文本类表单10.3

单选按钮和复选框表单10.4

其他常用表单10.5

课堂实战10.6

课后作业10.5课堂实战网络安全知识竞赛本案例将以网络安全知识竞赛网页的制作为例,介绍表单元素的应用于设置。目录Contents10.1

使用表单10.2

文本类表单10.3

单选按钮和复选框表单10.4

其他常用表单10.5

课堂实战10.6

课后作业10.6课后作业1.知味餐厅会员注册网页根据所学内容制作知味餐厅会员注册网页。2.新科书画展预约网页根据所学内容制作新科书画展预约网页。学习进步网页设计与制作案例实战教程第11章模板和库网页设计与制作案例实战教程目录Contents11.1

直接创建模板11.2

管理和使用模板11.3

创建和使用库11.4

课堂实战11.5

课后作业11.1.1直接创建模板创建模板时需明确模板所在站点,创建后软件会自动在站点根目录下创建名为Templates的文件夹,所有模板文件均保存在该文件夹中。11.1.2从现有网页中创建模板从现有网页中创建模板可以节省重新制作模板的时间,提高工作效率。11.1.3定义可编辑区域可编辑区域是指模板文件中能够进行编辑的区域。默认情况下,在创建模板时模板中的布局就已被设为锁定区域。若想修改锁定区域,需要重新打开模板文件,对模板内容编辑修改。11.1.4实操案例:酷卡服装本案例将以酷卡服装网页模板的制作为例,介绍模板的创建。目录Contents11.1

直接创建模板11.2

管理和使用模板11.3

创建和使用库11.4

课堂实战11.5

课后作业11.2.1应用模板通过“新建”命令或“资源”面板均可以创建基于模板的网页。1.“新建”命令执行“文件>新建”命令,在打开的“新建文档”对话框中选择“网站模板”选项卡,选择站点中的模板。完成后单击“创建”按钮,即可根据模板新建网页文档。2.“资源”面板新建空白文档,执行“窗口>资源”命令打开“资源”面板,选择“模板”选项卡中的模板,单击“应用”按钮即可在文档中应用模板。11.2.2从模板中分离基于模板创建的网页文档只有定义为可编辑的区域内容可以修改,其他区域是被锁定的,不能修改编辑。若想在不影响模板文档的前提下更改锁定区域,可以将网页从模板中分离。11.2.3更新模板及模板内容页将模板应用至网页制作后,就可以通过更改模板对所有应用该模板的网页进行更新。11.2.4创建嵌套模板在一个模板文件中使用其他模板,就是模板嵌套。在创建嵌套模板(新模板)时,需要先保存被嵌套模板文件(基本模板),然后创建应用基本模板的网页,再将该网页另存为模板。新模板拥有基本模板的可编辑区域,还可以继续添加新的可编辑区域。11.2.5创建可选区域可选区域是在模板中定义的、可以选择是否显示的内容。11.2.6实操案例:应用酷卡服装网页模板本案例将以应用创建的服装网页模板的制作为例,介绍如何应用模板。目录Contents11.1

创建模板11.2

管理和使用模板11.3

创建和使用库11.4

课堂实战11.5

课后作业11.3.1创建库项目用户可以创建空白库项目或将文档<body>部分中的元素创建为库项目。1.基于现有元素创建库项目打开网页文档,选中要创建为库项目的元素,执行“窗口>资源”命令,打开“资源”面板。2.创建空白库项目不选中任何对象的情况下,单击“资源”面板底部的“新建库项目”按钮,即可新建空的库项目。11.3.2插入库项目“库”中的库项目可以很便捷地插入网页文档中使用。11.3.3编辑和更新库项目下面将对库项目的编辑、重命名、删除、更新等操作进行介绍。1.编辑库项目在“资源”面板中选中要编辑的库项目,双击或单击面板底部的“编辑”按钮即可打开库项目文件进行编辑。2.重命名库项目在“资源”面板中单击要修改名称的库项目,使其变为可编辑状态,输入新的名称后按Enter键确认即可。3.删除库项目在“资源”面板中选中要删除的库项目,单击底部的“删除”按钮即可。4.更新库项目执行“工具>库>更新页面”命令,即可打开“更新页面”对话框。目录Contents11.1

创建模板11.2

管理和使用模板11.3

创建和使用库11.4

课堂实战11.5

课后作业11.4课堂实战自然科普本案例将以自然科普网页模板的制作及应用为例,对模板的创建、设置及应用进行介绍。目录Contents11.1

创建模板11.2

管理和使用模板11.3

创建和使用库11.4

课堂实战11.5

课后作业11.5设计走查1.格纹帽业根据所学内容制作格纹帽业网页。2.科力厨具根据所学内容制作科力厨具网页。学习进步网页设计与制作案例实战教程第12章行为的应用网页设计与制作案例实战教程目录Contents12.1

什么是行为12.2

利用行为调节浏览器窗口12.3

利用行为制作图像特效12.4

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论