Prvotní návrh HTML rozvržení – pevné velikosti měřené na body.
authorFrantišek Kučera <franta-hg@frantovo.cz>
Sat, 23 May 2009 17:14:58 +0200
changeset 030215344de7d
child 1 6dced8dcb2e6
Prvotní návrh HTML rozvržení – pevné velikosti měřené na body.
html/grafika/blok-nadpis-320.png
html/grafika/blok-nadpis-680.png
html/grafika/blok-pozadi.gif
html/index.html
html/styl.css
     1.1 Binary file html/grafika/blok-nadpis-320.png has changed
     2.1 Binary file html/grafika/blok-nadpis-680.png has changed
     3.1 Binary file html/grafika/blok-pozadi.gif has changed
     4.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     4.2 +++ b/html/index.html	Sat May 23 17:14:58 2009 +0200
     4.3 @@ -0,0 +1,81 @@
     4.4 +<?xml version="1.0" encoding="UTF-8"?>
     4.5 +<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     4.6 +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
     4.7 +    <head>
     4.8 +        <meta http-equiv="content-language" content="cs"/>
     4.9 +        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    4.10 +        <link href="styl.css" type="text/css" rel="StyleSheet"/>
    4.11 +        <title>SQL: pojďte si hrát!</title>
    4.12 +    </head>
    4.13 +    <body>
    4.14 +        <div id="zahlavi"><p>SQL: pojďte si hrát!</p></div>
    4.15 +
    4.16 +        <div id="bloky">
    4.17 +            <div class ="blok" id="napoveda">
    4.18 +                <h2>Nápověda</h2>
    4.19 +                <div class="vnitrekBloku">
    4.20 +                    <p>lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
    4.21 +                </div>
    4.22 +            </div>
    4.23 +
    4.24 +
    4.25 +            <div id="io">
    4.26 +
    4.27 +                <div class ="blok" id="vstup">
    4.28 +                    <h2>Zadávání SQL příkazů</h2>
    4.29 +                    <div class="vnitrekBloku">
    4.30 +                        <form>
    4.31 +                            <textarea>SELECT * FROM tabulka;</textarea>
    4.32 +                        </form>
    4.33 +                    </div>
    4.34 +                </div>
    4.35 +
    4.36 +
    4.37 +
    4.38 +
    4.39 +
    4.40 +                <div class ="blok" id="vystup">
    4.41 +                    <h2>Výsledek</h2>
    4.42 +                    <div class="vnitrekBloku">
    4.43 +                        <p>
    4.44 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.45 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.46 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.47 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.48 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.49 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.50 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.51 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.52 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.53 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.54 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.55 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.56 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.57 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.58 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.59 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.60 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.61 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.62 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.63 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.64 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.65 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.66 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.67 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.68 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.69 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.70 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.71 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.72 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.73 +                            lorem ipsum, nějaký text, něco jako latina, ale jiné…
    4.74 +                        </p>
    4.75 +                    </div>
    4.76 +                </div>
    4.77 +            </div>
    4.78 +
    4.79 +        </div>
    4.80 +
    4.81 +    </body>
    4.82 +</html>
    4.83 +
    4.84 +
     5.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     5.2 +++ b/html/styl.css	Sat May 23 17:14:58 2009 +0200
     5.3 @@ -0,0 +1,85 @@
     5.4 +a img {
     5.5 +    border: none;
     5.6 +}
     5.7 +
     5.8 +html {
     5.9 +    background: #42afdc;
    5.10 +    color:black;
    5.11 +}
    5.12 +body {
    5.13 +    font-family: sans-serif;
    5.14 +}
    5.15 +
    5.16 +#zahlavi {
    5.17 +    height: 48px;
    5.18 +
    5.19 +}
    5.20 +
    5.21 +/** Obal kolem bloků */
    5.22 +#bloky {
    5.23 +    width: 1040px;
    5.24 +    text-align: justify;
    5.25 +}
    5.26 +
    5.27 +.blok {
    5.28 +    margin: 10px;
    5.29 +}
    5.30 +
    5.31 +/** Vstup, výstup nebo nápověda */
    5.32 +.vnitrekBloku {
    5.33 +    background-image: url('grafika/blok-pozadi.gif');
    5.34 +    margin: 0px;
    5.35 +    padding: 10px;
    5.36 +}
    5.37 +
    5.38 +#vstup .vnitrekBloku {
    5.39 +    height: 150px;
    5.40 +}
    5.41 +
    5.42 +#vstup textarea {
    5.43 +    width: 640px;
    5.44 +    height: 110px;
    5.45 +    padding: 8px;
    5.46 +}
    5.47 +
    5.48 +#vystup .vnitrekBloku {
    5.49 +    overflow: auto;
    5.50 +    height: 280px;
    5.51 +}
    5.52 +
    5.53 +#napoveda .vnitrekBloku {
    5.54 +    height: 484px;
    5.55 +}
    5.56 +
    5.57 +.blok h2 {
    5.58 +    font-size: medium;
    5.59 +    padding: 2px;
    5.60 +    padding-left: 32px;
    5.61 +    margin: 0px;
    5.62 +    color: gray;
    5.63 +}
    5.64 +
    5.65 +#napoveda h2 {
    5.66 +    background-image: url('grafika/blok-nadpis-320.png');
    5.67 +}
    5.68 +
    5.69 +#io h2 {
    5.70 +    background-image: url('grafika/blok-nadpis-680.png');
    5.71 +}
    5.72 +
    5.73 +#io {
    5.74 +    float: left;
    5.75 +}
    5.76 +
    5.77 +#vstup {
    5.78 +    width: 680px;
    5.79 +}
    5.80 +
    5.81 +#vystup {
    5.82 +    width: 680px;
    5.83 +}
    5.84 +
    5.85 +#napoveda {
    5.86 +    float: right;
    5.87 +    width: 320px;
    5.88 +}
    5.89 \ No newline at end of file