Erste Schritte mit Umbraco: Teil 2

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In .NET ist eine masterpage eine Vorlage für Inhaltsseiten, auf der eine Reihe von ASPX-Seiten, die alle dieselbe masterpage verwenden, denselben Basiscode verwenden können.

Auch in dieser Serie erhältlich:

Auf einer masterpage können dann ein oder mehrere contentPlaceHolders definiert werden, und jede ASPX-Seite, die diese masterpage verwendet, muss nur den Code definieren, der sich im contentPlaceHolder befindet. Masterpages können auch verschachtelt werden. So werden sie in unserer Beispielseite strukturiert.

Definieren des Codes in unserer Basisseitenvorlage

Denken Sie daran, dass die Base Page die Template und der Document Type ist, von denen alle nachfolgenden Seiten erben. Sie sollte nur die Elemente enthalten, die allen Seiten der Site gemeinsam sind. Öffnen Sie die Datei BasePage.master in Visual Web Developer Express (VWD). Die Datei enthält bereits einen kleinen ASPX-Code mit einem <asp:Content> -Element. Dieses Element zeigt auf ein <asp:ContentPlaceHolder> -Element auf einer der Umbraco-masterpages.

Es ist möglich, den Code vollständig über das Umbraco-Backend zu den masterpages hinzuzufügen. Wenn Sie eine der Templates im Bereich Settings auswählen, wird eine Kopie der Datei zum Bearbeiten in das rechte Bedienfeld des Backends geladen. Diese Funktion ist nützlicher, um kleine Änderungen und Aktualisierungen an den masterpages vorzunehmen und einzufügen Makros oder Elemente. Wenn wir eine vollständige .NET-IDE verwenden, erhalten wir Intellisense und eine Reihe anderer Funktionen, die in Umbraco nicht vorhanden sind. Daher muss das Erstellen der masterpages normalerweise in beiden Bereichen bearbeitet werden.

Fügen Sie den folgenden Code in das Element <asp:Content> ein:

<!DOCTYPE HTML> 
	<html lang="en"> 
		<meta charset="utf-8" /> 
		<head> 
			<title><umbraco:Macro Alias="pageTitle" runat="server"></umbraco:Macro></title> 
			<!--[if lt IE 9]> 
				<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
			<![endif]--> 
			<link rel="Stylesheet" href="/css/site.css" /> 
		</head> 
		<body> 
			<form runat="server"> 
				<header> 
					<hgroup> 
						<h1><a class="accessible-hidden logo" href="/" title="Return To Home Page">The company name</a></h1> 
						<h2>This is the company's tag line</h2> 
					</hgroup>                 
					<nav> 
						<ul> 
							<li><a href="/" title="Home">Home</a></li> 
							<li><a href="/" title="About Us">About Us</a></li> 
							<li><a href="/" title="News">News</a></li> 
							<li><a href="/" title="Contact Us">Contact Us</a></li> 
						</ul> 
					</nav> 
				</header> 
 
				<div id="innerContent" class="clear-float"> 
					<asp:ContentPlaceHolder id="BaseContent" runat="server"></asp:ContentPlaceHolder> 
				</div> 
				<footer> 
					<nav> 
						<ul> 
							<li><a href="/" title="Home">Home</a></li> 
							<li><a href="/" title="About Us">About Us</a></li> 
							<li><a href="/" title="News">News</a></li> 
							<li><a href="/" title="Contact Us">Contact Us</a></li> 
						</ul> 
					</nav> 
	                <p>Copyright The Company <%=DateTime.Now.Year %></p> 
				</footer> 
			</form> 
	        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
		</body> 
	</html>

Speicher die Datei. Werfen wir einen Blick auf das, was wir haben. Es ist im HTML5-Format, wie wir direkt am minimalen DOCTYPE- und meta charset element erkennen können. Es ist nicht unbedingt erforderlich, HTML5 zu verwenden, aber wir können es auch, oder? Im <head> der Seite haben wir ein Stylesheet (das wir noch nicht erstellt haben, aber später erstellen werden) und ein <title> -Element verlinkt. Der <title> enthält unser erstes Umbraco-Tag und zeigt auf ein Makro. Machen Sie sich vorerst keine allzu großen Sorgen, wir haben noch keine Makros besprochen und diese werden in einem späteren Teil der Serie ausführlicher behandelt. Der Inhalt der Seite wird in ein <form> -Element eingeschlossen, wobei das runat-Attribut auf server festgelegt ist. Dies ist die Standardpraxis für .NET-Sites. Wir fügen auch einen Link zur HTML5shiv-Datei im Google-Code hinzu, damit IE8 oder niedriger unsere HTML5-Elemente korrekt anzeigen kann.

