Планирование Web-сайта

ДИЗАЙН WEB – СТРАНИЦ С ИСПОЛЬЗОВАНИЕМ ТАБЛИЦ

При создании дизайна WEB – страницы, размещения данных, используют таблицы.

<TABLE>…</TABLE> тег, открывающий и закрывающий таблицу

<TН>…</TН> заголовок таблицы. По умолчанию текст располагается по центру, имеет жирное начертание

<TR>…</TR> строка таблицы

<TD>…</TD> ячейки с данными

COLSPAN = кол-во_ячеек объединение столбцов

ROWSPAN – кол-во_строк объединение строк

ширина всей таблицы или ячейки, группы ячеек

HEIGHT = высота всей таблицы или ячейки, группы ячеек

CELLPADDING = ширина пустого пространства между содержимым ячейки и ее границами

ALIGN = выравнивание текста в ячейке по горизонтали

VALIGN = выравнивание текста в ячейке по вертикали

«TOP» по верхнему краю

«BOT - TOM» по высоте

«CENTER» по центру

«BASELINE» по нижнему краю

BORDER = рамка таблицы

CELLSPACING = ширина промежутков между ячейками

Цвет фона таблицы

BORDERCOLOR = цвет линий, обрамляющих таблицу

BORDERCOLORDARK = атрибут для создания трехмерных таблиц

BORDERCOLORLIGHT = атрибут для создания трехмерных таблиц

Пример:

<CAPTION> Таблица</CAPTION> - заголовок таблицы

<BR>

</TD>

</TR>

<BR>

</TD>

</TR>

</TABLE>

фреймы

Технология фреймирования позволяет просматривать в одном окне обозревателя несколько гипертекстовых документов. Один фрейм отображает только один гипертекстовый документ.

<FRAMESET> </FRAMESET>	Тег создания и окончания фреймов
<NOFRAMES> </NOFRAMES>	Теги для описания фрейма для браузера, не поддерживающего фреймы
<FRAMESET COLS= «фрейм_1, фрейм_2, …»>	Определяет количество и размеры горизонтальных подокон. Размер подокна определяется в пикселах, процентах (%) или в пропорциях (*).
<FRAMESET ROWS= «фрейм_1, фрейм_2, …»>	Определяет количество и размеры вертикальных подокон.
<FRAME>	Тег позволяет настроить свойства фрейма, имеет атрибуты:
SRC=	Адрес документа, который будет отображаться внутри фрейма
NAME=	Имя фрейма
MARGINWIDTH=	Горизонтальный отступ (от 1 до 6) между фреймом и границей
MARGINHEIGHT=	Вертикальный отступ (от 1 до 6) между фреймом и границей
SCROLLING= SCROLLING= YES SCROLLING= NO SCROLLING= AUTO	Прокрутка фрейма: создать полосу прокрутки полоса прокрутки отсутствует полосы прокрутки отображаются в зависимости от свойств обозревателя
NORESIZE=	Фиксированный размер фрейма
SRC=	Задать гипертекстовый документ для фрейма
TARGET= “имя_фрейма”	Открыть ссылку во фрейме с именем имя_ссылки. Размещается в теге <A HREF=”…” TARGET=”…”> или в теге описания фрейма.
TARGET=”_blank”	Загрузить документ в новом окне
TARGET=”_self”	Загрузить документ в текущее окне
TARGET=”_top”	Загрузить документ в самый верхний фрейм окна

Примеры:

</FRAMESET>

</FRAMESET>

Результат:

65% по горизонтали	35% по горизонтали
Половина от оставшихся 60%	40% по горизонтали	Половина от оставшихся 60%

Лекция 5. Средства разработки мультимедийных приложений

Лекция 6. Создание мультимедийной презентации

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

2. Определение состава проектной группы:

– руководитель проекта, ведет работу над проектом;

– отдел графического оформления, занимается художественным оформлением сайта и разработкой всей графики;

– отдел Web-разработки, занимается разработкой кода HTML для просмотра с помощью броузера.

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

3. Определение программного обеспечения, которое требуется для разработки Web-сайта.

4. Определение способа подачи информации. Необходимо принять во внимание различные факторы.

Факторы	Пример: туристическое агентство
категории пользователей (вся, специализированная или частная аудитория)	большинство пользователей – индивидуальные пользователи
скорость соединения для получения доступа к сайту	вероятнее всего пользователи будут пользоваться коммутируемыми соединениями на скорости 28? 49 Кбит/с, хотя у некоторых из них могут быть и более высокоскоростные соединения
версии броузеров	вероятнее всего пользователи пользуются не самыми последними версиями броузеров

Чем больше внимания уделяется этим факторам, тем точнее будет определена целевая аудитория и эффективнее представлена информация. Что позволит правильно определить цели разработки сайта.

5. Планирование архитектуры Web-сайта. Документ представляет собой блок-схему, на которой показаны все страницы, и отражена взаимосвязь между ними.

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

7. Созданиераскадровки страницы. Планирование последовательности анимационных действий, визуальная детализация интерактивных и прочих действий на сайте. Описание кнопок, содержание ссылок, всплывающих подсказок и др.

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

9. Определение вспомогательных приложений, которые требуются для компоновки Web-сайта.

10. Создание Web-сайта.

Лекция 7. Динамические процессы в мультимедиа среде

Лекция 8. Сведение элементов мультимедийного проекта в единое целое