《DHTML网页制作实验指导书》由会员分享，可在线阅读，更多相关《DHTML网页制作实验指导书（37页珍藏版）》请在金锄头文库上搜索。
1、DHTML动态网页制作实验指导书主编教师：李 静目录实验一CSS选择器与相关特性4【实验目的】4【实验环境及学时】4【实验学时】4【实验重点及难点】4【实验内容】4实验二 CSS设计实践6【实验目的】6【实验环境】6【实验学时】6【实验重点及难点】6【实验内容】6实验三 CSS盒子模型9【实验目的】9【实验环境】9【实验学时】9【实验重点及难点】9【实验内容】9实验四 盒子的浮动与定位11【实验目的】11【实验环境】11【实验学时】11【实验重点及难点】11【实验内容】11实验五 用CSS设置文本和图像12【实验目的】12【实验环境】12【实验学时】12【实验重点及难点】12【实验内容】12实
2、验六 用CSS设置超链接与导航菜单15【实验目的】15【实验环境】15【实验学时】15【实验重点及难点】15【实验内容】15实验七 用CSS设置表格和表单样式18【实验目的】18【实验环境】18【实验学时】18【实验重点及难点】18【实验内容】18实验八 圆角设计21【实验目的】21【实验环境】21【实验学时】21【实验重点及难点】21【实验内容】21实验九 灵活的电子相册23【实验目的】23【实验环境】23【实验学时】23【实验重点及难点】23【实验内容】23实验十 固定宽度布局剖析与制作24【实验目的】24【实验环境】24【实验学时】24【实验重点及难点】24【实验内容】24实验十一 变宽
3、度网页布局剖析与制作29【实验目的】29【实验环境】29【实验学时】29【实验重点及难点】29【实验内容】29实验十二 儿童用品网上商店30【实验目的】30【实验环境】30【实验学时】30【实验重点及难点】30【实验内容】30实训一 制作博客网站32【实训目的】32【实训环境】32【实训学时】32【实训重点及难点】32【实训内容】32实训二 制作旅游门户网站32【实训目的】33【实训环境】33【实训学时】33【实训重点及难点】33【实训内容】33实训三 制作纤百合礼品网站33【实训目的】34【实训环境】34【实训学时】34【实训重点及难点】34【实训内容】34实验一CSS选择器与相关特性【实验
4、目的】1掌握CSS构造规则，基本的CSS选择器定义方法和使用规则； 2了解CSS的继承和层叠特性。 【实验环境及学时】Window xp操作系统，记事本。【实验学时】学时：2学时。【实验重点及难点】CSS选择器的定义方法及使用规则。【实验内容】1. 建立外部样式表文件，命名为：mystyles.css.文件内容定义h1,p选择器。然后，产生一个普通网页，采用链接样式表方式。运行效果如下图所示。2. 建立外部样式表文件，命名为yourstyles.css.文件内容定义h2,p,div选择器。然后产生一个普通网页，在head内使用import，导入外部样式表文件。运行效果如下：3. 用ID选择器，
5、且用内嵌式CSS，制作显示下面效果的网页。4. 练习课本第24页关于交集选择器的实例。5. 练习课本第26页关于并集选择器的两个实例。6. 练习课本第27页关于后代选择器的两个实例。说明：前3道题上交作业。上交源文件。实验二 CSS设计实践【实验目的】了解使用手工方式编写页面、以及使用Dreamweaver软件可视化的方式完成页面的方法。【实验环境】Window xp操作系统，记事本，Dreamweaver cs3。【实验学时】学时：2学时。【实验重点及难点】掌握创建与管理站点的方法步骤。【实验内容】1. 用Dreamweaver进行css设置，实现下面的网页效果：其中文本内容如下：互联网发展
6、的起源1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。图片为：cup.gif，在第四周素材文件夹。要求：用Dreamweaver添加CSS规则。参考教材：41-47页步骤，完成。2. 用标记
7、选择器和类选择器实现下面效果图：3.用css实现下面效果：方法不限。4.用并集选择器实现下面效果。注：用不同级别标题标记，显示相同的效果。5.在一段文本中实现三层嵌套。自己任举一例。 实验三 CSS盒子模型【实验目的】1深刻理解盒子模型的的概念；2掌握孤立盒子的内部结构；3掌握理解多个盒子的相互关系。4掌握不同元素标准流的排列规则。5. 掌握盒子在标准流中的定位原则。【实验环境】Windows XP操作系统，记事本，IE7.0浏览器，Firefox浏览器。【实验学时】学时：3学时。【实验重点及难点】掌握盒子模型的内部结构、文档标准流中的排列规则。【实验内容】1. 分别用IE浏览器和Firefo
8、x浏览器查看网页文件：（p51,例04-01.html）border-styledivborder-width:6px;border-color:#;margin:20px; padding:5px;background-color:#FFFFCC;The border-style of dashed.The border-style of dotted.The border-style of double.The border-style of groove.The border-style of inset.The border-style of outset.The border-sty
9、le of ridge.The border-style of solid.编写代码，当border-style属性值为：none,hidden时，查看边框样式2. 理解边框属性值的简写形式：运行下面实例文件：#outerBoxwidth:200px;height:100px;border:2px black solid;border-left:4px green dashed;border-color:red gray orange blue; /*上 右 下 左*/border-right-color:purple; 分析运行结果。总结一下边框属性设置简写的几种形式，并编写代码运行。3.
10、什么是内边距？运行下列实例文件：例04-04.html.4. 理解:border,padding,margin.盒子模型有哪四部分组成？简述盒子模型的概念和作用。5. 什么是标准文档流？简述“标准流”的含义。6. div标记与span标记二者的相同与不同是什么？运行实例文件：04-06.html,然后把div换成span,看运行结果有什么不同。运行04-07html.理解二者的不同。实验四 盒子的浮动与定位【实验目的】1 深刻理解并掌握CSS中浮动的原理和规则；2 深刻理解并掌握静态定位的原理和规则；3 深刻理解并掌握相对定位的原理和规则；4 深刻理解并掌握绝对定位和固定定位的原理和规则。 【
11、实验环境】Windows xp,记事本。【实验学时】学时：3学时。【实验重点及难点】浮动的性质，相对定位和绝对定位的原理和规则。【实验内容】1 给定5-1.html,修改程序使里面的3个盒子浮动布局保存为5-2.html。并且对齐方式均为左对齐。2 消除在5-2.html中的浮动盒子对文字段落的影响，保存为5-3.html.3 将5-3.html中的文字段落删除保存为5-4.html，查看效果，修改程序使3个浮动的盒子位于大盒子内。4 给定5-1.html,修改程序使里面的3个盒子浮动布局保存为5-5.html。并且对齐方式均为右对齐。5 消除在5-5.html中的浮动盒子对文字段落的影响，保
12、存为5-6.html.6 将5-6.html中的文字段落删除保存为5-7.html，查看效果，修改程序使3个浮动的盒子位于大盒子内。7 关于盒子的定位问题。（预习内容）给定5-9.html,参考教材81-86页，填加相应代码实现5-105-14.html文件。并分析相对定位和绝对定位原则。8掌握盒子模型设置的有关参数，要求会计算。参考教材69-71页。实验五 用CSS设置文本和图像【实验目的】1掌握用CSS设置文本样式的方法；2掌握用CSS设置图像样式的方法；3掌握用CSS设置背景样式的方法；【实验环境】Windows系统，记事本。【实验学时】学时：3学时。【实验重点及难点】重点：设置文字的背景及颜色，设置图片的边框，图文混排，设置背景图像的位置；难点：设置标题的图像替换。【实验内容】1.给定5-11.html,修改程序，使用相对定位，显示下面的效果。将文件保存为5-11-1.html.2.给定5-11.html,修改程序，再填加一个子盒子-Box-3,使用静态定位，将文件保存为5-11-2.html.1 修改5-11-2程序，使用相对定位，设置相关属性值，交换Box-1和Box-3的位置。将文件保存为5-11-3.html.2 修改5-11-2
