文档介绍：院系: 计算机科学学院
专业:
年级:
课程名称: 网站管理与设计
学号:
姓名:
指导教师:
2012年 5 月 25 日
实验名称
实验一 Web服务器的配置
实验二 HTML、Dreamweaver、CSS+DIV简单网页制作
实验
类型
设计型
综合型
创新型
√
实
验
目
的
或
要
求
熟悉Web的工作原理
学****Web服务器的配置(Xampp或者Wamp的配置)
熟悉HTML、CSS、DIV
练****使用Dreamweaver 8制作网页
掌握简单网页设计与制作的方法
实
验
原
理
(
操
作
步
骤
)
实验一: Web服务器的配置
Web的工作原理:,其将返回服务器的IP地址; 一个TCP/IP连接;;,服务器找到对应的文件,根据文件的扩展名,形成一个MIME类型的HTTP应答,发送给浏览器,然后关闭连接;,浏览器按照某种方式显示该文件的内容。
Web服务器的配置步骤:
第一步:在网上下载xampp服务器;
第二步:安装xampp;
第三步:使用 XAMPP 控制面板来启动/停止所有服务或安装/卸载所有服务, 如下截图:
实
验
原
理
(
算
法
流
程
)
第四步:在Apache 服务启动后,在浏览器中输入地址 http://localhost 或 ,并检测所有的 XAMPP 样例和工具,如下截图:
 
 
 第五步:检测Apache服务是否正常工作,可以通过左侧的导航条上的“状态”功能来查看,如下截图:
 
 
 
 
实
验
原
理
(
算
法
流
程
)
 
实验二: HTML、Dreamweaver、CSS+DIV简单网页制作
 
HTML的特点:1、简易性,HTML版本升级采用超集方式,从而更加灵活方便;
2、可扩展性,HTML语言带来了加强功能,增加标识符等要求,并采取子类元素的方式,为系统扩展带来保证;
3、平台无关性。虽然PC机大行其道,但使用MAC等其他机器的大有人在,HTML可以使用在广泛的平台上。
 CSS: 创建和编辑css常用的是Adobe Dreamweaver系列软件,用于针对多种浏览器测试css的兼容性。FrontPage 2000 有能为站点创建外部样式表的模板,可以用空白模板或已包含样式的模板来创建,保存样式表FrontPage 会以css 作为文件扩展名。创建或修改网页样式时,可使用位于“格式”菜单的“样式”命令,FrontPage 会自动创建嵌入的样式表,并在嵌入的样式表内将此样式保存为类选择器。在网页上使用外部样式表的样式,可将该网页链接到样式表,方法是使用位于“格式”菜单上的“样式表连接”命令。删除外部样式表中的样式,可在页面视图下打开样式文件,格式/样式命令,从打开的对话框中选择要删除的样式,单击“删除”。
 
 DIV: 因为<div>是一个块级元素,所以它的内容会自动地开始一个新行。<div> 固有的唯一格式表现就是换行。可以通过<div> 的 class 或 id 应用额外的样式。可以对同一个<div> 元素同时应用 class 和 id 属性,但更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组,而 id 用于标识单独的唯一的元素。
 
 
实
验
原
理
(
算
法
流
程
)
 相关代码如下:
 </style>
</head>
<body>
<div id="Layer1"></div>
<div id="Layer2"><img src="3XHL2B`_******@63~" width="1092" height="49" /> </div>
<div id="Layer3"><img src="" width="347" height="370" /></div>
<div id="Layer4"><img src="file:///C|/Users/ausu/Pictures/ASUS壁纸/WWE/" width="749" height="370" /></div>
<div id="Layer5"><img src="file:///C|/Users/ausu/Desktop/WWE美摔100分- WWE美国职业摔角在线观看_files/logo