Share
Ce veți creaProbabil știți că Dropbox este perfect pentru stocarea copiilor de rezervă și partajarea fișierelor, dar știați că o puteți utiliza și ca gazdă statică a unui site web? Datorită aplicațiilor cum ar fi DropPages, pe care le vom acoperi astăzi, puteți!
Procesul din spatele DropPages este într-adevăr destul de strălucitor. Dați pur și simplu aplicației DropPages accesul la contul dvs. Dropbox și creează un director "My.DropPages" la care veți încărca fișierele site-ului dvs. Web. Apoi, atunci când oamenii vizitează domeniul dvs. DropPages acționează ca un intermediar între browser și contul dvs. Dropbox, preluând fișierele din folderul "My.DropPages" și servind-le ca pe un site complet funcțional.
Ca Dropbox vine cu o aplicație care sincronizează fișierele de pe computerul dvs. cu spațiul de stocare online, puteți doar să vă mențineți site-ul local și să permiteți Dropbox să încarce automat fișierele pentru dvs. Acest lucru înseamnă că nu vă faceți griji cu privire la FTP și având în vedere că fișierele dvs. sunt atât offline, cât și pe Dropbox că sunt, în esență, salvate în mod implicit în mod implicit.
În timpul acestui tutorial vă voi arăta cum să faceți un site clasic de cinci pagini statice cu DropPages, folosind o versiune modificată a șablonului "Cuda" de la Graphic Burger.
Nu ne vom concentra pe modul în care este scris HTML și CSS de bază pentru șablon, ci mai degrabă cum să se ocupe de integrarea cu DropPages. Toate codurile de șablon necesare vor fi incluse în formatul de copiere și lipire gata de mai jos, sau puteți descărca fișierele sursă prin Descărcați atașamentul butonul din bara laterală.
Sa incepem!
Dacă nu ați făcut-o deja, mergeți la Dropbox și înregistrați-vă, apoi descărcați și instalați aplicația pe care o oferă pentru a vă sincroniza fișierele offline în spațiul de stocare online.
Apoi treceți la http://my.droppages.com/ și conectați-vă cu detaliile contului DropBox. Procedând astfel, dați DropPages accesul la configurarea unui dosar în contul dvs. Dropbox care va găzdui site-ul dvs. web. După ce aplicația Dropbox sincronizează fișierele online cu computerul, veți vedea o structură de directoare ca aceasta în dosarul Dropbox offline:
Fiecare dintre site-urile pe care le creați prin DropPages va trăi în interiorul acestui dosar. Acum sunteți gata să faceți mai departe și să creați un nou site.
După acordarea accesului la contul Dropbox, ar trebui să fiți redirecționat automat la tabloul de bord DropPages. Dacă nu, îl puteți accesa la http://my.droppages.com/account
Pentru a crea un site nou, faceți clic pe butonul albastru "Creați un site nou":
Apoi, veți fi direcționat către o pagină unde puteți specifica domeniul pe care doriți să îl utilizați pentru site-ul dvs. Puteți utiliza orice subdomeniu care nu este deja luat de un alt utilizator DropPages, dar trebuie să vă asigurați că includeți partea "droppages.com" a domeniului când introduceți alegerea dvs., cum ar fi:
După intrarea în domeniul dvs., dați clic pe butonul "Creați", iar DropPages va configura structura de directoare pentru noul dvs. site în dosarul "My.DropPages". Când este sincronizat cu dosarul Dropbox offline, acesta va arăta astfel:
Scopurile celor trei dosare pe care le vedeți sunt:
Accentsconagua
.txt fișiere scrise în marcaj și / sau HTML pentru a forma conținutul paginilor site-ului dvs..Când site-ul dvs. este creat pentru prima dată, acesta include un fișier cu substituent în fiecare dintre aceste foldere:
Când vizitați noul domeniu DropPages creat, cele trei fișiere vă vor oferi acest lucru:
Primul lucru pe care îl vom face este să adăugăm un anumit stil personalizat în jurul acestui conținut de bază, înlocuind codul în fișierele "main.css" și "base.html" existente.
Ori de câte ori mă refer la editarea fișierelor de site-uri pe parcursul acestui tutorial, aceasta va însemna utilizarea editorului de cod preferat direct pe fișierele offline dropbox > Aplicații > My.DropPages > mysubdomain.droppages.com pliant.
După ce salvați modificările aduse fișierului pe care îl editați, permiteți-i puțin timp aplicației dvs. Dropbox pentru a încărca fișierele în contul dvs., apoi actualizați site-ul DropPages pentru a vedea modificările făcute live.
După cum am menționat mai devreme, nu vom vorbi despre procesele actuale din spatele creării bazei CSS și HTML a acestui model de șablon, astfel încât să ne putem concentra în schimb pe manipularea integrării DropPages. Cu asta am spus, iată o foaie de stil pe care am pregătit-o mai devreme.
Copiați codul de mai jos și inserați-l în fișierul "main.css" din dosarul "Public" al site-ului dvs. (pregătiți-vă - este o bucată ...)
Public > main.css
html font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; articol, deoparte, detalii, figcaption, figura, subsol, header, hgroup, principal, nav, secțiune, rezumat display: block; audio, panza, progres, video display: inline-block; aliniere verticală: linia de bază; audio: nu ([controale]) display: none; înălțime: 0; [ascuns], șablon display: none; abbr [titlu] border-bottom: 1px punctat; b, puternic font-weight: bold; dfn font-style: italic; marca background: # ff0; culoare: # 000; mici font-size: 80%; sub, sup font-size: 75%; linia-înălțime: 0; poziție: relativă; aliniere verticală: linia de bază; sup top: -.5em; sub bottom: -.25em; svg: nu (: rădăcină) overflow: hidden; figura marja: 1em 40px; pre overflow: auto; cod, kbd, pre, samp font-family: monospace, monospace; dimensiune font: 1em; buton, introducere, optgroup, selectare, textarea culoare: inherit; font: inherit; marja: 0; butonul overflow: visible; , selectați text-transform: none; , intrarea html [type = "button"], / * 1 * /, introduceți [type = "reset"], introduceți [type = "submit"] -webkit-aspect: button; cursor: pointer; butonul [dezactivat], intrarea html [dezactivat] cursor: implicit; buton :: - moz-focus-interior, intrare :: - moz-focus-interior margine: 0; umplutura: 0; intrare linie-înălțime: normal; introduceți [type = "checkbox"], introduceți [type = "radio"] box-size: box-border; umplutura: 0; intrare [type = "number"] :: - butonul webkit-inner-spin, intrare [type = "number"] :: - webkit-outer-spin-button height: auto; input [type = "search"] -webkit-aspect: câmp de text; -moz-box-size: caseta de conținut; -webkit-box-dimensioning: content-box; dimensiunea cutiei: cutie de conținut; intrare [tip = "căutare"] :: - webkit-search-cancel-button, introduceți [type = "search"] :: - webkit-search-decoration -webkit-appearance: none; câmpul border: 1px solid # c0c0c0; margine: 0 2px; padding: .35em .625em .75em; legendă border: 0; umplutura: 0; textarea overflow: auto; optgroup font-weight: bold; table border-collapse: collapse; decalaj de frontieră: 0; td, a padding: 0; * box-size: border-box; -moz-box-size: caseta de margine; html lățime: 100%; înălțime: 100%; corp margine: 0; lățime: 100%; înălțime: 100%; fundal-culoare: # e7f1f8; font-family: 'Titillium Web'; a, a: vizitat, a: link text-decoration: none; culoare: # 3c5499; a: hover, a: activ culoare: # 17c2a4; h1, h2, h3, h4, h5 și h6 font-family: 'Titillium Web'; linia-înălțime: 1.313em; h1 font-size: 2.625em; marja: .563em 0; h2 font-size: 2,25; marja: .563em 0; hr graniță: 0; frontală de fund: .25em solid # e7f1f8; . scurtă width: 5.625em; .wrap lățime: 100%; max-lățime: 75cm; marja: 0 auto; poziție: relativă; .wrap: înainte, .wrap: după content: ""; afișare: tabel; .wrap: după clar: ambele; .site_header: înainte de content: ""; fundal-culoare: # 17c2a4; lățime: 100%; înălțime: 40.625; poziția: absolută; indicele z: -1; top: 0; stânga: 0; dreapta: 0; . site_header text-aliniere: centru; culoare: #fff; padding: 1.618rem 0 3.236rem 0; .site_title font-size: 4.5rem; marja: 0; .site_title a culoare: #fff; . site_tagline font-size: 1.125em; marja: 0; . site_tagline a culoare: #fff; .mainmenu background-color: # 87509c; raza de graniță: .375em .375em 0 0; min-înălțime: 3,75cm; padding-bottom: .875em; text-align: centru; .mainmenu ul lista-stil: nici unul; afișare: inline-block; marja: 0; .mainmenu li display: inline-block; marja: .875em .25em 0 .25em; .mainmenu a padding: 0 1.125em; text-transform: majuscule; culoare: #fff; linia-înălțime: 2em; .mainmenu .current, .mainmenu li: hover, .mainmenu li: activ fundal-culoare: # 643a79; raza de raza: .25em; .content font-size: 1.125em; fundal-culoare: #fff; culoare: # 3c4761; padding: 3.236em; min-înălțime: 37,5rem; .content: înainte, .content: după content: ""; afișare: tabel; .content: după clar: ambele; .contentwrap position: relative; .secondarynav float: right; marja: 0 0 1.618rem 1.618em; frontieră: .0625rem solid # e7f1f8; min-lățime: 18,75; padding: 0 1.618rem; .breadcrumbs ul stil-style: none; margin-stânga: 0; padding-left: 0; .breadcrumbs li afișare: inline; .breadcrumbs li: înainte de content: ">"; .breadcrumbs li: first-child: înainte de content: ""; .bigbutton border-radius: 4px; cursor: pointer; fundal-clip: padding-box; fundal-culoare: # eb7d4b; box-shadow: inset 0 -4px 0 # c7693f; frontieră: 0; marja: 3.236em auto; afișare: bloc; text-align: centru; lățime: auto; .bigbutton un padding: 1.125em 4.375em; text-transform: majuscule; culoare: #fff; font-weight: bold; afișare: inline-block; .candocolii lățime: 25%; plutește la stânga; text-align: centru; marja: 4.854rem auto; .site_footer background-color: # 3c5499; padding: 1.618rem 0; text-align: centru; .site_footer a culoare: #fff; font-size: 1.5; font-greutate: 600; marja: 0 1,618rem; .site_footer a: hover culoare: # 30bae7; @media (max-width: 55rem) .candocolii lățime: 50%; marja: 1.618rem auto; @media (max-lățime: 35rem) .candocolii lățime: 100%; @media (maximum-lățime: 320px) html min-width: 320px;
Acest CSS se va ocupa de toate aspectele esențiale ale aspectului, tipografiei, schemelor de culori și capacității de reacție.
Acum trebuie doar să tragem acea foaie de stil în șablonul nostru principal, precum și să adăugăm câteva extra, cum ar fi un antet și un subsol.
Copiați codul de mai jos și inserați-l în fișierul "base.html" din dosarul "Șabloane" al site-ului dvs..
Template-uri > base.html
Site ușor static prin intermediul DropPages.com Site ușor static
Editați local și găzduiți instantaneu pe Dropbox cu DropPages.com
Corp
Acest cod HTML face câteva lucruri. Acesta trage în foaia de stil "main.css" pe care tocmai ați editat-o, precum și un webfont de la Google. Creează un antet static care prezintă un titlu de site și un slogan și un subsol cu câteva linkuri către diferite rețele de socializare și site-uri de portofoliu. Creează, de asemenea, un spațiu pentru ca un meniu de navigare primar să trăiască, precum și un spațiu pentru afișarea conținutului.
Integrarea cu DropPages se face prin intermediul a două etichete șablon foarte simple:
Navigare primară - Aceasta face o listă neordonată a tuturor paginilor din site-ul dvs., inclusiv pagina de pornire.Corp - Aceasta va scoate conținutul din fișierele pe care le veți adăuga în dosarul "Conținut".Rețineți plasarea acestor două etichete șablon în HTML-ul de mai sus, cu Navigare primară eticheta plasată în interiorul nav element, și Corp eticheta plasată în interiorul principal element.
În momentul actualizării, site-ul dvs. ar trebui să arate astfel:
Observați cum același conținut "Bună ziua" pe care l-ați văzut pe noul dvs. site implicit este încă în vigoare, dar înconjurat de stilul pe care tocmai l-am adăugat prin fișierele "main.css" și "base.html".
Acum, hai să mergem mai departe și să adăugăm o parte din propriul nostru conținut personalizat.
Ca parte a conținutului personalizat al paginii de pornire, vom include patru imagini. Puteți obține propriile copii ale acestor imagini din fișierele sursă atașate la acest tutorial. După descărcarea și extragerea principalului EasyDropPagesStaticSite.zip fișier veți vedea un al doilea fișier zip în numele homepage_images.zip. Extrageți acest fișier și plasați imaginile pe care le conține în folderul "Public" al site-ului dvs..
Apoi, copiați codul de mai jos și inserați-l în fișierul "index.txt" din dosarul "Conținut" al site-ului dvs..
Conţinut > index.txt
:bazaBună! Suntem noii copii pe bloc și construim site-uri minunate și aplicații mobile.
Avem abilități!
Lorem ipsum dolor stați amet, consectetur adipisicing elit, sed do eiusmod
temporar incididant ut labore et dolore magna aliqua.
Prima linie a acestui fișier este cea mai semnificativă în ceea ce privește integrarea DropPages. Specifică șablonul în care doriți ca conținutul dvs. să fie redat.
În acest caz, dorim ca acest conținut să fie redat în șablonul "base.html", astfel că prima linie a fișierului trebuie să fie: :baza Puteți specifica faptul că un fișier de conținut trebuie redat în orice fișier de șablon, o funcție pe care o vom folosi mai târziu.
DropPages fișierele de conținut pot afișa fie Markdown, fie HTML. Dacă sunteți interesat să aflați mai multe despre sintaxa Markdown, vizitați Markdown: Ins și Outs.
Notă: un "gotcha" de a fi conștient este că dacă înfășurați o linie de Markdown în HTML, acesta nu va fi redat de DropPages. Altă este că, dacă utilizați Markdown pentru text, nu există o sintaxă disponibilă pentru ao centra.
De exemplu, în codul de mai sus există patru imagini plasate, fiecare înfășurat într-un div cu stil care le va face site-ul alături de coloane. Pentru a adăuga o imagine prin Markdown, ați folosi sintaxa ![Alt text] (/ path / to / img.jpg). Cu toate acestea, am constatat că, atunci când Markdown imagine a fost înfășurat în divs am folosit de mai sus nu au făcut, de ieșire codul actual Markdown pe pagină în loc.
Deci, având în vedere că vrem ca pagina noastră să aibă imagini înfășurate în divs și că vrem text centrat, tot conținutul adăugat fișierului "index.txt" este scris în HTML.
Reîmprospătați-vă site-ul și acum ar trebui să arate astfel:
Acum avem un conținut personalizat pentru pagina principală, deci este timpul să adăugați câteva subpagini suplimentare. Să începem cu pagina omniprezentă "Despre".
Pentru a adăuga pagini suplimentare la site-ul DropPages, tot ce trebuie să faceți este să creați noi .txt fișierele din dosarul "Conținut". Legăturile către acestea vor apărea automat în meniul dvs. "Navigare primară".
Numele care apare în meniul dvs. va fi preluat direct din numele fișierului dvs. de conținut, adică. Numele paginii mele.txt. În plus, puteți controla ordinea legăturilor de meniu prin prefixarea fiecărui fișier de conținut cu un număr urmat de un punct.
Vrem ca al doilea link din meniul nostru să fie la pagina "Despre", așa că în folderul "Conținut" creați un nou fișier text și numiți-l: 2. Despre Studio.txt
Adăugați următorul cod în noul fișier:
: base Despre studioul nostru ======== (Textul de la [http://notloremipsum.com/](http://notloremipsum.com/)) Suntem un studio de design destul de mic, flexibil, care proiectează pentru imprimare și web. Lucrăm flexibil cu clienții pentru a-și îndeplini nevoile de proiectare. Indiferent dacă aveți nevoie să creați un brand de la zero, inclusiv materiale de marketing și un site web frumos și funcțional sau dacă sunteți în căutarea unei reîmprospătare a designului, suntem încrezători că veți fi mulțumiți de rezultate. Oferim următoarele servicii: - Branding - Logos - Site-uri web - Aplicații Web - Dezvoltare Web - HTML5, CSS, jQuery - Sisteme de gestionare a conținutului - Responsabil Web design - Ilustrație - Carte de vizită -
De data aceasta nu avem nevoie de niciun wrap div sau text centrat, astfel încât codul să fie scris în întregime în sintaxa Markdown.
Reîmprospătați site-ul și ar trebui să vedeți un nou adăugat "Despre Studio" de pe meniul principal de navigare. Faceți clic pe acel link și veți fi direcționați către noua dvs. pagină, care ar trebui să arate astfel:
Adăugarea de pagini pentru site-ul DropPages este la fel de simplă. Doar creați un fișier text nou, denumiți-l în funcție de ceea ce doriți să apară în meniu, completați-l cu conținutul dvs. și ați terminat.
DropPages vă oferă, de asemenea, posibilitatea de a crea subpagini de nivel secundar. De exemplu, poate doriți să creați o pagină numită "Întâlniți echipa", care are link-uri către o subpagină pentru fiecare membru al echipei. În această secțiune vă voi arăta cum.
Pentru pagina noastră "Faceți cunoștință cu echipa", dorim să afișați linkuri către o pagină secundară pentru fiecare membru al echipei noastre, însă șablonul nostru de bază nu include o zonă pentru a afișa astfel de linkuri. Ca atare, vom crea un șablon personalizat pentru a face față acestei cerințe suplimentare.
DropPages șabloane au capacitatea de a cascadă, ceea ce înseamnă că un șablon se poate încărca în sine Corp eticheta unui alt șablon.
În cazul nostru, dorim să adăugăm o zonă cu linkuri către subpaginile noastre, dar totuși dorim să utilizăm codul HTML din șablonul "base.html". Pentru a face acest lucru, creați un fișier nou în dosarul "Șabloane" și denumiți-l "withsubpages.html". Apoi, copiați și lipiți codul de mai jos:
Template-uri > withsubpages.html
:bazaCorpOamenii noștri
SecondaryNavigation
După cum ați văzut mai devreme în fișierul nostru de conținut "index.txt", acest șablon folosește și :baza notație pe prima linie. Acest lucru permite sistemului să știe că HTML din acest șablon ar trebui să fie încărcat în Corp tag-ul șablonului "base.html".
Conținutul real al paginii va fi încărcat în Corp tag-ul șablonului "withsubpages.html".
În cazul în care este confuz de la toate, procesul de încărcare poate fi rezumat astfel: base.html> Body> withsubpages.html> Body> conținutul paginii.
În noul nostru fișier "withsubpages.html" am adăugat o inserție în jurul conținutului paginii și am adăugat o casetă care va fi aruncată în partea dreaptă care conține eticheta șablonului: SecondaryNavigation. Această etichetă șablon creează o listă neordonată a oricărei pagini frățești sau copil.
Apoi, să vedem cum creați de fapt subpaginile ale căror linkuri vor apărea în caseta "Navigare secundară".
Ori de câte ori doriți ca o pagină să aibă subpagini, în loc să creați un .txt fișier în dosarul "Conținut", creați un director. Acest director va păstra pagina de nivel superior, precum și oricare dintre copiii săi.
Utilizați aceleași convenții de numire pentru director ca și pentru un .txt fișier, adică începeți cu un număr pentru a indica poziția liniei de navigare primare, apoi utilizați orice nume doriți să apară în meniu.
Creați un dosar în directorul "Conținut" și denumiți-l "3.Meciți echipa".
În interiorul acelui director creați un fișier numit "index.txt". Codul pe care îl adăugați la acest fișier va forma conținutul paginii dvs. de nivel superior "Faceți cunoștință cu echipa".
Copiați și inserați în codul de mai jos:
Conţinut > 3.Meteaza echipa > index.txt
: withsubpages ## Faceți cunoștință cu echipa Înainte de a vă alege să luăm proiectul, probabil că doriți să știți ceva mai mult despre noi, întâlniți echipa: Ross are o experiență de peste 10 ani în domeniu. El este directorul nostru creativ, designer digital, designer web și dezvoltator de front-end. El este, de asemenea, destul de bun cu un sketchbook. Înainte de a începe compania, Ross a lucrat ca designer și manager de studio pentru o casă de design care a lăudat un număr mare de clienți de nume. Ross și-a adus experiența vastă din acest rol la munca pe care o face acum. Monica este sora lui Ross, directorul nostru de artă și este specializată în design grafic și tipărit. De asemenea, a lucrat cu niște nume mari, iar desenele sale au câștigat numeroase premii din industrie. Rachel și Chandler sunt designerii noștri. Rachel este un web designer cu cunoștințe de HTML și CSS și sprijină Ross pe proiecte. Chandler tocmai și-a terminat diploma de design grafic și se bucură să continue să învețe de la Monica și să-și construiască experiența. Joey și Phoebe se concentrează pe aducerea de noi afaceri în companie. Ei au câștigat recent o serie de clienți mari și ambii au, de asemenea, calificări în managementul proiectelor pentru a se asigura că proiectele funcționează fără probleme de la început până la sfârșit.
Notă: Pe prima linie a acestui cod nu mai adăugăm :baza. În schimb, adăugăm : withsubpages deoarece aceasta specifică faptul că vrem ca conținutul paginii să fie încărcat în șablonul "withsubpages.html".
Cu conținutul principal "Întâlniți echipa" în loc în fișierul "index.txt", sunteți gata să adăugați subpagini. Procesul de adăugare a fișierelor din acest dosar este același cu cel pe care l-ați urmat pentru a adăuga pagina "Despre" în dosarul de nivel superior. Pur și simplu creați un nou .txt fișier, cu un număr de comandă și un nume pentru controlul textului său de legătură în caseta de navigare secundară.
Creați un fișier numit "1.Ross și Monica.txt" și adăugați acest conținut în interiorul:
Conţinut > 3.Meteaza echipa > 1.Ross și Monica.txt
: withsubpages Ross și Monica Ross au peste 10 ani de experiență în industrie. El este directorul nostru creativ, designer digital, designer web și dezvoltator de front-end. El este, de asemenea, destul de bun cu un sketchbook. Înainte de a începe compania, Ross a lucrat ca designer și manager de studio pentru o casă de design care a lăudat un număr mare de clienți de nume. Ross și-a adus experiența vastă din acest rol la munca pe care o face acum. Monica este sora lui Ross, directorul nostru de artă și este specializată în design grafic și tipărit. De asemenea, a lucrat cu niște nume mari, iar desenele sale au câștigat numeroase premii din industrie.
Din nou, folosim : withsubpages notație de a încărca această pagină în șablonul "withsubpages.html".
Creați un al doilea fișier numit "2.Juniors and Sales.txt"cu acest conținut în interiorul:
Conţinut > 3.Meteaza echipa > 2.Juniors and Sales.txt
: withsubpages ## Juniori și vânzări Rachel și Chandler sunt designerii noștri Junior. Rachel este un web designer cu cunoștințe de HTML și CSS și sprijină Ross pe proiecte. Chandler tocmai și-a terminat diploma de design grafic și se bucură să continue să învețe de la Monica și să-și construiască experiența. Joey și Phoebe se concentrează pe aducerea de noi afaceri în companie. Ei au câștigat recent o serie de clienți mari și ambii au, de asemenea, calificări în managementul proiectelor pentru a se asigura că proiectele funcționează fără probleme de la început până la sfârșit.
Reîmprospătați site-ul dvs. și ar trebui să vedeți noul link "Faceți cunoștință cu echipa" de pe navbar. Dați clic pe el și noua pagină ar trebui să apară cu un link către fiecare pagină secundară din caseta de navigare secundară din partea dreaptă. Fiecare dintre subpaginile dvs. ar trebui să aibă, de asemenea, același aspect, după cum urmează:
În general vorbind, cu site-uri statice, cinci pare a fi numărul magic de pagini de a avea (nu am idee de ce). Deci, să mergem mai departe și să adăugăm încă două pagini pe site-ul dvs. pentru a elimina numărul respectiv.
În dosarul "Conținut" creați un fișier numit "4.Markdown Examples.txt" și adăugați următorul cod:
Conţinut > 4.Markdown Examples.txt
