Benutzer-Werkzeuge

Webseiten-Werkzeuge


en:webedition:beginners-guide:css-javascript

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
en:webedition:beginners-guide:css-javascript [2019/02/08 17:18]
Rudolf Horbas
en:webedition:beginners-guide:css-javascript [2019/02/09 22:13] (aktuell)
Sascha Nemecek
Zeile 3: Zeile 3:
 ===== Images ===== ===== Images =====
  
-Images in Your templates are not supposed to be edited by Your users. Put them in a separate folder and probably protect this folder by only making it accessible to administrators.+Images in your templates are not supposed to be edited by editors. Put them in a separate folder and probably protect this folder by only making it accessible to administrators.
  
-In the template code, use the we:img-tag with the document ID of the image (the ID appears when hovering over the document in the doctree): +In the template code, use the ''<​we:img>''​-tag with the document ID of the image (the ID appears when hovering over the document in the document tree): 
-<​code><​we:​img name="​logo"​ id="​1234"​ alt="​Company logo"/></​code>​+<​code ​html><​we:​img name="​logo"​ id="​1234"​ alt="​Company logo"/></​code>​
  
 ===== CSS and JavaScript Files ===== ===== CSS and JavaScript Files =====
  
-In Your templates, ​You can link JavaScript and CSS files using standard HTML: +In your templates, ​you can link JavaScript and CSS files using standard HTML: 
-<​code>​+<​code ​html>
     <script src="/​link/​to/​script.js"></​script>​     <script src="/​link/​to/​script.js"></​script>​
     <link rel="​stylesheet"​ href="/​link/​to.css">​     <link rel="​stylesheet"​ href="/​link/​to.css">​
 </​code>​ </​code>​
  
-But it's way more elegant ​using the WE-tags we:css and we:js:+But it's way more elegant ​to use the wE-tags ''<​we:css>'' ​and ''<​we:js>''​:
  
-<​code>​+<​code ​html>
     <we:js id="​123"​ comment="​main.js"/>​     <we:js id="​123"​ comment="​main.js"/>​
     <we:css id="​456"​ comment="​layout.css"/>​     <we:css id="​456"​ comment="​layout.css"/>​
 </​code>​ </​code>​
  
-That way, You never have to worry about the files to be found, they're linked automatically,​ even when they're being moved.+That way, you'​ll ​never have to worry about the files actual location. They're linked automatically,​ even when they are moved. Additionally,​ browser caches are automatically expired when the resources are updated (using the '​m'​-parameter).
  
 ==== Using a CSS Preprocessor ==== ==== Using a CSS Preprocessor ====
  
-You can choose for CSS files to have them parsed by less, scss or sass -- just set the checkbox under "​Properties"​ accordingly. They'​re saved under these file extensions (.less, .scss, .sass), but with the CSS-WE-tag from above, the parsed CSS version ​are generated and linked.+You can choose for CSS files to be parsed by less, scss or sass -- just set the checkbox under "​Properties"​ accordingly. They'​re saved with the according ​file extensions (.less, .scss, .sass), but using the ''<​we:​css>''​-tag, the parsed CSS version ​is generated and linked ​automatically.
en/webedition/beginners-guide/css-javascript.txt · Zuletzt geändert: 2019/02/09 22:13 von Sascha Nemecek

Recent changes RSS feed