网站模板制作培训教程

1、网站模板制作教程为了满足广大论坛会员的要求，我站组织人员编写了此教程，方便会员根据自己的爱好制作模板。如果有不足之处敬请原谅，如果你有好的建议，希望你能联系我们。网站模板主要有三大部分组成。1、网站头部（top）网站身体（left和index）网站底部（foot）。根据我站制作摸板的基本流程对网站的三大部分作如下讲解：在开始前我先做一些声明，因为本站用到的一些文件名是固定的，所以您在制作模板是应严格按照我站的命名，否则会对您的使用带来不便。TOP的制作1、新建一个文档如图MacromedaDr.IDreaniweaveirMX2DD4邑网站復檢二因tcpjn,png-XW境辑号奁看迪快改画文斗

2、命令©站点sa（w）帮助的样式1无T日冷K|K|*=|ttfi（L）1戢认宇悸工犬、翻F3厂二匚!n=i±sjtii目标©章喇一祷国®比曰KKumarto：.filAdobePhotos.2、当进入后我们要删除一些代码，只保留第5句代码(vmetahttp-equiv="Content-Type"content="text/html;charset=gb2312">这些代码及每个文件的功用会在后面作介绍，在这里先不讲3、把您所要用到的所有图片保存到同一个文件夹中命名为images776px.并4、排版几行几列

3、可根据自己的爱好进行，但表格宽度定为进行保存，文件名为top_cn.asp这里以这个模板为例5、在代码区键入一些代码，<!-#includefile="conn.asp"-><!-#includefile="ad.asp"-><title>v%=Jsitename%>v/title>vscriptsrc="count/count.asp?view=admin&fy=2">v/script>v%=Script%>6、加入网站标志，在代码区键入<!-#inel

4、udefile="more_top_logo.asp"->iffilMacrornedHDre-amweaverMX.2004-iwark/lo口ld.q春口+文件（日笔尚唱兰岳也3ttA<D悻改阿文机I）命利口站点畑WWrf脸回母|匡）團+鞘十間习|出眉用tcp_iori.asp"土代码I二丼甘胡设计占掾贬丄设计IT加世;再ll_*应A3程审抵筌检更器IT”文坤艺|li"rI事抱枫Elp|訪GIa鲁剔I国ZJ塀UpMJHMrfaand|砧e»Phobwhop|®j阿站抿癒制作dPlacromedia叶母n,TiJCt_C

5、n.4L5PTi.Kplyjbi.尊.匹ptan*_cn.«.sp*tan<-_«n<&spLop_h-i.k.x|!tOp=COL«EPfeoTLtroLeovntCKTdlb即打okSOSJ£455曰i*CSyslraace1. hs2. htm3. htj>id.sipchpckouXjbi左ci*dkout_cn.chKkq电tjflfbJUi.A/LpCpnt«it_bit<.fnMmPlihi4LSP»EPSRU：2005-15ZZ：D8ZZ：26位置放在vIMGsrc="imag

6、es/top_cn.png">的上面如图Md£nirrmliaDrcinvw'TdYrMK2004-(uiiirli/t0|i_cn.«ir*|i>-.fflJ<l総匡1聂|国里”苗固回|冏嗣韋用L.htintop_cn9!ajpfl1X"代码二拆分旦谁i十£斩鬆L设计p代码应用程序标签检査器£丈悴IS博20212223n<TR><T&vAlign=top><IIK5te-'linages/1png'></TD></TR>Ti

7、sysTttrI本地衩EJT?-c|a|e2T1IrrrfiTg博t_CI1-AXprfTexieiiup&tinejigasp</Lt3nfl_CJLUSp鼻迪nFtop_big.a.pBQ2*-55,3SI/fi秒SOss-sB-SSg甬s-七op.口1.4isptQP_*1X1EPEeocitrolcountcss那LCEtboOikingeinag&sin武各EmmuplaL>l£ile1.htnKtn5j£ad.A.trprfckeckoutbig.&dh«cko*at_«i压亡轄4rfhonttfiijbi

8、百nPiifi却醐曲皿豪叩0C：lDgjnriiMT后mrdjAdobaPhotoshopJ筍阿站®f!ft|'tf'MacrcpiediaO¥37i.J園容岂O22:3L这时当你点击设计区你会发现一些ASP联接已经自动生成如图JiMacruimediaDreamweaYerMX20G4-|wtH-k/lopEn_4ksp|曰X文用目细扬闰抵入包文事D附歆Q站点侮SQ(帮皈也蠻曰釦門画"妙*圈叼I冏爭k】,htmtop_cnQ5pSinjcludfifile='ad-arp'"d<titleXSsJsit<na

9、>e%></titLe>5l<scnptsrc=*ccuftt/count,a3pviev=adn.itUfef尸W</露血:1巩G<1S=3GriptSI|-.IABLEhelght=63ce115pbcldr=DcellPa.ddiiiR=Ovidlh=776al10.=cent-er"boedeE-O>8<TBODY>Jj:卜硬计:h代问丄卜应用程IT»后盛也兰需了”文件迟|本协tl医1二C炒十b诂|氏V«Mt_Cn.«xp%b*5pt3H_Cin.«£>gf臣&

10、quot;P/Ok.匹pupcdBbttr«lcountcs>dt£U"lb>DOkIH«FI£.bitn乐3.hb«4ft_ailasp*血血卫1_,学屿1ifcheckaTit_ciL直p工dwrhMV-tn“R缺CdhJi.E.p0CoEkUlltbig.0Rnnh*ridhift钉|®&02ar/L28或幵帕|蘑0血丹O匚;、Dixuffi已也aidh甜仃虻亡Ph&toshop型阿站规谟制柞pc/MacrmedaCream,7、进行简体，繁体及英语三个版本的联接简体Ianguage.asp

11、?lan=cn&info=web繁体Ianguage.asp?lan=big&info=web英语Ianguage.asp?lan=en&info=web如图i亍串抽项目ifiii中“总誉归24亍存如果需要时间显示您也可以根据您的排版进行时间设置，代码为<!-#includefile="time_cn.asp"->8键入简体首页代码<!-#ineludefile="more_top_menu_cn.asp"->如图(?)MocromtdiiiDreamweaverMXZUO4wwk/top.cru.aisp

12、*4因常用娥E毎|悶團*鞘”岡叼|整讓M刪血g”II首M“rm±Hgg.gQmnnMBnd”,|葩開加呗如I曰网站ui£ti悴“，I越阿站雹軽1肚”|R氐坨到这步为止TOP就算完成了，你这是可以检查一下是否有遗漏的地方。F面我们开始制作LEFT在这里我就讲一下数据库调再开始前我相信大家心里已经有了明确的排版用的一些代码.1、会员登陆框<!-#ineludefile="moreeft_sidejmemo1_cn.asp"-><!-#ineludefile="Member_cn.asp"-><!-#inclu

13、defile="moreeft_sidejmemo2_cn.asp"->如图您可以看到8，18，25行处的代码tgp_pn.agp立件編辑|：磴查看也换入0）修改迴）文本（I）全（©站痪窗口（世）帮助W富用MacrGmE-dSaDr£tfulweav>erMX2004一wrudki.iileft_Lri.a£p計创代码二Iff分1jj设计攻标EI笛12345S1891J111213141516<>etahttp-equiv="Con"tent-Type"centent='teKt/h

14、tnl;charset-gb2312><一一ALinsludefile=*eonnaasp*>< 1一一#incLudefile=*css/style,css"一、< TAELEcellSpacing®calIPad±Lng=©widthsIbordar=0><IR><TDXdivaligcenttr-></div><!一一includef11s=Jrmore.lsftsidejmeno1cnap“-二<IMGstc="inaees/left_i_cn-eif&

15、quot;></TD></TR><TR><TDAliflnp-top><TAHLEee11Spacing.-QicellPadding=Owidths1'95%1131igrL=eenteEborder=0>恂1920212223242E師272B2930313233<TBppY><TR><TD><!-SincLudefila=rM.asp"-X/TD/<7TR><7TABLE</TDX/TR><TR><TD</TR

16、><IR><TD><1一一include£ile=*:m.ore_left_sidejmeno2_.cnasp"一一><hr>灯JtGstc="litaecis/ltft_2_切eifn></TD></TR><TR><TDvAlien=top><TABLEcellSpa亡iin沪0cellPadding-Qwidths*95%aaligneentetftnbsp:<,'TD>bordez=0><TBODY>酎网站隈

17、孩|<3C:&ocLmeint5：,jAdobePhotos.|</MacromediaDr.htnexcbudset.jsFA.Cflma.'Ep£ite_ntL-5le_bi11JSASFJSCoile.&.spJiinpurlErcpLuiEiLa.EE<*spELEfReftlier_il>L£较spHemliErciLasp饰pNoreC-opyrl由I11i于本地琐目很选中.总坯期g于爭Florft_CdpyrLght_ti*hf”立件L贵球设计IM应用理吊卜飯芸检丑霍】Kdd£d/J/沪dJfaGe_r

18、>'atie_en41flsLsWctt3w£fciQl_ibi!gAipEonl.w<?pfOOLEpFrien.dLinJk_bLt4FtiendLLtlIe_celuFrien4Link_«h14尊ch耳.JsstndAX_n«a.Eic_big.andtK_nuiic_en_1aJidgx_nu5ii2、最新动态框<!-#ineludefile="News_cn.asp"-><!-#ineludefile="moreeft_sidejmemo3_cn.asp"->v%lfV

19、otehidden="1"then%><scriptsrc="showvote.asp">v/script>v%EndIf%><!-#includefile="moreeft_sidejmemo4_cn.asp"->-|g|X|如图39、41、53、55处的代码QMacfnmeriiADreannvieaveifMX2OD4-niwtf/teft-Cn.EKp丈件（巳编韻亘走插入冋（血文本徐歆口站点宙口辿）稱助凶亀回魁圈團”飽”园叼|冏”庐tap_cn.a5pts芝仃3spl.htmIeft_

20、cn.a5p-o'XII画畑固拆纠上设计I蚩囱:35363?3339414243444E46474849505152535455565758 漲<TD>STABLEcelLSpacingMcellPaddin-OwidthF,rlOOK，border=0><WDY><7<TD><I#include于】le="U&vs_crhasjT><br><itincludefi1e=Anore_1eft_sidejjneno3_cn*.asprf一></TD></TR>&l

21、t;/TBODT></TABLE></TD></TR></TBODY></TJiBLE></rL></TR><TR><TDvAlign=tapXTABLEcellSpacing=DcellPad.ding=Oiridth=*95%rtalign=ceinterhorder=0><TBODY><TK><TDXTABLEcellSpacina=4cellFiwWin£=Oi#i(ithrlOO«,border=0><TBQD

22、T><TR>-*lr'u.：t*7hicdei-'”)乂虚八“i.|”i：i?-''sji：',-'t-.sp'/sin?1-Hr.:一"，<br><!(includefile=*MQre_left_sidejne*Q4_'CrLasp*></TD></TR></TBODT></TABLEX/TOjT1K/1tl?3日口1曰垂亘丨亘I臓三I匚II岂曰垃1圳睹Q单元格水平©默认三宽®年换行（&）厂背咼毎二更面is

23、性.1d）FT23咼叫标题©厂背繭1赳呀口I网站模板格式（E）I无：样式d）尻字萍（Q）薛孚旷三|大小|3结杲Q)C:>ocumBnts.1冷甘dotePhotdis,.,dMacromcdaDr.-*应用理序:卜标签橙査於:!:m富|lriiiEasysit-er亍|本地视副二議C!|&竹&倉|国!|设计工MM00dMhln甫Eolrndpl.js宦exoludet.jsrfFacedefine.R£p#facemiasicabng.wrfface.rwuEic.cii.a:fftce.iwusic.en.asflashvQ£咛Ffflqt

