21. Макетирование сайта в визуальном редакторе html-Macromedia DreamWeaver.

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

2. Воссоздадим страницу, созданную в PhotoShop с нуля.

Выберите File (Файл)> New (Новый). В него мы добавим таблицу для того, чтобы контролировать дизайн страницы. Введите 4 строки и 1 столбец. Задайте ширину в 775 пикселей. Ширину можно задавать также в процентном выражении. Это заставит таблицу автоматически изменять свой размер с изменением размера окна браузера.. Поэтому мы бы не рекомендовали этот способ для сведения воедино фрагментов. Задайте толщину границы равной 0 (поле border), так как мы хотим, чтобы наша таблица была невидима. Кроме этого, задайте параметры cell padding и cell spacing равными нулю. Это приведет к тому, что изображения будут плотно, без пробелов подогнаны одно к другому. Параметр cell spacing задает расстояние в пикселях между соседними ячейками таблицы. Параметр cell padding задает расстояние между содержанием ячейки и ее границами.

3. А теперь настало время вставить изображения в наш макет. Мы загрузим отдельные изображения в ячейки таблицы, которые помогут объединить страницу в целое. Самый удобный способ вставки изображений - это их перетаскивание из окна Site в документ. Во время перетаскивания вы будете видеть пиктограмму странички.

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

4. Необходимо удалить пустое пространство по краям страницы. Откройте диалоговое окно Page Properties (Свойства страницы) и задайте нулевые поля

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

6. Создайте гиперссылку для кнопки «Home». Для этого выделите её и в панели свойств введите имя связи в поле Link(Связь) – index.html (или воспользуйтесь пиктограммой папки, чтобы найти нужный файл).

7. В данном случае мы хотим, чтобы с помощью этой ссылки можно было отправить электронную почту, а не попасть на другую страницу. В тех случаях, когда необходимо создать ссылку на электронную почту, ее текст необходимо начинать со слов «mailto:», а затем ввести адрес электронной почты, куда необходимо послать сообщение. Например: mailto:[e-mail]. Если пользователь щелкнет на такой ссылке, будет открыт его заданный по умолчанию редактор электронной почты с уже введенным адресом в поле То (Кому). Если, кроме этого, вы хотите, чтобы автоматически заполнялось и поле Subject (Тема) электронного сообщения, добавьте в ссылку ?subject="". В целом гиперссылка должна выглядеть следующим образом: mailto:[e-mail]?subject= "message from web page".

8. Запустите страницу в браузере, нажав F12, и проверьте гиперссылки.

Шаблоны являются невероятно полезным инструментом. Шаблон (template) содержит те элементы сайта, которые являются общими для всех страниц сайта, поэтому достаточно изменить основной шаблон - и все страницы, использующие шаблон, обновятся автоматически. Например, можно создать графическую навигационную панель и применить ее ко всем страницам web-сайта. Красота такого решения заключается в том, что, если необходимо что-либо изменить, это можно сделать единожды - в шаблоне. Все изменения в шаблоне тут же распространятся на все страницы сайта. Элементы, принадлежащие шаблону, заблокированы на странице, поэтому случайные изменения исключены. Это полезно в случае разработки проекта командой разработчиков, так как имеется возможность контроля доступа к различным элементам страницы.

21. WEB-сайт как площадка для рекламы в Интернете. Требования, предъявляемые к сайту

Web-сайты, в частности, могут выполнять следующие функции: 

* Реклама с наименьшими затратами. Проведение рекламных кампаний и акций в Интернете не потребует слишком серьезных материальных затрат, позволяя анализировать отдачу на вложенные рекламные средства.

* Организация электронной торговли через Интернет-магазин. Фирма может круглосуточно торговать своей продукцией. Покупатель делает заказ из дома или офиса, получая при этом исчерпывающую информацию о товаре. При этом покупатель экономит время, а компании не требуется привлекать дополнительный персонал (продавцов, кассиров, охранников), арендовать торговые площади и т.д.

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

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

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

Сложность и тип Web-сайта находятся в прямой зависимости от предстоящих задач, возлагаемых на этот ресурс. По этому критерию Web-сайты можно условно классифицировать по следующим типам: 

1. Имиджевый сайт. Если Web-сайт несет преимущественно представительские функции, то он относится к классу имиджевых. В этом случае особенно высокие требования предъявляются к его дизайну — графическому представлению. В загрузочной заставке должна быть представлена фирменная символика (логотип, название), встречающая посетителей сайта и создающая благоприятный имидж компании. Традиционно в структуре представительского сайта присутствуют следующие страницы: «О компании» («Портрет компании»), «Товары и услуги», «Контакты». При создании имиджевого сайта рекомендуется активно использовать мультимедийные спецэффекты (анимацию и звук). 

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

3. Электронный магазин. Информационно-имиджевый ресурс, снабженный каталогом товаров и системой формирования заказов («корзина»). Посетители такого сайта могут оформить заказ и оплатить его при доставке.