用photoshop切图css+div

《用photoshop切图css+div》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSSTemplateTutorialPleasetakeyourtimetovisithttp://www.FreeCSS.infoTableofContentsStep1–Settingup……………………………………………….…page3Step2–Codingthebasics……………………………………….page5Step3–Codingandslicingtheheader………………….…page9Step4–HorizontalCSSNavigation…………………………page15Step5–Colum

2、nFloating………………………………………..page20Step6–Codingthecontent………………………………….…page23Step7–Rightcolumnnavigation…………………………….page27Step8–Finishingoff………………………………………………page30Step1–SettingUpOkaywelcometopartoneofthetutorial.Whatyouwillbedoinginthispartissettingeverythinguptobeg

3、incodingyourtemplateforyourwebsite.Thistutorialisforslicingadesignmadeinphotoshopandcodingitindreamweaver.Youcanalsoaccessexamplecodeatvariousstagesthroughthetutorialifyouhaveanyproblems.Thingsyouwillneed:DreamweaverorothersoftwarePhotoshoporsimilareditingsoftwar

4、eColortoHTML-FreedownloadExamplePSDoWithoutslicingalreadydone(gettaught)oPre-sliced(slicedreadyforyou)IwouldalsohaveInternetExplorer6installedinsteadof7andFirefox.Youcanthenpreviewyourtemplateindifferentbrowsersasyougoalong.Anothertipwouldbetobookmarkw3cvalidator

5、tocheckyourcodingforerrors.CreateanewfolderThefirstthingtodoistosetupasitefolderforthedesign.Goto"MyPictures"andcreatea"tutorial"folder.Thisisthefolderwhichalltheimagesandfileswillbestoredin.Youcanthensimplyuploadthecontentsofthefoldertoyourwebsitehosttogetitonline

6、.SetupanewsiteindreamweaverOpenupdreamweaverandclickonthesitetabthennewsite.Thisshouldbringupaboxlikeinthescreenshotbelow.Typeinthenameofyourwebsiteandclicknext(dontbotherwithURL).Thenselect"donotuseserver"andclicknext.Haveeditlocallyselectedandbrowsetofindthefolde

7、ryousetupinforthedesign.Onthenextscreenselectlocal/oncomputerandclickthefoldertoselectthefolderyousetup.Thatshouldbeyourwebsitesetuptobeginthecodingprocess.BasicallyDreamweavermakesthefolderyousetupyour"root"folder.Itmakesthingsaloteasierwhensavingorlinkingtothings

8、.SetuptheindexfileThemainfileswhichwillholdthecodeforthetemplatearegoingtobeindex.htmlandstyle.css.Istartofmytemplateswithjustindex.htmlandwillsp