Download - Building a Web Site with Rapid Weaver 7 & the Foundation ... · PDF fileBuilding a Web Site with Rapid Weaver 7 & the Foundation Theme – Part 01 – New Project

WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]

Page 1 of 10

BuildingaWebSitewithRapidWeaver7&theFoundationTheme–Part01–NewProject.OpenRapidWeaverandyouwillseethisopeningpage,1. Startanewproject, Sincethisisgoingtobetheveryfirstproject,youmustfirstcreateit. Clickon‘CreateanewRapidWeaverproject’ Youwillnowseesomethinglikethis, An‘Untitled’projectwillnowbecreatedandyouwillseesomeoptionsinthetopleftcorner, Clickonthe‘Add’box,whereyouseethesmall+sign.Thisdisplaysthefollowingoptions, Clickonthe‘Stacks’icon.


Page 2 of 10

Thefirstpage‘UntitledPage’willnowbedisplayedinthepagessectionatthetopleftsideof thescreen.This,bydefault,isgoingtobetheHomePageinyourwebsite, Now,doubleclickonthename‘UntitledPage’youwillthenbeabletorenamethepage,by overtypingthecurrenttextwith‘HomePage’andthenpressingtheenterkeyonyour keyboard. Youwillnowseethatthenamehaschanged, Atthispoint,Isuggestthatyouchangethedefaulttitleof‘MyWebsite’tothenamethatyou aregoingtogiveyourownsite. Todothis,gototheSettingssectionandclickon‘General’


Page 3 of 10

Youwillnowseethatthereareanumberoptionsdisplayedontherightsideofthedialog box, Atthisstage,Iwon’tbeusingalloftheseoptions(thatcomeslater)fornow,justchange thoseitemsthatappearatthetopofthepagetowhateveryouwanttoappearonyour website,i.e.Title,Slogan(ifyouwantaddonetoyoursite),Footer,EmailAddressandWeb Address. Allofthiscanbedoneatalaterstagebut,itwillbemucheasiertodoitnow. Youshouldfinishupwithsomethingsimilartothisnextscreenshot, Sofar,sogood,youareonthewaytocreatingyourfirstwebsite! Beforeproceedinganyfurther,savetheworkthatyouhavedonesofar,asaRapidWeaver project.


Page 4 of 10

Gothetopmenubarandselect,File>SaveAs, Youwillseethis, Overtypethename‘Untitled’withthenamethatyouwanttogiveyourproject, e.g.RWSiteTutorial-Part1-NewProject’thendecidewhereyouwanttosaveit,Isuggest thatyoukeepitonyourdesktopfornowbecauseyoucanalwayssaveitsomewheremore permanentlater. Thenclickonthe‘SaveButton’inthebottomrightcorner,


Page 5 of 10

3. AddingdatatotheHomePage. Nowlet’smoveonandaddsomedatatothehomepagebut,beforeyoubegin,itwillbe helpfulifyoualreadyhavesomeideaofjusthowyouwantthepagetolookandIsuggestthat youmakearoughdrawingofwhatyouwanttofinishupwith. RapidWeaverisaprogramthatdoesnotrequireyoutoknowanythingaboutprograming codebutinsteadusesPartials,ThemesandStacks.Thistutorialwillgiveyouareasonable basicknowledgeofhowtousethesetocreateyourwebsite. InthistutorialIwantthefollowinglayoutformysite,

• Allpagestohaveabanneratthetop,acrosstheentirewidthofthepagewithsomeformofNavigationBarunderneathit,e.g.theTopBarintheFoundationTheme.

• Atthebottomofthepage,Iwanttohaveafooterthatwillhousemycopyright

informatione.g.usingthePanelStackintheFoundationTheme.

• Themiddlesection,betweentheTopBarandtheFooter,willbetheMainworkingareawhereallpagecontentwillbeadded.

