Rubriker och textstycken

När redaktören redigerar och lägger ut text i en sida lägger Dynamix CMS ut motsvarande HTML-kod i sidan. Rubriker kodas med <h1>, <h2> osv beroende på rubriknivå.

Vanliga textstycken kodas med <p>-tagen. Man kopplar dessutom en CSS-klass till varje rurik och textstycke.

Det kan se ut så här:

  1. <h1 class=”Headline1”>Detta är en rubrik</h1>
  2. <p class=”Normal”>Detta är ett textstycke</p>

Man kan lägga till valfritt antal texttyper för en webblösning.

Det som man skall tänka på när man sätter CSS-stilar för dessa stycken är att inte helt och hållet förlita sig på default-marginaler för text <p>. Detta då Dynamix av tekniska skäl gör om alla <p></p> stycken till <div></div> just under redigering.

Förlita dig inte på defaultmarginaler för <hx> oxh <p>. Ange alltid font-size, font-family, margin och padding och line-height för de texttyper (classer) du definerat upp. Har du tex definerat att <h1> skall ha klassen "Headline1" enlig <h1 class="Headline1"> så skall du alltid definiera stilar för denna klass i ditt stylesheet.

Ange även marginaler efter stycken på ett sådant sätt att man inte behöver skapa extra radmatningar för varje stycke.

Punktlistor

I editorn kan man man skapa punktlistor i en nivå. Dessa kodas på följande sätt:

  1. <ol class="dxOl>
  2. <li><p class="Normal">Rad 1</p></li>
  3. <li><p class="Normal">Rad 2</p></li>
  4. </ol>

Se till att sätta style i CSS-filen för punktlistorna

Nummerlistor

I editorn kan man man skapa nummerlistor i en nivå. Dessa kodas på följande sätt:

  1. <ul class="dxUl>
  2. <li><p class=”normal”></p></li>
  3. <li><p class=”normal”></p></li>
  4. </ul>

Se till att sätta style i CSS-filen för dessa.

Länkar

Länkar ligger kodade enligt följande exempel:

  1. <p class="Normal"><a href="http://www.initiva.se"></p>

Ett Stylesheet för en huvudrubrik och normaltext skulle kunna se ut så här

  1. .Headline1
  2. {
  3. font-family:verdana, sans-serif;
  4. font-size:110%;
  5. color:#000000;
  6. margin:0px 0px 0.8em 0px;
  7. padding:0px;
  8. line-heigh:1.5em
  9. }
  11. .Normal
  12. {
  13. font-family:verdana, sans-serif;
  14. font-size:75%;
  15. color:#000000;
  16. margin:0px 0px 0.8em 0px;
  17. padding:0px;
  18. line-heigh:1.4em
  19. }
  21. .Normal a
  22. {
  23. text-decoration:none;
  24. color:#0000ff;
  25. }
  27. /* Active och focus satta för att hoover-effekr skall visas även när man tabbar till länken. Detta för bästa tillgänglighet för funktionshindrade. Detta enligt standarden WCAG 2.0 */
  29. .Normal a:active,
  30. .Normal a:focus,
  31. .Normal a:hover
  32. {
  33. color:#ff0000;
  34. }