Компьютерная графика и web дизайн Конспект лекций Днепропетровск


НазваниеКомпьютерная графика и web дизайн Конспект лекций Днепропетровск
страница9/16
Дата публикации16.03.2013
Размер1.78 Mb.
ТипКонспект
userdocs.ru > Информатика > Конспект
1   ...   5   6   7   8   9   10   11   12   ...   16

Динамическая и статическая компоновка сайта

Современные видеокарты поддерживают несколько произвольно устанавливаемых видеорежимов, характеризующихся экранным разрешением и количеством цветов, используемых при отображении информации на экране компьютера. С помощью встроенных функций операционной системы пользователь может установить несколько стандартных значений экранного разрешения, например 640x480, 800x600, 1024x768, 1152x864, 1280x1024 или 1600x1200 точек. Разумеется, при открытии в одном и том же броузере какой-либо web-страницыона может отображаться не одинаковым образом в зависимости от используемого посетителем сайта экранного разрешения.

Для того чтобы избежать «съезжания» элементов html-документа друг относительно друга и, как следствие, деформации web-страницы в целом при изменении параметров экрана, применяется достаточно простой и действенный прием: все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение. Таким образом, появляется второй критерий, по которому можно разделить все существующие web-сайты на две условные категории. Данной таблице можно назначить строго определенную ширину в пикселах, например, 640 точек, после чего жестко позиционировать ее по центру экрана или «прижать» к левому его краю. Такой вариант компоновки сайта можно назвать статическим, поскольку ширина таблицы не меняется в зависимости от экранного разрешения. Разумеется, при изменении параметров экрана не происходит ни малейшего смещения элементов дизайна страницы.

Иной подход — когда ширину невидимой таблицы, содержащей фрагменты web-страницы, задают в процентах от текущей ширины экрана. При увеличении экранного разрешения таблица «растягивается» по горизонтали, и все размещенные в ее ячейках элементы, позиционированные либо по центру, либо по краям столбцов, смещаются согласно установленному алгоритму. В силу того, что параметры таблицы изменяются в зависимости от настроек экрана, такой принцип компоновки html-документа можно назвать динамическим. И тот и другой подход обладает как достоинствами, так и недостатками, которые перечислены ниже.

 

^ Статическая компоновка страницы

Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не «поплывут». Кроме того, данный вариант компоновки сайта в большинстве случаев (при соблюдении ряда дополнительных условий) позволяет добиться идентичности отображения html-документа в броузерах MicrosoftInternet Explorer и Netscape Navigator.

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

  ^ Динамическая компоновка страницы

Достоинства. Документ растягивается по всей ширине экрана, не остается не- использованных пустых полей.

Недостатки. Сложность верстки и отладки страницы, весьма часто проявляется неадекватность отображения таких документов в броузерах Microsoft Internet Explorer и Netscape Navigator.

ПРИМЕЧАНИЕ Используемые в командах HTML значения пикселов (условных точек)подразумевают физические размеры точки экрана пользователя и зависят от типа его монитора.

Примеры реализации сайтов со статической и компоновкой страниц приведены на рис. 4 и 5. Данные изображения сделаны с фиксированным экранным разрешением 800x600 точек.



Рис. 4. Пример сайта со статической компоновкой страниц
  Элементы web-страницы

Любая web-страница содержит определенный набор стандартных элементов, являющихся обязательными компонентами каждого ресурса Интернета. Безусловно, ассортимент и количество подобных объектов могут варьироваться в зависимости от тематической направленности сайта, объема опубликованных на нем материалов, а также от целей и задач, которые ставит перед собой создатель данного ресурса. Компоновка таких элементов, проектирование их взаимного расположения и составляет одну из главных задач web-мастера.

Первым элементом web-страницы, который нам предстоит рассмотреть, является ее заголовок. Он может быть выполнен как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сай- та, если данный web-ресурс представлен на двух языках. Непосредственно подзаголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена — системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468x60 точек. Если вы используете статический принцип компоновки страницы, ширина заголовка вашего документа будет составлять приблизительно 640 пикселов: это значение обусловлено, прежде всего, необходимостью обеспечить корректное отображение документа на мониторах с экранным разрешением 640x480 точек и избежать появления горизонтально полосы прокрутки, затрудняющей его просмотр. Очевидно, что ширина баннера в этом случае будет значительно меньше ширины заголовка, благодаря чему в той части страницы, где вы планируете отвести место под рекламу, образуется незанятое пространство, которое можно заполнить логотипом компании-владельца данного сайта или ссылкой на сервер, осуществляющий web-хостинг. Разумеется, логотип необходим далеко не всегда: как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность.

