网设计试验报告_第1页
网设计试验报告_第2页
网设计试验报告_第3页
网设计试验报告_第4页
网设计试验报告_第5页
免费预览已结束，剩余12页可下载查看

付费下载

下载本文档

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

文档简介

《网站规划与设计》

实验报告院（系）名称： 学院学生姓名： 杨坤学号： 02135046专业名称： 信息管理与信息系统班级：信管1302班实验1Dreamweaver8.0基本操作及简单网页制作实验1•实验目的与要求⑴掌握Dreamweaver8.0基本操作。掌握本地站点的设置方法。熟悉制作一个简单网页的过程。掌握表格的使用方法。掌握层的基本操作方法。掌握使用框架布局页面的方法。试验内容和步骤网页编辑器基本操作⑴了解Dreamweaver8.0操作界面上各个部分的主要功能。了解主菜单、插入面板，属性面板、文档工具条，页面编辑窗口、面板集合的各项功能和操作方法。(2)了解各种常用快捷键的用法。Ctrl+S、Ctrl+Q、Ctrl+Z、Ctrl+Y、Ctrl+C、Ctrl+X、Ctrl+V、Ctrl+A、F12建立网站的基本操作打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为 mysite的本地站点的根文件夹。操作步骤如下：启动Dreamweaver8.Q选择【站点】/【管理站点】/【新建站点】命令。在站点定义对话框中，选择【基本】选项卡，在 ［站点名称］文本框中输入“mysite”。也可在【高级】选项卡中进行设置。单击［下一步］，本次试验学习的是静态站点的定义，选择第一项“否，我不想使用服务器技术”并确认。单击［下一步］，本次试验中的站点文件是复制在本地计算机上的，选择第一项“编辑我的计算机上的本地副本，完成后再上传到服务器”，单击［下一步］，在选择远程服务器的连接方式，选择“无”，即不使用远程服务器连接。单击［下一步］，直至完成。在文件夹mysite中新建名为source的子文件夹。把准备好的网页素材文件复制到source文件夹中去。制作简单网页在Dreamweaver8.0网页编辑器中新建一个页面。选择【保存】，给这个页面取一个名字“index.htm”,保存在站点mysite下。同理创建一个空页面Enter—2.htm。在index.htm页面编辑窗口，输入文字“欢迎光临我的网上书店”等等，选取文字，在属性面板上对文字的大小、字体、颜色等进行设置。保存页面将光标位于文字下方，在插入面板中找到區I按钮即可插入图片，也可以直接点击主菜单上的【插入】/【图像】实现插入图片的操作。在文件选择窗口，选择你准备好的source文件夹下的图片。点击图片，在属性面板中显示了图片的各种信息，可以根据需要，对图片的大小进行修改，也可以直接用鼠标通过拉伸改变图像的大小。插入图片以后，还可以为页面设置背景颜色或图片，点击属性面板上的【页面属性】，在对话框中可对背景颜色或背景图片进行设置。在页面的右下方输入文字“Enter”，选取文字，为它添加超级链接。在属性面板的“链接”一栏中填写链接的地址，可以是其他某个网站的地址，或者是你网站内的某个文件上(可选取 Enter—2.htm)，如果希望该页面是在一个新窗口中打开，可以在“目标”中选择“―blank”,新页面在当前浏览器打开选择“—self”。这时，一个简单的页面完成了，保存后按F12进行预览。制作表格表格的创建、插入、删除、复制和移动等操作操作步骤如下：创建一个名为exe1.htm的网页文件，单击【插入】面板的比按钮，在【插入表格】对话框中页面上输入4行5列的表格，在表格中输入如图1—1所示的内容。并在表格上方增加标题“信管专业各班平均成绩表”，标题格式设置为方正舒体、5号、粗体、#003366。科目数据库原理计算机组成实验英语精读电子商务00级1班7385777901级1班8379829101级3班90808592图1—1各班平均成绩表在表格“01级3班”前插入一行，内容为“0l级2斑、85、82、88、82”。在表格中“计算机组成实验”列前插人一列，内容为“计算机组成、69、73、75、80”。将00级1班这一行移到表格的最后一行；删除“英语精读”这一行。单元格的拆分、合并和格式化操作使表格中的数据全部居中，使整个表格在页面上居中。将表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单元格，内容改为“计算机组成和实验”，设置为居中、黑体、5号。选择【命令】【格式化表格】命令，将表格套用系统预没的格式 simple3。导入外部数据和表格排序在Excel中新建图1—1的表格保存为value.xls文件。创建名为value.htm的网页文件。选择【文件】【导人】【Excel文档】命令,就可导入指定的数据文件。选中表格的“电子商务”列，选择【命令】【排序表格】，在对话框中设置参数。在【排序按】下拉列表框中选择按【列5】(即第5列)排序，选择【按数字排序】和【降序】。观察排序后的结果。表格套用格式是系统预设格式“AltRows:green&yellow”。表格设置：【边框】为3,【边框颜色】为#FFOOOO。层的基本操作方法创建一个名为exe2.htm的网页文件。可设置相关的背景图片。在网页合适的位置上，选择【插入】 【布局对象】中，分别创建两个名为source和shadow的层，Z-index的尺寸分别为2和1。在层中输入文字“书一人生的伴侣，知识的源泉”，两个层中的文字的颜色分别为红色和黑色。移动层，使两个层略微错开重叠，使文字带有阴影效果。如图1—2所示。打开层的浮动面板，选中【防止重叠】复选项，然后移动名为source的层，试比较该复选项选与不选的区别。使用框架布局页面的方法创建一个名为exe3.htm的网页文件。选择【插入】【HTML】【框架】【左侧及上方嵌套】命令。同理创建一个名为 exe4.htm的网页文件，选择【上方及左侧嵌套】，比较两种框架的不同之处。删除exe4.htm的网页文件中创建的框架，然后创建【上方】框架，并把【上方】框架改为【上方及左侧嵌套】框架，调整框架的大小。分别用鼠标在【框架】面板中选中主框架(mainFrame)、左框架(1eftFrame)、顶框架(topFrame和整个框架集(也称框架组)，观察结果。在主框架(mainFrame)中插入底部框架(bottomFrame)，选中左框架(1eftFrame)插入顶部框架，将左框架分割成上(topFrame)下(1eftFrame)两部分。分别在框架面板中选中topFrametopFramel、mainFrameleftFramebottomFrame5个框架，并给这5个框架设置背景颜色共#AAFFFF、#CCFFFF、#CCFFCC、#CCFFCC、#CCFFFF。保存框架文件。设置exe4.htm框架文件的框架集的属性。各项参数分别是：【边框】为“是”【边框颜色】为#00CCFF,【边框宽度】为2像素，左边【列】为100像素。分别设置【列】的单位，在【单位】下拉菜单中分别选择【像素】、【百分比】、【相对】命令，观察不同的结果。在topFrametopFramel、mainFrameleftFramebottomFrame框架中，可插入层、表格、图片、动画、文字等。保存网页文件，进行预览。代码及其结果：/<head>aht quiv=，，rConLtent&Type，vcontent="text/html:charset=u±f8/>的凤上书店</title>-type=rt，teKt/cs3,v>body.,±djth{font—size:24px:colors*FOO;]body{background~color:CFFC:}a{:f口nt—size: 36px:color:#00F:font—veight:bold;£口nt^si：yle;italic:}a:link{text™decoration:none:}a:visited{itesft—dBcotion:ricizie;color:#FOO:}a:hover{text—decoration:none:}a:active{text—decoration:none:color：#906；</s-tyle></head><body>〈tableuidthJlOO%"border^Tcellspacing=*O*cellpadding=rtO,v><tr><tdalign=*centefbgcoWCCCCCC"〉〈hl〉我的网上书Ji</hl></td></tr><tr><tdatablewidths*10W*border=*Talign=tfcenter*bbgcolor=*#99FF99*cellpadding=*O*cellspacings*10*><tr><tdalig^center" valign=，niddle*Xing sr^sourcel/1.L jpg' vidth=*236* height=*204" /></td><tdalign=*centerrt valign=rniddle*><mg s^sourcel/1.2, jpg' vidth=*189* height=*255" /></td><tdalign=*centerrt valign=rmddle*XiJig src="sourcel/l・3・ im' ndth="255" height=*255" /></td></tr〉<tr><tdalign=*centerAvalign=rniddle*><iJigsrc="sourcel/l・4・iug"叮dth="20（Theight二"200*/></td><tdalign=*centerf，valign=*niddley><mgsrc="sourcel/l・5・iw'vidth=*255rheight二"255"/></td><tdaligr^^center''valign=*niddlevXmgsrc="£ourc@l/l・6.iD2‘『1出心"255'height二"255"/></td></tr〉</table></td></tr><tr><tdheight=<r43*align=*tcenter<valigrp*idddle,v><pre>欢?0光临本店!〈ahref="errter・htJil"target=r_b1anky>ENTER</a></pre></td></tr>〈/table》</body></htnil>Dwre«s：dM（v）*a（M）hhuo»x（q帕d・d（w）mm■o・3 .I.L］冀J典:曲吕曰自®二豆a尼三u」Adobe8/o皿心bndnhtnl1x“<w川祕其 -43-^厶一Adobe8/o皿心b鳩劇暨I期褪Q&感比民矗辟粽戢总^..,..1^ !•* 1^' 1^' ^.,... 1^.... .1^..,.J>\（..1^....1^....1^...J^.,J?^...1^我的网上书店I■ 21cs咤mayMTmu竺汕MAM孑右trld・B/左左21M牖⑴▼QQ我的网上书店I■ 21cs咤mayMTmu竺汕MAM孑右trld・B/左左21M牖⑴▼QQ目休⑹串对齐—UK» T»nl»wwe别・■I：<：CMl'Oxiii&旳■石丽滴刁 »无fecss33）无 -MUDoUrMallo-mu ・\（3186JmIE本熄乂U ABOW•'•tlMC€><出a鸽：teMIMl ✓02<htmlxmlns=**http://www・*3・org/1999/xhtml*><head><metahttp-equiv=**Content-Type**content=*text/html:charset=utf-8**<title>enter贡面</title><styl2type=**text/css^>body{background-color:#FFC}#apDivl{position:absolute;left:168px：top:173px:width:740px:height:56px:z-index:2:color:#F00:font-size:36px;font-weight:bold：■t©xt—align:center;}#apDiv2{position:absolute:left:172px:top:173px:width:740px;height:56px:z-index:1:font-size:36px:color:#000:text-align:center:font-weight:bold;}</style></head><body><div:d="apDivl">书-人生的伴侣，知识的源泉</div><divid=^apDiv2*>书-人生的伴侣，知识的源泉</div><p> </p><p> </p><p> :</p><p> </p><p> </p><p> </p><p> </p>ZX/p><p811211=*center"Ximgsrc="sourcel/06・gif"width二"534"height=*:ZX/p></body></html>> MMTAHit・一U北匕心。himT；压炉导朗可豪対Mcwfhtml**QU•丘车JUfl麻屋m Q■軼e ■■ 田白*旳口.辽IlK理耳k童犷■亏unD口砂珂 QRf坷上钳miitCX*+w—人京的（Hi麵洌俯源泉实验2网页制作综合实验i.实验的目的与要求：使用框架构建完整页面。制作一个完整的页面。掌握创建和应用CSS样式表的方法。2作业2.1内部样式表的应用2.1.1主要代码截图<style>*{margin:O;padding:0;font-size:14px;}ul{list-style:none;height:50px;border-bottom:#F605pxsolid}.navli{height:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;text-align:center;float:left;margin-top:20px;}.navlia{text-decoration:none;}li:hover{background-color:#F60;color:#fff;}</style></head><body><ulclass="nav"><li><a class="on" href="#"/> 首        页</li><li><ahref="#"/>新闻快讯</li><li><ahref='#7>产品展示</li><li>vahref="#7>售后服务</li>vlixahref="#"/>联系我们</li></ul>v/body>v/html>2.1.2页面运行截图•ru-a ir | ・=最常访问火狐音方站点 慕课网-国内最大的IT”.. 绿叶学习网幵张啦.hel… 中国站恒站首页 薪闻快讯 产品展示 售后服务 联系我们2.2外部样式表2.2.1主要代码截图<linkrel="stylesheet"type="text/css"href="style/reset.css"><linkrel="stylesheet"type="text/css"href="style/indexb.css"><title>无标题文档</title></head><body><divclass="headerBar"><divclass="topBar"><divclass="comWidth"><divclass="leftArea"><ahref="#"class="collection">收藏本站</a></div><divclass="rightArea">欢迎<ahref="#">［登录］</a><ahref="#">［注册］</a></div></div></div><divclass="logoBar"><divclass="comWidth"><divclass="logofl"><ahref="#"><imgsrc="image/.jpg"alt=""/></a></div><divclass="search-boxfl"><inputtype="text"class="search-text"><inputtype="button"class="search-btnfr"value="搜索"></div><divclass="shopCarfr"><spanclass="shopTextfl">购物车v/span><spanclass="shopcfr">0</span>v/div>v/div>v/div>vdivclass="navBox">vdivclass="comWidth">vdivclass="shopClassfl"><span>全部商品分类<i>v/i>v/spans>vdivclass="shopClass_box">vdlclass="shopClass_item"><dt><ahref="#"class="b">手机</a><ahref="#"class="b">数码</a><ahref="#">合约机</a></dt>vdd>vahref="#">华为荣耀v/a>vahref="#">单反</a><ahref="#">智能设备</a></dd>v/dl>v/div>v/div>v/div>vulclass="navfl">vli>vahref="#"class="active">数码城v/a>v/li>vli>vahref="#">吃货俱乐部v/a>v/li>vli>vahref="#">团购v/a>v/li>vli>vahref="#">发现v/a>v/li>vli>vahref="#">二手特卖v/a>v/li><li><ahref="#">名品汇</a></li>v/ul>v/div>v/div>v/div>v/body>v/html>Css代码截图：/*logo*/.logoBar{background:#1d7ad9;height:85px;}.logo{padding-left:41px;padding-top:13px;}.search-box{width:430px;height:35px;margin-left:185px;margin-top:23px;font:14px/35px"微软雅黑"「MicrosoftYaHei";}.search-text{width:350px;height:25px;backgrond-color:#fff;padding:5px;}.search-btn{width:70px;height:35px;background-color:#F60;}/*购物车*/.shopCar{width:145px;height:35px;font-size:14px;font-family:" 微软雅黑"，”MicrosoftYaHei";background-color:#ff8c00;margin:23px50px00;}.shopText{height:100%;width:87px;border-right:#e27a00 solid1px;background:url(../image/gou.jpg) 10px centerno-repeat;text-indent:40px;font:14px/35px'微软雅黑"「MicrosoftYaHei";}.shopc{width:56px;height:100%;background:url(../image/jianshu.jpg)33px centerno-repeat;text-align:left;font:14px/35px "微软雅黑","MicrosoftYaHei";text-indent:10px;}/*导航*/.navBox{height:35px;background-color:#1369c0;color:#FFF;clear:both}.shopClass{width:190px;text-align:center;font:14px/35px"微软雅黑","MicrosoftYaHei";}.nav{height:35px;}.navli{float:left;padding:035px;}.nava{height:35px;display:inline-block;color:#FFF}.nava:hover{color:#90C;}/*小列表*/.shopClass_box{background-color:#06F;}.shopClass_item{padding:10px14px;}222页面运行截图实验四网页程序设计一、 实验目的通过几个实例练习，了解JavaScript、VBScript在网页中的应用。二、 实验内容和操作步骤1.显示一个动态的时钟操作步骤：进入DW-噺建一个页面->点击“HTML。在指定位置输入以下代码可以实现一个动态的时钟。

