Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > ..::::::Web-art::::.. ПРАКТИКА


Автор: dr.ZmeY 17.6.2004, 22:27
Вот, одно время я загорелся это сделать, начал с теории... Но потом поступил в аспирантуру, и стало не до этого... да и вообще, я как бы позабыл про своё обещание... Приношу свои запоздалые извинения. Итак - ПРАКТИКА


ЗЫ: Это не FAQ, по этому на вопросы отвечать тут не буду, задавать их здесь тоже нельзя, для этого существует форум. Это нечто вроде мини-мануала, где я попытаюсь помочь начинающим создать свой сайт. Я уже четыре года не занимаюсь дизайном "профессионально", и поэтому кое в чём сам возможно подотстал, чего-то подзабыл, но инструкция, которую я излагаю, призвана всего лишь избавить новичков от наступания на неизбежные грабли.



Автор: dr.ZmeY 17.6.2004, 22:43
INTRO

Вернёмся немного назад... Нам нужен сайт. Сперва, необходимо разобраться для чего, а точнее для кого, на какую аудиторию будет рассчитан данный ресурс. Нельзя сделать сайт интересным для всех. Одно дело, если вы создаёте сайт по заказу, тогда вы уже достаточно опытны и весь этот бред вам не нужен... Если вы просто решили обзавестись хомячком (это такой американский бзик, там думают, что иметь хомэпагу это круто, и она есть почти у каждого, несмотря на то, что посещений на таких "шедеврах" не более ноль целых хрен десятых в год), то также, эта писанина не для вас, никому не интересно читать о том, когда у вас первый прыщ вскочил на заднице или как вас впервые лишил девственности начальник, за то, что вы не вовремя предоставили ему отчёт... Самое большое заблуждение строителей хомячков - это то, что наличие сайта в Интернете сможет повысить популярность его автора, добавит ему знакомых и он станет крутым мачо для соседских девчонок... это всё БРЕД, скорее всего никто вашего сайта не увидит и не оценит.
Итак, сайт может быть коммерческим или клуб по интересам (некоммерческий). Коммерческий сайт - это либо Интернет-магазин, или сайт вашей конторы, т.е. корпоративный вэб-сайт. Корпоративный сайт может совмещать в себе интернет магазин и сайт фирмы. Но самые интересные ресурсы (ИМХО) - это некоммерческие (например наш форум biggrin.gif ). В любом случае нужно определиться с аудиторией читателей/посетителей или клиентов сайта. А сегодня - это очень требовательная публика, и когда говорят, что от дизайна мало что зависит, главное контент (содержимое), не верьте, как говорится в русской пословице "Встречают по одёжке...".

ЗЫ: перед переходом к следующему посту (посты - это типа маленьких глав, я не претендую на книгу или faq по сайтостроению и даже на авторство некоторых высказываний, кое-что я где-то вычитал, но не помню где, я просто надеюсь, что всё, что тут будет представлено, кому-нибудь поможет) прочитайте соседний мой топик "WEB-ART теория".

Автор: dr.ZmeY 17.6.2004, 22:56
ИНСТРУМЕНТАРИЙ

Для сайтостроения нужно много дорогого и не очень софта. Начну, по мере применяемости:
1. Графические редакторы: Adobe PhotoShop - однозначно, но ещё, неплохо бы иметь Macromedia Fireworks MX, CorelDRAW/Adobe Illustrator, Macromedia Flash MX.
2. WYSIWYG - редактор... Только Macromedia Dreamweaver MX, он создаёт наиболее корректный код, хотя пользоваться нам им придётся только на начальном этапе проектирования, а именно визуальной сборке макета сайта. Плюньте в наглую рыжую морду тому, кто кричит, что WYSIWYG - must die, а Блокнот - forever. Видели мы таких умников, вот пусть они в Delphi и VC++ не пользуются палитрой компонентов а только на WinAPI кодят, чтоб им всю жизнь PaintBrush снился.
3. WEB-сервер, для ленивых сойдёт и "ПАРШЕР" http://parsher.ru , а остальным, качать Апачи, Муську, РНР и всё остальное по отдельности, а потом устанавливать и настраивать вручную...
4. Редактор кода. Тут можно воспользоваться всё тем же Dreamweaver'ом, но я бы не советовал, уж больно он тяжеловат, и частые его запуски отрицательно скажутся на нервной системе :blink: , Блокнот - неее, он слишком убогий, лучший редактор кода, на мой взгляд - PHP Expert Editor http://www.ankord.com , почему, понятно будет позже....
5. И, наконец, как минимум три основных браузера: IE6.x, Opera 7.xx и Netscape 7.x/Mozilla 1.x. Это добро необходимо для тестирования странички...

Автор: dr.ZmeY 17.6.2004, 23:09
ПЛАНИРВКА

