Řezy grafiky na web + základní tabulka | Tutorialy.com - tvorba webu, photoshop, grafika, programování

Reklama

Řezy grafiky na web + základní tabulka

Jako první si vyexportujeme vektorový obrázek do bitmapu. (Soubor / Exportovat)
Nejvhodnější je nějaký bezztrátový formát (pro řezání v corelu – CPT)

Šířku si nastavíme na 1000px

Tak obrázek máme vyexportovaný teď se dáme do html layotu.
Exporovaný obrázek otevřeme v Corelu PhotoPaint a kapátkem vybereme barvu pozadí.

V PSPadu si ztvoříme Nový / HTML
Uděláme tag style ve kterém nastavíme barvu pozadí.
(Jestliže nevidíte panel barev stiskněte [Alt] + [C])

Do dialogu přepíšte barvu.

Tak váš zdrojový kód vypadá takto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html;
  charset=windows-1250">
  <title>PersonalWEB</title>
  <style>
  body {background: #bfd2df }
  </style>
  </head>
  <body>

  </body>
</html>

Teď si uděláme řezy. (Nástrojem: Řezání obrázků)

Řezy si pojmenujeme.

A potom vyexportujeme. (Soubor / Exportovat pro síť WWW).
Vznikne nám *.htm soubor a složka Obrázky se řezy.
HTM soubor vzniklý při exportu z corelu není vhodný pro další použití, a můžeme jej s klidným svědomím smazat. Také obrázky s krajů můžeme smazat, nejsou k ničemu. Teď si vytvoříme tabulku do které vložíme obrázky.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html;
  charset=windows-1250">
  <title>PersonalWEB</title>
  <style>
  body {margin: 0px; padding-top: 0px; padding-bottom: 0px;
  background: #bfd2df }
  .podmenu {color: #999999; font-family: tahoma; font-size: 17px;
  padding: 10px 0px 25px 25px; background-image:url(Obrázky/podmenu.jpg);
  background-repeat: no-repeat;}
  .telo {color: #333333; font-family: tahoma; font-size: 12px;
  padding: 0px 0px 25px 25px; background-image:url(Obrázky/telo.jpg);
  background-repeat: no-repeat;}
  .nadabout {color: #333333; font-family: tahoma; font-size: 12px;
  padding: 0px 0px 25px 25px; background-image:url(Obrázky/nadabout.jpg);
  background-repeat: no-repeat;}
  </style>
  </head>
  <body>

<table align="center" cellspacing="0px" cellpadding="0px">
  <tr>
    <td><img src="Obrázky/head.jpg"></td>
  </tr>
  <tr>
    <td><img src="Obrázky/lmenu.jpg"><img src="Obrázky/ome.jpg">
    <img src="Obrázky/fotky.jpg"><img src="Obrázky/kamaradi.jpg">
    <img src="Obrázky/odkazy.jpg">
    <img src="Obrázky/ostatni.jpg"><img src="Obrázky/guestbook.jpg">
    <img src="Obrázky/pmenu.jpg">
    </td>
  </tr>
  <tr>
    <td align="center" class="podmenu" valign="top" height="159px">
    Vítejte na mé stránce!!
    </td>
  </tr>
  <tr>
    <td width="770px" class="telo"><br></td>
  </tr>
  <tr>
    <td valign="bottom" height="78px" class="nadabout"><br></td>
  </tr>
  <tr>
    <td><img src="Obrázky/about.jpg"></td>
  </tr>
  <tr>
    <td><img src="Obrázky/podabout.jpg"></td>
  </tr>
</table>

  </body>
</html>

Hodnocení tutoriálu: 2.9 (hodnotilo 12 uživatelů)