Als nächstes haben wir ein <header> -Element, das ein <hgroup> -Element für die Überschrift und die Tag-Zeile der Hauptwebsite enthält (bestehend aus <h1> - und <h2> -Tags), und ein <nav> -Element, das die Hauptnavigation für die Site enthält , die aus einer ungeordneten Standardliste erstellt wird. Der für die Hauptnavigation angezeigte HTML-Code wird im endgültigen Formular der Site nicht verwendet. Er wird hier als Leitfaden aufgeführt, wie der HTML-Code aussehen soll, wenn er automatisch mit einem anderen Makro erstellt wird. Es ist nützlich, die Grundstruktur für dynamisch erstellte Elemente hinzuzufügen, falls diese vor dem Hinzufügen der dynamischen Bits formatiert werden müssen. Dies ist besonders wichtig, wenn Sie als Teil eines Teams arbeiten und jemand anderes alle (lustigen) Back-End-Dinge erledigt.

Wir haben dann ein <div> -Element, das einen <asp:ContentPlaceHolder> enthält. Das <div> hat eine id für Stylingzwecke und das <asp:ContentPlaceHolder> hat ein id-Attribut, damit es mit anderen Seiten (oder masterpages) gefüllt werden kann. Es hat auch das Attribut runat="server", da es sich um ein ASPX-Element handelt, das vom Server verarbeitet wird. Beachten Sie, dass einige unserer Elemente Klassennamen erhalten, wenn wir die Site gegen Ende der Serie gestalten.

Wir haben auch ein <footer> -Element, das eine weitere Kopie der Navigation enthält (wieder wird der HTML-Code zu diesem Zeitpunkt hauptsächlich zu Stilzwecken und als Beispiel dafür bereitgestellt, wie er eventuell im Browser angezeigt wird, wenn die Seiten bereitgestellt werden), und a Copyright-Erklärung. Die Copyright-Erklärung enthält einen kleinen Ausschnitt aus C#; Dies gibt lediglich das aktuelle Jahr im 4-stelligen Standardformat aus, sodass es immer das Jahr widerspiegelt, in dem die Seite angezeigt wird. Schließlich verlinken wir auf die von Google-CDN gehostete Version von jQuery, da wir diese benötigen, um unserer Website im letzten Teil der Serie etwas Verhalten hinzuzufügen.

Codierung der Homepage

Als nächstes können wir den Code hinzufügen, aus dem die Homepage besteht. Wenn wir die HomePage.master-Datei in VWD öffnen, können wir sehen, dass sie bereits unter BasePage.master verschachtelt ist (die BasePage.master-Datei wird in der Master-Deklaration oben in der Datei als MasterPageFile festgelegt) Um die ContentPlaceHolderID des <asp:Content> -Elements so zu ändern, dass sie auf das <asp:ContentPlaceHolder> -Element verweist, das wir dem BasePage.master hinzugefügt haben:

1	<asp:Content ContentPlaceHolderID="BaseContent" runat="server">
2
3	</asp:Content>

Fügen Sie nun den folgenden Code zum oben gezeigten <asp:Content> -Element hinzu:

<p id="introText"><umbraco:Item field="introText" runat="server" /></p> 
 
	<umbraco:Item field="bannerImage" xslt="concat('&\lt;img src=&\quot;',umbraco.library:GetMedia({0}, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia({0}, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> 
 
	<div id="hero"> 
	    <div id="viewer"> 
	        <div id="slider"> 
	            <umbraco:Macro Alias="heroPanels" runat="server"></umbraco:Macro> 
	        </div> 
	    </div> 
	    <ul id="ui" class="clear-float"> 
	        <li id="prev"><a href="#" title="View Previous Panel">Previous</a></li> 
	        <li id="next"><a href="#" title="View Next Panel">Next</a></li> 
	    </ul> 
	</div>

