Share
Ce que vous allez créerVous savez probablement que Dropbox est idéal pour stocker des sauvegardes de données et partager des fichiers, mais saviez-vous que vous pouvez également l'utiliser comme hébergeur de site statique? Grâce à des applications géniales comme DropPages, que nous allons couvrir ici aujourd'hui, vous pouvez!
Le processus derrière DropPages est vraiment très brillant. Vous donnez simplement à l'application DropPages l'accès à votre compte Dropbox, ce qui crée un dossier "Mes pages de dépouille" dans lequel vous allez télécharger les fichiers de votre site Web. Lorsque des personnes visitent votre domaine, DropPages agit en tant qu'intermédiaire entre le navigateur et votre compte Dropbox, récupérant les fichiers dans votre dossier "My.DropPages" et les servant comme un site Web entièrement fonctionnel..
Dropbox étant livré avec une application qui synchronise les fichiers de votre ordinateur avec votre espace de stockage en ligne, vous pouvez simplement gérer votre site localement et permettre à Dropbox de télécharger automatiquement les fichiers pour vous. Cela signifie que vous n'avez pas à vous soucier de FTP et que vos fichiers sont à la fois hors ligne et sur Dropbox, ils sont essentiellement sauvegardés par défaut..
Au cours de ce tutoriel, je vais vous montrer comment créer un site statique classique de cinq pages avec DropPages, en utilisant une version modifiée du modèle "Cuda" de Graphic Burger..
Nous ne nous concentrerons pas sur la façon dont le code HTML et CSS de base est écrit pour le modèle, mais plutôt sur la gestion de l'intégration avec DropPages. Tout le code de modèle requis sera inclus dans le format prêt à copier / coller ci-dessous, ou vous pouvez télécharger les fichiers source via le Télécharger la pièce jointe bouton ici dans la barre latérale.
Commençons!
Si ce n'est déjà fait, allez sur Dropbox et enregistrez-vous, puis téléchargez et installez l'application fournie pour synchroniser vos fichiers hors connexion sur votre stockage en ligne..
Rendez-vous ensuite sur http://my.droppages.com/ et connectez-vous avec les détails de votre compte DropBox. En faisant cela, vous donnez à DropPages l’accès pour configurer un dossier dans votre compte Dropbox qui hébergera votre site Web. Une fois que l'application Dropbox synchronise vos fichiers en ligne sur votre ordinateur, vous verrez une structure de dossiers semblable à celle-ci dans votre dossier Dropbox hors connexion:
Chacun des sites que vous créez via DropPages vivra dans ce dossier. Vous êtes maintenant prêt à créer un nouveau site..
Après avoir accordé l'accès à votre compte Dropbox, vous devez être automatiquement redirigé vers votre tableau de bord DropPages. Sinon, vous pouvez y accéder à l'adresse http://my.droppages.com/account.
Pour créer un nouveau site, cliquez sur le gros bouton bleu "Créer un nouveau site":
Vous serez ensuite dirigé vers une page où vous pourrez spécifier le domaine que vous souhaitez utiliser pour votre site. Vous pouvez utiliser n'importe quel sous-domaine qui n'est pas déjà occupé par un autre utilisateur de DropPages, mais vous devez vous assurer d'inclure la partie "droppages.com" du domaine lorsque vous entrez votre choix, comme suit:
Après avoir entré votre domaine, cliquez sur le bouton "Créer" et DropPages configurera la structure de dossiers de votre nouveau site dans votre dossier "Mes pages de dépôt". Une fois synchronisé avec votre dossier Dropbox hors connexion, il ressemblera à ceci:
Les objectifs des trois dossiers que vous voyez sont les suivants:
Accentsconagua
.SMS des fichiers écrits en markdown et / ou HTML pour former le contenu des pages de votre site.Lorsque votre site est créé pour la première fois, il inclut un fichier d’espace réservé dans chacun de ces dossiers:
Lorsque vous visitez votre domaine DropPages nouvellement créé, ces trois fichiers vous donnent ceci:
La première chose à faire est d’ajouter un style de thème personnalisé autour de ce contenu de base, en remplaçant le code des fichiers "main.css" et "base.html" existants..
Chaque fois que je me réfère à la modification de fichiers de site tout au long de ce didacticiel, vous devrez utiliser votre éditeur de code préféré directement sur les fichiers de votre mode hors connexion. Dropbox > applications > My.DropPages > mysubdomain.droppages.com dossier.
Après avoir enregistré les modifications apportées au fichier que vous modifiez, laissez à votre application Dropbox le temps de télécharger vos fichiers sur votre compte, puis actualisez votre site DropPages pour que vos modifications soient mises en ligne..
Comme je l'ai mentionné précédemment, nous n'allons pas parler des processus qui sous-tendent la création des CSS et HTML de base de cette conception de modèle, nous pouvons donc nous concentrer sur la gestion de l'intégration de DropPages. Cela dit, voici une feuille de style que j'ai préparée précédemment.
Copiez tout le code ci-dessous et collez-le dans le fichier "main.css" du dossier "Public" de votre site (préparez-vous - c'est tout un morceau…)
Publique > main.css
html font-family: sans-serif; -ms-text-size-ajuster: 100%; -webkit-text-size-adjust: 100%; article, aparté, détails, figcaption, figure, pied de page, en-tête, hgroup, main, navigation, section, récapitulatif display: block; audio, canvas, progrès, vidéo display: inline-block; alignement vertical: ligne de base; audio: pas ([contrôles]) display: none; hauteur: 0; [masqué], modèle display: none; abbr [title] border-bottom: 1px en pointillé; b, fort font-weight: bold; dfn font-style: italic; mark background: # ff0; couleur: # 000; petit taille de la police: 80%; sub, sup taille de la police: 75%; hauteur de ligne: 0; position: relative; alignement vertical: ligne de base; sup top: -.5em; sous en bas: -.25em; svg: not (: root) débordement: caché; figure margin: 1em 40px; pre débordement: auto; code, kbd, pre, samp font-family: monospace, monospace; taille de police: 1em; bouton, entrée, optgroup, select, textarea color: inherit; font: hériter; marge: 0; button débordement: visible; bouton, sélectionnez text-transform: none; bouton, entrée html [type = "bouton"], / * 1 * /, entrée [type = "réinitialisation"], entrée [type = "submit"] -webkit-apparence: bouton; curseur: pointeur; bouton [désactivé], entrée html [désactivé] curseur: par défaut; bouton :: - moz-focus-inner, entrée :: - moz-focus-inner border: 0; rembourrage: 0; input line-height: normal; input [type = "case à cocher"], input [type = "radio"] box-sizing: border-box; rembourrage: 0; input [type = "numéro"] :: - bouton webkit-inner-spin, entrée [type = "numéro"] :: - bouton webkit-outer-spin hauteur: auto; input [type = "search"] -webkit-apparence: textfield; -moz-box-sizing: contenu-box; -webkit-box-sizing: contenu-box; taille de la boîte: contenu-boîte; input [type = "search"] :: - bouton webkit-search-cancel, input [type = "search"] :: - webkit-search-decoration -webkit-apparence: none; fieldset border: 1px solid # c0c0c0; marge: 0 2px; remplissage: .35em .625em .75em; légende border: 0; rembourrage: 0; textarea overflow: auto; optgroup font-weight: bold; table border-collapse: collapse; espacement des bordures: 0; td, th padding: 0; * box-sizing: border-box; -moz-box-dimensionnement: border-box; html width: 100%; hauteur: 100%; body margin: 0; largeur: 100%; hauteur: 100%; couleur de fond: # e7f1f8; famille de polices: 'Titillium Web'; a, a: visité, a: link text-decoration: none; couleur: # 3c5499; a: survol, a: actif color: # 17c2a4; h1, h2, h3, h4, h5, h6 font-family: 'Titillium Web'; hauteur de ligne: 1.313em; h1 font-size: 2.625em; marge: .563em 0; h2 font-size: 2.25em; marge: .563em 0; hr border: 0; border-bottom: 0,25em solide # e7f1f8; .short width: 5.625em; .wrap width: 100%; largeur maximale: 75em; marge: 0 auto; position: relative; .wrap: before, .wrap: after content: ""; affichage: table; .wrap: after clear: both; .site_header: before content: ""; couleur de fond: # 17c2a4; largeur: 100%; hauteur: 40,625 rem; position: absolue; z-index: -1; en haut: 0; gauche: 0; à droite: 0; .site_header text-align: center; couleur: #fff; remplissage: 1.618rem 0 3.236rem 0; .site_title font-size: 4.5rem; marge: 0; .site_title a color: #fff; .site_tagline font-size: 1.125em; marge: 0; .site_tagline a color: #fff; .mainmenu background-color: # 87509c; border-radius: .375em .375em 0 0; hauteur minimale: 3,75 µm; rembourrage en bas: .875em; text-align: center; .mainmenu ul list-style: none; affichage: inline-block; marge: 0; .mainmenu li display: inline-block; marge: 0,875 em 0,25 em 0,25 em; .mainmenu a padding: 0 1.125em; text-transform: majuscule; couleur: #fff; hauteur de ligne: 2em; .mainmenu .current, .mainmenu li: survol, .mainmenu li: actif background-color: # 643a79; border-radius: .25em; .content font-size: 1.125em; couleur d'arrière-plan: #fff; couleur: # 3c4761; rembourrage: 3.236em; hauteur min.: 37.5rem; .content: before, .content: after content: ""; affichage: table; .content: after clear: both; .contentwrap position: relative; .secondarynav float: right; marge: 0 0 1,618 rem 1,618em; bordure: .0625rem solide # e7f1f8; largeur min .: 18,75rem; rembourrage: 0 1.618rem; .breadcrumbs ul list-style: none; marge gauche: 0; rembourrage à gauche: 0; .breadcrumbs li display: inline; .breadcrumbs li: before content: ">"; .breadcrumbs li: premier-enfant: avant contenu: ""; .bigbutton border-radius: 4px; curseur: pointeur; clip d'arrière-plan: padding-box; couleur de fond: # eb7d4b; box-shadow: encart 0 -4px 0 # c7693f; bordure: 0; marge: 3.236em auto; bloc de visualisation; text-align: center; largeur: auto; .bigbutton a padding: 1.125em 4.375em; text-transform: majuscule; couleur: #fff; poids de police: gras; affichage: inline-block; .candocols width: 25%; float: gauche; text-align: center; marge: 4.854rem auto; .site_footer background-color: # 3c5499; rembourrage: 1.618rem 0; text-align: center; .site_footer a color: #fff; taille de police: 1.5em; poids de police: 600; marge: 0 1.618rem; .site_footer a: hover color: # 30bae7; @media (max-width: 55rem) .candocols width: 50%; marge: 1.618rem auto; @media (largeur maximale: 35rem) .candocols width: 100%; @media (largeur maximale: 320px) html largeur minimale: 320px;
Ce CSS traitera tous les éléments essentiels de la mise en page, de la typographie, des couleurs et de la réactivité.
Il ne reste plus qu’à insérer cette feuille de style dans notre modèle principal et à ajouter des extras tels qu’un en-tête et un pied de page..
Copiez tout le code ci-dessous et collez-le dans le fichier "base.html" du dossier "Modèles" de votre site..
Modèles > base.html
Site statique facile via DropPages.com Site statique facile
Éditez localement et hébergez instantanément sur Dropbox avec DropPages.com
Corps
Ce code HTML fait quelques choses. Il extrait la feuille de style "main.css" que vous venez de modifier, ainsi qu'une police Web de Google. Il crée un en-tête statique affichant le titre et le slogan du site, ainsi qu'un pied de page contenant des liens vers divers sites de réseaux sociaux et de portefeuilles. Il crée également un espace pour un menu de navigation principal dans lequel vivre, ainsi qu’un espace pour le contenu..
L'intégration avec DropPages s'effectue via deux balises de modèles très simples:
Navigation primaire - Cela donne une liste non ordonnée de toutes les pages de votre site, y compris la page d'accueil..Corps - Cela sort le contenu des fichiers que vous allez ajouter à votre dossier "Contenu".Notez le placement de ces deux balises de modèle dans le code HTML ci-dessus, avec le Navigation primaire balise placée à l'intérieur du nav élément, et le Corps balise placée à l'intérieur du principale élément.
Lors de l'actualisation, votre site devrait maintenant ressembler à ceci:
Notez que le même contenu "Hello world" que celui que vous avez vu sur votre nouveau site par défaut est toujours en place, mais entouré du style que nous venons d'ajouter via les fichiers "main.css" et "base.html"..
Maintenant, allons de l'avant et ajoutons du contenu de notre propre page d'accueil personnalisée.
Dans le contenu de notre page d'accueil personnalisée, nous inclurons quatre images. Vous pouvez obtenir vos propres copies de ces images à partir des fichiers source joints à ce didacticiel. Après avoir téléchargé et extrait le fichier principal EasyDropPagesStaticSite.zip fichier, vous verrez un deuxième fichier zip nommé homepage_images.zip. Extrayez ce fichier et placez les images qu'il contient dans le dossier "Public" de votre site..
Copiez ensuite tout le code ci-dessous et collez-le dans le fichier "index.txt" du dossier "Contenu" de votre site..
Contenu > index.txt
:baseSalut! Nous sommes les nouveaux enfants sur le bloc et nous construisons des sites Web et des applications mobiles géniaux.
NOUS AVONS DES COMPETENCES!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
L'incident temporel de votre travail et de votre vie.
La première ligne de ce fichier est la plus importante en ce qui concerne l'intégration de DropPages. Il spécifie le modèle dans lequel vous voulez que votre contenu soit rendu..
Dans ce cas, nous voulons que ce contenu soit rendu dans le modèle "base.html", de sorte que la toute première ligne du fichier doit être: :base Vous pouvez spécifier qu'un fichier de contenu doit être rendu dans n'importe quel fichier de modèle, une fonctionnalité que nous utiliserons plus tard..
Les fichiers de contenu DropPages peuvent rendre Markdown ou HTML. Si vous souhaitez en savoir plus sur la syntaxe Markdown, consultez Markdown: les entrées et les sorties..
Remarque: Il faut être conscient du fait que, si vous insérez une ligne de Markdown en HTML, celle-ci ne sera pas rendue par DropPages. Une autre est que si vous utilisez Markdown pour le texte, il n'y a pas de syntaxe disponible pour le centrer.
Par exemple, dans le code ci-dessus, quatre images sont placées, chacune enveloppée dans un div avec un style qui les rend site côte à côte dans les colonnes. Pour ajouter une image via Markdown, utilisez la syntaxe. ![Alt text] (/ path / to / img.jpg). Cependant, j’ai constaté que lorsque Markdown était encapsulé dans les divs que j’avais utilisés ci-dessus, ils ne restituaient pas, ce qui donnait le code actuel de Markdown sur la page..
Donc, étant donné que nous voulons que notre page d'accueil ait des images enveloppées dans des divs et que nous voulons du texte centré, tout le contenu ajouté au fichier "index.txt" est écrit en HTML.
Actualisez votre site et il devrait maintenant ressembler à ceci:
Nous avons maintenant du contenu de page d'accueil personnalisé en place, il est donc temps d'ajouter des sous-pages supplémentaires. Commençons par la page omniprésente "À propos de".
Pour ajouter des pages supplémentaires à votre site DropPages, il vous suffit de créer de nouvelles .SMS fichiers dans votre dossier "Contenu". Leurs liens apparaîtront automatiquement dans le menu "Navigation principale"..
Le nom qui apparaît dans votre menu sera directement tiré du nom de votre fichier de contenu, c.-à-d.. Ma page nom.txt. De plus, vous pouvez contrôler l'ordre des liens de votre menu en ajoutant à chaque fichier de contenu un numéro suivi d'un point..
Nous souhaitons que le deuxième lien de notre menu se trouve dans notre page "À propos de". Dans votre dossier "Contenu", créez un nouveau fichier texte et nommez-le: 2.À propos de notre studio.txt
Ajoutez le code suivant à votre nouveau fichier:
: base à propos de notre studio ======== (texte fictif de [http://notloremipsum.com//(nhttp://notloremipsum.com/)) Nous sommes un studio de conception assez petit et flexible qui conçoit imprimer et web. Nous travaillons de manière flexible avec les clients pour répondre à leurs besoins de conception. Que vous souhaitiez créer une marque à partir de zéro, y compris du matériel de marketing et un site Web magnifique et fonctionnel, ou que vous recherchiez une actualisation de la conception, nous sommes convaincus que vous serez satisfait du résultat. Nous offrons les services suivants: - Branding - Logos - Sites Web - Applications Web - Développement Web - HTML5, CSS, jQuery - Systèmes de gestion de contenu - Conception de sites Web réactifs - Illustration
Cette fois, nous n’avons besoin ni d’encapsuleurs div ni de texte centré, le code est donc entièrement écrit en syntaxe Markdown..
Actualisez le site et vous devriez voir un lien "À propos de notre studio" récemment ajouté dans votre menu de navigation principal. Cliquez sur ce lien et vous serez redirigé vers votre nouvelle page, qui devrait ressembler à ceci:
Ajouter des pages pour votre site DropPages est aussi simple que cela. Créez simplement un nouveau fichier texte, nommez-le en fonction de ce que vous souhaitez voir apparaître dans votre menu, remplissez-le avec votre contenu et vous avez terminé..
DropPages vous donne également la possibilité de créer des sous-pages de deuxième niveau. Par exemple, vous souhaiterez peut-être créer une page nommée "Rencontrer l'équipe", qui comporte des liens vers une sous-page pour chaque membre de l'équipe. Dans cette section, je vais vous montrer comment.
Pour notre page "Rencontrer l'équipe", nous souhaitons afficher des liens vers une sous-page pour chacun des membres de notre équipe. Toutefois, notre modèle de base ne comprend pas de zone pour afficher ces liens. En tant que tel, nous allons créer un modèle personnalisé pour gérer cette exigence supplémentaire..
Les modèles DropPages ont la capacité de Cascade, ce qui signifie un modèle peut se charger dans le Corps balise d'un autre modèle.
Dans notre cas, nous souhaitons ajouter une zone avec des liens vers nos sous-pages, mais nous souhaitons tout de même utiliser le code HTML du modèle "base.html". Pour ce faire, créez un nouveau fichier dans votre dossier "Modèles" et nommez-le "withsubpages.html". Puis copiez et collez le code ci-dessous:
Modèles > withsubpages.html
:baseCorpsNotre peuple
SecondaryNavigation
Comme vous l'avez vu précédemment dans notre fichier de contenu "index.txt", ce modèle utilise également le :base notation sur la première ligne. Cela permet au système de savoir que le code HTML de ce modèle doit être chargé dans le répertoire. Corps balise du template "base.html".
Le contenu de la page sera chargé dans le Corps balise du modèle "withsubpages.html".
En cas de confusion, le processus de chargement peut être résumé comme suit: base.html> Body> withsubpages.html> Body> contenu de la page.
Dans notre nouveau fichier "withsubpages.html", nous avons ajouté une division wrapper autour du contenu de la page et ajouté une zone qui sera placée à droite, contenant la balise template: SecondaryNavigation. Cette balise de modèle crée une liste non ordonnée de pages frères ou enfants..
Ensuite, regardons comment vous créez les sous-pages dont les liens apparaîtront dans cette boîte "Navigation secondaire".
Chaque fois que vous souhaitez qu'une page ait des sous-pages, au lieu de créer un .SMS fichier dans le dossier "Contenu", vous créez un répertoire. Ce répertoire contiendra la page de premier niveau ainsi que l’un de ses enfants..
Vous utilisez les mêmes conventions de dénomination pour le répertoire que pour une .SMS fichier, c’est-à-dire, commencez par un numéro indiquant la position du lien de navigation principal, puis utilisez le nom que vous souhaitez voir apparaître dans le menu.
Créez un dossier dans le répertoire "Contenu" et nommez-le "3.Rencontrez l'équipe"..
Dans ce dossier, créez un fichier nommé "index.txt". Le code que vous ajoutez à ce fichier formera le contenu de votre page "Meet the Team" de niveau supérieur..
Copiez et collez le code ci-dessous:
Contenu > 3.Rencontrer l'équipe > index.txt
: withsubpages ## Rencontre avec l'équipe Avant de nous choisir pour prendre en charge votre projet, vous voudrez probablement en savoir un peu plus sur nous, alors faites connaissance avec l'équipe: Ross a plus de 10 ans d'expérience dans le secteur. Il est notre directeur créatif, concepteur numérique, concepteur Web et développeur front-end. Il est également très bon avec un carnet de croquis. Avant de lancer la société, Ross a travaillé comme designer et gérant de studio pour une maison de design qui comptait de nombreux clients renommés. Ross a mis sa grande expérience de ce rôle au travail qu’il accomplit maintenant. Monica, la sœur de Ross, notre directrice artistique, est spécialisée dans la conception graphique et graphique. Elle a également travaillé avec de grands noms et ses créations lui ont valu de nombreux prix de l'industrie. Rachel et Chandler sont nos designers junior. Rachel est une conceptrice de sites Web ayant une connaissance du HTML et du CSS et qui soutient Ross dans ses projets. Chandler vient de terminer son diplôme en graphisme et aime continuer à apprendre de Monica et à renforcer son expérience. Joey et Phoebe s'attachent à créer de nouvelles affaires dans l'entreprise. Ils ont récemment conquis un certain nombre de gros clients et possèdent également des qualifications en gestion de projet afin de garantir le bon déroulement des projets, du début à la fin..
Remarque: Sur la première ligne de ce code, nous n’ajoutons plus :base. Au lieu de cela, nous ajoutons : avecsouspages car cela indique que nous voulons que le contenu de la page soit chargé dans le modèle "withsubpages.html".
Avec votre contenu principal "Meet the Team" en place dans le fichier "index.txt", vous êtes maintenant prêt à ajouter des sous-pages. Le processus d’ajout de fichiers dans ce dossier est identique à celui que vous avez suivi pour ajouter la page "À propos de" dans le dossier de niveau supérieur. Créez simplement un nouveau .SMS fichier, avec un numéro pour la commande, et un nom pour contrôler le texte de son lien dans la boîte de navigation secondaire.
Créez un fichier nommé "1.Ross and Monica.txt" et ajoutez ce contenu à l'intérieur:
Contenu > 3.Rencontrer l'équipe > 1.Ross et Monica.txt
: withsubpages ## Ross et Monica Ross ont plus de 10 ans d’expérience dans le secteur. Il est notre directeur créatif, concepteur numérique, concepteur Web et développeur front-end. Il est également très bon avec un carnet de croquis. Avant de lancer la société, Ross a travaillé comme designer et gérant de studio pour une maison de design qui comptait de nombreux clients renommés. Ross a mis sa grande expérience de ce rôle au travail qu’il accomplit maintenant. Monica, la sœur de Ross, notre directrice artistique, est spécialisée dans la conception graphique et graphique. Elle a également travaillé avec de grands noms et ses créations lui ont valu de nombreux prix de l'industrie..
Encore une fois, nous utilisons le : avecsouspages notation pour que cette page soit chargée dans le modèle "withsubpages.html".
Créez un deuxième fichier nommé "2.Juniors and Sales.txt"avec ce contenu à l'intérieur:
Contenu > 3.Rencontrer l'équipe > 2.Juniors et Sales.txt
: withsubpages ## Juniors and Sales Rachel et Chandler sont nos designers débutants. Rachel est une conceptrice de sites Web ayant une connaissance du HTML et du CSS et qui soutient Ross dans ses projets. Chandler vient de terminer son diplôme en graphisme et aime continuer à apprendre de Monica et à renforcer son expérience. Joey et Phoebe s'attachent à créer de nouvelles affaires dans l'entreprise. Ils ont récemment conquis un certain nombre de gros clients et possèdent également des qualifications en gestion de projet afin de garantir le bon déroulement des projets, du début à la fin..
Actualisez votre site et vous devriez voir le nouveau lien "Meet the Team" sur la barre de navigation. Cliquez dessus et votre nouvelle page devrait apparaître avec un lien vers chaque sous-page dans la zone de navigation secondaire sur le côté droit. Chacune de vos sous-pages devrait également avoir la même disposition, comme ceci:
De manière générale, avec les sites statiques, cinq semble être le nombre magique de pages à avoir (je ne sais pas pourquoi). Alors allons-y et ajoutons encore deux pages à votre site pour compléter ce nombre.
Dans votre dossier "Contenu", créez un fichier nommé "4.Markdown Examples.txt" et ajoutez le code suivant:
Contenu > 4. Exemples de Markdown.txt
