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

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


[ Портал ] :: [ Дизайн-Студия ] :: [ Гостевая для читателей ] ::

Сегодня в номере:

 

Новости

Доброе время суток!

Рассылка давно не выходила, но за это время я набрался еще некоторого опыта в области создания WEB дизайна. К сожалению пришлось потерять около 100 подписчиков за это время, но думаю проиграли в этом только они. Ну а мы начнем двигать мои и возможно Ваши знания в области создания WEB сайтов.

Уважаемые читатели моей рассылки!
Набирая материал для рассылки, в первую очередь я стараюсь учитывать всё, что мне пригодилось при создании баннеров, сайтов, логотипов и прочей графики. Кроме того, каждая взятая статья из других источников представляла для меня какой либо полезный материал для изучения, поэтому этот материал я стараюсь передать своим подписчикам. Другое дело, одним это может пригодиться, а для других это уже известно 100 лет назад.

Поэтому, мне хотелось, чтобы Вы в гостевой для читателей, чиркнули несколько строк, что в первую очередь интересно было бы для Вас. Я бы с удовольствием это учел.

С одной стороны мне удобно вести рассылку, что хочу, то и ворочу, другое дело нравиться ли это Вам.

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

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

С уважением Дмитрий.

 

Ставим Apache

Еще совсем недавно я самостоятельно (правда пришлось хорошо подумать) научился устанавливать на сервере движок DataLife Engine, благодаря которому заработал портальчик для мобильных телефонов. Наполнять контент и управлять им можно с такой легкостью, что даже не требуются дополнительные знания HTML, все делается в встроенном редакторе, который почти идентичен всем известному Microsoft Word. Если конечно пользователь знает язык HTML, то разработка скажем портала на основе этого движка вообще будет простой. Но в этой рассылке я хочу начать с другого.

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

Поискав в сети информацию я понял, что нужно поставить несколько программ, которые надо скачать, чтобы начать работать, как на сервере. Это и для управления MySQL и т.п. Тогда я плюнул и не стал заморачиваться на этом.

Однако времена идут и пользователи все больше хотят получать простые и управляемые сайты. Такие сайты просто не могут существовать без баз данных, управляющих скриптов и т.п. вещей. Одним из популярных на данный момент является PHP и MySQL, благодаря которым работают большинство порталов интернета. Однако запустив в браузере такой сайт, на своем компьютере, Вы не получите никакого результата.

Вот тут мне попался очень полезный человек, которому огромное спасибо, который и вывел меня на программу

Денвер

Скачав по сети совершенно бесплатно данную программу, Вы получаете сервер Apache на своем локальном компьютере. Данная программа имеет размер всего чуть больше 3Мб и уже позволяет без проблем обрабатывать базы данных и делать сайты на основе CMS движков.

Установка очень проста. Всего несколько минут и Ваш сервер начнет работать, при этом конечно же не потребуется никаких дополнительных мощностей компьютера, Вы работаете в той же системе Windows + еще работает Apache, который Вы всегда можете выгрузить и остановить.

Установка очень проста, описано Все у них на сайте и делайте согласно всех инструкций. Программа запросит создание дополнительного виртуального диска, например Z, не пугайтесь, все в порядке и лишних проблем у Вас с этим не станет. А если Вы серьезно захотите заниматься созданием сайтов, то тогда Вам просто необходим Денвер.

Когда я установил Денвер, то сразу не сообразил, а что дальше. А дальше все просто, берете свой сайт, пусть даже пока там не будет php, а будет он даже в чистом html, копируете его в папку

C:/WebServers/Home/Test1.ru/www/

Если там что-то было, удалите. Теперь Ваш сайт будет доступен по адресу http://test1.ru, для этого конечно же запустите сервер, с помощью ярлыка на рабочем столе "Start Servers". Вы увидите пёрышко в правом нижнем углу на Вашем мониторе, рядом с часиками . Значит сервер Apache находится в работе. При этом Вы совершенно свободно можете запускать любые другие программы и посещать сеть интернет. В частности, читать нашу рассылку и учится всему этому.

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

Рассмотрим первую портальную CMS систему, которая распространяется бесплатно и обладает довольно неплохими качествами для создания портала RUNCMS.

© IDA-Design

наверх^^

RunCMS + скин от нашей студии

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

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

