网站设计实验报告_第1页
网站设计实验报告_第2页
网站设计实验报告_第3页
网站设计实验报告_第4页
网站设计实验报告_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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

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

第五步：检测Apache服务是否正常工作，可以通过左侧的导航条上的“状态”功能来查看，如下截图：

实验原理（算法流程）

实验二：HTML、Dreamweaver、CSS+DIV简单网页制作

HTML的特点：1、简易性，HTML版本升级采用超集方式，从而更加灵活方便；2、可扩展性，HTML语言带来了加强功能，增加标识符等要求，并采取子类元素的方式，为系统扩展带来保证；3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。

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

DIV:因为<div>是一个块级元素，所以它的内容会自动地开始一个新行。<div>固有的唯一格式表现就是换行。可以通过<div>的class或id应用额外的样式。可以对同一个<div>元素同时应用class和id属性，但更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组，而id用于标识单独的唯一的元素。

实验原理（算法流程）

相关代码如下：

</style></head><body><divid="Layer1"></div><divid="Layer2"><imgsrc="3XHL2B`_MY05QG@63~JBX1R.jpg"width="1092"height="49"/></div><divid="Layer3"><imgsrc="Gucn_76887_200992515144460CheckCurioPic3.jpg"width="347"height="370"/></div><divid="Layer4"><imgsrc="file:///C|/Users/ausu/Pictures/ASUS壁纸/WWE/024.jpg"width="749"height="370"/></div><divid="Layer5"><imgsrc="file:///C|/Users/ausu/Desktop/WWE美摔100分-WWE美国职业摔角在线观看_files/logo.png"width="362"height="121"/></div><divid="Layer6"><tablewidth="1090"height="117"border="1"><tr><tdwidth="175"><imgsrc="20120501011439312.jpg"width="175"height="235"/></td>

<tdwidth="174"><imgsrc="20120518115353403.jpg"width="174"height="234"/></td><tdwidth="170"><imgsrc="20120519102549623.jpg"width="170"height="234"/></td><tdwidth="175"><imgsrc="20120522101738617.jpg"width="175"height="234"/></td><tdwidth="177"><imgsrc="17-11061611455Y30.jpg"width="174"height="237"/></td><tdwidth="179"><imgsrc="17-111010215629156.jpg"width="184"height="234"/></td></tr></table></div><divid="Layer7"></div><divid="Layer8"><tablewidth="342"height="365"border="1"><tr><td><divalign="center"class="STYLE2"><pclass="STYLE14">WWE摔角最新赛事</p></div></td></tr><tr><td><divalign="center"class="STYLE3"><ahref="/SD/2308/"实验原理（算法流程）

class="STYLE4">2012.05.18SD</a></div></td>

</tr><tr><td><divalign="center"class="STYLE3"><ahref="/RAW/2320/"class="STYLE4">2012.05.22RAW</a></div></td></tr><tr><td><divalign="center"class="STYLE3"><ahref="/SD/2328/"class="STYLE4">2012.05.25SmackDown</a></div></td></tr><tr><td><divalign="center"class="STYLE5"><ahref="/PPV/2281/"class="STYLE4">2012《超越极限》</a></div></td></tr><tr><td><divalign="center"class="STYLE5"><ahref="/PPV/2329/"class="STYLE4">2012《无路可逃》</a></div></td></tr></table></div><divid="Layer9"><tablewidth="1094"height="54"border="1"><tr><tdwidth="130"><divalign="center"><spanclass="STYLE12"><ahref="/news/"class="STYLE12">新闻</a></span></div></td><tdwidth="130"><divalign="center"><spanclass="STYLE12"><ahref="/shows/"class="STYLE12">赛事</a></span></div></td><tdwidth="130"><divalign="center"><spanclass="STYLE12"><ahref="/shows/"class="STYLE12">选手</a></span></div></td><tdwidth="131"><divalign="center"><spanclass="STYLE12"><ahref="/shows/"class="STYLE12">图片</a></span></div></td><tdwidth="131"><divalign="center"class="STYLE12"><ahref="/shows/"class="STYLE12">音乐</a></div></td><tdwidth="130"><divalign="center"class="STYLE12"><ahref="/films/"class="STYLE12">影辑</a></div></td>实验原理（算法流程）<tdwidth="130"><divalign="center"><spanclass="STYLE12"><ahref="/wwesm?ref=http%3A%2F%2F%2Ffilms%2F"class

="STYLE12">微博</a></span></div></td>

</tr></table></div><divid="Layer10"><tablewidth="726"height="129"border="1"><tr><tdwidth="171"><imgsrc="punk100.jpg"width="171"height="116"/></td><tdwidth="173"><imgsrc="sheamus.jpg"width="173"height="118"/></td><tdwidth="177"><imgsrc="cc100.jpg"width="177"height="118"/></td><tdwidth="177"><imgsrc="nvzi100.jpg"width="177"height="123"/></td></tr></table></div></body></html>

