1、实验三 深入了解 CSS一 实验目的:掌握 CSS 的语法结构;掌握 CSS 构建网页的方法;掌握 CSS 在表格, 排版,菜单等方面的应用 ;二 实验类型:验证型,综合设计型三 实验内容:1.使用 css 制作表格在 dreamweaver 中打开”表格设计” 文件夹中的 table1.html,观察已有的 5 个 CSS 样式文件;将表格调整为暖色调,如下图所示 :其中表头背景为#990033,偶数行背景为#ff9999, 奇数行背景为 #ffffcc,边框颜色为黑色#000000(这 3 种色彩均为网页安全色彩 ).将修改的文件存储为 table2.html.2.使用 css 制作普通菜
2、单( 不用表格制作菜单)(1)打开”菜单设计”文件夹中的 menu1.html 文件,观察 body 等 6 个 CSS 文件;(2)调整菜单的颜色,增减菜单的项目等,设计一个与原菜单有一定区别的新菜单;(3)将新菜单存储为 menu2.html.3.使用 css 排版图片(1)打开”图文排版”文件夹中的 typeset1.html 文件,观察分析 body 等 6 个 CSS 文件;(2)修改 typeset1.html 文件中的 CSS 样式文件, 并浏览效果的改变情况;(3)打开样式文件 3-7catalog.css 和 3-7ppt.css,分析代码的意义.4.流行 TAB 菜单的设计
3、(1)在浏览器中打开”TAB 菜单”文件夹中的 3-6_home.html 文件, 点按菜单项目,观察运行情况;(2)编辑 3-6_news.html 文件, 将图片 news01.jpg 和 newsconten.txt 等图文内容加到 3-6_news.html 中 ,并尽量使浏览风格与 3-6_home.html 一致 .如下图:5.使用 css 改变网页风格(1)在浏览器中打开”网页风格”文件夹中的 3-8.html 文件,观察网页风格,并刷新几次,观察风格的改变情况;(2)分析代码的意义.四 上传实验结果在 C 盘用自己的学号+姓名建立一个文件夹,将 table2.html, menu2.html, 3-6_news.html 等 3 个文件拷贝到该文件夹中, 将此文件夹压缩成 RAR 文件并上传作业.