24、.bif.放却xp氏Qt.顿xpFrig曲JLipkJbig.彳FnaitdLink_cii,.asa皿肛工:血逼仏uing：clig.jsisn.d.ex_muxic_Lig.1n.d.ex_fhusiC_cil.tistdeK_mu±ic_eiL.<JS.ASFJSCodle.血pJuapwl.aspLuiuage.aspLefl_en.aspilenterbiig.恥pHh.ter.ciLaspflen'b&reTiaspi_CpyrieMIflura_CopyriIflflTPCPT>VF1rljtlJ1T3、友情链接框<!-#inelude

25、file="FriendLink_cn.asp"-><!-#ineludefile="moreeft_sidejmemo5_cn.asp"->如图78、83处的代码-1J|X|丈件(E)蝙辑旧登看辿插入诙文本命孰口站点忆窗口帮助®5牛MicromEdiaDireaniwederMXZKXH-wt«rk/left_cn>«p|网站複觇|®U曲ocummt5二JAdobePhotM二|ioF'MacrGniedla&r,|亡lEasyzit«r立件巴代玛卜应用程序2J両

26、直ElSc|爱o朗倉|團fXOliupl-Ih-tn«xc>ludpl.jseiobiidEet.jsF&cedefine&spfftca.nisiG.big.eftCi_r»iisi-e_H：jL.13f4et_nhUiie_tTL.flashvotm.svffootbig.aspaspopFrsftadLifik_b&£屯FnendLink_csi.asFrieikdLink_«ii.a;i.gchf；jse-L!ftdftM_ffiU3iC_CTL.tindex_musi4i_eii.wJS.ASPJSCodle.昭p

