电子教案《Dreamweaver网页设计与制作第二版》A063954示例项目八

1、电子讲课设计Dreamweaver网页设计与制作第二版A063954示例项目八电子讲课设计Dreamweaver网页设计与制作第二版A063954示例项目八电子讲课设计Dreamweaver网页设计与制作第二版A063954示例项目八课程讲课设计讲课内容项目八制作茶文化网站应用Div+CSS技术布局网页讲课班级讲课学时16课时讲课方法讲解法、演示法、讨论法。多媒体讲课与手段本项目的工作是为某茶文化企业建设企业网站，要求网站能充分显现中华茶文化的悠长历史，加大对中国茶文化的宣传。网站的设计要求有：网站波及好多有关茶的各种资讯，应便于查问检索；站内图片清楚度要高，而且要有美感。项目内容依据企业提出

2、的要求，经过分析，要达成好本次任务，应当采纳近来几年来流行的“Div+CSS”技术来布局网页。在网页设计领域，Web标准的呼声愈来愈高。简单来说，要使网站符合Web标准，就要使用“Div+CSS”技术来布局网页。本任务经过使用“Div+CSS”技术建立茶文化网站，介绍了“Div+CSS”技术在实质网页制作中的应用。讲课目的讲课要点与难点学生经过本项目的学习，能：1、认识Web标准的看法2、娴熟掌握使用“Div+CSS”技术建立网页的方法讲课要点：熟习“Div+CSS”技术讲课难点：使用“Div+CSS”技术建立网页项目见效讲课过程设计【任务】制作网站首页和子页使用Div+CSS技术制作网页（一

3、）什么是Web标准Web标准是由W3C和其余标准化组织制定的一套规范，包含JavaScript及CSS等一系列标准，其目的在于创立一个一致的用于XHTML、Web表现层的技术标准，以便于经过不同样阅读器或终端设施（计算机、手机等）向最后用户显现信息内容。从狭义上讲，Web标准就是采纳“Div+CSS”代码进行网站建设，此刻“Div+CSS”俨然成了标准化的代名词。但实质上，采纳“Div+CSS”代码制作的网站其实不用然符合Web标准，这与对“Div+CSS”代码应用的娴熟程度有很大关系。（二）Web标准的构成Web标准由构造（Structure（Behavior）三部分构成：）、表现（Pres

4、entation）和行为构造构造技术用于对网页顶用到的信息（文本、图像、动画等）进行分类和整理，目前用于构造化设计的Web标准技术主假如XHTML。表现表现技术用于对已被构造化的信息进行显示上的控制，包含地点、颜色、字体、大小等形式控制。目前用于表现设计的Web标准技术就是CSS。W3C创建CSS的目的是用CSS来控制整个网页的布局，与XHTML所实现的构造圆满分别。简单来说就是表现与内容圆满分别，使站点的保护更为简单。这也正是“Div+CSS”布局的一大特色。行为行为是指对整个文档的一个模型定义和交互行为的编写。目前用于行为设计的Web标准技术主要有下边两个。DOM（DocumentObje

5、ctModel）：文档对象模型，相当于阅读器与内容构造之间的一个接口。它定义了接见和办理HTML文档的标准方法，把网页和脚本以及其余的编程语言联系起来。ECMAScript（JavaScriptManufacturersAssociation的扩展脚本语言）：由CMA（Computer）制定的脚本语言（JavaScript），用于实现网页对象的交互操作。（三）认识DivDiv全称Division果独自使用Div而不加差不多。，意为“划分”。Div的使用方法与其余标签同样。如CSS，则它在网页中的见效和段落标志“”Div是用来为XHTML文档中的块内容设置构造和背景属性的元素。它相当于一个容器，

6、由初步标签和结束标签之间的所有内容来构成这个块。在它里面能够内嵌表格（table）、文本（text）等其余XHTML代码。此中所包含的元素特色由Div标签的属性来控制，或使用款式表格式化这个块来控制。XHTML中能够作为容器的标签有好多，比较之下，还拥有一个独有的长处，即不带有任何原始属性。比方，Div除了能够作为容器，P标签为段落属性，使用它作容器就会致放入P的内容与前后段落之出一个空行的隔，而用Div就不会出种状况，上所示使用Div作容器的见效，下所示使用P作容器的见效。能够很明地看出，P内的内容与上下行之生一个空行的距。（四）Div+CSS布局的弊端点1）CSS的体在它的代上。于一个大型

