Share
Was Sie erstellen werdenSie wissen wahrscheinlich, dass Dropbox ideal zum Speichern von Datensicherungen und zum Freigeben von Dateien ist, aber wussten Sie, dass Sie es auch als statischer Websitehost verwenden können? Dank schlauer Apps wie DropPages, die wir heute hier behandeln werden, können Sie dies tun!
Der Prozess hinter DropPages ist wirklich brillant. Sie geben der DropPages-App einfach Zugriff auf Ihr Dropbox-Konto, und es wird ein Ordner "My.DropPages" erstellt, in den Sie Ihre Website-Dateien hochladen. Wenn andere Personen Ihre Domäne besuchen, fungiert DropPages als Vermittler zwischen dem Browser und Ihrem Dropbox-Konto. Dabei werden die Dateien aus Ihrem Ordner "My.DropPages" abgerufen und als voll funktionsfähige Website bereitgestellt.
Da Dropbox mit einer Anwendung geliefert wird, die Dateien auf Ihrem Computer mit Ihrem Online-Speicher synchronisiert, können Sie Ihre Site einfach lokal verwalten und zulassen, dass Dropbox die Dateien automatisch für Sie hochlädt. Das bedeutet, dass Sie sich keine Sorgen um FTP machen müssen, da Ihre Dateien offline sind und in Dropbox standardmäßig gesichert werden.
In diesem Tutorial zeige ich Ihnen, wie Sie mit DropPages eine klassische statische Site mit fünf Seiten erstellen, indem Sie eine modifizierte Version der "Cuda" -Vorlage von Graphic Burger verwenden.
Wir werden uns nicht darauf konzentrieren, wie das Basis-HTML und CSS für die Vorlage geschrieben wird, sondern auf die Handhabung der Integration mit DropPages. Der gesamte erforderliche Vorlagencode wird im folgenden Format zum Kopieren und Einfügen bereit gestellt. Sie können die Quelldateien auch über herunterladen Anhang herunterladen Klicken Sie hier in der Seitenleiste.
Lass uns anfangen!
Wenn Sie dies noch nicht getan haben, gehen Sie zu Dropbox und registrieren Sie sich. Laden Sie dann die von ihnen bereitgestellte Anwendung herunter und installieren Sie sie, um Ihre Offline-Dateien mit Ihrem Online-Speicher zu synchronisieren.
Gehen Sie dann zu http://my.droppages.com/ und melden Sie sich mit Ihren DropBox-Kontodaten an. Auf diese Weise geben Sie DropPages die Möglichkeit, einen Ordner in Ihrem Dropbox-Konto einzurichten, in dem sich Ihre Website befindet. Nachdem die Dropbox-Anwendung Ihre Online-Dateien mit Ihrem Computer synchronisiert, wird eine solche Ordnerstruktur in Ihrem Offline-Dropbox-Ordner angezeigt:
Jede der über DropPages erstellten Sites wird in diesem Ordner gespeichert. Sie können jetzt eine neue Site erstellen.
Nachdem Sie Zugriff auf Ihr Dropbox-Konto gewährt haben, sollten Sie automatisch zu Ihrem DropPages-Dashboard umgeleitet werden. Wenn nicht, können Sie unter http://my.droppages.com/account darauf zugreifen
Um eine neue Site zu erstellen, klicken Sie auf die große blaue Schaltfläche "Neue Site erstellen":
Sie werden dann zu einer Seite weitergeleitet, auf der Sie die Domäne angeben können, die Sie für Ihre Site verwenden möchten. Sie können jede Subdomain verwenden, die noch nicht von einem anderen DropPages-Benutzer verwendet wurde. Sie müssen jedoch sicherstellen, dass Sie den "droppages.com" -Teil der Domain angeben, wenn Sie Ihre Wahl eingeben.
Klicken Sie nach dem Aufrufen Ihrer Domäne auf die Schaltfläche "Erstellen". DropPages richtet die Ordnerstruktur für Ihre neue Site in Ihrem Ordner "My.DropPages" ein. Wenn Sie mit Ihrem Offline-Dropbox-Ordner synchronisiert werden, sieht es folgendermaßen aus:
Die drei Ordner, die Sie sehen, haben folgende Zwecke:
Accentsconagua
.TXT Dateien, die in Markdown und / oder HTML geschrieben sind, um den Inhalt der Seiten Ihrer Website zu bilden.Wenn Ihre Site zum ersten Mal erstellt wird, enthält sie in jedem dieser Ordner eine Platzhalterdatei:
Wenn Sie Ihre neu erstellte DropPages-Domäne besuchen, geben Ihnen diese drei Dateien Folgendes:
Das erste, was wir tun werden, ist, diesem Grundinhalt ein benutzerdefiniertes Design hinzuzufügen, das den Code in den vorhandenen Dateien "main.css" und "base.html" ersetzt.
Immer wenn ich in diesem Lernprogramm auf das Bearbeiten von Site-Dateien verweise, bedeutet dies, dass Sie Ihren bevorzugten Code-Editor direkt in den Dateien in Ihrem Offline verwenden Dropbox > Apps > Meine.DropPages > mysubdomain.droppages.com Mappe.
Nachdem Sie die Änderungen an der zu bearbeitenden Datei gespeichert haben, geben Sie der Dropbox-Anwendung etwas Zeit, um Ihre Dateien in Ihr Konto hochzuladen. Aktualisieren Sie anschließend Ihre DropPages-Site, um zu sehen, ob Ihre Änderungen online sind.
Wie ich bereits erwähnt habe, werden wir nicht über die eigentlichen Prozesse beim Erstellen des Basis-CSS und HTML dieses Vorlagenentwurfs sprechen. Wir können uns stattdessen auf die DropPages-Integration konzentrieren. Hier ist ein Stylesheet, das ich zuvor erstellt habe.
Kopieren Sie den gesamten Code und fügen Sie ihn in die Datei "main.css" im Ordner "Public" Ihrer Site ein (bereiten Sie sich vor - es ist ein ziemlich großes Stück ...)
Öffentlichkeit > main.css
html font-family: serifenlos; -ms-Textgröße anpassen: 100%; -webkit-Textgrößenanpassung: 100%; Artikel, beiseite, Details, Abbildung, Fußzeile, Kopfzeile, Hauptgruppe, Hauptnavigation, Abschnitt, Zusammenfassung Anzeige: Block; Audio, Leinwand, Fortschritt, Video Anzeige: Inline-Block; vertikal ausrichten: Grundlinie; audio: not ([Steuerelemente]) Anzeige: keine; Höhe: 0; [ausgeblendet], Vorlage Anzeige: keine; abbr [title] Rand unten: 1 Punkt gepunktet; b, starkes font-weight: fett; dfn font-style: italic; markieren Sie background: # ff0; Farbe: # 000; klein Schriftgröße: 80%; sub, sup font-size: 75%; Zeilenhöhe: 0; Position: relativ; vertikal ausrichten: Grundlinie; sup top: -.5em; sub bottom: -.25em; svg: nicht (: root) overflow: hidden; Zahl Marge: 1em 40px; pre overflow: auto; code, kbd, pre, samp Schriftfamilie: Monospace, Monospace; Schriftgröße: 1em; Taste, Eingabe, Optgruppe, Auswahl, Textfeld Farbe: erben; font: erben; Marge: 0; button overflow: sichtbar; , wählen Sie text-transform: none; button, html input [type = "button"], / * 1 * /, input [type = "reset"], eingang [type = "submit"] -webkit-Aussehen: button; Cursor: Zeiger; Schaltfläche [deaktiviert], HTML-Eingabe [deaktiviert] Cursor: Standard; button :: - moz-focus-inner, Eingabe :: - moz-focus-inner border: 0; Polsterung: 0; Eingabe Zeilenhöhe: Normal; Eingabe [Typ = "Ankreuzfeld"], Eingabe [Typ = "Radio"] Box-Sizing: Border-Box; Polsterung: 0; Eingabe [Typ = "Nummer"] :: - Webkit-Innendrehknopf, Eingabe [Typ = "Nummer"] :: - Webkit-Außendrehknopf height: auto; Eingabe [Typ = "Suche"] -webkit-Aussehen: Textfeld; -moz-box-dimensionierung: content-box; -webkit-box-dimensionierung: content-box; Box-Sizing: Inhaltsbox; Eingabe [Typ = "Suche"] :: - Webkit-Suche-Abbrechen-Schaltfläche, Eingabe [Typ = "Suche"] :: - Webkit-Suche-Dekoration -webkit-Aussehen: keine; fieldset border: 1px fest # c0c0c0; Marge: 0 2px; Polsterung: .35em, 625em, 75em; legend border: 0; Polsterung: 0; textarea overflow: auto; optgroup font-weight: fett; table border-collapse: collapse; Randabstand: 0; td, th padding: 0; * Box-Sizing: Border-Box; -moz-box-dimensionierung: border-box; html width: 100%; Höhe: 100%; body margin: 0; Breite: 100%; Höhe: 100%; Hintergrundfarbe: # e7f1f8; Schriftfamilie: 'Titillium Web'; a, a: besucht, a: link Textdekoration: keine; Farbe: # 3c5499; a: hover, a: aktiv color: # 17c2a4; h1, h2, h3, h4, h5, h6 font-family: 'Titillium Web'; Zeilenhöhe: 1.313em; h1 font-size: 2.625em; Marge: 0,563 em 0; h2 font-size: 2.25em; Marge: 0,563 em 0; hr border: 0; border-bottom: .25em fest # e7f1f8; .short width: 5.625em; .wrap width: 100%; Max-Breite: 75em; Marge: 0 auto; Position: relativ; .wrap: before, .wrap: after content: ""; Anzeige: Tisch; .wrap: after clear: both; .site_header: before content: ""; Hintergrundfarbe: # 17c2a4; Breite: 100%; Höhe: 40,625rem; Position: absolut; z-Index: -1; oben: 0; links: 0; rechts: 0; .site_header text-align: center; Farbe: #fff; Polsterung: 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 Hintergrundfarbe: # 87509c; Grenzradius: .375em .375em 0 0; min-Höhe: 3,75 em; Polsterung unten: .875em; Text ausrichten: Mitte; .mainmenu ul list-style: none; Anzeige: Inline-Block; Marge: 0; .mainmenu li display: Inline-Block; Marge: 0,875 em, 25em 0,25em; .mainmenu a padding: 0 1.125em; Text-Transformation: Großbuchstaben; Farbe: #fff; Zeilenhöhe: 2em; .mainmenu .current, .mainmenu li: hover, .mainmenu li: aktiv Hintergrundfarbe: # 643a79; Grenzradius: .25em; .content font-size: 1.125em; Hintergrundfarbe: #fff; Farbe: # 3c4761; Polsterung: 3.236em; min-Höhe: 37,5rem; .content: before, .content: after content: ""; Anzeige: Tisch; .content: after clear: both; .content wrap position: relativ; .secondarynav float: right; Marge: 0 0 1,618rem 1,618em; border: .0625rem solid # e7f1f8; min-Breite: 18,75rem; Polsterung: 0 1.618rem; .breadcrumbs ul list-style: none; Rand links: 0; Polsterung links: 0; .breadcrumbs li display: inline; .breadcrumbs li: before content: ">"; .breadcrumbs li: first-child: before content: ""; .bigbutton border-radius: 4px; Cursor: Zeiger; Hintergrund-Clip: Padding-Box; Hintergrundfarbe: # eb7d4b; Box-Schatten: Einfügung 0 -4px 0 # c7693f; Grenze: 0; Marge: 3.236em Auto; Bildschirmsperre; Text ausrichten: Mitte; Breite: Auto; .bigbutton a padding: 1.125em 4.375em; Text-Transformation: Großbuchstaben; Farbe: #fff; Schriftdicke: fett; Anzeige: Inline-Block; .candocols width: 25%; Schwimmer: links; Text ausrichten: Mitte; Marge: 4.854rem auto; .site_footer Hintergrundfarbe: # 3c5499; Polsterung: 1.618rem 0; Text ausrichten: Mitte; .site_footer a color: #fff; Schriftgröße: 1.5em; Schriftgewicht: 600; Marge: 0 1,618rem; .site_footer a: hover color: # 30bae7; @media (max-width: 55rem) .candocols width: 50%; Marge: 1.618rem auto; @media (max-width: 35rem) .candocols width: 100%; @media (max-width: 320px) html min-width: 320px;
Dieses CSS behandelt alle wesentlichen Aspekte von Layout, Typografie, Farbschema und Reaktionsfähigkeit.
Jetzt müssen wir nur noch dieses Stylesheet in unsere Hauptvorlage ziehen und einige Extras wie Kopf- und Fußzeile hinzufügen.
Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei "base.html" im Ordner "Templates" Ihrer Site ein.
Vorlagen > base.html
Einfache statische Site über DropPages.com Einfache statische Site
Lokal bearbeiten und sofort mit DropPages.com auf Dropbox hosten
Karosserie
Dieser HTML-Code führt einige Dinge aus. Es zieht das gerade bearbeitete Stylesheet "main.css" sowie einen Webfont von Google ein. Es erstellt einen statischen Header, der einen Site-Titel und einen Slogan enthält, sowie eine Fußzeile mit einigen Links zu verschiedenen Websites für soziale Netzwerke und Portfolios. Außerdem wird ein Bereich für ein primäres Navigationsmenü sowie ein Bereich für die Anzeige von Inhalten erstellt.
Die Integration mit DropPages erfolgt über zwei sehr einfache Template-Tags:
Primärnavigation - Dadurch wird eine ungeordnete Liste aller Seiten Ihrer Website angezeigt, einschließlich der Startseite.Karosserie - Dies gibt den Inhalt der Dateien aus, die Sie Ihrem Ordner "Content" hinzufügen.Beachten Sie die Platzierung dieser beiden Vorlagen-Tags im obigen HTML-Code mit der Primärnavigation Tag in der nav Element und die Karosserie Tag in der Main Element.
Beim Aktualisieren sollte Ihre Site jetzt so aussehen:
Beachten Sie, dass derselbe Inhalt "Hallo Welt", den Sie auf Ihrer neuen Standard-Site gesehen haben, immer noch vorhanden ist, jedoch umgeben von dem Stil, den wir gerade über die Dateien "main.css" und "base.html" hinzugefügt haben.
Lassen Sie uns nun einige unserer eigenen Homepage-Inhalte hinzufügen.
Als Teil unseres benutzerdefinierten Homepage-Inhalts enthalten wir vier Bilder. Sie können Ihre eigenen Kopien dieser Bilder aus den Quelldateien erhalten, die diesem Tutorial beigefügt sind. Nach dem Herunterladen und Extrahieren der Hauptdatei EasyDropPagesStaticSite.zip Datei sehen Sie eine zweite ZIP-Datei mit dem Namen homepage_images.zip. Extrahieren Sie diese Datei und legen Sie die darin enthaltenen Bilder in den Ordner "Public" Ihrer Site.
Kopieren Sie dann den folgenden Code und fügen Sie ihn in die Datei "index.txt" im Ordner "Content" Ihrer Site ein.
Inhalt > index.txt
:BaseHallo! Wir sind die neuen Kids im Block und bauen tolle Websites und mobile Apps.
Wir haben Fähigkeiten!
Lorem ipsum dolor sitzen amet, consectetur adipisicing elit, sed do eiusmod
zeitunfall ut labore et dolore magna aliqua.
Die erste Zeile dieser Datei ist für die DropPages-Integration die bedeutendste. Sie gibt an, in welche Vorlage Ihr Inhalt gerendert werden soll.
In diesem Fall möchten wir, dass dieser Inhalt in die Vorlage "base.html" gerendert wird. Die erste Zeile der Datei muss also Folgendes sein: :Base Sie können angeben, dass eine Inhaltsdatei in eine beliebige Vorlagendatei gerendert werden soll, eine Funktion, die wir später verwenden werden.
DropPages-Inhaltsdateien können entweder Markdown oder HTML darstellen. Wenn Sie mehr über die Markdown-Syntax erfahren möchten, lesen Sie Markdown: The Ins und Outs.
Hinweis: Ein "gotcha", das Sie beachten sollten, ist, dass, wenn Sie eine Zeile mit Markdown in HTML umbrechen, diese nicht von DropPages gerendert wird. Eine andere ist, dass, wenn Sie Markdown für Text verwenden, keine verfügbare Syntax zum Zentrieren vorhanden ist.
Im obigen Code befinden sich beispielsweise vier Bilder, die jeweils in ein Bild eingebettet sind div Mit einem Stil, der sie nebeneinander in Spalten platziert. Um ein Bild über Markdown hinzuzufügen, verwenden Sie die Syntax ![Alttext] (/ Pfad / zu / img.jpg). Als ich jedoch feststellte, dass das Bild Markdown in den Divs, die ich oben verwendete, eingeschlossen wurde, wurde nicht gerendert. Stattdessen wurde der eigentliche Markdown-Code auf der Seite ausgegeben.
Vorausgesetzt, wir möchten, dass unsere Homepage Bilder in divs umhüllt, und wir möchten zentrierten Text. Der gesamte Inhalt der "index.txt" -Datei wird in HTML geschrieben.
Aktualisieren Sie Ihre Site und es sollte jetzt so aussehen:
Wir haben jetzt einige benutzerdefinierte Homepage-Inhalte vorhanden, es ist also an der Zeit, zusätzliche Unterseiten hinzuzufügen. Beginnen wir mit der allgegenwärtigen "About" -Seite.
Um Ihrer DropPages-Site zusätzliche Seiten hinzuzufügen, müssen Sie lediglich neue Seiten erstellen .TXT Dateien in Ihrem Ordner "Content". Links zu ihnen werden dann automatisch in Ihrem "Primary Navigation" -Menü angezeigt.
Der in Ihrem Menü angezeigte Name wird direkt aus dem Namen Ihrer Inhaltsdatei übernommen, d. H. Mein Seitenname.txt. Darüber hinaus können Sie die Reihenfolge Ihrer Menüverknüpfungen steuern, indem Sie jeder Inhaltsdatei eine Nummer gefolgt von einem Punkt voranstellen.
Wir möchten, dass der zweite Link in unserem Menü auf die Seite "Über" verweist. Erstellen Sie in Ihrem Ordner "Content" eine neue Textdatei, und nennen Sie sie: 2.Über unser Studio.txt
Fügen Sie der neuen Datei den folgenden Code hinzu:
: base Über unser Studio ======== (Platzhaltertext von [http://notloremipsum.com/((((ttp://notloremipsum.com/))) Wir sind ein ziemlich kleines, flexibles Designstudio, das für Design konzipiert Print und Web. Wir arbeiten flexibel mit Kunden zusammen, um ihre Designanforderungen zu erfüllen. Egal, ob Sie eine Marke von Grund auf erstellen müssen, einschließlich Marketingmaterialien und einer schönen und funktionalen Website, oder ob Sie eine Design-Erneuerung suchen - wir sind überzeugt, dass Sie mit den Ergebnissen zufrieden sein werden. Wir bieten folgende Dienstleistungen an: - Branding - Logos - Websites - Webanwendungen - Webentwicklung - HTML5, CSS, jQuery - Content-Management-Systeme - Responsives Webdesign - Illustration - Visitenkarten - Briefpapier und Komplimente - Flyer - Mailers - Terminkarten
Diesmal benötigen wir keine div-Wrapper oder zentrierten Text, daher ist der Code vollständig in der Markdown-Syntax geschrieben.
Aktualisieren Sie die Site und Sie sollten einen neu hinzugefügten Link "About Our Studio" in Ihrem Hauptnavigationsmenü sehen. Klicken Sie auf diesen Link und Sie werden zu Ihrer neuen Seite weitergeleitet, die folgendermaßen aussehen sollte:
Das Hinzufügen von Seiten für Ihre DropPages-Site ist so einfach. Erstellen Sie einfach eine neue Textdatei, benennen Sie sie nach dem, was Sie in Ihrem Menü anzeigen möchten, füllen Sie sie mit Ihrem Inhalt aus und fertig.
DropPages gibt Ihnen außerdem die Möglichkeit, Unterseiten der zweiten Ebene zu erstellen. Sie können beispielsweise eine Seite mit dem Namen "Meet the Team" erstellen, die Links zu einer Unterseite für jedes Teammitglied enthält. In diesem Abschnitt zeige ich Ihnen wie.
Für unsere "Meet the Team" -Seite möchten wir für jedes unserer Teammitglieder Links zu einer Unterseite anzeigen, jedoch enthält unsere Basisvorlage keinen Bereich, um solche Links anzuzeigen. Daher erstellen wir eine benutzerdefinierte Vorlage, um diese zusätzliche Anforderung zu erfüllen.
DropPages-Vorlagen haben die Fähigkeit zu Kaskade, was bedeutet, dass sich eine Vorlage in die laden kann Karosserie Tag einer anderen Vorlage.
In unserem Fall möchten wir einen Bereich mit Links zu unseren Unterseiten hinzufügen, wir möchten jedoch den HTML-Code aus der Vorlage "base.html" verwenden. Um dies zu erreichen, erstellen Sie eine neue Datei in Ihrem Ordner "Templates" und nennen Sie sie "withsubpages.html". Dann kopiere und füge den folgenden Code ein:
Vorlagen > withsubpages.html
:BaseKarosserieUnsere Leute
SecondaryNavigation
Wie Sie bereits in unserer Inhaltsdatei "index.txt" gesehen haben, verwendet diese Vorlage auch die :Base Notation in der ersten Zeile. Dadurch wird dem System mitgeteilt, dass der HTML-Code aus dieser Vorlage in die geladen werden soll Karosserie Tag der Vorlage "base.html".
Der eigentliche Seiteninhalt wird in die geladen Karosserie Tag der Vorlage "withsubpages.html".
Falls das überhaupt verwirrend ist, kann der Ladevorgang wie folgt zusammengefasst werden: base.html> Body> withsubpages.html> Body> Seiteninhalt.
In unserer neuen Datei "withsubpages.html" haben wir einen Wrapper-Div um den Seiteninhalt und ein Feld hinzugefügt, das nach rechts verschoben wird und das Template-Tag enthält: SecondaryNavigation. Dieses Vorlagen-Tag erstellt eine ungeordnete Liste aller Geschwister oder untergeordneten Seiten.
Als Nächstes wollen wir uns ansehen, wie Sie tatsächlich die Unterseiten erstellen, deren Links in diesem Feld "Sekundäre Navigation" angezeigt werden.
Wann immer Sie möchten, dass eine Seite Unterseiten hat, anstatt eine zu erstellen .TXT Datei im Ordner "Content" erstellen Sie ein Verzeichnis. Dieses Verzeichnis enthält die oberste Seite sowie alle untergeordneten Seiten.
Sie verwenden die gleichen Namenskonventionen für das Verzeichnis wie für ein Verzeichnis .TXT Beginnen Sie mit einer Zahl, um die Position des primären Navigationslinks anzugeben, und verwenden Sie dann den Namen, den Sie im Menü anzeigen möchten.
Erstellen Sie einen Ordner im Verzeichnis "Content" und nennen Sie ihn "3.Meet the Team"..
Erstellen Sie in diesem Ordner eine Datei mit dem Namen "index.txt". Der Code, den Sie zu dieser Datei hinzufügen, bildet den Inhalt der obersten Ebene "Meet the Team".
Kopieren Sie den folgenden Code und fügen Sie ihn ein:
Inhalt > 3. Treffen Sie das Team > index.txt
: withsubpages ## Treffen Sie das Team Bevor Sie sich für uns entscheiden, um Ihr Projekt zu übernehmen, möchten Sie wahrscheinlich mehr über uns erfahren. Treffen Sie also das Team: Ross hat über 10 Jahre Erfahrung in der Branche. Er ist unser Creative Director, Digital Designer, Web Designer und Frontend-Entwickler. Er ist auch ziemlich gut mit einem Skizzenbuch. Vor der Gründung der Firma arbeitete Ross als Designer und Studiomanager für ein Designhaus mit zahlreichen namhaften Kunden. Ross hat seine große Erfahrung aus dieser Rolle in seine Arbeit eingebracht. Monica ist die Schwester von Ross, unser Art Director und spezialisiert auf Grafik- und Druckdesign. Sie hat auch mit einigen großen Namen gearbeitet und ihre Designs haben ihr eine Reihe von Industriepreisen verliehen. Rachel und Chandler sind unsere Junior Designer. Rachel ist eine Webdesignerin mit Kenntnissen in HTML und CSS und unterstützt Ross bei Projekten. Chandler hat gerade sein Grafikdesign-Studium abgeschlossen und genießt es, weiterhin von Monica zu lernen und seine Erfahrungen auszubauen. Joey und Phoebe konzentrieren sich darauf, dem Unternehmen neues Geschäft zu bringen. Sie haben in letzter Zeit eine Reihe großer Kunden gewonnen und beide verfügen über Qualifikationen im Projektmanagement, um sicherzustellen, dass die Projekte von Anfang bis Ende reibungslos funktionieren.
Hinweis: In der ersten Zeile dieses Codes fügen wir nicht mehr hinzu :Base. Stattdessen fügen wir hinzu : mit Unterseiten Dadurch wird festgelegt, dass der Seiteninhalt in die Vorlage "withsubpages.html" geladen werden soll.
Mit Ihrem Hauptinhalt "Meet the Team" in der Datei "index.txt" können Sie nun Unterseiten hinzufügen. Das Hinzufügen von Dateien innerhalb dieses Ordners ist derselbe wie beim Hinzufügen der Seite "About" im obersten Ordner. Einfach ein neues erstellen .TXT Datei mit einer Nummer für die Bestellung und einem Namen, um den Link-Text im sekundären Navigationsfeld zu steuern.
Erstellen Sie eine Datei mit dem Namen "1.Ross und Monica.txt" und fügen Sie diesen Inhalt hinzu:
Inhalt > 3. Treffen Sie das Team > 1. Ross und Monica.txt
: withsubpages ## Ross und Monica Ross verfügt über mehr als 10 Jahre Erfahrung in der Branche. Er ist unser Creative Director, Digital Designer, Web Designer und Frontend-Entwickler. Er ist auch ziemlich gut mit einem Skizzenbuch. Vor der Gründung der Firma arbeitete Ross als Designer und Studiomanager für ein Designhaus mit zahlreichen namhaften Kunden. Ross hat seine große Erfahrung aus dieser Rolle in seine Arbeit eingebracht. Monica ist die Schwester von Ross, unser Art Director und spezialisiert auf Grafik- und Druckdesign. Sie hat auch mit einigen großen Namen gearbeitet und ihre Designs haben ihr eine Reihe von Industriepreisen verliehen.
Wieder benutzen wir die : mit Unterseiten Notation, damit diese Seite in die Vorlage "withsubpages.html" geladen wird.
Erstellen Sie eine zweite Datei mit dem Namen "2.Juniors and Sales.txt".mit diesem Inhalt in:
Inhalt > 3. Treffen Sie das Team > 2.Juniors und Sales.txt
: withsubpages ## Juniors and Sales Rachel und Chandler sind unsere Junior Designer. Rachel ist eine Webdesignerin mit Kenntnissen in HTML und CSS und unterstützt Ross bei Projekten. Chandler hat gerade sein Grafikdesign-Studium abgeschlossen und genießt es, weiterhin von Monica zu lernen und seine Erfahrungen auszubauen. Joey und Phoebe konzentrieren sich darauf, dem Unternehmen neues Geschäft zu bringen. Sie haben in letzter Zeit eine Reihe großer Kunden gewonnen und beide verfügen über Qualifikationen im Projektmanagement, um sicherzustellen, dass die Projekte von Anfang bis Ende reibungslos funktionieren.
Aktualisieren Sie Ihre Site und Sie sollten den neuen Link "Meet the Team" in der Navigationsleiste sehen. Klicken Sie darauf und Ihre neue Seite sollte einen Link zu jeder Unterseite im sekundären Navigationsfeld auf der rechten Seite anzeigen. Jede Ihrer Unterseiten sollte dasselbe Layout haben, wie folgt:
Bei statischen Websites scheint fünf generell die magische Anzahl von Seiten zu sein (ich habe keine Ahnung, warum). Lassen Sie uns also zwei weitere Seiten hinzufügen, um diese Zahl abzurunden.
Erstellen Sie in Ihrem Ordner "Content" eine Datei mit dem Namen "4.Markdown Examples.txt" und fügen Sie den folgenden Code hinzu:
Inhalt > 4.Markdown-Beispiele.txt
