Редактирование: Участник:Lit-uriy/Песочница2

<!---- Таблица Цветные блоки ----------------------------->
{|style="width:100%" cellspacing="0" cellpadding="0"
<!-------- Столбец 1 -------------------------------------->
|style="width:50%" valign="top"|
<!------------- Блок: О библиотеке Qt4 ------------------->
{{Раздел заглавной страницы | x=0 | y=0 | Заголовок = 00 | Содержание=
[[Что такое Qt?]]
 }}
<!------------- Блок: Документация по Qt4 ---------------->
{{Раздел заглавной страницы | x=0 | y=1 | Заголовок = 01 | Содержание=
Англоязычная документация
 }}
<!------------- Блок: Установка Qt4 ---------------------->
{{Раздел заглавной страницы | x=0 | y=2 | Заголовок = 02 | Содержание=
[[Установка Qt4]]
 }}
<!-------- Столбец 2 -------------------------------------->
|&nbsp;&nbsp;&nbsp;&nbsp;
<!-------- Столбец 3 -------------------------------------->
|style="width:50%" valign="top"|
<!------------- Блок: Учебное пособие --------------------->
{{Раздел заглавной страницы | x=1 | y=0 | Заголовок = 10 | Содержание=
[[Учебное пособие]]
 }}
<!------------- Блок: Примеры ----------------------------->
{{Раздел заглавной страницы | x=1 | y=1 | Заголовок = 11 | Содержание=
[[Примеры]]
 }}
<!------------- Блок: Знаете ли вы, что… ------------------>
{{Раздел заглавной страницы | x=1 | y=2 | Заголовок = 12 | Содержание=
{{Знаете ли вы}}
 }}
|}

{|style="width:100%" cellspacing="0" cellpadding="0"
|style="width:45%" valign="top"|
Text-1
|&nbsp;Text-2&nbsp;
|style="width:45%" valign="top"|
Text-3
|}

== Шаблон блока страницы 1 ==

