Пожалуй, я начну с теоретического курса. Тут постараюсь в краткой доступной форме изложить основные принципы вэб-дизайна. Постарайтесь не лениться и прочитать изложенную ниже информацию… Возможно получилось не очень складно, но я старался сделать всё понятным.
После теоретического курса будет практический. … Так же там будут домашние задания. По истечении всего курса вы сможете самостоятельно создать достойный сайт (я на это очень надеюсь) и у нас с Dagger’ом будет меньше работы

Начнём танцы…
«С чего начинается театр – с вешалки»… А сайт? Нет, вешать ни кого не надо, а поговорить о том, как создать красивый и удобный сайт стоит… Каким требованиям должен отвечать сайт уже говорилось тут http://www.forum.vingrad.ru/cgi-bin....;t=5179 , теперь поговорим о том, как сделать такой сайт…

Сперва огражу вас от того, чего делать не стоит при разработке сайта:
* Не используйте готовых фонов, гифов, иконок и прочей графической дряни, которая в огромном количестве выложена на, так называемых, сайтах для вэб-мастеров. Все они второсортные, плохо оптимизированные, их тяжело связать с сайтом так, чтобы они там хорошо сидели, всё равно будут торчать изо всех щелей, и портить весь вид.
* Не используйте апплеты, не у всех стоит виртуальная машина Ява, да и слабый компьютер они могут сильно тормознуть. Не используйте спецэффекты типа бегущей строки, титров, вспышек, тряски окна и т.д., всё это только раздражает пришедшего на ваш сайт пользователя.
* Не выводите на строку состояния никакой информации (приветствия, реклама и прочая хрень). Не делайте окон на весь экран, всплывающих окон, полупрозрачных окон. ИМХО неуважение к посетителю.
* Не принуждайте посетителя насильно добавлять ваш сайт в «Избранное» или делать его стартовым.
* Не делайте пестроты на сайте. Это утомляет. Яркие текстуры (под дерево, огонь, золото, облака и т.п.) использовать нужно очень осторожно, желательно их вообще не использовать, а если и решили, то очень немного. Желательно пользоваться спокойными тонами.
* 3D-текстуры, 3D-объекты (кнопки, элементы управления…) и 3D-текст одновременно применять не стоит, т.к. несоответствие светотени создаёт нереальность, и общее впечатление о дизайне портится.
* Не делайте размер странички, вместе с графикой более 100кб (а лучше – в пределах 30кб), долгая загрузка отвадит пользователей от вашего сайта. Оптимизируйте графику. Чем быстрее будет загружаться, тем лучше…
* Фреймы, о них писалось уже много. Хороши они или нет – вопрос сложный, с одной стороны они упрощают навигацию, но при этом пользователь не видит в адресной строке своего браузера ссылку на тот или иной документ, есть браузеры, которые не работают с фреймами или делают это не корректно. Вот топик, в котором описаны плюсы и минусы фреймов http://www.forum.vingrad.ru/cgi-bin....;t=5364 . От себя лишь добавлю, используйте их только в случае крайней необходимости, а желательно от них вообще отказаться.
* Не делайте разметку сайта в виде фиксированной таблицы под маленькое разрешение экрана (скажем, под 800х600), ибо на мониторах с большим разрешением сайт будет выглядеть в виде узкой полосы посередине экрана с пустотами вокруг. Но не забывайте и про посетителей, чьи мониторы не поддерживают больших разрешений. Поэтому при рисовании изначального дизайна используйте ширину полотна 778 пикселей (с учётом вертикального скролла и рамки окна браузера), а при вёрстке страницы ширину основной таблицы задавайте равной 100%. (ну к этому мы ещё вернёмся в практической части наших уроков).
* Не заполоняйте контент ссылками, особенно если они снова ведут к страницам с ссылками, конечно, у вас будет приемлемая посещаемость, и баннерные показы будут зашкаливать, но постоянных пользователей у вас не будет. Люди приходят на сайт за информацией, и необходимо как можно проще для них предоставить оную. Прогуляясь по 2..3-ём страницам сайта с бесполезными ссылками, и не найдя того чего искал, посетитель уйдёт с вашего сайта, и вероятно навсегда.
* Не создавайте страниц заставок, помните, пользователи пришли за информацией, а увидев такую первую страницу могут просто уйти, т.к. не найдут на ней ничего нужного...