Основную часть документа занимает так называемое текстовое поле — участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют «кон-тент» (от англ, content — содержание). Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.

Следующей обязательной составляющей частью web-страницы являются элементы навигации — гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, на- пример Java-апплетов. Последние представляют собой те же кнопки, которые, в отличие от своих «традиционных» сестер, умеют реагировать на движения мыши, выполняя при наведении на них курсора какие-либо несложные действия (включение подсветки, создание эффекта «нажатия», изменение формы и т. д.). Как я уже упоминал в разделе «Основные "постулаты" web-дизайна»,располагать элементы навигации следует таким образом, чтобы они всегда были «на виду», «под рукой», то есть так, чтобы пользователю не приходилось «отматывать» страницу назад, если текстовое поле занимает по высоте несколько физических экранов, после чего подолгу искать ссылки на другие разделы. Наиболее устоявшимся подходом является размещение элементов навигации у левой границы страницы.

В нижней части документа принято публиковать информацию о разработчиках сайта и адрес электронной почты, по которому посетители ресурса могут направить владельцам странички свои отклики, предложения и пожелания. Если web-страница является стартовым документом, в нижней ее части также размещают счетчик посещений — небольшой сценарий, вызывающий установленный на сервере CGI-скрипт, который фиксирует каждое открытие документа в броузере пользователей, изменяя значение индикатора счетчика. Благодаря этому web-мастер без труда определит количество посетителей, навестивших его страничку в течение какого-либо времени. Отмечу, что счетчик посещений устанавливается только на первой странице, вызываемой при обращении к сайту, в остальных документах ресурса он отсутствует. Не рекомендуется также размещать на одной странице несколько разных счетчиков.

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



Рис. 5. Пример компоновки web-страницы с левым позиционированием элементов навигации
На практике часто встречаются web-сайты, в дизайне которых элементы навигации позиционированы по правой границе экрана. В этом случае текстовое поле смещается налево, остальные компоненты документа располагаются, исходя из принципа максимальной эстетичности их сочетания. Пример такого исполнения сайта показан на рис. 6.


Рис. 6. Пример компоновки web-страницы с правым позиционированием элементов навигации
Как видно из рисунка, логотип в этом случае помещен на один уровень с заголовком документа, а рекламный баннер позиционирован относительно центра страницы. При таком подходе рекомендуется выдерживать графическое оформление заголовка, логотипа и поля для размещения рекламы в едином цветовом и художественном стиле — тогда несимметричность положения данных объектов будет не столь очевидна и не станет «резать глаз» сторонникам строгой, «табличной» эстетики дизайна.

Элементы навигации можно разместить не только вблизи правой и левой границ страницы, но и в верхней части документа. Такой вариант компоновки наиболее подходит, на мой взгляд, при создании домашних страничек: в этом случае все объекты страницы гармонично «вписываются» в заданную ширину невидимой таблицы, при этом подготовка самой таблицы значительно упрощается. Единственным недостатком подобного подхода является необходимость продублировать элементы навигации в нижней части документа, поскольку при вертикальной прокрутке страницы они исчезают за верхней границей экрана, и, чтобы добраться до них, пользователю придется «отматывать» экран назад, что, согласитесь, весьма неудобно. Пример оформления страницы с верхним расположением элементов навигации показан на рис. 7.


Рис. 7. Пример компоновки web-страницы с верхним позиционированием элементов навигации
Безусловно, все, что было сказано в данном разделе, является не панацеей, а руководством к действию. Я пытаюсь изложить лишь общие принципы, которые применяются при компоновке структуры сайта, окончательное же решение всегда остается за web-мастером. В конечном счете, какой бы дизайн вы не заложили в основу своего будущего проекта, результат ваших трудов все равно будет правильным: в Интернете нет ни цензуры, ни каких-либо регламентов, за- гоняющих создателя сайта в те или иные жесткие рамки. Примером дизайнерского решения, не попадающим ни в одну из указанных выше категорий, может служить так называемая смешанная компоновка, примерная схема которой приведена на рис. 8.

