网页设计与制作-(6)_第1页
网页设计与制作-(6)_第2页
网页设计与制作-(6)_第3页
网页设计与制作-(6)_第4页
网页设计与制作-(6)_第5页
已阅读5页,还剩58页未读, 继续免费阅读

下载本文档

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

kok电子竞技:文档简介

1、模块六 高效制作更为精致的网页任务引领 产品说明书 散文集项目渐近 网站项目“我心飞扬”之 第六阶段“美化并高效制作各页面”拓展训练 “流行文学作品荟萃” 任务引领 “产品说明书” 网页打开后,将显示“产品说明书”界面。 制作演示相关知识 1.理解样式表在当今的网页中,几乎很多网页都使用了CSS样式表,有了CSS的控制,网页便会给人一种赏心悦目的感觉,字体的色彩变化也使主页变得更加生动活泼。相关知识(1)样式表的概念 CSS英文全称“Cascading Style Sheets”,中文全称为“层叠样式表”,更多的人则把它简称为“样式表”,以下简称为“CSS样式”。它是一组格式设置规则,用于控制

2、Web页面内容的外观,通过使用CSS样式设置页面的格式,可将页面的内容与表示形式分离开。相关知识(2)理解样式表的标记 通常情况下,CSS的描述部分是由三部分组成的,分别是选择器、属性和属性值。 基本语法 选择器 属性: 属性值; “选择器”相当于调用的标识,“属性”和“属性值”则是说明想要描述的是哪一个属性,该属性的值为多少。相关知识(3)样式表的种类 按照选择器分,CSS最常用的种类有四种:HTML标签选择器、CLASS类选择器、ID类选择器和伪元素选择器。相关知识 HTML标签选择器 顾名思议,HTML标签选择器是直接将HTML标签作为选择器,可以是p、h1、dl、strong等HTML

3、标签。示例代码如下:h2 color: orange; h4 color: green; p font-weight:bold; 相关知识 CLASS类选择器 使用HTML标签的CLASS属性引入CSS中定义的样式规则的名字,称为CLASS类选择器,CLASS属性指定的样式名字必须是以“.”开头。示例代码如下:相关知识 在页面中使用类选择器:/在两列上使用类选择器方式来设置样式相关知识 ID类选择器 ID选择器的使用方法跟class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强(仅将该样式应用到具有相同ID的HTML元素)。示例代码如下:相关知识ID选择器

4、1ID选择器2相关知识 伪类选择器 伪类和伪元素是两种有意思的选择器,之所以称“伪”,因为它们实际上并不存在于源文档或者文档树中,但是它们又确实可以显示出效果。CSS中最常用的四个伪类选择器,分别是:链接 a:link 已访问过的链接 a:visited鼠标停在上方时 a:hover单击鼠标时 a : active。 相关知识(4)在哪儿建立样式表 通常情况下,CSS样式表在HTML中有三个位置,对应的名称分别是内联样式表(Inline Style Sheet)、嵌入样式表(Internal Style Sheet)和外部样式表(External Style Sheet)。相关知识 内联样式表

5、(Inline Style Sheet) HTML标签直接使用style属性,称为内联样式(Inline Style Sheet)。它适用于只需要简单地将一些样式应用于某个独立的元素的情况,不需要另设CSS样式段。 基本语法 内容 示例代码如下: 内联样式表(Inline Style) 相关知识 嵌入样式表(Internal Style Sheet) 嵌入样式是在标签内添加标签对儿,在标签对内定义需要的样式,作用于整个页面。 基本语法 .相关知识 外部样式表 (External Style Sheet) 顾名思义,外部样式表是个独立文件,一般后缀为.css,当某文档需要引用外部样式表时,将外部

