Written by Ronnie West on 30 th June 2016© Amended on10 th July 2016 Web Site: ronniewestphotography.com email: [email protected] Page 1 of 10 Building a Web Site with Rapid Weaver 7 & the Foundation Theme – Part 01 – New Project. Open Rapid Weaver and you will see this opening page, 1. Start a new project, Since this is going to be the very first project, you must first create it. Click on ‘Create a new RapidWeaver project’ You will now see something like this, An ‘Untitled’ project will now be created and you will see some options in the top left corner, Click on the ‘Add’ box, where you see the small + sign. This displays the following options, Click on the ‘Stacks’ icon.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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’
Related Documents