Diese Masterseite enthält eine andere Art von Umbraco-Element - den Item. Der erste Punkt, den wir verwenden, legt den Einführungstext auf der Seite fest. Denken Sie daran, dass wir dies in Teil 1 dieser Serie als eine Eigenschaft des Home Page-Dokumenttyps definiert und auf einen Datentyp des Richtext editor festgelegt haben. Das Element <umbraco:Item> hier in der Vorlage zeigt den Inhalt aller im Rich-Text-Editor eingegebenen Elemente an, wenn wir im Back-End einen Inhaltsknoten für die Homepage erstellen.

Es sollte jetzt etwas klarer sein, wie sich die Eigenschaften in den Dokumenttypen auf die Elemente beziehen, die auf unseren Seiten landen, aber keine Sorge, wenn es zu diesem Zeitpunkt nicht 100% kristallklar ist - wir haben noch keine erstellt aktuelle Seiten noch, aber wenn wir den letzten Teil des Puzzles machen, sollte ordentlich einrasten.

Als nächstes haben wir ein Bildelement; Da wir eine Medienauswahl verwenden (ich werde genau erklären, was eine Medienauswahl ist, wenn wir die Seite erstellen), ist der Code dafür viel komplexer als das, was wir bisher gesehen haben. Einer der Abschnitte im Umbraco-Backend ist der Bereich Media, in dem der gesamte Medieninhalt für eine Site hochgeladen und gespeichert werden kann. Wie andere Ressourcen für die Site ist jedes Medienelement ein Knoten in der Knotenstruktur und erhält einen Namen, wenn das Medienelement zum CMS hinzugefügt wird.

Wenn wir das <img> -Element hinzufügen, verwenden wir ein <umbraco:Item>, das dem introText ähnelt, aber wir müssen ein Snippet aus Inline-XSLT-Code und ein paar HTML-Snippets verwenden, um den Pfad des darin gespeicherten Bildes tatsächlich abzurufen die Medienbibliothek. Das XSLT-Snippet verwendet die concat() -Methode, die ein durch Kommas getrenntes Array von Zeichenfolgen zum Verketten akzeptiert, um das <img> -Element zu erstellen. Innerhalb dieses Arrays verwenden wir die HTML-Entitäten und das Markieren, um das Element manuell zu erstellen, und verwenden auch eine Funktion aus der umbraco.library-Klasse. Die Funktion ist GetMedia und ermöglicht es uns, den Pfad zum Magier in der Medienbibliothek (es gibt einen passenden Ordner im Umbraco-Dateisystem, in dem alle Medienelemente gespeichert sind) mithilfe der umbracoFile-Eigenschaft und des Namens des Knotens abzurufen mit @nodeName. Beachten Sie, dass ich \ Zeichen in die HTML-Entitäten einfügen musste, damit der obige Beispielcode korrekt angezeigt wird. Entfernen Sie diese, wenn Sie sie kopieren und in Ihre eigenen Dateien einfügen.

Schließlich fügen wir einige grundlegende Markierungen für das Heldenbedienfeld hinzu, einschließlich eines äußeren Containers (<div> mit der id eines hero), jeweils einer <div> für die Elemente #viewer und #slider sowie einer einfachen Benutzeroberfläche, die dies ermöglicht die verschiedenen zu navigierenden Inhaltsbereiche. Das #slider-Element enthält auch ein <umbraco:Macro> -Element. Daher erstellen wir diesen Teil des Helden-Panels mithilfe eines XSLT-Makros, das wir in einem späteren Teil der Serie erstellen werden. Das Helden-Panel wird zunächst aus XSLT und dem hier gezeigten Markup erstellt und dann für die Arbeit mit Skripten verwendet.

Erstellen der Inhaltsvorlage

Unsere Inhaltsseiten sind relativ einfach und werden mit einer einzigen Eigenschaft aus dem Content-Dokumenttyp erstellt. Ändern Sie in der Masterseitendatei die ContentPlaceHolderID des <asp:Content> -Elements genau wie für die Startseite in BaseContent:

1
2	<asp:Content ContentPlaceHolderID="BaseContent" runat="server">
3
4	</asp:Content>

Fügen Sie dann dem Element <asp:Content> den folgenden Code hinzu:

1	<div id="pageCopy"><umbraco:Item field="pageCopy" runat="server" /></div>