6、样式表的链接在中说明即可。 基本语法 相关知识(5)在Dreamweaver 中制作样式表的方法 打开CSS样式面板添加CSS样式。选择“窗口”菜单下“CSS样式”命令即可,如图所示。相关知识CSS样式面板 添加CSS样式选择器类型相关知识 2.利用用户自定义样式表改变文字属性(1)用户自定义文本属性的type选项组 打开网页,在“样式表”面板中单击新建图标,弹出“新建CSS规则”对话框,设置样式的名称为“ziti”,在“选择器类型”中选择“类(可应用与任何HTML元素)”,在“规则定义”中选择“仅限该文档”如图所示。相关知识新建CSS样式 设置type选项 相关知识选中网页中的文字,在“属性

7、”面板“目标规则”中选择“ziti”样式,如图。相关知识(2)根据自定义的文字属性一并修改文章段落 打开网页,在“样式表”面板中单击新建图标,弹出“新建CSS规则”对话框,设置样式的名称为“wz”,在“选择器类型”中选择“类(可应用与任何HTML元素)”,在“规则定义”中选择“仅限该文档”。 在选项“类型”中设置“Font-size”字体大小为“12px”,“Line-height”行高为“20px”,在“区块”中设置“Text-indent”文字缩进为“2ems”,如图所示。相关知识设置“类型” 设置区块 相关知识 3.利用用户自定义样式表修改行间距打开网页,在“样式表”面板中单击新建图标,

8、弹出“新建CSS规则”对话框,设置样式的名称为“hg”,在“选择器类型”中选择“类(可应用与任何HTML元素)”,在“规则定义”中选择“仅限该文档”。 在选项“类型”中设置“Font-size”字体大小为“12px”,“Line-height”行高为“25px”,如图所示。相关知识设置样式 相关知识 4.利用有关链接的样式表修改链接的格式(1)取消建立链接的文本下划线打开带有超级链接的网页,在“样式表”面板中单击新建图标,弹出“新建CSS规则”对话框,在“选择器类型”中选择“标签(重新定义HTML元素)”,在“选择器名称”中选择“a”,在“规则定义”中选择“仅限该文档”如图所示。相关知识新建样

9、式设置样式 相关知识(2)在鼠标悬放超链接时改变链接颜色接着上面的操作继续,新建CSS样式,在“选择器类型”中选择“复合内容(基于选择的内容)”,在“选择器名称”中选择“a:hover”,在“规则定义”中选择“仅限该文档”如图所示。相关知识新建样式 设置样式 相关知识 5.利用用户自定义样式表制作图标(1)设置列表项目格式的list选项组 打开一个带有列表的网页,在“样式表”面板中单击新建图标,弹出“新建CSS规则”对话框,在“选择器类型”中选择“类(可应用于任何HTML元素)”,在“选择器名称”中输入“list”,在“规则定义”中选择“仅限该文档”。 单击“确定”按钮后,弹出“.list的C

10、SS规则定义”对话框,在选项“列表”中设置List-style-type为“upper-roman”,如图所示。相关知识设置list选项组 相关知识(2)利用漂亮图标编排列表项目 重新编辑.list的CSS规则。在“CSS样式”面板中,选择.list规则,单击“编辑样式”按钮,弹出“.list的CSS规则定义”对话框,在“列表”项中,设置“List-style-type”为“none”,设置“List-style-image”为设置的图片,如图所示。 单击“确定”按钮后,网页文档就发生了编号,效果如图所示。相关知识设置列表项目图标 自定义项目图标效果 相关知识 6.利用用户自定义样式表固定背景

11、图像的位置(1)利用样式表设置背景图像打开一个网页,新建CSS样式,在“选择器类型”中选择“标签(重新定义HTML元素)”,在“选择器名称”中选择“body:hover”,在“规则定义”中选择“仅限该文档”,选择“背景”选项,设置“Background-image”为需要的图片即可。相关知识(2)在指定位置只显示一张背景图像 接着前面的操作,在“CSS样式”面板中,选择body规则,单击“编辑样式”按钮,设置“Background-repeat”为“no-repeat”,设置“Background-position(X)”为“center”,设置“Background-position(Y)”