Давайте начнем ставить движок.

1. Запустите Денвер.

2. Скачайте все папки из архива движка в каталог C:/WebServers/Home/Test1.ru/www/

3. Запустите браузер Internet Explorer и наберите в нем адрес localhost, после чего Вы попадете на страницу утилит Денвера. Найдите там ссылку: phpMyAdmin - администрирование СУБД MySQL, Вы попадете в панель управления phpMyAdmin. Такая же панель находится на Вашем сервере у кого Вы хоститесь.

4. Следующим этапом будет создание базы данных для движка. Введите в поле Создать новую БД название базы, например runcms и нажмите кнопку Создать. Сервер отработает и покажет Вам, что база данных с именем runcms создана. Теперь Вы можете закрыть это окно браузера.

5. В новом окне браузера запустите адрес http://test1.ru, Вы попадаете в режим установки движка. 1,2 пунк понятны без проблем, только русский язык выберите (ну если знаете, то английский без проблем). 3 шаг - это тестирование сервера. Должны стоять все галочки и страница выдаст Вам, что ошибок не найдено. Следующий этап это заполнение полей:

Имя или IP-адрес сервера базы данных (hostname) - пишите localhost

Имя пользователя - пишите root

Пароль к базе данных - оставляете пустым поле

Имя базы данных (Database Name) - пишите runcms

Прификс таблиц - пишите runcms

Использовать посточнное соединение с сервером БД - выберите нет

Физический путь - должен быть например таким если у Вас при установке денвера был выбран виртуальный диск Z - z:/home/test1.ru/www

Виртуальный путь (URL) - http://test1.ru

Ну а дальше все без проблем, вписывайте имя пользователя, т.е. себя, как администратора и пароль. Портал будет установлен.

После чего Вы входите под своим именем и выберите меню администрирования.

Ну а как дальше работать с движком, читайте мануалы по RUNCMS.

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

скачать скин>>>

Чтобы установить скин, скопируйте полностью папку ida-dbs в директорию движка Themes. В режиме администратора в основных настройках выберите скин по умолчанию - ida-dbs и поставьте галочку - изменить для всех участников. Для завершения нажмите кнопку обновить.

С движком уже идет 5 скинов, поменяйте шапки или поставьте свой логотип и начинайте наполнять свой портал.

Про установку на сервер, мы поговорим в следующих рассылках.

Обещать не хочу, но попозже мы познакомимся с установкой движка Joomla. Вот на нем можно создавать корпоративные сайты с полностью управляемым контентом.

© IDA-Design

наверх^^

Шаблон сайта для дизайн студии по изготовлению баннеров

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

В разрабатываемой программе будет предоставлен полный материал по продвижению студии, сотрудничеству, выполнению заказов, а также партнеры получат полный набор портфолио.

На данный момент Вы можете поработать с шаблоном, разработать свой контент.

Шаблон работает с использованием PHP и CSS, поэтому Ваш хостинг должен поддерживать такую услугу.

Скачав архив, Вы сможете подробнее ознакомиться с условиями установки на сервер и его возможностями. А также используя описанный Выше в этой рассылке Денвер, Вы сможете протестировать шаблон на локальном компьютере, т.к. шаблон полностью управляется средствами РНР.

Шаблон содержит:

  • Готовый контент
  • Возможность добавления кратких и полных новостей из специальной формы
  • Форму обратной связи
  • Форму заказа услуг

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

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

наверх^^

Элементы для сайта. Объемный 3D шар.

Порой часто нужно придать сайту какой-нибудь индивидуальности и стиля. Все эти надоевшие иконки, линии и т.п. элементы стали приедаться. Именно поэтому для своей студии я выбрал такой элемент, как объемный зеленый шар. Воплотил его в логотип и добавил в качестве элементов на странице сайта. Правда признаюсь первая идея мне пришла в голову при создании торговой площадки platashans.ru. Где я тоже использовал золотой объемный шар. К счастью они отказались использовать в логотипе своего сайта, а использовали свой логотип компании, и я решил свою же идею воплотить в свою студию. Т.к. шар очень идеальный элемент для брэнда компании.

Как красиво обыгрывает свой шар Билайн, играя всего с двумя цветами.

Почти тоже самое можно сделать с объемным шаром, лишь бы хватило фантазии.