27、Jwpiirlnp11Weftber_big.幌flenberCTi.aspHorgKt_lli0re_CopyriWnT亡fhTiVT、23:17到这步为止LEFT制作完成了让我们看一下设计区的现在的样子是怎样的如图MarromediaDreamweaverM5t2004-work/Heft_cn-arsp酸E息|圉匡I”會k同旧|咼+犀、?、.、'?.、?.*?、?.*?、.、”、.*?、?瞩刑a丨參吻团叩q</HacromedDrliop_cn.aspbop_cnsaspl.htm文件（日编揖（©查看（幻ffiAOJ修改（H）文本谢哼（口站点倉口（W帝助凶辛用寸宦

28、新动态:丄删I土剧I设计厨趣会员登录友債琏接剧|友惰氓接法串破接G>C:DocumBnts.AdobePhotos.L谢十几代玛«xoludpl.hlnEstMudpl.jsexobudEet.j*cFe,ca_dt£iBi&tspEaceusiaig.tftet_muiic_cii.asface_rwusic_eji.屯flushvte"F£<SDt_tlg：.“p£cdl_ch.upfool_fen.aspFnendLinkbiig.wFritanJLiTtk_cnasFraandlLink_bn.n.:iiftilg.

29、jsindeMmuEicTbag.index_musiccn.eJS.ASPJSCadt：.upJwipurl.asp.Lwfuai«宜wp石LI®£t_en.*spMHenlier_Big.&spHLWenleren.直gpWIJIenbereDasps贴列上enyrifiMHnr«_CopyriHdF*ITnfltV-iIj-J|亍斗甩顶目谶中，总井护牛手好了下面我们来做INDEX在Index里包括了Foot,好下面我们开始，和上面一样排版可根据您自己的喜欢做，但有些代码我们是规定的，这点会在后面我会讲到。下面让我们抓紧时间时间开始吧！1、&