12、为“center”,如图所示。在浏览器中预览网页效果,可以发现,背景图像在指定位置只显示一张不重复的图像。相关知识Body的规则定义 相关知识(3)固定背景图像,不让它滚动 继续前面的操作,在“CSS样式”面板中,选择body规则,单击“编辑样式”)按钮,设置“Background-attachment”为“fixed”,在浏览器中预览网页效果,就会发现背景图像不滚动了。任务引领 “散文集” 网页打开后,将显示“散文集”界面。制作演示相关知识 1.运用保存素材的库库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素的方法,这些元素称为库项目,可以在库中存储各种各样的页面元素,如图像、表

13、格、声音和flash文件等。 使用库,就不必频繁地改动网站,可以通过改动库更新所有采用库的网页,不用一个一个的修改网页元素或者重新制作网页。相关知识 2.运用保存在库中的项目(1)利用保存在库中的项目编辑网页文档 前面任务二中已经详细讲述了库项目的建立过程,这里就不详细说明了。相关知识(2)修改登录到库中的项目 首先,选择“窗口”“资源”菜单,打开“资源”面板,选择面板左侧的“库”类别。单击库项目面板中的“logo”,这时库项目的预览出现在“资源”面板的顶部。双击库项目或者单击“资源”面板底部的“编辑”按钮,这时就会打开一个标题为“logo.lbi”的编辑库项目的窗口,如图所示。相关知识 编辑

14、库项目 相关知识对库项目进行编辑,把logo图片换成另外一张图片,保存库项目时会弹出“更新库项目”对话框,如图所示。“更新库项目”对话框中列出了使用该库项目的所有文件,可以单击“更新”按钮更新使用该项目的所有文档。更新完成后弹出“更新页面”对话框,如图所示。相关知识“更新库项目”对话框 “更新页对话框面” 相关知识 3.利用模板功能批量制作网页 (1)制作模板文档,设置可编辑区域 选择“文件”“新建”菜单,选择“空模板”类别下的“HTML模板”,如图所示。相关知识新建一个空模板 相关知识选择“文件”“保存菜单,保存模板,此时会弹出一个对话框,如图所示。选好对应的站点,最后命名,如图所示。模板保

15、存后可以在站点文件夹的“Templates”子文件夹下找到刚才做好的模板,扩展名为.dwt。相关知识保存模板时弹出的对话框 保存模板 相关知识 在模板上插入一个3行1列的表格,表格的宽度设为860像素,并且居中。在第一行插入一个2行1列的嵌套表格,插入对应的图片“logo.jpg”和“menu.jpg”;在最后一行插入“bottom.jpg”。 相关知识编辑模板 相关知识最后,选中要插入可编辑区域的单元格,单击“常用”快捷栏的“模板”按钮,在弹出的菜单中选择“可编辑区域”命令,如图所示。相关知识 弹出“新建可编辑区域”对话框,在“名称”文本框中输入“content”,单击“确定”按钮即可,如图

16、所示。相关知识(2)利用已制作好的模板文档新建网页文档 选择“文件”“新建”菜单,弹出“新建文档”对话框,如图所示,单击“创建”按钮就可以了。相关知识“新建文档”对话框 相关知识(3)修改模板文档 打开“资源”面板,单击“模板”按钮,选中“index”模板,双击就可以修改模板页面了,如图所示。修改保存后,会弹出一个“更新模板文件”对话框,如图所示,单击“更新”按钮即自动将所有由此模板创建的网页自动更新为新模板的样式。 以后还可根据需要,选择 “修改”“模板”菜单下的“更新当前页”或者“更新页面”选项来手动更新某网页。相关知识编辑模板 模板按钮“更新模板文件”对话框 项目渐近 网站项目“我心飞扬”之第六阶段美化并高效制作各页面制作演示 操作要点(1)创建库项目;(2)创建模板文件;(3)使用模板套用之前创建的各网页文件。拓展训练 “流行文学作品荟萃”拓展训练 “流行文学作品荟萃”嵌套表格THANKS!

温馨提示

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

kok电子竞技:最新文档

评论

0/150

提交评论