HTML и CSS

Расположение непрозрачного элемента внутри прозрачного (css)

Расположение непрозрачного элемента внутри прозрачного (css) Здравствуйте. Где-то месяц назад я опубликовал статью о том, как реализовать прозрачность cредствами css, где я пообещал в следующем посте рассказать как решить проблему прозрачности, когда все дочерние элементы унаследуют прозрачность от родителя и ничего нельзя с этим сделать. Для решения данной проблемы есть два способа.
(далее…)

HTML и CSS

Создание тянущейся шапки с логотипом (для начинающих)

Создание “резиновой” шапки с логотипом (для начинающих)

Доброго времени суток, уважаемые читатели. Вчера вечером, мне написал в аську один человек, который попросил помочь ему с шапкой сайта. Перед ним стояла задача: сделать шапку с тянущимся фоном (резиновую) и чтобы посередине был размещён какой-то логотип. Конечно же, я не мог отказать человеку в помощи и поэтому пишу данный пост с примерами реализации такой шапки.

(далее…)

HTML и CSS

Прозрачность средствами css (для начинающих)

Прозрачность средствами css (для начинающих)

Использование полупрозрачных элементов на странице является частым приёмом в веб-дизайне на сегодняшний день. Помимо этого, полупрозрачные элементы выглядят красиво и украшают страницу, если конечно ими не перебарщивать.

Чтобы сделать полупрозрачный элемент на фоне, например, какого-либо рисунка, можно использовать PNG-прозрачность, но данный способ не подходит для Интернет, поскольку изображения PNG-24 почти не сжимаются и имеют достаточно большой вес, а не все пользователи Рунета живут в центральной части и имеют высокоскоростной доступ в сеть. Как же быть в таком случае, чтобы угодить всем? Можно сделать взять фоновый рисунок, а затем наложить на него слой в графическом редакторе, слой сделать полупрозрачным, а затем сохранить полученное изображение в формате JPEG с приемлемой степенью сжатия. Этот метод подойдёт для небольшого блока фиксированных размеров, а если у нас большой блок с контентом, который ещё и динамически изменяется, то данный метод опять отпадает из-за большого веса изображений (при условии хорошо качества) и не возможности растягивать их. В таком случае у нас один выход, как и при использовании не прозрачного фона для блоков с динамически изменяющимися параметрами – полупрозрачность через использование каскадных таблиц стилей (CSS).

С помощью CSS прозрачность делает очень просто, достаточно к стилю элемента добавить всего 3 строки.

filter:alpha(opacity=100);  /* Здесь непрозрачность указывается в процентах (указывается только числовое значение). */
-moz-opacity:1;  /* Здесь в сотых долях от единицы. 1 = 100% не прозрачный блок. 0.5 (обязательно через точку – ни каких запятых) = 50% не прозрачности т.е. полу прозрачный. */
opacity: 1; /* Аналогично предыдущей строки */

Если честно, то достаточно только третей строки, но, к сожалению, не все браузеры поддерживают стандарты, поэтому для старых браузеров мы добавляем первые две строки. Первая для Internet Explorer, а вторая для старых версий Moziila, третья поддерживается всеми современными браузерами. Как видите, всё очень просто, но здесь есть одна хитрость – прозрачность передаётся «по наследству» от родительского контейнера, ко всем контейнерам внутри него (назовём их, дочерними).

«Унаследование» прозрачности вы можете наблюдать на картинке в начале статьи. К тому же, «унаследованную» прозрачность нельзя убрать, даже если установить для отдельного элемента 100% непрозрачность. Чтобы обмануть браузер, в прямом смысле, и сделать не прозрачный элемент внутри прозрачного, придётся создать 2 блока, один сделать полупрозрачным, а другой оставить «как есть», а затем с помощью CSS «заставить» браузер отобразить один поверх другого. Этот способ не слишком удобный, но есть ещё один – о нём я расскажу в следующем посте.

Теперь вы знаете, как управлять прозрачностью элементов с помощью каскадных таблиц. В одном из следующих уроков, я расскажу о позиционировании. Если вы не можете поставить один блок над другим, то ждите нового урока.

_________________________
Как хорошо, когда телефон это не только средство для общения — можно скачать бесплатные Java игры и поиграть в какие-нибудь игрушки, если застрял в пробке в общественном транспорте.

HTML и CSS

Использование тэга span для форматирования текста

Использование тэга span для форматирования текста Что же это за тэг такой, <span>? Данный тэг необходим для форматирования элементов. Он не является блочным элементом и позволяет, например, изменить стиль для одного слова. Его можно использовать внутри блочных элементов (<p>,<table>,<div>). Span поддерживается всеми известными браузерами (ну ещё бы он не поддерживался каким-либо браузером — стыд и позор :lol:)

Приступим к самому форматированию текста. В html это требует лишь пару символов кода, а всё остальное – чистый css. Хотя, можно прописать стили в html-коде, но это не хорошо, т.к. «нагружает» страницу лишним кодом, поэтому стили надо выносить в отдельный файл. Поскольку <span> это тэг для форматирования, то большая часть статьи будет о изучении и синтаксисе CSS.

