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

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


  Выпуск от 04.05.2006
Гостевая для Читателей
Содержание:
Новости
Как начать зарабатывать ВЭБМастерам. Первые шаги к заказчикам.
Коллекция шаблонов для сайтов
Обзорка
Зачем нужен SSI?
Возможности JavaScript. Формы. Проверка информации, введенной в форму.
Контакты
НОВОСТИ
Наблюдая статистику за подписчиками я очень огорчаюсь когда уходят читатели. У нас более 2500 подписчиков и хотелось бы что-бы мои рассылки правдо были интересными. Я решил открыть гостевую книгу для читателей и если Вам не трудно, черканите пару строк, на что Вы больше обращаете внимание. Чтобы Вы хотели еще видеть в рассылках. Поверте я буду стараться.
К сожалению я уезжаю. Поэтому эта рассылка не совсем полноценная. Но просьба - не нажимайте кнопку отписаться. Далее будет много интересного.
1. Продолжение над руководством по созданию WAP сайтов.
2. Секреты в оформлении WEB страниц. Маленькие штрихи улучшают Ваш дизайн.
3. Применение стилей CSS и графики - делают дизайн еще интереснее и проще.
4. Расскажу о секретах - как научиться зарабатывать на ВЭБ дизайне. Как открыть студию и как работать с заказами. Где взять первого клиента.
Ну а сегодня в качестве отмазки сегодня даю список сайтов на которых есть шаблоны для сайтов бесплатно.
Содержание
Как начать зарабатывать ВЭБМастерам. Первые шаги к заказчикам.
Хочу сделать небольшую рубрику статей по некоторым советам для ВЭБМастеров, которые могут делать дизайн и при этом хотят на этом скажем так зарабатывать. Что для этого нужно, с чего начинать.
Казалось открыл свой сайт с красивым именем типа www.MySuperStudio.ru и думаешь, все заказчики мои. А как продвинуться дальше. Не смотря на красивый домен Ваш счетчик стоит в районе 2-3 посетитей в сутки. А заказчики не пишут писем и не стучаться в аську. Что делать?
Начнем все по порядку.
1. Надо определиться - действительно ли Вы дизайнер. Т.к. многие думают что если научились рисовать мограющий текст - то могут делать баннеры. И если с шаблона переделали сайт, то могут делать сайты.
Я не имею ввиду что дизайнер - это должен быть человек, который знает от А до Я - Photoshop, Dreamweaver и кучу еще программ для создания совершенства. В идеале это так. Но порой достаточно знать даже азы и уже считать себя дизайнером и приносить пользу.
Так как же определить степень своего мастерства? Никогда не сравнивайте себя с работами других дизайнеров. Ведь у каждого свой вкус и цвет. Вы можете сказать, что я делаю лучше того, но в тоже время сказать, что мне далеко до того. А увидев некоторые шедевры просто напросто положить на все и принять решение просто бросить все.
Для своей оценки Вам нужно что-то сделать кому-то и если этот заказчик скажет - нормально. Это уже хорошо. А если скажет отлично - то еще лучше.
Так где взять первого заказчика, когда сейчас нету денег для открытия своего сайта и регистрацию домена.
А вот тут надо не лениться и начать работать за бесплатно. На каких-нибудь дизайнерских форумах разместите например объявление: "Сделаю баннер бесплатно". Уж поверте желающих будет очень много. Выберите наиболее легкий вариант и начните с него. Вот тут у Вас и начнется первый контакт с заказчиком. Хотя и не страшно, ведь даже если не выйдет, Вы работали все равно бесплатно. Главное не бросать, не получилось первый раз - получится в пятый.
Только в тесном контакте с клиентом Вы сможете понять, что над чем работать. Когда просит клиент и Вам порой кажется не возможным, но старайтесь работать. Искать выходы, смотреть и учиться, как делают другие. Спрашивайте на тех же форумах. Ищите помощников.
То что Вы сделаете бесплатно - то Вы можете уже ложить в свое портфолио. Т.е. это главное к чему Вы идете - набрать хорошее портфолио.
Продолжение следует....
Содержание
Коллекция шаблонов для сайтов
Обещают что здесь можно взять шаблоны совершенно бесплатно:
http://monser.ru/modules.php?name=News&topic_id=6
http://soft-teleport.ru/category/shablony/
http://www.epidem.ru/modules.php?name=News&topic_id=6
http://www.templatesbox.com/free-flash-templates/index.htm
http://www.monsterteam.ws/category/templates
http://rubet.ru/category/templet/
http://softaz.org/category/webmaster/page/5/
http://webgraf.net.ru/category/template
http://wo-web.ru/index.php?categ=3&parent=...ownloads&area=1
http://www.difnews.ru/index.php
http://www.htmlwebtemplates.com
http://www.templates4html.com/general.asp
http://www.templateheaven.net
http://www.themesets.net
http://www.templatetech.com/html.html
http://www.html-templates.com
http://www.templatemonster.com
http://www.swishsource.com
http://designsandtemplates.com
http://www.besttemplates.net
http://www.dreamlinestudio.com
http://www.classythemes.com
Содержание
Обзорка
Что такое обзорка? Ну скажем это небольшой мой рекламный блок. То чего сделано у нас или что хотелось показать, ну и наконец просто ссылки на полезные ресурсы.
Сделано у нас:
Biz-Info.org - Сахалинский информационный бизнес портал. Портал пока на стадии разработки. Что предлагает проект - это размещение Вашей бизнес информации на портале бесплатно. Т.е. это практически готовые сайты с именами Biz-Info.org/yourname/. Примеры работ можно посмотреть здесь - biz-info.org/artflok/ и biz-info.org/SNK/
Для дизайнеров: что можно посмотреть, ну во первых на сайте реализована доска объявлений работающая без базы MySQL и Форум - также не нуждающийся в базе данных. Возможно это пригодиться для ВэбМастеров которые не совсем умеют устанавливать скрипты с базой данных или для тех, чей хостинг может работать с PHP, но не поддерживает базы данных.
Там же я переделал каталог ссылок в каталог организаций при этом добавил отдельный модуль.
Скачать эти скрипты совершенно бесплатно Вы можете если посмотрите на копирайты. Только скажу имя автора, за что ему огромное спасибо - Gavrilov Mikhail.
www.Bronze-Casino.com - для любителей поиграть в казино. Почему я рекламирую этот сайт? Ну во-первых может из читателей кто-то правдо любит поиграть и ему интересно будет попробывать свою удачу.
Во-вторых, мне понравилось что разработчки ставят казино за 48 часов, при этом Вы можете полностью изменить дизайн.
Mobile.ida-dbs.com - для мобильного телефона: музыка, игры, картинки, приколы, программы. Для дизайнеров - шаблоны для WAP сайтов, руководство по созданию WAP сайта.
Содержание
Зачем нам нужен SSI?