Как видно из рисунка, в данном примере часть управляющих элементов встроена непосредственно в заголовок страницы — речь идет о кнопках переключения между русской и английской версиями сайта, а также о кнопках навигации: это может быть ссылка на адрес электронной почты создателей ресурса, продублированная в нижней части документа, и ссылка на один из тематических разделов, например, страницу новостей. Основной блок элементов навигации позиционирован относительно левой границы документа, однако меню выбора кодировки кириллицы расположено непосредственно под рекламным баннером в верхней части страницы. Текстовое поле разделено на две несимметричные колонки, причем в правой размещены краткие анонсы составляющих ресурс тематических рубрик, включая ссылки на эти разделы.

Очевидно, что вариантов «смешанной компоновки» web-страницы может быть великое множество: конкретные решения зависят от количества составляющих ресурс разделов, объема подготовленного для размещения на сайте текста и, наконец, от фантазии самого дизайнера. Важно лишь, чтобы внешний вид сайта не вызывал нареканий у посетителей. В конце концов, только вы как разработчик, вы и никто другой, вправе проявить все свои способности и таланты и скомпоновать страницу по собственному вкусу. Создатели некоторых домашних страничек, не мучаясь сомнениями, размещают счетчик посещений в верхнем правом углу документа, название сайта пишут мелким убористым шрифтом и публикуют его под рекламным баннером, а элементы навигации почему-то неожиданно обнаруживаются прямо в середине текстового блока, между рассказом о себе и фотографиями любимой собаки автора проекта. На вкус и цвет, как говорится, товарищей нет. Но лично мне эта болезнь кажется неизлечимой.


Рис. 8. Пример «смешанной» компоновки web-страницы

Проект сайта
С чего начать?

Работу над большинством Web-проектов можно условно разделить на три этапа.

1. Этап, предшествующий разработке. На этом этапе ведут предварительные пе­реговоры с заказчиком, выясняют его потребности и формулируют предложе­ния о том, как наилучшим образом представить информацию о заказчике в Web. На этом этапе разработчик определяет бюджет и планы работы, собирает информацию об основных требованиях к Web-узлу, составляет блок-схему уз­ла, формулирует предложения и подписывает договор с заказчиком. Рассмот­рению этапа, предшествующего разработке, посвящена данная глава.

2. Этап разработки. После того как заказчик принимает предложения, разработ­чик может начинать работу по созданию Web-узла. На этом этапе создаются компоненты узла и связываются между собой. Если на предыдущем этапе раз­работчик добросовестно отнесся к планированию, то на этапе разработки поч­ти никогда не возникает необходимости переделывать уже выполненную рабо­ту.

3. Этап, следующий за окончанием разработки. Последний этап работы по созда­нию Web-узла включает тестирование готового узла, обеспечение доступа к нему из глобальной сети и рекламирование узла.

Каждый этап можно разбить на различные стадии, причем границу между различными стадиями разработки провести удается не всегда. Работа над проектом выполняется непрерывно и должна заканчиваться созданием готового узла.

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

Каждый проект начинается с переговоров разработчика с потенциальным заказчи­ком. В данном разделе вы узнаете о том, какие шаги следует предпринять для того, чтобы заказчик выбрал для выполнения проекта именно вас. Вы научитесь работать с заказчиком, подготавливаться к первой встрече и решать проблемы методом "мозгового штурма". После того как вы выясните потребности заказчика и у вас поя­вятся идеи насчет предполагаемого Web-узла, вам необходимо выяснить круг пользо­вателей, на который ориентирован создаваемый Web-узел, и ознакомиться с реше­ниями, которые используются конкурирующими организациями. Затем вам надо оп­ределить время выполнения проекта и бюджет и, наконец, выдвинуть конкретные предложения, и подписать договор с заказчиком.
^ Работа с заказчиком

Ваша способность представить информацию в Web зависит от объема и качества данных, которыми вы располагаете. Различные заказчики взаимодействуют с разра­ботчиками по-разному. Некоторые полагаются на вас и ожидают, что вы сами выяс­ните и разрешите их проблемы. Другие хотят непосредственно участвовать в работе над проектом. Заказчик может иметь свои соображения о том, каким должен быть Web-узел, и потребовать от вас реализации его идей.

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

