Prvotní návrh HTML rozvržení – pevné velikosti měřené na body.
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