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

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


Информационный Канал Subscribe.Ru

Рассылка от
Design-Forever.ru

 Выпуск №17    
Сегодня в выпуске:
 - Новости сайта
 - Шаблон №17
 - Графика [вопросы и ответы]
 - Создание WAP сайта
введение
выбор хостинга

 - Размеры сайта или ошибка начинающих
 - О линиях
- Бонус (5 песен в формате MIDI)

горячая новость

У нас открылся на сайте форум. Теперь все свои проблемы Вы можете писать там. Спрашивайте, общайтесь, спорьте, высказывайте свои мысли...
 Новости сайта
1. После того, как вышел предыдущий номер рассылки, мне пришло письмо от одного нашего читателя, где он сделал мне одно замечание. Сейчас на дворе 2005 год, а я указал на программы 2000 года. Большое спасибо за такое замечание. Теперь я буду стараться корректировать в какой-то степени статьи. Указывать более новые версии и т.п. Если у Вас есть еще замечания, то пишите. Мне он правильно указал: "Подписка должна быть для людей".
2. Начинаю постепенно наполнять сайт Mobile.Design-forever.ru - уже есть первые главы, которые я начал размещать уже и в рассылке. Так, что если у Вас есть мобильник с WAP и есть интернет, пора приступать к созданию собственных WAP сайтов.
3. Теперь для наших подписчиков доступны бонусы - это музыка, картинки и т.п. для сотовых телефонов. А также резанные MP3 для звонков в мобильных телефонах. Сегодня Вашему вниманию полифония 2Unlimited.
4. Мы прдолжаем принимать заявки на изготовление баннеров. Для наших подписчиков определенные скидки, Вы только напишите, что Вы подписчик и закажите баннер. Для Вас это будет дешевле.
 
54. Уважаемы подписчики, мы бы хотели знать, что Вас интересует в большей степени. Что нам представлять Вам, какой материал. Пишите нам info@design-forever.ru 
 
6. Любой желающий может вступить в партнерскую программу с комиссией в 50%. Т.е. с одной продажи Вы получаете сразу 50% за проданный товар. Этот товар - хостинг от StaryOskol.net. Данный хостинг продавать довольно легко, ведь он отличается высоким качеством и доступными ценами. Кроме того, Вы получаете с хостингом - форум, гостевую, интернет-магазин и многие другие нужные скрипты. Да и еще домен в придачу дадут бесплатно. Хостинг без проблем позволяет размещать WAP сайты.
Покупайте сами или начните продавать уже сегодня. Подробнее>>>
  Советуем посетить
Фильмы, музыка, программы, обзоры - все это доступно по адресу Mihas.Net. Еще там можно пообщаться в дружеской атмосфере с обитателями форума и стать самим обитателем форума. Темы очень интересные и разнообразные: где найти файлы, жизнь после смерти и многое другое. Сайт находится в Германии, поэтому процентов 70 посетители этой страны. Заходите, мне было очень интесно кое-чего почитать. Да и скажу Вам честно, это не на правах рекламы, это на правах заслуженного внимания.
 Шаблон №17 
Шаблон №17 с использованием CSS.

[перейти и скачать]

примечание: в шаблоне используется таблица CSS стилей. Используются "rollovers" кнопки с использованием эффекта анимации. Шаблон можно использовать для мелких фирм и организаций.

 Графика [вопросы и ответы]

Как сделать кнопку "Rollovers" - или меняем одну картинку на другую, при наведении курсора.

