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