Сперва немного теории, потом будет практика:  

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

ЦВЕТ.
Поговорим сперва о цвете. Человеческий глаз раскладывает цвет на тон (Hue), насыщенность (Saturation) и яркость (Brightness). Тон - это характеристика цвета, отвечающая за составляющею оттенка, при полной яркости и насыщенности. Яркость - это свойство цвета изменяющаяся между чёрным и полностью насыщенным цветом. Насыщенность, при полной ярости проходит диапазон от наиболее насыщенного и яркого цвета до белого - абсолютно ненасыщенного. С цветом надо играть, но опасно заиграться… Лучше рассказать о цвете, чем Евгений Жданов, тяжело, поэтому я процитирую его ещё раз:

Цитата

Цвет - воспринимаемая сетчаткой глаза область светового спектра, видимая часть света с длинами волн в диапазоне от 400 до 700 нанометров. Что? Думаете я только что прочитал Энциклопедию? Определение конечно же верно, но не передаёт всей важности цвета. Ведь всё, что нас окружает, не имеет в действительности никакой окраски. Просто у всех предметов разная способность отражать и поглощать свет, в результате чего мы видим отражённый телами или средами часть света, но уже с другим спектром волн (Дальтоникам дальше не читать). Цвет воспринимает глаз человека, но затрагивает его эмоции. Что может быть красивее заката у побережья тёплого моря в компании красивой девушки? Вот тут сердце стучит нормально, жизнь прекрасна и всё такое... А теперь представьте, что Вы не воспринимаете цвета, всё вокруг чёрно-белое... ну, или 256 оттенков серого :-) Это всё равно, что иметь чёрно-белый монитор. Важность цвета в нашей жизни поистине огромна. Так же огромна она и в Интернете, где всё на этом и держится. Умение правильно использовать цвет является атрибутом профессионализма WEB-дизайнеров. Это умение позволяет оформителю правильно задать атмосферу сайта, погрузить посетителя в свой мир. Хороший дизайнер всегда сначала продумывает цветовую схему, потом только начинает создавать графику. Искусство оформления приходит с опытом и всегда зависит от количества экспериментов разработчика. Чем больше цветовых комбинаций Вы переберёте, тем быстрее найдёте лучший вариант для своего сайта. Конечно, при этом следует знать некоторые тонкости этого дела: Упрощайте вещи: даже если Ваша видеокарта способна передать триллионы цветов и монитор за штуку баксов, используйте на страницах максимум три-четыре цвета. Чем проще тем лучше, многие сайты, напичканные сотнями цветовых оттенков болезненно воспринимаются, слабо запоминаются, плохо вспоминаются. Некоторые способны сделать отличный сайт, используя всего два цвета. Если Вы вовсю используете на сайте цветные фотографии, Вы можете использовать их доминирующий цвет для заголовков. Согласованность оттенков: используйте для разных типов данных разные оттенки. Например, заголовки делайте синим цветом, предупреждения лучше делать красным, цвет основного текста должен быть тоже определён однозначно. При этом очень удобно пользоваться каскадными таблицами стилей, где Вы можете заранее определить стиль оформления Вашей странички. Контрастность: цвета фона и основного текста должны быть контрастными. Чем контрастнее, тем удобнее будет читать текст. Попробуйте читать голубой текст на белом фоне Чёрный на белом, белый на чёрном, жёлтый на синем гораздо удобочитаемы. Всегда указывайте в теге <BODY> нужный Вам цвет фона, иначе рискуете столкнуть читателя с настройками его же собственного браузера. Некоторые специально прописывают браузеру использовать серый или пурпурный фон. Хотят смотреть сайты на фоне своего любимого цвета :-) К примеру, может получиться так, что цвет Вашего текста и их фона совпадут или будут схожи, тогда читатель может вообще текста не увидеть Поэтому, не забывайте указывать на странице цвет её фона. На тёмном фоне лучше всего использовать белый или жёлтый цвета, голубой читается сложнее, можно и зелёный использовать. При выборе цвета фона и текста представляйте себе свою аудиторию. Для молодёжи с домашним Интернетом более привычен ночной выход в Интернет. Для них лучше создавать тёмный фон, светлый текст. Если Ваша аудитория состоит из людей пользующихся Интернетом на своей работе (в офисах, учреждениях), следует делать светлый сайт с тёмным текстом. По статистике светлый фон лучше тёмного. Цветовые ассоциации: Мозг человека в жизненном процессе создаёт ассоциации. При этом внешние раздражители, вызывают порой очень сильные реакции. Представьте себе, к примеру, что Вы облизываете языком дольку лимона. Одного взгляда на колонки у монитора достаточно для того, чтобы вспомнить о музыке. Всё в нашей жизни с чем-то ассоциируется. С цветами дело обстоит таким образом: Красный: Возбуждение, энергия, страсть, желание, скорость, прочность, мощность, тепло, любовь, агрессия, опасность, огонь, кровь, война, насилие, агрессия, всё интенсивное и страстное. Желтый: Радость, счастье, оптимизм, идеализм, воображение, надежда, солнечный свет, лето, золото, философия, мошенничество, малодушие, предательство, ревность, жадность, обман, болезнь, риск. Синий: Мир, спокойствие, спокойствие, устойчивость, гармония, объединение, доверие, истина, доверие, консерватизм, безопасность, чистота, порядок, лояльность, небо, вода, холод, технология, депрессия, подавитель аппетита. Оранжевый: Энергия, баланс, тепло, энтузиазм, оживленный, экспансивный, пышный, требующий внимания. Зеленый: Природа, среда, здоровая, удачи, восстановление, молодость, бодрость, весна, щедрость, плодородие, ревность, неопытность, зависть, неудача. Пурпурный: Авторский Гонорар, духовность, благородство, церемония, непостижимый, преобразование, мудрость, просвещение, жестокость, высокомерие. Серый: Безопасность, надежность, интеллект, степенный, скромность, достоинство, завершенность, твердый, консерватор, практический, старость, печаль, сверление Коричневый: Земля, очаг, дом, на открытом воздухе, надежность, удобство, выносливость, устойчивость, простота и удобство. Белый: Почтение, чистота, простота, чистота, мир, смиренность, точность, невиновность, молодость, рождение, зима, снег, хорошо, стерильность, брак (Западные культуры), смерть (Восточные культуры), холодный, клинический, стерильный. Черный: Мощность, сексуальность, сложность, формальность, элегантность, богатство, тайна, страх, зло, анонимность, недовольство, глубина, стиль, зло, печаль, раскаяние, гнев, метрополитен, хороший технический цвет, траур, смерть (Западные культуры). Все эти ассоциации следует использовать при оформлении сайта. Если посетителя нужно зарядить энергией, взбодрить его, мотивировать к чему-либо, используйте сильные оттенки. Если, наоборот, нужно создать мирную атмосферу, лучше использовать пастельные тона, ослабить агрессивные цвета. Выбирая цветовую схему для страницы, тщательно продумайте все мелочи. Пусть у Вас уйдёт больше времени на создание, зато Вы всегда будете иметь довольных и счастливых посетителей. А что может быть лучше этого?