Das ist es, das ist alles, was wir in unserer Inhaltsseitenvorlage verwenden werden. In der Realität wäre eine Inhaltsseite wahrscheinlich viel komplexer, aber für unser einfaches Beispiel sollte sie ausreichen. Wir haben für dieses <umbraco:Item> ein Outer verwendet, das <div> enthält, da das Item mit einem Richtext editor verknüpft ist und daher viele verschiedene Arten von Inhalten enthalten kann.

Die Nachrichtenvorlagen

Unsere NewsList-Vorlage ist fast so einfach wie unsere Content vorlage, da die Seite größtenteils dynamisch mithilfe eines XSLT-Makros erstellt wird. Vergessen Sie nicht, die ContenPlaceHolderID wie in unseren anderen Vorlagen auf BaseContent zu aktualisieren und dem Platzhalter die folgenden Elemente hinzuzufügen:

1	<section id="newsList">
2	<h1>Recent News from The Company</h1>
3	<umbraco:Macro Alias="newsList" runat="server" />
4	</section>

Auf dieser Seite haben wir ein <section> -Element, in dem sich die Überschrift der Hauptseite und das Makro befinden, mit dem die Nachrichtenliste erstellt wird. Dies ist alles, was wir in dieser Vorlage benötigen. Fahren wir also mit der nächsten und letzten fort. das NewsItem. Ändern Sie erneut die ContentPlaceHolderID in BaseContent und fügen Sie dem Platzhalter den folgenden Code hinzu:

<article id="newsItem"> 
		<header> 
			<h1><umbraco:Item field="headline" runat="server" /></h1> 
			<ul class="clear-float"> 
				<li>Posted on <umbraco:Item field="date" formatAsDate="true" runat="server" /></li> 
				<li>By <umbraco:Item field="creatorName" runat="server" /></li> 
			</ul> 
		</header> 
		<div id="newsContent"> 
		<umbraco:Item field="storyImage" xslt="concat('&\lt;img  src=&\quot;',umbraco.library:GetMedia({0}, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia({0}, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> 
		<div id="newsText"><umbraco:Item field="newsText" runat="server" /></div> 
		</div> 
	</article> 
 
	<nav id="newsNav"> 
		<umbraco:Macro Alias="newsNav" runat="server" /> 
	</nav>

Unsere NewsItem-Vorlage ist etwas komplexer als die meisten anderen. Der Hauptcontainer für die Nachricht ist ein <article>, der einen <header> für die Überschrift und einige Informationen zur Nachricht wie date und author enthält. Das Datum, das im ersten <li> angezeigt wird, ist mit dem Datepicker-Feld verknüpft, das wir dem entsprechenden Dokumenttyp für diesen Seitentyp hinzugefügt haben. Wir setzen das formatAsDate-Attribut auf true, wodurch das Datum schön formatiert wird, ohne dass am Ende eine Zeitzeichenfolge hinzugefügt wird. Der author wird mithilfe der creatorName-Eigenschaft ermittelt, die Knoten(Seiten) automatisch hinzugefügt wird, wenn sie im Back-End erstellt werden.

Der Hauptteil des Artikels ist ein äußerer Container <div>, der das Feld newsImage verwendet (dies entspricht im Wesentlichen dem Bannerbild auf der Startseite, das auch eine Medienauswahl verwendet. Auch hier enthalten die HTML-Entitäten Backslashes, damit sie angezeigt werden richtig hier) und ein <div>, das ein <umbraco:Item> verwendet, das mit dem Feld newsText verknüpft ist. Wir erstellen auch ein sekundäres <nav> -Element, mit dem der Besucher direkt von der aktuellen Nachrichtenseite zu anderen Nachrichtenseiten navigieren kann, ohne zur Nachrichtenliste zurückkehren zu müssen. Dies wird aus einem Makro erstellt, das wir im nächsten Teil dieser Serie betrachten werden.

Seiten hinzufügen

