实验一静态网页设计.docx

上传人:b****1 文档编号:269012 上传时间:2022-10-08 格式:DOCX 页数:8 大小:182.42KB
下载 相关 举报
实验一静态网页设计.docx_第1页
第1页 / 共8页
实验一静态网页设计.docx_第2页
第2页 / 共8页
实验一静态网页设计.docx_第3页
第3页 / 共8页
实验一静态网页设计.docx_第4页
第4页 / 共8页
实验一静态网页设计.docx_第5页
第5页 / 共8页
点击查看更多>>
下载资源
资源描述

实验一静态网页设计.docx

《实验一静态网页设计.docx》由会员分享,可在线阅读,更多相关《实验一静态网页设计.docx(8页珍藏版)》请在冰豆网上搜索。

实验一静态网页设计.docx

实验名称

实验一

实验目的

1.了解HTML的作用

2.掌握使用VisualWebDeveloper2010创建网站的基本方法

3.学会使用IIS手工发布网站

4.熟悉HTML的基本标签,掌握使用HTML标签设计网页的基本技巧。

实验设备

1.安装了VisualWebDeveloper201ODE计算机。

2.根据实验内容,准备一些图片。

3.用于实验的计算机最好可以直接连上互联网。

实验日期

2013.3.14

一、 实验预习

1.使用vill>和<li>定义无序列表。

2.使用<br/>换行。

3.使用<center></center>居中。

4.使用<sub>和vsup>实现上下标。

二、 实验内容(原理、方法、框图)

1.使用vs2010进行静态网页设计,并用IIS手工发布网站。

2.编写一个无序列表的XHTML代码,显示一个星期中每一天的中英文名称。

3.添加一个网页,用于显示某个名人说过的名言,在标题中显示他的名字,在段落中显示名人他说过的话,找到他的相片,在网页中显示出来。

4.编写一个如图示的网址列表。

3、实验过程(步骤、实现代码)

1、 运行VisualStudio2010,从其“文件”菜单中选择“新建”,选择“新建网站”。

选中“ASP.NET网站”模板,在“位置”下拉列表框中选择“文件系统”,在右边的组合框中输入用于存放网站的文件夹,单击“确定”按钮。

在“解决方案资源管理器”面板中删除Default,aspx文件。

2、 右击项目选择“添加新项”,选择“HTML页”,名称为MyFirstPagemakero

3、 编辑MyFirstPageoHtm的内容如下:

•代码一

//www.w3.org/1999/xhtml">

使用VisualWebDeveloper编辑网页

我的第一个网页

4、 调试。

5、 发布。

•代码二

  • 周一Monday
  • «i>周二Tuesday

  • 周三Wednesday"】i>

  • 周四Thursday
  • 周五Friday
  • 周六Saturday
  • <1i>周日Sunday

•代码三

周恩来

\090511233\FamousPeople\Images\2007476031171.jpg"alt=”周恩来

总理V><∕center>

入于污泥而不染、不受资产阶级糖衣炮弹的侵蚀,是最难能可贵的革命品质。

为中华崛起而读书。

周恩来我们爱我们的民族,这是我们自信心的源泉。

只有忠实于事实,才能忠实于真理。

每一个人要有做一代豪杰的雄心壮志!

应当做个开创一代的人。

我们爱我们的民族,这是我们自信心的泉源。

大江歌罢掉头东,遑密群科济世穷。

而壁十年图破壁,难酬蹈海亦英雄。

<∕p>

<∕center>

<∕body>

<∕html>

•代码四

