Share
Cosa starai creandoProbabilmente sai che Dropbox è perfetto per archiviare backup di dati e condividere file, ma lo sapevi che puoi usarlo anche come host web statico? Grazie a app eleganti come DropPages, che tratteremo qui oggi, puoi farlo!
Il processo alla base di DropPages è davvero piuttosto brillante. Basta semplicemente dare l'app DropPages al tuo account Dropbox e crea una cartella "My.DropPages" in cui caricerai i file del tuo sito web. Quindi, quando le persone visitano il tuo dominio DropPages funge da intermediario tra il browser e il tuo account Dropbox, preleva i file dalla cartella "My.DropPages" e li pubblica come un sito web completamente funzionante.
Poiché Dropbox viene fornito con un'applicazione che sincronizza i file sul tuo computer con la tua memoria online, puoi semplicemente mantenere il tuo sito localmente e consentire a Dropbox di caricare automaticamente i file per te. Ciò significa che non ci si deve preoccupare dell'FTP e dato che i tuoi file sono sia offline che su Dropbox, in sostanza vengono sottoposti a backup di default.
Durante questo tutorial ti mostrerò come creare un classico sito statico di cinque pagine con DropPages, utilizzando una versione modificata del modello "Cuda" di Graphic Burger.
Non ci concentreremo su come vengono scritti HTML e CSS di base per il modello, ma piuttosto su come gestire l'integrazione con DropPages. Tutto il codice del modello richiesto sarà incluso nel formato pronto per copia e incolla di seguito, oppure puoi scaricare i file sorgente tramite il file Scarica allegato pulsante qui nella barra laterale.
Cominciamo!
Se non lo hai già fatto, vai su Dropbox e registrati, quindi scarica e installa l'applicazione che forniscono per sincronizzare i tuoi file offline con il tuo spazio di archiviazione online.
Quindi vai su http://my.droppages.com/ e accedi con i dettagli del tuo account DropBox. In questo modo stai dando accesso a DropPages per impostare una cartella nel tuo account Dropbox che ospiterà il tuo sito web. Dopo che l'applicazione Dropbox sincronizza i file online con il tuo computer vedrai una struttura di cartelle come questa nella tua cartella Dropbox offline:
Ciascuno dei siti che crei tramite DropPages vivrà all'interno di questa cartella. Ora sei pronto per andare avanti e creare un nuovo sito.
Dopo aver concesso l'accesso al tuo account Dropbox dovresti essere automaticamente reindirizzato al tuo dashboard DropPages. In caso contrario, è possibile accedervi all'indirizzo http://my.droppages.com/account
Per creare un nuovo sito, fai clic sul grande pulsante blu "Crea un nuovo sito":
Verrai quindi indirizzato a una pagina in cui puoi specificare il dominio che desideri utilizzare per il tuo sito. Puoi utilizzare qualsiasi sottodominio che non sia già stato preso da un altro utente DropPages, ma devi assicurarti di includere la parte "droppages.com" del dominio quando inserisci la tua scelta, in questo modo:
Dopo aver inserito il tuo dominio, fai clic sul pulsante "Crea" e DropPages imposterà la struttura delle cartelle per il tuo nuovo sito all'interno della cartella "My.DropPages". Quando viene sincronizzato con la tua cartella Dropbox offline, sarà simile a questo:
Gli scopi delle tre cartelle che vedi sono:
Accentsconagua
.testo file scritti in markdown e / o HTML per formare il contenuto delle pagine del tuo sito.Quando il tuo sito viene creato per la prima volta include un file segnaposto in ciascuna di queste cartelle:
Quando visiti il tuo dominio DropPages appena creato, questi tre file ti daranno questo:
La prima cosa che faremo è aggiungere uno stile di tema personalizzato attorno a questo contenuto di base, sostituendo il codice nei file "main.css" e "base.html" esistenti.
Ogni volta che mi riferisco alla modifica dei file del sito in questo tutorial, vorrà dire usare il tuo editor di codice preferito direttamente sui file nel tuo offline Dropbox > applicazioni > My.DropPages > mysubdomain.droppages.com cartella.
Dopo aver salvato le modifiche al file che stai modificando, concedi un po 'di tempo all'applicazione Dropbox per caricare i tuoi file sul tuo account, quindi aggiorna il tuo sito DropPages per vedere le tue modifiche diventare attive.
Come ho detto prima, non parleremo dei processi reali alla base della creazione del CSS e dell'ID HTML di base di questo modello, quindi possiamo concentrarci sulla gestione dell'integrazione di DropPages. Detto ciò, ecco un foglio di stile che ho preparato in precedenza.
Copia tutto il codice qui sotto e incollalo nel file "main.css" nella cartella "Pubblico" del tuo sito (preparati - è un bel po '...)
Pubblico > main.css
html font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; articolo, a parte, dettagli, figcaption, figure, footer, header, hgroup, main, nav, section, summary display: block; audio, canvas, progress, video display: inline-block; vertical-align: baseline; audio: not ([controls]) display: none; altezza: 0; [hidden], template display: none; abbr [titolo] border-bottom: 1px punteggiato; b, strong font-weight: bold; dfn font-style: italic; mark background: # ff0; colore: # 000; small font-size: 80%; sub, sup font-size: 75%; altezza della linea: 0; posizione: relativa; vertical-align: baseline; sup top: -.5em; sub bottom: -.25em; svg: not (: root) overflow: hidden; figura margine: 1em 40px; pre overflow: auto; codice, kbd, pre, samp font-family: monospace, monospace; dimensione carattere: 1em; pulsante, input, optgroup, select, textarea color: inherit; font: inherit; margine: 0; button overflow: visible; pulsante, selezionare text-transform: none; pulsante, input html [type = "button"], / * 1 * /, input [type = "reset"], input [type = "submit"] -webkit-appearance: button; cursore: puntatore; pulsante [disabilitato], html input [disabilitato] cursor: default; button :: - moz-focus-inner, input :: - moz-focus-inner border: 0; padding: 0; input line-height: normal; input [type = "checkbox"], input [type = "radio"] box-sizing: border-box; padding: 0; input [type = "number"] :: - webkit-inner-spin-button, input [type = "number"] :: - webkit-outer-spin-button height: auto; input [type = "search"] -webkit-appearance: textfield; -moz-box-dimensionamento: content-box; -webkit-box-dimensionamento: content-box; dimensionamento del riquadro: casella di contenuto; input [type = "search"] :: - webkit-search-cancel-button, input [type = "search"] :: - webkit-search-decoration -webkit-appearance: none; fieldset border: 1px solid # c0c0c0; margine: 0 2px; riempimento: .35em .625em .75em; legend border: 0; padding: 0; textarea overflow: auto; optgroup font-weight: bold; tabella border-collapse: collapse; border-spacing: 0; td, th padding: 0; * dimensionamento della casella: border-box; -moz-box-dimensionamento: border-box; html width: 100%; altezza: 100%; body margin: 0; larghezza: 100%; altezza: 100%; background-color: # e7f1f8; font-family: 'Titillium Web'; a, a: visited, a: link text-decoration: none; colore: # 3c5499; a: hover, a: active color: # 17c2a4; h1, h2, h3, h4, h5, h6 font-family: 'Titillium Web'; line-height: 1.313em; h1 font-size: 2.625em; margine: 0,563em 0; h2 font-size: 2.25em; margine: 0,563em 0; hr border: 0; border-bottom: .25em solid # e7f1f8; .short width: 5.625em; .wrap width: 100%; larghezza massima: 75em; margine: 0 auto; posizione: relativa; .wrap: before, .wrap: after content: ""; display: tabella; .wrap: after clear: both; . site_header: before content: ""; background-color: # 17c2a4; larghezza: 100%; altezza: 40.625rem; posizione: assoluta; z-index: -1; inizio: 0; a sinistra: 0; a destra: 0; . site_header text-align: center; colore: #fff; imbottitura: 1.618rem 0 3.236rem 0; . site_title font-size: 4.5rem; margine: 0; . site_title a color: #fff; . site_tagline font-size: 1.125em; margine: 0; . site_tagline a color: #fff; .mainmenu background-color: # 87509c; border-radius: .375em .375em 0 0; altezza minima: 3,75em; imbottitura-fondo: .875em; allineamento del testo: centro; .mainmenu ul list-style: none; display: blocco in linea; margine: 0; .mainmenu li display: inline-block; margine: .875em .25em 0 .25em; .mainmenu a padding: 0 1.125em; text-transform: maiuscolo; colore: #fff; line-height: 2em; .mainmenu .current, .mainmenu li: hover, .mainmenu li: active background-color: # 643a79; border-radius: .25em; .content font-size: 1.125em; background-color: #fff; colore: # 3c4761; imbottitura: 3.236em; altezza minima: 37.5rem; .content: before, .content: after content: ""; display: tabella; .content: after clear: both; .contentwrap position: relative; .secondarynav float: right; margine: 0 0 1.618rem 1.618em; border: .0625rem solid # e7f1f8; larghezza minima: 18.75rem; imbottitura: 0 1.618rem; .breadcrumbs ul list-style: none; margin-left: 0; padding-left: 0; .breadcrumbs li display: inline; .breadcrumbs li: before content: ">"; .breadcrumbs li: first-child: before content: ""; .bigbutton border-radius: 4px; cursore: puntatore; sfondo-clip: padding-box; background-color: # eb7d4b; box-shadow: inset 0 -4px 0 # c7693f; confine: 0; margine: 3.236em automatico; blocco di visualizzazione; allineamento del testo: centro; larghezza: auto; .bigbutton a padding: 1.125em 4.375em; text-transform: maiuscolo; colore: #fff; font-weight: bold; display: blocco in linea; .candocols width: 25%; fluttuare: a sinistra; allineamento del testo: centro; margine: 4.854rem automatico; .site_footer background-color: # 3c5499; imbottitura: 1.618rem 0; allineamento del testo: centro; . site_footer a color: #fff; font-size: 1.5em; font-weight: 600; margine: 0 1,618rem; .site_footer a: hover color: # 30bae7; @media (larghezza massima: 55rem) .candocols larghezza: 50%; margine: 1.618rem automatico; @media (larghezza massima: 35rem) .candocols larghezza: 100%; @media (larghezza massima: 320 px) html larghezza minima: 320 px;
Questo CSS gestirà tutti gli elementi essenziali di layout, tipografia, combinazione di colori e reattività.
Ora dobbiamo solo inserire quel foglio di stile nel nostro modello principale, oltre ad aggiungere alcuni extra come un'intestazione e un piè di pagina.
Copia tutto il codice qui sotto e incollalo nel file "base.html" nella cartella "Modelli" del tuo sito.
Modelli > base.html
Facile sito statico tramite DropPages.com Facile sito statico
Modifica localmente e host istantaneamente su Dropbox con DropPages.com
Corpo
Questo codice HTML fa alcune cose. Inserisce il foglio di stile "main.css" appena modificato e un webfont di Google. Crea un'intestazione statica che mostra un titolo e una tagline del sito e un piè di pagina con alcuni collegamenti a vari siti di social network e portfolio. Crea anche uno spazio per un menu di navigazione principale in cui vivere e uno spazio per la visualizzazione dei contenuti.
L'integrazione con DropPages avviene tramite due tag modello molto semplici:
PrimaryNavigation - Ciò rende un elenco non ordinato di tutte le pagine del tuo sito, inclusa la home page.Corpo - Questo produce il contenuto dai file che aggiungerai alla cartella "Contenuto".Notare il posizionamento di questi due tag modello nell'HTML sopra, con PrimaryNavigation tag inserito all'interno del nav elemento, e il Corpo tag inserito all'interno del principale elemento.
Al momento di aggiornare il tuo sito dovrebbe apparire come questo:
Nota come lo stesso contenuto di "Hello world" che hai visto sul tuo nuovo sito predefinito è ancora attivo, ma circondato dallo stile che abbiamo appena aggiunto tramite i file "main.css" e "base.html".
Ora andiamo avanti e aggiungiamo alcuni dei nostri contenuti della home page personalizzata.
Come parte del nostro contenuto della home page personalizzata, includeremo quattro immagini. Puoi ottenere le tue copie di queste immagini dai file sorgente allegati a questo tutorial. Dopo aver scaricato ed estratto il main EasyDropPagesStaticSite.zip file vedrai un secondo file zip all'interno di named homepage_images.zip. Estrai questo file e posiziona le immagini che contiene nella cartella "pubblica" del tuo sito.
Quindi copia tutto il codice qui sotto e incollalo nel file "index.txt" nella cartella "Contenuto" del tuo sito.
Soddisfare > index.txt
:baseCiao! Siamo i nuovi ragazzi sul blocco e costruiamo fantastici siti Web e app mobili.
ABBIAMO OTTENUTO LE ABILITÀ!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
temporale incididunt ut labore et dolore magna aliqua.
La prima riga di questo file è la più significativa per l'integrazione di DropPages. Specifica il modello in cui si desidera eseguire il rendering dei contenuti.
In questo caso vogliamo che questo contenuto venga reso nel modello "base.html", quindi la prima riga del file deve essere: :base Puoi specificare che un file di contenuto debba essere reso in qualsiasi file modello, una funzione che utilizzeremo in seguito.
I file di contenuto DropPages possono rendere Markdown o HTML. Se sei interessato a saperne di più sulla sintassi di Markdown, controlla Markdown: The Ins and Outs.
Nota: un "getcha" di cui essere a conoscenza è che se si avvolge una linea di Markdown in HTML, non verrà reso da DropPages. Un altro è che se usi Markdown per il testo, non c'è sintassi disponibile per centrarlo.
Ad esempio, nel codice qui sopra sono posizionate quattro immagini, ciascuna avvolta in a div con uno stile che li renderà affiancati nelle colonne. Per aggiungere un'immagine tramite Markdown si usa la sintassi ![Alt text] (/ path / to / img.jpg). Tuttavia ho scoperto che quando l'immagine Markdown era racchiusa tra le div che ho usato sopra non venivano renderizzate, producendo invece il codice Markdown effettivo sulla pagina.
Quindi, dato che vogliamo che la nostra home page abbia immagini avvolte in div, e vogliamo il testo centrato, tutto il contenuto aggiunto al file "index.txt" è scritto in HTML.
Aggiorna il tuo sito e dovrebbe ora apparire come questo:
Ora abbiamo alcuni contenuti della home page personalizzati, quindi è il momento di aggiungere altre pagine secondarie. Iniziamo con la onnipresente pagina "Informazioni".
Per aggiungere pagine extra al tuo sito DropPages, tutto ciò che devi fare è crearne di nuovi .testo file nella cartella "Contenuto". I collegamenti ad essi verranno automaticamente visualizzati nel menu "Navigazione principale".
Il nome che appare nel tuo menu sarà preso direttamente dal nome del tuo file di contenuto, cioè. My Page Name.txt. Inoltre, è possibile controllare l'ordine dei collegamenti dei menu anteponendo ciascun file di contenuto con un numero seguito da un punto.
Vogliamo che il secondo link del nostro menu sia nella nostra pagina "Informazioni", quindi nella cartella "Contenuto" crea un nuovo file di testo e nominalo: 2. Informazioni sul nostro Studio.txt
Aggiungi il seguente codice al tuo nuovo file:
: base Informazioni sul nostro studio ======== (Testo segnaposto da [http://notloremipsum.com/](http://notloremipsum.com/)) Siamo uno studio di design abbastanza piccolo e flessibile che progetta per stampa e web. Lavoriamo in modo flessibile con i clienti per soddisfare le loro esigenze di progettazione. Se hai bisogno di creare un marchio da zero, compresi i materiali di marketing e un sito web bello e funzionale o se stai cercando un aggiornamento del design, siamo certi che sarai soddisfatto dei risultati. Offriamo i seguenti servizi: - Branding - Loghi - Siti Web - Applicazioni Web - Sviluppo Web - HTML5, CSS, jQuery - Sistemi di gestione dei contenuti - Responsive Web Design - Illustrazione - Biglietti da visita - Carta intestata e giustificativi - Volantini - Mailer - Carte per appuntamenti
Questa volta non abbiamo bisogno di alcun wrapper div o testo centrato, quindi il codice è scritto interamente nella sintassi Markdown.
Aggiorna il sito e dovresti visualizzare un link "Informazioni sul nostro studio" appena aggiunto nel menu di navigazione principale. Fai clic sul link e verrai indirizzato alla tua nuova pagina, che dovrebbe avere questo aspetto:
Aggiungere pagine per il tuo sito DropPages è così semplice. Basta creare un nuovo file di testo, nominarlo in base a ciò che si desidera visualizzare sul menu, riempirlo con il contenuto e il gioco è fatto.
DropPages ti dà anche la possibilità di creare pagine secondarie di secondo livello. Ad esempio, potresti voler creare una pagina denominata "Meet the Team" che abbia collegamenti a una pagina secondaria per ciascun membro del team. In questa sezione ti mostrerò come.
Per la nostra pagina "Meet the Team" vogliamo mostrare i collegamenti a una pagina secondaria per ciascuno dei membri del nostro team, tuttavia il nostro modello di base non include un'area per visualizzare tali collegamenti. In quanto tale, creeremo un modello personalizzato per gestire questo requisito aggiuntivo.
I modelli DropPages hanno la capacità di cascata, significa che un modello può caricarsi nel Corpo tag di un altro modello.
Nel nostro caso vogliamo aggiungere un'area con collegamenti alle nostre sottopagine, ma vogliamo comunque utilizzare l'HTML dal modello "base.html". Per farlo, crea un nuovo file nella cartella "Modelli" e chiamalo "withsubpages.html". Quindi copia e incolla nel codice qui sotto:
Modelli > withsubpages.html
:baseCorpoLa nostra gente
SecondaryNavigation
Come hai visto in precedenza nel nostro file di contenuto "index.txt", questo modello usa anche il :base notazione sulla prima riga. Ciò consente al sistema di sapere che l'HTML da questo modello deve essere caricato nel Corpo tag del modello "base.html".
Il contenuto della pagina effettiva verrà caricato nel Corpo tag del modello "withsubpages.html".
Nel caso questo sia fonte di confusione, il processo di caricamento può essere riassunto come: base.html> Corpo> withsubpages.html> Corpo> contenuto della pagina.
Nel nostro nuovo file "withsubpages.html" abbiamo aggiunto un div wrapper attorno al contenuto della pagina e aggiunto una casella che verrà posizionata a destra contenente il tag del modello: SecondaryNavigation. Questo tag modello crea un elenco non ordinato di tutte le pagine di pari livello o secondarie.
Successivamente, esaminiamo come create effettivamente le pagine secondarie i cui collegamenti appariranno in quella casella "Navigazione secondaria".
Ogni volta che vuoi che una pagina abbia pagine secondarie, invece di creare una pagina .testo file nella cartella "Contenuto", si crea una directory. Questa directory manterrà la pagina di primo livello e tutti i suoi figli.
Si utilizzano le stesse convenzioni di denominazione per la directory come si farebbe per a .testo file, inizia con un numero per indicare la posizione del link di navigazione principale, quindi usa il nome che vorresti che fosse visualizzato nel menu.
Crea una cartella nella directory "Contenuto" e chiamala "3. Rispondi al team".
All'interno di tale cartella creare un file denominato "index.txt". Il codice che aggiungi a questo file formerà il tuo contenuto di pagina "Meet the Team" di primo livello.
Copia e incolla nel codice qui sotto:
Soddisfare > 3. Rispondi al team > index.txt
: withsubpages ## Incontra il team Prima di sceglierci per affrontare il tuo progetto, probabilmente vorrai sapere qualcosa di più su di noi, quindi incontra il team: Ross ha oltre 10 anni di esperienza nel settore. È il nostro direttore creativo, designer digitale, web designer e sviluppatore front-end. È anche piuttosto bravo con un album da disegno. Prima di avviare la società, Ross ha lavorato come designer e direttore di studio per una casa di design che vantava numerosi clienti di grande nome. Ross ha portato la sua vasta esperienza da questo ruolo al lavoro che fa ora. Monica è la sorella di Ross, la nostra Art Director, specializzata in grafica e design di stampa. Ha anche lavorato con alcuni grandi nomi e le sue creazioni le sono valse numerosi premi del settore. Rachel e Chandler sono i nostri giovani designer. Rachel è una web designer con conoscenza di HTML e CSS e supporta Ross sui progetti. Chandler ha appena terminato la sua laurea in Graphic Design e si diverte a continuare a imparare da Monica ea sviluppare la sua esperienza. Joey e Phoebe si concentrano sul portare nuovi affari alla compagnia. Di recente hanno vinto numerosi grandi clienti e hanno entrambi le qualifiche nella gestione dei progetti per garantire che i progetti si svolgano senza intoppi dall'inizio alla fine.
Nota: Sulla prima riga di questo codice non aggiungiamo più :base. Invece, aggiungiamo : withsubpages in quanto ciò specifica che vogliamo che il contenuto della pagina venga caricato nel modello "withsubpages.html".
Con il tuo contenuto principale "Meet the Team" sul posto nel file "index.txt" sei pronto per aggiungere pagine secondarie. Il processo di aggiunta di file all'interno di questa cartella è lo stesso seguito per aggiungere la pagina "Informazioni" nella cartella di livello superiore. Crea semplicemente un nuovo .testo file, con un numero per l'ordine e un nome per controllarne il testo del collegamento nella casella di navigazione secondaria.
Crea un file chiamato "1.Ross e Monica.txt" e aggiungi questo contenuto all'interno:
Soddisfare > 3. Rispondi al team > 1.Ross e Monica.txt
: withsubpages ## Ross e Monica Ross ha oltre 10 anni di esperienza nel settore. È il nostro direttore creativo, designer digitale, web designer e sviluppatore front-end. È anche piuttosto bravo con un album da disegno. Prima di avviare la società, Ross ha lavorato come designer e direttore di studio per una casa di design che vantava numerosi clienti di grande nome. Ross ha portato la sua vasta esperienza da questo ruolo al lavoro che fa ora. Monica è la sorella di Ross, la nostra Art Director, specializzata in grafica e design di stampa. Ha anche lavorato con alcuni grandi nomi e le sue creazioni le sono valse numerosi premi del settore.
Di nuovo, usiamo il : withsubpages notazione per caricare questa pagina nel modello "withsubpages.html".
Creare un secondo file denominato "2.Juniors and Sales.txt"con questo contenuto all'interno:
Soddisfare > 3. Rispondi al team > 2. Junior e Sales.txt
: withsubpages ## Juniors and Sales Rachel e Chandler sono i nostri giovani designer. Rachel è una web designer con conoscenza di HTML e CSS e supporta Ross sui progetti. Chandler ha appena terminato la sua laurea in Graphic Design e si diverte a continuare a imparare da Monica ea sviluppare la sua esperienza. Joey e Phoebe si concentrano sul portare nuovi affari alla compagnia. Di recente hanno vinto numerosi grandi clienti e hanno entrambi le qualifiche nella gestione dei progetti per garantire che i progetti si svolgano senza intoppi dall'inizio alla fine.
Aggiorna il tuo sito e dovresti vedere il nuovo collegamento "Meet the Team" sulla barra di navigazione. Fare clic e la tua nuova pagina dovrebbe apparire con un collegamento a ciascuna pagina secondaria nella casella di navigazione secondaria sul lato destro. Ogni tua pagina secondaria dovrebbe avere lo stesso layout, come questo:
In generale, con siti statici, cinque sembrano essere il numero magico di pagine da avere (non ho idea del perché). Quindi andiamo avanti e aggiungiamo altre due pagine al tuo sito per completare quel numero.
Nella cartella "Contenuto" crea un file chiamato "4.Markdown Examples.txt" e aggiungi il seguente codice:
Soddisfare > 4.Markdown Examples.txt