Если вы уже знаете, что за сайт хотите сделать, то стоит подумать о его имени, и о доменном имени тоже. Рекомендую короткие, легко запоминающиеся названия. Необходимо заранее продумать структуру сайта, возможность обратной связи с пользователем (гостевая книга, форум, чат..., рассылка), а также его разметку. Что касается разметки страницы (сетки), то вариантов множество, ниже я приведу только несколько, наиболее распространённых, но это не значит, что обязательных, тут главное удобство пользователя. Никто не говорит, что логотип должен быть в левом верхнем углу, а меню не может быть по центру страницы или по её диагонали... Главное придумать так, чтобы изыски дизайна не мешали восприятию и поиску информации (а пользователь заходит туда именно за этим), а наоборот - помогали...

ЗЫ: не планируйте разметку жёсткой, сейчас мало кто может похвастать разрешением 800х600, и наблюдать пустоту на экране - мало кому понравится... Думаю (возможно ошибаюсь), что планировка страницы под это разрешение - пережиток прошлого, ну давайте тогда подгонять страницы под КПК, там кажется 320х210 экран... B) Конечно, Стараться, чтобы страница корректно умещалась на малом разрешении без горизонтального скруллбара приветствуется, но если небольшая прокрутка при этом возникает, то ничего страшного в этом нет...


Извеняйте, остальное позже... Будут домашние задания...

Автор: dr.ZmeY 18.6.2004, 21:58
ПРОЕКТИРОВАНИЕ и СТРУКТУРИРОВАНИЕ

Этап проектирования - это один из наиболее важных этапов в сайтостроении. В первую очередь необходимо определить концептуальную модель сайта. Т.е. заранее определиться со стилем будущего шедевра. Он должен соответствовать основному назначению сайта и быть рассчитан на беззаговорочное понимание пользователя с любым уровнем подготовки, но ориентированных на работу именно с вашим ресурсом.
Далее необходимо построить блок-схему навигации. Тут нужно учесть, что юзер не должен ломать голову над вопросами "на какой странице я нахожусь?", "Что делать дальше?", "Как мне снова вернуться на эту страницу?", "Как выйти к главной странице?". Это должны обдумать за него ВЫ.
Пример построения такой блок-схемы приведён ниже.
Проектирование информационного наполнения. Вы должны представлять себе будет выглядеть контент, в какой форме и в каких стилях он будет изложен на странице, и т.д... Тут, для наибольшего удобства пользователя необходимо разработать внятную структуру сайта, сделать её очевидной для пользователя, предоставить ему информацию, в какой именно части сайта он находится и куда может двинуться дальше, предоставить ему единообразное меню навигации, Короче делать всё, чтобы ему было удобно, сухо и чтобы он не заблудился.
Структура информации на сайте может быть последовательная, иерархическая, ассоциативная и комбинированная (объяснять не буду, термины, думаю, понятные).
Создание прототипа. А именно модели сайта на бумаге, а позже и макетов страниц без движка в HTML. Поясню: Необходимо взять столько листов бумаги, сколько это нужно для отображения концепции сайта и сделать наброски основных страниц. Далее, необходимо пронумеровать все страницы и показать на другом листе элементы навигации между страницами и иные элементы управления... После показать эту модель заинтересованному лицу (потенциальному пользователю), и гордо выслушать его критику, потом переделать и переделать, пока он не будет доволен.

Автор: dr.ZmeY 18.6.2004, 22:09
ПРИСТУПАЕМ К ДИЗАЙНУ

Вы уже выбрали разметку, название, доменное имя и стилистику сайта, а также сделали бумажные наброски которые нам помогут? Прекрасно, тогда открывайте свой любимый графический редактор и приступайте к созданию дизайна.
В первую очередь определитесь с размером полотна. По горизонтали оно должно быть 778 пикселей, а по вертикали пусть будет 1000, если много, то обрезать никогда не поздно.
Выделите области для основных элементов сайта (см. главу "ПЛАНИРОВКА") и начинайте рисовать, рисовать всю страницу, с текстом, картинками, меню, логотипом... короче нужно нарисовать сайт.
В следующей главе я расскажу как разрезать его на слайсы и оптимизировать каждый из них, чтобы уменьшить размер графических файлов в вашем сайте и тем самым облегчить его... А пока получите домашнее задание...

Автор: dr.ZmeY 18.6.2004, 22:24
ДОМАШНЕЕ ЗАДАНИЕ

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

1. Сайт фирмы продающей козлиный навоз
2. Сайт Интеренет-магазина торгующего запчастями к БМП-3
3. Сайт посвящённой философским учениям Ельцина Б.Н.
4. Сайт противников Камасутры (не адульт!!!)
5. Сайт частных объявлений наёмных убийц

Продолжу следующие главы, когда начнут появляться "Домашние работы"

ЗЫ: Доменное имя выбранное для домашнего задания не должно быть зарегистрировано в сети, проверить это вы можете на http://eurohoster.net

ЗЫ2: Если по каким либо причинам вы не можете выложить графическую версию дизайна и навигации высылайте их мне по почте dr-zmey{@}vingrad.ru, но перед этим создайте топик, я вложу в него ваши файлы (высылайте в формате JPEG-70% или PNG-8)