Iguessthatyouwillagreethatthisisasimpleplansolet’sbeginbyaddingsomedatatothe HomePage(later,inpart3ofthistutorial)wewillusethe‘Partials’optiontoaddthesame structurelayouttoallotherpagesonthewebsite) Thefirsttaskistomakesurethatyouhavethecorrectthemeselected,youcanchoosefrom manydifferentreadymadethemesthatareincludedwithRapidWeaverbut,Iamgoingto usethe‘Foundation’themethatismadeavailable,freeofcharge,fromtheJoeWorkman Website.However,althoughthisthemeisfree,inordertomakeitwork,youwillalsoneed topurchasethe‘Stacks3’packageavailablefromYourheadsoftwareand,youwillalsoneed toberunningRapidWeaver6or7,bothavailablefromthe‘Realmac’website. OnceyouhavetheFoundationthemeinstalledonyourcomputer,itwillbeavailableforyou toselectasfollows, Inthetopleftcornerofthescreen,clickonthesmall‘Themes’icon, Allthemesthatareavailable,willnowbevisibleatthebottomofthescreen, Scrollup/downthroughthisthemesdraweruntilyoufindtheFoundationthemeandthen clickonit,


Page 6 of 10

Makesurethatyouseeablueoutlineborderingthetheme, NowclosetheThemesDrawerbyclickingonthatthemesiconinthetopleftcorner, Whenyouhavedonethat,youarereadytobeginaddingcontenttothehomepageandyou dothisbyusingSiteStyles,andStacks. (i) AddingtheSiteStyles. SiteStylesdeterminetheoveralllookofyoursiteandthedefaultstyleswillcreatea verygoodlookingwebsitebut,youareabletomakechangestothesestylesandIwill dealwiththoseasandwhennecessaryasweprogressthroughthistutorial. Everypagethatyoucreateinyourwebsite,musthave‘SiteStyles’addedatthetopof thepage. OpentheFoundationStacks‘Library’anddragSiteStylesacrossintothe‘Drop StacksHere’box, ClosetheLibrary,byclickingonthelibrarybuttononcemore,


Page 7 of 10

TheSiteStyleswillnowbedisplayedatthetopofthepageandshouldlooklikethis, (ii) AlthoughthedefaultSiteStyleswillcontrolhowyourwebsitewillnormallyprovidea verygoodlookingsite,thereareacoupleofsettingsthatyoushouldadjustrightnow, e.g.themaximumwidthofthesitepageandthebackgroundcolourofyoursite. Thesetwoadjustmentsaremadeasfollows, Clickontheblue‘SiteStyles’buttonatthetopofthestackandthiswillopenthe‘Site Styles’Inspectoroptions, TheSiteStylesInspector(shownontherightsideoftheabovescreenshot,iswhere youcanmakechangesandthereareawholeloadofoptionsthatarenotvisibleinthis screenshot.Youwillneedtoscrolldowntoseethemall. Scrolldownuntilyouseethe‘SiteBackground’and‘SiteSizing’options. Changethe3optionsshowninthefollowingscreenshot,


Page 8 of 10

Re-Savetheworkyouhavedonesofar,presstheshortcutkeyboardkeysofcmd+S. Here’showtomakethosechangethatIsuggestedabove: (i) Inthe‘SiteBackgroundsection’clickonthethosearrowsdisplayedonthe rightsideofthe‘Type’box, Youwillnowseethechoicesavailable, Choose‘SolidColor’ Nowclickonthe‘Color’box, TheColourPickerisnowdisplayed. Those5itemsacrossthetoparejustdifferentversionsofthecolourpickerbut, fornow,justselectthethirdone(arrowed)


Page 9 of 10

Youwillnowseethefollowing, Youcanselectwhichevershadeyoupreferbut,IchosetoclickontheLight grey(CCCCCC) Theselectedcolourwillnowbepreviewedlikethis, (ii) Inthe‘Foundation–SiteSizing’section,youwillseethis, Changethosedefaultsettingsbyovertypingtheexistingvalues,asshownin thescreenshotbelow,


Page 10 of 10

Sofar,nodata(stacks)havebeenaddedtothesitesothereisnopointinattemptingto‘Preview’itineithertheRapidWeaverprogramor,inaWebBrowser.However,in‘EditMode’withinRapidWeaver,itshouldbelookinglikethis,Re-Savetheworkyouhavedonesofar,presstheshortcutkeyboardkeysofcmd+S.NowproceedtoPart02‘AddingStacks’