Отправляет email-рассылки с помощью сервиса Sendsay

WEB дизайн - начинаем с пикселя -баннеры, скрипты, шаблоны

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Раскрутка и продвижение сайта. Лучшие партнерские программы" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр

Статистика

2.334 подписчиков
-9 за неделю
←   Все выпуски   →

WEB дизайн - начинаем с пикселя -баннеры, скрипты, шаблоны №3 2006


IDA - Design Studio
www.IDA-DBS.com

Сегодня в выпуске:

Новости

Очередной выпуск рассылки в этот раз пока без каких либо шаблонов для WAP сайтов или просто сайтов. К сожалению пока нехватка времени на создание шаблонов. Но пока Вы можете качать то что есть здесь dbsite.hop.ru и mobile.ida-dbs.com

Также хотим сообщить для тех кто еще не скачал руководство по созданию WAP сайтов у Вас еще есть такая возможность. Правдо еще не дописано и много чего нужно сделать, но для начинания простого создания WAP можно использовать.
Вот что пишет один наш пользователь:

Написал: Lem (1 апреля 2006 19:20)

Для первого знакомства полезный файлик написал. Молодец. Но косноязычно слегка и не очень-то последовательно.
В 15 страничном документе нету списка тегов, к примеру - то чего нужно в первую очередь. Зато есть описание работы с Adobe ImageReady со скриншотами (!?). Неужели думаешь в таком обьеме обьяснить то что пишут в толстых книжках?!? Тогда это не про ВАП сайты, а экскурс в обработку графики....

В чем-то он прав и я обещаю в дальнейшем дописать и теги. Но в документе будет не только описание с графикой, но также и описание программ для работы с музыкой. Редактирование, нарезка, конвертация и т.п. Ведь многие начинающие пользователи, даже не знают, что и как сделать для своей сотки.
В общем кому интересно и кто не качал, вперед - http://mobile.ida-dbs.com/2006/03/03/sozdanie_WAP_sayta.html
Когда будет очередная версия - где-то в конце июня.

Фиксированная таблица и её графическое оформление.

Сегодня я расскажу об использовании фиксированных таблиц в дизайне. Ну во-первых, что такое фиксированная таблица?
Давайте создадим таблицу и посмотрим на её заголовок.

ниже приведен код таблице
<table border="1" width="100%">
<tr>
<td width="100%">&nbsp;</td>
</tr>
<tr>
<td width="100%">&nbsp;</td>
</tr>
<tr>
<td width="100%">&nbsp;</td>
</tr>
</table>
Эта таблица не фиксированная и при изменении размеров окна браузера, а также от разрешения Вашего монитора, таблица будет растягиваться на 100% по ширине экрана. Такой подход в дизайне называют "резиной".
Чтобы сделать фиксированную таблицу мы должны указать в заголовке её ширину в пикселях.


Эта таблица уже фиксирована.

 
<table width="200" border="1">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
Теперь, как бы Вы не меняли размер окна браузера, у Вас ширина таблицы будет равна 200 пикселям.


Рассмотрим, как с использованием графики можно оформить таблицу.
Создадим в Photoshop новый документ 200х100 пикселей.
Я не буду учить, как рисовать это в фотошоп, но думаю Вы без проблем сможете сделать что-то подобное. Как Вы смогли догадаться, рисунок представляет собой 3 части:
1. Это шапка таблицы
2. Это место для наполнения таблицы информацией, при этом информация может быть сколь угодно большой.
3. Низ таблицы.
Следующем шагом следует порезать наше изображение с помощью инструмента фрагмент
У Вас получились следующие детали для таблицы
1.
2.
3.

Остается теперь это влить в таблицу. Для этого делаем таблицу фиксированной ширины в 200 пикселей и без рамки.
Далее в шапку вставляем деталь 1.
В информационной части таблицы, зададим в качестве фона деталь 2.
Ну и в нижней части таблицы вставляем деталь 3.
Вот что должно быть:

Меню1
Меню2
Меню3
Меню4


Вот код таблицы.
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="fiks/01.jpg" width="200" height="34"></td>
</tr>
<tr>
<td background="fiks/02.jpg">&nbsp;</td>
</tr>
<tr>
<td><img src="fiks/03.jpg" width="200" height="24"></td>
</tr>
</table>

