Веб-редактор Macromedia Dreamweaver

Macromedia Dreamweaver MX - увлекательнейшая программа для создания Web-страниц. Ее возможности шире по сравнению с обычными функциями подобных редакторов. Dreamweaver позволяет создавать объекты и страницы с использованием языка DHTML, поддерживает каскадные таблицы стилей, а также слои и действия JavaScript.

Разработчику Web-проекта предлагаются гибкий и мощный инструментарий управления сайтом, включая встроенный полноценный FTP-клиент, визуальные карты сайтов и контроль над ссылками.

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

Интерфейс Adobe Dreamweaver 

Поработайте с презентацией "Основы работы с Dreamweaver", чтобы познакомиться с возможностями и интерфейсом программы.

Основы работы с Dream Weaver

Read more publications on Calaméo

Перед началом работы нужно обучить Dreamweaver русскому языку

Дайте команду Правка- Настройки.

В категории Создать документ в списке "Кодировка по умолчанию" выберите «Кириллица Windows".

А также в категории Шрифты в списке “Настройки шрифтов" выберите «Кириллица Windows".

Основные принципы построения веб-страницы

Прокрутка

• Избегайте горизонтального прокручивания
• Если страница занимает не меньше 2-3 экранов вертикальной прокрутки, то необходимо в начале страницы создать оглавление с использованием внутренних гиперссылок

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

http://www.weshootbottles.com/

Пространственный дизайн страниц

Согласно исследованиям, пользователь больше всего внимания уделяет зоне так называемого «золотого треугольника» и почти не обращает внимания на нижнюю правую часть экрана

Как пользователи видят сайт: зона "золотого треугольника"

"Золотой треугольник" распространяется на три-пять первых строчек среди результатов поиска:

1-я строчка - 100%
2-я строчка - 100%
3-я строчка - 100%
4-я строчка - 85%
5-я строчка - 60%
6-я строчка - 50%
7-я строчка - 50%
8-я строчка - 30%
9-я строчка - 30%

Диаграмма Гутенберга

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

Диаграмма Гутенберга: как пользователи читают страницы

Условно пользователь делит страницу на 4 зоны:

1. Левая верхняя — зона приоритетного просмотра

Сюда пользователь смотрит всегда. Именно здесь размещается самая важная информация — логотип и слоган. Если мы говорим про текстовый контент — это первые 2-3 слова заголовка.

2. Правая верхняя — хорошо просматриваемая зона

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

Пример 1 Страница регистрации на Фейсбуке

3. Левая нижняя — наименее исследуемая зона

Взгляд смещается сюда после правого верхнего сектора буквально на доли секунды. Это наименее исследуемая зона — пользователи просто не обращают внимания на информацию, размещенную здесь.

4. Правая нижняя — зона выхода

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

Пример 2: сайт компании, которая занимается дизайном и проектированием

На поведение пользователя также влияют два фактора:

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

Интересный факт: в странах, где пишут справа налево — диаграмма Гутенберга будет актуальна в отраженном виде.

Методы размещения элементов на странице

• Группировка – создание ассоциативных связей благодаря размещению схожих элементов рядом, разделения групп линиями и т.д.
• Выравнивание элементов по видимым и невидимым линиям
• Ритм – создание взаимосвязи благодаря использованию стилистически одинаковых выделений

Информационное наполнение страницы

Подача текста на странице –главный фактор, влияющий на то, как пользователь воспримет страницу. Текст, подготовленный для веб-страницы, отличают особые правила написания и оформления.  Всегда надо помнить, что пользователи чаще всего не ЧИТАЮТ страницы, а только ПРОСМАТРИВАЮТ ее.

Правила написания текстов

• Писать меньше – кратко, лаконично, только самое главное.
• Использовать принцип пирамиды – сначала подавать самые важные сведения, а потом их пояснять и детализировать
• Выкладывать самую важную информацию в «золотом треугольнике»
• Продумать заголовки. Удачный, привлекательный, короткий заголовок привлечет внимание читателя. Кроме того, заголовки помогают структурировать материал на странице
• Всю важную информацию выделять единым стилем

Обычный текст

Текст, подготовленный для веб-страницы

В штате Небраска находятся известные всему миру ландшафты, которые привлекают к себе туристов. В 1996 году наиболее посещаемыми местами были парк форта Робинзона (Fort Robinson Park) ( 355 000 тыс. посетителей), Исторический музей и парк «Арбор Лодж» (Arbor Lodge State Historical Park&Museum) (100 000), Картхендж (Carthenge) (86 597), музей пионеров прерии (Stuhr Museum of the Praie Pioneer) (60 000) и исторический парк «Ранчо Буффало Билла» (Buffalo Bill Ranch State Historical Museum) (28 446).

В 1996 году в штате Небраска выделено шесть наиболее посещаемых мест: n  Парк форта Робинзона n  Исторический музей n  Парк «Арбор Лодж» n  Картхендж n  Музей пионеров прерии n  Исторический парк «Ранчо Буффало Билла»

Разметка текста в HTML

Результаты практической работы "Разметка текста":

Фамилия, имя	Оценка
Юдин, Матвиенко	10
Пивовар, Иванченко	7
ГОльская, Палий, Хайрович	9
Момот, Школьная	8
Сушкевич, Клемятин	11
Лупийчук, Дурнева	7
Щербина, Рой	8
Шамаева, Бесценный	8
Панченко, Малютенко	8
Лисовская	7
Сытник, Сикорский	8

Откройте таблицу совместного доступа "Теги разметки текста в HTML". Заполните в таблице строку, соответствующую номеру вашего компьютера.

Загрузите файл-заготовку  с рецептом салата "Оливье" и иллюстрацию к нему.

Отформатируйте веб-страницу в соответствии с образцом:

Гиперссылки и изображения

Пройдите курс "Ссылки и изображения" с инструктором Кексом на сайте "HTML Академия"

Основные теги языка HTML

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартный язык разметки документов в  WWW. Большинство веб-страниц содержат описание разметки на языке HTML.  Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Любой сайт в Интернете формируется на основе языка разметки HTML. Просмотр сайтов выполняется через специальную программу — браузер, который знает этот язык и формирует её внешний вид, согласно разметке HTML.

В браузере достаточно нажать Ctrl+U, чтобы увидеть исходный код любой страницы в Интернете.

Как создать и сохранить веб-страницу в Блокноте?

Чтобы создать веб-страницу простейшими средствами, проделайте следующие шаги.

1. Откройте программу Блокнот (Пуск > Программы > Стандартные > Блокнот).

2. Наберите или скопируйте HTML - код в Блокноте.

3. Сохраните готовый документ (Файл > Сохранить как...), при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы и кодировку UTF-8. Обратите внимание, что расширение у файла должно быть именно html.

4. Запустите браузер, выберите пункт меню Файл > Открыть и укажите путь к вашему файлу.

Для закрепления базовых навыков работы с HTML пройдите курс "Знакомство" на сайте "Html academy". Для этого на главной странице сайта нажмите кнопку "Начать обучение".