Свой шар я рисовал используя программу для создания 3D текстов Ulead Cool 3D. В программе заложен стандартный набор объемных фигур: шар, эллипс, куб и т.п. Поэтому, поставив к себе программу, Вы сможете без труда создать свой элемент для сайта, например в виде кубика или конуса. Делается там все элементарно и просто.

Но давайте попробуем нарисовать объемный шар в Photoshop.

Создайте новое изображение в цветовой модели RGB (Ctrl+N). Размер особого значения не имеет, но лучше не ставить его больше 300x300 пикселов.
Сразу создайте новый слой (Shift+Ctrl+N). На нем, используя инструмент Elliptical Marquee (Эллиптическое выделение), создайте выделение в форме круга и залейте его любым цветом (горячая клавиша инструмента заливки — G). В нашем случае это зеленый.

Для того чтобы реализовать на будущем шаре игру света, воспользуемся фильтром Lighting Effects (Эффекты света): Filter > Render > Lighting Effects (Фильтр > Освещение > Эффекты света). Применяемые параметры фильтра показаны на рисунке

Для увеличения реалистичности пустим по шару блики: Filter > Render > Lens Flare (Фильтр г Освещение * Блик). Параметры фильтра отображены на рисунке.
При желании можно применить данный фильтр повторно, используя при этом другие настройки.

Шар почти готов. Улучшим его, добавив тень. Сделаем это с помощью стиля Drop Shadow (Внешняя тень): Layer > Layer Style > Drop Shadow (Слой > Стили слоя > Внешняя тень). Мы применили его с настройками, изображенными на рисунке
Эффект сделан полностью. Мы получили объемный шар. Подобным образом можно создать практически любую примитивную фигуру, например эллипс, конус и т. д.


 

Честно сказать мне больше нравится создавать 3D объекты в 3D редакторах. Урок взят и переделан мною из книги "Гурский Ю. А., Васильев А. В. Photoshop CS. Трюки и эффекты".

Но все-таки для элементов дизайна сайта, данный шарик можно использовать.

© IDA-Design

наверх^^

Скрипты - "Часики на страничке"

Нашел симпатичный скрипт в своем архиве.

Думаю сложности в установке не вызовет, просто поставьте код к себе на страницу и любуйтесь часами.

<html>
<head>

<script>
<!--


function showTime()
{

dayTwo = new Date();
hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes();
scNow = dayTwo.getSeconds();
miNow = dayTwo.getTime();
if (hrNow == 0)
{
hour = 0;
ap = " AM";
}

else if(hrNow <= 11)
{
ap = " AM";
hour = hrNow;
}

else if(hrNow == 12)
{
ap = " PM";
hour = 12;
}

else if (hrNow >= 13)
{
hour = (hrNow - 12);
ap = " PM";
}

if (hrNow >= 13)
{
hour = hrNow - 12;
}

if (mnNow <= 9)
{
min = "0" + mnNow;
}

else (min = mnNow)
if (scNow <= 9)
{
secs = "0" + scNow;
}

else
{
secs = scNow;
}
time = hour + ":" + min + ":" + secs ;


if(document.all)
{
document.all.clock.innerHTML=time;
document.all.clock1.innerHTML=time;
}


if(document.layers)
{
document.clock.document.write('<p style="\"font-size:10px;" font-weight:bold; font-family:Verdana; color:#a0a0a0;\">' + time + '<\/p>');

document.clock1.document.write('<p style="\"font-size:10px;" z-index:-1; position:absolute; top:1; left:1; font-weight:bold; font-family:Verdana; color:#11a6ff;\">' + time + '<\/p>');
document.clock.document.close();
document.clock1.document.close();

}


setTimeout('showTime()', 1000);

}


// -->
</script>

<body onLoad="showTime()">
<div id="clock" style=""xposition:" absolute; top: 115; left: 13; color: #11a6ff; font-family: Verdana; font-size: 20px; font-weight: bold; width: 110; height: 33">
</div>
<div id="clock1" style=""xposition:" absolute; z-index: -1; top: 117; left: 15; color: #a0a0a0; font-family: Verdana; font-size: 20px; font-weight: bold; width: 120; height: 30">
</div>

</body>
</html>

наверх^^
 

В избранное