7、网站来，能够省大批。而的代使得有效关字在网代中所占的比率提升，所以使用“Div+CSS”制作的符合Web准的网站拥有简单被搜寻引擎搜寻到的。2）使用“Div+CSS”技制作的网站改版更为方便，好多只要要改CSS而不需要改程序。（3）能够一次，多布。的作品不能够用于Web器，可以布在其余或件上，如PowerPoint。4）能够更好、更松地控制网布局。5）将部分剥离出来，放在一个独的式表文件中，能够减少网无效的可能性。（6）布局灵巧性大。比较而言，的表格布局只好依据table、tr、td的格式，而Div能够依据div、ul（无序列表）、li（列表内容）格式，也能够依据ol（有序列表）、li格式，能

8、够依据ul、li格式，不最好有序写。（7）假如JavaScript比精晓，能够不用去写ID，而用class就能够了。当客端程序写完程序后需要整，能够再利用它的ID行控制。（8）代更。在使用表格布局，常常会生成好多垃圾代，修性的式和布局代混淆在一同，很不直。（9）从前一些必通片才能的功能，在只用CSS就能够松，进而加速了网的下速度。2.弊端只管“Div+CSS”技拥有必定的，不其存在的也比明，主要表在以下几个方面：于CSS的高度依，使得网得比复。CSS文件异样将会影响整个网站的正常示。于用“Div+CSS”技制作的网站，特别简单出器兼容性。“Div+CSS”技搜寻引擎化与否，取决于网者的水平而不

9、是Div+CSS技术自己。（五）绝对定位与相对定位绝对定位绝对定位在CSS中的写法是“position：absolute；”。其表达的意思是参照阅读器的左上角，配合top、right、bottom、left（上、右、下、左）值来定位元素，以下CSS代码：#layposition：absolute；left：5px；top：5px；它表示应用#lay款式的对象为绝对定位模式，它将永久距离阅读器窗口左边框5px，上面框5px。相对定位相对定位在CSS中的写法是“position：relative；”。其表达的意思是以父级（它所在的容器）的坐标原点为坐标原点。无父级则以body的坐标原点为坐标原点，

10、配合上、右、下、左（TRBL）进行定位，当父级内有padding等CSS属性时，目前级的坐标原点则参照父级内容区的坐标原点进行定位。有时还要使用“z.index”属性来设定容器的上下关系，数值范围是自然数，数值越大，容器地点越靠上。但是需要注意的是，父子关系是没法用“z.index”属性来设定上下关系的，必定是子级在上，父级在下。（六）浮动定位浮动定位在CSS表示对象不浮动；为“象向右浮动。顶用“float”属性来表示。当“float”值为“Bone”时，left”时，表示对象向左浮动；为“right”时，表示对假如使用浮动定位方式，为Div中的所有列都加上“float：left”属性，那么它

11、们会挨个向左摆列。假如让一个元素浮动，它会往右或许往左浮动直至碰到容器的边沿。假如向同一方向再浮动一个元素，它会浮动直至碰到前一个浮动元素的边沿。（七）插入Div标签Div标签与表格、图像等网页对象的插入方法近似，所不同样的是，在插入Div标签的同时能够为其设置款式。步骤1第一在文档页面上要插入Div标签的地点单击，以确立插入点地点。步骤2将“常用”插入栏切换至“布局”插入栏，并单击此中的“插入Div标签”按钮，翻开“插入Div标签”对话框。设置各项参数后，单击“确立”按钮，即可在插入点所在地点插入Div标签。【任求实行】在学习了“Div+CSS”技术的有关知识后，下边经过制作一个使用“Div

12、+CSS”技术制作的茶文化网站来学习其在实质网页制作中的应用。（一）制作网站首页制作网页上部步骤1将本项目素材中的“tea”文件夹拷贝至当地磁盘，而后在Dreamweaver中定义站点“tea”。步骤2在站点“tea”中新建文档并重命名为“index.html”。步骤3在“文件”面板中双击翻开新建的文档，在文档编写窗口中定位插入点，此后将“插入”栏切换至“布局”栏，并单击此中的“插入Div标签”按钮。步骤4翻开“插入Div标签”对话框，在“ID”编写框中输入为“top”），此后单击“新建CSS款式”按钮。ID名（此处步骤5翻开“新建CSS规则”对话框，选择器种类默认为“高级”，选择器名为“#t

13、op”，在“定义在”列表区选择“新建款式表文件”，此后单击“确立”按钮。步骤6翻开“保留款式表文件为”对话框，在“保留在”下拉列表中选择网站根文件夹，在文件名编写框中输入文件名（此处为“s1”），此后单击“保留”按钮。步骤7翻开“#top的CSS规则定义”对话框，在左边的“分类”列表中选择“方框”，设置“宽”为“1000”像素，此后单击“确立”按钮。步骤8回到“插入Div标签”对话框，单击“确立”按钮，插入Div切换至“常用”插入栏，单击“图像”按钮。步骤9翻开“选择图像源文件”对话框，在“查找范围”下拉列表中选择图标签。像所在文件夹（此处为网站根文件夹下的“images”文件夹），在文件列表

