Benutzer-Werkzeuge

Webseiten-Werkzeuge


en:webedition:beginners-guide:basic-template

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
en:webedition:beginners-guide:basic-template [2019/02/09 20:57]
Sascha Nemecek
— (aktuell)
Zeile 1: Zeile 1:
-====== ​ Basic Template ====== ​ 
  
-Let's start with the most basic template for a page -- that's the one you get when you use the menu: "New -> Template": ​ 
- 
-<code html> 
-<​!DOCTYPE HTML> 
-<html dir="​ltr"​ lang="<​we:​pageLanguage type="​language"​ doc="​top"​ />">​ 
-<​head>​ 
-    <​we:​title></​we:​title>​ 
-    <​we:​description></​we:​description>​ 
-    <​we:​keywords></​we:​keywords>​ 
-    <​we:​charset defined="​UTF-8">​UTF-8</​we:​charset>​ 
-</​head>​ 
-<​body>​ 
-    <!-- webEdition demo template (8.0.5.0) --> 
-    <article style="​width:​400px">​ 
-        <​h1><​we:​input type="​text"​ name="​Headline"​ style="​width:​60em"/></​h1>​ 
-        <​p><​b><​we:​input type="​date"​ name="​Date"​ currentdate="​true"​ format="​d.m.Y"/></​b></​p>​ 
-        <​we:​ifNotEmpty name="​Image">​ 
-            <​p><​we:​img name="​Image"​ showthumbcontrol="​true"/></​p>​ 
-        </​we:​ifNotEmpty>​ 
-        <​we:​textarea name="​Content"​ width="​400"​ height="​400"​ wysiwyg="​true"​ removefirstparagraph="​false"​ inlineedit="​true"/>​ 
-    </​article>​ 
-</​body>​ 
-</​html>​ 
-</​code>​ 
- 
-webEdition has a template language that mixes nicely with HTML. All tags start with <we: /> and must be properly formed: Some are self-closing,​ and some need a closing tag:  
- 
-<code html> 
-<​we:​input .../> 
-<we:a ...>​...</​we:​a>​ 
-</​code>​ 
- 
-The starter template from above uses the following wE-tags: 
- 
-  * [[en:​webedition:​tag-reference:​pageLanguage|we:​pageLanguage]] 
-  * [[en:​webedition:​tag-reference:​title|we:​title]] 
-  * [[en:​webedition:​tag-reference:​description|we:​description]] 
-  * [[en:​webedition:​tag-reference:​keywords|we:​keywords]] 
-  * [[en:​webedition:​tag-reference:​charset|we:​charset]] 
-  * [[en:​webedition:​tag-reference:​input|we:​input]] 
-  * [[en:​webedition:​tag-reference:​input type="​text"​|we:​input type="​text"​]] 
-  * [[en:​webedition:​tag-reference:​input type="​date"​|we:​input type="​date"​]] 
-  * [[en:​webedition:​tag-reference:​ifNotEmpty|we:​ifNotEmpty]] 
-  * [[en:​webedition:​tag-reference:​img|we:​img]] 
-  * [[en:​webedition:​tag-reference:​textarea|we:​textarea]] 
- 
-Most of these you'll come across all the time, they are either basic data types or control structures (e.g. [[en:​webedition:​tag-reference:​ifNotEmpty|<​we:​ifNotEmpty>​]]). Together with the [[en:​webedition:​tag-reference:​block|<​we:​block>​]]-Element,​ you already have a good toolbox to build a complete website! 
- 
-Here's another very simple template with some more tags -- see comment-attributes for explanations:​ 
- 
-<code html> 
-<​!doctype html> 
-<html lang="<​we:​pageLanguage type="​language"​ doc="​top"​ />">​ 
-<​head>​ 
-    <​we:​charset defined="​UTF-8">​UTF-8</​we:​charset>​ 
-    <meta name="​viewport"​ content="​width=device-width,​ user-scalable=no,​ initial-scale=1.0,​ maximum-scale=1.0,​ minimum-scale=1.0">​ 
-    <meta http-equiv="​X-UA-Compatible"​ content="​ie=edge">​ 
-    <​we:​title></​we:​title>​ 
-    <​we:​description></​we:​description>​ 
-    <​we:​keywords></​we:​keywords>​ 
-    <we:css id="​123"​ comment="​inserts a css-stylesheet with the WE-ID 123" /> 
-    <we:js id="​124"​ comment="​inserts a javascript with the WE-ID 124" /> 
-</​head>​ 
-<​body>​ 
- 
-    <​we:​ifEditmode comment="​This is only visible for backend users">​ 
-        <​b>​Headline:</​b><​br>​ 
-        <​we:​input type="​text"​ name="​headline"​ size="​50"/><​br>​ 
- 
-        <​b>​Image:</​b><​br>​ 
-        <we:img name="​image"​ /><​br>​ 
- 
-        <​b>​Introduction (Text only)</​b><​br>​ 
-        <​we:​textarea wysiwyg="​false"​ name="​teaser"​ cols="​20"​ rows="​10"​ width="​600"​ height="​100"​ /><​br>​ 
- 
-        <​we:​block name="​content"​ comment="​the block element repeats everything in it, like a loop">​ 
- 
-            <​b>​Subheading</​b><​br>​ 
-            <​we:​input type="​text"​ name="​subheading"​ size="​50"/><​br>​ 
- 
-            <​b>​Another image:</​b><​br>​ 
-            <we:img name="​image_in_block"​ /><​br>​ 
- 
-            <​b>​Formatted text:</​b><​br>​ 
-            <​we:​textarea wysiwyg="​true"​ name="​text"​ cols="​20"​ rows="​10"​ width="​800"​ height="​400"​ removefirstparagraph="​false"​ inlineedit="​true"​ /> 
- 
-        </​we:​block>​ 
-    </​we:​ifEditmode>​ 
- 
-    <​we:​ifNotEditmode comment="​This is visible for visitors">​ 
-        <h1> 
-            <​we:​input type="​text"​ name="​headline"​ comment="​see how you can omit the size attribute? Only type and name are necessary!"/>​ 
-        </h1> 
- 
-        <​we:​ifNotEmpty name="​image"​ type="​image">​ 
-            <we:img name="​image"/>​ 
-        </​we:​ifNotEmpty>​ 
- 
-        <​we:​ifNotEmpty name="​teaser"​ comment="​if the teaser is empty, the p.teaser-element is not displayed">​ 
-            <p class="​teaser">​ 
-                <​we:​textarea name="​teaser"​ comment="​This is only text"/>​ 
-            </p> 
-        </​we:​ifNotEmpty>​ 
- 
-        <​we:​block name="​content">​ 
- 
-            <​we:​ifNotEmpty name="​subheading"​ comment="​if the subheading is empty, no h2 is displayed!">​ 
-                <h2> 
-                    <​we:​input type="​text"​ name="​subheading"/>​ 
-                </h2> 
-            </​we:​ifNotEmpty>​ 
- 
-            <​we:​ifNotEmpty name="​image_in_block"​ type="​image">​ 
-                <we:img name="​image"/>​ 
-            </​we:​ifNotEmpty>​ 
- 
-            <​we:​textarea wysiwyg="​true"​ name="​text"​ comment="​Here comes a HTML textfield"​ /> 
- 
-        </​we:​block>​ 
- 
-    </​we:​ifNotEditmode>​ 
- 
-</​body>​ 
-</​html>​ 
- 
-</​code>​ 
- 
-That's a single page. Save the template as "​page.tmpl"​ (for example). Then use "New -> Document -> webEdition Document"​ and select this template as the document'​s template. Play around with it a little bit, and make several documents with it. 
- 
-[[en:​webedition:​beginners-guide:​main-template|Next step: Defining a main template »]] 
en/webedition/beginners-guide/basic-template.1549742223.txt.bz2 · Zuletzt geändert: 2019/02/09 20:57 von Sascha Nemecek

Recent changes RSS feed