HTML音乐网站报告,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标签，代码如下：