Wir haben also mindestens ein paar Stunden damit verbracht, die Dinge einzurichten (mehr, wenn Sie VWD + SQL Server installieren mussten). Fügen wir also bereits einige Seiten hinzu! Auf einer Umbraco-Site gibt es tatsächlich keine einzelnen "Seiten" als solche. Denken Sie nicht an sich selbst - "Ich brauche diese Seite, um etwas Einzigartiges zu tun, damit ich dies oder das der zugrunde liegenden Seite hinzufügen kann" - es funktioniert einfach nicht so, es gibt keine zugrunde liegenden Seiten. Anstelle von Seiten haben wir Inhaltsknoten im Knotenbaum (insbesondere Knoten im Abschnitt Content des CMS-Backends) und Daten in der Datenbank. In der Datenbank sind einzelne URLs gespeichert, und jeder Knoten ist einer URL zugeordnet. Wenn ein Besucher die Adresse einer Seite eingibt oder auf der Website navigiert, überprüft das CMS, welche URL angefordert wurde, und erstellt die Seite im laufenden Betrieb unter Verwendung des Dokumenttyps und der Vorlage.

Um die Homepage der Site zu erstellen, gehen Sie zum Abschnitt "Inhalt" des CMS, klicken Sie mit der rechten Maustaste auf den Ordner "Inhalt" im oberen linken Bereich und wählen Sie "Erstellen". Geben Sie im angezeigten Dialogfeld Home als Namen ein und wählen Sie Home Page als Dokumenttyp:

Sobald wir im Dialogfeld auf die Schaltfläche Create klicken, wird der neue Knoten erstellt und im oberen linken Bereich des CMS angezeigt. Rechts daneben befindet sich ein kleiner orangefarbener Stern. Dies zeigt an, dass der Knoten gespeichert, aber nicht veröffentlicht wurde. Im rechten Bereich des CMS sehen wir die Registerkarten und Felder, die wir im Dokumenttyp in Teil 1 definiert haben. Die Registerkarte Content wird standardmäßig angezeigt, da es sich um die erste Registerkarte handelt. Die erste Eigenschaft, die wir definiert haben, war die Eigenschaft Intro Text, die direkt dem Textbereich oben auf der Registerkarte Content zugeordnet ist. Wir haben auch die Eigenschaft Banner Image definiert, die direkt dem unter dem Textbereich angezeigten Media Picker-Steuerelement zugeordnet ist.

Der Inhaltsknoten der Startseite erbt auch eine Eigenschaft vom Dokumenttyp der Base Page - dem Domain Name -, die auf der Registerkarte Properties angezeigt wird. Gehen Sie jetzt zur Registerkarte Properties. Hier gibt es einige wichtige Eigenschaften, die von Umbraco automatisch erstellt werden, einschließlich des Namens des Knotens, bei dem es sich um ein bearbeitbares Feld handelt, sodass wir den Knotennamen jederzeit problemlos ändern können, sowie des verwendeten Document Type und der verwendeten Template. Es gibt andere nützliche Eigenschaften wie den Ersteller des Knotens und das Veröffentlichungsdatum. Geben Sie The Company in das Feld Domain Name ein (dies kann das Format The Company oder eine tatsächliche URL wie www.thecompany.com annehmen, es macht keinen Unterschied, da es einfach für den Titel der Seite verwendet wird).

Sowohl der Intro Text als auch das Banner Image sind obligatorische Eigenschaften, daher müssen beide ausgefüllt werden, bevor wir die Seite veröffentlichen können. Der Intro Text ist einfach; Wir fangen einfach an, den Textbereich einzugeben. Wir können einige grundlegende Formatierungen mithilfe der Richtext editor-Schaltflächen oben auf der Registerkarte vornehmen, aber im Wesentlichen vervollständigen wir diese Eigenschaft oder dieses Feld nur durch Eingabe. Das Banner Image ist etwas (aber nicht viel komplexer) und um es zu vervollständigen, müssen wir kurz mit einem anderen Abschnitt des CMS arbeiten - der Medienbibliothek.

Die Medienbibliothek

Die Medienbibliothek ist ein Repository für alle Medienressourcen wie Bilder, Videos, Audiodateien oder andere eingebettete Dateien oder Dokumente. Unser Banner Image feld für die Home Page verwendet eine Media picker, ein Steuerelement, das ein Dialogfeld mit der Medienbibliothek öffnet und es dem Endadministrator der Site ermöglicht, das gewünschte Bild visuell auszuwählen. Bevor dies jedoch passieren kann, müssen Elemente in der Medienbibliothek vorhanden sein, die ausgewählt werden können.