Ниже перечислены некоторые рекомендации по работе с заказчиками.

• Тщательно подготовьтесь к встрече с заказчиком. Как и любая другая работа, перего­воры с заказчиком требуют подготовки. Перед первой встречей с заказчиком собери­те как можно больше сведений о нем. Некоторые заказчики готовы отдать вам ини­циативу ведения встречи, поэтому у вас должен быть готов план переговоров.

• Объясните особенности процесса разработки. Раскройте в деталях ход процесса разработки от начального до конечного этапа. Оговорите, на каких стадиях раз­работки вам потребуется информация от заказчика.

• Определите рамки взаимодействия. С самого начала работы над проектом определите степень участия заказчика в процессе разработки. Если вы считаете, что идеи заказ­чика не реализуемы или способны повредить выполнению проекта, попытайтесь убедить заказчика в том, что ему следует пересмотреть свою точку зрения.

• Попытайтесь побольше узнать об области деятельности заказчика. Часто заказчик не способен объяснить особенности своей деятельности. Задавайте вопросы и попытайтесь добиться того, чтобы заказчик предоставил нужную вам информа­цию. При необходимости постарайтесь получить необходимые сведения у его партнеров по бизнесу.

• Готовьтесь слушать. Постарайтесь не перебивать заказчика. Время, которое вы потратите при этом, не пропадет зря; вы сможете лучше понять особенности

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

• Если вы что-либо не понимаете, не пытайтесь скрыть это. Правдиво отвечайте на во­просы. Если вы не владеете каким-то вопросом, скажите об этом. Имеет смысл от­ложить обсуждение некоторых вопросов до следующей встречи; за это время вы сможете разобраться в них. Скрывая свою неосведомленность, вы рискуете впослед­ствии столкнуться с неразрешимыми проблемами. Если вы не способны решить за­дачу, поставленную заказчиком, порекомендуйте ему тех, кто может сделать это.

• Продемонстрируйте свои возможности. Расскажите заказчику о работах, выполненных вами ранее. Ознакомьте его с презентациями своих предыдущих проектов. Покажи­те, как средствами Web вам удавалось решить проблемы, с которыми сталкивались предыдущие заказчики. Подготовьте демонстрационный ролик, в котором содержа­лись бы информация о заказчиках, с которыми вы работали ранее, URL заказчиков и были представлены ваши возможности по решению задач.

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

• Будьте готовы ответить на вопросы. Заказчику может потребоваться дополни­тельная информация о ваших возможностях. Предоставьте ее как можно скорее.
1   ...   5   6   7   8   9   10   11   12   ...   16

Похожие:

Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconИстория науки и техники конспект лекций Омск
Конспект лекций предназначен для студентов специальности 070601 «Дизайн», 032401 «Реклама» очной, заочной и дистанционной формы обучения....
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций по дисциплине “ Информационные системы ” Днепропетровск
Классификация информационных систем в зависимости от степени автоматизации
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций «Ильин А. А. Акушерство и гинекология. Конспект лекций»
Конспект лекций предназначен для подготовки студентов медицинских вузов к сдаче зачетов и экзаменов. Книга включает в себя полный...
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций для студентов направления 070104 «Морской и речной транспорт»
Конспект лекций рассмотрены и одобрены на заседании кафедры «Судовождение» кгмту
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconИнженерная и компьютерная графика, лекция

Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКраткий конспект лекций для студентов дневного и заочного отделения...
Психология труда. Краткий конспект лекций /Сост. М. Д. Лапина – Мариуполь, 2004, 34 с
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКомпьютерная фирма vip-computer. Ru
Компьютерные и ит-услуги, разработка web-сайтов и программного обеспечения на заказ
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКомпьютерная графика
Графическое изображение должно создаваться определенными программными средствами
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций по дисциплине "инвестирование"
Конспект лекций по дисциплине «Инвестирование» для студентов экономических специальностей всех форм обучения Сост.: В. М. Гридасов...
Компьютерная графика и web дизайн Конспект лекций Днепропетровск iconКонспект лекций Киров 2010 удк 681. 332
Теория автоматов (часть I). Конспект лекций /Киров, Вятский государственный университет, 2010, 56с
Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2015
контакты
userdocs.ru
Главная страница