Итак, дан текст: «Шел Грека через реку, видит Грека в реке рак, сунул грека руку в реку
рак его за руку цап…». Наши задачи:

  1. Придать словам «река» и «рак» синий цвет шрифта.
  2. Выделить жирным имя героя, без использования тэгов strong или b
  3. Изменить фон  и цвет глаголов, при наведении на них курсора мыши.

Задачи трудные, но это только на первый взгляд. На самом деле всё очень просто. Для начала «окружим» эти слова тэгом <span>. Должно получиться что-то, типа <span>рак</span>. Затем, необходимо присвоить класс к каждому тэгу span. У нас имеется 3 задачи, поэтому нам надо будет ко всем тэгам span присвоить один из трёх соответствующих классов, которые мы назовём, к примеру, “color” (1 задание), ”hero” (2 задание) и ”glagol” (3 задание). Пример присвоения классов к тэгу span — <span class=”color”>рак</span>. Всё, с html покончено, далее будет только CSS.

Создаём отдельный файл (назовите его style.css) и сохраняем его в том же каталоге, что и html файлы с нашим текстом. Подключаем файл стилей к нашей странице, сохраняем сделанные на  html странице изменения и можете смело её закрывать, теперь нам понадобиться только файл style.css. Для начала, ознакомлю вас с синтаксисом CSS. Он очень прост, задаётся селектор (название класса, айди или элемента), а затем идут различные свойства и их параметры. Сложно? Не переживайте, ниже будет пример кода, где вам всё станет понятно.

Итак, ранее мы создали 3 класса для каждой задачи. Теперь будем создавать стили для каждого их классов. Ниже я приведу отрывок кода с комментариями, где вы без труда разберётесь с синтаксисом CSS и не только. Небольшая шпаргалка: поскольку селекторы бывают разных типов, то они могут иметь одинаковые имена (Например, класс «color» и айди «color»), поэтому нам надо «сообщить» браузеру какой именно элемент нам нужен – для этого перед названием элемента ставятся специальные символы (без пробелов): «#» — перед айди, «.» — перед классом и ничего не ставиться перед названием тэга (например, span {} – этот стиль будет применяться для всех тэгов span, встречающихся в документе).

.color { /*Название селектора. В данном случае он называется «color.*/

Color:  #0000ff; /*Задаём тексту синий цвет. Color – свойство, а #ffff00 – параметры свойства.*/

}

.hero {

Font-weight: bold; /* Делаем текст жирным.*/

}

.glagol:hover { /*Дополнительное свойство селектора :hover позволяет задать стиль для данного элемента, который будет отображаться при наведении мыши на элемент.*/

Background: #eeeeee; /*Задаём фоновый цвет.*/

Color:  #666666;

}

Сохраняем написанные стили, запускаем html-файл в браузере и радуемся результату. Если вы всё сделали правильно, то вы увидите то же самое, что и на картинке к данной статье. А если у вас что-то не работает, то посмотрите исходники и найдите свои ошибки.

__________________

Украшать веб-страницы мы научились, теперь пора украшать свою девушку . Тут вместо CSS вам придётся использовать свадебные платья и прочие украшения, например ювелирные.

PHP

Постраничный вывод записей из БД

Постраничный вывод записей из БД Невозможно представить себе сайт (не визитную карточку) с большим количеством информации и чтобы вся эта информация хранилась в виде отдельных статических страниц, а не выводилась из базы данных динамическим образом. Однако, бывает что необходимо вывести большое количество записей, но в таком случае страница становиться очееень большой в высоту, что как минимум неудобно.

Данную проблему решить очень просто — необходимо всего лишь сделать постраничный вывод записей, например, по 20 записей на страницу. Как это сделать — об этом я и хочу вам сейчас рассказать.

Предположим: нам надо вывести из таблицы «news» все записи, разбив их на страницы по 20 новостей на каждой, если это потребуется.

Будем считать, что подключение к базе мы уже организовали, поэтому я напишу лишь скрипт постраничного вывода и разбиения на страницы, не описывая момент подключение и отсоединения от базы данных.По просьбе трудящихся я затрону момент подключения и отключения от базы данных.

Добавлено: Итак, начнём с подключения к базе данных, ведь именно с ней мы и будем работать в дальнейшем.

$link=mysql_connect("localhost","user","password"); // Подключаемся к серверу БД расположенном по адресу localhost используя логин user и пароль password.
mysql_select_db("dbname"); // Подключаемся к базе данных с именем "dbname"

Для начала, нам необходимо проверить, запросил ли пользователь какую-либо определённую страницу или нет. Номер запрашиваемой страницы будет передаваться в переменной «page», передаваемой методом get.

if(isset($_GET['page'])) { $page=$_GET['page']; } else { $page="0"; }

Затем, мы делаем запрос в базу данных, где просим вернуть 20 записей, начиная с определённой записи. Этой самой определённой записью, будет запись, которая является первой записью на странице, и её номер будет определяться как: номер страницы минус единица и умноженный на количество записей на страницу. Например: первая запись на третьей странице будет иметь номер 2*20=40, при условии вывода по 20 записей на страницу.

