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.
WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]
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’
WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]
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.
WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]
Page 4 of 10
Gothetopmenubarandselect,File>SaveAs, Youwillseethis, Overtypethename‘Untitled’withthenamethatyouwanttogiveyourproject, e.g.RWSiteTutorial-Part1-NewProject’thendecidewhereyouwanttosaveit,Isuggest thatyoukeepitonyourdesktopfornowbecauseyoucanalwayssaveitsomewheremore permanentlater. Thenclickonthe‘SaveButton’inthebottomrightcorner,
WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]
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,
WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]
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,
WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]
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,
WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]
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)
WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]
Page 9 of 10
Youwillnowseethefollowing, Youcanselectwhichevershadeyoupreferbut,IchosetoclickontheLight grey(CCCCCC) Theselectedcolourwillnowbepreviewedlikethis, (ii) Inthe‘Foundation–SiteSizing’section,youwillseethis, Changethosedefaultsettingsbyovertypingtheexistingvalues,asshownin thescreenshotbelow,
WrittenbyRonnieWeston30thJune2016©Amendedon10thJuly2016WebSite:ronniewestphotography.comemail:[email protected]
Page 10 of 10
Sofar,nodata(stacks)havebeenaddedtothesitesothereisnopointinattemptingto‘Preview’itineithertheRapidWeaverprogramor,inaWebBrowser.However,in‘EditMode’withinRapidWeaver,itshouldbelookinglikethis,Re-Savetheworkyouhavedonesofar,presstheshortcutkeyboardkeysofcmd+S.NowproceedtoPart02‘AddingStacks’
