HTML+CSS上机指导_02_音乐网站的制作研讨.doc

第二讲 音乐网站的制作 一、大纲 html基础知识 div与页面布局 css基础知识 div+css在网页中的应用 二、实验目标： 掌握html基础知识与应用 body标签的属性设置宽度和左右居中 掌握div的网页布局方式 掌握css的基础知识与应用 掌握应用div+css的知识进行网页开发与制作，效果图如下： 三、教学案例： 安装和配置dreamweaver的开发环境（具体步骤见参考资料） html与css语言的使用 四、实验方式： 每个学员必须独立完成。 五、实验步骤 步骤1：设置body标签和所有元素（使用*）的属性 页面宽度为760px 背景色为白色 上下边距为0，左右居中 字号为12px 设置所有元素(*)的margin和padding属性为0 步骤2：制作头部（header）div及其内容 头部div宽760px 高 190px 在头部div中依次放置top_02.jpg~top_11.jpg 设置这些图片为左浮动 设置头部div上下边距为0，左右居中 步骤3：制作导航（nav）div及其内容 导航div宽760px 高 40px （可通过选择器组减少代码的书写） 设导航div上下边距为0，左右居中 （可通过选择器组减少代码的书写） 在导航div中依次放置nav_03.gif~nav_09.gif 设置这些图片为左浮动 设置导航div的下边距为10px 步骤4：制作旗帜（banner）div及其内容 旗帜div宽760px 高 60px 在该div中插入图片 760x60.gif 设置旗帜div的下边距为10px 步骤5：制作行动（act）div及其内容 行动div宽250px 高 226px 设置行动div的背景图片为images/jmd_bottom.jpg 并设置背景图片不重复 背景图片的显示位置在左下 设置行动div的下边距为10px 设置行动div为左浮动 在行动div中增加h1 并设置： 文本内容为“[V]节目单” 设置h1的背景图片为images/jmd_top.jpg并设置背景图片不重复 背景图片的显示位置在左中 h1的宽250px 高 32px 行高32px 字体颜色白色 字号12像素 文本对齐方式为居中 在行动div中增加div并设置 宽250px 高 188px 背景图片为images/jmd_bg.jpg 在这个div中增加无序列表 并设置： ul的宽为240 高为188像素 上下边距为0 左右居中 字体颜色为白色 行高150% 文本缩进45像素 单词间距为1像素 scrollbar-face-color:#333; scrollbar-3dlight-color:#999 /*立体滚动条亮边的颜色*/ scrollbar-highlight-color:#666; /*滚动条的高亮颜色（左阴影？）*/ scrollbar-shadow-color:#333; /*立体滚动条阴影的颜色*/ scrollbar-track-color:#FFF; /*立体滚动条背景颜色*/ scrollbar-arrow-color:#999; overflow属性为自动 将无序列表中表示时间的文本放到span元素中，并设置span元素的属性的color属性为#F60 步骤6：制作视频（video）div及其内容 视频div宽500px 高 336px 背景图片为images/flv_bottom.jpg 不重复显示 位置在左下 右浮动 下边框间距为10px; 在视频div中增加h1元素，文本内容为[v]音乐台 该h1元素的样式为： 宽500px 高 31px 行距为31px 字体颜色为白色 字号为12像素 文本对齐方式为居中 背景图片为images/flv_top.jpg 不重复 显示在左中 在视频div中增加div元素，具体设置如下： 宽 自动 高289px; 背景图片images/flv_bg.jpg 盒内左边距为40像素 盒内上边距为10像素 在该div中增加span元素，span的样式为： 宽320像素 高260像素 以块形式显示 左浮动 在span中增加object 和embed标签，代码如下： object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0 width=320 height=260 id=FLVPlayerparam name=movie value=video.swf?volume=30amp;autostart=falseamp;lightcolor=0xCC9900am