网站设计实验报告.docx

1、网站设计实验报告院 系： 计算机科学学院 专 业： 年 级： 课程名称： 网站管理与设计 学 号： 姓 名： 指导教师： 2012年 5 月 25 日实验名称实验一 Web服务器的配置实验二 HTML、Dreamweaver、CSS+DIV简单网页制作实验类型设计型综合型创新型实验目的或要求1. 熟悉Web的工作原理2. 学习Web服务器的配置（Xampp或者Wamp的配置）3. 熟悉HTML、CSS、DIV4. 练习使用Dreamweaver 8制作网页5. 掌握简单网页设计与制作的方法实验原理（操作步骤）实验一： Web服务器的配置Web的工作原理：1.在浏览器上用URL查询DNS，其将返

2、回服务器的IP地址；2.在浏览器上用这个IP建立一个TCP/IP连接；3.在浏览器上通过该连接向服务器HTTP请求；4.应于请求的内容，服务器找到对应的文件，根据文件的扩展名，形成一个MIME类型的HTTP应答，发送给浏览器，然后关闭连接；5.根据消息的头，浏览器按照某种方式显示该文件的内容。Web服务器的配置步骤：第一步：在网上下载xampp服务器；第二步：安装xampp；第三步：使用 XAMPP 控制面板来启动/停止所有服务或安装/卸载所有服务， 如下截图：实验原理（算法流程）第四步：在Apache 服务启动后，在浏览器中输入地址 http:/localhost 或 http:/127.0

3、.0.1，并检测所有的 XAMPP 样例和工具，如下截图：第五步：检测Apache服务是否正常工作，可以通过左侧的导航条上的“状态”功能来查看，如下截图：实验原理（算法流程）实验二： HTML、Dreamweaver、CSS+DIV简单网页制作HTML的特点：1、简易性，HTML版本升级采用超集方式，从而更加灵活方便；2、可扩展性，HTML语言带来了加强功能，增加标识符等要求，并采取子类元素的方式，为系统扩展带来保证；3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。CSS: 创建和编辑css常用的是Adobe Dreamweaver系列软件

4、，用于针对多种浏览器测试css的兼容性。FrontPage 2000 有能为站点创建外部样式表的模板，可以用空白模板或已包含样式的模板来创建，保存样式表FrontPage 会以css 作为文件扩展名。创建或修改网页样式时，可使用位于 “格式” 菜单的 “样式” 命令，FrontPage 会自动创建嵌入的样式表，并在嵌入的样式表内将此样式保存为类选择器。在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。删除外部样式表中的样式，可在页面视图下打开样式文件，格式/样式命令，从打开的对话框中选择要删除的样式，单击“删除”。DIV: 因为是一

5、个块级元素，所以它的内容会自动地开始一个新行。 固有的唯一格式表现就是换行。可以通过 的 class 或 id 应用额外的样式。可以对同一个 元素同时应用 class 和 id 属性，但更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组，而 id 用于标识单独的唯一的元素。实验原理（算法流程）相关代码如下： WWE摔角最新赛事 2012.05.18 SD 2012.05.22 RAW a href= SmackDown ahref= ahref= ahref= a href= a href= a href= a href= a href=实验原理（算法流程）微博 实验结果

6、分析及心得体会实验结果截图如下：心得体会： 通过本次实验初步掌握HTML、CSS、DIV的应用，实验技巧欠佳还需更加努力。成绩评定教师签名： 年 月 日实验名称实验三 JavaScript实验类型设计型综合型创新型实验目的或要求1. 熟悉JavaScript2. 使用JavaScript制作特殊效果3. 在前一次建立的网站中加入JavaScript效果实验原理（操作步骤）JavaScript是一种能让你的网页更加生动活泼的程式语言，是目前网页中设计中最容易学又最方便的语言。可以利用JavaScript轻易地做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及可显示浏览器停留的时间。1、运算符

