第1章网页设计基础网页设计与制作案例实战教程全套可编辑PPT课件目录Contents1.1
网页的基本概念1.2
网站制作流程1.3
网页布局与配色1.4
网页设计常用工具1.5
AIGC在网页设计中的应用1.6
课后练习1.1.1
课后练习1.2网站制作流程网站制作一般包括规划与需求分析、网站设计、网站开发、测试、部署与上线、维护与更新等步骤。遵循流程进行操作，可以使网站制作更加轻松合理，减少差错率。1．规划与需求分析2．网站设计3．网站开发4．网站测试5．网站发布6．维护与更新目录Contents1.1
课后练习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.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
课后练习2.4课堂实战本案例将以利农农机站点的制作为例，对站点的创建与应用进行介绍。目录Contents2.1
课后练习2.5课后练习1.酷乐冰屋根据所学内容制作酷乐冰屋网页。2.哎呀宠物根据所学内容制作哎呀宠物网页。学习进步网页设计与制作案例实战教程第3章HTML知识准备网页设计与制作案例实战教程目录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
课后练习3.4课堂实战综合本章所学制作恬逸沙发网页。目录Contents3.1
课后练习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.1输入文本Dreamweaver支持用户直接在文档中输入文本，移动鼠标至需要输入文本的地方输入文字即可。4.2.2导入文本除了直接输入文本外，用户还可以导入外部的文档添加文本信息。打开需要导入文本的网页文件，从“文件”面板中选择Word文档，拖拽至文档窗口中，在弹出的“插入文档”对话框中设置参数。完成后单击“确定”按钮，即可插入文档。目录Contents4.1
课后练习4.5课堂实战每日读书本案例将以每日读书网站首页的制作为例，对网页页面的设计及文本的添加等进行介绍。目录Contents4.1
课后练习4.6课后练习1.福睿斯蔬果根据所学内容制作福睿斯蔬果网页。2.艾森散文根据所学内容制作艾森散文网页。学习进步网页设计与制作案例实战教程第5章图像与多媒体元素网页设计与制作案例实战教程目录Contents5.1
在网页中插入图像5.2
插入多媒体元素5.3
课堂实战5.4
课后练习5.1.1
课后练习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.3课堂实战本案例将以曲乐影音网站首页的制作为例，对网页中图像及多媒体元素的添加进行介绍。目录Contents5.1
课后练习5.5课后练习1.美相图片根据所学内容制作美相图片网页。2.赛克音乐根据所学内容制作赛克音乐网页。学习进步网页设计与制作案例实战教程第6章超链接的应用网页设计与制作案例实战教程目录Contents6.1
超链接概念6.2
管理网页超链接6.3
文本链接6.4
图像链接6.5
锚点链接6.6
课堂实战6.7
课后练习6.1.1
课后练习6.5锚点链接锚点链接是指目标端点位于网页中某个指定位置的超链接。在创建锚点链接时首先需要创建链接的目标端点并为其命名，然后再创建到该锚点的链接。在“文档”窗口中选中要作为锚点的项目，在“属性”面板中为其设置唯一的ID。在“设计”视图中，选中要从其创建链接的文本或图像，在“属性”面板的“链接”文本框中输入数字符号(#)和锚点ID即可。用户也可以选择要从其创建链接的文本或图像，按住“属性”面板的“链接”文本框右侧的“指向文件”按钮拖拽至要链接到的锚点上。目录Contents6.1
课后练习6.6课堂实战本案例将以美家装饰网页的制作为例，介绍网页超链接的应用。目录Contents6.1
课后练习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.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.3.1选择整个表格选中表格后才可以对其进行编辑，常用地选择整个表格的方式有以下4种：插入表格，单击表格上下边框即可选择整个表格。在“代码”视图或“拆分”视图下，选中表格代码，即
课后练习7.5课堂实战春林建筑本案例将以春林建筑网页制作为例，对表格的应用与编辑进行介绍。目录Contents7.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
课后练习8.4课堂实战跃野自行车本案例将以跃野自行车网页的制作为例，介绍CSS样式的应用。目录Contents8.1
课后练习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。9.1.4实操案例：琳琅首饰本案例将以琳琅首饰网页的制作为例，介绍Div和CSS的应用。目录Contents9.1课后练习9.3课堂实战飞扬咖啡本案例将练习制作飞扬咖啡网页，对Div和CSS的创建与应用进行介绍。目录Contents9.1
课后练习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.3.1单选按钮和单选按钮组“单选按钮”和“单选按钮组”选项都可以创建单选按钮，区别在于“单选按钮组”可以一次性生成多个单选按钮。1.单选按钮移动鼠标至要添加单选按钮的表单中，执行“插入>表单>单选按钮”命令，即可插入单选按钮。2.单选按钮组“单选按钮组”与“单选按钮”作用类似。移动鼠标至要添加单选按钮组的表单中，执行“插入>表单>单选按钮组”命令，打开“单选按钮组”对话框。在该对话框中设置参数后，单击“确定”按钮即可插入单选按钮组。10.3.2复选框和复选框组“复选框”和“复选框组”可以让用户在网页一组选项中选择多个选项。目录Contents10.1
课后作业10.4.1“提交”和“重置”按钮“提交”按钮可以将表单数据内容提交到服务器。执行“插入>表单>提交”命令即可在表单中添加“提交”按钮。“重置”按钮可以重置表单中输入的信息。执行“插入>表单>重置”命令即可在表单中添加“重置”按钮。10.4.2文件“文件”表单可以实现在网页中上传文件的功能。执行“插入>表单>文件”命令，可以在表单中添加文件域，按F12键在浏览器中测试效果，单击“浏览”按钮将打开“打开”文件夹上传文件。10.4.3选择“选择”表单可以制作下拉列表框，增加选项的延展性。10.4.4实操案例：晴空旅社客房预订页本案例将以晴空旅社客房预定网页的制作为例，介绍文本、单选按钮组、选择等表单的应用。目录Contents10.1
课后作业10.5课堂实战网络安全知识竞赛本案例将以网络安全知识竞赛网页的制作为例，介绍表单元素的应用于设置。目录Contents10.1
课后作业10.6课后作业1.知味餐厅会员注册网页根据所学内容制作知味餐厅会员注册网页。2.新科书画展预约网页根据所学内容制作新科书画展预约网页。学习进步网页设计与制作案例实战教程第11章模板和库网页设计与制作案例实战教程目录Contents11.1
直接创建模板11.2
管理和使用模板11.3
创建和使用库11.4
课堂实战11.5
创建模板11.2
课后作业11.3.1创建库项目用户可以创建空白库项目或将文档
部分中的元素创建为库项目。1.基于现有元素创建库项目打开网页文档，选中要创建为库项目的元素，执行“窗口>资源”命令，打开“资源”面板。2.创建空白库项目不选中任何对象的情况下，单击“资源”面板底部的“新建库项目”按钮，即可新建空的库项目。11.3.2插入库项目“库”中的库项目可以很便捷地插入网页文档中使用。11.3.3编辑和更新库项目下面将对库项目的编辑、重命名、删除、更新等操作进行介绍。1.编辑库项目在“资源”面板中选中要编辑的库项目，双击或单击面板底部的“编辑”按钮即可打开库项目文件进行编辑。2.重命名库项目在“资源”面板中单击要修改名称的库项目，使其变为可编辑状态，输入新的名称后按Enter键确认即可。3.删除库项目在“资源”面板中选中要删除的库项目，单击底部的“删除”按钮即可。4.更新库项目执行“工具>库>更新页面”命令，即可打开“更新页面”对话框。目录Contents11.1课后作业11.4课堂实战自然科普本案例将以自然科普网页模板的制作及应用为例，对模板的创建、设置及应用进行介绍。目录Contents11.1
课后作业11.5设计走查1.格纹帽业根据所学内容制作格纹帽业网页。2.科力厨具根据所学内容制作科力厨具网页。学习进步网页设计与制作案例实战教程第12章行为的应用网页设计与制作案例实战教程目录Contents12.1