<div style="background-color: {{#ifeq: {{{x|0}}} | 0 | #C8D8FF | #D7FFC7}}; font-size: 1px; height: 8px; border: 1px solid #AAAAAA; -moz-border-radius-topright: 0.5em; -moz-border-radius-topleft:0.5em;"></div>
<div style="border: 1px solid #8898BF; border-top: 0px solid white; padding: 5px 5px 0 5px; margin-bottom: 3ex;"><!--
-->{{#if:{{{Заголовок|}}}|<h2 style="font-size:100%; padding:0; margin:0; font-weight:bold; border:0;">{{{Заголовок}}}</h2>}}
{{{Содержание}}}<!--
-->{{#if: {{{1|}}}{{{2|}}}{{{3|}}}{{{4|}}}
 | <div style="font-size: 85%;text-align:right;">{{join|{{{1|}}}|{{{2|}}}|{{{3|}}}|{{{4|}}}| separator=<nowiki> |&nbsp;</nowiki>}}</div>}}<!--
--></div>

== Шаблон блока страницы 2 ==

<h2 id="mp-tfa-h2" style="margin:0; background:#cef2e0; font-size:120%; font-weight:bold; border:1px solid #a3bfb1; text-align:left; color:#000; padding:0.2em 0.4em;">Введение</h2>


<h2 id="mp-tfa-h2" style="margin:0; background:#cef2e0; font-size:120%; font-weight:bold; border:1px solid #a3bfb1; text-align:left; color:#000; padding:0.2em 0.4em;">Начало/Учебное пособие</h2>


<h2 id="mp-tfa-h2" style="margin:0; background:#cef2e0; font-size:120%; font-weight:bold; border:1px solid #a3bfb1; text-align:left; color:#000; padding:0.2em 0.4em;">Документация</h2>


<h2 id="mp-tfa-h2" style="margin:0; background:#cef2e0; font-size:120%; font-weight:bold; border:1px solid #a3bfb1; text-align:left; color:#000; padding:0.2em 0.4em;">Примеры</h2>


<h2 id="mp-tfa-h2" style="margin:0; background:#cef2e0; font-size:120%; font-weight:bold; border:1px solid #a3bfb1; text-align:left; color:#000; padding:0.2em 0.4em;">FAQ</h2>


<h2 id="mp-tfa-h2" style="margin:0; background:#cef2e0; font-size:120%; font-weight:bold; border:1px solid #a3bfb1; text-align:left; color:#000; padding:0.2em 0.4em;">Литература</h2>


<h2 id="mp-tfa-h2" style="margin:0; background:#cef2e0; font-size:120%; font-weight:bold; border:1px solid #a3bfb1; text-align:left; color:#000; padding:0.2em 0.4em;">Разное/Инструменты</h2>

==Wikimedia colour schemes==
===Wikipedia===
Wikipedia uses this colour scheme on its [[Main Page]]. 
:''Please note that the colour for the border on the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.''
<!-- legacy XHTML table visible with any browser -->
<!-- green blue purple grey-->
{|
| style="border: 1px solid #cef2e0; padding: 1em; margin: auto" bgcolor="#f5fffa" | background:<tt>#f5fffa</tt> border:<tt>#cef2e0</tt> || bgcolor="#cef2e0" | &#160;
| style="border: 1px solid #a3bfb1; padding: 1em; margin: auto" bgcolor="#cef2e0" | background:<tt>#cef2e0</tt> border:<tt>#a3bfb1</tt> || bgcolor="#a3bfb1" | &#160;
|-
| style="border: 1px solid #cedff2; padding: 1em; margin: auto" bgcolor="#f5faff" | background:<tt>#f5faff</tt> border:<tt>#cedff2</tt> || bgcolor="#cedff2" | &#160;
| style="border: 1px solid #a3b0bf; padding: 1em; margin: auto" bgcolor="#cedff2" | background:<tt>#cedff2</tt> border:<tt>#a3b0bf</tt> || bgcolor="#a3b0bf" | &#160;
|-
| style="border: 1px solid #ddcef2; padding: 1em; margin: auto" bgcolor="#faf5ff" | background:<tt>#faf5ff</tt> border:<tt>#ddcef2</tt> || bgcolor="#ddcef2" | &#160;
| style="border: 1px solid #afa3bf; padding: 1em; margin: auto" bgcolor="#ddcef2" | background:<tt>#ddcef2</tt> border:<tt>#afa3bf</tt> || bgcolor="#afa3bf" | &#160;
|-
| style="border: 1px solid #f2e6ce; padding: 1em; margin: auto" bgcolor="#fffaf5" | background:<tt>#fffaf5</tt> border:<tt>#f2e0ce</tt> || bgcolor="#f2e0ce" | &#160;
| style="border: 1px solid #bfb1a3; padding: 1em; margin: auto" bgcolor="#f2e0ce" | background:<tt>#f2e0ce</tt> border:<tt>#bfb1a3</tt> || bgcolor="#bfb1a3" | &#160;
|-
| style="border: 1px solid #abd5f5; padding: 1em; margin: auto" bgcolor="#f1f5fc" | background:<tt>#f1f5fc</tt> border:<tt>#abd5f5</tt> || bgcolor="#abd5f5" | &#160;
| style="border: 1px solid #abd5f5; padding: 1em; margin: auto" bgcolor="#d0e5f5" | background:<tt>#d0e5f5</tt> border:<tt>#abd5f5</tt> || bgcolor="#abd5f5" | &#160;
|-
| style="border: 1px solid #fad67d; padding: 1em; margin: auto" bgcolor="#faf6ed" | background:<tt>#faf6ed</tt> border:<tt>#fad67d</tt> || bgcolor="#fad67d" | &#160;
| style="border: 1px solid #fad67d; padding: 1em; margin: auto" bgcolor="#faecc8" | background:<tt>#faecc8</tt> border:<tt>#fad67d</tt> || bgcolor="#fad67d" | &#160;
|-
| style="border: 1px solid #cccccc; padding: 1em; margin: auto" bgcolor="#fcfcfc" | background:<tt>#fcfcfc</tt> border:<tt>#cccccc</tt> || bgcolor="#cccccc" | &#160;
|}


=== По цветам радуги ===
{|
| style="border: 1px solid #f2e6ce; padding: 1em; margin: auto" bgcolor="#fffaf5" | background:<tt>#fffaf5</tt> border:<tt>#f2e0ce</tt> || bgcolor="#f2e0ce" | &#160;
| style="border: 1px solid #bfb1a3; padding: 1em; margin: auto" bgcolor="#f2e0ce" | background:<tt>#f2e0ce</tt> border:<tt>#bfb1a3</tt> || bgcolor="#bfb1a3" | &#160;
| style="border: 1px solid #ff0000; padding: 1em; margin: auto" bgcolor="#aa0000" | background:<tt>#aa0000</tt> border:<tt>#cc0000</tt> || bgcolor="#cc0000" | &#160;
| style="border: 1px solid #ff0000; padding: 1em; margin: auto" bgcolor="#cc0000" | background:<tt>#cc0000</tt> border:<tt>#ff0000</tt> || bgcolor="#ff0000" | &#160;
|-
| style="border: 1px solid #fad67d; padding: 1em; margin: auto" bgcolor="#faf6ed" | background:<tt>#faf6ed</tt> border:<tt>#fad67d</tt> || bgcolor="#fad67d" | &#160;
| style="border: 1px solid #fad67d; padding: 1em; margin: auto" bgcolor="#faecc8" | background:<tt>#faecc8</tt> border:<tt>#fad67d</tt> || bgcolor="#fad67d" | &#160;
| style="border: 1px solid #ffdd00; padding: 1em; margin: auto" bgcolor="#ddbb00" | background:<tt>#ddbb00</tt> border:<tt>#ffdd00</tt> || bgcolor="#ffdd00" | &#160;
| style="border: 1px solid #ffdd00; padding: 1em; margin: auto" bgcolor="#ddbb00" | background:<tt>#ddbb00</tt> border:<tt>#ffdd00</tt> || bgcolor="#ffdd00" | &#160;
|-
| style="border: 1px solid #fad67d; padding: 1em; margin: auto" bgcolor="#faf6ed" | background:<tt>#faf6ed</tt> border:<tt>#fad67d</tt> || bgcolor="#fad67d" | &#160;
| style="border: 1px solid #fad67d; padding: 1em; margin: auto" bgcolor="#faecc8" | background:<tt>#faecc8</tt> border:<tt>#fad67d</tt> || bgcolor="#fad67d" | &#160;
| style="border: 1px solid #ffff00; padding: 1em; margin: auto" bgcolor="#dddd00" | background:<tt>#dddd00</tt> border:<tt>#ffff00</tt> || bgcolor="#ffff00" | &#160;
| style="border: 1px solid #ffff00; padding: 1em; margin: auto" bgcolor="#dddd00" | background:<tt>#dddd00</tt> border:<tt>#ffff00</tt> || bgcolor="#ffff00" | &#160;
|-
| style="border: 1px solid #cef2e0; padding: 1em; margin: auto" bgcolor="#f5fffa" | background:<tt>#f5fffa</tt> border:<tt>#cef2e0</tt> || bgcolor="#cef2e0" | &#160;
| style="border: 1px solid #a3bfb1; padding: 1em; margin: auto" bgcolor="#cef2e0" | background:<tt>#cef2e0</tt> border:<tt>#a3bfb1</tt> || bgcolor="#a3bfb1" | &#160;
| style="border: 1px solid #00ff00; padding: 1em; margin: auto" bgcolor="#00dd00" | background:<tt>#00dd00</tt> border:<tt>#00ff00</tt> || bgcolor="#00ff00" | &#160;
| style="border: 1px solid #00ff00; padding: 1em; margin: auto" bgcolor="#00dd00" | background:<tt>#00dd00</tt> border:<tt>#00ff00</tt> || bgcolor="#00ff00" | &#160;
|-
| style="border: 1px solid #abd5f5; padding: 1em; margin: auto" bgcolor="#f1f5fc" | background:<tt>#f1f5fc</tt> border:<tt>#abd5f5</tt> || bgcolor="#abd5f5" | &#160;
| style="border: 1px solid #abd5f5; padding: 1em; margin: auto" bgcolor="#d0e5f5" | background:<tt>#d0e5f5</tt> border:<tt>#abd5f5</tt> || bgcolor="#abd5f5" | &#160;
| style="border: 1px solid #00ffff; padding: 1em; margin: auto" bgcolor="#00dddd" | background:<tt>#00dddd</tt> border:<tt>#00ffff</tt> || bgcolor="#00ffff" | &#160;
| style="border: 1px solid #00ffff; padding: 1em; margin: auto" bgcolor="#00dddd" | background:<tt>#00dddd</tt> border:<tt>#00ffff</tt> || bgcolor="#00ffff" | &#160;
|-
| style="border: 1px solid #cedff2; padding: 1em; margin: auto" bgcolor="#f5faff" | background:<tt>#f5faff</tt> border:<tt>#cedff2</tt> || bgcolor="#cedff2" | &#160;
| style="border: 1px solid #a3b0bf; padding: 1em; margin: auto" bgcolor="#cedff2" | background:<tt>#cedff2</tt> border:<tt>#a3b0bf</tt> || bgcolor="#a3b0bf" | &#160;
| style="border: 1px solid #0000FF; padding: 1em; margin: auto" bgcolor="#0000dd" | background:<tt>#0000dd</tt> border:<tt>#0000FF</tt> || bgcolor="#0000FF" | &#160;
| style="border: 1px solid #0000FF; padding: 1em; margin: auto" bgcolor="#0000dd" | background:<tt>#0000dd</tt> border:<tt>#0000FF</tt> || bgcolor="#0000FF" | &#160;
|-
| style="border: 1px solid #ddcef2; padding: 1em; margin: auto" bgcolor="#faf5ff" | background:<tt>#faf5ff</tt> border:<tt>#ddcef2</tt> || bgcolor="#ddcef2" | &#160;
| style="border: 1px solid #afa3bf; padding: 1em; margin: auto" bgcolor="#ddcef2" | background:<tt>#ddcef2</tt> border:<tt>#afa3bf</tt> || bgcolor="#afa3bf" | &#160;
| style="border: 1px solid #ff00ff; padding: 1em; margin: auto" bgcolor="#dd00dd" | background:<tt>#dd00dd</tt> border:<tt>#ff00ff</tt> || bgcolor="#ff00ff" | &#160;
| style="border: 1px solid #ff00ff; padding: 1em; margin: auto" bgcolor="#dd00dd" | background:<tt>#dd00dd</tt> border:<tt>#ff00ff</tt> || bgcolor="#ff00ff" | &#160;
|-
| style="border: 1px solid #cccccc; padding: 1em; margin: auto" bgcolor="#fcfcfc" | background:<tt>#fcfcfc</tt> border:<tt>#cccccc</tt> || bgcolor="#cccccc" | &#160;
|}

{|
| style="border: 1px solid #cccccc; padding: 1em; margin: auto" bgcolor="#CCCCFF" | background:<tt>#CCCCFF</tt> border:<tt>#cccccc</tt> || bgcolor="#cccccc" | &#160;
|}

===Commons===
The Wikimedia Commons uses this colour scheme on [[:commons:Main Page]] and [[:commons:Help:Contents]].
<!-- Left column 3 blue -->
{| cellspacing="0" cellpadding="0" style="margin:0em 0em 1em 0em; width:100% background-color:white"
| style="width:50%; vertical-align:top; border:1px solid #abd5f5; background-color:#f1f5fc;" |
<div style="border-bottom:1px solid #abd5f5; background-color:#d0e5f5; padding:0.2em 0.5em 0.2em 0.5em; font-size:110%; font-weight:bold;">background colour: #d0e5f5</div>
<div style="border-bottom:1px solid #abd5f5; padding:0.4em 1em 1em 1em;">
background colour: #f1f5fc<br />
border colour: #abd5f5</div>
| style="padding:0em 0.5em 0em 0.5em;" |
<!-- Right column 3 orange -->
| style="width:50%; vertical-align:top; border:1px solid #fad67d; background-color:#faf6ed;" |
<div style="border-bottom:1px solid #fad67d; background-color:#faecc8; padding:0.2em 0.5em 0.2em 0.5em; font-size:110%; font-weight:bold;">background colour: #faecc8</div>
<div style="border-bottom:1px solid #fad67d; padding:0.4em 1em 1em 1em;">
background colour: #faf6ed<br />
border colour: #fad67d</div>
|}

== Aesthetic ideas ==
(A list of aesthetic implementations or concepts.)
*'''Simplicity''' - some users advocate the abolition of color altogether. We disagree with this, but we do acknowledge their point: do not employ anything that does not serve a purpose. (There is, however, a clear need for color: the main page uses it to allow the user to focus onto one aspect of a relatively "busy" space, and notices use it to bring attention to themselves.)

With regard to notices, tables, and similar elements:
*'''A very light background''' - many of the most popular websites on the internet use this, and with good reason. Dark backgrounds look inactive ("dead"), brightly-colored backgrounds cause eye-strain, and both are generally unpleasant. 
*'''A thin and slightly darker border''' - One very good looking use of colors is a light colored background, with a 1px border that is a darker version of that same color. 

Wikipedia uses the following color scheme on its new main page:

<div style="background:#F5FFFA; border: 1px solid #CEF2E0; padding: 1em; margin: auto; width: 45%; float:left;">
 <div style="margin:0;background-color:#cef2e0;font-family:sans-serif;font-size:120%;font-weight:bold;border:1px solid #a3bfb1;text-align:left;color:#000;padding-left:0.4em;padding-top:0.2em;padding-bottom:0.2em;">Title (#cef2e0/#a3bfb1)</div> this is an example of black text with color applied to its background and border<br />(#F5FFFA/#CEF2E0)</div>
<div style="background:#F5FAFF; border: 1px solid #CEDFF2; padding: 1em; margin: auto; width: 45%; float:left;"><div style="margin:0;background-color:#cedff2;font-family:sans-serif;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding-left:0.4em;padding-top:0.2em;padding-bottom:0.2em;">Title (#cedff2/#a3b0bf)</div> this is an example of black text with color applied to its background and border<br />(#F5FAFF/#CEDFF2)</div>
<br style="clear:both;">
<div style="background:#FCFCFC; border: 1px solid #CCC; padding: 1em; margin: auto; width: 45%; float:left;"><div style="margin:0;background-color:#FCFCFC; font-family:sans-serif;font-size:120%;font-weight:bold;border:1px solid #FCFCFC;text-align:left;color:#000;padding-left:0.4em;padding-top:0.2em;padding-bottom:0.2em;">Title (#FCFCFC/#FCFCFC)</div> this is an example of black text with color applied to its background and border<br />(#FCFCFC/#CCC)</div>
<div style="background:#FAF5FF; border: 1px solid #DDCEF2; padding: 1em; margin: auto; width: 45%; float:left;"><div style="margin:0;background-color:#DDCEF2;font-family:sans-serif;font-size:120%;font-weight:bold;border:1px solid #AFA3BF;text-align:left;color:#000;padding-left:0.4em;padding-top:0.2em;padding-bottom:0.2em;">Title (#DDCEF2/#AFA3BF)</div> this is an example of black text with color applied to its background and border<br />(#FAF5FF/#DDCEF2)</div>
<br clear="all">


Color scheme from [[:Commons:Help:Contents]]:

<div style="background:#faf6ed; border: 1px solid #fad67d; padding: 1em; margin: auto; width: 45%; float:left;"><div style="margin:0;background-color:#faecc8;font-family:sans-serif;font-size:120%;font-weight:bold;border:1px solid #fad67d;text-align:left;color:#000;padding-left:0.4em;padding-top:0.2em;padding-bottom:0.2em;">Title</div> this is an example of black text with color applied to its background and border </div>
<div style="background:#F1F5FC; border: 1px solid #ABD5F5; padding: 1em; margin: auto; width: 45%; float:left;"><div style="margin:0;background-color:#D0E5F5;font-family:sans-serif;font-size:120%;font-weight:bold;border:1px solid #ABD5F5;text-align:left;color:#000;padding-left:0.4em;padding-top:0.2em;padding-bottom:0.2em;">Title</div> this is an example of black text with color applied to its background and border </div>
<br style="clear:both;">


Other color schemes:

<div style="background:#CFEFCF; border: 1px solid #000; padding: 1em; margin: auto; width: 45%; float:left;"> this is an example of text with color applied to its background and border </div>
<div style="background:#6EB4EB; border: 1px solid #000; padding: 1em; margin: auto; width: 45%; float:left;"> this is an example of text with color applied to its background and border </div>
<br style="clear:both;">

Wikipedia used this color scheme on its old main page:

<div style="background:#fff3f3; border: 1px solid #ffc9c9; padding: 1em; margin: auto; width: 45%; float:left;"> this is an example of text with color applied to its background and border </div>
<div style="background:#f0f0ff; border: 1px solid #c6c9ff; padding: 1em; margin: auto; width: 45%; float:left;"> this is an example of text with color applied to its background and border </div>
<br style="clear:both;">


__NOTOC__