4 Пример создания сайта в html-редакторе
Для того чтобы показать HTML-редакторы в действии, и заодно рассказать как пользоваться ими, я взял для примера редактор KompoZer. С помощью него я расскажу, как создать быстро свой небольшой сайт, и как пользоваться данным приложением. Эта программа свободно распространяется и её можно спокойно скачать с официального сайта.
KompoZer — бесплатный WYSIWYG-редактор для создания веб-сайтов. Визуальная вёрстка сайта практически нетребует знания тегов HTML и поэтому особенно удобна для начинающих. Она позволяет свободно вставлять текст, картинки, изменять их размер, быстро добавлять таблицы, разнообразные формы и другие элементы. В редакторе также имеется инструмент для редактирования каскадных таблиц стилей (CSS) и встроенные шаблоны веб-страниц. С помощью этой программы можно достаточно легко и быстро создавать полноценные веб-сайты и размещать их в Интернете. KompoZer может составить достойную конкуренцию таким известным решениям, как Dreamweaver или FrontPage (SharePoint Designer).
Программа поддерживает работу в Windows 95, 98, Me, NT 4.0, 2000, Server 2003, XP, Vista, Windows 7. Есть версии для Mac OS X и Linux. Возможно использование редактора без инсталляции. KompoZer достаточно просто русифицируется и имеет подробную справку на русском языке.
Возможности программы:
Визуальный (WYSIWYG) и текстовый (HTML) режимы редактирования веб-страниц.
Выбор языка разметки (HTML 4, XHTML 1, Transitional, Strict).
Выбор кодировки страницы (UTF-8, Windows-1251 и другие).
Экспорт веб-страницы в текстовый формат.
Сохранение с изменением кодировки.
Предварительный просмотр.
Одновременное редактирование нескольких документов с помощью вкладок.
Поддержка форм, таблиц и шаблонов.
Встроенный редактор каскадных таблиц стилей (CSS).
Встроенная консоль JavaScript.
Проверка орфографии, в том числе и русской (при установке соответствующих словарей).
Возможность проверки кода с помощью валидатора W3C.
Встроенный FTP-клиент для публикации сайта на хостинге в сети Интернет.
Итак, мы немного ознакомились с программой. Теперь нам нужно установить её себе на компьютер и начать работу. Для этого нужно будет выполнить несколько шагов. И нужно учитывать то, что KompoZer не нуждается в установке.
Установка и русификация программы.
Шаг 1. Заходим на официальный сайт программы: http://kompozer.net. Даже с небольшим знанием английского языка легко разобраться, как скачать программу.
Рисунок 1 - Заглавная страница сайта программы KompoZer
Жмём синюю кнопку Download KompoZer.
Шаг 2. Разархивируем скачанный архив в любую удобную директорию. Например: C:\Program Files\CompoZer.
Шаг 3. Запускаем .ехе файл: kompozer.exe. У нас открылась программа, и сразу же появляется дополнительное окно с подсказками. Они очень полезны. Но не сейчас. Сейчас вся программа на английском языке. Для людей хорошо знающих английский язык, это не проблема, но лучше знакомиться с программой, когда она «говорит» на одном языке с тобой.
Рисунок 2 - Рабочая среда программы KompoZer
Шаг 4. Русификация интерфейса KompoZer. Для русификации последней стабильной версии KompoZer 0.7.10 необходимо скачать на компьютер русскоязычный пакет локализации kompozer-0.7.10.ru-RU.xpi со страницы http://kompozer.net/download-07.php#l10n. Для установки пакета запустите KompoZer, зайдите в Tools | Extensions (Инструменты | Расширения) и нажмите кнопку Install (Установить). В открывшемся окне файлового менеджера найдите и выберите закачанный ранее пакет локализации, затем нажмите кнопку Install Now. После инсталляции закройте окно Install и перезапустите программу. Если установка пакета прошла успешно, KompoZer откроется с русскоязычным интерфейсом.
Рисунок 3 - Настройка русского языка в KompoZer
Шаг 5. После перезапуска приложения, весь интерфейс будет на русском языке. И что так же немало важно, подсказки так же будут полностью на русском языке.
Рисунок 4 - Русифицированный интерфейс программы KompoZer
Разработка сайта.
Теперь мы имеем в своём распоряжении простой, и полностью русифицированный HTML-редактор, с помощь которого создать вполне работоспособный сайт, со всеми необходимыми элементами, займёт совсем немного времени! Сейчас я расскажу об основах, которые необходимо знать для написания своего сайта.
Итак, наше приложение уже запущено, и мы видим перед собой вот такую картину:
Рисунок 5 - Основное рабочее поле программы KompoZer
Внизу находятся 4 вкладки, с помощь которых можно менять вид программы, для работы в разных режимах:
1 вкладка: обычный режим, в котором мы сейчас находимся, и с которым мы будем работать.
2 вкладка: HTML-теги. Похожа на обычный режим, но рядом с каждым элементом страницы будет подписан его основной HTML-тег.
3 вкладка: Код. Это режим работы с самим HTML-кодом страницы.
4 вкладка: Предварительный просмотр. В этом режиме созданная страница будет отображаться примерно так, как она должна смотреться в Интернет-браузере.
Вернёмся на 1 вкладку и начнём работу.
Какие же основы нам нужно знать, для того чтобы создать нормальный сайт? Перечислим их.
1 Ввод текста и его форматирование.
2 Создание таблиц и работа с ними.
3 Вставка изображений.
4 Создание гиперссылок.
5 Оформление сайта (фоновые рисунки, цвет фона, рамки и т.д.).
Начнём работу с первого пункта.
Ввод текста и его форматирование.
Ввод текста осуществляется очень просто, текстовый курсор находится сразу там, где нужно, и нам достаточно просто начать набирать какой либо текст. Например, напишем: Привет мир и всем кто смотрит мой сайт! Получилась следующая картина:
Рисунок 6 - Ввод текста в рабочее поле
Теперь отформатируем этот текст, так как нам нужно. Например, сделаем его жирным, и расположим посередине страницы. Для этого используется данная панель управления:
Рисунок 7 - Панель управления текстом
Она очень похожа на панель управления шрифтом в Microsoft Word. Здесь слева направо:
Выбор шрифта, выбран Пропорциональный, Цвет текста черный, Цвет фона белый, уменьшить/увеличить шрифт, сделать текст жирным/курсивным/подчёркнутым, и выравнивание: по левому краю, по центру, по правому краю, по всей ширине. Всю необходимую информацию об этих элементах, можно получить, наведя на них курсор мыши.
Выбираем: текст жирный, выравнивание по центру.
Рисунок 8 - Видоизменение введённого текста
Но текст всё ещё маловат. Увеличим его. Для этого используем кнопку «Увеличить размер шрифта».
Рисунок 9 – Увеличение размера текста
Теперь текст выглядит достойно для заголовка страницы. Осталось лишь покрасить его в любой желаемый цвет и заголовок готов! Чтобы изменить цвет заголовка, выберем на панели элемент «Выбор цвета для текста», нажмём его и выберем нужный цвет.
Рисунок 10 – выбор цвета для текста на панели управления текстом
Появиться новое диалоговое окно с выбором цвета.
Рисунок 11 – Диалоговое окно выбора текста
Выбираем понравившийся цвет и жмём кнопку ОК.
Получаем вот такой результат:
Рисунок 12 – Результат видоизменений текста
Этих основ вполне достаточно для того чтобы работать с текстом на Web-странице. Перейдём, к следующему пункту.
Создание таблиц и работа с ними.
Неотъемлемую частью практически любого сайта составляют таблицы. Сейчас мы научимся их создавать. Сейчас текстовый курсор находится в конце предложения написанного ранее, жмём клавишу Enter, и на панели управления выбираем иконку Таблицы.
Рисунок 12 – Выбор на панели задач элемента «Таблица»
Появится новое диалоговое окно, в котором мы выбираем нужную таблицу, и способ её построения.
Рисунок 13 – Окно настройки вставляемой таблицы
Остаёмся на вкладке Простая и создадим таблицу размером 2 на 3.
Вот что мы получили:
Рисунок 14 – Результат создания таблицы
Далее работа с таблицей не требует больших усилий. Для того чтобы вписать какой либо текст в чеку, следует только выбрать её и начать писать.
Рисунок 15 – Вписывание текста в таблицу
Цвет текста в ячейках таблицы, и цвет фона самих ячеек можно менять. Цвет текста в ячейке меняется тем же элементом что и простой текст, а цвет фона ячейки меняется элементом расположенным рядом. И называется он «Выбор фонового цвета».
Рисунок 16 – Изменение фонового цвета в ячейках таблицы
Изменим цвет текста и цвет фона ячеек, сделаем текст жирным, курсивным, подчёркнутым, выбрав нужные элементы. И получим, например, вот такой результат:
Рисунок 17 – Изменённая таблица
Размеры ячеек можно изменять, и легко вставлять новые строки и столбцы. Для того чтобы изменить размер ячейки нужно выбрать её и с помощью специальных полей вверху страницы увеличивать/уменьшать размеры ячейки.
Рисунок 18 – Наглядное объяснение, как изменить ширину таблицы
Так же можно изменять и высоту таблицы.
Рисунок 19 – Наглядное объяснение, как изменить высоту таблицы
Для того чтобы вставить строку или столбец, можно использовать дополнительные элементы которые появляются при выборе ячейки.
Рисунок 20 – Вставка столбца
Точно так же можно вставить, строку сверху/снизу относительно выбранной строки, используя подобные элементы. Они находятся слева от выбранной ячейки.
Рисунок 21 – Вставка строки
На этом с таблицами можно закончить.
3. Вставка изображений.
Для вставки изображения используется так же специальный элемент панели управления.
Рисунок 22 – Выбор элемента на панели управления, для вставки изображения
Нажимаем на этот элемент и в появившемся окне и выбираем директорию с изображением, которое вы хотите вставить в свой сайт.
Рисунок 23 – Окно настройки изображения
В поле «Альтернативный текст» впишем название картинки, а точнее краткое описание того, что на ней изображено, для браузеров в которых ваше изображение может не отобразиться или не удачно загрузиться, будет написан этот текст. В поле «Всплывающая подсказка» можно написать название, или очень краткое пояснение изображения.
Рисунок 24 – Пример вставляемого изображения
Здесь же, в этом окне во вкладке «Размеры» можно изменить размер изображения, или же оставить исходный размер. Во вкладке «Внешний вид» можно указать отступы от картинки слева, справа, сверху, снизу, добавить рамку, а так же указать «расположение текста по отношению к изображению». Давайте добавим рамку, в 5 пикселей.
Рисунок 25 – Изменение внешнего вида изображения
Во вкладке «Ссылка» можно сделать картинку ссылкой на другую страницу, или же на другое место этой же страницы. Закрываем окно, нажатием кнопки ОК. Результат:
Рисунок 26 – Результат вставки изображения
Изображение белых Лилий в рамке размером в 5 пикселей. Размер изображения можно легко изменить. Для этого нужно выбрать изображение, вокруг него появится тоненькая рамка, с четырьмя квадратами по углам, и с четырьмя квадратами в серединах сторон.
Теперь чтобы изменить размер изображения нужно лишь потянуть зя любой из квадратиков. Если нужно изменить размер изображения строго по пикселям, то нажимаем правой кнопкой мышь по картинке, и в выплывающем меню выбираем пункт «Свойства изображения».
Рисунок 27 – Выбор свойств изображений
Появиться уже знакомое окно и в нём во вкладке размеры меняем размер изображения, как было рассказано ранее.
На этом с изображениями можно закончить. Перейдём к следующему разделу.
4. Создание гиперссылок.
Одна из важнейших задач, в создании сайта, это задача по созданию гиперссылок. Все сайты основаны на них. И без ссылок невозможно обойтись ни на одном сайте, даже если он будет состоять всего из одной страницы. Гиперссылки условно можно поделить на три раздела:
Ссылки, служащие для перехода между разделами одной страницы.
Ссылки, служащие для перехода между страницами сайта.
Ссылки, служащие для перехода на другие сайты, сетевые ресурсы.
Но в основе своей, все эти ссылки похожи между собой по способу их построения. Создадим ссылку, служащую для перехода между разделами одной страницы.
Для начала добавим на нашу страницу побольше контента, текста, картинок, таблиц, так, чтобы появилась полоса прокрутки, и были освещены разные темы на одной странице. Сейчас для примера я накидал на страницу разные тексты, и картинку, которые не связаны между собой, но занимают пространство страницы, из-за чего появилась прокрутка. Теперь, сделав всё это, прокручиваем нашу страницу вниз и пишем слово «Наверх». Это слово будет служить ссылкой наверх этой страницы, для того чтобы не нужно было прокручивать страницу наверх вручную. Такие ссылки принято делать на всех страницах вашего сайта, где много текста или картинок, и для того чтобы вернуться наверх к меню сайта, нужно прокручивать страницу назад.
Рисунок 28 – Подготовка слова для преобразования её в ссылку
Вот мы написали слово «Наверх», в самом конце нашей страницы. Теперь нам нужно указать место, куда должна эта ссылка вернуть нас. На панели управления выбираем элемент «Якорь», предварительно поставив текстовый курсор в то место, где должен создаться якорь.
Рисунок 29 – Создание «якоря»
После нажатия на элемент, появится маленькое окошко, в котором нужно будет вписать имя «Якоря». После чего нажимаем кнопку ОК, и переходим вновь в самый низ нашей страницы.
Выделяем наше слово «Наверх», и на панели управления рядом с «Якорем» жмём на элемент «Ссылка». Появляется окно, в котором нужно выбрать адрес объекта ссылки. Из выпадающего меню выбираем наш «якорь» под названием начало.
Рисунок 30 – Создание ссылки из слова «наверх»
Жмём ОК, и получаем готовую ссылку на начало нашей страницы, характерного синего цвета, с подчеркиванием.
Рисунок 31 – Результат создания ссылки
Ссылки на другие страницы сайта, и на сторонние сайты делаются таким же образом. Только для этого не нужен «Якорь». Точно так же выделяем нужный текст, жмём на элемент «Ссылка», и в появившемся окне, в поле «Адрес элемента ссылки» мы указываем либо путь до другой страницы нашего сайта:
Рисунок 32 – Создание ссылки на внешние файлы, документы, страницы
Либо в этом же поле прописываем адрес стороннего ресурса:
Таким не хитрым способом создаются ссылки между разделами страницы, между страницами одного сайта, и между сайтами.
5. Оформление сайта (фоновые рисунки, цвет фона и т.д.).
Ну и последний пункт, по счету, но не по значению, это оформление сайта. Ведь всегда приятно попасть на красиво и грамотно оформленный сайт, где все цвета и картинки вписываются в общую картину сайта, и помогают понять смысл и задумку сайта, а так же его тематику. Даже очень красиво и ярко оформленный сайте может проигрывать простому, и не очень ярко раскрашенному сайту, если первый будет не в меру ярким и вычурным.
Если вместо того, чтобы помогать понять лучше смысл текста написанного на странице, рядом находящаяся картинка будет не подходящей, или даже отвлекать на себя внимания не неся в себе смысла, это будет очень плохо. Ваш сайт станет бессмысленным, и если люди и будут на него заходить то только лишь посмотреть картинки и быстро уйти, и уже ни когда не вернуться назад.
Поэтому при создании фона, выборе цветовой схемы сайта, нужно придерживаться стиля и смысла сайта, который вы хотите создать. Лучше всего чтобы на сайте было не больше 4 разных цветов, которые будут сочетаться друг с другом. Этого будет достаточно чтобы украсить сайт, но и не будет выглядеть слишком броско.
Перейдём к тому, как создать фоновый рисунок, или же покрасить фон вашего сайта в определённый цвет в нашей программе.
Конечно же оформление сайта не заканчивается одними лишь цветами фона и блоков, вообще конца оформления нет. Сайт можно оформлять столько сколько угодно. Но эти знания являются необходимым минимумом оформления.
Итак, приступим к покраске нашего сайта. Когда мы использовали разное выравнивание для разных элементов нашего сайта, каждый элемент автоматически помещался в отдельный блок, который называется Div. Теперь при раскраске нашего сайта, каждый из этих блоков может иметь свой цвет, или фоновую картинку.
Рисунок 33 – Отображение тегов форматирования
Раскрасим каждый блок нашего сайта в любой желаемый цвет. Сейчас мы учимся использовать возможности программы, поэтому можно красить и не в сочетающиеся цвета, главное понять принцип работы. Для этого, выставим текстовый курсор в нужный болк и с помощью элемента «Выбор фонового цвета» на панели инструментов выберем нужный цвет фона. Таким методом уже был покрашен фон в ячейках таблицы.
Рисунок 34 – Раскраска фона блоков Div
Раскрасив все блоки, у нас всё ещё остаётся основной фон, который мы не покрасили. В нижнем левом углу есть строка показывающая сколько основных тегов прописано перед текстом или изображением на котором стоит текстовый курсор. Жмём правой кнопкой мыши по самому первому тегу в этой строке, по тегу <body>. И в выплывающем меню выбираем пункт, «дополнительные свойсва».
Рисунок 35 – Выбор доп. свойств тела страницы
В открывшемся окне, в поле «Атрибут:» из выпадающего меню ,выбираем пункт bgcolor. В соседнем поле «Значение:», из выпадающего меню выбираем нужный нам цвет, например Fuchsia. И жмём кнопку ОК.
Рисунок 35 – Раскраска фона страницы
Теперь у нас за блоком зелёного цвета, фон стал цвета фуксии.
На этом можно закончить раскраску сайта, а заодно и небольшой мануал о простейших и необходимых возможностях HTML-редактора KompoZer. Теперь вы сможете создать свой простой сайт, который включает в себя все необходимые элементы и будет выглядеть достаточно приятно и красиво.