7、: 赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算、位操作运符符和字符串运算符。 2、表达式:运算符和操作数的组合称为表达式， 分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。 3、语句：Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句： 赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环终止语句和continue循环中断语句。 4、函数：函数是命名的语句段，可以被当作一个整体来引用和执行。1）函数由关键字function定义； 2）函数必须先定义后使用

8、，否则将出错； 3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名；4）参数是传递给函数使用或操作的值或对象，它可以是常量，也可以是变量，也可以是类的对象；5）return语句用于返回函数或表达式的值，当函数返回值类型不为空时，必须有如果返回值类型为空，没有reurn项。5、对象：Javascript的一个重要功能就是基于对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。 一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如do

9、cument.bgcolor=blue，就是表示使背景的颜色为蓝色。 6、事件;用户与网页交互时产生的操作，称为事件。绝大部分事件都是用户的动作所引发，如：用户按鼠标的按键，就产生onclick事件，若鼠标的指针在链接上移动，就产生onmouseover事件等等。在Javascript中，事件与事件处理程序配套使用。 7、变量：如 var myVariable = some value;实验原理（算法流程）相关代码如下：var b = 1;var c = true;function fade()if(document.all);if(c = true) 实验原理（算法流程）b+;if(b=10

10、0) b-;c = falseif(b=10) b+;c = true;c = falseif(b=10) b+;c = true;if(c = false) b-;u.width=150 + b;u.height=125 - b;setTimeout(fade(),50);实验结果分析及心得体会实验结果截图如下：心得体会：通过本次实验对JavaScript及Java的学习和使用有了更深入的了解，JavaScript语言，通过浏览器可以直接执行，Java语言，须先进行编绎和连接等动作才可执行；JavaScript的结构较为自由松散，Java结构较为严谨；Java具有读写档案及网络控制等功能，J

11、avaScript在网页内容的控制和互动性方面，比较方便快捷的。成绩评定教师签名： 年 月 日实验名称实验四 Web数据库应用实验类型设计型综合型创新型实验目的或要求1. 熟悉SQL、MYSQL的使用2. 建立简单的Web数据库3. 学习使用PHP编写服务器端程序4. 在前一次网站中加入表单，并建立动态网站实验原理（操作步骤）一、熟悉SQL、MYSQLSQL(Structured Query Language)是结构化查询语言。SQL语句可以执行各种各样的操作，如：更新数据库中的数据，从数据库中提取数据等。MYSQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放

12、在一个大仓库内。MYSQL软件采用了GPL（GNU通用公共许可证）。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MYSQL作为网站数据库。二、建立Web数据库步骤如下：（1）、打开Xampp Web服务器，在Xampp页面的右下角的“工具”栏下选择phpAdmin点击进入；（2）、将localhost进行常规设置和外观设置如下：（3）、创建数据库点击“创建”，出现提示“创建数据库成功”即：说明创建数据库成功。实验原理（算法流程）（4）、建表，如建立一张名为“WWE”摔角表，表中有2个字段分别为：姓名、冠军次数，具体插入操作如下：（

13、5）、WWE摔角数据表创建完成如下图所示：实验原理（算法流程）三、使用PHP调试已建的数据库相关代码如下：wwe摔角?php$con = mysql_connect(localhost, root, );if (!$con) die(Could not connect: . mysql_error(); mysql_select_db(wwe, $con);mysql_query(set names gb2312);$result = mysql_query(SELECT * FROM www);echo 姓名冠军次数;while($row = mysql_fetch_array($result) echo ; echo . $row姓名 . ; echo . $row冠军次数 . ; echo ; echo ;mysql_close($con);?实验结果分析及心得体会实验结果截图如下：心得体会：通过本次实验对MYSQL以及PHP的学习和应用有了更深刻的了解，实验技术欠佳还更需努力继而在以后学习中有更加深入的发展潜能。成绩评定教师签名： 年 月 日