版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
项目六使用CSS和Div网页设计与制作立体化教程（Dreamweaver
CC
2018）（第2版）（微课版）目录Contents任务一美化“圈粉”内容页面任务二制作“圈粉”网站首页实训一美化“车友会年会活动”网页实训二布局“爱尚汽车”首页课后练习本任务将使用CSS美化“show.html”网页，在制作时先新建CSS，再将其应用到“show.html”网页。通过本任务可让用户更加熟练地掌握CSS的各种属性和各属性的作用，以及CSS在网页设计中的相关操作。本任务制作完成后的效果如下图所示。一、任务目标二、相关知识（一）认识CSS1．CSS的功能灵活控制网页中文本的字体、字号、颜色、间距和位置等。随意设置一个文本块的行高和缩进，并能为其添加三维效果的边框。方便定位网页中的任何元素，并为其设置不同的背景颜色和背景图像。精确控制网页中各元素的位置。为网页中的元素设置各种过滤器，从而产生诸如阴影、模糊、透明等效果。与脚本语言结合使用，能使网页中的元素产生各种动态效果。二、相关知识（一）认识CSS2．CSS的特点容易管理的源代码提高读取网页的速度使用方式多样共享样式设定冲突处理二、相关知识（一）认识CSS3．CSS语法规则CSS语法规则由两部分组成：选择器和声明（大多数情况下为包含多个声明的代码块）。选择器是标识已设置格式元素的术语（如p、h1、类名称或ID），声明则用于定义样式属性。右图所示的代码，title_1是选择器，介于大括号({})之间的所有内容都是声明。声明由两部分组成：属性（如font-family）和值（如“仿宋”）。二、相关知识（一）认识CSS4．CSS样式的定义类型CSS样式位于网页代码的<head></head>标签之间，其作用范围由符合CSS规范的文本进行定义。CSS样式有以下4种类型，不同类型的CSS样式作用范围不同。类ID二、相关知识（一）认识CSS4．CSS样式的定义类型标签复合内容二、相关知识（二）CSS设计器Dreamweaver
CC
2018中的
CSS设计器是一个综合性面板，可以可视化地创建或附加样式表、媒体查询、选择器以及设置CSS属性。在Dreamweaver
CC
2018中，可以通过选择【窗口】/【CSS设计器】菜单命令或按【Shift+F11】组合键，打开“CSS设计器”面板，如右图所示。二、相关知识（二）CSS设计器1．创建和附加CSS文件在Dreamweaver
CC
2018中，可以创建新的CSS文件（见左图）、使用现有的CSS文件（见中图），
也可以直接在网页中定义CSS样式。其具体操作为：在“CSS设计器”面板中的“源”列表框中单击“添加CSS源”按钮，在打开的下拉列表中选择相应的选项，如右图所示。二、相关知识（二）CSS设计器2．定义媒体查询如今的网页开发需要适应更多的设备，如PC端、移动端。而各种设备的页面尺寸是不一样的，这就加大了网页的制作难度，而运用CSS的定义媒体查询功能可以解决这一问题。左图所示的代码表示为：当设备分辨率在768px~1200px之间，则“box”类按@media中的CSS样式显示，否则按前一个“box”类的CSS样式显示，如右图所示。二、相关知识（二）CSS设计器3．定义
CSS选择器在“CSS设计器”中定义选择器的操作方法为：选择“源”列表框中的某个CSS源或“@媒体”列表框中的某个媒体查询，然后在“选择器”列表框中单击按钮，在列表文本框中输入类或ID名称，如右图所示。二、相关知识（三）设置CSS样式的属性1．文本样式的属性在“CSS设计器”面板的“属性”列表框中单击“文本”按钮，则可在“属性”列表框中显示关于文本的属性及属性值，如右图所示。此时可方便、快速地定义各文本的属性样式，同时也可避免在Deamweaver中设置文本字体和字号后，在浏览器中的预览效果时与网页文档中显示效果不一致的问题。二、相关知识（三）设置CSS样式的属性2．边框样式的属性在“CSS设计器”面板的“属性”列表框中单击“边框”按钮，则可在“属性”列表框中显示关于边框的属性及属性值，如左图所示。二、相关知识（三）设置CSS样式的属性3．背景样式的属性在“CSS设计器”面板的“属性”列
表框中单击“背景”按钮，则可在“属性”列表框中显示关于背景的属性及属性值，
如右图所示。二、相关知识（四）CSS过渡效果的应用1．新建CSS过渡效果在Dreamweaver
CC
2018中新建过渡效果的操作方法为：选择【窗口】/【CSS过渡效果】菜单命令，打开“CSS过渡效果”面板，单击“新建过渡效果”按钮，在打开的“新建过渡效果”对话框进行相关设置，如左图所示，单击“创建过渡效果”按钮完成创建，在“CSS过渡效果”面板中可查看添加的CSS过渡效果，如右图所示。二、相关知识（四）CSS过渡效果的应用1．新建CSS过渡效果在Dreamweaver
CC
2018中创建好CSS过渡效果后，若需要修改或添加其他过渡效果，则可使用“CSS过渡效果”面板来编辑CSS过渡效果的属性，其方法有以下两种。在“CSS过渡效果”面板中，选择需要编辑的CSS过渡效果选项，然
后双击鼠标左键，打开“编辑过渡效果”对话框，在该对话框中可以修改过渡效果的各种属性及过渡样式。通过双击编辑通过按钮编辑在“CSS过渡效果”面板中，选择需要编辑的CSS过渡效果选项，然后单击“编辑所选过渡效果”按钮，在打开的“编辑过渡效果”对话框中可以编辑过渡效果的属性。二、相关知识（四）CSS过渡效果的应用3．删除CSS过渡效果如果不需要某个CSS过渡效果，可直接删除。其操作方法为：在Dreamweaver
CC
2018中的“CSS过渡效果”面板中选择需要删除的过渡效果，然后单击“删除选定的过渡效果”按钮，在打开的“删除过渡效果”对话框中单击按钮即可，如下图所示。二、相关知识（五）应用CSS样式1．使用“HTML属性”面板其方法是：选择要应用CSS样式的网页元素后，在“HTML属性”面板的“类”下拉列表框中选择需要应用的CSS样式选项，如左图所示。预览效果如右图所示。二、相关知识（五）应用CSS样式2．使用“CSS属性”面板其方法是：选择要应用CSS样式的网页元素后，在“属性”面板的“目标规则”下拉列表框中选择需要应用的CSS样式选项，如左图所示。预览效果如右图所示。三、任务实施（一）创建CSS样式下面将在打开的网页文档中创建CSS样式，以美化页面效果，具体操作如下。打开网页文档设置“tr
td
p”标签属性三、任务实施（一）创建CSS样式设置“titile_l”类的属性设置“title_r”类的属性三、任务实施（一）创建CSS样式设置“title_2”类的属性设置“title_3”类的属性三、任务实施（一）创建CSS样式设置“title_4”类的属性设置“a:link”属性三、任务实施（一）创建CSS样式设置“a:hover”属性设置“a:visited”属性三、任务实施（二）应用CSS样式下面应用创建好的CSS样式，对页面中的文本进行美化，具体操作如下。应用title_l类应用“title_r”类三、任务实施（二）应用CSS样式设置单元格背景样式设置菜单超链接三、任务实施（二）应用CSS样式设置单元格背景样式设置栏目标题样式三、任务实施（二）应用CSS样式设置其他栏目标题样式目录Contents任务一美化“圈粉”内容页面任务二制作“圈粉”网站首页实训一美化“车友会年会活动”网页实训二布局“爱尚汽车”首页课后练习本任务为“圈粉”网站制作首页，首先在新建的空白区域插入Div进行布局，然后为Div标签添加CSS样式，对添加的标签进行定位并设置相应的属性。本任务制作完成后的最终效果如下图所示。一、任务目标二、相关知识（一）认识Div1．插入Div在Dreamweaver
CC
2018中能够快速地插入Div并为它应用现有的CSS样式。其操作方法为：将插入点定位到在“文档”窗口中要插入D
i
v标签的位置，然后选择【插入】/【HTML】/【Div】菜单命令或者在“插入”面板的HTML类别中单击“Div”按钮，在打开的“插入Div”对话框中设置“插入”“Class”或“ID”参数，单击即可，如下图所示。二、相关知识（一）认识Div2．编辑Div插入Div之后，可以使用“CSS设计器”查看和编辑Div的CSS规则，如下图所示，也可以在Div中添加内容，其操作方法是：将插入点定位到Div中，然后直接插入文本、图像等网页元素。二、相关知识Div+CSS盒子模型是根据CSS规则中涉及的margin（边界）、border（边框）、padding（填充）、content（内容）来建立网页布局的一种方法，右图图所示即为一个标准的Div+CSS布局结构，左侧
为代码，右侧为效果图。（二）认识Div+CSS盒子模型2．编辑Div二、相关知识（三）Div+CSS定位定位是网页设计的难点，不清晰的定位可能会影响网页效果实现。要正确使用CSS定位，需要了解如下4个方面。1．块模型4．浮动和清除模型2．文档流模型3．相对定位和绝对定位模型二、相关知识（四）使用“CSS设计器”布局网页使用Div+CSS布局网页时，既可以在代码视图中直接输入代码，也可以通过“CSS设计器”面板快速布局网页。在“CSS设计器”面板的“属性”列表框中单击“布局”按钮，“属性”列表框中将显示关于布局的属性及属性值，如右图所示。三、任务实施（一）创建CSS文件本任务将使用“CSS设计器”创建CSS文件，并通过代码视图创建用于布局和美化页面的代码，具体操作如下。新建html文档创建新的CSS文件三、任务实施（一）创建CSS文件创建body标签三、任务实施（一）创建CSS文件页面美化的属性代码中间内容布局和列表美化的属性代码三、任务实施（一）创建CSS文件底部布局的属性代码菜单列表样式代码搜索布局和美化属性代码三、任务实施（二）使用Div+CSS布局页面下面在页面中使用Div+CSS布局页面并美化内容，具体操作如下。设置Div的CSS类为页面插入Div布局添加logo标签和文本三、任务实施（二）使用Div+CSS布局页面添加菜单项目列表插入clr
<div>标签三、任务实施（二）使用Div+CSS布局页面插入并布局文本插入文本三、任务实施（二）使用Div+CSS布局页面插入并布局文本插入文本和超链接文本三、任务实施（二）使用Div+CSS布局页面复制和粘贴代码复制代码并修改内容三、任务实施（二）使用Div+CSS布局页面复制菜单列表添加页脚内容三、任务实施（二）使用Div+CSS布局页面预览网页效果目录Contents任务一美化“圈粉”内容页面任务二制作“圈粉”网站首页实训一美化“车友会年会活动”网页实训二布局“爱尚汽车”首页课后练习实训要求美化“车友会年会活动”网页，要求使用CSS定义文本样式，通过本实训掌握使用CSS美化网页的方法。实训一美化“车友会年会活动”网页在打开的素材网页中创建CSS，并应用CSS样式对网页中的文本进行美化。本实训的参考效果如下图所示。实训思路实训一美化“车友会年会活动”网页步骤提示打开“advert.html”网页文件，在“CSS设计器”中新建基于页面中定义的CSS。新建title类、title_1类和title_2类，设置title类的“color”“fontfa
m
i
l
y”“s
i
z
e”“a
lign”分别为“#31
2
C
5A”“方正琥珀简体”“2
8
p
x”“c
e
n
t
e
r”，t
i
l
t
l
e
_
1类的“c
o
l
o
r”“fo
n
t-f
a
m
i
l
y”“s
i
z
e”分别为“#312C5A”“黑体”“20px”，title_2类的“color”“font-family”“size”“align”分别为“#5A5A5A”“仿宋”“20px”“right”。新建超链接a:link，分别设置“color”“font-family”“size”“decoration”为
“#5A5A5A”“黑体”“18px”“none”。新建ol
li标签，分别设置“color、font-family”为“#312C5A”“华为新魏”，新建p标签，分别设置“color”“font-family”“size”“line-height”“text-indent”为“#5A5A5A”“仿宋”
“16px”“1.5em”“28px”。在设计视图中分别选择主标题和副标题文本，在“HTML属性”面板中选择对应的类，为文本应用
CSS样式。选择最后一行日期文本，在“HTML属性”面板中选择“类”为“title_2”。目录Contents任务一美化“圈粉”内容页面任务二制作“圈粉”网站首页实训一美化“车友会年会活动”网页课后练习实训二布局“爱尚汽车”首页实训要求制作“爱尚汽车”网站首页，通过实训练习创建
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论