Share
Hva du skal skapeDu vet sikkert at Dropbox er perfekt for lagring av data backup og deling av filer, men visste du at du kan bruke den som en statisk web-webverten også? Takket være smarte apps som DropPages, som vi dekker her i dag, kan du!
Prosessen bak DropPages er virkelig ganske strålende. Du gir bare DropPages-appen tilgang til Dropbox-kontoen din, og den oppretter en mappe "MyDropPages" som du vil laste opp webområdet til. Når folk besøker domenet ditt, fungerer DropPages som mellomledd mellom nettleseren og Dropbox-kontoen din, henter filene fra mappen MyDropPages og serverer dem som en fullt fungerende nettside..
Da Dropbox kommer med et program som synkroniserer filer på datamaskinen din med online lagring, kan du bare vedlikeholde nettstedet ditt lokalt og la Dropbox automatisk laste opp filene for deg. Dette betyr ikke å bekymre deg for FTP, og gitt at filene dine er begge offline, og på Dropbox er de i utgangspunktet sikkerhetskopiert som standard.
Under denne opplæringen skal jeg vise deg hvordan du lager et klassisk femsidig statisk nettsted med DropPages, ved hjelp av en modifisert versjon av "Cuda" -malen fra Graphic Burger.
Vi vil ikke fokusere på hvordan basen HTML og CSS er skrevet for malen, men heller på hvordan håndtere integrasjonen med DropPages. All nødvendig malkode vil bli inkludert i kopi og lim inn klarformat nedenfor, eller du kan laste ned kildefilene via Last ned vedlegg knappen her i sidefeltet.
La oss begynne!
Hvis du ikke allerede har det, går du til Dropbox og registrerer, og laster ned og installerer programmet de gir for å synkronisere dine offlinefiler til din online lagring.
Gå deretter over til http://my.droppages.com/ og logg inn med DropBox-kontoinformasjonen din. Ved å gjøre dette gir du DropPages tilgang til å sette opp en mappe i Dropbox-kontoen din som vil huse ditt nettsted. Etter at Dropbox-programmet synkroniserer dine elektroniske filer til datamaskinen, ser du en mappestruktur som denne i mappen Offline Dropbox:
Hver av nettstedene du oppretter via DropPages, vil bo i denne mappen. Du er nå klar til å gå videre og opprette et nytt nettsted.
Etter å ha gitt tilgang til Dropbox-kontoen din, bør du automatisk bli omdirigert til DropPages dashbord. Hvis ikke, kan du få tilgang til det på http://my.droppages.com/account
For å opprette et nytt nettsted, klikk på den store blå "Opprett et nytt nettsted" -knapp:
Du vil da bli tatt til en side der du kan spesifisere domenet du vil bruke til nettstedet ditt. Du kan bruke et hvilket som helst underdomene som ikke allerede er tatt av en annen DropPages-bruker, men du må sørge for at du inkluderer "droppages.com" -delen av domenet når du angir ditt valg, slik som:
Når du har skrevet inn domenet ditt, klikker du på "Opprett" -knappen, og DropPages vil sette opp mappestrukturen for det nye nettstedet ditt i mappen "MyDropPages". Når det synkroniseres med din frakoblede Dropbox-mappe, ser det slik ut:
Formålet med de tre mappene du ser er:
Accentsconagua
.tekst filer skrevet i markdown og / eller HTML for å danne innholdet på nettstedets sider.Når nettstedet ditt er først opprettet, inneholder det en plassholderfil i hver av disse mappene:
Når du besøker det nylig opprettede DropPages-domenet, vil disse tre filene gi deg dette:
Det første vi skal gjøre er å legge til noen tilpassede tema styling rundt dette grunnleggende innholdet, erstatte koden i eksisterende "main.css" og "base.html" -filer.
Når jeg refererer til redigering av nettstedfiler gjennom hele denne opplæringen, vil det bety at du bruker din foretrukne kodeditor direkte på filene i frakoblet Dropbox > Apps > My.DropPages > mysubdomain.droppages.com mappe.
Når du har lagret endringer i filen du redigerer, tillater litt tid for Dropbox-applikasjonen din å laste opp filene dine til kontoen din, og oppdater deretter DropPages-siden din for å se at endringene dine går til live.
Som nevnt tidligere, kommer vi ikke til å snakke om de faktiske prosessene bak å lage grunnlaget CSS og HTML for denne maldesignen, slik at vi kan fokusere i stedet på å håndtere DropPages-integrasjon. Med det sagt, her er et stilark jeg forberedte tidligere.
Kopier all koden under og lim den inn i "main.css" -filen i mappen "Offentlig" på nettstedet ditt (forberede deg selv - det er ganske litt ...)
Offentlig > main.css
html font-family: sans-serif; -ms-tekststørrelsesjustering: 100%; -webkit-tekststørrelsesjustering: 100%; artikkel, til side, detaljer, figcaption, figur, footer, header, hgroup, main, nav, section, summary display: block; lyd, lerret, fremgang, video display: inline-block; vertikaljustering: basislinje; lyd: ikke ([kontroller]) display: none; høyde: 0; [skjult], mal display: none; abbr [title] border-bottom: 1px dotted; b, sterk font-weight: bold; dfn font-style: kursiv; merk bakgrunn: # ff0; farge: # 000; liten skriftstørrelse: 80%; sub, sup font-size: 75%; linjehøyde: 0; stilling: relativ; vertikaljustering: basislinje; sup topp: -.5em; sub bunn: -.25em; svg: ikke (: root) overflow: hidden; figur margin: 1em 40px; pre overflow: auto; kode, kbd, pre, samp font-family: monospace, monospace; skriftstørrelse: 1em; knapp, input, optgroup, velg tekstarea color: inherit; skrifttype: arve; margin: 0; -knappen overløp: synlig; , velg text-transform: none; knapp, html-inntasting [type = "knapp"], / * 1 * /, input [type = "reset"], inntast [type = "send"] -webkit-utseende: knapp; markør: pointer; knapp [deaktivert], html-inngang [deaktivert] cursor: default; -knappen :: - moz-fokus-indre, inngang :: - moz-fokus-indre border: 0; polstring: 0; inngang linjehøyde: normal; skriv inn [type = "avkrysningsrute"], skriv inn [type = "radio"] boks størrelse: grenseboks; polstring: 0; input [type = "number"] :: - webkit-inner-spinn-knapp, input [type = "number"] :: - webkit-ytre-spin-knappen høyde: auto; input [type = "search"] -webkit-utseende: textfield; -moz-box-size: content-box; -webkit-boks-størrelse: innholds-boks; boks størrelse: innholds boksen; input [type = "search"] :: - webkit-søk-avbryt-knappen, skriv inn [type = "søk"] :: - webkit-søk-decoration -webkit-utseende: ingen; fieldset border: 1px solid # c0c0c0; margin: 0 2px; polstring: .35em .625em .75em; legende grense: 0; polstring: 0; textarea overflow: auto; optgroup font-weight: bold; tabell border-collapse: collapse; grenseavstand: 0; td, th polstring: 0; * box-size: border-box; -moz-box-size: border-box; html bredde: 100%; høyde: 100%; kropp margin: 0; bredde: 100%; høyde: 100%; bakgrunnsfarge: # e7f1f8; font-familie: 'Titleium Web'; a, a: besøkt, a: link text-decoration: none; farge: # 3c5499; a: svever, a: aktiv farge: # 17c2a4; h1, h2, h3, h4, h5, h6 font-family: 'Titleium Web'; linjehøyde: 1.313em; h1 skriftstørrelse: 2.625em; margin: .563em 0; h2 font-size: 2.25em; margin: .563em 0; hr grense: 0; border-bottom: .25em solid # e7f1f8; .short width: 5.625em; .wrap bredde: 100%; maksimal bredde: 75em; margin: 0 auto; stilling: relativ; .wrap: før, .wrap: etter content: ""; skjerm: bord; .wrap: etter clear: both; .site_header: før innhold: ""; bakgrunnsfarge: # 17c2a4; bredde: 100%; høyde: 40.625rem; posisjon: absolutt; z-indeks: -1; topp: 0; venstre: 0; høyre: 0; .site_header text-align: center; farge: #fff; polstring: 1.618rem 0 3.236rem 0; .site_title font-size: 4.5rem; margin: 0; .site_title a color: #fff; .site_tagline font-size: 1.125em; margin: 0; .site_tagline en color: #fff; .mainmenu bakgrunnsfarge: # 87509c; border-radius: .375em .375em 0 0; Min høyde: 3,75em; polstring-bunn: .875em; tekst-align: center; .mainmenu ul listestil: none; display: inline-block; margin: 0; .mainmenu li display: inline-block; margin: .875em .25em 0 .25em; .mainmenu a padding: 0 1.125em; tekst-transformer: store bokstaver; farge: #fff; linjehøyde: 2em; .mainmenu .current, .mainmenu li: svever, .mainmenu li: active background-color: # 643a79; border-radius: .25em; .content font-size: 1.125em; bakgrunnsfarge: #fff; farge: # 3c4761; polstring: 3.236em; min høyde: 37,5rem; .content: før, .content: etter content: ""; skjerm: bord; .content: etter clear: both; .contentwrap posisjon: relative; .secondarynav float: right; margin: 0 0 1.618rem 1.618em; grense: .0625rem solid # e7f1f8; min bredde: 18.75rem; polstring: 0 1.618rem; .breadcrumbs ul listestil: none; margin-venstre: 0; polstring-venstre: 0; .breadcrumbs li display: inline; .breadcrumbs li: før innhold: ">"; .breadcrumbs li: første barn: før innhold: ""; .bigbutton border-radius: 4px; markør: pointer; bakgrunnsbilder: polstring bakgrunnsfarge: # eb7d4b; boks-skygge: innsett 0 -4px 0 # c7693f; grense: 0; margin: 3.236em automatisk; skjerm: blokk; tekst-align: center; bredde: auto; .bigbutton a polstring: 1.125em 4.375em; tekst-transformer: store bokstaver; farge: #fff; font-weight: bold; display: inline-block; .candocols width: 25%; flyte: venstre; tekst-align: center; margin: 4.854rem auto; .site_footer bakgrunnsfarge: # 3c5499; polstring: 1.618rem 0; tekst-align: center; .site_footer en color: #fff; skriftstørrelse: 1.5em; font-weight: 600; margin: 0 1.618rem; .site_footer a: hover color: # 30bae7; @media (maksimal bredde: 55rem) .candocols width: 50%; margin: 1.618rem auto; @media (maksimal bredde: 35rem) .candocols width: 100%; @ media (maksimal bredde: 320px) html min-bredde: 320px;
Denne CSS vil håndtere alle essensialene av layout, typografi, fargevalg og respons.
Nå trenger vi bare å trekke det stilarket i vår hovedmal, i tillegg til å legge til noen ekstraelementer som en topptekst og bunntekst.
Kopier all koden under og lim den inn i "base.html" -filen i mappen "Maler" på nettstedet ditt.
maler > base.html
Easy Static Site via DropPages.com Easy Static Site
Rediger lokalt og vert umiddelbart på Dropbox med DropPages.com
Kropp
Denne HTML-koden gjør noen ting. Den trekker i stilarket "main.css" du nettopp har redigert, samt en webfont fra Google. Den oppretter en statisk overskrift som viser en nettstedtittel og tagline, og en bunntekst med noen koblinger til ulike sosiale nettverk og porteføljesider. Det skaper også plass til en primærnavigeringsmeny for å leve i, så vel som en plass for innhold som skal vises.
Integrasjonen med DropPages skjer via to veldig enkle maletiketter:
PrimaryNavigation - Dette gjør en uordnet liste over alle sidene på nettstedet ditt, inkludert hjemmesiden.Kropp - Dette gir innholdet fra filene du vil legge til i mappen "Innhold".Legg merke til plasseringen av disse to malemerkene i HTML-koden ovenfor, med PrimaryNavigation tag plassert inne i nav element og Kropp tag plassert inne i hoved- element.
Ved oppdatering bør nettstedet ditt nå se slik ut:
Legg merke til hvordan det samme "Hello World" -innholdet du så på ditt nye standardnettsted, fortsatt er på plass, men omgitt av stilen vi nettopp har lagt til via "main.css" og "base.html" -filene.
La oss nå gå videre og legge til noen av våre egne tilpassede hjemmesideinnhold.
Som en del av vårt tilpassede hjemmesideinnhold vil vi inkludere fire bilder. Du kan få dine egne kopier av disse bildene fra kildefilene som er vedlagt denne opplæringen. Etter å ha lastet ned og hentet hovedet EasyDropPagesStaticSite.zip fil vil du se en andre zip-fil innen navngitt homepage_images.zip. Trekk ut denne filen og legg bildene den inneholder i mappen "Offentlig" på nettstedet ditt.
Kopier så all koden under og lim den inn i filen "index.txt" i mappen "Innhold" på nettstedet ditt.
Innhold > index.txt
:utgangspunktHei der! Vi er de nye barna i blokken, og vi bygger fantastiske nettsteder og mobilapper.
VI HAR FUNKSJONER!
Kjenn deg selv med å være med, ha det bra, og gjør det
Tempor incididunt ut labore et dolore magna aliqua.
Den første linjen i denne filen er den mest betydningsfulle så langt DropPages integrasjon går. Den spesifiserer hvilken mal du vil at innholdet ditt skal gjengis inn i.
I dette tilfellet vil vi at dette innholdet skal gjengis i "base.html" -malen, så den aller første linjen i filen må være: :utgangspunkt Du kan angi at en innholdsfil skal gjengis i en hvilken som helst malfil, en funksjon vi senere bruker.
DropPages-innholdsfiler kan gjengi enten Markdown eller HTML. Hvis du er interessert i å lære mer om Markdown-syntaks, sjekk ut Markdown: The Ins and Outs.
Merk: en "gotcha" å være klar over er at hvis du pakker en linje med Markdown i HTML, blir den ikke gjengitt av DropPages. En annen er at hvis du bruker Markdown for tekst, er det ingen tilgjengelig syntaks for å sentrere den.
For eksempel i koden ovenfor er det plassert fire bilder, hver pakket inn i a div med styling som vil gjøre dem side ved side i kolonner. For å legge til et bilde via Markdown, bruker du syntaksen ![Alt tekst] (/ bane / til / img.jpg). Imidlertid fant jeg ut at når bildet Markdown ble pakket inn i divsene jeg brukte ovenfor, gjorde de ikke gjengivelse, og sendte den faktiske Markdown-koden på siden i stedet.
Så, gitt at vi ønsker at vår hjemmeside skal ha bilder innpakket i divs, og vi vil ha sentrert tekst, er alt innholdet som er lagt til filen "index.txt", skrevet i HTML.
Oppdater nettstedet ditt, og det skal nå se slik ut:
Vi har nå et eget tilpasset hjemmesideinnhold på plass, så det er på tide å legge til noen ekstra undersider. La oss begynne med allestedsnærværende "Om" -siden.
Hvis du vil legge til ekstra sider på DropPages-siden din, er alt du trenger å gjøre, skape nytt .tekst filer i mappen "Innhold". Lenker til dem vil da automatisk vises i "Primary Navigation" -menyen.
Navnet som vises i menyen din, blir hentet direkte fra navnet på innholdsfilen din, dvs.. Min side Name.txt. Videre kan du styre rekkefølgen på menylinkene dine ved å forhåndsbeide hver innholdsfil med et nummer etterfulgt av en prikk.
Vi vil at den andre lenken på menyen vår skal være på vår "Om" -side, så i mappen "Innhold" oppretter du en ny tekstfil og heter den: 2.Over Studio.txt
Legg til følgende kode i den nye filen:
: base Om studioet vårt ======== (Stedholdertekst fra [http://notloremipsum.com/](http://notloremipsum.com/)) Vi er et ganske lite, fleksibelt designstudio som designer for print og web. Vi jobber fleksibelt med kunder for å oppfylle deres designbehov. Enten du trenger å lage en merkevare fra bunnen av, inkludert markedsføringsmateriell og et vakkert og funksjonelt nettsted, eller om du er på utkikk etter en designoppdatering, er vi sikre på at du vil være fornøyd med resultatene. Vi tilbyr følgende tjenester: - Branding - Logoer - Nettsteder - Webapplikasjoner - Webutvikling - HTML5, CSS, jQuery - Innholdsstyringssystemer - Responsive Web Design - Illustrasjon - Visittkort - Letterheads and compliment slips - Flyers - Mailers - Avtalekort
Denne gangen trenger vi ingen div wrappers eller sentrert tekst, så koden er skrevet helt i Markdown-syntaks.
Oppdater nettstedet, og du bør se en nylig lagt til "Om vår Studio" -koblingen på hovednavigasjonsmenyen. Klikk den linken og du vil bli tatt til din nye side, som skal se slik ut:
Legge til sider for DropPages-siden din er like enkelt som det. Bare opprett en ny tekstfil, navn den etter hva du vil se på menyen din, fyll den inn med innholdet ditt og du er ferdig.
DropPages gir deg også muligheten til å lage undernivåer på andre nivåer. For eksempel kan du lage en side med navnet "Meet the Team", som har lenker til en underside for hvert lagmedlem. I denne delen vil jeg vise deg hvordan.
På vår side "Møt teamet" vil vi vise lenker til en underside for hver av våre lagmedlemmer, men vår basemal inneholder ikke et område for å vise slike lenker. Som sådan skal vi lage en tilpasset mal for å håndtere dette ekstra kravet.
DropPages maler har evnen til kaskade, som betyr at en mal kan laste seg inn i Kropp taggen til en annen mal.
I vårt tilfelle vil vi legge til et område med lenker til våre delsider, men vi vil fortsatt bruke HTML fra "base.html" -malen. For å gjøre dette skje, opprett en ny fil i mappen "Maler" og navnet "withsubpages.html". Kopier og lim inn koden nedenfor:
maler > withsubpages.html
:utgangspunktKroppVårt folk
SecondaryNavigation
Som du så tidligere i vår "index.txt" innholdsfil, bruker denne malen også :utgangspunkt notat på første linje. Dette lar systemet vite at HTML fra denne malen skal lastes inn i Kropp tag av "base.html" -malen.
Selve sideinnholdet blir lastet inn i Kropp taggen av "withsubpages.html" -malen.
I tilfelle det er forvirrende i det hele tatt, kan lastingsprosessen oppsummeres som: base.html> Body> withsubpages.html> Body> sideinnhold.
I vår nye "withsubpages.html" -fil har vi lagt til en wrapper div rundt sidens innhold, og lagt til en boks som vil bli floated til høyre som inneholder mal-taggen: SecondaryNavigation. Denne mal-taggen oppretter en uordnet liste over søsken eller barnesider.
La oss da se på hvordan du faktisk lager undersider, hvis koblinger vil vises i boksen "Secondary Navigation".
Når du vil at en side skal ha undersider, i stedet for å lage en .tekst fil i mappen "Innhold", oppretter du en katalog. Den katalogen vil holde toppnivå siden, samt noen av sine barn.
Du bruker de samme navngivningskonvensjonene for katalogen som du ville for en .tekst fil, dvs. begynn med et tall for å angi posisjonen til den primære navigasjonslenken, bruk deretter hvilket navn du vil ha vist på menyen.
Opprett en mappe i "Innhold" -katalogen og navnet "3.Meet teamet".
Inne i den mappen opprett en fil med navnet "index.txt". Koden du legger til i denne filen, vil danne toppnivået "Møt teamet" -sideinnholdet.
Kopier og lim inn koden under:
Innhold > 3. Bli med i laget > index.txt
: withsubpages ## Møt teamet Før du velger oss for å ta på prosjektet, vil du sannsynligvis vite litt mer om oss, så møt teamet: Ross har over 10 års erfaring i bransjen. Han er vår Creative Director, digital designer, webdesigner og front-end-utvikler. Han er også ganske bra med en skissebok. Før jobbet startet Ross som designer og studio manager for et designhus som pralte på en rekke store navnsklienter. Ross har hentet sin store erfaring fra denne rollen til det arbeidet han gjør nå. Monica er Ross 'søster, vår kunstdirektør og spesialiserer seg på grafisk og trykt design. Hun har også jobbet med noen store navn og hennes design har vunnet henne en rekke bransjepriser. Rachel og Chandler er våre Junior Designers. Rachel er webdesigner med kunnskap om HTML og CSS og støtter Ross på prosjekter. Chandler har nettopp fullført sin Graduate Design-grad og har fortsatt å lære av Monica og bygge sin erfaring. Joey og Phoebe fokuserer på å bringe ny virksomhet til selskapet. De har vunnet en rekke store kunder nylig, og begge har også kvalifikasjoner i prosjektledelsen for å sikre at prosjektene løper jevnt fra start til slutt.
Merk: På den første linjen i denne koden legger vi ikke lenger til :utgangspunkt. I stedet legger vi til : withsubpages da dette spesifiserer at vi vil at sidens innhold skal lastes inn i "withsubpages.html" -malen.
Med ditt hovedinnhold "Meet the Team" på plass i "index.txt" -filen, er du nå klar til å legge til undersider. Prosessen med å legge til filer i denne mappen er den samme som du fulgte for å legge til siden "Om" i toppnivåmappen. Bare opprett en ny .tekst fil, med et nummer for bestilling, og et navn for å kontrollere sin linktekst i den sekundære navigasjonsboksen.
Opprett en fil med navnet "1.Ross and Monica.txt" og legg til dette innholdet inne:
Innhold > 3. Bli med i laget > 1.Ross og Monica.txt
: withsubpages ## Ross og Monica Ross har over 10 års erfaring i bransjen. Han er vår Creative Director, digital designer, webdesigner og front-end-utvikler. Han er også ganske bra med en skissebok. Før jobbet startet Ross som designer og studio manager for et designhus som pralte på en rekke store navnsklienter. Ross har hentet sin store erfaring fra denne rollen til det arbeidet han gjør nå. Monica er Ross 'søster, vår kunstdirektør og spesialiserer seg på grafisk og trykt design. Hun har også jobbet med noen store navn og hennes design har vunnet henne en rekke bransjepriser.
Igjen bruker vi : withsubpages notat for at denne siden skal lastes inn i "withsubpages.html" -malen.
Lag en andre fil med navnet "2.Juniors and Sales.txt"med dette innholdet inne:
Innhold > 3. Bli med i laget > 2.Juniors og Sales.txt
: withsubpages ## Juniorer og salg Rachel og Chandler er våre Junior Designers. Rachel er webdesigner med kunnskap om HTML og CSS og støtter Ross på prosjekter. Chandler har nettopp fullført sin Graduate Design-grad og har fortsatt å lære av Monica og bygge sin erfaring. Joey og Phoebe fokuserer på å bringe ny virksomhet til selskapet. De har vunnet en rekke store kunder nylig, og begge har også kvalifikasjoner i prosjektledelsen for å sikre at prosjektene løper jevnt fra start til slutt.
Oppdater nettstedet ditt, og du bør se den nye linken "Meet the Team" på navbaren. Klikk på den og den nye siden din skal dukke opp med en kobling til hver underside i den sekundære navigasjonsboksen på høyre side. Hver av delene dine bør også ha samme layout, slik:
Generelt, med statiske steder, synes fem å være det magiske antallet sider å ha (jeg aner ikke hvorfor). Så la oss fortsette og legg til to sider til nettstedet ditt for å avrunde det nummeret.
I mappen "Innhold" lager du en fil med navnet "4.Markdown Examples.txt" og legger til følgende kode:
Innhold > 4.Markdown Eksempler.txt