30、lt;!-#ineludefile="top_cn.asp"->2、<!-#includefile="css/style.css"->3、<!-#includefile="left_cn.asp"->4、<!-#includefile="Content_Cnlndex.asp"->5、<!-#includefile="foot_cn.asp"->如图代码区MacrciriiedltaiDireaniHieaverMXZOtM->wark

31、/ilricleK_criaa£p文件®爲S®査看创JffiAtD修改蚀文本(!)命仝。站点烷宙口I盘)WBfi(tl)indexcn.flsptopri.6pijpp/rhBwp丨i,htmTt/mewp'肩M(&A'OHPjvuv_wwwMWWwwuv?_wwwwMwwwwwa>wu!_wrxr如<p>二二£fiLew日賈工且斟丁C貝I曲du拦仁典證二</P>愛凹2克兰换洌型舉匹P<7td>""一冬掘CZTBODYX/TABLE></TD><

32、/W</TBODY.></TABLE></TD></TR></TBQDY></TABLE><TABLEcBllSpacm£=DcellFaddiiiE=Owidth=T76aligrv=centerborder=0><TBODT><TR><TDXIMGheigh1:=5src=flinages/botton_lagifwidth776X/TD></TR></TB0DT></TAfiLE><TABLEvidth=776bQ2r

33、dcr=0align=cmierctllPaddinOcellSp-acing=0bgcdlor-FFFFFF-><TBODY><TRvAliEn=topaliEn=mddle><TD><TAI!LEcellSpacing=0CisllFadding=Owidtb="100%"aliffn=centtrbordtr=0><TBQDT><IRali£n=n.iddle><TDheights?</TR></TBODT></TABLEX/TD><

