网站设计实验报告.doc

院 系： 计算机科学学院 专 业： 网络工程 年 级： 2010级 课程名称： 网站管理与设计 学 号： 10066013 姓 名： 张 德 龙 指导教师：周凌云 冯忠双 金佳 2012年 5 月 22 日实验名称实验一 Web服务器的配置实验二 HTML、Dreamweaver、CSS+DIV简单网页制作实验类型设计型综合型创新型实验目的或要求1. 熟悉Web的工作原理2. 学习Web服务器的配置（Xampp或者Wamp的配置）3. 熟悉HTML、CSS、DIV4. 练习使用Dreamweaver 8制作网页5. 掌握简单网页设计与制作的方法实验原理（操作步骤）一、Web服务器的配置（Xampp的配置） 1,Xampp配置原理： Xampp是一个强大的集成强大的软件包，基本的软件包包括系统、编程和服务器软件 Apache，著名的 Web 服务器： MySQL，一种杰出、免费的开源数据库 PHP，一种编程语言（在撰写本文时版本为 4.3.8 和 5.0.1） Perl，一种编程语言* ProFTPD，一个 FTP 服务器 OpenSSL，可以支持安全套接字层2，Xampp的配置过程： 解压Xampp.zip包到任意根目录下; 启动安装，截图如下： 按安装过程的步骤，进行安装，直至安装完成。 开始配置服务器。实验原理（算法流程）二、HTML、CSS、DIV的简单应用 1，熟悉HTML、CSS、DIV概念 超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言；CSS是Cascading Style Sheet的缩写，一般称之为层叠样式表，简称CSS样式，CSS样式是一系列的格式设计规则，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言；CSS层叠样式中经常用DIV标签布局网页。 2，HTML、CSS、DIV的简单应用 用CSS控制的横向列表菜单：Web代码设计如下： 用CSS控制的横向列表菜单 .test ullist-style:none;.test lifloat:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;.test adisplay:block;text-align:center;height:30px;.test a:linkcolor:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;.test a:visitedcolor:#666;text-decoration:underline;.testa:hovercolor:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px; 首页 产品介绍 服务介绍 技术支持 立刻购买 联系我们 实验原理（算法流程）三、Dreamweaver的的使用 如何利用Dreamweaver建立站点？ 步骤如下： 1，选择菜单栏中的“站点管理站点”命令，弹出“管理站点”对话框，单机“新建”按钮，然后从弹出的列表中选择“站点“选项； 2，选择站点”选项，在弹出的“站点定义为”对话框中，切换到“基本”选择卡，在对话框中可以根据网站的需要定义一个站点名称； 3，单击“下一步”按钮，出现想到的下一个界面，询问是否要使用服务器技术； 4，单击“下一步”按钮，选择要定义（本地站点或服务器上编辑）； 5，单击“下一步”按钮，询问是否使用服务器； 6，单击“下一步”按钮，将显示站点基本信息概要； 7，单击“完成”按钮，弹出“管理站点”对话框，其中显示了新建的站点； 8，新建站点完成。 如何管理站点？ 操作如下：1，打开站点，选择菜单栏中的“窗口文件”命令，打开文件面板，在文件面板中显示站点中的所有文件。单击文件面板右侧的“展开折叠”按钮，即可打开站点管理器窗口，左侧显示远程服务器站点上的文件列表，右侧显示本地站点文件列表。2，编辑站点，选择菜单栏中的“站点管理站点”命令，弹出“管理站点”对话框，在对话框中单击“编辑”按钮。此时弹出“站点定义为”对话框，切换到“高级”选项卡，在对话框中对站点进行相应的编辑。3，删除站点，可以从站点列表中将站点删除，删除站点时站点中的文件不会被删除。选择菜单栏中的“站点管理站点”命令，弹出“管理站点”对话框，在对话框中选择要删除的站点，单击“删除”按钮，即可将站点删除。 4，复制站点，选择菜单栏中的“站点管理站点”命令，弹出“管理站点”对话框,单击“复制”按钮，即可复制选择站点。 如何管理站点文件？ 操作如下：创建文件夹和文件，选择菜单栏中的“窗口文件”命令，打开文件面板，在要新建文件夹的位置单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令。在新建的文件夹中可以看到文件夹的名称处于可编辑的状态可以为文件夹任意命名。提示：在新建文件 或文件夹时，也可以单击文件面板中的“展开文件或远程站点”按钮，打开本地文件列表，再选择菜单栏中的“文件新建文件夹”或“文件新建文件”命令，新建文件或文件夹。新建的文件，在输入完名称后，一定要加上文件的后缀，以识别文件的类型。实验结果分析及心得体会实验结果如下：一、Xampp服务器安装成功如下： 1，安装服务器：注：上图说明已经安装成功。 2，配置服务器：注：上图是服务器配置成功。二、HTML，CSS，DIV简单应用设计结果： 一个简单的HTML，CSS，DIV设计的网页设计如下： 用CSS控制的横向列表菜单页面效果如下：注：上图为用CSS控制横向菜单的页面效果。三、利用Dreamweaver创建站点结果如下：注：上图为一个站点的Dreamweaver下本地视图。成绩评定教师签名： 年 月 日实验名称实验三 JavaScript实验类型设计型综合型创新型实验目的或要求1. 熟悉JavaScript2. 使用JavaScript制作特殊效果3. 在前一次建立的网站中加入JavaScript效果实验原理（操作步骤）一、熟知JavaScript JavaScript是一种能让你的网页更加生动活泼的程式语言，也是目前网页中设计中最容易学又最方便的语言。你可以利用JavaScript轻易的做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及简易的选举，还可以显示浏览器停留的时间。让这些特殊效果提高网页的可观性。二、使用JavaScript制作特殊效果 JavaScript简单应用之广告滚动栏代码如下： (function (win) / 定义函数如下 var callboarTimer; / 定义变量，下同 var callboard = $(#callboard); var callboardUl = callboard.find(ul); var callboardLi = callboard.find(li); var liLen = callboard.find(li).length; var initHeight = callboardLi.first().outerHeight(true); win.autoAnimation = function () if (liLen = 1) return; var self = arguments.callee; var callboardLiFirst = callboard.find(li).first(); callboardLiFirst.animate( marginTop:-initHeight , 500, function () clearTimeout(callboarTimer); callboardLiFirst.appendTo(callboardUl).css(marginTop:0); callboarTimer = setTimeout(self, 5000); );实验原理（算法流程） callboard.mouseenter( function () clearTimeout(callboarTimer); ).mouseleave(function () callboarTimer = setTimeout(win.autoAnimation, 5000); );(window);setTimeout(window.autoAnimation, 5000);/ 函数定义结束三、网站中加入JavaScript效果 在网站中加入JavaScript代码操作如下 1，定义CSS样式： header, nav, aside, menu, figure, article, footer display:block; body, div, form, textarea, label, input, ul, ol, li, dl, dt, dd, p, span, a, img, h1, h2, h3, h4, h5, h6, tbody, tfoot, tr, th, td, pre, code, form, fieldset, legend, font margin:0; padding:0; table border-collapse:collapse; border-spacing:0; caption, th text-align:left; sup vertical-align:text-top; sub vertical-align:text-bottom; li list-style:none; fieldset, img border:none; input, textarea, select font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%;color:inherit; _color:#333; *color:#333;outline:none; /*BASE CLASS*/.cfix *display:inline-block;*zoom:1.cfix:after content:.; display:block; height:0; clear:both; visibility:hidden; /*CSS*/#callboard width:600px; margin:100px auto 0; height:24px; line-height:24px; overflow:hidden; font-size:12px; background-color:#f5f5f5;#callboard ul padding:0; #callboard li padding:0; 实验原理（算法流程）2、引入jquery代码如下：3、调用到网页中代码如下： 民大相关公告栏： 公告1 我校比特工场推出“学生市场”受热捧 公告2 我校首届“南湖辅导员沙龙”成功举办 公告3 我校召开学生工作专题研讨会 公告3 重庆大学对口支援民大座谈会召开 实验结果分析及心得体会实验结果如下： 1，滚动栏标题栏 2，滚动公告1 3，滚动公告2 4，滚动公告3实验心得：一、JavaScript与Java的区别：1，JavaScript是一种动态、弱类型、基于原型的语言，通过浏览器可以直接执行；而Java是面向对象的编程语言，必须先进行编绎和连接等动作才可执行。2，JavaScript编写在HTML文件中，直接查看网页的原始码，就可以看到JavaScript程式，所以没有保护，任何人都可以透过HTML文件复制程式；而Java应用在网页的程式称为Java Applet（Applet是小程序的意思），是和HTML文件分开的。3，JavaScript的结构较为自由松散，而Java和正统的编程语言一样，结构较为严谨。4，JavaScript不具有读写档案及网络控制等功能，Java则提供了这些功能，但是JavaScript在网页内容的控制和互动性方面，比较方便快捷的。5，JavaScript多运行于客户端，而Java多运行于服务器端。二、JavaScript 的大小写敏感性： JavaScript是一种区分大小写的脚本语言。也就是说，在输入语言的关键字、变量名、函数名以及其他所有标示符时，都必须采取一致的字符大小形式。成绩评定教师签名： 年 月 日实验名称实验四 Web数据库应用实验类型设计型综合型创新型实验目的或要求1. 熟悉SQL、MYSQL的使用2. 建立简单的Web数据库3. 学习使用PHP编写服务器端程序4. 在前一次网站中加入表单，并建立动态网站实验原理（操作步骤）一、熟悉什么是SQL、MYSQL SQL(Structured Query Language)，结构化查询语言。SQL语句可以用来执行各种各样的操作，例如更新数据库中的数据，从数据库中提取数据等。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内。MySQL软件采用了GPL（GNU通用公共许可证）。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。二、建立简单的Web数据库1， 用phpAdmin创建MySQL步骤如下： 打开Xampp Web服务器，在Xampp页面的右下角的“工具”栏下选择phpAdmin点击进入； 将localhost进行常规设置和外观设置如下： 接下来创建数据库，例如：创建一个网络工程专业的数据库，如下图所示 点击“创建”，有提示“创建数据库成功”则说明创建数据库成功。 接下来是设置数据库权限，如下图所示实验原理（算法流程） 勾取设置的权限。 建表，例如建立一张网络工程1班的表，表中有五个字段分别为：学号INT(8)、姓名VARCHAR(8)、性别CHAR(2)、贯籍VARCHAR(8)、出生日期DATE，（方括号里面的字符类型，学号为主关键字），具体插入操作如下： 表创建完成如下图所示： 创建多个表，步骤同上； 所有的表创建完成之后，导出数据库。三、使用PHP调用已创建的数据库 下面的例子展示了如何首先创建一个数据库连接，然后是结果集，然后在 HTML 表格中显示数据：?php$con = mysql_connect(localhost, 网络工程专业, );if (!$con) die(Could not connect: . mysql_error(); mysql_select_db(网