Источник: http://www.vebius.dax.ru

Продолжаем:

У ярких цветов есть свойство притягивать к себе противоположные цвета. Не делайте однотонных (одноцветных) сайтов! Близкие цвета теряются на фоне друг друга. Так же следует избегать сильных контрастов, создаётся впечатление искусственности, неправильности и раздражения. Это может вызвать неприязнь к дизайну. Может быть контраст по насыщенности и яркости и одинаковость по тону. Или контраст по тону и яркости и одинаковость по насыщенности. Вариант с контрастом по тону и насыщенности и одинаковостью по яркости, обычно, несколько хуже. Хотя это всё не есть правило, и, как я говорил тут нужно экспериментировать (возможно именно контраст по всем трём направлениям будет смотреться куда лучше), но учесть выше сказанное стоит.
Текст лучше всего писать на белом фоне, он так самый читаемый. Вообще к чёрному и белому цветам хорошо подходят другие. Это связано с тем, что чёрный можно представить, как цвет с любым тоном и минимальной яркостью. А белый, как цвет с любым тоном и минимальной насыщенностью (при полной яркости). У этих цветов самих по себе есть уже нечто общее с другими цветами - тон. Поэтому они и сочетаются с другими цветам.
Хотя, если вы выберите в пару к белому розовый цвет, который также как и белый является слабо насыщенным и ярким, то у вас ничего не получится. Эти цвета будут слишком близкими друг к другу.
Текст должен быть контрастным к фону. Но он не должен раздражать. Фон под текстом должен быть однотонным, иначе текст будет плохо читаться.