34、/TR></TB0DT>"TABLE</BODYX/HTJIL>|<!?fincludefilesfoot.crLasp：yTD>><tM*><tt<dT><lr><td>氓上.XttodrXtr口11086|阿站模板|CDmsefts|如口血Phcitg"|日不旳口耐川日*.以上是Index的所有代码，再看一下设计区的如图-|g|XIMarrornefiiaDreamweaverMX2004-wnrk/irideM.cn.asp文件（E）编韻査看插入修换画空丰儒叙

35、9;站点宙口辿）帮助面常用魅E（J|匡）團箱”同旧|咼宙a会员登录:;:;-:胡代码3跚马设计&标飽=Te3tenaneM>理肚啟top_cn.a5ptopjcn.aspLhtmi|leftjrn.asp友情镀接nm*Fnmmn%“mm*f%f*%RF<bnir>|l010it5BD,82E/12胡刑綁总国血2冷-1006|匣网站複&.-.|QCifkcumBnls.!AftbsPbios.JHadnynMi£f心蟲戲霉023;H好了到这步为止摸板的三大块基本完成了，但我们下边要进行预览一下如图httjp:/127a0.0.L/asp/work/ii

36、ndeK_cn.a5pHaKthon文件旧编删曰査希加收報楼快捷稣®逛项Q工具W窗口（W）帮助也n'0'Ot<T*L*)'lT'-iJ嶋*IS勺*UEb匚10*8T©¥fl-yj、&*亍1Windows柚Wind咖M詁d箜免费紹越目定k链接国*£3辺回耗嗨邃亲C:Documcnts.”hltpJ/12T.C.晁新动态*1非耳厨谢恋nfa三0*色o芋节L6M醐并始|眉區皿5M|tJioee|回网姑根極|http:卄GO,.,AdoUePhotos，.|MaqroniedaDr.,.1|蟲步運註O23:50基本上没问题了，下面我们要进行比较烦琐的操作你做好准备了吗？1、把刚才做好的top打开，并另存为top_big.asp2、把所有的_cn替换成_big3、把Jsitename替换成Fsitename4、把top_big.asp另存为top_en.asp5、把所有的_big替换成_en6、把Fsitename替换成Esitename聪明的朋友已经能够猜到因为我们要做简、繁、英三个版本。好了top到这里就做完了。接下来我们来做Left步骤和上面差不多1、把left_cn.asp另存为left_big.asp2、