Для того, чтобы на Вашей странице при наведении курсора мыши на картинку, которая является в свою очередь ссылкой, картинка слегка (а может и не слегка) изменялась, для этого нужно сделать кнопку "Rollovers".
Для этого можно воспользоваться программой Adobe ImageReady (которая поставляется с Photoshop). 
Для начала создадим новый документ размером 150х60 пикселей. На нем напишем слово "Главная" каким-нибудь интересным шрифтом (это не обязательно - интересным) белым цветом. Придадим контур тексту, для этого воспользуемся командой LAYER -> LAYER STYLE -> STROKE, где укажем цвет (color) - черный, толщину (size) в 1 пиксель.
Далее, придадим эффект тени: LAYER -> LAYER STYLE -> DROP SHADOW.
Получившуюся картинку будем считать исходной, или назовем её ОСНОВНОЙ. Т.е. когда Ваш сайт загрузится, Вы увидите её первой.
Теперь приступим к созданию картинки, которая будет, когда на неё наведешь курсор мыши. Для этого изменить нужно ОСНОВНУЮ картинку.
Для этого нам потребуется создать новый слой. Вызываем окно управления WINDOWS -> ROLLOVERS, где нажимаем на иконку CREATE ROLLOVERS STATE, после этого появляется новый слой. Этот слой отвечает за действие, когда наводишь курсор мыши на кнопку.
Теперь изменим картинку: клавишами "стрелки" на клавиатуре переместим текст вниз (один раз нажать), а затем вправо (один раз нажать) и уменьшим немного размер тени, в окне DROP SHADOW поставим дистанцию (DISTANCE) равную 2.
Далее, нам нужно сохранить для WEB. Вызываем команду FILE -> SAVE OPTIMIZET AS..., где пишем название файла.
Тут есть две тонкости. Вы можете сразу сохранить в формате HTML и ImageReady сделает уже готовую страницу, а можете сохранить только, как рисунок, программа сама создаст Вам два имиджа, которые затем Вы уже можете вставить в Dreamweaver.
Пример Вы можете посмотреть на нашем сайте http://design-forever.ru/graph/other/rollovers.shtml  
Источник: http://design-forever.ru 

 Создание WAP сайта

Введение.

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

Но как заставить телефон увидеть Ваш собственный сайт?

С этим мы попробуем разобраться.

Итак, какие нужны инструменты для создания WAP сайта? 

1. Редактор, в котором Вы будете верстать свою страничку.

2. Браузер, в котором Вы будете смотреть на то, что получается.

3. Телефон, с GPRS в котором есть WAP браузер, чтобы оценить работу в действии.

4. Хостинг, на котором Вы будете размещать свой сайт.

5. Ну и программки следующего плана:

работа с музыкальными файлами - чтобы их можно было послушать, конвертировать

с графическими файлами - для создания картинок и изображений.

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

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

Выбор Хостинга

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

Для начала Вы можете воспользоваться бесплатным хостингом, который поддерживает работу WAP страничек. В качестве примера могу привести популярные хостинги: narod.ru, nm.ru, fatal.ru, WAPHosts.net, tagtag.com, wappy.to. Использовать такие хостинги удобно для проб и домашних страничек.

Но на бесплатном хостинге Вы конечно не сможете так развернуться, как если бы Ваш Хостинг будет платным. Например, закачка мелодий mp3 и видео файлов. Кроме того, Ваш сайт будет иметь имя типа yourname.narod.ru, что не всегда стильно.

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

Если же у Вас есть уже платный Хостинг на котором у Вас уже размещен сайт и Вы вдруг решили сделать WAP версию своего проекта, то как правило выделяют поддомен с названием wap. И Ваш WAP сайт будет носить имя wap.yourdomen.ru. Хочу сразу сказать, что хостинг должен поддерживать создание поддоменов.

Многие крупные сайты уже позаботились для создания специальных «мобильных» версий своих сайтов. В качестве примеров могу привести парочку любимых мною сайтов и их wap версий – polifonia.ru (wap.polifonia.ru), www.activ.kz (wap.activ.kz). Люди предполагают, что в течении нескольких лет, WAP станут очень популярны и е-коммерция станет широко доступна через мобильные телефоны.

Если Вы затрудняетесь в выборе платного хостинга могу посоветовать StaryOskol.net – низкие тарифы, качество и поддержка на высоком уровне.

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

