使用css样式表实验报告,css页面布局实验报告

CSS样式表怎么做

1、创建使用css样式表有三种，分别是外部样式表，内部样式表和内联样式。下面通过一个小demo演示它们的用法，首先新建一个html文件，放入3个button按钮，给前两个按钮分别设置class属性为btn1和btn2：

2、接着准备一个css文件，命名为demo.css，在文件内写入按钮A的样式，保存css文件：

3、回到刚才的html文件，在style标签中用link标签引入上一步创建的css文件，这就是外联样式的用法，总结就是创建好的css文件内写好样式，然后在html文件中用link标签引入即可，这也是大部分网站使用的方法，因为其引入方便，管理起来也比较方便：

4、接着是内部样式表的使用，这里直接在head标签里创建style标签，在里面加入btn2的样式。对于内部样式表简单的html文件，内部样式是很方便的，但是结构复杂的html文件使用它就会让文件显得很混乱：

5、最后是内联样式的使用，直接在第三个标签内使用style属性加入样式就可以了：

6、最后保存html文件，打开浏览器可以看到三个按钮的样式都出现了。以上就是css样式表的制作方法：

相关问答

Q1: 《网页设计》实验报告

1、

设计由多个网页组成的小型网站，自选主题，要求积极、健康，不得从网络上下载；

2、

构建本地站点，创建站点目录；

3、

站点目录中各种文件分类存放，文件命名

科学

，网站不少于10个页面；

4、

整个网站内容大小不超过20M；

5、

网页版面采用表格布局；

6、

网页中引入CSS

样式表

技术。

7、

超级链接的都可正确点通；

8、

网页中需添加如

动画

、

音频

、视频等多媒体元素；

9、

栏目设计合理，页面

文字

充实，图文并茂。

10、

使用动态页面效果，如

时间轴动画

、弹出信息、弹出菜单等；

11、

可根据个人能力和兴趣使用数据库，ASP，JSP，PHP等网页技术。

实验报告

应包涵以下几个部分：

1、实验说明：说明网战在设计所应用的技术，站点下各目录、各文件；素材的收集途径等；

2、实验步骤：详细阐述网页设计整体

流程

和其中各个环节的操作步骤；

3、实验心得。

Q2: 高分求网页制作实验报告!!!

网页制作实验报告

实验一：站点设置

一、实验目的及要求

本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

二、仪器用具

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。

3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；

三、实验原理

通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

四、实验方法与步骤

1）执行“站点＼管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。

2）在弹出的“站点定义为”对话框中单击“高级”选项卡。

3）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。

4）在“管理站点”对话框中单击“完成”按钮，站点创建完毕。

五、实验结果

六、讨论与结论

实验开始之前要先建立一个根文件夹，在实验的过程中把站点存在自己建的文件夹里，这样才能使实验条理化，不至于在实验后找不到自己的站点。在实验过程中会出现一些选项，计算机一般会有默认的选择，最后不要去更改，如果要更改要先充分了解清楚该选项的含义，以及它会造成的效果，否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。

实验二：页面图像设置

一、实验目的及要求：

本实例的目的是设置页面的背景图像,并创建鼠标经过图像。

二、仪器用具

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。

3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；

4、安装Acdsee、Photoshop等图形处理与制作软件；

5、其他一些动画与图形处理或制作软件。

三、实验原理

设置页面的背景图像,并创建鼠标经过图像。

四、实验方法与步骤

1) 在“页面属性”对话框中设置页面的背景图像。

2) 在页面文档中单击“”插入鼠标经过图像。

五、实验结果

六、讨论与结论

实验结束后我们可以看到页面的背景变成了我们插入的图像，并且要鼠标经过的时候会变成另一个图像，这就是鼠标经过图像的效果。当然这种实验效果很难在实验结果的截图里表现出来。这个实验的关键在于背景图像的选择，如果背景图像太大不仅会影响网页的打开速度，甚至图像在插入会也会有失真的感觉，因此在插入前对图像进行必要的处理能使实验的效果更好。