$query=mysql_query("SELECT * FROM news ORDER BY id DESC LIMIT ".($page*20).",20");

Далее используя цикл while() выводим на экран необходимую нам информацию в необходимом виде. Эту часть кода я опишу кратко и очень условно.

while($news=mysql_fetch_array($query)) {
        echo "<strong>".$news['title']."</strong><p>".$news['messaage']."</p>";
}

Всё, часть задачи мы решили: вывели на экран определённое количество записей, начиная с определённой записи. Теперь осталась ещё одна задача: сделать возможность навигации по страницам. Для этого нам надо узнать, сколько всего записей имеется в таблице. Сделаем это таким образом.

$q=mysql_query("SELECT * FROM news");

Зная количество записей мы можем определить сколько страниц у нас будет. Для этого мы разделим общее количество записей на количество записей, выводимых на одной странице, а затем полученное число (скорее всего дробное) мы округлим до целого в бОльшую сторону.

$numpages=ceil(mysql_num_rows($q)/20);

Отлично, теперь мы знаем сколько у нас будет страниц, и остаётся самое простое — создать и вывести на экран элементы навигации по страницам. Очевидно, что всегда будет как минимум одна страница, при условии, если в базе есть хоть одна запись, однако, если страница всего одна, то нет смысла выводить элементы навигации, поэтому первым делом мы сделаем условие, которое будет проверять — является ли количество страниц более единицы. Именно это мы и делаем в первой строке следующего ниже кода.

if($numpages > 1) {
	if($page!=0) { echo "<a href=\"/index.php?page=0\">Первая</a> "; }
	for($i=0;$i<$numpages;$i++) {
		if($page != $i) { echo "<a href=\"/index.php?page=".$i."\">".($i+1)."</a> "; }
		else { echo "<strong><a href=\"/index.php?page=".$i."\">".($i+1)."</a></strong> "; }
	}
	if($page!=($numpages-1)) { echo "<a href=\"/index.php?page=".($numpages-1)."\">Последняя</a>"; }
}
	echo "<a href=\"/index.php?gotopage=$numpagess\">Последняя</a>";
}

Во второй и седьмой строках кода, представленного выше, мы выводим постоянные ссылки на первую и последнюю страницы соответственно. В третьей строке мы задаём цикл от единицы до n-1, где n — количество страниц. В теле данного цикла (4-5 строчки) мы выводим ссылку на каждую страницу, с указанием номера данной страницы, предварительно проверив, является ли ссылка, ссылкой на текущую страницу. Если условие выполняется, то ссылка выделяется жирным шрифтом. Проще говоря, мы выделяем жирным ссылку на ту страницу, на которой пользователь находиться в данный момент.

Добавлено: Теперь нам остаётся лишь закрыть соединение с базой данных и очистить память, от теперь уже ненужной информации. В первой строке представленного ниже кода, мы очищаем память от массива данных, содержащегося в переменной $query — это все наши записи из базы данных. Во второй строке, мы закрываем соединение с базой данных.

mysql_free_result($query);
mysql_close($link);

Вот и всё, как видите, ни чего сложного здесь нет. Требуется лишь немного смекалки и небольших знаний php.

Удачи вам, в ваших разработках!
________________
Отдохните от работы и потратьте пару часов своего свободного времени на лучшие игры различных жанров и направлений: от одиночных стрелялок и симуляторов, до многопользовательских ролевых и стратегических игр.

PHP

Онлайн генератор паролей + подробное описание скрипта

замки Чтобы никто не смог войти в вашу квартиру, вы используете замок. Чем лучше этот замок, тем лучше защищена ваша квартира.

В современном мире очень много важной информации, а также электронных ценностей, храниться в сети Интернет и, чтобы защитить это от других или ограничить доступ, надо использовать хорошие «компьютерные замки» — пароли, взломать которые должно быть достаточно трудно. Трудным для взлома или «идеальным» паролем, считаются пароли, состоящие из символов двух раскладок или с применением букв обоих регистров (заглавных и строчных), сочетаний букв и цифр, количество символов в которых не менее 8 символов, а набор символов не имеет какого-либо порядка. (далее…)

Полезное

Возвращаем поиск Google в Firefox

Возвращаем поиск google в Firefox 3.5

Добавлено: способ работает во всех следующих версиях Firefox начиная с 3.5

Как вам, наверное, уже известно — 30 июня 2009 года Mozilla Foundation выпустила новую версию быстро набирающего популярность браузера — Firefox 3.5 Сегодня утром, я скачал с официального сайта русскую версию firefox 3.5, установил, и после установки сразу-же заметил что что-то не так, как было раньше. О_о На домашней страничке Firefox , где поиск в интернет в форме Firefox, был логотип Яндекса, вместо привычного Google. У меня сразу возник вопрос: «Как вернуть поиск Google в Firefox 3.5?«.

(далее…)