Как правило, любой нормальный хостинг имеет свой файл менеджер и Вы попадая в свой аккаунт, прямо непосредственно через окно браузера, без проблем можете закачивать файлы на хостинг. Но конечно более удобным является закачка файлов через FTP. Для этого существуют специальные программы, а также обыкновенные командоры типа: far, total commander. Последним, я и пользуюсь, т.к. он очень удобен в настройках и прост в использовании.

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

    Одним из самых неприятных факторов в разработки саита (начальной страницы) является зависимость ее внешнего представления от конфигурации программного и аппаратного обеспечения каждого отдельного пользователя. Сайт который "отменно" выглядит на вашем компе, будет плохо смотреться на компах других посетителей вашего сайта а то и вообще... .
     Как правило это зависит от видов браузеров, от настроек пользователя на своем компе: шрифтов, размеров, цветов и.т.д . Большинство посетителей различает дисплеи лишь по размерам монитора (по разрешению) и по цветовым возможностям. Тем не менее важно помнить, что различия на этом не заканчиваются. 
    Некоторые пользователи могут смотреть ваш сайт на экране телевизора . Также некоторые могут смотреть с помощью PDA (Personal Digital Assistant, персональный цифровой секретарь). Окна браузеров можно изменять до любых размеров, вплоть до максимального размера экрана монитора.

      Особую сложность для разработчиков представляет разработка для рабочего пространства браузера неизвестного размера, в частности она трудна для авторов, обычно имеющих дело с печатными страницами. В Web-дизайне нет жестких правил и однозначно верных подходов. Ваши решения должны ориентироваться на потребности аудитории и назначени сайта его тематики.       
     Первым шагом при определении вероятного размера вашей Web-страницы должно стать определение максимального пространства, обеспечиваемое монитором. Компьютерные мониторы имеют различные стандартные размеры и обычно измеряются в дюймах. Некоторые типичные размеры монитора - 15 , 17, 19, 20, 21 я не говорю уж об 13 и14 дюймовых которые сейчас вряд ли используют, а  хотя как знать, ну да ладно....
       Важным фактором в просмотре страницы является разрешение монитора - общее число пикселей на экране. Чем выше разрешение, тем более детальным может быть изображение. Зная возможное число пикселей, вы можете создавать в соответствии с ним изображения и элементы страницы.
    Ниже представлены некоторые стандартные значения разрешения мониторов, наиболее подходящие для просмотра страниц.

640x480
800x600
1024x768 (одни из подходящих разрешений для просмотра сайта да и для работы в целом)
1280x1024
1600x1200

Разрешение связано с размером монитора, но не обязательно определяется им. В зависимости от установленной видеокарты, которая управляет монитором, можно иметь несколько вариантов разрешений. Например, монитор 17" может иметь разрешение 640x480-1280x1024 (оптимальные варианты) пикселей и выше.      Важно помнить, что чем выше разрешение на данном мониторе, тем больше пикселей в имеющемся пространстве экрана :) (тем "сильнее" загружена ваша видюха ну если у вас не Gef 3\4 :)). В результате пиксели становятся меньше и соответственно уменьшаются изображения и другие элементы страницы.

   Если вы создаете графические изображения и элементы страниц на мониторе с относительно высоким разрешением, скажем, 1280x1024, будьте готовы к тому, что все они будут выглядеть значительно более крупными на стандартном мониторе 15" с разрешением 640x480. Именно по этой причине измерения в Web производятся в пикселах, а не в дюймах. То, что на вашей системе представляется величиной в дюйм, на мониторах других пользователей может выглядеть больше или меньше. Когда вы работаете с пикселами, вы знаете, каковы размеры элементов относительно друг друга.

    В сегодняшнее время сайт лучше подгонять под разрешение 800-600 , 1024-768 это наиболее удачливый вариант.  Хотя можно и задать размеры страницы в процентах тогда в зависимости от разрешения экрана у посетителя, страница будет выдаваться на весь экран, ну это уже другой вопрос.... .

Автор: Вагапов Эдуард   URL: www.web-masteru.com

 О линиях

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


 

Вот такая она, в форме канавочки. У линии есть много разных параметров:

(1) <Hr align="right"> (center или left)
(2) <Hr width="30%"> (ширина линии в процентах/пикселях)
(3) <Hr size="6"> (толщина линии)
(4) <Hr NoShade> (отмена объемности)
(5) <Hr color="cc0000"> (цвет линии, только в IE)


Выглядит все это так - Первый (1):


Второй (2):


Третий (3):


Четвертый (4):


Пятый (5):



Вот и вся премудрость с линиями. Естественно, эти параметры могут употребляться одновременно.

Не злоупотребляейте параметром Color, т.к. он действует только в Интернет Иксплорер (если вам так хочется все же цветную линию, то сделайте, допустим красную картинку 1x1 пиксель и вставьте ее в свой документ. Тут вам приходятся параметры картинок height и width. Пусть height=1, а width=500 - вот вам и линия:). 

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

 Бонус
2Unlimited в формате MIDI (5 песен) Вы можете скачать прямо здесь и сейчас >>>
 

Теперь Вы получаете 50% с каждой продажи хостинга!


Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора
Подписан адрес:
Код этой рассылки: comp.design.webbanner
Отписаться
Вспомнить пароль

В избранное