实验三：表格制作

一、实验目的及要求：

本实例是要创建边框为1像素的表格。

二、仪器用具

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。

3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；

4、安装Acdsee、Photoshop等图形处理与制作软件；

5、其他一些动画与图形处理或制作软件。

三、实验原理

创建边框为1像素的表格。

四、实验方法与步骤

1) 在文档中，单击表格“”按钮，在对话框中将“单元格间距”设置为“1”。

2) 选中插入的表格，将“背景颜色”设置为“黑色”（#0000000）。

3) 在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”（#FFFFFF）。

4) 设置完毕，保存页面，按下“F12”键预览。

五、实验结果

六、讨论与结论

本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果，间距的作用主要在于表现这种颜色差异。表格的背景颜色和单元格的背景颜色容易混淆，在实验中要认真判断，一旦操作错误则得不到实验的效果。“表格宽度”文本框右侧的表格的宽度单位，包括“像素”和“百分比”两种，容易混淆，要充分地理解这两种单位表示的意义才能正确地进行选择，否则就不能达到自己想要的效果，设置错误就会严重影响实验效果。

实验四：创建锚点链接

一、实验目的及要求：

本实例的目的是创建锚点链接。

二、仪器用具

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。

3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；

4、安装Acdsee、Photoshop等图形处理与制作软件；

5、其他一些动画与图形处理或制作软件。

三、实验原理

创建锚点链接。

四、实验方法与步骤

1) 在页面中插入1行4列的表格，并在各单元格中输入导航文字。

2) 分别选中各单元格的文字，单击“”按钮，在弹出的“超级链接”对话框上的“链接”文本框分别输入“#01”“#02”“#03”“#04”。

3) 在文档中输入文字并设置锚记名称“01”，按下“ Enter”键换行，输入一篇文章。

4) 在文章的结尾处换行，输入文字并设置锚记名称“02”，按下“ Enter”键换行，输入一篇文章。

5) 同样的方法在页面下文分别输入文字和命名锚记为“03”和“04”，并输入文章。

6) 保存页面，按下“F12”键预览。

五、实验结果

六、讨论与结论

添加瞄记的作用是可以帮读者快速找到自己想要的文章，同时也可以使页面更加精简。本实验的关键难点在于链接文本框输入的名称和瞄记的名称要相一致才能达到实验的效果，同时要记得是在上一篇文章的结尾处输入文字并设置瞄记名称，并记得输入对应的文章，否则瞄记可能不能用。熟练程度低在实验中不能很好地使用各种工具，无法一次准确地寻找到适当的位置。实验中忘记选择“不可见元素”，几次实验都失败，最后才得出正确的结论。因此在实验前要先做好预习，否则实验过程会比较吃力。

实验五：设置CSS样式

一、实验目的及要求：

本实例的目的是通过设置CSS样式创建表格的虚线边框。

二、仪器用具

1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。

2、安装Windows XP操作系统；建立IIS服务器环境，支持ASP。

3、安装网页三剑客（Dreamweaver MX；Flash MX；Fireworks MX）等网页设计软件；

4、安装Acdsee、Photoshop等图形处理与制作软件；

5、其他一些动画与图形处理或制作软件。

三、实验原理

通过设置CSS样式创建表格的虚线边框。

四、实验方法与步骤

1) 在网页中创建一个表格。

2) 在“CSS样式”面板中单击“”按钮，在弹出的对话框中进行设置，完成后单击“确定”按钮。

3) 在弹出的对话框中进行设置，完成后单击“确定”

后面的看我发的那个网站！

Q3: CSS样式表的作用及特点

CSS可以很方便的用来控制网页的外观。主要有以下特点：

1.可以同时更新多个网页的样式。

2.使网页的表示层与结构层彻底分离

3.大大减小了网页文件的大下

4.加快了网页的加载速度

现在用CSS来布局网页已经是一种潮流，如果要向网页设计方面发展，必须精通CSS。