Allgemeine Tipps
Allgemein
Web-to-Date 5.0 ist eine wunderbare Software, um mit relativ wenig Aufwand neue Webseiten erstellen zu können. Nach kurzer Einarbeitung kommt wohl jeder mit dem Prinzip zurecht und kann sich ganz auf die Inhalte seiner Seiten konzentrieren.
Was die Software jedoch noch viel interessanter macht, ist die Möglichkeit von Feineinstellungen innerhalb fertiger Designs. Die meisten meiner gesammelten Tipps beziehen sich darauf - und die meisten Tipps sehen Sie auf diesen Webseiten (im Design "Alpha") auch angewandt.
Um die Änderungen zu übernehmen müssen Sie mit einem Texteditor Änderungen an Dateien vornehmen, die im entsprechenden Design-Ordner der Software gespeichert sind. Sie finden die jeweiligen Design-Ordner unter ...\data becker\web to date\designs\.
Am besten ist es, Sie legen sich zunächst eine Sicherheitskopie aller Ihrer Designs an. So können Sie immer zur ursprünglichen Form zurückkehren, sollten Sie einmal etwas "verschlimmbessert" haben...
Footer mit Links aus Hauptnavigation
Einige W2D-Designs besitzen keinen eigenen Footer, der die Links aus der Hauptnavigation unten noch einmal wiederholt. Gerade bei längeren Seiten ist dies eine gute Navigationshilfe für die Besucher.
Fügen Sie diesen Abschnitt unten in die style.css ein:
#footer {
width : 798px;
padding: 10px 0px 0px 0px;
margin: 0px 10px 10px 10px;
font-size: 0.9em;
text-align: center;
border: 1px solid <cc:print value="&usercolor.dark">;
background-color: #FFFFFF;
}
Außerdem fügen Sie ganz unten in die navigation.ccml direkt über dem </body>-Tag das hier ein:
<!-- Begin footer -->
<div id="footer">
<p><a <cc:if cond="&page.ishome">style="font-weight:bold;"</cc:if> href="<cc:print value="&home.url">"><cc:print value="&site.ressource.home"></a><cc:loop type="maintopic" obj="mymaintopic"> | <a <cc:if cond="&mymaintopic.ispagemaintopic">style="font-weight:bold;"</cc:if> href="<cc:print value="&mymaintopic.url">"><cc:print value="&mymaintopic.caption"></a></cc:loop></p>
</div>
<br>
<!-- End footer -->
Mehr Abstand zwischen Aufzählungspunkten
Der Abstand zwischen den Zeilen bei Aufzählungen sind bei W2D für meinen Geschmack manchmal etwas zu klein geraten. Ändern Sie in der style.css im Abschnitt
/* Absatztype Aufzählung */
die Zeile
li.content {
padding: 2px 0px 20px 20px;
Die vorletzte Zahl ist der Abstand zur nächsten Zeile. Die letzte Zahl ist der Abstand zwischen den Aufzählungszeichen und dem Anfang der Schrift.
Größerer Text-Abstand in Tabellen
Tabellen haben in einigen Web-to-Date-Designs einen anderen Zeilenabstand wie in den normalen Textblöcken der Seite. Finden Sie in der style.css den Abschnitt
/* Absatztyp Tabelle */
table.content {
und fügen Sie diese Zeile hinzu:
line-height: 170%;
Den Wert (170%) können Sie nun an das Design anpassen.
Zurück/Weiter-Navigation in Hauptseiten einbinden
Möchten Sie eine etwas deutlichere Navigationsführung am Ende der Seite, so können Sie in der navigation.ccml unter dieser Zeile
<cc:print value="&page.content.text">
das hier einbinden:
<div id="yougo"><!-- Start yougo -->
<cc:if cond="&page.topic.number"><strong> Zurück zu:</strong> <a class="arrowback" href="<cc:print value="&page.maintopic.url">"> <cc:print value="&page.maintopic.caption"></a><br />
<cc:if cond="&page.subtopiccount gt 0"><strong> <cc:print value="&site.ressource.navmore">:</strong> <cc:loop type="subtopic" obj="mysubtopic" topic="&page.topic.number" maintopic="&page.maintopic.number"> <a class="arrow" href="<cc:print value="&mysubtopic.url">"><cc:print value="&mysubtopic.caption"></a> </cc:loop><br />
</cc:if>
<cc:else>
<cc:if cond="&page.topiccount gt 0"> <strong><cc:print value="&site.ressource.navmore">:</strong> <cc:loop type="topic" obj="mytopic" maintopic="&page.maintopic.number"> <a class="arrow" href="<cc:print value="&mytopic.url">"> <cc:print value="&mytopic.caption"></a> </cc:loop><br />
</cc:if>
</cc:if>
</div><!-- ENDE yougo -->
So erhalten Sie automatische Links auf weitere Hauptseiten der gleichen Ebene sowie "Zurück"-Links zur überliegenden Hauptseite. Auf diesen Webseiten von 22colors habe ich eine leicht veränderte Form eingesetzt, nämlich nur die Zurück-Links. Hierfür habe ich anstelle des obigen Abschnitts nur den folgenden Abschnitt eingefügt:
<div id="yougo"><!-- Start yougo -->
<cc:if cond="&page.topic.number"><strong> Zurück zu:</strong> <a class="arrowback" href="<cc:print value="&page.maintopic.url">"> <cc:print value="&page.maintopic.caption"></a><br />
</cc:if>
</div><!-- ENDE yougo -->