ГРАФИКА
После изучения цветов, было бы логично познакомиться с графикой.

Создать красивый дизайн странички — еще полдела, нужно добиться того, чтобы она быстро загружалась (рекомендуемый многими известными web-дизайнерами размер страницы должен быть в пределах 30 Кбайт). Оставим в стороне проблемы оптимизации html-кода и рассмотрим методы сокращения размера иллюстраций на диске.
Итак, у вас есть изображение, которое нужно сжать как можно сильнее без видимых на глаз потерь качества. Для этого проанализируйте его: если в изображении присутствуют разнородные области, например, имеющие мелкие детали, крупные, а также области с каким-то доминирующим цветом, то довольно часто разбиение специальным образом одного большого изображения (свыше 30 Кбайт) на более мелкие позволяет сократить общий размер файла.
Иногда возникает необходимость объединить несколько мелких фрагментов (соответственно они получают одинаковые настройки по компрессии) в один (например, если разбиение его на более мелкие не дало выгоды) — в этом случае за счет более простой таблицы сокращается html-код.

А теперь перейдем непосредственно к возможностям программ по оптимизации полученных фрагментов.
GIF
Этот формат оптимален для сохранения областей изображения, в которых используется мало цветов (логотипы, текст) или же обширные области с однородным цветом. Компрессируется информация построчно, поэтому размеры файла изображения, состоящего, например, из чередующихся полосок или же сплошной закраски одним цветом отличаются незначительно. Максимальное количество поддерживаемых цветов — 256, и, в отличие от JPEG, в нем поддерживается прозрачность. Кстати говоря, с любым увеличением числа используемых цветов пропорционально увеличивается размер файла (а не только при выходе количества цветов за пределы диапазона, охватываемого степенью двойки — например, с 16 до 32, с 32 до 64, — для этого достаточно поэкспериментировать с ImageReady. Именно поэтому обычно используют лишь несколько цветов с одновременным применением dither (подмешивание) — имитацией дополнительных цветов путем смешивания основных (например, оранжевый цвет будет достигаться подмешиванием красных точек к однородному желтому фону), в этом случае качество картинки будет вполне приличным, а размер файла увеличивается совсем незначительно.
Основные цвета — это те, которые присутствуют в автоматически генерируемой таблице цветов. Однако можно вмешаться в этот процесс, выбирая разные способы ее формирования. Таблица строится на основе анализа площади картинки, которую занимает каждый присутствующий в ней цвет (если выбран способ adaptive), либо делается ее коррекция с учетом восприятия определенных цветов глазом человека (perceptual), или же все цвета приводятся к стандартному набору (который гарантирует абсолютную идентичность воспроизведения цветов любыми браузерами при использовании 8-битного цвета). Однако чаще всего наилучшие результаты дает selective. Во-первых, в этом случае учитывается восприятие глазом человека, поскольку предпочтение отдается передаче без искажений тех цветов, которые занимают обширную площадь картинки. Во-вторых, программа старается максимально использовать цвета из web-палитры. Если программа все-таки не совсем правильно определяет базовые цвета, вы всегда можете открыть таблицу цветов (Window/Show color table) и вручную подкорректировать ее. Так, определенные цвета, имеющие принципиальное значение, можно привести к стандартным web-цветам (snap to web palette) или же указать обязательно сохранять цвет, какой он есть (Lock selected colors to prohibit being dropped).

Dither
Расширяет возможности ImageReady поддержка нескольких способов подмешивания цветов — diffusion, pattern, noise. Обычно наилучший результат дает diffusion (равномерное распределение точек), в то время как при использовании pattern получается достаточно четкая повторяющаяся структура. Noise позволяет избежать «рубцов», появляющихся на границах областей с разными цветами, однако при этом значительно «размазывает» их, что не всегда годится. Программа может не только автоматически генерировать цвета для создания dither, но и использовать задаваемые пользователем. Для их переопределения зайдите в Filter/Other/DitherBox.
Кроме того, ImageReady позволяет регулировать степень применения dither — больший процент означает большую имитацию, что, соответственно, улучшает качество картинки, но приводит к увеличению размера файла, а меньшие значения дают сильное искажение (в этом случае эффект сравним с получаемым no dither). Истина, как обычно, находится где-то посредине. Именно от того, насколько точно вы ее определите, во многом будет зависеть размер картинки на диске.
Если же вам нужно еще больше уменьшить размер файла, можно включить опцию потери качества (lossy), однако этим следует пользоваться весьма осторожно, поскольку снижение качества в GIF происходит гораздо более радикально, чем в JPEG.
Из своего опыта скажу, что наиболее ощутимую выгоду дает использование различных режимов dither при оптимизации цветовых растяжек, однако помните, что иногда простое добавление нескольких цветов может дать больший эффект. Поэтому сначала поэкспериментируйте. Кроме того, если вы занимаетесь созданием анимации, то учитывайте все цвета, которые используются во всех кадрах и, соответственно, увеличивайте количество цветов.

JPEG
Что касается JPEG, то этот алгоритм сжатия хорошо работает с изображениями, где нет четких границ цвета (в частности, с фотографиями) — при этом изображение разбивается на более крупные зоны, и при значительной компрессии (ниже 20 по стандартной шкале) на нем возникает характерная блочная структура. Несомненным плюсом этого формата является отличная степень сжатия при сохранении еще приличного качества картинки — так, соотношение 1:50 считается нормальным явлением. В программе можно воспользоваться как существующими предустановками на 4 степени сжатия, так и подобрать компрессию более точно, с шагом 1 на диапазоне от 0 до 100. Дополнительное сжатие можно получить, размывая изображение (blur), однако эффект от его применения довольно незначителен.

PNG
Кроме GIF и JPEG, программа поддерживает пока еще «экзотический» PNG — 8- и 24-разрядный. Однако нужно помнить, что в отличие от двух предыдущих форматов, не все браузеры его поддерживают, поэтому старайтесь не пользоваться им без особой необходимости. Алгоритм сжатия PNG-8 несколько более совершенный, чем у GIF, и проявляет себя только в случае использования относительно большого количества цветов, давая дополнительную экономию в 10–30%. Однако в некоторых случаях, особенно когда используется немного цветов, GIF работает все же лучше его. Настройки PNG-8 аналогичны GIF, за исключением невозможности сохранения с потерями качества, зато в нем можно указать, какой цвет считать прозрачным и на какой он будет изменен браузером (полезно при размещении картинки на странице с однородным фоном).
PNG-24 аналогичен PNG-8, однако позволяет отображать больше, чем 256 цветов, и к тому же поддерживает до 256 уровней прозрачности. Платой за компрессию с сохранением качества стал размер файлов: они обычно больше, чем у того же JPEG не на «своем» изображении. Любые настройки по компрессии можно сохранить в программе с тем, чтобы впоследствии ими воспользоваться снова.

FST
Кроме трех рассмотренных типов файлов, начинает получать распространение еще один — FST (FAST Image Transfer), который разработан норвежской компанией Fast Search & Transfer ASA (FAST). При одинаковом по качеству изображении fst- файлы имеют объем в 2–6 раз меньший, чем JPEG, и более чем в 10 раз — по сравнению с GIF (или же при одинаковом размере файла качество изображения выше). Для отображения их в окне браузера сначала автоматически подгружается маленький java-апплет (22 Кбайт) — программка, которая загружает, декодирует и отображает картинки на экране. Поддерживается апплет, начиная с третьих версий Internet Explorer и Netscape Navigator, причем Java VM должна быть обязательно включена (View->Internet Options->Security, ->Advanced-> ‘Java JIT compiler enabled’ или в NN: Edit->Preferences->Advanced->’Enable Java’).
Существует дополнительный модуль для Photoshop (около 100 Кбайт), который конвертирует изображения в формат FST для платформ Windows 95/98/NT и Mac OS. Изображение отрисовывается на экране постепенно (как Interlaced GIF), что позволяет сразу же определить его содержание. Для достижения компромисса между качеством изображения и размером файла можно, как и в JPEG, выбирать степень компрессии (от 1 до 100). В отличие от изображений GIF и JPEG, вставленный в html-страницу FST-файл должен предваряться строкой типа:
applet archive=”f1.jar” width=”512” height=”512”>
<param name=”img” value=”image.fst”>
</applet>,
где f1.jar — апплет, image.fst — само изображение.

Ладно, к графике мы ещё вернёмся, а теперь давайте посмотрим, какие сложности могут возникнуть при разработке проекта…


1) Избыток информации: при большом количестве информации, выкладываемой в контент её становится трудно упорядочить, и сделать это, сделать её понятной для всех, должен именно разработчик, т.е. вы. Посетитель не должен использовать метод «верного тыка», чтобы понять, как расположена информация.

