Макетирование Web-страницы

Приступая к созданию макета Web-страницы, необходимо знать об ограничениях, с которыми сталкивается разработчик. Это ограничения используемого при создании Web-страницы HTML языка и браузера, а также аппаратные ограничения, связанные с типом монитора и модема. Рассмотрим данные ограничения.

HTML

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

Наличие навигационной системы позволяет посетителю визуально определять ценность информации
 
· Разработка системы навигации сайта - одна из наиболее важных составляющих процесса создания сайта или редизайна сайта. · На сайте с плохой системой навигации, если он состоит из 10 веб-страниц, сориентироваться можно. Но на сайте с плохой навигацией легко запутаться, если число веб-страниц, например, больше 50. · Создание простой и удобной системы навигации сайта - задача сложная. · Чем больше сайт по объему информации, тем больше в нем отдельных страниц, тем больше общее число гиперссылок. · Гиперссылок системы навигации сайта должно быть не мало и не много, а ровно столько, сколько нужно для удобства посетителя.

Навигация грамотно разработанного сайта должна в любой момент отвечать на три вопроса:

1. Где я сейчас нахожусь?

2. Где я уже был?

3. Куда я могу пойти дальше?

ЦВЕТОВАЯ ПОЛИТРА оказывают непосредственное влияние на то, как посетители воспринимают ваш сайт, даже подсознательно. Цвета, которые вы выбираете, могут работать как за, так и против образа бренда, который вы пытаетесь создать.

Однако при создании и размещении изображений на сайте следует помнить следущее:

  1. Картинки должны быть четкими, ясными, но иметь размер не более 20-30 kB, иначе пользователь будет нервничать, ожидая загрузки картинки, какая бы хорошая она ни была.
  2. Картинки должны быть иллюстрациями к тексту, а не просто бессвязно размещаться на страничке;
  3. Не следует использовать слишком яркие, пестрые картинки, от которых могут уставать глаза. Лучше использовать более умеренные цветовые тона;
  4. Следует помнить, что наш с Вами взгляд движется слева направо и сверху вниз, поэтому то на что Вы хотели бы обратить внимание, следует размещать в левом верхнем углу.

JPEG (произносится «джейпег»[1], англ. Joint Photographic Experts Group, по названию организации-разработчика) — один из популярных графических форматов, применяемый для хранения фотоизображений и подобных им изображений. Файлы, содержащие данные JPEG, обычно имеют расширения.jpeg,.jfif,.jpg,.JPG, или.JPE. Однако из них.jpg самое популярное расширение на всех платформах

GIF (англ. Graphics Interchange Format — рус. формат для обмена изображениями) — популярный формат графических изображений. Способен хранить сжатые данные без потери качества в формате не более 256 цветов

PNG (англ. portable network graphics, сокращение произносится по-английски /pɪŋ/[1]) — растровый формат хранения графической информации, использующий сжатие без потерь

Стандартным расширением для скомпилированных flash-файлов (анимации, игр и интерактивных приложений) является.SWF[1] (S hock w ave F lash или Small Web Format).

SVG (от англ. S calable V ector G raphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую.

GIF-анимация - последовательное отображение с заданной частотой растровых изображений, хранящихся в одном GIF-файле.

ряд основных способов создания анимации, а именно:
— Покадровую анимацию, где изображение создавалось путем ручной прорисовки каждого кадра;
— Motion Tweening, здесь задавались начальная и конечная координаты объекта, а все промежуточные кадры программа генерировала сама.
— Shape Tweening, это более сложный способ создания анимации, так как в нем реализуется не только перемещение объекта, но и его деформация. Обратите внимание, что под словом деформация имеется в виду не только изменение формы какого-либо объекта, но и, например, переход одной формы в другую, по сути постепенная замена одного объекта другим.

Уменьшение обьема! Разрешение такого изображения можно уменьшить практически в любом графическом редакторе, а если открыть его в Adobe Photoshop и пересохранить с помощью меню "Файл->Сохранить для web и устройств", то можно добиться достаточно хорошей оптимизации файла и, как следствие, уменьшения его размера.

Другое дело, если нужно уменьшить размер gif-анимации. Подавляющее большинство редакторов не помогут в таком случае, так как они поддерживают только неподвижные однокадровые изображения. И тогда на помощь приходят специальные программки - небольшие, но весьма функциональные.это Trout's GIF Optimizer, GIF Resizer


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: