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/08 11:21]
Rudolf Horbas
en:webedition:beginners-guide:basic-template [2019/02/09 20:57] (aktuell)
Sascha Nemecek
Zeile 1: Zeile 1:
 ====== ​ Basic Template ====== ​ ====== ​ 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": ​+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>​+<​code ​html>
 <​!DOCTYPE HTML> <​!DOCTYPE HTML>
 <html dir="​ltr"​ lang="<​we:​pageLanguage type="​language"​ doc="​top"​ />">​ <html dir="​ltr"​ lang="<​we:​pageLanguage type="​language"​ doc="​top"​ />">​
 <​head>​ <​head>​
- <​we:​title></​we:​title>​ +    ​<​we:​title></​we:​title>​ 
- <​we:​description></​we:​description>​ +    <​we:​description></​we:​description>​ 
- <​we:​keywords></​we:​keywords>​ +    <​we:​keywords></​we:​keywords>​ 
- <​we:​charset defined="​UTF-8">​UTF-8</​we:​charset>​+    <​we:​charset defined="​UTF-8">​UTF-8</​we:​charset>​
 </​head>​ </​head>​
 <​body>​ <​body>​
- <!-- webEdition demo template (8.0.5.0) --> +    ​<!-- webEdition demo template (8.0.5.0) --> 
- <​article style="​width:​400px">​ +    <article style="​width:​400px">​ 
- <​h1><​we:​input type="​text"​ name="​Headline"​ style="​width:​60em"/></​h1>​ +        <​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>​ +        <​p><​b><​we:​input type="​date"​ name="​Date"​ currentdate="​true"​ format="​d.m.Y"/></​b></​p>​ 
- <​we:​ifNotEmpty name="​Image">​ +        <​we:​ifNotEmpty name="​Image">​ 
- <​p><​we:​img name="​Image"​ showthumbcontrol="​true"/></​p>​ +            <​p><​we:​img name="​Image"​ showthumbcontrol="​true"/></​p>​ 
- </​we:​ifNotEmpty>​ +        </​we:​ifNotEmpty>​ 
- <​we:​textarea name="​Content"​ width="​400"​ height="​400"​ wysiwyg="​true"​ removefirstparagraph="​false"​ inlineedit="​true"/>​ +        <​we:​textarea name="​Content"​ width="​400"​ height="​400"​ wysiwyg="​true"​ removefirstparagraph="​false"​ inlineedit="​true"/>​ 
- </​article>​+    </​article>​
 </​body>​ </​body>​
 </​html>​ </​html>​
Zeile 28: Zeile 28:
 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:  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>​+<​code ​html>
 <​we:​input .../> <​we:​input .../>
 <we:a ...>​...</​we:​a>​ <we:a ...>​...</​we:​a>​
 </​code>​ </​code>​
  
-The starter template above has these WE-tags: +The starter template ​from above uses the following wE-tags:
  
   * [[en:​webedition:​tag-reference:​pageLanguage|we:​pageLanguage]]   * [[en:​webedition:​tag-reference:​pageLanguage|we:​pageLanguage]]
Zeile 48: Zeile 47:
   * [[en:​webedition:​tag-reference:​textarea|we:​textarea]]   * [[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 (we:​ifNotEmpty). Together with the [[en:​webedition:​tag-reference:​block|we:​block]]-Element, ​You already have a good toolbox to build a complete website!+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 -- I've commented them in their comment-attributes ​where necessary:+Here's another very simple template with some more tags -- see comment-attributes ​for explanations:
  
-<​code>​+<​code ​html>
 <​!doctype html> <​!doctype html>
 <html lang="<​we:​pageLanguage type="​language"​ doc="​top"​ />">​ <html lang="<​we:​pageLanguage type="​language"​ doc="​top"​ />">​
-    ​<​head>​ +<​head>​ 
-        <​we:​charset defined="​UTF-8">​UTF-8</​we:​charset>​ +    <​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 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">​ +    <meta http-equiv="​X-UA-Compatible"​ content="​ie=edge">​ 
-        <​we:​title></​we:​title>​ +    <​we:​title></​we:​title>​ 
-        <​we:​description></​we:​description>​ +    <​we:​description></​we:​description>​ 
-        <​we:​keywords></​we:​keywords>​ +    <​we:​keywords></​we:​keywords>​ 
-        <we:css id="​123"​ comment="​inserts a css-stylesheet with the WE-ID 123" /> +    <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" /> +    <we:js id="​124"​ comment="​inserts a javascript with the WE-ID 124" /> 
-    </​head>​+</​head>​
 <​body>​ <​body>​
  
Zeile 70: Zeile 69:
         <​b>​Headline:</​b><​br>​         <​b>​Headline:</​b><​br>​
         <​we:​input type="​text"​ name="​headline"​ size="​50"/><​br>​         <​we:​input type="​text"​ name="​headline"​ size="​50"/><​br>​
-        <​b>​Introduction (Text only)</​b><​br>​ 
  
         <​b>​Image:</​b><​br>​         <​b>​Image:</​b><​br>​
         <we:img name="​image"​ /><​br>​         <we:img name="​image"​ /><​br>​
  
-        <​we:​textarea wysiwyg="​false"​ name="​teaser"​ cols="​20"​ rows="​10"​ width="​600"​ height="​100" ​ /><​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">​         <​we:​block name="​content"​ comment="​the block element repeats everything in it, like a loop">​
Zeile 124: Zeile 123:
     </​we:​ifNotEditmode>​     </​we:​ifNotEditmode>​
  
-    ​</​body>​+</​body>​
 </​html>​ </​html>​
  
 </​code>​ </​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.+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:​main-template|Next step: Defining a main template »]]
en/webedition/beginners-guide/basic-template.txt · Zuletzt geändert: 2019/02/09 20:57 von Sascha Nemecek

Recent changes RSS feed