计算机学院实验报告 课程名称 .NET程序设计 实验名称 实验四 CSS+DIV网页布局与样式

NET程序设计 实验四 CSS+DIV网页布局与样式

一.实验目的：
1.理解CSS盒子模式。
2.掌握使用DIV进行网页整体布局的方法。
3.掌握使用CSS制作网页的方法。
4.掌握借助Photoshop效果图，使用Dreamweaver来创建和制作一个CSS+DIV布局与样式的HTML网页。
二．实验内容：
根据给定的网页设计的Photoshop效果图素材，实战演练使用Dreamwever构建一个DIV布局+CSS样式的HTML网页。
三．实验步骤：
（一）、框架设计
a)页面分析
本实验将要制作的页面设计效果图（某公园网页效果图）如图1所示。

图1 页面的设计效果图
根据图1所示的效果图，首先来对网页的整体进行构思，对设计的页面进行分析。
这个页面的结构，是三列式布局的一个变形，大致可以看作为左列、右列、右边列3列。其中左列从上到下又分成几部分，右列从上到下分成几部分。
对于整体来说，使用三列式的方法，每列的div容器，运用浮动定位的CSS属性，并且设置合适的宽度。使用类id选择符对框架进行定义，整理出各个div的id以及它们的关系，如图2所示。

图2 网页框架结构分析示意图
b)框架制作
框架制作的方法，包括XHTML代码的制作和CSS样式的制作两个方面。
（1）XHTML代码制作
根据页面分析的结果，现在为页面框架进行代码制作。如下所示：

<div id="container">
	<div id="left">
		<div id="logo"></div>
		<div id="englishedition"></div>
		<div id="login"></div>		
		<div id="magazine"></div>
		<div id="links">
			<div id="homepark"></div>
			<div id="abroadpark"> </div>
		</div>

	</div>			
	<div id="right">
	    <div id="navigator"> </div>
		<div id="banner"></div>
		<div id="news"></div>