Share
Vad du ska skapaDu vet säkert att Dropbox är perfekt för lagring av datasäkerhetskopiering och delning av filer, men visste du att du kan använda den som en statisk webbplats webbhotell också? Tack vare smutsiga appar som DropPages, som vi täcker här idag, kan du!
Processen bakom DropPages är verkligen ganska lysande. Du ger helt enkelt DropPages-appen till ditt Dropbox-konto och det skapar en mapp "My.DropPages" som du ska ladda upp dina webbfiler till. Då när människor besöker din domän fungerar DropPages som mellanhand mellan webbläsaren och ditt Dropbox-konto, hämtar filerna från din "MyDropPages" -mapp och serverar dem som en fullt fungerande webbplats.
Eftersom Dropbox levereras med en applikation som synkroniserar filer på din dator med din online-lagring, kan du bara behålla din webbplats lokalt och låta Dropbox automatiskt ladda upp filerna till dig. Det betyder ingen oro för FTP, och med tanke på dina filer är både offline och i Dropbox är de väsentligen säkerhetskopierade som standard.
Under denna handledning ska jag visa dig hur man gör en klassisk femsidig statisk webbplats med DropPages, med en modifierad version av "Cuda" -mallen från Graphic Burger.
Vi kommer inte fokusera på hur basen HTML och CSS skrivs för mallen, utan snarare om hur man hanterar integrationen med DropPages. All nödvändig mallkod kommer att inkluderas i kopiera och klistra in klarformat nedan, eller du kan hämta källfilerna via Hämta bilagan knappen här i sidofältet.
Låt oss börja!
Om du inte redan har gått till Dropbox och registrerar, ladda ner och installera den program de tillhandahåller för att synkronisera dina offlinefiler till ditt online-lager.
Gå sedan vidare till http://my.droppages.com/ och logga in med dina DropBox-kontouppgifter. Genom att göra detta ger du DropPages tillgång till att konfigurera en mapp i ditt Dropbox-konto som kommer att hysa din webbplats. När Dropbox-programmet synkroniserar dina onlinefiler till din dator ser du en mappstruktur enligt följande i din offline Dropbox-mapp:
Var och en av de webbplatser du skapar via DropPages kommer att leva i den här mappen. Du är nu redo att fortsätta och skapa en ny webbplats.
Efter att ha fått tillgång till ditt Dropbox-konto borde du automatiskt omdirigeras till din DropPages dashboard. Om inte, kan du komma åt det på http://my.droppages.com/account
För att skapa en ny webbplats klickar du på den stora blåen "Skapa en ny webbplats" -knapp:
Därefter kommer du till en sida där du kan ange domänen du vill använda för din webbplats. Du kan använda någon underdomän som inte redan tagits av en annan DropPages-användare, men du måste se till att du inkluderar "droppages.com" delen av domänen när du anger ditt val, så här:
När du har angett din domän klickar du på "Skapa" -knappen och DropPages ställer in mappstrukturen för din nya webbplats i din "MyDropPages" -mapp. När den synkroniseras till din offline Dropbox-mapp så ser den ut så här:
Syftet med de tre mapparna du ser är:
Accentsconagua
.Text filer skrivna i markdown och / eller HTML för att bilda innehållet på sidans sidor.När din webbplats skapas första gången innehåller den en platshållarefil i var och en av dessa mappar:
När du besöker din nyskapade DropPages-domän kommer de tre filerna att ge dig följande:
Det första vi ska göra är att lägga till några anpassade tematyper kring detta grundläggande innehåll, ersätta koden i de befintliga "main.css" och "base.html" -filerna.
När jag hänvisar till redigering av webbplatsfiler i hela denna handledning betyder det att du använder din föredragna kodredigerare direkt på filerna i din offline Dropbox > Apps > My.DropPages > mysubdomain.droppages.com mapp.
När du har sparat ändringar i filen du redigerar, tillåta en liten stund för ditt Dropbox-program för att ladda upp dina filer till ditt konto, uppdatera sedan din DropPages-sida för att se dina ändringar gå live.
Som jag nämnde tidigare kommer vi inte att prata om de faktiska processerna bakom att skapa basen CSS och HTML i denna malldesign, så vi kan fokusera istället på att hantera DropPages integration. Med det sagt, här är ett stilark som jag förberett tidigare.
Kopiera all kod nedan och klistra in den i filen "main.css" i mappen "Public" på din webbplats (förbered dig - det är ganska lite ...)
offentlig > main.css
html font-family: sans-serif; -ms-textstorleksjustering: 100%; -webkit-textstorleksjustering: 100%; artikeln, åtgärd, detaljer, figcaption, figur, sidfot, rubrik, hgroup, huvud, nav, avsnitt, sammanfattning display: block; ljud, kanfas, framsteg, video display: inline-block; vertikaljustering: baslinje; ljud: inte ([kontroller]) display: none; höjd: 0; [dold], mall display: none; abbr [title] border-bottom: 1px prickad; b, stark font-weight: bold; dfn font-style: italic; markera bakgrund: # ff0; färg: # 000; liten font-size: 80%; sub, sup font-size: 75%; linjehöjd: 0; position: relativ; vertikaljustering: baslinje; sup topp: -.5em; sub bottom: -.25em; svg: inte (: root) översvämning: gömd; siffra margin: 1em 40px; pre överflöde: auto; kod, kbd, pre, samp font-family: monospace, monospace; typsnittstorlek: 1em; knapp, inmatning, optgrupp, välj textarea färg: ärv; typsnitt: ärv; marginal: 0; knappen översvämning: synlig; , välj text-transform: none; -knappen, html-inmatning [type = "knapp"], / * 1 * /, inmatning [typ = "återställ"], inmatning [type = "submit"] -webkit-utseende: markör: pekare; knappen [inaktiverad], html-inmatning [inaktiverad] markör: default; -knappen :: - moz-fokus-inre, ingång :: - moz-focus-inner border: 0; vaddering: 0; inmatning linjehöjd: normal; inmatning [typ = "kryssrutan"], skriv in [typ = "radio"] box-size: border-box; vaddering: 0; inmatning [typ = "nummer"] :: - webkit-inner-spinn-knapp, inmatning [typ = "nummer"] :: - webkit-yttre spinn-knapp höjd: auto; inmatning [typ = "sök"] -webkit-utseende: textfield; -moz-box-size: content-box; -webkit-box-size: content-box; boxstorlek: innehållslåda; inmatning [typ = "sök"] :: - webkit-sök-avbryt-knappen, skriv in [typ = "sök"] :: - webkit-sök-dekoration -webkit-utseende: ingen; fieldset border: 1px solid # c0c0c0; marginal: 0 2px; vaddering: .35em .625em .75em; legend border: 0; vaddering: 0; textarea översvämning: auto; optgroup font-weight: bold; bord border-collapse: collapse; gränsbild: 0; td, th vaddering: 0; * box-size: border-box; -moz-box-size: border-box; html bredd: 100%; höjd: 100%; kropp marginal: 0; bredd: 100%; höjd: 100%; bakgrundsfärg: # e7f1f8; font-family: 'Titleium Web'; a, a: besökte, en: länk text-decoration: none; färg: # 3c5499; a: svävar, a: aktiv färg: # 17c2a4; h1, h2, h3, h4, h5, h6 font-family: 'Titleium Web'; linjehöjd: 1.313em; h1 font-size: 2.625em; marginal: .563em 0; h2 font-size: 2.25em; marginal: .563em 0; hr gräns: 0; border-bottom: .25em solid # e7f1f8; .short width: 5.625em; .wrap width: 100%; maxbredd: 75em; marginal: 0 auto; position: relativ; .wrap: före, .wrap: efter content: ""; display: bord; .wrap: efter clear: both; .site_header: före innehåll: ""; bakgrundsfärg: # 17c2a4; bredd: 100%; höjd: 40.625rem; position: absolut; z-index: -1; topp: 0; vänster: 0; höger: 0; .site_header text-align: center; färg: #fff; vaddering: 1.618rem 0 3.236rem 0; .site_title font-size: 4.5rem; marginal: 0; .site_title a color: #fff; .site_tagline font-size: 1.125em; marginal: 0; .site_tagline a color: #fff; .mainmenu bakgrundsfärg: # 87509c; gränsen: .375em .375em 0 0; minhöjd: 3,75em; padding-bottom: .875em; text-align: center; .mainmenu ul listestil: none; display: inline-block; marginal: 0; .mainmenu li display: inline-block; marginal: .875em .25em 0 .25em; .mainmenu a padding: 0 1.125em; text-transform: stor bokstav; färg: #fff; linjehöjd: 2em; .mainmenu .current, .mainmenu li: svävar, .mainmenu li: active background-color: # 643a79; gränsstråle: .25em; .content font-size: 1.125em; bakgrundsfärg: #fff; färg: # 3c4761; vaddering: 3,236em; minhöjd: 37,5rem; .content: före, .content: efter innehåll: ""; display: bord; .content: efter clear: both; .contentwrap position: relative; .secondarynav float: right; marginal: 0 0 1.618rem 1.618em; gränsen: .0625rem solid # e7f1f8; min bredd: 18.75rem; vaddering: 0 1.618rem; .brödsmulor ul listestil: none; marginal-vänster: 0; padding-left: 0; .breadcrumbs li display: inline; .brödsmulor li: före innehåll: ">"; .brödsmulor li: första barnet: före innehåll: ""; .bigbutton border-radius: 4px; markör: pekare; bakgrundsblock: vadderar-box; bakgrundsfärg: # eb7d4b; boxskugga: inset 0 -4px 0 # c7693f; gräns: 0; marginal: 3.236em automatiskt; display: block; text-align: center; bredd: auto; .bigbutton a padding: 1.125em 4.375em; text-transform: stor bokstav; färg: #fff; font-weight: bold; display: inline-block; .candocols width: 25%; flyta till vänster; text-align: center; marginal: 4.854rem auto; .site_footer bakgrundsfärg: # 3c5499; vaddering: 1,618rem 0; text-align: center; .site_footer a color: #fff; typsnittstorlek: 1.5em; typsnitt: 600; marginal: 0 1.618rem; .site_footer a: svävar färg: # 30bae7; @media (maxbredd: 55rem) .candocols width: 50%; marginal: 1,618rem auto; @media (maxbredd: 35rem) .candocols width: 100%; @ media (maxbredd: 320px) html min-bredd: 320px;
Denna CSS kommer att hantera alla väsentliga aspekter av layout, typografi, färgschema och lyhördhet.
Nu behöver vi bara dra det stilarket till vår huvudmall, samt lägga till några extrafunktioner som en rubrik och sidfot.
Kopiera all kod nedan och klistra in den i "base.html" -filen i mappen "Mallar" på din webbplats.
mallar > base.html
Enkel statisk webbplats via DropPages.com Enkel statisk webbplats
Redigera lokalt och värd direkt på Dropbox med DropPages.com
Kropp
Denna HTML-kod gör några saker. Den drar i "main.css" stilark som du just redigerat samt en webfont från Google. Det skapar en statisk rubrik som visar en webbplatstitel och tagline och en sidfot med några länkar till olika sociala nätverk och portföljplatser. Det skapar också ett utrymme för en huvudnavigeringsmeny att leva i, samt ett utrymme för innehåll att visas.
Integrationen med DropPages händer via två mycket enkla malltaggar:
Primärnavigering - Detta gör en oordnad lista över alla sidor på din webbplats, inklusive hemsidan.Kropp - Detta matar ut innehållet från de filer du lägger till i mappen "Innehåll".Observera placeringen av dessa två malltaggar i ovanstående HTML, med Primärnavigering tagg placerad inuti nav element och Kropp tagg placerad inuti huvud element.
Vid uppdatering ska din webbplats nu se ut så här:
Lägg märke till hur samma "Hello World" -innehåll som du såg på din nya standardwebbplats fortfarande finns på plats, men omgiven av stilen som vi just har lagt till via "main.css" och "base.html" -filerna.
Låt oss nu gå vidare och lägga till några av våra egna hemsidans innehåll.
Som en del av vårt anpassade hemsida innehåll kommer vi att inkludera fyra bilder. Du kan få dina egna kopior av dessa bilder från källfilerna som bifogas denna handledning. Efter att ha hämtat och extraherat huvudet EasyDropPagesStaticSite.zip fil kommer du att se en andra zip-fil inom namnet homepage_images.zip. Extrahera den här filen och placera de bilder den innehåller i mappen "Public" på din webbplats.
Kopiera sedan all kod nedan och klistra in den i filen "index.txt" i mappen "Innehåll" på din webbplats.
Innehåll > index.txt
:basHallå där! Vi är de nya barnen i kvarteret och vi bygger fantastiska webbplatser och mobilappar.
Vi fick färdigheter!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Tempor incididunt ut labore et dolore magna aliqua.
Den första raden i den här filen är den viktigaste när det gäller DropPages integration. Det anger vilken mall du vill ha innehållet i.
I det här fallet vill vi att innehållet ska återges till mallen "base.html", så den första raden i filen måste vara: :bas Du kan ange att en innehållsfil ska göras i någon mallfil, en funktion som vi använder senare.
DropPages innehållsfiler kan göra antingen Markdown eller HTML. Om du är intresserad av att lära dig mer om Markdown-syntaxen, kolla in Markdown: Ins och Outs.
Notera: en "gotcha" att vara medveten om är att om du sätter ihop en rad Markdown i HTML kommer den inte att göras av DropPages. En annan är att om du använder Markdown för text finns det ingen tillgänglig syntax för att centrera den.
Till exempel i koden ovan finns fyra bilder placerade, var och en inslagna i a div med styling som gör dem sida vid sida i kolumner. För att lägga till en bild via Markdown skulle du använda syntaxen ![Alt text] (/ sökväg / till / img.jpg). Men jag fann att när bilden Markdown var insvept i de divider som jag använde ovan visade de inte ut och skickade den faktiska Markdown-koden till sidan istället.
Så, med tanke på att vi vill ha vår hemsida för att ha bilder inslagna i div, och vi vill ha centrerad text, är allt innehåll som läggs till i filen "index.txt" skrivet i HTML.
Uppdatera din webbplats och det ska nu se ut så här:
Vi har nu ett eget anpassat hemsida innehåll, så det är dags att lägga till några ytterligare undersidor. Låt oss börja med allestädes närvarande "Om" -sidan.
För att lägga till extra sidor på din DropPages-sida, behöver du bara skapa nya .Text filer i mappen "Innehåll". Länkar till dem kommer då automatiskt att visas i din "Primary Navigation" -meny.
Namnet som visas i din meny kommer att tas direkt från namnet på din innehållsfil, dvs. Min sidnamn.txt. Dessutom kan du styra ordningen på dina meny länkar genom att lägga ut varje innehållsfil med ett nummer följt av en punkt.
Vi vill att den andra länken på vår meny ska vara på vår "Om" -sida, så skapa en ny textfil i mappen "Innehåll" och namnge den: 2.Om vår Studio.txt
Lägg till följande kod i din nya fil:
: bas Om vår studio ======== (Placeholdertext från [http://notloremipsum.com/](http://notloremipsum.com/)) Vi är en ganska liten, flexibel designstudio som designar för tryck och webb. Vi arbetar flexibelt med kunder för att uppfylla sina designbehov. Oavsett om du behöver skapa ett varumärke från början, inklusive marknadsföringsmaterial och en vacker och funktionell webbplats eller om du letar efter en designuppdatering, är vi övertygade om att du kommer att vara nöjd med resultaten. Vi erbjuder följande tjänster: - Branding - Logotyper - Webb-applikationer - Webbutveckling - HTML5, CSS, jQuery - Content Management Systems - Responsive Web Design - Illustration - Visitkort - Brevhuvud och komplimangslipsar - Reklamblad - Mailers - Tidningskort
Den här gången behöver vi ingen div wrappers eller centrerad text, så koden skrivs helt i Markdown-syntaxen.
Uppdatera webbplatsen och du bör se en ny länk "Om vår studio" på din primära navigationsmeny. Klicka på den här länken och du kommer att tas till din nya sida, som ska se ut så här:
Lägga till sidor för din DropPages-webbplats är lika enkelt som det. Skapa bara en ny textfil, namnge den enligt vad du vill se på din meny, fyll i den med ditt innehåll och du är klar.
DropPages ger dig också möjlighet att skapa undernivåer på andra nivån. Du kan till exempel skapa en sida med namnet "Meet the Team" som har länkar till en undersida för varje lagmedlem. I det här avsnittet visar jag hur.
På vår sida "Meet the Team" vill vi visa länkar till en undersida för var och en av våra lagmedlemmar, men vår basmall innehåller inte ett område för att visa sådana länkar. Som sådan kommer vi att skapa en anpassad mall för att hantera detta extra krav.
DropPages mallar har förmågan att kaskad, vilket innebär att en mall kan ladda sig in i Kropp tagg av en annan mall.
I vårt fall vill vi lägga till ett område med länkar till våra delsidor, men vi vill fortfarande använda HTML från mallen "base.html". För att göra detta ska du skapa en ny fil i mappen "Mallar" och namnge den "withsubpages.html". Kopiera och klistra in i koden nedan:
mallar > withsubpages.html
:basKroppVårt folk
SecondaryNavigation
Som du såg tidigare i vår "index.txt" innehållsfil, använder den här mallen också :bas notering på första raden. Detta låter systemet veta att HTML-filen från den här mallen ska laddas in i Kropp taggen av mallen "base.html".
Det faktiska sidinnehållet laddas in i Kropp taggen av mallen "withsubpages.html".
Om det är förvirrande alls kan laddningsprocessen sammanfattas som: base.html> Body> withsubpages.html> Body> sidinnehåll.
I vår nya "withsubpages.html" -fil har vi lagt till en wrapper div runt sidinnehållet och lagt till en ruta som ska floats till höger med malltaggen: SecondaryNavigation. Den här malltaggen skapar en orörd lista över syskon- eller barnsidor.
Låt oss nu titta på hur du faktiskt skapar undersidor vars länkar kommer att visas i den "sekundära navigeringsrutan" rutan.
När du vill att en sida ska ha undersidor, istället för att skapa en .Text fil i mappen "Innehåll" skapar du en katalog. Den katalogen kommer att hålla högsta sidan samt några av dess barn.
Du använder samma namngivningskonventioner för katalogen som du skulle för en .Text fil, dvs börja med ett nummer för att ange läget för den primära navigeringslänken, använd sedan det namn du vill ha på menyn.
Skapa en mapp i katalogen "Innehåll" och namnge det "3.Meet Teamet".
Inne i den mappen skapa en fil med namnet "index.txt". Koden som du lägger till i den här filen kommer att bilda din högsta nivå "Meet the Team" -sidans innehåll.
Kopiera och klistra in i koden nedan:
Innehåll > 3.Met laget > index.txt
: withsubpages ## Möt teamet Innan du väljer oss för att ta på ditt projekt kommer du förmodligen att vilja veta lite mer om oss, så träffa laget: Ross har över 10 års erfarenhet inom branschen. Han är vår kreativa direktör, digitaldesigner, webbdesigner och front-end-utvecklare. Han är också ganska bra med en skissbok. Innan företaget började arbetade Ross som designer och studiochef för ett designhus som prydde ett antal stora namnklienter. Ross har fått sin stora erfarenhet från den här rollen till det arbete han gör nu. Monica är Ross syster, vår konstdirektör och specialiserar sig på grafisk och tryckdesign. Hon har också arbetat med några stora namn och hennes design har vunnit henne ett antal branschpriser. Rachel och Chandler är våra Junior Designers. Rachel är webbdesigner med kunskap om HTML och CSS och stöder Ross på projekt. Chandler har just avslutat sin Graduate Design-examen och åtnjuter fortsatt att lära av Monica och bygga sin erfarenhet. Joey och Phoebe fokuserar på att få nya affärer till företaget. De har vunnit ett antal stora kunder nyligen och båda har också kvalifikationer i projektledning för att säkerställa att projekten löper smidigt från början till slut.
Notera: På den första raden i denna kod lägger vi inte längre till :bas. Istället lägger vi till : withsubpages eftersom det här anges att vi vill att sidinnehållet ska laddas in i mallen "withsubpages.html".
Med ditt huvudsakliga innehåll "Meet the Team" på plats i filen "index.txt" är du nu redo att lägga till undersidor. Processen att lägga till filer i den här mappen är densamma som du följde för att lägga till sidan "Om" i mappen på toppnivå. Skapa helt enkelt en ny .Text fil med ett nummer för beställning och ett namn för att styra länktexten i den sekundära navigeringsrutan.
Skapa en fil med namnet "1.Ross and Monica.txt" och lägg till det här innehållet inuti:
Innehåll > 3.Met laget > 1.Ross och Monica.txt
: withsubpages ## Ross och Monica Ross har över 10 års erfarenhet inom branschen. Han är vår kreativa direktör, digitaldesigner, webbdesigner och front-end-utvecklare. Han är också ganska bra med en skissbok. Innan företaget började arbetade Ross som designer och studiochef för ett designhus som prydde ett antal stora namnklienter. Ross har fått sin stora erfarenhet från den här rollen till det arbete han gör nu. Monica är Ross syster, vår konstdirektör och specialiserar sig på grafisk och tryckdesign. Hon har också arbetat med några stora namn och hennes design har vunnit henne ett antal branschpriser.
Återigen använder vi : withsubpages notation för att den här sidan ska laddas in i mallen "withsubpages.html".
Skapa en andra fil med namnet "2.Juniors and Sales.txt"med detta innehåll inuti:
Innehåll > 3.Met laget > 2.Juniors och Sales.txt
: withsubpages ## Juniorer och försäljare Rachel och Chandler är våra Junior Designers. Rachel är webbdesigner med kunskap om HTML och CSS och stöder Ross på projekt. Chandler har just avslutat sin Graduate Design-examen och åtnjuter fortsatt att lära av Monica och bygga sin erfarenhet. Joey och Phoebe fokuserar på att få nya affärer till företaget. De har vunnit ett antal stora kunder nyligen och båda har också kvalifikationer i projektledning för att säkerställa att projekten löper smidigt från början till slut.
Uppdatera din webbplats och du bör se den nya länken "Meet the Team" på navbaren. Klicka på den och din nya sida ska visas med en länk till varje undersida i den sekundära navigeringsrutan på höger sida. Var och en av dina delsidor ska också ha samma layout, så här:
Generellt sett, med statiska webbplatser verkar fem vara det magiska antalet sidor att ha (jag har ingen aning om varför). Så låt oss fortsätta och lägga till ytterligare två sidor på din webbplats för att runda ut det numret.
Skapa en fil med namnet "4.Markdown Examples.txt" i mappen "Innehåll" och lägg till följande kod:
Innehåll > 4.Markdown Examples.txt
