教案实验五课程设计一、课程设计的目的和要求掌握Web前端编程的相关技术，包括HTML、JavaScript、JQuery等；完成课程设计报告。
二、实验内容使用所学知识，创建一个人网站。
1．功能要求：☐首页（公告、新闻、友情链接、登录等）☐身份证查询☐Email发送☐聊天室☐留言簿2．设计要求：⏹功能基本实现；⏹使用DIV+CSS；⏹界面美观。
三、实验重点和难点相关技术的灵活使用界面的美观和谐四、实验过程1、先构思网站框架，构思之后想好主题，并稍做记录。
2、用table和div+css代码写出网站框架，调整好页面，在主界面中添加内容和背景，以及链接。
3、添加子网页，使主页具有留言和注册等功能。
4、主界面代码：<html><head><title>my house</title><link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" id="mylink"/><script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script><script src="lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script><script src="lib/ligerUI/js/plugins/ligerTab.js"></script><script src="lib/jquery.cookie.js"></script><script src="lib/json2.js"></script><script src="indexdata.js" type="text/javascript"></script><script type="text/javascript">var tab = null;var accordion = null;var tree = null;var tabItems = [];$(function (){//布局$("#layout1").ligerLayout({ leftWidth: 190, height: '100%',heightDiff:-34,space:4, onHeightChanged: f_heightChanged });var height = $(".l-layout-center").height();//Tab$("#framecenter").ligerTab({height: height,showSwitchInTab : true,showSwitch: true,onAfterAddTabItem: function (tabdata){tabItems.push(tabdata);saveTabStatus();},onAfterRemoveTabItem: function (tabid){for (var i = 0; i < tabItems.length; i++){var o = tabItems[i];if (o.tabid == tabid){tabItems.splice(i, 1);saveTabStatus();break;}}},onReload: function (tabdata){var tabid = tabdata.tabid;addFrameSkinLink(tabid);}});//面板$("#accordion1").ligerAccordion({ height: height - 24, speed: null });$(".l-link").hover(function (){$(this).addClass("l-link-over");}, function (){$(this).removeClass("l-link-over");});//树$("#tree1").ligerTree({data : indexdata,checkbox: false,slide: false,nodeWidth: 120,attribute: ['nodename', 'url'],onSelect: function (node){if (!node.data.url) return;var tabid = $(node.target).attr("tabid");if (!tabid){tabid = new Date().getTime();$(node.target).attr("tabid", tabid)}f_addTab(tabid, node.data.text, node.data.url);}});tab = liger.get("framecenter");accordion = liger.get("accordion1");tree = liger.get("tree1");$("#pageloading").hide();css_init();pages_init();});function f_heightChanged(options){if (tab)tab.addHeight(options.diff);if (accordion && options.middleHeight - 24 > 0)accordion.setHeight(options.middleHeight - 24); }function f_addTab(tabid, text, url){tab.addTabItem({tabid: tabid,text: text,url: url,callback: function (){addShowCodeBtn(tabid);addFrameSkinLink(tabid);}});}function addShowCodeBtn(tabid){var viewSourceBtn = $('<a class="viewsourcelink" href="javascript:void(0)">查看源码</a>');var jiframe = $("#" + tabid);viewSourceBtn.insertBefore(jiframe);viewSourceBtn.click(function (){showCodeView(jiframe.attr("src"));}).hover(function (){viewSourceBtn.addClass("viewsourcelink-over");}, function (){viewSourceBtn.removeClass("viewsourcelink-over");});}function showCodeView(src){$.ligerDialog.open({title : '源码预览',url: 'dotnetdemos/codeView.aspx?src=' + src,width: $(window).width() *0.9,height: $(window).height() * 0.9});}function addFrameSkinLink(tabid){var prevHref = getLinkPrevHref(tabid) || "";var skin = getQueryString("skin");if (!skin) return;skin = skin.toLowerCase();attachLinkToFrame(tabid, prevHref + skin_links[skin]);}var skin_links = {"aqua": "lib/ligerUI/skins/Aqua/css/ligerui-all.css","gray": "lib/ligerUI/skins/Gray/css/all.css","silvery": "lib/ligerUI/skins/Silvery/css/style.css","gray2014": "lib/ligerUI/skins/gray2014/css/all.css"};function pages_init(){var tabJson = $.cookie('liger-home-tab');if (tabJson){var tabitems = JSON2.parse(tabJson);for (var i = 0; tabitems && tabitems[i];i++){f_addTab(tabitems[i].tabid, tabitems[i].text, tabitems[i].url);}}}function saveTabStatus(){$.cookie('liger-home-tab', JSON2.stringify(tabItems));}function css_init(){var css = $("#mylink").get(0), skin = getQueryString("skin");$("#skinSelect").val(skin);$("#skinSelect").change(function (){if (this.value){location.href = "index.htm?skin=" + this.value;} else{location.href = "index.htm";}});if (!css || !skin) return;skin = skin.toLowerCase();$('body').addClass("body-" + skin);$(css).attr("href", skin_links[skin]);}function getQueryString(name){var now_url = document.location.search.slice(1), q_array = now_url.split('&');for (var i = 0; i < q_array.length; i++){var v_array = q_array[i].split('=');if (v_array[0] == name){return v_array[1];}}return false;}function attachLinkToFrame(iframeId, filename){if(!window.frames[iframeId]) return;var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);var fileref = window.frames[iframeId].document.createElement("link");if (!fileref) return;fileref.setAttribute("rel", "stylesheet");fileref.setAttribute("type", "text/css");fileref.setAttribute("href", filename);head.appendChild(fileref);}function getLinkPrevHref(iframeId){if (!window.frames[iframeId]) return;var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);var links = $("link:first", head);for (var i = 0; links[i]; i++){var href = $(links[i]).attr("href");if (href && href.toLowerCase().indexOf("ligerui") > 0){return href.substring(0, href.toLowerCase().indexOf("lib") );}}}</script><style type="text/css">body,html{height:100%;}body{ padding:0px; margin:0; overflow:hidden;}.l-link{display:block;height:26px; line-height:26px; padding-left:10px; text-decoration:underline; color:#333;}.l-link2{text-decoration:underline; color:white; margin-left:2px;margin-right:2px;}.l-layout-top{background:#102A49; color:White;}.l-layout-bottom{ background:#E5EDEF; text-align:center;}#pageloading{position:absolute; left:0px; top:0px; background:white url('loading.gif') no-repeat center; width:100%; height:100%;z-index:99999;}.l-link{ display:block; line-height:22px; height:22px; padding-left:16px;border:1px solid white; margin:4px;}.l-link-over{ background:#FFEEAC; border:1px solid #DB9F00;}.l-winbar{ background:#2B5A76; height:30px; position:absolute; left:0px; bottom:0px; width:100%; z-index:99999;}.space{ color:#E7E7E7;}/* 顶部*/.l-topmenu{ margin:0; padding:0; height:120px; line-height:31px; background:url('image/27.jpg')repeat-x bottom; position:relative; border-top:1px solid #1D438B; }.l-topmenu-logo{ color:#E7E7E7; padding-left:35px; line-height:26px; padding-top:10px; } .l-topmenu-welcome{position:absolute;height:24px;line-height:24px;right:30px;top:2px;colo r:#070A0C; padding-top:90px;}.l-topmenu-welcome a{ color:#E7E7E7; text-decoration:underline}.body-gray2014 #framecenter{margin-top:3px;}.viewsourcelink { background:#B3D9F7; display:block; position:absolute; right:10px; top:3px; padding:6px 4px; color:#333; text-decoration:underline;}.viewsourcelink-over {background:#81C0F2;}.l-topmenu-welcome label {color:white;}#skinSelect {margin-right: 6px;}.标题{font-family:"楷体";font-size:60px;font-weight:200;color:#F9C;}</style></head><body style="padding:0px;background:#EAEEF5;"><div id="pageloading"></div><div id="topmenu" class="l-topmenu"><div class="l-topmenu-logo"><img src="image/头像.jpg" /><font class="标题"> 小乖</font></div><div class="l-topmenu-welcome"><label>皮肤切换：</label><select id="skinSelect"><option value="aqua">默认</option><option value="silvery">Silvery</option><option value="gray">Gray</option><option value="gray2014">Gray2014</option></select><a href="index.aspx" class="l-link2">服务器版本</a><span class="space">|</span><a href="个人界面.htm" class="l-link2">首页</a><span class="space">|</span><a href="demos/主页/注册/个人注册.htm"" class="l-link2">登录</a></div></div><div id="layout1" style="width:99.2%; margin:0 auto; margin-top:4px; "><div position="left" title="My House" id="accordion1"><div title="古风空间" class="l-scroll"><ul id="tree1" style="margin-top:3px;"></div><div title="江湖留言"><div style=" height:7px;"></div><a class="l-link" href="javascript:f_addTab('listpage','主人寄语','demos/寄语/寄语.htm')">主人寄语</a> <a class="l-link" href="demos/留言板/留言板.htm" " target="_blank">留言</a></div><div title="关于我们"><div style=" height:7px;"></div><a class="l-link" href="demos/主页/子网页/导航/时光.htm"" target="_blank">关于我们</a> </div></div><div position="center" id="framecenter"><div tabid="home" title="我的主页" ><iframe frameborder="0" name="home" id="home" src="demos/主页/个人主页.htm"></iframe></div></div></div><div style="height:32px; line-height:32px; text-align:center;">Copyright © 2011-2014 </div><div style="display:none"></div></body></html>5、主页代码：<html><title>我的小屋</title><head><script type="text/livescript">function get_time(){var date=new Date();document.writeln((date.getYear()+1900)+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日")}</script><style type="text/css"></head><body background="11.jpg"><EMBED src="子网页/日志/清漪-画情透骨.mp3" autostart="true" loop="true" width="0" height="0"></EMBED><table width="920" height="1276" border="0"><tr><td height="47" colspan="4" align="right"><pre><a href="注册/个人注册.htm">注册</a> <a href="#">帮助</a> <script> get_time(); </script></tr><tr><td width="3" height="97"> </td><td colspan="3" align="center"><font class="bt">我的小屋</font></td></tr><tr><td height="57"> </td><td colspan="3" align="center" height="100px" background="image/导.png"><font class="dh"><pre><a href="个人主页.htm">首页</a> <a href="子网页/导航/心情.htm">文字涂鸦</a> <a href="子网页/导航/个人档.htm">个人信息</a> <a href="子网页/导航/好友.htm">好友</a> <a href="../空.htm"">帮助</a> <a href="子网页/导航/相册.htm">相册</a></pre></font></td></tr><tr><td height="103"> </td><td width="197" background="xx.jpg" ><embed src="14.swf" width="188"></embed></td> <td width="706"><pre>社会娱乐：<a href="/html/2014-06/09/content_30998658.htm">内蒙古中国画学会成立</a> <a href="/dsph/2014/06/09/740980.html">黄多多萌照来袭</a></td></tr><tr><td height="552"> </td><td colspan="3"><div id="t"><div id="t1"><div id="t25">精品推荐</div><div id="t26"><li >[原创小说]<a href="子网页/日志/苏幕遮·红豆.htm" style="text-decoration:none">苏幕遮·红豆红豆生南国，相守更相思。