Вначале расшифруем аббревиатуру SSI - Server Side Includes или, по-русски, - включения на стороне сервера.

SSI - это директивы, вставляемые прямо в HTML-код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые, кстати, называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия. Какие? А вот, например: вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа броузера) и другие не менее нужные вещи.

Преимущества SSI проявляются, когда нам нужно поддерживать достаточно большой по объему сайт, имеющий определенную структуру и повторяющиеся элементы кода на всех страничках. Вообще, при применении серверных включений сайт удобно рассматривать как состоящий из отдельных блоков, каждый из которых отвечает за свою часть странички. Эти блоки практически неизменны и повторяются от страницы к странице. В эти блоки можно вынести такие элементы странички как: главное меню, рекламные вставки, повторяющиеся элементы оформления страничек и т.д. Физически эти блоки представляют собой просто HTML-файлы, содержащие часть кода, нужную для выполнения их задачи.

Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: *.shtml или *.shtm, наличие которого и заставляет web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое - в зависимости от конфигурации web-сервера, но в основном применяется именно *.shtml.

Полная страничка формируется web-сервером на лету, собирая код странички из таких вот блоков. Для того, чтобы указать серверу, какой блок нужно вставить и в каком месте странички, используется специальная форма записи в виде комментария. Вот такая:

<!--#command param="value" -->

где # - признак начала SSI-вставки;
command - SSI-команда;
param - параметры SSI-команды.


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

<!--#include virtual="/path/file.ssi" -->

где include - команда вставки;
virtual - параметр, определяющий, как трактовать путь - как абсолютный (file) или как относительный (virtual);
"/path/file.ssi" - путь к включаемому файлу.


Результатом ее выполнения будет вставка содержимого файла file.ssi в месте появления данной директивы. При просмотре сформированного исходника HTML-файла мы не увидим никаких признаков SSI, т.к. данный механизм действует абсолютно прозрачно для броузеров, они получают исключительно корректный HTML-код.

Следующая команда - это команда установки значения переменной:

<!--#set var="pic" value="picture.gif" -->

где var - команда установки значения переменной;
pic - имя переменной;
picture.gif - значение переменной.