Автор: baklan 5.11.2004, 07:30
Цитата
Сайт посвящённой философским учениям Ельцина Б.Н.

http://kpn55.fatal.ru/e/e.gif

Автор: boombick 22.4.2005, 14:58
Цитата(baklan @ 5.11.2004, 07:30)
Цитата
Сайт посвящённой философским учениям Ельцина Б.Н.

http://kpn55.fatal.ru/e/e.gif

Боже мой....
Ужас какой-то... smile

Автор: dihlofos 15.1.2006, 08:40
А продолжения не будет?... dr.ZmeY хотелось бы ещё уроков, интересно всё-таки.

Автор: UpL1nK 19.1.2006, 10:19
С удовльствием прочитал данный мини-мануал =)
Жалко тока что Змей остановился =((
Спасибо за то что есть , тоже труд
Respect

Автор: dihlofos 24.1.2006, 20:42
Ну, что ж...несмотря на то, что сенсей нас покинул, я все-таки завечу свою веб-пейдж, в несколько сыром виде
Впринципе, можно было бы ещё доработать....
Добавлено @ 20:46
бл...картинка превышает 120к. а ка её можно опубликовать?
Добавлено @ 20:52
dr.ZmeY, а тебе ещё можно высылать работы или халява кончилась?

Автор: iamyri 18.3.2006, 15:49
Да практика это важно. Только хочу добавить, что без SEO - раскрутки и оптимизации все теряет всякий смысл. Что толку от сайта, если о нем никто не знает кроме хозяина да пары друзей. Можно смело сказать, что этот сайт просто не существует.

Автор: Guedda 18.3.2006, 16:03
Ну и расшируй, пожалуйста для непросвещенных, что такое SEO?

Автор: DezmASter 3.4.2006, 21:06
Guedda, опитимизация сайта для поисковиков, это если дословно

Автор: DezmASter 13.9.2006, 21:11
могу я продолжить smile

Автор: Sportsmen 8.11.2006, 18:37
Я нарисовал! Как дальше резать, продолжите кто-нибудь?!

Автор: LordVanBoom 19.12.2006, 16:34
Требую продолжения.
Тов. baklan, рисуй еще - станешь дизайнером на www.mail.ru

Автор: DezmASter 19.12.2006, 19:00
LordVanBoom, а кто сказал, что на mail.ru работают крутые дизайнеры? smile

Автор: Str!pe 20.12.2006, 21:39
DezmASter, 

Ты иронии не понял
Цитата(Sportsmen @  8.11.2006,  18:37 Найти цитируемый пост)
Как дальше резать, продолжите кто-нибудь?!


Фотошопом. Тут уменьшил - сохранил, там кусок сохранил или разрежь инструментом и сохрани Save for Web

Автор: LordVanBoom 22.12.2006, 13:00
DezmASter, ты хочешь сказать что вот "это" http://kpn55.fatal.ru/e/e.gif круть?

Айда пару таких рисунков и можешь резюме в майл.ру подавать - возьмут!  smile 

Автор: fileditWRRlVizor 1.2.2007, 23:19
Цитата(baklan @ 5.11.2004,  07:30)
Цитата
Сайт посвящённой философским учениям Ельцина Б.Н.

http://kpn55.fatal.ru/e/e.gif

походу это был стёб smile 

Автор: DezmASter 3.2.2007, 02:30
LordVanBoom, жуть smile

Автор: Sportsmen 15.4.2007, 00:02
Цитата(Str!pe @  20.12.2006,  21:39 Найти цитируемый пост)
Фотошопом. Тут уменьшил - сохранил, там кусок сохранил или разрежь инструментом и сохрани Save for Web 

Легко сказать... У меня почему-то не получаеться ровно разрезать, то один угол не совпал, то другой... smile 

Автор: Dewas 19.5.2007, 14:45
Я режу Fireworks-ом, к тому же он позволяет не только разрезать эскиз сайта, но и сразу создать HTML таблицу под полученные картинки-фрагменты, автоматически их проименовать (или использовать пользовательские имена) и вставить в ячейки таблицы. Несмотря на то, что таблица требует оптимизации после её экспорта из Fireworks-a, этот инструмент является хорошим подспорьем в процессе верстки. smile 

Автор: April 20.5.2007, 13:50
Помогите разобраться.
Нарисовал я в Photoshop, нарезал, сохранил для Web. Дальше что? Пишется html код и после в него с помощью <img> вставляется разрезаный дизайн или это не правильно?

Автор: Dewas 21.5.2007, 19:32
Цитата(April @ 20.5.2007,  13:50)
Помогите разобраться.
Нарисовал я в Photoshop, нарезал, сохранил для Web. Дальше что? Пишется html код и после в него с помощью <img> вставляется разрезаный дизайн или это не правильно?

Все правильно, теперь пиши/рисуй (что больше нравится) HTML таблицу и вставляй туда рисунки.

Добавлено через 10 минут и 7 секунд
А вообще 
http://forum.vingrad.ru/forum/topic-46961.html

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)