14、中选择图像文件“main_01.jpg”，此后单击“确立”按钮。步骤10插入图像，并将其上方的文本删除，见效以以下图。步骤11单击图像，此后按向右方向键，将插入点置于图像后，参照前面的方法插入其余图片，见效以以下图。制作网页中部步骤1接着上面的操作，为保证Div地点的正确性，单击“文档”工具栏中的“拆分”按钮，在文档窗口上方翻开代码视图，比较代码进行后边的操作。步骤2第一将插入点定位在前面插入的ID为top的Div内，此后单击“标签选择器”中的“div#top”，选中整个Div。步骤3按键盘上的向右方向键，将插入点置于入栏中的“插入Div标签”按钮，以以下图。Div后，此后单击“布局”插步骤4

15、“content翻开“插入Div”，此后单击“新建标签”对话框，在“CSS款式”按钮。ID”编写框中输入ID名步骤5翻开“新建CSS规则”对话框，“选择器种类”默认为“高级”，选择器名为“#content”，在“定义在”列表区选择“s1.css”，此后单击“确立”按钮。步骤6翻开“#content的CSS“背景”，此后设置背景颜色为白色“规则定义”对话框，在“分类”列表中选择#FFFFFF”。步骤7为140在“分类”列表中选择“方框”像素，此后单击“确立”按钮，插入，设置“宽”为1000ID为“content”的像素，“高”Div。步骤8参照前面的方法，比较代码将插入点置于Div内，在此中嵌套

16、一个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在“分类”列表中选择“区

17、块”，此后在“文本对齐”下拉列表中选择“左对齐”。步骤13在“分类”列表中选择“方框”，此后设置“宽”为362像素。步骤14在“分类”列表中选择“列表”，此后设置“种类”为“方块”，“地点”为“外”，最后单击“确立”按钮。步骤15将ID为“newscontent”的Div中文本删除后输入新文本，并将这些文安分为不同样的段落。今后选中文本，单击“属性”面板上的“项目列表”按钮，Div中的文本将应用前面设置的列表款式。步骤16比较代码将插入点置于ID为“news”的Div后，连续在ID为“content”的Div中嵌套一个ID为“center”的Div，并翻开“center的CSS规则定义”对话框

18、。在“分类”列表中选择“方框”，设置“宽”为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”，这样网页中部就制作达成了。制作网页下部网页下部的制作相

19、对来说要简单好多，由于只要要插入一个Div，并在其中输入文本即可。步骤1接着上面的操作，比较代码将插入点置于ID为“content”的Div后，插入ID为“bottom”的Div，并翻开“#bottom的CSS规则定义”对话框，设置“大小”为12像素，“颜色”为灰色“#999999”。步骤2在“分类”列表中选择“背景”，设置“背景颜色”为浅灰色“#EEEEEE”。步骤3在“分类”列表中选择“区块”，此后在“文本对齐”下拉列表中选择“居中”。步骤4在“分类”列表中选择“方框”，此后设置“宽”为1000像素，“高”为30像素，撤消选择“填补”区的“所有同样”复选框，设置“上”为10像素，最后单击“

20、确立”按钮。步骤5将ID为“bottom”的Div中的原有文本删除，从头输入新文本，可见其自动套用了前面设置的款式。步骤6分别保留网页文档和款式文件，此后在阅读器中预览文档，能够看到网页周围均有空白，且下方出现了转动条。设置“body”款式下边经过设置“body”款式，来解决网页周围的空白和转动条问题。步骤1单击“CSS款式”面板下方的“新建CSS规则”按钮，翻开“新建CSS”对话框，在“选择器种类”区选择“标签”，在“标签”下拉列表中选择“body”，在定义在”列表区选择“s1.css”，此后单击“确立”按钮。步骤2翻开“body的CSS规则定义”对话框，在左边的“分类”列表中选择“区块”，此后在“文本对齐”下拉列表中选择“居中”，以使所有内容居中对齐。步骤3在左边的“分类”列表中选择“方框”，设置“界限”值为0，此后单击确立”按钮。步骤4分别保留网页文档和款式文件，此后在阅读器中预览文档，网页左边和上方的空白，以及下方的转动条均已消逝。能够看到【任求实行】接下来，请同学们参照首页制作步骤，达成网站子页。包含以下几个步骤：制作网页上部制作网页