电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目八.docx
- 文档编号:20141767
- 上传时间:2023-04-25
- 格式:DOCX
- 页数:20
- 大小:3.33MB
电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目八.docx
《电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目八.docx》由会员分享,可在线阅读,更多相关《电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目八.docx(20页珍藏版)》请在冰豆网上搜索。
电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目八
课程教案
授课内容
项目八制作茶文化网站——应用Div+CSS技术布局网页
授课班级
授课学时
16课时
教学方法与手段
讲授法、演示法、讨论法。
多媒体教学
项目内容
本项目的工作是为某茶文化公司建设公司网站,要求网站能充分展现中华茶文化的悠久历史,加大对中国茶文化的宣传。
网站的设计要求有:
网站涉及较多有关茶的各类资讯,应便于查询检索;站内图片清晰度要高,并且要有美感。
按照公司提出的要求,经过分析,要完成好本次任务,应该采用近年来流行的“Div+CSS”技术来布局网页。
在网页设计领域,Web标准的呼声越来越高。
简单来说,要使网站符合Web标准,就要使用“Div+CSS”技术来布局网页。
本任务通过使用“Div+CSS”技术构建茶文化网站,介绍了“Div+CSS”技术在实际网页制作中的应用。
教学目标
学生通过本项目的学习,能:
1、了解Web标准的概念
2、熟练掌握使用“Div+CSS”技术构建网页的方法
教学重点与难点
教学重点:
熟悉“Div+CSS”技术
教学难点:
使用“Div+CSS”技术构建网页
教学过程设计
项目效果
【任务】制作网站首页和子页——使用Div+CSS技术制作网页
(一)什么是Web标准
Web标准是由W3C和其他标准化组织制定的一套规范,包括XHTML、JavaScript及CSS等一系列标准,其目的在于创建一个统一的用于Web表现层的技术标准,以便于通过不同浏览器或终端设备(计算机、手机等)向最终用户展示信息内容。
从狭义上讲,Web标准就是采用“Div+CSS”代码进行网站建设,现在“Div+CSS”俨然成了标准化的代名词。
但实际上,采用“Div+CSS”代码制作的网站并不一定符合Web标准,这与对“Div+CSS”代码应用的熟练程度有很大关系。
(二)Web标准的构成
Web标准由结构(Structure)、表现(Presentation)和行为(Behavior)三部分组成:
1.结构
结构技术用于对网页中用到的信息(文本、图像、动画等)进行分类和整理,目前用于结构化设计的Web标准技术主要是XHTML。
2.表现
表现技术用于对已被结构化的信息进行显示上的控制,包括位置、颜色、字体、大小等形式控制。
目前用于表现设计的Web标准技术就是CSS。
W3C创建CSS的目的是用CSS来控制整个网页的布局,与XHTML所实现的结构完全分离。
简单来说就是表现与内容完全分离,使站点的维护更加容易。
这也正是“Div+CSS”布局的一大特点。
3.行为
行为是指对整个文档的一个模型定义和交互行为的编写。
目前用于行为设计的Web标准技术主要有下面两个。
●DOM(DocumentObjectModel):
文档对象模型,相当于浏览器与内容结构之间的一个接口。
它定义了访问和处理HTML文档的标准方法,把网页和脚本以及其他的编程语言联系起来。
●ECMAScript(JavaScript的扩展脚本语言):
由CMA(ComputerManufacturersAssociation)制定的脚本语言(JavaScript),用于实现网页对象的交互操作。
(三)认识Div
Div全称Division,意为“区分”。
Div的使用方法与其他标签一样。
如果单独使用Div而不加CSS,则它在网页中的效果和段落标记“
</p>”差不多。
Div是用来为XHTML文档中的块内容设置结构和背景属性的元素。
它相当于一个容器,由起始标签
在它里面可以内嵌表格(table)、文本(text)等其他XHTML代码。
其中所包含的元素特性由Div标签的属性来控制,或使用样式表格式化这个块来控制。
XHTML中可以作为容器的标签有很多,相比之下,Div除了可以作为容器,还具有一个特有的优点,即不带有任何原始属性。
例如,P标签为段落属性,使用它作为容器就会导致放入P标签的内容与前后段落之间出现一个空行的间隔,而用Div就不会出现这种情况,上图所示为使用Div作为容器的效果,下图所示为使用P标签作为容器的效果。
可以很明显地看出,P标签内的内容与上下行之间产生一个空行的间距。
(四)Div+CSS布局的优缺点
1.优点
(1)CSS的优势体现在它简洁的代码上。
对于一个大型网站来说,可以节省大
量带宽。
而简洁的代码使得有效关键字在网页总代码中所占的比例提高,因此使用“Div+CSS”制作的符合Web标准的网站具有容易被搜索引擎搜索到的优势。
(2)使用“Div+CSS”技术制作的网站改版更加方便简单,很多问题只需要改变CSS而不需要改动程序。
(3)可以一次设计,多处发布。
设计的作品不仅可以用于Web浏览器,还可以发布在其他设备或软件上,如PowerPoint。
(4)可以更好、更轻松地控制网页布局。
(5)将设计部分剥离出来,放在一个单独的样式表文件中,可以减少网页无效的可能性。
(6)布局灵活性大。
相比较而言,传统的表格布局只能遵循table、tr、td的格式,而Div可以遵循div、ul(无序列表)、li(列表内容)格式,也可以遵循ol(有序列表)、li格式,还可以遵循ul、li……格式,不过最好有序书写。
(7)如果对JavaScript比较精通,可以不必去写ID,而用class就可以了。
当客户端程序员写完程序后需要调整时,可以再利用它的ID进行控制。
(8)代码更简洁。
在使用表格布局时,往往会生成很多垃圾代码,修饰性的样式和布局代码混合在一起,很不直观。
(9)以前一些必须通过图片转换才能实现的功能,现在只用CSS就可以轻松实现,从而加快了网页的下载速度。
2.缺点
尽管“Div+CSS”技术具有一定的优势,不过其存在的问题也比较明显,主要表现在以下几个方面:
●对于CSS的高度依赖,使得网页设计变得比较复杂。
●CSS文件异常将会影响整个网站的正常显示。
●对于用“Div+CSS”技术制作的网站,非常容易出现浏览器兼容性问题。
●“Div+CSS”技术对搜索引擎优化与否,取决于网页设计者的专业水平而不是Div+CSS技术本身。
(五)绝对定位与相对定位
1.绝对定位
绝对定位在CSS中的写法是“position:
absolute;”。
其表达的意思是参照浏览器的左上角,配合top、right、bottom、left(上、右、下、左)值来定位元素,如下CSS代码:
#lay{
position:
absolute;
left:
5px;
top:
5px;}
它表示应用#lay样式的对象为绝对定位模式,它将永远距离浏览器窗口左边框5px,上边框5px。
2.相对定位
相对定位在CSS中的写法是“position:
relative;”。
其表达的意思是以父级(它所在的容器)的坐标原点为坐标原点。
无父级则以body的坐标原点为坐标原点,配合上、右、下、左(TRBL)进行定位,当父级内有padding等CSS属性时,当前级的坐标原点则参照父级内容区的坐标原点进行定位。
有时还要使用“z.index”属性来设定容器的上下关系,数值范围是自然数,数值越大,容器位置越靠上。
但是需要注意的是,父子关系是无法用“z.index”属性来设定上下关系的,一定是子级在上,父级在下。
(六)浮动定位
浮动定位在CSS中用“float”属性来表示。
当“float”值为“Bone”时,表示对象不浮动;为“left”时,表示对象向左浮动;为“right”时,表示对象向右浮动。
如果使用浮动定位方式,为Div中的所有列都加上“float:
left”属性,那么它们会挨个向左排列。
如果让一个元素浮动,它会往右或者往左浮动直至遇到容器的边缘。
如果向同一方向再浮动一个元素,它会浮动直至碰到前一个浮动元素的边缘。
(七)插入Div标签
Div标签与表格、图像等网页对象的插入方法类似,所不同的是,在插入Div标签的同时可以为其设置样式。
步骤1 首先在文档页面上要插入Div标签的位置单击,以确定插入点位置。
步骤2 将“常用”插入栏切换至“布局”插入栏,并单击其中的“插入Div标签”按钮,打开“插入Div标签”对话框。
设置各项参数后,单击“确定”按钮,即可在插入点所在位置插入Div标签。
【任务实施】
在学习了“Div+CSS”技术的相关知识后,下面通过制作一个使用“Div+CSS”技术制作的茶文化网站来学习其在实际网页制作中的应用。
(一)制作网站首页
1.制作网页上部
步骤1 将本项目素材中的“tea”文件夹拷贝至本地磁盘,然后在Dreamweaver中定义站点“tea”。
步骤2 在站点“tea”中新建文档并重命名为“index.html”。
步骤3 在“文件”面板中双击打开新建的文档,在文档编辑窗口中定位插入
点,然后将“插入”栏切换至“布局”栏,并单击其中的“插入Div标签”按钮。
步骤4 打开“插入Div标签”对话框,在“ID”编辑框中输入ID名(此处为“top”),然后单击“新建CSS样式”按钮。
步骤5 打开“新建CSS规则”对话框,选择器类型默认为“高级”,选择器名为“#top”,在“定义在”列表区选择“新建样式表文件”,然后单击“确定”按钮。
步骤6 打开“保存样式表文件为”对话框,在“保存在”下拉列表中选择网站根文件夹,在文件名编辑框中输入文件名(此处为“s1”),然后单击“保存”按钮。
步骤7 打开“#top的CSS规则定义”对话框,在左侧的“分类”列表中选择“方框”,设置“宽”为“1000”像素,然后单击“确定”按钮。
步骤8 回到“插入Div标签”对话框,单击“确定”按钮,插入Div标签。
切换至“常用”插入栏,单击“图像”按钮。
步骤9 打开“选择图像源文件”对话框,在“查找范围”下拉列表中选择图像所在文件夹(此处为网站根文件夹下的“images”文件夹),在文件列表中选择图像文件“main_01.jpg”,然后单击“确定”按钮。
步骤10 插入图像,并将其上方的文本删除,效果如图所示。
步骤11 单击图像,然后按向右方向键,将插入点置于图像后,参照前面的方法插入其余图片,效果如图所示。
2.制作网页中部
步骤1 接着上面的操作,为确保Div位置的准确性,单击“文档”工具栏中的“拆分”按钮,在文档窗口上方打开代码视图,对照代码进行后面的操作。
步骤2 首先将插入点定位在前面插入的ID为top的Div内,然后单击“标签选择器”中的“div#top”,选中整个Div。
步骤3 按键盘上的向右方向键,将插入点置于Div后,然后单击“布局”插入栏中的“插入Div标签”按钮,如图所示。
步骤4 打开“插入Div标签”对话框,在“ID”编辑框中输入ID名“content”,然后单击“新建CSS样式”按钮。
步骤5 打开“新建CSS规则”对话框,“选择器类型”默认为“高级”,选择器名为“#content”,在“定义在”列表区选择“s1.css”,然后单击“确定”按钮。
步骤6 打开“#content的CSS规则定义”对话框,在“分类”列表中选择“背景”,然后设置背景颜色为白色“#FFFFFF”。
步骤7 在“分类”列表中选择“方框”,设置“宽”为1000像素,“高”为140像素,然后单击“确定”按钮,插入ID为“content”的Div。
步骤8 参照前面的方法,对照代码将插入点置于Div内,在其中嵌套一个ID为“news”的Div,并打开“#news的CSS规则定义”对话框。
步骤9 在“分类”列表中选择“方框”,设置“宽”为362像素,“浮动”为左对齐,然后单击“确定”按钮。
步骤10 在ID为“news”的Div中插入图像“main_05.jpg”,并将其中的文本删除。
步骤11 对照代码将插入点置于图片后方,然后单击“插入Div标签”按钮,在ID为“news”的Div中嵌套一个ID为“newscontent”的Div,并打开“#newscontent的CSS规则定义”对话框。
设置“字体”为宋体,“大小”为12像素,“行高”为20像素,颜色为灰色“#999999”。
步骤12 在“分类”列表中选择“区块”,然后在“文本对齐”下拉列表中选择“左对齐”。
步骤13 在“分类”列表中选择“方框”,然后设置“宽”为362像素。
步骤14 在“分类”列表中选择“列表”,然后设置“类型”为“方块”,“位置”为“外”,最后单击“确定”按钮。
步骤15 将ID为“newscontent”的Div中文本删除后输入新文本,并将这些文本分为不同的段落。
之后选中文本,单击“属性”面板上的“项目列表”按钮,Div中的文本将应用前面设置的列表样式。
步骤16 对照代码将插入点置于ID为“news”的Div后,继续在ID为“content”的Div中嵌套一个ID为“center”的Div,并打开“#center的CSS规则定义”对话框。
在“分类”列表中选择“方框”,设置“宽”为315像素,“浮动”为左对齐。
步骤17 在ID为“center”的Div中插入图像“main_06.jpg”,并将其中的文本删除。
步骤18 将插入点置于ID为“center”的Div后,继续嵌套ID为“right”的Div,并打开“#right的CSS规则定义”对话框。
在“分类”列表中选择“方框”,设置“浮动”为“左对齐”,取消选择“填充”区域的“全部相同”复选框,设置“上”为22像素,“左”为19像素,之后单击“确定”按钮。
步骤19 在ID为“right”的Div中插入图像“main_09.jpg”,这样网页中部就制作完成了。
3.制作网页下部
网页下部的制作相对来说要简单很多,因为只需要插入一个Div,并在其中输入文本即可。
步骤1 接着上面的操作,对照代码将插入点置于ID为“content”的Div后,插入ID为“bottom”的Div,并打开“#bottom的CSS规则定义”对话框,设置“大小”为12像素,“颜色”为灰色“#999999”。
步骤2 在“分类”列表中选择“背景”,设置“背景颜色”为浅灰色“#EEEEEE”。
步骤3 在“分类”列表中选择“区块”,然后在“文本对齐”下拉列表中选择“居中”。
步骤4 在“分类”列表中选择“方框”,然后设置“宽”为1000像素,“高”为30像素,取消选择“填充”区的“全部相同”复选框,设置“上”为10像素,最后单击“确定”按钮。
步骤5 将ID为“bottom”的Div中的原有文本删除,重新输入新文本,可见其自动套用了前面设置的样式。
步骤6 分别保存网页文档和样式文件,然后在浏览器中预览文档,可以看到网页四周均有空白,且下方出现了滚动条。
4.设置“body”样式
下面通过设置“body”样式,来解决网页四周的空白和滚动条问题。
步骤1 单击“CSS样式”面板下方的“新建CSS规则”按钮,打开“新建CSS”
对话框,在“选择器类型”区选择“标签”,在“标签”下拉列表中选择“body”,在定义在”列表区选择“s1.css”,然后单击“确定”按钮。
步骤2 打开“body的CSS规则定义”对话框,在左侧的“分类”列表中选择“区块”,然后在“文本对齐”下拉列表中选择“居中”,以使所有内容居中对齐。
步骤3 在左侧的“分类”列表中选择“方框”,设置“边界”值为0,然后单击确定”按钮。
步骤4 分别保存网页文档和样式文件,然后在浏览器中预览文档,可以看到网页左侧和上方的空白,以及下方的滚动条均已消失。
【任务实施】
接下来,请同学们参考首页制作步骤,完成网站子页。
包含以下几个步骤:
1.制作网页上部
2.制作网页中部
3.制作网页下部
效果图:
【知识拓展】初学Web标准的几个误区
初次接触Web标准的用户可能会受表格布局或其他一些问题的影响,常见问题及解决建议如下:
1.不要用传统的表格思维来套div
用惯了表格的用户可能会觉得,CSS布局就是将原来用table的地方用div来代替,原来是table嵌套,现在是div嵌套。
这种观点是错误的。
应该跳出表格布局的禁锢,抛弃一个td接一个td放置内容的思维方式。
按前文所述,Web标准的目的是将内容和表现完全分离。
即在加入表现之前,页面里有的仅仅是内容,在没有修饰的情况下,它就是一张有一些文字和图像(图像是指内容中的图像,是有真正意义的图像,而非修饰性的图像)的简单页面,这些文字和图像仅仅是依次罗列下来,只有结构,没有任何样式。
当加入表现,将所有修饰的图像作为背景,用CSS来定义每一块内容的位置、字体、颜色等时,才构成了一个完整的页面。
这样制作的页面才是内容与表现完全分离的,即抽掉CSS文件,剩下的就只是干净的内容。
2.不必为每块内容都创建一个id
内容都是有结构的,相同结构的内容可以用同一个样式来定义,如相同级别的标题、正文、图像等。
对于多次引用的样式可以用class来定义,不需要全部用id;另外,也不是说只能用div布局,在需要的时候,完全可以用p来代替。
至于仅仅为了行高、间距,或者一个修饰性图像而增加的div,随着大家对CSS应用的熟练和理解,很快就会知道这是没有必要的。
希望大家多研究CSS,做出最简练、最有效的样式表。
作业:
1.Web标准由哪几部分构成?
2.简述绝对定位与相对定位的含义?
3.Div标签中,“类”与“ID”有何区别?
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver网页设计与制作第二版 电子 教案 Dreamweaver 网页 设计 制作 第二 A063954 示例 项目