实验结果分析及心得体会实验结果截图如下：心得体会：通过本次实验初步掌握HTML、CSS、DIV的应用，实验技巧欠佳还需更加努力。成绩评定教师签名：年月日

实验名称实验三JavaScript实验类型设计型综合型创新型√实验目的或要求熟悉JavaScript使用JavaScript制作特殊效果在前一次建立的网站中加入JavaScript效果实验原理（操作步骤）JavaScript是一种能让你的网页更加生动活泼的程式语言，是目前网页中设计中最容易学又最方便的语言。可以利用JavaScript轻易地做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及可显示浏览器停留的时间。1、运算符:赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算、位操作运符符和字符串运算符。2、表达式:运算符和操作数的组合称为表达式，分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。3、语句：Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句：赋值语句、switch选择语句、while循环语句、for循环语句、dowhile循环语句、break循环终止语句和continue循环中断语句。4、函数：函数是命名的语句段，可以被当作一个整体来引用和执行。1）函数由关键字function定义；2）函数必须先定义后使用，否则将出错；3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名；4）参数是传递给函数使用或操作的值或对象，它可以是常量，也可以是变量，也可以是类的对象；5）return语句用于返回函数或表达式的值，当函数返回值类型不为空时，必须有如果返回值类型为空，没有reurn项。5、对象：Javascript的一个重要功能就是基于对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。6、事件;用户与网页交互时产生的操作，称为事件。绝大部分事件都是用户的动作所引发，如：用户按鼠标的按键，就产生onclick事件，若鼠标的指针在链接上移动，就产生onmouseover事件等等。在Javascript中，事件与事件处理程序配套使用。7、变量：如varmyVariable="somevalue";实验原理（算法流程）相关代码如下：<divid="Layer13"><SCRIPTlanguage=javascript><!--BirthDay=newDate("january06,2012");//改成你的计时日期today=newDate();timeold=(today.getTime()-BirthDay.getTime());sectimeold=timeold/1000secondsold=Math.floor(sectimeold);msPerDay=24*60*60*1000e_daysold=timeold/msPerDay

daysold=Math.floor(e_daysold);e_hrsold=(e_daysold-daysold)*24;seconds=Math.floor((e_minsold-minsold)*60);hrsold=Math.floor(e_hrsold);e_minsold=(e_hrsold-hrsold)*60;minsold=Math.floor((e_hrsold-hrsold)*60);//--></SCRIPT><SCRIPTlanguage=javascript><!--document.write("距离无路可逃赛事还有："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒");//--></SCRIPT></div></SCRIPT><SCRIPTlanguage=javascript><!--document.write("距离无路可逃赛事还有："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒");//--></SCRIPT></div><divid="Layer14"><imgsrc="u=81650954,1861109275&fm=52&gp=0.jpg"name="u"border="0"><scriptlanguage="JavaScript">varb=1;varc=true;functionfade(){if(document.all);if(c==true){实验原理（算法流程）b++;}if(b==100){b--;c=false}if(b==10){b++;c=true;c=false}if(b==10){b++;c=true;}if(c==false){b--;}u.width=150+b;u.height=125-b;setTimeout("fade()",50);}</script></div>实验结果分析及心得体会实验结果截图如下：心得体会：通过本次实验对JavaScript及Java的学习和使用有了更深入的了解，JavaScript语言，通过浏览器可以直接执行，Java语言，须先进行编绎和连接等动作才可执行；JavaScript的结构较为自由松散，Java结构较为严谨；Java具有读写档案及网络控制等功能，JavaScript在网页内容的控制和互动性方面，比较方便快捷的。成绩评定教师签名：年月日

实验名称实验四Web数据库应用实验类型设计型综合型创新型√实验目的或要求熟悉SQL、MYSQL的使用建立简单的Web数据库学习使用PHP编写服务器端程序在前一次网站中加入表单，并建立动态网站实验原理（操作步骤）

一、熟悉SQL、MYSQL

SQL(StructuredQueryLanguage)是结构化查询语言。SQL语句可以执行各种各样的操作，如：更新数据库中的数据，从数据库中提取数据等。MYSQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内。MYSQL软件采用了GPL（GNU通用公共许可证）。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MYSQL作为网站数据库。

二、建立Web数据库

步骤如下：（1）、打开XamppWeb服务器，在Xampp页面的右下角的“工具”栏下选择phpAdmin点击进入；（2）、将localhost进行常规设置和外观设置如下：

（3）、创建数据库点击“创建”，出现提示“创建数据库成功”即：说明创建数据库成功。实验原理（算法流程）（4）、建表，如建立一张名为“WWE”摔角表，表中有2个字段分别为：姓名、冠军次数，具体插入操作如下：（5）、WWE摔角数据表创建完成如下图所示：实验原理（算法流程）

三、使用

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论