基于HTML的网页设计学院：数学与计算机学院班级：软件10班专业：软件工程姓名：魏媛媛学号：1060610014014一、设计背景背井离乡，踏上远征求学的路途，“独在异乡为异客，每逢佳节倍思亲”，所以我想把我的家乡——杨凌，介绍给大家，让大家了解杨凌，走进杨凌。
二、实验构想具体我想分为六个模块，分别为：简介杨凌、领导对杨凌的关怀、教育、特色美食、旅游观光以及杨凌的闪光点。
因为这是一个简介一个地方，所以风格较为严谨，明快，简洁大方，从而选定其主色调为浅蓝色，这个颜色显得大方又明快，让人觉得严谨又舒心；同时，作为一个整体的网页，它的每一张网页的颜色要一致，字体、风格也都要统一，这样才能显得合为一体的感觉；其次，在具体制作的过程中，不能让页面显得拥挤，要做的大气一些，这样才能更好的展示出杨凌的风采。
三、实验步骤与方法1.通过浏览相关网站感受学习优秀网站的设计风格，总结其要点，构想出自己网站的大致布局结构；2.查阅手机相关资料、素材；3.主页的设计与实现：0）利用backgroung-color属性设置页面背景颜色，为整个网页定下主色调；1）使用“表格”对页面进行布局，顶部放置一张图片2）制作导航条：利用超链接标记<a herf=”url”>字符串</a>用来定义超文本链接，连接到另一个页面；3）在中心添置一些相应内容；4）在底部加入一些版权信息内容，使页面显得正式；4.其他页面的制作1）使用表格对页面进行布局规划能将页面划分为三个区域，页头与页尾部分与主页大致一样；2）内容部分又分为两块，左半边为内容导航，左下方使用一个表单form,可以利用表单获取用户信息，是网页具有交互能力，当用户填写完信息后做提交（submit）操作，比赛男单的内容将从客户端浏览器传送到服务器上，有Web服务器上的服务器端脚本程序处理。
右半部分为文字性的简介，为了有效地对这些文字内容进行更好的控制，使用“显示样式与层叠样式表CSS”技术，从而更好地展现该网页文字内容。
四、所用技术1.表格对页面布局进行设计2.<marquee></marquee>标记实现文字或图片的滚动3.body相关事件属性，例如onmouseMove、OnMouseUp等4.form表单，使网页具有交互能力5.JavaScript脚本语言6.页面内播放声音以及影视片段7.显示样式与层叠技术CSS技术8.浏览器内部对象9.使用行为五、关键代码（一）使用表格对页面布局进行分割<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html;charset=utf-8"/><title>杨凌之窗</title></head><body link="#0066CC"alink="#FF6600"><table width="936"border="0"cellspacing="0"cellpadding="0"><tr><td width="366"align="center"bgcolor="#CCFFFF"><font size="+4" face="华文行楷"color="#0000020">杨凌之窗</font></td><td width="570"><img src="图片/标题类/23.JPG"width="571" height="175"align="right"/></td></tr></table><table width="935"border="0"cellspacing="0" cellpadding="0"bgcolor="#CCFFCC"><tr><td width="169"align="center"><strong><a href="Untitled-2.htm">简介杨凌</a></u></strong></font></td><td width="123"align="center"><strong><A href="Untitled-3.html">领导关怀</A></strong></td><td width="160"align="center"><strong><a href="Untitled-4.htm">教育</a></strong></td><td width="198"align="center"><A href="Untitled-5.html"><strong>特色美食</strong></A></td><td width="199"align="center"><strong><A href="Untitled-6.html">旅游观光</A></strong></td><td width="86"align="center"><strong><A href="Untitled-7.html">闪亮点</A></strong></td></tr></table>。
截图如下：（二）<marquee></marquee>实现滚动效果<marquee scrollamount="4"scrolldelay="10"direction="left"><img src="图片/images2.jpg"><font size="+2"color="#408080"face="方正舒体">杨凌人民欢迎您</font></marquee>截图如下：（三）form表单以及浏览器内部对象的使用<script language="JavaScript"type="text/JavaScript"><!--function MM_popupMsg(msg){//v1.0alert(msg);}function MM_openBrWindow(theURL,winName,features){//v2.0window.open(theURL,winName,features);}//--></script><td bgcolor="#D1FCF7"><p>杨凌示范区与杨陵区有区别吗？</p><form name="form1"method="post"action=""><input type="radio"name="radiobutton"value="radiobutton">有</form><form name="form2"method="post"action=""><input type="radio"name="radiobutton"value="radiobutton">无</form><form name="form3"method="post"action=""><input name="Submit"type="submit"onClick="MM_popupMsg('感谢您的参与！');MM_openBrWindow('Untitled-10.htm','','')"value="提交"></form></td>截图如下：图1图2（四）使用object<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="687"height="493"><param name="FileName"value="E:\素材\flash\魅力杨凌美丽西农.wmv"></object>（五）使用显示样式与层叠CSS技术、插入频频、JavaScrpit脚本语言的应用<style type="text/css"><!--body{margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}.style1{color:#FF0000}--></style></head><body><bgsound src="我相信哈理工-铃声.mp3"loop="2"><table width="600"border="0"align="center"cellpadding="0" cellspacing="0"><tr><td height="248"align="center"><p><img src="图片/景色/西农.jpg"width="600" height="450"></p><table width="500"border="0"cellspacing="0"cellpadding="0"><tr><td height="35"align="center"><style>.jc{position:relative;}</style><script language="JavaScript1.2">var ns6=document.getElementById&&!document.allvar ie=document.allvar customcollect=new Array()var i=0function jiggleit(num){if((!document.all&&!document.getElementById))return;customcollect[num].style.left=(parseInt(customcollect[num].style.left)==-1)? customcollect[num].style.left=1:customcollect[num].style.left=-1}function init(){if(ie){while(eval("document.all.jiggle"+i)!=null){customcollect[i]=eval("document.all.jiggle"+i)i++}}else if(ns6){while(document.getElementById("jiggle"+i)!=null){customcollect[i]=document.getElementById("jiggle"+i)i++}}if(customcollect.length==1)setInterval("jiggleit(0)",80)else if(customcollect.length>1)for(y=0;y<customcollect.length;y++){var tempvariable='setInterval("jiggleit('+y+')",'+'100)'eval(tempvariable)}}window.onload=init</script><span id="jiggle0"class="jc"><b><font size="+3"color="#339999"face="华文行楷">西北农林科技大学欢迎您！</font></b></span></td></tr></table></td></tr></table>（六）JavaScript脚本语言的应用<SCRIPT LANGUAGE="JavaScript"><!--Begintext1="杨凌与杨陵的区别杨凌区和杨凌农业高新技术产业示范区的区别：杨凌农业高新技术产业示范区，简称杨凌区或杨凌示范区，是中国唯一的农业高新技术产业示范区。