пятница, 12 августа 2011 г.

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

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

Урок:
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.



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


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

3 комментария:

  1. Спасибо за урок. Как раз то что нужно
    А если мне нужно постоянно наполнять сайт контентом,
    то придется открывать его снова в редакторе?
    Или можно реализовать систему добавления контента
    через логин и пароль прямо на сайте?

    С уважением, Игорь.

    ОтветитьУдалить
  2. Это визуальный редактор и поэтому что бы дополнить контент нужно опять открывать всё в Xara.
    Я бы рекомендовал всё же начать понемногу изучать CSS3 и HTML5. Вот этот ресурс Вам подойдёт http://htmlbook.ru/.
    Xara же используйте для создания графики для сайта или же для создания базовой страницы с последующим переводом вручную в правильный вид. Всё таки будет проще переписать вручную стили, чем строить страницу из головы.
    Система добавления контента это уже другой уровень и тут уже нужно изучать языки программирования. Поэтому рекомендую начать пользоваться какой нибудь уже готовой бесплатной CMS. Попробуйте например http://prestadev.ru/ или http://ru.wordpress.org/.

    ОтветитьУдалить
  3. Мне нравится, что вы используете скриншоты и наглядно показываете, что должно получится. Но создать сайт проще простого дело, поэтому его можно разрабатывать не только в конструкторах, которые требуют минимальные знания в программировании, но и в обычном блокноте или ворде.

    ОтветитьУдалить