Блочная верстка сайта (верстка с помощью DIV и CSS)
Обычно, когда разрабатывается дизайн сайта, он сначала рисуется в Photoshop, GIMP или любом другом графическом редакторе и только после этого с макета дизайн переносят на html и css (иногда на flash, но у нас не тот случай). Вот этот перенос и называется версткой сайта, о которой я сегодня начну рассказывать.
Я расскажу, как верстать шаблон на примере простого макета:
Как видите, наш макет ужасно приметивен. Он состоит из двух сайдбаром, шапки, подвала и места под текст.
Теперь начнем его верстать.
Первым делом создаем html-файл, в котором будут храниться эти блоки и ссылка на CSS нашего шаблона. Первым делом создаем div с id="main" (или любым другим, который вы будете использовать в вашей таблице стилей). В этом блоке будут хранится все остальные блоки (шапка, подвал, сайдбары и текст). Теперь, внутри этого тега, создаем еще 5 div`ов и каждому присваеваем свой уникальный id (например: header, sidebar1,sidebar2,text,footer). Между первыми 4 блоками и подвалом добавьте еще один блок, у которого class="clear"
В результате у вас должен быть примерно такой html-файл:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="style.css"> </link></head> <body> <div id="main"> <div id="header"> Шапка </div> <div id="sidebar1"> Сайдбар 1 </div> <div id="sidebar2"> Сайдбар 2 </div> <div id="text"> Это будет центральный блок с текстом </div> <div class="clear"></div> <div id="footer"> Ну а это наш подвал </div> </div> </body> </html>
Сохраняем файл и открываем наш файл стилей (style.css)
В нем первым делом создаем пустые описания наших классов и id:
#main { } #header { } #text { } #sidebar1 { } #sidebar2 { } #footer { } .clear { }
Теперь начнем все это заполнять.
Сначала пропишем стандартные настройки тега , вдруг есть браузера, у которых фон по умолчанию черный:
body
{
margin:0;
padding:0;
color:#000;
background:#fff
}
У div с id=main у нас ширина должна быть 980px (т.к. на макете, с которого мы верстаем, она 980). Также он должен быть у нас по центру, если ширина экрана пользователя больше 980px. Поэтому мы это и напишем в полу #main { }:
#main
{
position:relative; //сообщаем браузеру, что мы хотим позиционировать элемент
margin:0 auto; //выравниеваем блок по центру
width:980px;
background:#000; //мы же хотим увидеть результат наших действий;)
}
Сохраняем CSS и открываем html-файл в каком-нибудь браузере. Все, что у нас написано, должно быть выравнено по центру.
Отлично, теперь настраиваем шапку. Она у нас имеет высоту в 300px и зеленый фон. Напишем это:
#header
{
background:green;
height:300px;
width:100% //шапка занимает все 980px в ширину
}
Установим наш блок с текстом по центру:
#text
{
background:#999; //серый фон
position:relative; //опять выравниеваем по центру
margin:0 auto;
width:600px;
}
Теперь настраиваем сайдбары. Они оба шириной 190px c желтым фоном. Первый должен плавать слева, второй справа. Напишем это:
#sidebar1
{
width:190px;
background:yellow;
float:left;
}
#sidebar1
{
width:190px;
background:yellow;
float:right;
}
Теперь нам осталось настроить только подвал и класс clear, который нам нужен, чтобы "сообщить" браузеру о том, что у нас закончились блок с текстом и сайдбары
.clear
{
clear:both;
}
Вместо div`а с этим классом можно использовать тег
, но так делать не рекомендуют.
Теперь подвал:
#footer
{
background:red;
width:100%;
height:100px;
}
В результате должна получится вот такая css:
body { margin:0; padding:0; color:#000; background:#fff } #main { position:relative; margin:0 auto; width:980px; } #header { height:300px; background:green; } #text { margin:0 auto; background:#999; width:600px; } #sidebar1 { width:190px; background:yellow; float:left; } #sidebar2 { width:190px; background:yellow; float:right; } #footer { background:red; width:100%; height:100px; } .clear { clear:both; }
Вот, вроде, и сверстан сайт. Но вот незадача, у нас сайдбары не прижаты к подвалу, а сам подвал не прижат к низу страницы. О том, как это поправить расскажу в следующий раз.
Объединяем twitter и jabber
Раз уж пошла речь о twitter (см. предыдущий пост), то расскажу, как настроить транспорт из twitter`а в jabber. Если кто еще не знает, то jabber - что-то типа ICQ, но бесплатный и открытый. Если у вас стоит одна из этих программ: Google Talk,Я Онлайн, Qip Infium, то у вас точно есть Jabber. Но мой пост не о jabber, а о том, как настроить транспорт из twitter в jabber, поэтому перейдем к делу.
Для настройки особо ничего не требуется. Надо лишь зайти сюда и нажать Sign in with Twitter, вас перебросит на сайт твиттера, спрашивающего вот это:
Allow Tweet.IM access?
Отвечаем Allow и нас возвращает обратно. Там выбираем тип вашего jabbera (Google Talk или другой), пишем его и готово. Теперь запускаем ваш jabber-клиент. К вам должен был добавиться новый контакт - это и есть ваш twitter. Пишем сообщения этому контакту. они транспортируются в ваш твиттер.
Немного про команды для управления:
Во-первых, есть такая команда, как help. Что она делает, думаю понятно.
Во-вторых, вот список большинства других команд:
- tm mode on/off/auto - включает, выключает получение твитов или устанавливает их получение в зависимости от вашего статуса
- ts - показывает значение предыдущего пункта
- p имя - информация о пользователе
- f имя - follow пользователя
- u имя - unfollow
- d имя сообщение - отправить личное сообщение пользователю
Подробнее можно узнать на сайте транспорта в разделе FAQ
Полезные ссылки:
- официальный сайт jabber`а
- "русский" jabber
- что такое jabber
Настраиваем кросспостинг в Twitter
У меня наконец-то дошли руки настроить кросспостинг с сайта в Twitter. Способ, который я расскажу, будет работать с любым сайтом, поддерживающим RSS, в том числе и с WordPress, Drupal, Joomla, PHP Nuke и т.д.
Для настройки кросспостинга в twitter идем на сайт и регистрируемся на нем. Затем нажимаем Create New Feed, прописываем заголовок и адрес вашей RSS-ленты, в Advanced Settings выбираем, как часто обновлять ленту, представление ссылки и содержимое поста, отправляемого в twitter. Затем нажимаем далее и там выбираем twitter, далее следуем простым инструкциям и через 2 минуты у вас будет настроен кросспостинг в twitter.
Вот и все, на настройку кросспостинга ушло всего около 10 минут.
А вот и twitter-лента моего сайта:
P.S. А вам нужны детские коляски?
Проблемы с отправкой комментариев в WordPress
Если у вас проблемы с отправкой комментариев в WordPress, то возможно у вас в теме не правильно прописана информация об ID поста, к которому нужно отправить комментарий, а точнее вот эта строчка:
<input type="hidden" name="comment_post_ID" value="<?php echo $id ?/>" />
В этой строчке хранится информация, к какому посту мы должны отправить комментарий. В этой форме проблема в том, что переменной $id не существует, поэтому комментарий будет отправлен к случайному посту. Поэтому, если не уверены, что в вашей теме есть переменная $id, то замените ее на вот эту строчку $post->ID.
После этого комментарии должны будут отправляться нормально.
А вот, если кому надо, полная форма отправки комментариев для темы wordpress:
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<div>
< ?php if ( $user_ID ) : ?>
<p>Вы вошли как <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
< ?php echo $user_identity; ?></a>.
<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout"
title="Выйти">Выйти?</a></p>
< ?php else : ?>
<div style="text-align:justify">
<label for="author">Имя < ?php if ($req) echo "(обязательно)"; ?> :
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?/>" size="27" tabindex="1" />
</label>
<br />
<label for="email">E-mail < ?php if ($req) echo "(обязательно)"; ?> :
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?/>" size="27" tabindex="2" />
</label>
<br />
<label for="url">Сайт:
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?/>" size="27" tabindex="3" />
</label></div>
<br />
< ?php endif; ?>
<!--<p><small><strong>XHTML:</strong>
You can use these tags: < ?php echo allowed_tags(); ?>
</small>-->
<label for="comment">Комментарий :<br /></label>
<textarea name="comment" cols="50" rows="8" tabindex="4">
</textarea>
<br />
<input name="submit" type="submit" id="submit" tabindex="5" value="Отправить" />
< ?php comment_id_fields(); ?>
<input type="hidden" name="comment_post_ID" value="<?php echo $post-/>ID; ?>" />
< ?php do_action('comment_form', $post->ID); ?>
</div>
</form>P.S. Если кто хочет купить б/у машину, то специально для вас продажа поддержанных автомобилей
Текст с тенью при помощи CSS
Еще одно замечательное свойство CSS3 text-shadow. Оно позволяет создавать тень для текста.
Это свойство имеет 4 параметра:
Первый параметр отвечает за смещение тени по горизонтали. Положительное значение - смещение влево, а отрицательное - вправою
Следующий, второй параметр, указывает смещение по вертикали. Положительные значение - смещение вниз, отрицательное - наверх.
Третий параметр определяет размывание тени.
И последний параметр указывает на цвет тени.
Последние два параметра не обязательны.
Примеры:
Размытый текст:
Текст с зеленым свечением:
Также можно создавать двойную тень:
А вот, наример, текст с 25 тенями, в Firefox, Chrome, Konqueror отображается нормально, в Opera не правильно
Вот так быстро, просто и легко можно создавать красивые эффекты при написании текста
P.S. Хотите больше знать про Unix-системы? Тогда можете посмотреть бесплатные курсы Linux
Обновился дизайн!
Обновился дизайн. Пока что имеются баги. Всем пользователям Internet Exporer рекомендую сменить браузер на Mozilla Firefox или Google Chrome
Рамки с круглыми краями и прозрачность в CSS.
Круглые края с помощью CSS
Существует множество способов создания рамок с круглыми краями. И в CCS3 наконец-то включили такую возможность. Разумеется, всеми любимый MS Internet Explorer об этом до сих пор не знает, ну и пошел лесом, все равное его у меня нет;)
Создание рамок в CSS3 очень просто. Правда пока приходится писать 3 варианта кода, ну это не страшно.
Вот CSS свойства для создания закругленных рамок:
| CSS | Gecko (Mozilla...) | WebKit (Safari, Konqueror, Arora, Google Chrome и т.д.) |
| border-radius | -moz-border-radius | -webkit-border-radius |
| border-top-right-radius | -moz-border-radius-topright | -webkit-border-top-right-radius |
| border-bottom-right-radius | -moz-border-radius-bottomright | -webkit-border-bottom-right-radius |
| border-bottom-left-radius | -moz-border-radius-bottomleft | -webkit-border-bottom-left-radius |
| border-top-left-radius | -moz-border-radius-topleft | -webkit-border-top-left-radius |
Если у вас нормальный браузер, то таблица выше должна быть в рамке с закругленными углами. Я думаю, объяснять значения свойств не надо, в них и так все написано. Радиус рамки можно задавать в px, em, pt и т.д.
Прозрачность с помощью CSS
Еще одно свойство CSS3 - прозрачность. Позволяет делать элемент прозрачными и полупрозрачными. Как уже говорилось, MS Internet Explorer об этом свойстве не знает и его не поддерживает.
Задается свойство очень просто:
opacity: значение от 0 до 1;
1 - полная непрозрачность, 0 - полная прозрачность
А ниже полностью прозрачный текст:
Можете попробовать выделить строчку выше, скопировать ее в блокнот и убедиться в этом;)
P.S.
Хотите сделать сайт, а хостинг еще не выбрали. Этот хостинг для сайтов специально для вас.
P.P.S.
Вот здесь вы сможете узнать все про социальные сети России
Коллекция обоев с котами и кошками.
Большая коллекция (140 штук) различных обоев с котами и кошками. Есть как домашние представители семейства кошачьих, так и всякие дикие: львы, гепарды, барсы и т.д.
Количество: 143
Разрешение: от 1280x800 до 2560x1600 (большинство 1600x1200)
Скачать:
Пишем рандомайзер (генератор случайных чисел) на perl`е
21.02.2010. perl, Программирование
0Очень простой урок о том, как написать элементарный perl-web-скрипт, генерирующий случайные числа.
CGI-скрипт должен начинаться с указания программы, которая его обрабатывает. Поэтому в первой строчке как раз и напишем это:
#!/usr/bin/perl
Теперь сообщим, что мы хотим выводить html-документ и создадим экземпляр класса для получения параметров, переданных через браузер
use CGI; use CGI::Carp qw/fatalsToBrowser/; $cgi=new CGI; print "Content-type:text\/html\n\n";
Первые три строчки - создание экземпляра класса, а последняя сообщает, что мы будем выводить html-документ
Получать данные для скрипта будем с помощью метода GET. Т.е. все переменные будут передаваться нам через строку браузера после адреса скрипта. Передача осуществляется примерно так: site.ru/script.cgi?a=10&b=12
Теперь, чтобы получить значения a и b надо создать 2 переменные и "вытащить" оттуда эти данные:
$x=$cgi->param('a'); $y=$cgi->param('b');
Вот здесь мы записали в x и y переданные скрипту a и b.
Что-бы не передавать параметры вручную создадим форму:
print "<form action=\"index.cgi\" method=\"get\"><br />Vvedite a: <input type=\"text\" value=$x name=\"a\"/> Vvedite b:<input type=\"text\" value=$y name=\"b\"/> <input type=\"submit\"/><br /></form>";
И теперь выведем случайное число от a до b:
print int(rand($x)+$y);
Вот и все. Простой скрипт, генерирующий случайные числа сделан. Загружаем его на сервер и любуемся результатом.
Полные код:
#!/usr/bin/perl use CGI; use CGI::Carp qw/fatalsToBrowser/; $cgi=new CGI; print "Content-type:text\/html\n\n"; $x=$cgi->param('a'); $y=$cgi->param('b'); print "<form action=\"index.cgi\" method=\"get\"><br />Vvedite a: <input type=\"text\" value=$x name=\"a\"/> Vvedite b:<input type=\"text\" value=$y name=\"b\"/> <input type=\"submit\"/><br /></form>"; print int(rand($x)+$y);
Установка web-сервера Apache в Kubuntu
Установка и настройка Apache в Kubuntu не занимает много времени.
Устанавливаем Apache2
sudo -s
apt-get install apache2
Сервер установлен и готов к работе;)
Ставим MySQL
apt-get install mysql-server mysql-client
В процессе установки попросят выбрать пароль для базы данных. Установите его и не потеряйте.
Устанавливаем и настраиваем perl
Если, вдруг, у вас не стоит perl (чего быть не должно, устанавливается обычно с системой), то ставим его:
apt-get install perl
Теперь настраиваем.
Первым делом добавляем в файл /etc/apache2/httpd.conf (nano /etc/apache2/httpd.conf) эту строчку:
AddHandler cgi-script .sh .pl .cgi
Затем переходим в папку cd /etc/apache2/sites-available
cd /etc/apache2/sites-available
Там должен быть файл с именем default. Открываем его.
nano default
Находим строчку ScriptAlias /cgi-bin/ путь и меняем на путь к папке (только запомните путь, который был до этого), в которой мы хотим хранить perl-скрипты. Например, на /var/www
Теперь, ищем все строчки с путем, запомненным нами и меняем в них путь на новый.
Теперь ваши perl-скрипты доступны по адресу localhost/cgi-bin/
Если мы хотим хранить их не только в этой папке, то надо в блок <VirtualHosts *:80> </VirtualHosts> добавить вот такие строчки:
<Directory "путь">
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Options ExecCGI
Order allow,deny
allow from all
</Directory>
Устанавливаем php
apt-get install php5 libapache2-mod-php5 php5-common php5-cli php5-cgi php5-mysql
Устанавливаем phpMyAdmin
apt-get install phpmyadmin
Для доступа к phpmyadmin вводим в браузере localhost/phpmyadmin
После всего этого перезагружаем apache2 (/etc/init.d/apache2 restart) и радуемся жизи.
Несколько советов по Kubuntu
Настройка WINE (установка шрифтов, directx, кодеков, библиотек и т.д.)
Для wine существует очень удобный скрипт, который позволяет устанавливать множество полезных вещей
Для установки этого скрипта открываем консоль и вводим:
wget http://www.kegel.com/wine/winetricks
Теперь есть несколько вариантов использования скрипта.
Первый вариант. Вводим sh winetricks и выбираем все, что хотим установить.
Второй вариант. Вводим sh winetricks что_установить.
Для установки DirectX, основных библиотек, кодеков и шрифтов достаточно выполнить такую команду:
sh winetricks corefonts directx9 dotnet30 flash vcrun2005 vcrun2008
После этого при небольшой доле везения у вас должны работать большинство windows-программ.
Устанавливаем множество различных виджетов для plasma (для kde4)
Открываем консоль и вводим
sudo apt-get install plasma-widget-*
После этого будут установлены все виджеты, которые есть в ваших репозитах
Улучшаем внешний вид окон (настройка kwin)
Вводим
sudo apt-get install kwin
sudo apt-get install kwin-*
После этого в Настройках -> Внешний вид -> Окна появится множество новых тем для оформления окон.
"Улучшаем Bluetooth"
Единственное, чего мне удалось добиться от стандартного bluetooth-мененджера в kde - это передача файлов. Поэтому, если вам нужно больше, имеет смысл поставить blueman:
sudo add-apt-repository ppa:blueman/ppa
sudo apt-get update
sudo apt-get install blueman
Этот менеджер имеет множество различных возможностей, но к сожалению заточен под GNOME, поэтому не все и не с первого раза удается настроить. Но стандартный менеджер даже этого не может.
Если у вас есть bluetooth-стереогарнитура и вы хотите её пользоваться (если у вас не работает bluetooth-гарнитура), то устанавливаем pulseaudio (если не стоит) и pulseaudio-module-bluetooth
sudo apt-get isntall pulseaudio, pulseaudio-module-bluetooth,paman
И в настройках мультимедиа ставим pulseaudio в самый верх, затем просто соединяем гарнитуру с компьютером при помощи blueman. Если сразу не заработает, то в Kickoff ищем регулятор громкости pulseaudio и там в конфигурация устанавливаем гарнитуре A2DP профиль и в проигрывание ставим гарнитуры на проигрывание.
Генерация паролей в Linux
Для Linux существует очень удобная программа для генерации паролей (и не только, я с ее помощью придумал имя для компьютера;)
Устанавливаем:
sudo apt-get install pwgen
Генерируем пароль:
pwgen кол-во символов
Если не хотите, чтобы в пароле были цифры:
pwgen -0 кол-во символов
Про остальные параметры читайте man:
man pwgen
Нужен аналог Far`а, Total Commandera и т.д.
sudo apt-get install mc
Настройка тачпада (synaptics)
sudo apt-get gsynaptics
gsynaptics
P.S.
Прикольные демотиваторы все-таки еще остались
Снова CSS. Шрифты, форматирование, позиционирование
Шрифты
Для настройки шрифтов существует свойство font:
font-family: шрифты или их семейства.
Пример:
font-family:arial, serif; //делает основным шрифт Arial, если он отсутствует, то шрифты из группы serif
font-size - устанавливает размер шрифта
font-size:12pt; // устанавливаем размер шрифта в 12pt
font-size:50px;
font-style: style; // стиль шрифта
font-style:normal - обычный текст
font-style:italic - курсив
- font-style: oblique - наклонный шрифт.
Как всегда, все это можно задавать сразу в font:
font: times 16pt italic;
Форматирование
text-align: выравнивание. Может быть center, left, right, justify (по ширине)
text-decoration - "украшения" текста. Различные подчеркивания, мерцания и т.д.
blink - мигание текста
underline - подчеркнутый текст
line-through - перечеркнутый текст
overline - надчеркнутый текст (линия сверху)
none - отсутствует.
Позиционирование
float - устанавливает обтекание элемента
right - элемент выравнивается по правому краю, обтекание слева
left - наоборот
inherit - по умолчанию
none - обтекание отсутствует
clear - убирает обтекание
both - со всех сторон
right - справа
left - cлева
width и height:
Устанавливает ширину и высоту блока. Кроме этого возможны:
min-width & min-height - минимальная ширина и высота
И
max-width & max-height - максимальные ширина и высота
position: как позиционировать.
Устанавливает, как позиционировать элемент.
absolute - позиционировать относительно окна, а не родительских элементов
fixed - почти тоже самое, при прокрутке остается на месте
relative - позволяет позиционировать элемент. По умолчанию элементы нельзя позиционировать
static - по умолчанию, элементы не позиционируются
z-index - устанавливает виртуальный слой, в котором находится элемент. Больший номер слоя соответствует более верхнему слою
overflow - сообщает браузеру, что делать, если содержимое элемента не влезает
visible - делает его видимым, границы объекта игнорируются
auto - при переполнение появляются полосы прокрутки
hidden - все что не влезло идет лесом, т.е. исчезает
scroll - все время есть полосы прокрутки
Другое
Если вы хотите, чтобы какое-то свойство использовалось при возникновление конфликтом, то можно использовать ключевое слово !important. Пишется оно после задания свойства до ;
color: red !important;
Можно задавать специальные свойства для элементов, если на них навели мышь. Для этого после имени класса, id, имени тега надо написать :hover
a:hover
{
}
P.S. Любите ужастики? Тогда вам будет интересен фильм человек-волк
Рисуем сердце в GIMP
Сегодня я расскажу, как можно нарисовать сердце в GIMP.
Как всегда, первым делом создаем квадратное изображение 400x400 пикселей. Затем выбираем инструмент контуры (или нажимаем B). Отмечаем точку с координатами 200 по X и 50-75 по y. Затем отмечаем вторую точку с координатами 200 и 340-360. Должна получиться ровная линия. Теперь берем линию и придаем ей очертания половинки сердца (хватаем за точку на линии и уводим влево):
Теперь создаем выделение из контура (в меню контура) и заливаем его любым цветом (не белым) и отражаем выделение. После этого заливаем новое выделение тем же цветом и с помощью инструмента выделение по цвету выделяем все "сердце".
Теперь берем два схожих оттенка красного (например, как на рисунке выше) и заливаем градиентом черное сердце. С формой градиента можно поэкспериментировать, я выбрал очертания (сфера). В результате получается такое изображение:
Теперь применяем Гаусово размывание. Дублируем слой, устанавливаем смешивание "Затемнение" и прозрачность процентов на 60. Еще раз дублируем слой. Выделение не снимаем. Идем в фильтры->визуализация->облака->сплошные облака. Настраиваем как-нибудь так:
С параметрами можно поэкспериментировать..
Смешивание устанавливаем в "Рассеянный свет", прозрачность 100%. Дублируем еще раз слой. Параметры смешивания не трогаем. Должно получится что-то типа этого:
Теперь можно применить к изображению различные фильтры. Я применил, как всегда, Гауссово размывание, сглаживание, имитацию масляной краски. Сводим изображение. Надеюсь у вас выделение сердца все еще сохранено, иначе выделяем по белому цвету и инвертируем. Теперь последний шаг. Идем в фильтры->свет и тень->отбрасываемая тень. Получаем тень. При желании, тень можно нарисовать и вручную. Для этого дублируем слой, рисуем круг под сердцем и заполняем его черным цветом, затем настраиваем прозрачность, чтоб появилась тень.
После всего этого я еще раз применил Гауссово размывание, повысил резкость, и немного подкорректировал кривые. Получилось вот такое сердечко:
P.S. А вы уже познакомились с web 2.0?
Еще немного CSS. Поля и отступы.
С помощью CSS можно задавать поля и отступы в документе.
Отступы:
Отступы необходимы для того, чтобы сообщить, насколько необходимо сдвинуть данный блок относительно родительского элемента (если таковой отсутствует, то относительно края окна).
Способы задания отступа:
Можно задать отступ от каждой стороны по отдельности:
margin-top: n px; - отступ сверху на n пикселей (кроме пикселей можно задавать проценты, пункты и т.д.)
margin-bottom: n px; - аналогично, снизу
margin-right: n px; - отступ справа
margin-left: n px; - отступ слева.
Кроме того, можно задавать просто с помощью свойства margin:
margin: n px; - отступы со всех четырех сторон
margin: y px x px; - отступ снизу и сверху на y px, отступ справа и слева на x px
margin: a b c d; - установка отступа от верха, затем права, затем низа, затем лева
Поля
Поля задают внутренние отступы в элементе. Такие поля аналогичны полям в книге или тетрадке.
Задание полей ничем не отличается от задание отступов, за исключением замены слова margin на слово padding
Примеры задания отступов и полей:
.text
{
margin: 10px; //отступы в 10px
padding: 5px; // поля 5 пикслей
}
p
{
margin-left:5px;
margin-top:1px;
padding: 5px 15px;
}
Продолжение про CSS следует
P.S. Нашел сайт, откуда скоро можно будет скачать фильм “Алиса в стране чудес”
UPD.
Основные свойства CSS.
Фон
- background-color: цвет - задает цвет фона. Может быть задан в формате RGB (#XXXXXX или #XXX), или именем цвета (black, green, gray)
- background-image: url('link_for_image') - устанавливает фоновое изображений.
- background-attachment: fixed or scroll - сообщает браузеру, надо ли прокручивать фоновое изображение или оно должно оставаться на месте
- background-position: выравнивание по горизонтали (left,right,center) выравнивание по вертикали (top,bottom)
- background-repeat: как повторять. Может быть repeat-x, repeat-y, no-repeat, repeat (повторять по горизонтали, по вертикали, не повторять, повторять по горизонтали и вертикали)
- background: параметры. Объединяет предыдущие свойства. То есть, вместо задания их по отдельности можно задать все параметры сразу через пробел. Например, background: url('aaaa.jpg') #FFE repeat;
Границы (Край)
Задание границы в css состоит из нескольких частей. Во-первых, граница может быть правой (right), левой (left), верхней (top) и нижней (bottom). Также любая граница имеет несколько свойств: цвет (color), стиль границы (style), толщина границы (width).
Имя свойства строится из всего вышеперечисленного:
border-положение-свойство:
Если пропустить положение, то свойство будет применяться ко всем границам. Кроме этого, можно как в фоне задавать сразу несколько свойств. Тогда значения свойств перечисляются через пробел:
border-top:1px solid black; - верхняя граница имеет толщину в один пиксель, она черного цвета и непрерывная
Возможные значения свойств:
color - как всегда, цвет в RGB формате или в виде имени цвета.
color:red; color:#FED; color:#13F29E; - три варианта задания цвета.
width - тоже не особо интересный параметр. Определяет ширину границы. Задается в пикселях.
style- самый интересный параметр, определяет вид границы
- style:dotted - пунктирная граница
- style:dashed - тоже пунктирная, пунктир чуть больше
- style:solid - непрерывная линия
- style:double - двойная непрерывная линия
Примеры:
border:2px solid green; - задает зеленую границу в 2 пикселя
border-left-style: dotted; - делает левую границу пунктирной
border-right: double 10px #666; устанавливает ширину правой границы в 10px, стиль - двойная линия и цвет #666 (если не ошибаюсь, то серый)
Продолжение следует!!!
UPD:
Что такое CSS?
Что такое CSS?
CSS, или каскадные таблицы стилей (Cascading Style Sheets) - это способ описания внешнего вида документа. Обычно используется вместе с html и xml. Основой задачей CSS является придание документу\странице\сайту своего собственного стиля, начиная от цвета и размера шрифта и заканчивая всевозможными эффектами, типа прозрачности, закругленных углов таблицы и т.д. Причиной к создание CSS послужила необходимость управлять внешним видом web-страниц и теперь эта технология используется в большинстве сайтов.
Синтаксис CSS очень прост. Любой CSS состоит из правил. Правило состоит из селектора и описания.
Селектор отвечает за то, к чему будут применены свойства в правиле. Селектор может быть именем тега, специальным классом или уникальным идентификатором. Также один селектор может зависеть от другого. Например, у нас есть тег <em>. С помощью CSS можно указать, что, например, жирный текст внутри этого тега должен быть не жирным, а красным. Это реализуется вот таким образом:
селектор селектор2 селектор3
{
//стиль
}
Стиль, описанный здесь, будет применяться только для элементов, соответствующих всем трем селекторам одновременно. Также можно перечислять, к каким селекторам нужно применить стиль. Тогда селекторы разделяются запятой, а не пробелом.
В стеле описываются свойства и их значения. Синтаксис выглядит так:
свойство: значение;
Например, запись color:red задает свойству "цвет текста" значение красный.
Еще немного про селекторы:
Селектор, означающий имя тега пишется также, как и имя тега:
Например, селектор тега <a> пишется a:
a
{
color:green;
}
Здесь, для текста внутри тега <a> устанавливается зеленый цвет.
Селектор-класс должен начинаться с точки:
.myclass
{
font-size:14pt;
color:#FFF;
}
В этом примере я создал свой класс с белым цветом шрифта и размером в 14 пунктов.
Для указания какому-либо экземпляру тега, что он должен использовать определенный класс для отображения своего содержимого, нужно в атрибутах тега прописать class="myclass":
<p class="myclass> Здесь будет белый текст в размером шрифта в 14 пунктов</p>
Кроме классов существуют еще ID, уникальные идентификаторы. В любом документе может быть только один тег, использующий ID. Чтобы указать тегу, что он должен для отображения использовать стиль с таким-то ID надо прописать в атрибут тега id="myid". Любой ID в CSS начинается с #:
#myid
{
background:grey; //установка фона в серый цвет.
}
-----------------------------------
<div id="myid">
Текст с примененным стилем myid. Этот текст будет на сером фоне
</div>e
Способы подключения CSS к HTML:
Подключить CSS к HTML-файлу можно несколькими способами:
- Записать весь CSS внутри тега <style> в заголовке документа (тег <head>)
- Подключить внешнюю таблицу стилей.Опять таки внутри тега <head>:
<link rel="stylesheet" type="text/css" href="style.css" />
- Третий вариант не позволяет подключить таблицу стилей, но позволяет прописать стили внутри самого тега. Для этого используется атрибут style: style="свойства:значение;свойство 2:значение 2;".Например:
<span style="color:green background: black">зеленый текст на черном фоне</span>
Вот и все на сегодня, подробнее о CSS и о "свойствах и значения" я расскажу как-нибудь в следующий раз
P.S. Нужен реферат? Вот вам рефераты на заказ.
Добавляем отражение к изображению в GIMP (а-ля зеркало)
Сегодня я расскажу как можно сделать отражение изображения в GIMP
Сначала откройте изменяемое изображение. Затем уменьшите размер слоя в 2 раза и затем еще на 5px. Теперь вам надо, с помощью инструмента выравнивание, выравнять изображение по верхнему краю и по центру. После этого продублируйте слой, выровняйте его по нижнему краю и, используя инструмент зеркало, отразите его по вертикали и горизонтали. Затем создайте слой с черным фоном и установите его в самый низ. Должно получиться вот так:
Теперь нажмите на нижний слой и добавьте маску слоя:
Теперь установите прозрачность зеркального слоя на 80%, и проведите от начала слоя к его концу градиент из белого в прозрачный (можно из немного серого) Должно получится так:
Сейчас надо создать новый прозрачный слой под слоями с изображениями и над слоем фона и выделить в этом слое пространство примерно между серединой первого и второго изображений:
И Выделение->растушевать с значением 15. Затем заполняем выделенное градиентом из белого в черный и устанавливаем прозрачность слоя на 10-20%. Теперь смещаем верхнее изображение на 10px вниз и готово. Вот что должно получиться:
Исходное изображение:
P.S.
Все еще не знаете, что вас ждет в 2012 году, то вам надо смотреть онлайн фильм 2012
P.P.S.
Если вы не хотите изучать дизайн и html, то специально для вас разработка и создание сайтов
Основные html теги
Представляю вам список самых используемых html-тегов, которые, по хорошему, надо знать наизусть. Для пользования списком желательно хотя бы небольшое знание HTML, т.к. большинство атрибутов и свойств тегов здесь не рассмотрено
Почти все теги состоят из двух частей:
- <тег> - открывающий тег
- </тег> - закрывающий тег
Между открывающим и закрывающим тегом находится само содержимое тега. Также после имени тега (в открывающем теге) могут следовать атрибуты тега: выравнивание, задание толщины границ, цвета текста и т.д.
Главные теги
Большинство из этих тегов должны быть в любом документе.
- <html> </html> - самый главные тег любой html странице. Обозначает начало и конец html-документа
- <head> </head> В нем прописывается служебная информация
- <body> </body> - в этом теге находится основное содержимое страницы
Информация о странице
Теги, сообщающие название страницы и ее описание:
- <title> Название страницы </title>
- <meta name="description" content="text" /> - описание страницы
Работа с текстом
Заголовки
Служат для выделения заголовков в тексте. Например, названия главы книги, название статьи и т.д.
Заголовков в HTML всего 6 штук: от 1 уровня до 6. Чем меньше уровень заголовка, тем больше шрифт и тем он важнее.
-
<h1> - Заголовок первого уровня
-
<h2> - Заголовок второго уровня
-
<h3> - Заголовок 3 уровня
-
<h4> - Заголовок 4 уровня
-
<h5> - Заголовок 5 уровня
-
<h6> - Заголовок 6 уровня
Заголовки 1-3 уровня используются поисковиками (google, yandex,bing) для определения, о чем текст, поэтому рекомендую использовать эти теги во всех создаваемых вами текстах
Внешний вид текста (курсив, жирные, подчеркнутый)
- <b> жирные текст, где-то прочитал, что его не рекомендуют использовать </b>
- <strong> тоже жирный текст</strong>
- <i>наклонный текст, также не рекомендован к использованию</i>
- <em> наклонный текст</em>
- <u> подчеркнутый текст </u>
- <strike> перечеркнутый текст<u>
- <sup> верхний индекс</sup>
- <sub> нижний индекс </sub>
- <big> Текст чуть больше обычного (чаще всего на 1 пункт)</big>
- <small>Аналогично, только меньше</small>
Форматирование текста
В html для форматирование текста используется несколько тегов:
- <p> </p> - абзац
- <div> <div> - "элемент-бокс". Обычно в нем хранится текст, к которому применяются различные css-стили (установка ширины, отступов, шрифта, фона, выравнивания и т.д.)
- <blockquote></blockquote> -создает отступ
- <br/> - перенос строки
- <hr/> - горизонтальная линия
- <pre> </pre> - сохраняет форматирование текста (количество пробелов, переносы строк и т.д)
- <ul> </ul> - создает маркированный список
- <ol> </ol> - нумерованный список
- <li> </li> - создает элемент списка (как маркированного, так и нумерованного)
- <span></span> - насколько я знаю, нифига не делающий тег, служит для прикручивания к тексту стиля (опять таки css)
Ссылки и изображения
Создание ссылки:
<a href="http://adorning.ru"> adorning.ru</a> - href="адрес ссылки, а между <a ... > и </a> - текст ссылки
Вставка изображения:
<img src="adress" alt="text" align="center"/> - вставка изображения, находящегося по адресу adress, с выравниванием по центру. При наведение мышкой на изображение будет отображен текст text
Создание таблицы:
- <table> </table> - создание таблицы
- <tr> </tr> - новая строка таблицы
- <td> </td> - новая ячейка таблицы
- <th> </th> - новая ячейка таблицы с жирным текстом, выравнивание текста по центру
Некоторые специальные символы:
- - неразрывный пробел
- © - ©
- ± - ±
Кроме того, многие теги для форматирования текста поддерживают выравнивание текста/тега. За это отвечает атрибут align:
- align="center" - выравнивание по центру
- align="right" - выравнивание по правому краю
- align="left" - выравнивание по левому краю
- align="justify" - выравнивание по ширине
Для использования пишем тег и до закрытия открывающего тега куда надо выравнивать:
<p align="center"> текст выравнен по центру </p>
Еще пара полезных атрибутов:
style="css" - позволяет вам прописать css для этого экземпляра тега
id="id" - ид стиля в css таблице (уникальный для страницы)
class="class" - класс css для использования с этим тегом
Про сам СSS я, возможно, как-нибудь расскажу. CSS необходим для управления отображением текста: цветом фона, шрифта, типом шрифта, его размерами, выравниваем, границами, шириной элементов, отступами и многим другим.
Вот и все на сегодня!
P.S. Если вам, вдруг, понадобится сервер, то вот хороший сервер за paypal.
Уроки GIMP. Рисуем молнию. Вариант 1.
Сегодня я расскажу, как можно в gimp нарисовать молнию (по крайне мере, что-то похожее на молнию).
Первым делом нам необходимо создать новое изображение размером 400х400. Затем залить его черно-белым градиентом. Для этого выбираем инструмент "Градиентная заливка". В параметрах выставляем градиент и проводим из верхнего левого угла к центру правой стороны. В результате должно получится что-то такое:
Теперь идем в Фильтры->визуализация->облака->разностные облака и устанавливаем детализацию на максимум (15). С размером по X и Y можно поэкспериментировать, я поставил на 3.1 и 3.4.
Нажимаем ОК и инвертируем (цвет->инвертировать) полученное изображение:
Возможно вы уже видите очертания нашей молнии, а чтобы они стали видны любому нам пора в цвет->кривые и приводим ее примерно к такому виду (следите за вашим изображение, параметры будут немного отличаться). Главное, чтобы вы увидели на черном фоне тонкую молнию. Весь оставшийся мусор (если он есть) без сомнений удаляйти
Мои параметры:
И результат:
Вот это уже очень даже похоже на молнию, только цвет какой-то неправильный. Поэтому лезем в цвет->цветовой баланс и перекрашиваем нашу молнию:
И, как всегда, результат:
Осталось немного косметических эффектов. Выделяем нашу молнию (выделение->выделение по цвету. Затем инвертировать). Применяем фильтр сгладить и гауссово размывание (3px). После этого увеличиваем контрастность, чтоб молния снова стала похожей на молнию.
Вот и все. Самая примитивная молния нарисована. 
Если вы совсем ничего не понимаете в компьютере или вам необходима помощь, то специально для вас есть пк для начинающих, полезный сайт для новичков и желающих получше узнать компьютер
Уроки C++. Структуры.
1.02.2010. c++, Программирование
0Очень часто бывает необходимо объединить в одной переменной хранить несколько значений. Например, 2 координаты: х и у. Вот тогда можно использовать структуры данных, или просто структуры.
Создавать и работать с структурами очень просто. Для объявления структуры надо написать struct name
{ type varname;
type2 var2name}
Например,
struct point
{
float x;
float y;
int color;
string name;
};
Теперь, после того, как мы объявили структуру, пора создать ее экземпляр:
point points[1000]; // мы создали массив из 1000 элементов
Обращение к элементу структуры осуществляется через точку:
points[10].x=0,5;
points[10].y=1;
cout<<points[1].name;
И так далее.
Если вы создаете структуры динамически, то обращение к элементу осуществляется через ->:
point *p;
p=new point;
p->x=1;
p->y=2;
P.S.
Скачать программы и обои для стен, игры для nokia 5800 и бесплатные игры на телефон.
Loading ...