2022.2

l
AWebcontextwithonewebpagetemplate(alsocalledasection)init.Thewebpagecontainsa
Header,aSectionandaFooterelementwithdummytext,anddependingonthetypeofweb
page,anavigationbar,buttonand/orFormelements.
l
ResourcesrelatedtotheFoundationframework(see"WebTemplateWizards"below):style
sheetsandJavaScriptfiles.ThestylesheetscanbefoundintheStylesheetsfolderonthe
Resourcespane.TheJavaScriptfilesarelocatedintheJavaScriptfolderontheResources
pane,inaFoundationfolder.
l
AcollectionofSnippetsintheSnippetsfolderontheResourcespane.TheSnippetscontain
ready-to-usepartstobuildthewebpage.Double-clicktoopenthem.See"Snippets"onpage661
forinformationaboutusingSnippets.
l
Images:icons,onepictureandonethumbnailpicture.Hoveryourmouseoverthenamesofthe
imagesintheImagesfolderontheResourcespanetogetapreview.
TheWizardopenstheWebsection,sothatyoucanfillitwithtextandotherelements;see"Contentele-
ments"onpage566,"WebContext"onpage496and"Webpages"onpage498.
Webpagescanbepersonalizedjustlikeanyothertypeoftemplate;see"Personalizingcontent"on
page708.
Tip: UsetheOutlinepaneatthelefttoseewhichelementsarepresentinthetemplateandto
selectanelement.
UsetheAttributespaneattherighttoseethecurrentelement'sID,classandsomeotherprop-
erties.
UsetheStylespanenexttotheAttributespanetoseewhichstylesareappliedtothecurrently
selectedelement.
Tip: ClicktheEdgesbuttononthetoolbartemporarilyaddsaframetocertainelementsonthe
Designtab.ThesewillnotPrintoroutput.
Web Template Wizards
Foundation
Withtheexceptionofthemostbasicone,allWebTemplateWizardsintheDesignermakeuseofthe
ZurbFoundationfront-endframework.Afront-endframeworkisacollectionofHTML,CSS,and
JavaScriptfilestobuildupon.Foundationisaresponsiveframework:itusesCSSmediaqueriesanda
mobile-firstapproach,sothatwebsitesbuiltuponFoundationlookgoodandfunctionwellonmultiple
devicesincludingdesktopandlaptopcomputers,tablets,andmobilephones.Foundationistested
Page 422