В данном случае мы определили переменную с именем pic и присвоили ей строковое значение "picture.gif". Значение переменной pic теперь доступно внутри SSI-вставки, и мы можем его использовать по нашему усмотрению. Например, используя одну и ту же SSI-вставку, но с разными значениями определенной в ней переменной, мы получим различные результаты. Перед тем, как показать реальный пример использования переменных в SSI-включениях, я расскажу о некоторых командах, применяемых при работе с переменными. Во-первых, это команда печати значения переменной:

<!--#echo var="pic" -->

Ее выполнение приведет к тому, что в месте появления команды напечатается значение переменной pic, т.е. "picture.gif".

Переменная может участвовать в выражениях, в этом случае перед ней ставится знак '$', показывающий, что это именно переменная, а не просто текст. Вот пример:

<!--#set var="A" value="123" -->
<!--#set var="B" value="$A456" -->


После такого присвоения переменная B будет содержать строку "123456". Если же в текст понадобится просто вставить знак '$' или какой-нибудь из других специальных знаков, то его нужно предварить слешем, вот так: '\$'. В некоторых случаях для избежания двусмысленности значение переменной может быть заключено в фигурные скобки: "${A}".

Более сложное применение переменных возможно с использованием условных операторов, имеющих следующую форму написания:

<!--#if expr="condition" -->
<!--#elif expr="condition" -->
<!--#else -->
<!--#endif -->

где condition - условие для сравнения.

В зависимости от результатов проверки мы можем подставить тот или иной фрагмент кода. Допустим, мы можем проанализировать тип броузера пользователя и в зависимости от этого выдать либо код для Netscape Navigator-а, либо Internet Explorer-а. Это может оказаться полезным в некоторых случаях, когда невозможно сделать страничку, которая корректно отображалась бы в обоих броузерах. Вот пример использования условного оператора:

<!--#set var="Monday" -->
<!--#if expr="$Monday " -->
<p>Сегодня понедельник.</p>
<!--#else -->
<p>Что угодно, но не понедельник.</p>
<!--#endif -->


В данном случае условием проверки является существование переменной $Monday и, в зависимости от этого, подстановка того или иного HTML-кода.

Теперь давайте рассмотрим реальный пример применения SSI для формирования сложного документа из нескольких SSI-вставок. Вначале напишем текст основного HTML-документа, полагая, что SSI-вставки находятся в каталоге /ssi:

index.shtml

<!--#set var="title" value="Что такое SSI?" -->
<!--#set var="keywords" value="SSI, SHTML, CGI, Apache" -->
<!--#set var="description" value="Пример использования SSI." -->

<!--#include virtual="ssi/_header.shtml" -->

Здесь находится текст нашей странички.

<!--#include virtual="ssi/_footer.shtml" -->


Теперь напишем код для этих SSI-вставок:

_header.shtml

<html>
<head>
<title><!--#echo var="title" --></title>
<meta name="keywords" content="<!--#echo var="keywords" -->">
<meta name="description" content="<!--#echo var="description" -->">
</head>
<body>


_footer.shtml

</body>
</html>


Как видите, основной документ предельно упрощен и состоит из директив, устанавливающих значения переменных title, keywords и description, которые и будут подставлены в код странички при обработке SSI-вставок, определяющих код для верхней и нижней частей странички. Реальный код SSI-вставок обычно гораздо сложнее и может включать в себя большее количество определяемых переменных и сложных условий, формирующих окончательный вид странички.

Первое преимущество SSI с точки зрения дизайнера заключается в том, что при таком подходе web-мастеру, занимающимуся поддержкой сайта, можно не бояться случайно испортить дизайн. Элементы сложной верстки скрыты за счет использования SSI, и поддержка содержимого страничек становится гораздо более легким и приятным делом.

Второе, не менее важное преимущество, - это возможность мгновенной замены дизайна сайта, не требующая переделывания страничек с информационным содержанием сайта. Для смены дизайна достаточно переписать SSI-вставки, формирующие внешний вид сайта. В нашем случае это файлы _header.shtml и _footer.shtml.

От себя:
Когда я начинал работать с чистым HTML я просто страдал, когда нужно поменять баннеры на страницах. Заменить новостные блоки. Или изменить меню на сайте, когда страниц более 30. И на каждой надо поменяить ссылку и заново качать на сервер. Используя SSI - эти проблемы полностью себя исчерпали. Теперья собираю страницу по частям.
1. Новости отдельно.
2. Меню отдельно.
3. Реклама отдельно.
4. И т.п.
Т.е. страница состоит полностью из частей и любой блок можно модернизировать отдельно.
Очень полезно когда Вы еще далеки от программирования на php, и писать порталы далеко не можете. Любые вопросы как же начать работать с SSI пишите к нам в гостевую для читателей.

