网页开发手记（HTML+CSS+JavaScript）(1).docx
<!DOCTYPEhtm1PUB1IC,z-W3CDTDXHTM11.0Transitiona1/ZEN*“http:www.w3.org/TR/xhtm11DTDxhtm11-transitiona1.dtdzz><htm1Xn11nS="http:WWw.w3.org1999xhtm1zz><head><metahttp-equiv="Content-Type“content=z,texthtm1;charset=gb23127z>tit1e门户网站-文章页/tit1e<scripttype=z'text/Javascriptzzsrc=zzjsf1ash.jsz"><script><1inkhref=z,csssty1e.csszztype="textcss"re1=z*sty1esheet,z><sty1etype="textcss”>#contentheight:500px;# COntenttt1eftwidth:520px;height:580px;f1oat:1eft;margin:IOpx;background:#fff;ttcontent#1eft.prowidth:500px;height:550px;margin-right:IOpx;margin-top:IOpx;f1oat:1eft;background:#fff;# content#1eft.pro.ttwidth:100%;co1or:#000;padding-bottom:2px;text-a1ign:center;font-size:14px;padding-top:5px;# +htm1ftcontentS1eft.pro.ttheight:16px;padding-top:5px;ttcontent1eftIittptxtwidth:100%;height:60%;border:Ipxso1id#ccc;# PtXtp1ine-height:1.2em;text-indent:2em;# content4rightwidth:250px;height:580px;f1oat:right;margin-right:IOpx;margin-top:IOpx;background:#fff;# COntent#rightu1width:55%;height:200px;margin:Opxauto;margin-bottom:IOpx;Padding-top:2px;text-a1ign:center;background:ur1(img1ibg.gif);)Itcontentbrightu11i#msg_topheight:20px;width:96%;co1or:#fff;padding-top:5px;margin:Opxauto;font-weight:bo1d;border:Ipxso1idttfff;background:#000ur1(img/top_bg.gif);)# Content#rightu1u1co1or:#fff;width:100%;height:160px;tfcontentttrightu1u11imargin-top:12px;# content#rightdivwidth:100%;height:250px;text-a1ign:center;h4co1or:#d00;font-size:14px;border-bottom:Ipxso1id#d00;margin-bottom:1Opx;ttcontentbrightdivimgdisp1ayb1ock;width:100px;height:100px;margin:Opxauto;margin-bottom:IOpx;border:Ipxso1id#000;<sty1e><head><body><divid="top”><div>用户名<inputtype="text"SiZe=T0"va1ue="">密码<inputtype="PaSSWOrd“SiZe=10Va1Ue=><se1ect><optionSe1eCted="se1ected”不保存<oPtion>option)保存一周/option)<option>永久保存<oPtiOn><se1ect><inputtype="SUbinitVaIUe=登录“CIaSS=btn"><inputtype="button“Va1Ue="注册CIaSS="btn/><div><div><divid="ad”><divid="1ogo"><imgSre="imgIOgO.gif><div><divid二SWf><scripttype=z,text/javascriptyz>setF1ash(,swfswf.swf，“630，55)；<script><div><div><divid="nav”><ahref="#1(1=":111(1。*>首页</><ahref="M>社会<a><ahref=#">财经<a><ahref="#>体育<a><ahref="#>娱乐<a>< ahref="M>女人<a>< ahref=#>博客<a>< ahref="M>社区<a>< ahref="#>主题<a><ahref=z,>IT<a>< ahref=#>美食<a><c1ivid=,zsearchzz><inputtype="text"SiZe="20"va1ue=""/Xinputtype=“button"va1ue=搜索C1aSS="btn"><div><div><divid="content”><divid=zz1eftz>><u1CIaSS=pro><1i>你现在的位置是首页-栏目名称-文章<1i><1iC1aSS=tt"Xh3>文章标题：美宇航局计划开发大型网游<h3X1i><1iC1aSS="tt>发表时间：2008-1-1<1i><1iC1aSS=tt>作者：佚名<1i><1iid="ptxt,>3文章内容：大多数人可能都听说过美国军方开发的视频游戏美国陆军(America,sArmy),这款游戏是美国军方出资制作的旨在配合征兵而推广的免费派送游戏。自2002年7月4日发布到现在，已经有超过600万的注册玩家。现在，NASA,美国宇航局则计划也推出一款以自己为主题的游戏，与美国军方的游戏不同，这款游戏将采用网上常见的MMORPG模式，即在线大型网游。<p>卬>美国宇航局计划基于MMO方式建立一款游戏引擎，其中要求包括强大的物理能力，可以在游戏中进行试验和研究。并且，它应该基于现实进行模拟，同时可以让美国的大多数学生都可以熟悉和学习美国宇航局工程和科学任务。<p><p>当然，这个游戏看起来更像是一个教育课题。实际上美国宇航局在开发页面上也进行了解释，这个游戏的目的就是作为一套可持续的，支持教育项目的综合环境。玩家可以模拟环境下协同工作，同时获得游戏体验。通过游戏，美国宇航局希望能帮助学生深入了解各种各样令人兴奋的职业，使他们在将来能够投入到研究领域，并最终工作于美国宇航局的远景太空探索中。<p><1i><u1><div><divid="right”><u1><1iid=*msgtop”>便民信息<1i><1i><u1><1i>天气预报I交通违章<1i><1i>列车查询I国家代码<1i>Gi>手机归属I体育彩票</1i><1i>身份号码I电视节目<1i><1i>固话区号I邮政编码<1i>Gi电话查询I短信服务<1i><u1><1i><u1><h4>热点人物<h4><div><imgsrc=,zimgdoga.jpgz,/><imgsrc=zzimgdogb.jpg/><div><div><div><divid=,bottom,z><h5>公司地址：湖南省XX大厦XX楼<br/>服务热线：0731-4100000000传真:0731-4310000E-mai1：admin<br/>版权所有2005-2010门户传媒<br/>湘ICP备0000000号<h5><div><body><htm1>在浏览器地址栏输入http1oca1hostartic1e.htm,浏览效果如图23.18所示。图23.18文章页面最终效果至此，门户网站的3个主要模板制作已经完成，通过后台程序的处理可生成大量的栏目页面和文章页面，并且有着一致的样式风格。23.10注册域名并发布门户网站在前面的章节中学习过了网站的域名注册和上传，如本例笔者在某ISP处申请了虚拟主机,分配的分地址为rt200.100.100.100wO接着笔者又注册了域名“"，接下来的域名解析等操作和个人网站一样。ISP将提供FTP地址，以便用户将自己的网站上传到服务器空间。例如，ISP提供了ftp:200.100.100.100地址,用户名为admin,密码为password,笔者使用FTP软件即可上传网站。笔者在FTP软件的站点管理器中添加:新建站点：II新建组一赢'应用Q)J连接©I关闭图23.19FTP软件添加站点设置单击“连接”按钮可马上连接到ISP提供的服务器目录，用户即可上传自己的门户网站文件。不过本书学习的门户网站只是让读者了解大概的结构及前台页面制作的基本要素，在实际制作中大部分工作将依赖于后台程序。23.11小结本章和上章相似，同样是对于前面所学知识的综合实践。虽然门户网站看似结构复杂，但是分析过后，可以简化为3个页面的制作。本章着重学习了首页各种细节的制作，在页面主体内容布局中大量应用了列表元素，可见div元素并不是唯一的布局元素。对于各大网站大量的FIaSh动画，本章也提供了相应的解决方案，避免了虚框的出现。而图片轮换效果由F1aSh动画提供，本章只学习如何利用JaVaSCriPt传值给FIaSh实现效果。由于动态技术在网站中的重要性，本例只制作前台页面部分，读者需继续深入学习动态网站技术,才能完整地制作门户网站。