Um der Medienbibliothek ein Element hinzuzufügen, wählen Sie einfach den Media abschnitt aus, indem Sie auf das Symbol im unteren linken Bereich des Backends klicken. Sobald der Knoten des Medienabschnitts im oberen linken Bereich geladen wurde, klicken Sie mit der rechten Maustaste auf den Medienordner und wählen Sie Create aus dem Menü. Im angezeigten Dialogfeld können wir einen Namen für das Bild festlegen (denken Sie daran, dass der Name, den wir dem Knoten geben, im alt-Attribut des Bildes verwendet wird, wenn es auf der Startseite angezeigt wird) und den Media Type auswählen. Es gibt drei vordefinierte Typen, aus denen wir auswählen können. Ein Ordner, der nützlich sein kann, wenn wir viele verschiedene Medienelemente haben, die wir ordentlich kategorisieren und speichern möchten, einen allgemeinen File typ oder ein Image, das wir in diesem Fall verwenden werden. Andere Medientypen können einfach im Abschnitt Settings erstellt werden.

Sobald Sie im Dialogfeld auf die Schaltfläche Create geklickt haben, wird das neue Bildelement erstellt und im rechten Bereich des Editors werden einige Eigenschaften einschließlich einer Schaltfläche zum Hochladen angezeigt. Wir sollten auf die Schaltfläche zum Hochladen klicken, um die Datei von unserem Computer auszuwählen, die wir hochladen möchten (ich habe ein vorgefertigtes Bild zum Hochladen auf meinem Desktop bereit). Nachdem Sie das hochzuladende Bild ausgewählt und auf das Speichersymbol in der Symbolleiste oben im rechten Bereich geklickt haben, wird das Bild Teil der Medienbibliothek und als Knoten in der Medienknotenstruktur aufgeführt. Ein Miniaturbild für das Bild wird ebenfalls erstellt und im properties fenster rechts zusammen mit einigen Bildattributen angezeigt:

Jetzt kann das Bild ausgewählt werden. Kehren Sie zum Abschnitt Content zurück und wählen Sie den zuvor erstellten Home-Knoten aus. Klicken Sie im Feld Banner image unter dem Textbereich auf den Link choose, um die Auswahl zu öffnen, die in einem Dialogfeld angezeigt wird. Klicken Sie auf The Company Does This! Knoten in der Auswahl und es wird im Banner image feld gesetzt. Der Home-Knoten kann jetzt veröffentlicht werden. Klicken Sie daher auf das Symbol der Welt mit einer Festplatte davor, um die Seite zu speichern und zu veröffentlichen.

Das ist es; Sie haben Ihre erste Umbraco-Seite erstellt! Sie können die neue Seite anzeigen, indem Sie auf das Vorschausymbol (die Seite mit der Lupe) klicken, um sie im Vorschaumodus anzuzeigen. Sie können auch eine neue Registerkarte in Ihrem Browser öffnen und die URL des Backends kopieren. Fügen Sie es in die neue Registerkarte ein und klopfen Sie alles nach der Portnummer ab.

Die Seite ist zu diesem Zeitpunkt völlig ungestylt, aber Sie sollten feststellen, dass der Intro-Text und das Bild, die wir im Back-End festgelegt haben, auf der Seite zusammen mit dem Markup aus den Vorlagen Home.master und Base Page angezeigt werden. Die <umbraco:Item> -Elemente wurden alle ausgefüllt, aber alle <umbraco:Macro> -Elemente wurden noch nicht ausgefüllt, da wir für diese XSLT schreiben müssen.

Zusammenfassung

In diesem Teil des Tutorials haben wir untersucht, wie Umbraco-Vorlagen funktionieren (sie stellen .NET-Masterseiten dar) und wie sie für eine maximale Wiederverwendung von Code verschachtelt sind. Nachdem wir eine Seite erstellt haben, haben wir gesehen, wie die Dokumenttypen, Vorlagen und Knoten zusammenarbeiten, um die Eigenschaften zu erstellen, die wir im Back-End bearbeiten können, und die Seiten, die unsere Besucher sehen werden.

Im nächsten Teil dieser Serie werden wir den Rest der Seiten für die Site erstellen und dann mit dem Schreiben des XSLT beginnen, das unter anderem die obere und untere Navigation sowie das Helden-Panel erstellt.