这是一段文本
这是一段文本 这是一段文本
注：
a.以上第一、二行文字不涉及到文字字体、大小、颜色的设置，且并不居中显示，只需实现第一行文字加粗，第二行文字斜体。
b.第三行显示字号为5、颜色为红色、字体为“华文彩云”的文字。
提示：使用span标记改变文本的样式，font-weight用于设置粗细，font-style用于设置斜体，font-family用于设置字体，font-size用于设置字体大小，color用于设置字体颜色。
(4).将所有文本内容使用CSS样式居中显示；
(5).为每个div元素使用CSS样式设置不同的背景颜色或背景图片（图片自备）。 (6).为第一个和第三个div元素使用CSS样式设置单线和双线边框，颜色和边框粗细自定。
(7).保存页面simplecss.htm。
(四).Dreamweaver 8表格布局复杂网页设计（选作）
(1).启动Macromedia Dreamweaver 8.0；
(2).新建网页tablelayout.htm，并保存在“实验文件夹”中；
(3).选择一个自己感兴趣的主题（如篮球、音乐等），在网页talbelayout.htm中使用表格进行页面布局，尽可能多地使用到前面学习过的HTML元素。
提示：可以模仿其它页面进行设计，但要求只能使用表格进行布局，且避免使用课程中未学过的知识。
三．实验体会：
6
实验四 CSS+DIV网页布局与样式
一.实验目的：
1.理解CSS盒子模式。
2.掌握使用DIV进行网页整体布局的方法。
3.掌握使用CSS制作网页的方法。 4.掌握借助Photoshop效果图，使用Dreamweaver来创建和制作一个CSS+DIV布局与样式的HTML网页。
二．实验内容：
根据给定的网页设计的Photoshop效果图素材，实战演练使用Dreamwever构建一个DIV布局+CSS样式的HTML网页。
三．实验步骤：
（一）、框架设计 a) 页面分析
本实验将要制作的页面设计效果图（某公园网页效果图）如图1所示。
图1 页面的设计效果图
7
根据图1所示的效果图，首先来对网页的整体进行构思，对设计的页面进行分析。 这个页面的结构，是三列式布局的一个变形，大致可以看作为左列、右列、右边列3列。其中左列从上到下又分成几部分，右列从上到下分成几部分。
对于整体来说，使用三列式的方法，每列的div容器，运用浮动定位的CSS属性，并且设置合适的宽度。使用类id选择符对框架进行定义，整理出各个div的id以及它们的关系，如图2所示。
图2 网页框架结构分析示意图
#container #left #logo #login # Englishedition # magazine # links #statute news #announcement news #right # rightborder # navigator # banner # news #corporation #article # placard b) 框架制作
框架制作的方法，包括XHTML代码的制作和CSS样式的制作两个方面。 （1）XHTML代码制作
根据页面分析的结果，现在为页面框架进行代码制作。如下所示：
8
以上代码在Dreamweaver中的效果如图3所示：
图3 XHTML代码在Dreamweaver中的效果
（2）CSS样式制作
现在来添加CSS样式，在XHTML格式文件的
中添加。然后，使用CSS选择符为定义了id的XHTML标签进行样式设置。添加CSS的过程忠，要经常参照网页设计效果图。具体方法是使用photoshop软件打开设计图，利用参考线精确坐标和页面中每个模块的位置关系。使用参考线将这个页面的框架结构进行划分，如图4所示。
9
图4 参考线划分框架结构
在参考线的帮助下，可以掌握页面中每个模块的位置以及长度、宽度，是CSS样式编写的重要辅助方法。这里面添加的具体CSS文件如下。
*{
margin:0px; padding:0px; border:0px; }
10
百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库《.NET开发基础》实验指导书 - 图文(2)在线全文阅读。
相关推荐：