<∕title></p><p><∕head></p><p><body></p><p><P></p><p>(a+b)<sub>2<∕sub>=a<sub>2<∕sub>+2ab+b<sub>2<∕sub><br∕></p><p>水?</p><p>:</p><p>β⅛H<sup>2<∕sup>0二氧化碳:</p><p>C0<sup>2<∕sup></p><p><∕p></p><p><∕body></p><p><∕html></p><p>•代码五</p><p><htmlxmlns="http:</p><p>〃www.w3.org∕1999∕xhtml*></p><p><head></p><p><title><∕title></p><p><styletype="text∕css"></p><p>.stylel</p><p>{</p><p>width:</p><p>230px:</p><p>)</p><p><∕style></p><p><∕head></p><p><body></p><p><tablewidth=*800*border=T><tr><thwidth="200"scope="col">网站名称<∕th><thscope=*col*class=*stylel*>网站LOGO<∕th></p><p><thwidth="200"scope="col">网站简介<∕th></p><p><thwidth="200"scope="col">网址<∕th><∕tr></p><p><tr></p><p><thwidth="200"scope="col”>新浪<∕th><thscope=*col*class=*stylel*></p><p><ahref="http:</p><p>//www.sina.com.cn*></p><p><imgborder="0”src=*E:</p><p>∖090511233Web∖MyWeb3∖Images∖新浪.jpg"alt=*新浪</p><p>*width=*200*</p><p>style=*height:</p><p>47px*/></p><p><∕a></p><p><∕th></p><p><thwidth="200"scope="col">国内三大门户网站之一<∕th><thwidth=*200*scope=*col*></p><p><ahref=*h11p:</p><p>∕∕≡τ⅛'.sina.com.cn*></p><p>httD:</p><p>//ww.sina.com,cn</p><p><∕a></p><p><∕th></p><p><∕tr></p><p><tr></p><p><thwidth="200"scope="col”>百度<∕th></p><p><thscope=*col*class=*stylel*></p><p><ahref=*httpz∕∕wwu'.baidu.com.cn*></p><p><imgborder="0"height=*40^,src=*Eι∖090511233Web∖MyWeb3∖Images∖∏度.gif"alt="百</p><p>度”width="200”∕></p><p><∕a></p><p><∕th></p><p><thwidth="200"scope="col">国内最大的中文搜索引擎<∕th></p><p><thwidth=*200*scope=*col*></p><p><ahref="http:</p><p>//www.baidu.com.cn"></p><p>http:</p><p>〃www.baidu.com.cn</p><p>h></p><p><∕tr></p><p><∕table></p><p><∕body></p><p><∕html></p><p>3、实验结果(遇到的问题及解决方法)</p><p>四、心得体会(实验收获)</p><p>1.学会HTML语言的基本语法,并掌握了使用IIS发布网站的方法。</p><p>2.学会使用无序列表,表格等标签。</p><p>3.实验中学会区分绝对地址和相对地址</p><p>实验预习20%</p><p>实验过程20%</p><p>实验结果30%</p><p>实验报告30%</p><p>成绩</p><p></p> </div> <div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div> <script> function showmore() { $(".readmore").hide(); $(".detail-article").css({ "height":"auto", "overflow": "hidden" }); } $(document).ready(function() { var dh = $(".detail-article").height(); if(dh >100) { $(".detail-article").css({ "height":"100px", "overflow": "hidden" }); } else { $(".readmore").hide(); } }); </script> </div> <script> var defaultShowPage = parseInt("5"); var id = "269012"; var total_page = "8"; var mfull = false; var mshow = false; function DownLoad() { window.location.href='https://m.bdocx.com/down/269012.html'; } function relate() { var reltop = $('#relate').offset().top-50; $("html,body").animate({ scrollTop: reltop }, 500); } </script> <script> var pre = "https://file1.bdocx.com/fileroot1/2022-10/8/f2d0304e-36bf-4028-b302-23c54a93ae89/f2d0304e-36bf-4028-b302-23c54a93ae89"; var freepage = parseInt('8'); var total_c = parseInt('8'); var start = defaultShowPage; var adcount = 0; var adindex = 0; var adType_list = ";0;1;2;3;4;5;6;7;"; var end = start; function ShowSvg() { end = start + defaultShowPage; if (end > freepage) end = freepage; for (var i = start; i < end; i++) { var imgurl = pre + (i + 1) + '.gif'; var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"实验一静态网页设计.docx_第" + (i + 1) + "页\" width='100%'/>"; $("#page").append("<div class='page'>" + html + "</div>"); $("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>"); if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1) { if(adindex > (adcount-1)) adindex = 0; $("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>"); document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML; adindex += 1; } } start = end; if (start > (freepage - 1)) { if (start < total_c) { $("#pageMore").removeClass("btnmore"); $("#pageMore").html("亲,该文档总共" + total_c + "页,到这儿已超出免费预览范围,如果喜欢就下载吧!"); } else { $("#pageMore").removeClass("btnmore"); $("#pageMore").html("亲,该文档总共" + total_c + "页全部预览完了,如果喜欢就下载吧!"); } } } //$(document).ready(function () { // ShowSvg(); //}); </script> <div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/20978049.html" title="骨科病史采集及体格检查优质PPT.ppt">骨科病史采集及体格检查优质PPT.ppt</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/20977874.html" title="超声波流量计技术方案PPT课件下载推荐.ppt">超声波流量计技术方案PPT课件下载推荐.ppt</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/20977551.html" title="秸秆资源化利用优质PPT.ppt">秸秆资源化利用优质PPT.ppt</a> </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20977312.html" title="湘潭市房地产市场分析报告PPT课件下载推荐.pptx">湘潭市房地产市场分析报告PPT课件下载推荐.pptx</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/20975423.html" title="中国现代化进程的理论反思PPT格式课件下载.ppt">中国现代化进程的理论反思PPT格式课件下载.ppt</a> </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/20168637.html" title="震撼军队部队国防教育ppt军事国防教育PPT模板优质PPT.pptx">震撼军队部队国防教育ppt军事国防教育PPT模板优质PPT.pptx</a> </li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/17395257.html" title="新湘教版七年级上册数学全册课件优质PPT.pptx">新湘教版七年级上册数学全册课件优质PPT.pptx</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/17395240.html" title="生理学课件全套PPT课件-高等代数ppt课件全套PPT格式课件下载.ppt">生理学课件全套PPT课件-高等代数ppt课件全套PPT格式课件下载.ppt</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/17395238.html" title="新北师大版七年级上册数学全册课件PPT格式课件下载.ppt">新北师大版七年级上册数学全册课件PPT格式课件下载.ppt</a> </li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/17394817.html" title="现代企业管理PPT课件下载推荐.pptPPT课件下载推荐.ppt">现代企业管理PPT课件下载推荐.pptPPT课件下载推荐.ppt</a> </li> </ul> </div> </div> <div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8"> <div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div> <div id="relatelist" style="padding-left:5px;"> <ul> <li><em class="doc"></em> <a href="https://m.bdocx.com/doc/237457.html" target="_parent" title="平面设计培训手册.doc">平面设计培训手册.doc</a></li> <li><em class="doc"></em> <a href="https://m.bdocx.com/doc/237458.html" target="_parent" title="年河南省建设工程造价员资格认证考试试题.doc">年河南省建设工程造价员资格认证考试试题.doc</a></li> <li><em class="docx"></em> <a href="https://m.bdocx.com/doc/237459.html" target="_parent" title="平治视频门禁管理系统解决方案.docx">平治视频门禁管理系统解决方案.docx</a></li> <li><em class="ppt"></em> <a href="https://m.bdocx.com/doc/237460.html" target="_parent" title="老花验配.ppt">老花验配.ppt</a></li> <li><em class="doc"></em> <a href="https://m.bdocx.com/doc/237461.html" target="_parent" title="平面设计理论知识大百科.doc">平面设计理论知识大百科.doc</a></li> <li><em class="doc"></em> <a href="https://m.bdocx.com/doc/237462.html" target="_parent" title="年产万套汽车用动力锂电池组总成系统项目.doc">年产万套汽车用动力锂电池组总成系统项目.doc</a></li> <li><em class="doc"></em> <a href="https://m.bdocx.com/doc/237463.html" target="_parent" title="年小学二年级上册综合实践教学工作总结1.doc">年小学二年级上册综合实践教学工作总结1.doc</a></li> <li><em class="pptx"></em> <a href="https://m.bdocx.com/doc/237464.html" target="_parent" title="美国文学概论课件.pptx">美国文学概论课件.pptx</a></li> <li><em class="doc"></em> <a href="https://m.bdocx.com/doc/237465.html" target="_parent" title="年初级经济师人力资源管理专业知识与实务真题.doc">年初级经济师人力资源管理专业知识与实务真题.doc</a></li> </ul> </div> </div> <div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;"> 相关搜索</div> <div class="widget-box pt0" style="border: none; padding:0px 5px;"> <ul class="taglist--inline multi"> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%ae%9e%e9%aa%8c">实验</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e9%9d%99%e6%80%81">静态</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e7%bd%91%e9%a1%b5">网页</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e8%ae%be%e8%ae%a1">设计</a></li> </ul> </div> <br /> <div > 当前位置:<a target="_parent" href="https://m.bdocx.com/">首页</a> > <a href="https://m.bdocx.com/booklist-00020.html">高等教育</a><span> > </span><a href="https://m.bdocx.com/booklist-0002000015.html">法学</a> </div> <br /> <div class="cssnone"> <iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=MyBU6XmdsGg%3d&parto=6hB5Q8UPCLUKjrWfHrmDK5jU7MMmDqP1PSkoEAZ25aHpwEzW1KyXh%2fYyq8Ux%2buL4tp0M%2bXKsJuidye4Rr%2fx5yNe1yErjsgxBeix6PSEZj2JBew1Igzd2AptbZBYLNyo7j9xsKX%2fBwqLzA7oStinauK2TrnKSiM%2fbWxs3hMeDhPH%2f%2fV9S7JMDPzBfmYWZC1q9HjIxQhhgMx3i78YjztP3N9GUUJmaueYv" frameborder="0" style="width: 0px; height: 0px"> </iframe> </div> <span id="LabelScript"></span> <script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script> </form> <div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;"> <div class="siteInner"> <p style="text-align: center;">copyright@ 2008-2022 冰豆网网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a></p><script>var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script><script>(function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window)</script> </div> </div> <div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; "> <div class="trlogoside" id="navlogo" style="display: none;"> <a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a> <div class="trnavclose" id="navclose"> <span></span> </div> </div> <div class="navcontainer"> <div class="row"> <ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;"> <li><a target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li> <li><a target="_parent"href="https://m.bdocx.com/">首页 </a></li> <li><a target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li> <li><a target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li> <li><a target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li> <li><a target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li> </ul> </div> </div> </div> <script type="text/javascript"> function stopPropagation(e) { var ev = e || window.event; if (ev.stopPropagation) { ev.stopPropagation(); } else if (window.event) { window.event.cancelBubble = true;//兼容IE } } $("#navmore").click(function (e) { $("#navcontent").show(); $("#navlogo").show(); stopPropagation(e); var navcontentwidth = $("#navcontent").width(); $('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' }); $("#navcontent").show().animate({ "right": 0 }, 300); }); $(document).bind('click', function () { var navcontentwidth = $("#navcontent").width(); $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); }); $("#navlogo").fadeOut(300); }); $("#navcontent").click(function (e) { stopPropagation(e); }); $("#navclose").click(function (e) { var navcontentwidth = $("#navcontent").width(); $("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); }); $("#navlogo").fadeOut(300); }); </script> <script> function BaseShare(title, desc, imgUrl) { var link = "https://m.bdocx.com/doc/269012.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx4f717640abfd1120', // 必填,公众号的唯一标识 timestamp: '1719786169', // 必填,生成签名的时间戳 nonceStr: '2421FCB1263B9530DF88F7F002E78EA5', // 必填,生成签名的随机串 signature: '0f9f6fb17fa8d2b8928b578d267716d96ac91b3a',// 必填,签名,见附录1 jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 //openTagList: ["wx-open-launch-weapp"]//H5打开小程序 }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.hideMenuItems({// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3 menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand'] }); var shareData = { title: title, // 分享标题 desc: desc,//这里请特别注意是要去除html link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 }; wx.updateAppMessageShareData(shareData);//1.4 分享到朋友 wx.updateTimelineShareData(shareData);//1.4分享到朋友圈 }); } } function BaseShare(title, desc, imgUrl, link) { if (link=="") link = "https://m.bdocx.com/doc/269012.html"; if (wx) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: 'wx4f717640abfd1120', // 必填,公众号的唯一标识 timestamp: '1719786169', // 必填,生成签名的时间戳 nonceStr: '2421FCB1263B9530DF88F7F002E78EA5', // 必填,生成签名的随机串 signature: '0f9f6fb17fa8d2b8928b578d267716d96ac91b3a',// 必填,签名,见附录1 jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 //openTagList: ["wx-open-launch-weapp"]//H5打开小程序 }); wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.hideMenuItems({// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3 menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand'] }); var shareData = { title: title, // 分享标题 desc: desc,//这里请特别注意是要去除html link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 }; wx.updateAppMessageShareData(shareData);//1.4 分享到朋友 wx.updateTimelineShareData(shareData);//1.4分享到朋友圈 }); } } </script> <script> $(document).ready(function () { var arr = $(".headercontent"); for (var i = 0; i < arr.length; i++) { (function (index) { var url = "https://m.bdocx.com/header.aspx"; $.get(url + "?t=" + (new Date()).valueOf(), function (d) { try { arr.eq(index).empty().html(d); } catch (e) { } try { arr.html(d); } catch (e) { } }); })(i); } }); </script> <script src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script> <script charset="utf-8"> $("img.lazys").lazyload({ threshold: 200, effect: "fadeIn" }); </script> </body> </html>