2) Время на ожидание. Посетители не хотят терять время. Когда страница разворачивается слишком долго – это вызывает у пользователя понятное недовольство. Если с самого начала посетители не могут обнаружить на вэб-сайте то, что их интересует, то они уходят с узла примерно через 2..4 секунды. Часто это вызвано тем, что информация представлена в неупорядоченном виде или непривычной форме…

3) Кратковременная память человека. Человек не в состоянии одновременно хранить в памяти большие объёмы информации. Это связано с ограниченностью кратковременной памяти человека, хранящей ту информацию, к которой человек обращается в данный момент времени. Люди способны одновременно обрабатывать от четырёх до шести единиц информации, поэтому читатели смогут быстро посмотреть сайт и найти нужные сведения только тогда, когда информация представлена в виде групп, содержащих от четырёх до шести элементов.

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

5) Чтение текста с экрана. Текст с экрана читается хуже чем с бумаги, плюс он может не помещаться на один экран… Следовательно нужно применять краткий и ёмкий текст, использовать легкочитаемые шрифты без засечек (Verdana).

При создании сайта необходимо придерживаться неких принципов, которые учитывают интересы пользователя, попробуем их сформулировать:
1) максимальный учёт интересов пользователя;
2) принятие всех проектных решений с учётом упрощения работы пользователя;
… Больше на ум ничего не приходит…
Что нужно нам для реализации этого?
1) нужно понимать, кто является потенциальным пользователем этого ресурса;
2) какие задачи должен выполнять пользователь;
3) как он должен использовать сайт.

Продолжение будет?

Пока нет, у меня экзамены и диссертация...

A kakuyu dissertaciu zaschischaesh?