33. Возможности современных программ, используемых для создания web-страниц

Html-Reader - хороший редактор для просмотра, корректировки и создания новых html-страниц

Adobe Dreamweaver CS4- Работайте с реалистичными представлениями CSS, javascript, SWF и динамического содержимого непосредственно в программе Dreamweaver. Быстро интегрируйте в свои страницы веб-виджеты сторонних производителей из наиболее распространенных каркасов javascript.

Из Графических CorelDraw и Photoshop

Из файлового менеджера Total Comander из за поддержки FTP

37

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

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

HTML

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

38

Наличие навигационной системы позволяет посетителю визуально определять ценность информации

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

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

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

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

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

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

39

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

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] (Shockwave Flash или Small Web Format).

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

40

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

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

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

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