Создание шаблона html-документа и заполнение его информацией

Для создания HTML-документов в текстовом процессоре Word должны быть соответствующие инструменты. Для проверки этого выполните команду Файл, Создать. Если в появившемся окне есть вкладка Web-страницы, то эти инструменты у вас есть. Затем в меню Формат→Тема. При заполнении шаблона информацией не забывайте стирать слова шаблона, такие, как Вставьте заголовок или Введите текст. Слова, выделенные синим цветом, являются гиперссылками, они позволяют переходить сразу к указанным подразделам документа.

Вставка в документ "бегущей строки", графического объекта и гиперссылок

Размеры бегущей строки можно менять, как и размеры любого объекта Windows. Вставку в документ рисунка из файла можно выполнять тремя способами:

• выполнив команду Вставка, Рисунок, Из файла, выбирать файл с подходящим рисунком из каталога Clipart;

• нажав правую кнопку мыши и открыв пункт Рисунок, выбирать файл с подходящим рисунком из каталога Clipart;

• нажав на значок рисунка в левой нижней части окна, после чего выбирать файл с подходящим рисунком из каталога Clipart.

Вставить рисунок с его предварительным просмотром можно командой Вставка, Рисунок, Картинки.

С помощью меню Вид→Панели Инструментов активизируем панель Веб-компоненты. Вызовем окно Бегущая строка, нажав на этой панели кнопку

Гиперссылку на текст, находящийся на разрабатываемой вами странице, можно сделать следующим образом:

• поставьте курсор в ту часть текста, куда надо перейти по гиперссылке;

• выполните команду Вставка, Закладка;

• в строке Имя закладки введите сочетание символов, например Закл1

• переведите курсор в ту часть текста, где будет гиперссылка;

• напишите название гиперссылки;

• выделите это название;

• выполните команду Вставка, Гиперссылка;

• щелкните по кнопке <Обзор> напротив поля "Имя объекта в документе";

• выберите имя закладки Закл1, щелкните по кнопке <ОК>, затем снова щелкните <ОК> - гиперссылка готова.

Обработка текста, таблиц.

Фон – должен быть неагрессивным, не навязчивым и соответствовать теме сайта (Формат - Фон)

Шрифт – достаточно крупный, контрастный, с выделением заголовков, с применением цвета и начертания (Формат – Шрифт, Абзац)

Фотографии и рисунки – вставляются в ячейки таблиц и служат иллюстрацией к тексту, а текст же наоборот – комментарием к фотографиям (Вставка – Рисунок - … )

Таблицы – содержат всю основную информацию, однако, надо не забыть сделать границы таблиц невидимыми (Таблица – Вставить таблицу)

Гиперссылки – создаются после создания тех объектов, на которые они ссылаются (Вставка - Гиперссылка)

68. Основы Web-дизайна. Работа с редакторами визуального проектирования.

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

Существует множество инструментов, с помощью которых веб-дизайнер осуществляет верстку страниц. Такие программы называются HTML-редакторами. В веб-дизайне используется два типа редакторов — визуальные и невизуальные (текстовые). Первые работают по принципу WYSIWYG (от англ. — WhatYouSeeIsWhatYouGet — что видишь, то и получаешь. Другими словами, это способ подразумевает, что при редактировании материал выглядит так же, как он и будет выглядеть в конечном результате. Текстовыми же редакторами, в основном, пользуются профессиональные веб-дизайнеры — так как такие инструменты подразумевают написание кода самостоятельно. С помощью текстовых редакторов создается чистый программный код, который позволяет веб-дизайнерам полностью воспроизводить задуманное, без вмешательства инструмента “по умолчанию”. Существуют также редакторы, которые поддерживают оба принципа работы.

Примером визуального редактора является WYSIWYG WebBuilder.

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

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

Для этого можно использовать многочисленные инструменты, размещенные на вертикальной панели. Для удобства они разбиты по категориям: навигация (дерево сайта, меню навигации), рисование (линия, кривая, многоугольник), мультимедийные инструменты (Flash-плеер, плеер YouTube, Java, OLE-объект), средства для работы с web-формами (поле для вставки кода CAPTCHA, флажок, кнопка для загрузки файла, поле для ввода текста), Paypal (различные кнопки для работы с этой системой электронных платежей) и пр. Если какая-либо категория средств вам не нужна в работе, ее можно свернуть, чтобы освободить место на экране для более востребованных инструментов.

Стоит обратить внимание и на категорию Extra. Тут собраны средства для создания фотогалереи, добавления подписки на новости в формате RSS, слайд-шоу, поиска по сайту. Тут же можно обнаружить целую коллекцию готовых элементов кода Javascript. Это и разнообразные визуальные эффекты, и такие полезные средства, как определение текущей версии браузера, вывод информации о времени последнего изменения веб-страницы, размещение ссылки на занесение страницы в закладки.

Несмотря на то, что работая в WYSIWYG WebBuilder пользователь видит готовые элементы страницы, в браузере сайт все же может выглядеть немного не так, как в рабочем окне редактора. Для быстрого просмотра внешнего вида страницы в браузере достаточно нажать клавишу F5. WYSIWYG WebBuilder откроет проект в обозревателе, который используется в системе по умолчанию. Если нужно просматривать страницы сразу в нескольких браузерах, их можно добавить в список.

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

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