Содержание
Формы. Проверка информации, введенной в форму.
Формы широко используются на Интернет. Информация, введенная в форму, часто посылается обратно на сервер или отправляется по электронной почте на некоторый адрес. Проблема состоит в том, чтобы убедиться, что введеная пользователем в форму информация корректна. Легко проверить ее перед пересылкой в Интернет можно с помощью языка JavaScript. Сначала я бы хотел продемонстрировать, как можно выполнить проверку формы. А затем мы рассмотрим, какие есть возможности для пересылки информации по Интернет.

Сперва нам необходимо создать простой скрипт. Допустим, HTML-страница содержит два элемента для ввода текста. В первый из них пользователь должен вписать свое имя, во второй элемент - адрес для электронной почты. Если пользователь ввел свое имя (например, 'Stefan') в первый элемент, то скрипт создает выпадающее окно с сообщением 'Hi Stefan!'.

Что касается информации, введенной в первый элемент, то Вы будете получать сообщение об ошибке, если туда ничего не было введено. Любая представленная в элементе информация будет рассматриваться на предмет корректности. Конечно, это не гарантирует, что пользователь введет не то имя. Браузер даже не будет возражать против чисел. Например, если Вы ввведете '17', то получите приглашение 'Hi 17!'. Так что эта проверка не может быть идеальна. Второй элемент формы несколько более сложнее. Попробуйте ввести простую строку - например Ваше имя. Сделать это не удастся до тех пор, пока Вы не укажите @ в Вашем имени... Признаком того, что пользователь правильно ввел адрес электронной почты служит наличие символа @. Этому условию будет отвечать и одиночный символ @, даже несмотря на то, что это бессмысленно. В Интернет каждый адрес электронной почты содержит символ @, так что проверка на этот символ здесь уместна.

Как скрипт работает с этими двумя элементами формы и как выглядит проверка?

<html>
<head>
<script language="JavaScript">
<!-- Скрыть

function test1(form) {
if (form.text1.value == "")
alert("Пожалуйста, введите строку!")
else {
alert("Hi "+form.text1.value+"! Форма заполнена корректно!");
}
}

function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Неверно введен адрес e-mail!");
else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Введите Ваше имя:<br>
<input type="text" name="text1">
<input type="button" name="button1"
value="Проверка" onClick="test1(this.form)">
<P>
Введите Ваш адрес e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2"
value="Проверка" onClick="test2(this.form)">
</body>
</html>

Рассмотрим сначала HTML-код в разделе body. Здесь мы создаем лишь два элемента для ввода текста и две кнопки. Кнопки вызывают функции test1(...) или test2(...), в зависимости от того, которая из них была нажата. В качестве аргумента к этим функциям мы передаем комбинацию this.form, что позже позволит нам адресоваться в самой функции именно к тем элементам, которые нам нужны. Функция test1(form) проверяет, является ли данная строка пустой. Это делается посредством if (form.text1.value == "")... . Здесь 'form' - это переменная, куда заносится значение, полученное при вызове функции от 'this.form'. Мы можем извлечь строку, введенную в рассматриваемый элемент, если к form.text1 припишем 'value'. Чтобы убедиться, что строка не является пустой, мы сравниваем ее с "". Если же окажется, что введенная строка соответствует "", то это значит, что на самом деле ничего введено не было. И наш пользователь получит сообщение об ошибке. Если же что-то было введено верно, пользователь получит подтверждение - ok.

Следующая проблема заключается в том, что пользователь может вписать в поле формы одни пробелы. И это будет принято, как корректно введенная информация! Если есть желание, то Вы конечно можете добавить проверку такой возможности и исключить ее. Я полагаю, что это будет сделать легко, опираясь лишь на представленную здесь информацию. Рассмотрим теперь функцию test2(form). Здесь вновь сравнивается введенная строка с пустой - "" (чтобы удостовериться, что что-то действительно было введено читателем). Однако к команде if мы добавили еще кое-чего. Комбинация символов || называется оператором OR (ИЛИ). Команда if проверяет, чем заканчивается первое или второе сравнения. Если хотя бы одно из них выполняется, то и в целом команда if имеет результатом true, а стало быть будет выполняться следующая команда скрипта. Словом, Вы получите сообщение об ошибке, если либо предоставленная Вами строка пуста, либо в ней отсутствует символ @. (Второй оператор в команде if следит за тем, чтобы введенная строка содержала @.)

Stefan Koch. Перевод Радик Усманов. www.citforum.ru/internet/koch/tutorial.htm

Содержание
контакты
Дизайн студия "IDA-Design" www.ida-dbs.com
ICQ 293-056-466 - вопросы, консультации, помощь.
Гостевая книга для читаталей - http://ida-dbs.com/book/
Содержание
 

В избранное