Offline
Любитель
Пол:
Группа: Пользователи
Сообщений: 76
Регистрация: 21.10.2005
|
Ну раз пошла про это тема то я пожалуй тоже напишу
Не примите за флуд....
Пишу цитатой так как много инфы....
Взята с моего курсача по защите "Интернет Технологии и Веб-Дизайн"
| Цитата |
Web-дизайн — это творчество, причем творчество ярко выраженное. Именно в сфере web-дизайна вы можете полностью проявить все свои способности, ведь здесь цензором результатов вашего труда являетесь вы сами и посетители вашей странички. Никто не ограничивает вас ни в объеме, ни в содержании, ни в компоновке разрабатываемого вами ресурса, никто не загоняет вас в какие-либо жесткие рамки. Творите, и рано или поздно созданный вами проект найдет заслуженное признание многомиллионной аудитории пользователей Интернета.
Основные “постулаты” web-дизайна
Известно, что любая технология, любой творческий процесс в какой бы то ни было области, подчиняются определенным правилам и законам, несоблюдение которых неизбежно влечет за собой множество неприятных последствий. Web-сайт как комплекс инженерно-художественных решений также подразумевает наличие целого набора определенных “правил хорошего тона”, которых следует придерживаться, чтобы ваш ресурс не выглядел непрофессионально и не вызывал нареканий у посетителей. Для простоты понимания и запоминания эти принципы можно свести к семи базовым “постулатам”. Данные правила приведены ниже согласно их объективному приоритету, то есть в порядке убывания их важности.
· Итак, при планировании и создании любого web-ресурса важно помнить, что главный критерий, на который следует ориентироваться в процессе разработки страниц, это удобство конечного пользователя, то есть будущих посетителей вашего сайта или домашней странички. Оно и не удивительно: ведь именно для того, чтобы посетители могли ознакомиться с содержимым вашего ресурса, вы и создаете его. Сложность момента заключается в том, что упомянутых выше “потенциальных посетителей” существует великое множество, причем используют они чрезвычайно широкий спектр аппаратных средств и программного обеспечения. Отсюда вытекает необходимость определенной стандартизации подходов к web-дизайну, выработки алгоритмов, которые могли бы удовлетворить всю вашу потенциальную аудиторию, позволяя людям адекватно и с максимальным комфортом воспринимать содержимое вашего сайта. Увы, на практике создание подобных универсальных решений не представляется возможным не только в связи с быстрой эволюцией вычислительной техники и программного обеспечения, но и по причине чрезмерной широты ассортимента уже существующих аппаратных и программных средств. Единственно возможным выходом в этой ситуации было бы адаптировать сайт к тем минимальным параметрам пользовательской системы, ниже которых отображение графической и текстовой информации на экране компьютера будет затруднительно. Такой подход выглядит достаточно привлекательным с точки зрения демократичности по отношению ко всем категориям пользователей: у владельцев устаревших компьютеров со слабыми мониторами и видеокартами в процессе знакомства с вашим ресурсом не возникнет особых сложностей, владельцы же современных машин тем более не будут испытывать каких-либо проблем. Именно отсюда и берет начало первое правило, которое вам следует усвоить и запомнить. Формулируется оно следующим образом.
1. В современном Интернете принято внегласное соглашение о том, что профессиональный сайт должен корректно отображаться при экранном разрешении 640х480 точек с цветовой палитрой в 256 цветов.
ПРИМЕЧАНИЕ: При отображении html-документа, рассчитанного на просмотр с экранным разрешением 800х600 точек, на компьютере, настроенном на разрешение 640х480 точек, в нижней части главного окна броузера появляется горизонтальная полоса прокрутки, что значительно затрудняет изучение документа и вызывает множество нареканий у пользователей.
СОВЕТ: Для того чтобы web-страница правильно отображалась при использовании экранной палитры в 256 цветов, в случае включения в состав документа графических элементов старайтесь представлять максимально возможное количество графики в формате GIF и лишь самые необходимые изображения — в формате JPEG.
Рекомендуется проверить корректность отображения содержащейся в html-документе информации при изменении экранных настроек в броузерах как Microsoft Internet Explorer, так и Netscape Navigator.
Следующее правило обусловлено тем, что вам неизвестно программное обеспечение, которое используется вашими потенциальными посетителями для просмотра web-страниц. Речь идет о броузерах. Как уже говорилось, согласно статистике самыми популярными броузерами среди пользователей Интернета являются Microsoft Internet Explorer и Netscape Navigator различных версий, все остальные распространены в значительно меньшей степени. Как известно, Microsoft Internet Explorer и Netscape Navigator используют различные алгоритмы обработки HTML-кода, из-за чего один и тот же элемент в этих двух броузерах может отображаться совершенно по-разному. Среди начинающих web-дизайнеров бытует мнение, будто заставить страницу выглядеть одинаковым образом в упомянутых программах решительно невозможно. Однако это совершенно не так: все различия между Netscape и Explorer прекрасно поддаются количественной оценке и анализу, более того, существует множество алгоритмов, применение которых позволяет свести неадекватность отображения страниц к минимуму.
2. Web-страница должна идентично отображаться в Microsoft Internet Explorer и Netscape Navigator, причем весьма желательно в последней и предпоследней версиях данных программ.
Разумеется, непосредственно после создания предварительного шаблона будущей web-страницы этот html-документ необходимо проверить на идентичность отображения в обоих броузерах.
Не секрет, что подавляющее большинство пользователей используют для выхода в Интернет dial-up соединение, иными словами, работают на “медленных” линиях, подключаясь к провайдерскому пулу при помощи модема. Разумеется, в этом случае скорость передачи данных (как правило, удручающе низкая) играет для них решающую роль: вряд ли кому-то доставит удовольствие дожидаться загрузки одного html-документа десятки минут. Таким образом, мы приходим к третьему очевидному “закону” web-дизайна.
3. Все страницы web-сайта, а также все интегрированные в них графические и интерактивные элементы должны быть минимальными по объему.
Это достигается путем использования при разработке сайта специальных графических компрессоров, а также ряда приемов, позволяющих удалить из документа HTML лишний код и, соответственно, уменьшить размер итогового файла.
Другой момент, о котором обязательно следует упомянуть, касается навигации по сайту. У пользователя не должно возникать ни малейших затруднений при переходе от одного раздела вашего ресурса к другому, независимо от модели его компьютера и типа установленного программного обеспечения. Он должен отчетливо представлять себе логическую структуру вашего проекта и, по возможности, иметь доступ ко всем его компонентам в любой момент времени. Именно поэтому необходимо помнить следующее.
4. Созданная вами web-страница должна обязательно включать навигационные элементы, охватывающие все разделы вашего сайта, причем эти элементы должны всегда быть на виду. Их расположение следует выбирать, исходя из максимального удобство для пользователя. Если они размещены в верхней части страницы и пропадают из поля зрения после скроллинга (прокрутки экрана вниз), не забудьте продублировать их в нижней части документа. Графические ссылки и активные элементы следует повторить в тестовой форме в расчете на пользователей, в броузерах которых отключено отображение графики или отсутствует поддержка Java.
Одним из достаточно важных факторов, на которые следует обращать внимание при создании web-страниц, является психологическое восприятие вашего ресурса посетителем. Поскольку сайт, как уже упоминалось выше, является единым инженерно-художественным комплексом, пользователи и должны воспринимать его именно так.
5. Старайтесь выдержать весь проект в одном дизайнерском стиле, оформляйте различные его разделы таким образом, чтобы общее художественное решение было схожим для всего сайта.
Последние два “постулата” необходимо учитывать, руководствуясь уже соображениями эстетики в общехудожественном плане. Безусловно, в отличие от перечисленных выше положений, несоблюдение этих правил не влечет за собой последствий, которые можно было бы назвать “фатальными”, наоборот, в некоторых случаях такое нарушение является вполне оправданным. Но, повторюсь, лишь в некоторых случаях, поскольку выработаны они были лишь с целью облегчить пользователю восприятие информации, не позволять его вниманию отвлекаться от основного элемента web-сайта — его информационного наполнения. Согласитесь, что для создателя ресурса наиболее важным является не столько показания установленного на первой странице счетчика посещений, сколько время, которое затратил каждый пользователь на просмотр всего сайта. И это время будет тем больше, чем меньше будут уставать глаза посетителя, чем меньше его будет раздражать оформление страниц на сознательном или подсознательном уровне. Для того чтобы результат ваших трудов не вызывал в процессе знакомства с ним отрицательных эмоций
6. Не используйте на одной web-странице более трех различных шрифтов, включая шрифты, применяемые при создании графических элементов.
А также
7 . Используйте только корректные цветовые схемы и не применяйте при оформлении документов более трех различных цветов.
Исключение здесь можно сделать разве что для полутонов одного и того же цвета, применяемых, например, при контекстном выделении строк в информационных таблицах, да и то этим приемом лучше не увлекаться. Какие же цветовые сочетания лучше всего использовать при подготовке дизайна вашего web-проекта?
С точки зрения человеческой психологии сочетание цветов может в значительной степени влиять на восприятие зрителем представленной на картинке информации. Именно поэтому при подборе цветового сочетания, например текста с фоном, рекомендуется исходить из соображений собственного здравого смысла:
Tекст должен без труда читаться, при этом читатель не должен напрягать зрение, его глаза не должны уставать. Далее приведен перечень цветовых сочетаний рисованного объекта или текста с фоном в порядке ухудшения зрительного восприятия:
синее на белом
черное на желтом
зеленое на белом
черное на белом
зеленое на красном
красное на желтом
красное на белом
оранжевое на черном
черное на пурпурном
оранжевое на белом
красное на зеленом
Корректность сочетания друг с другом всех остальных цветов и оттенков проверяется с помощью одного простого правила: переведите ваше изображение в формат “grayscale” (256 оттенков серого) и посмотрите, читается ли в таком виде ваш текст, контрастно ли выглядят нарисованные элементы. Если нет — принятое вами цветовое решение лучше пересмотреть. В любом случае для текста рекомендуется выбирать традиционный, привычный глазу черный цвет, в качестве фона лучше всего использовать тусклую, едва различимую заливку произвольного оттенка. Однако наиболее “правильным” решением всегда был и остается “классический” вариант: черным по белому.
Таблица цветов
Заглавная страница
Один из критериев, руководствуясь которым можно разделить различные web-сайты на две основные категории, — это наличие заглавной страницы (splash) или отсутствие таковой.
Заглавная страница представляет собой html-документ, который не включает в себя какую-либо содержательную информацию и элементы навигации. Файлу заглавной страницы присваивается имя index.html, при этом стартовая страница называется иначе и вызывается посредством организации гиперссылки с заглавной страницы, загружающейся при обращении к сайту первой. Заглавная страница содержит, как правило, логотип компании-владельца данного ресурса, счетчик посещений и предложение выбора кодировки кириллицы, либо выбора между английской и русской версиями сайта. При обращении к сайтам, не оснащенным заглавной страницей, первой отображается стартовый документ, включающий какое-либо информационное наполнение, элементы навигации и иногда анонсы составляющих данный ресурс тематических рубрик.
Использовать или не использовать заглавную страницу при создании собственного проекта в сети Интернет — дело вкуса каждого web-мастера. Дать какие-либо исчерпывающие рекомендации на этот счет трудно, поскольку окончательное решение зависит, прежде всего, от ваших художественных предпочтений и иногда — от желания заказчика, оплачивающего вашу работу.
Динамическая и статическая компоновка сайта.
Современные видеокарты поддерживают несколько произвольно устанавливаемых видеорежимов, характеризующихся экранным разрешением и количеством цветов, используемых при отображении информации на экране компьютера. С помощью встроенных функций операционной системы пользователь может установить несколько стандартных значений экранного разрешения, например 640х480, 800х600, 1024х768, 1152х864, 1280х1024 или 1600х1200 точек. Разумеется, при открытии в одном и том же броузере какой-либо web-страницы она может отображаться не одинаковым образом в зависимости от используемого посетителем сайта экранного разрешения.
Для того чтобы избежать “съезжания” элементов html-документа друг относительно друга и, как следствие, деформации web-страницы в целом при изменении параметров экрана, применяется достаточно простой и действенный прием:
· все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение. Таким образом, появляется второй критерий, по которому можно разделить все существующие web-сайты на две условные категории. Данной таблице можно назначить строго определенную ширину в пикселах, например, 640 точек, после чего жестко позиционировать ее по центру экрана или “прижать” к левому его краю. Такой вариант компоновки сайта можно назвать статическим, поскольку ширина таблицы не меняется в зависимости от экранного разрешения. Разумеется, при изменении параметров экрана не происходит ни малейшего смещения элементов дизайна страницы. Примером реализации сайта со статической компоновкой является страница, которая находится перед Вами.
· Иной подход — когда ширину невидимой таблицы, содержащей фрагменты web-страницы, задают в процентах от текущей ширины экрана. При увеличении экранного разрешения таблица “растягивается” по горизонтали, и все размещенные в ее ячейках элементы, позиционированные либо по центру, либо по краям столбцов, смещаются согласно установленному алгоритму. В силу того, что параметры таблицы изменяются в зависимости от настроек экрана, такой принцип компоновки html-документа можно назвать динамическим. И тот, и другой подход обладает как достоинствами, так и недостатками, которые перечислены ниже.
Статическая компоновка страницы
Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640х480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не “поплывут”. Кроме того, данный вариант компоновки сайта в большинстве случаев (при соблюдении ряда дополнительных условий) позволяет добиться идентичности отображения html-документа в броузерах Microsoft Internet Explorer и Netscape Navigator.
Недостатки. При отображении документа на компьютере с высоким экранным разрешением по краям экрана или с правой его стороны остается заметное пустое поле.
Динамическая компоновка страницы
Достоинства. Документ растягивается по всей ширине экрана, не остается неиспользованных пустых полей.
Недостатки. Сложность верстки и отладки страницы, весьма часто проявляется неадекватность отображения таких документов в броузерах Microsoft Internet Explorer и Netscape Navigator.
|
|
Html , правила этикета
Помощь
Поиск
Дата 30.10.2005 - 17:00