Хочу еще открыть секрет, что деталь 2 можно сделать всего в высоту 1 пиксель, но в ширину 200.
соответственно и загружаться эта картинка будет быстрее.
Так, же Вы можете использовать не формат jpg, а gif.

Дмитрий И. (www.ida-dbs.com www.design-forever.ru www.Mobile.ida-dbs.com)

наверх

Использование CSS при создании ссылок.

Сейчас это очень уже распространненый прием, но при начальном изучении азов для создания сайтов, очень полезная статья написанная Дадыкиным Дмитрием Александровичем ( http://ground.r2.ru/ ) еще в 2002 году. Кому это и так понятно могут не читать, но а кто еще не начинал пользоваться стилями, думаю это первоочередный шаг.

Для начала хочу сказать, все то, что я сейчас покажу реально сделать и без использования CSS, но… с каскадными таблицами все намного проще и быстрее. Наверняка Вы все это время пользовались стандартными атрибутами тега <BODY> alink="" vlink="" link="" , но чем плох этот способ, тем что эти атрибуты распространяются на все ссылки страницы, а наша задача сделать ссылки абсолютно разнообразными и более динамичными. Пользоваться нужно вот такой конструкцией:

<style=""text/css">"
<!--
a:visited { color: #00ff00; font-size: xx-small; }
a:active { color: #00dd00; font-size: 9pt; }
a:link { color: #00ff00; font-size: xx-small; }
a:hover { color: #ff0000; }
-->
</STYLE>

Что делает этот код. Этот код очень похож по своей сути, на то, как мы используем стандартные атрибуты тега <BODY>, только выполнен с помощью CSS. Он также будет распространяться на все ссылки. Давайте разберем каждый элемент это кода:

<style=""text/css">"
…
</STYLE>
Между этими тегами размещается код стилей. Их нужно вставить в заголовке странице между <HEAD></HEAD>.

a:visited { color: #00ff00; font-size: xx-small; }
Данный код показывает, что посещенная ссылка будет иметь цвет #00ff00 и шрифт xx-small. Аналогичную функцию выполняет атрибут vlink.

a:active { color: #00dd00; font-size: 9pt; }
Здесь говорится, что при нажатии на ссылку, цвет ее должен измениться на #00dd00 и поменять размер шрифт на 9pt. Аналогичную функцию выполняет атрибут alink.

a:link { color: #00ff00; font-size: xx-small; }
Ну а здесь не посредственно указывается как будет выглядеть наша ссылка. Аналогично - link.

a:hover { color: #ff0000; }
Здесь указывается, что должно произойти с ссылкой, когда на нее наведут мышь. В данном случае она просто поменяет цвет с #00ff00 на #ff0000.

Вот это была основная теория, как с помощью CSS можно задавать цвет ссылки. Но как я уже писал это распространяется на все ссылки. А теперь давайте сделаем для каждой ссылки свой определенный стиль.

<STYLE type="text/css">
<!--
a:visited { color: #00ff00; font-size: xx-small; }
a:active { color: #00dd00; font-size: 9pt; }
a:link { color: #00ff00; font-size: xx-small; }
a:hover { color: #ff0000; }

a.new:visited { color: #cc00cc; font-size: 10pt; }
a.new:active { color: #cc00cc; font-size: 10pt; }
a.new:link { color: #cc00cc; font-size: 10pt; font-family: Verdana}
a.new:hover { color: #ff0000; text-decoration: none}

a.best:visited , a.best:active , a.best:link { color: #00ff00; font-size: 9px; }
a.best:hover { color: #ff0000; }
-->
</STYLE>

И так можно сделать сколько угодно стилей для ссылок. Как теперь все это применить, да очень просто:
Если Вы напишите такой код:

<a href="ссылка куда-то">ССЫЛКА</a>
То ссылка примет вид который расположен в этом коде:
a:visited { color: #00ff00; font-size: xx-small; }
a:active { color: #00dd00; font-size: 9pt; }
a:link { color: #00ff00; font-size: xx-small; }
a:hover { color: #ff0000; }

Если же вы напишите так:

<a href="ссылка куда-то еще" class="new">ССЫЛКА</a>
То ссылка будет выглядеть так, как описано в стиле new, т.е. :
a.new:visited { color: #cc00cc; font-size: 10pt; }
a.new:active { color: #cc00cc; font-size: 10pt; }
a.new:link { color: #cc00cc; font-size: 10pt; font-family: Verdana}
a.new:hover { color: #ff0000; text-decoration: none}

Ну и наконец вы пишите так:

<a href="ссылка куда-то снова" class="best">ССЫЛКА</a>
И ссылка принимает стиль, который описан вот так:
a.best:visited , a.best:active , a.best:link { color: #00ff00; font-size: 9px; }
a.best:hover { color: #ff0000; }

Тем самым, Вы можете использовать различные виды ссылок на одной странице. Согласить очень полезно и быстро.

наверх

CHMOD

что это такое и с чем его едят. Сейчас очень много бесплатных хостингов предоставляют такую возможность, как использование у них выполнения скриптов написанных на php, perl. Так вот чтобы все нормально работало, нужно устанавливать атрибуты для файлов. У многих это очень больной вопрос. Вроде загрузили на сервер все верно, но ничего не пашет. Оказывается всего навсего не установлены атрибуты для файлов, или CHMOD. Как это сделать, написал Таценко Александр.

Каждый дизайнер рано или поздно сталкивается с тем, что необходимо установить права доступа (CHMOD) для документов скачанного форума или гостевой книги.

В этом нет ничего сложного, но без помощи разобраться довольно трудно. Итак…

Чаще всего встречаются цифры 777 или 666. Вообще они могут принимать значения от 0 до 7. В основе расчёта лежит двоичная система исчисления. Если расписать цифры, то получится:

7 = 1 1 1

6 = 1 1 0

5 = 1 0 1

4 = 1 0 0

3 = 0 1 1

2 = 0 1 0

1 = 0 0 1

0 = 0 0 0

Как известно, единица соответствует утверждению (да), ноль – игнорированию (нет). Теперь определимся с тем, что утверждают и игнорируют эти комбинации цифр. Применяется такой порядок:

R W X

R – read

W – write

X – execute

Значит, документ с правом доступа

7 разрешает

R(читать) W(записывать, редактировать) X(выполнять)

6 разрешает

R(читать) W(записывать, редактировать)

5 разрешает

R(читать) X(выполнять)

4 разрешает

R(читать)

3 разрешает

W(записывать, редактировать) X(выполнять)

2 разрешает

W(записывать, редактировать)

1 разрешает

X(выполнять)

7 --------------

ничего не разрешает

Но числа даются в виде 777, а не 7. Это необходимо для того, чтобы разным пользователям предоставлять разные права доступа:

Первая цифра относится к хозяину документа;

Вторая – к лицам, имеющим гостевой доступ;

Третья – к пользователям, не имеющим к нему отношения.

Значит, право доступа 754 даёт право:

Хозяину делать с ним всё, что захочется;

Лицам с гостевым доступом читать и выполнять;

клиенту только читать.


Добавлю от себя. Что я например заливаю файлы с помощью Total Commander и выставляю атрибуты с помощью него. Это же может сделать и Far. Так, что порой не нужно искать замороченные программы типа CuteFTP.

наверх

Создаем голосование на своем сайте сами

Где-то я взял этот скрипт, но не помню где. Авторам просьба не обижаться, а сообщить и в следующей рассылке я выражу огромную благодарность.
Создаем собственно форму для голосования:

Как часто Вы посещаете стоматолога?
Каждый месяц
Раз в пол года
Раз в год
Только тогда когда приспичит
Забыл уже когда был у него

Код формы для вставки в свою html страницу:

<form action=golos.php method=post>
<table cellspacing cellpadding=1 border=0 width="200">
<tr>
<td align=center colspan=2 class="m">Как часто Вы посещаете стоматолога?</td>
</tr>
<tr>
<td>
<input type=radio name=otv value=1 checked>
</td>
<td>Каждый месяц</td>
</tr>
<tr>
<td>
<input type=radio name=otv value=2>
</td>
<td>Раз в пол года</td>
</tr>
<tr>
<td>
<input type=radio name=otv value=3>
</td>
<td>Раз в год</td>
</tr>
<tr>
<td>
<input type=radio name=otv value=4>
</td>
<td>Только тогда когда приспичит</td>
</tr>
<tr>
<td>
<input type=radio name=otv value=5>
</td>
<td>Забыл уже когда был у него</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit name=golos value="Голосовать">
</td>
</tr>
</table>
</form>

 Далее скрипт для обработки голосования
создайте для этого файл golos.php

<html>
<head>
<title>Обработка голосования</title>
</head>
<body>
<?
// Здесь мы запускаем обработку данных только если
// была нажата клавиша Голосовать
$file_name="data.txt";
// Переменная $file_name задает имя файла с результатами
$file=file($file_name);
// Записываем файл с данными в массив $file
$file_len=count($file);
// $file_len - количество строк в файле data.txt
for($i=1,$n=0;$i<$file_len;$i++) {
$file[$i]=trim($file[$i]);
$n=$n+$file[$i];
};
for($i=1;$i<$file_len;$i++) $pr[$i]=round(($file[$i]/$n)*100);
// Записали в массив $pr, сколько процентов от общего числа голосовавших
// занимает каждый ответ
// Далее идет кусок HTML-кода, который
// отвечает за вывод наших данных на экран
?>
<center><h2>Как часто Вы посещаете стоматолога?</h2></center><BR>
<table border=1 align=center>
<tr><td>
<B>Каждый месяц (<?echo $file[1];?>):</B>
</td><td>
<img src="img.php?pr=<?echo $pr[1];?>" height=15>
</td></tr>
<tr><td>
<B>Раз в полгода (<?echo $file[2];?>):</B>
</td><td>
<img src="img.php?pr=<?echo $pr[2];?>" height=15>
</td></tr>
<tr><td>
<B>Раз в год (<?echo $file[3];?>):</B>
</td><td>
<img src="img.php?pr=<?echo $pr[3];?>" height=15>
</td></tr>
<tr><td>
<B>Только тогда когда приспичит (<?echo $file[4];?>):</B>
</td><td>
<img src="img.php?pr=<?echo $pr[4];?>" height=15>
</td></tr>
<tr><td>
<B>Забыл уже когда у него был (<?echo $file[5];?>):</B>
</td><td>
<img src="img.php?pr=<?echo $pr[5];?>" height=15>
</td></tr>
</table>
<table border=1 align=center>
<tr><td align=center><B>Всего проголосовало:</B></td></tr>
<tr><td align=center><?echo $n." человек";?></td></tr>
</table>
<?
?>
</body>
</html>

Ну и последний файл, назовите его data.txt
Здесь будут результаты голосования:
Результаты голосования:
0
0
0
0
0
На сервере установите атрибуты для файлов
golos.php - 755
data.txt - 777
Как это сделать написано здесь.
К сожалению скрипт не учитывает, то что Вы уже голосовали, поэтому пользователь может голосовать сколь угодно раз. Но для простых голосований пойдет.
Пример на моем сайте который я еще делаю biz-info.org

наверх

В следующем выпуске

Как сделать меню такое же как на plati.ru - выдераем код, скрипты и делаем своё меню.

Иконки на сайте уже приелись, но как найти новый стиль для сайта. Порой бывает достаточно одного элемента, чтобы достаточно придать стильность сайту. На примере своей работы покажу идею. Правдо для этого понадобилась программа Ulead Coool 3D, но всего нужно 5 минут, чтобы сделать этот элемент.

Заказчику не приглянулся дизайн, на который я потратил почти целый день. Но нет, так нет. Надеюсь переделать его в шаблон, может Вам понравиться.

Рекламный блок.

Mobile.ida-dbs.com - украшай свой мобильник сам. Музыка, Игры, Темы, Программы - все бесплатно.

IDA-dbs.com - изготовление баннеров, логотипов, графики для сайтов. Цены от 1$. На рынке услуг мы уже с 2001 года.

По вопросам рекламы на наших проектах (более 10 сайтов) обращаться на Аську 293-056-466

Бесплатные консультации по созданию графики, сайтов, использование программ - ICQ 293-056-466
В избранное