Создаём простой сайт. Первый шаг.

Задача:

Создать простой сайт в несколько страниц.

Урок:

Xara как и другой визуальный редактор html позволяет быстро сделать сайт по принципу «как нарисовал - так и будет» или как это правильно называют аббревиатурой - WYSIWYG. На самом деле это очень плохой подход к созданию сайтов. Визуальные редакторы создают ужасный код и с ним впоследствии трудно работать. С другой стороны если нужно создать статический сайт, то здесь такие редакторы просто не заменимы.

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

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

Создайте новый документ File>New>955 pix web page. Откройте теперь галерею страниц и слоёв и посмотрите какую структуру приняла страница. Появились два слоя: MouseOff и MouseOver. На слое MouseOff Вы будете располагать весь свой контент, а на слое MouseOver - состояние объекта при наведении на него курсора мыши. Используя это нарисуем меню. Я сделал вот такую начальную страницу.

Справа вверху я расположил три кнопки меню, которые должны ссылаться на три страницы. Выделите первую кнопку, кликните на ней правой кнопкой мыши, и в меню выберите пункт Name. В появившемся окне задайте кнопке имя и нажмите кнопку Add.

Теперь нужно задать кнопке действие. Опять сделайте правый клик курсором на кнопке и выберите пункт меню Web Properties. Сейчас нас интересует вкладка Link - ссылка. В данном уроке я не буду рассказывать подробно все опции этого окна, всё это я буду раскрывать постепенно в последующих уроках. Поэтому найдите в этой вкладке пункт Link to и в выпадающем списке нажмите <Next page>, что значит «перейти на следующую страницу». Настоящие ссылки мы добавим потом, когда создадим ещё две страницы.

Теперь скопируйте кнопку в буфер обмена (ctrl+c), перейдите на слой MouseOver и вставьте кнопку на тоже самое место в этом слое (shift+ctrl+v). Не разгруппировывая кнопку, что бы не задавать по новой имя и веб-свойства, я поменял ей цвет. Получилось, что на слое MouseOff у меня есть красная кнопка, а на слое MouseOver фиолетовая и у обоих этих кнопок задано одинаковое имя. Протестируйте страницу File>Preview web page. Теперь при наведении курсора на кнопку она будет менять свой цвет.

Проделайте те же операции с остальными кнопками.

Создайте две новых страницы Edit>Pages>New Page и назовите их.

Задайте каждой кнопке в веб свойствах Link to - на свою страницу. Сделайте это кнопкам на слое MouseOff и MouseOver. Теперь клик на кнопку приведёт Вас на нужную страницу.

Что бы кнопки меню автоматически продублировались на каждой странице, нужно просто выделить их, кликнуть правой кнопкой и выбрать пункт меню Repeat on all pages.

После этого останется только наполнить контентом страницы и экспортировать сайт целиком в отдельную директорию.

Этот урок хоть и простой, но очень важный. Постарайтесь вникнуть во все действия которые делаете, если что то не понятно - спросите. Все остальные уроки по сайтостроению будут базироваться на выше написанном. Разберитесь с именами объектов, со слоями, с дубликатами объектов. Повторите все действия снова и снова, пока не поймёте, как работают эти основы.

Файл исходник.