在<在<body>和</body>之间插入下列代码:<bodyonload=displayTime()>//vscriptIanguage="javascript">functiondispIayTime(){vartoday=newDate();//varhours=today.getHours();//varminutes=today.getMinutes();varseconds=today.getSeconds();minutes=fixTime(minutes);seconds=fixTime(seconds);//引入fixTime一个0()函数，使分和秒可以正常显示，对于小于定义时钟显示的函数定义日期对象从日期对象中中获得时间信息10的数字则在该数字前加varthe_time=hours+":"+minutes+":"+seconds;//将时间、字符串组合在一起并写出window.document.the_form.the_text.value=the_time;//把表格的值重新写一遍，相当于刷新时间the_timeout=setTimeout('displayTime();',500);//每半秒钟执行一次该函数，即500毫秒}functionfixTime(the_time){if(the_time<10){the_time="0"+the_time;}returnthe_time;}</script><formname="the_form">欢迎光临我的网站 现在是北京时间：<p><fontface=" 宋体"><inputtype="text"name="the_text"size="16"></form></body>运行，可以看到浏览器显示如下：欢迎光临我的翩站现在是北京时间：2•鼠标事件和浏览器的提示栏及IF语句的运用1)鼠标事件和浏览器的提示栏在DW中的HTML弋码中下输入以下源代码： 当你把鼠标放在链接上时，看一下状态栏上显示的内容。<html><body><ahref="" onMouseOver="window.status='你现在把鼠标放在链接上面！！！'">请把鼠标放到这里来</a><br><ahref="" onMouseOver="window.status='你现在把鼠标放在链接上面！！！'">请把鼠标放到这里来</a></body></html>

新建一个Html文件，运行，把鼠标移到上述链接后，就触发了 onMouseOver事件，使得浏览器状态栏（window.status）的内容变成指定的文字了。2）IF语句的运用在网页的HTML!弋码中输入下面的源代码:<body>vscriptIanguage="JavaScript">varjava=prompt（” 你喜欢JAVASCIRPT吗？","输入“Y”或者“N'"）;if（java=="Y"）｛alert（" 欢迎你，来吧，我们继续学习吧！ "）;｝elseif（java="N"）｛alert（"它很有趣的，不学多可惜，唉 ：（"）；｝</script></body>其中mpt（）就是一个窗口对象的方法，其基本作用是，当装入We

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

温馨提示

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

最新文档

评论

0/150

提交评论