Как создать сайт с помощью программы kompozer

По теме: методические разработки, презентации и конспекты

«Создание формы для многотабличной базы данных «Студенты». Создание и установка связи между главной и подчинённой формами». (Методическое пособие для выполнения практической работы)

Методическое пособие по выполнению практической работы по теме «Разработка форм в базе данных» содержит теоретическую часть,порядок создания формы, практическое задание и вопросы для самок.

Создание эскиза костюма в Gimp ч.2 Создание оригинального эскиза костюма-образа

Презентация с материалом по практической работе в графическом редакторе Gimp. Занятие из серии «Образ в коллекции» — работа над эскизами по авторской программе «Дизайн-студия «Стиль игры»».

Презентация «Тайны созданных созданий (определение признаков символизма)

(определение признаков символизма на примере анализа стихотворений В. Я. Брюсова.

Создание простого сайта в программе KompoZer

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

Актуальные вопросы методики преподавания предметов естественнонаучного цикла и географии.

Создание дизайна сайта с помощью программы Adobe Photoshop CS 8 Создание дизайна сайта с помощью программы Adobe Photoshop CS 8

PowerPoint №7. Презентация «Времена года». Создание презентации из нескольких слайдов. Создание управляющих кнопок

Практическая работа №7 Презентация «Времена года».Создание презентации из нескольких слайдов. Создание управляющих кнопок. Цель: показать возможность управления презентацией с помощью гиперс.

Создание ситуации успеха ученика как одно из условий создания здоровьесберегающей среды.

Педагогические приемы создания ситуации успеха.

Источник: nsportal.ru

§ 14. Создание сайта «Домашняя страница»

Рассмотрим процедуру создания простого сайта (домашней страницы) в редакторе KompoZer (версия О.8Ь3). Для начала опишем интерфейс программы и перечислим основные приемы работы с текстом, гиперссылками и графикой.

Интерфейс программы KompoZer

1. Меню. Содержит пункты для выполнения всех операций, возможных в KompoZer.
2. Панель компоновки. Содержит кнопки наиболее часто используемых операций.

Делаем сайт в KompoZer

1. Панель форматирования. С помощью панели форматирования можно выбирать шрифт, менять его цвет и размер, выделять блоки текста, создавать нумерованные и маркированные списки, выравнивать текст (влево, вправо, по центру, по ширине).
2. Панель вкладок. KompoZer позволяет одновременно редактировать несколько документов, используя разные вкладки для каждого открытого документа.
3. Панель режимов редактирования показывает, в каком режиме просматривается текущий документ. Доступны режимы Дизайн, Объединенный и Код.
4. Рабочее окно. В рабочем окне происходит непосредственно создание страницы.
5. Менеджер сайта позволяет загрузить созданную страницу на сервер.

Рассмотрим работу с текстом, гиперссылками и изображениями на примере создания «Домашней страницы Пети Иванова». Для начала следует запустить программу KompoZer, после чего программа выйдет в режим создания новой wеb-страницы. Далее необходимо задать глобальные настройки страницы.

Глобальные настройки страницы

Для изменения глобальных настроек страницы (цвета фона, фонового рисунка, цвета гиперссылок, основного цвета текста) необходимо выбрать пункт Формат ^ Цвета и фон страницы. Для задания стандартных цветов — выбрать радиокнопку Цвета пользователя по умолчанию, для задания собственных цветов — радиокнопку Использовать цвета, после чего выбрать из палитры нужные цвета. Для задания фонового рисунка — выбрать соответствующий файл с изображением в поле Фоновое изображение.

• выбором цвета (оттенка) из дискретной или непрерывной палитры цветов;
• получением цвета (оттенка) путем смешивания красного, зеленого и синего цветов (RGB-модель);
• формированием цвета через параметры Оттенок, Насыщенность, Яркость;

• вводом в поле Имя английского названия цвета (например: Yellow) ;
• вводом в поле Нех 16-ричного кода цвета (если он вам известен).

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

Выберем для нашего сайта черный цвет текста, коричневый цвет всех гиперссылок (Нех = #993300) и светло-желтый цвет фона (Нех = #FFFFCC).

Работа с текстом

Для ввода текста достаточно просто установить курсор в рабочее окно и начать ввод. Предварительно с помощью Панели форматирования или через пункт меню Формат можно задать тип, размер и цвет шрифта, начертание, тип выравнивания текста и т. д. Работа с текстом в программе KompoZer очень напоминает работу в текстовом процессоре Word, поэтому предлагаем вам самостоятельно разобраться с настройками параметров текста.

После задания настроек введите нужный текст.

Помимо заголовка, добавим на страницу следующий текст:

Для данного текста выберем шрифт Verdana, размер — Medium, стиль абзаца — Обычный текст, цвет текста — черный, выравнивание — по центру.

Создание текстовых гиперссылок

• выбрать пункт Вставка ^ Ссылка (или нажать кнопку Ссылка на Панели компоновки);
• в первое поле диалогового окна ввести текст гиперссылки;
• во втором поле диалогового окна указать URL-aдpec объекта, на который указывает гиперссылка, или ввести имя файла с указанием пути к нему.

1. Мои родители (имя файла — parents.html);
2. Мои друзья (имя файла — friends.html).

После выполнения этих действий вы должны увидеть приблизительно такой вариант главной страницы, как на рис. 2.12.

Рис. 2.12. Главная страница сайта «Домашняя страница Пети Иванова»

Сохранение страницы

Чтобы сохранить созданную страницу, необходимо выбрать пункт Файл → Сохранить, выбрать нужную папку и ввести имя файла — index.html.

Просмотр кода

Чтобы просмотреть или внести изменения в HTML-код документа, необходимо в панели режимов редактирования выбрать режим Код. Выберите данный режим и посмотрите полученный результат.

Теперь создадим вторую страницу сайта (рис. 2.13). Задавать глобальные настройки страницы, создавать заголовок и добавлять текст вы уже умеете.

Рис. 2.13. Вторая страница сайта «Домашняя страница Пети Иванова»

Попробуйте самостоятельно задать параметры страницы и создать заголовок «О себе». Затем наберите следующий текст:

Меня зовут Иванов Петя. Я родился 21 мая 2000 года в городе Перми. В 2007 году пошел в первый класс школы № 59, где и учусь в настоящее время в 7 «б» классе. Мои любимые предметы — математика и история.

Параметры заголовка аналогичны параметрам заголовка на главной странице сайта. Для текста используйте выравнивание по ширине. Остальные параметры аналогичны параметрам текста главной страницы.

Теперь добавим к тексту изображение.

Добавление изображения

• установить курсор в место вставки рисунка;
• выбрать пункт Вставка Изображение;
• с помощью вкладки Адрес задать адрес изображения либо выбрать файл с изображением с помощью кнопки Открыть;
• здесь же ввести текст всплывающей подсказки и альтернативный текст (при необходимости);
• с помощью вкладки Размеры задать размеры рисунка (если необходимо выполнить масштабирование);
• с помощью вкладки Внешний вид задать отступы от изображения до текста по горизонтали и вертикали, а также определить расположение текста по отношению к изображению;
• если рисунок должен выполнять роль гиперссылки, то с помощью вкладки Ссылка задать адрес документа, на который будет осуществляться переход.

• установите курсор в начало первого абзаца текста;
• выберите пункт Вставка ^ Изображение;
• выберите файл boy.jpg;
• введите всплывающую подсказку — «Петя Иванов» (альтернативный текст вводить не нужно);
• выберите вкладку Размеры, установите флажок Соблюдать пропорции и задайте ширину рисунка — 1304;
• выберите вкладку Внешний вид и установите отступы слева и справа — 5, а сверху и снизу — 2;
• установите расположение текста по отношению к рисунку — Влево, окружить текстом.

Далее сохраните файл под именем about_me.html. Должен получиться такой результат, как на рис. 2.13.

Просмотр результата

Чтобы посмотреть, как созданные страницы будут отображаться в окне браузера, нажмите кнопку Просмотр на Панели компоновки. Для главной страницы проверьте работоспособность гиперссылки «О себе».

Система основных понятий

Вопросы и задания

1. Как посмотреть HTML-код документа, работая в программе KompoZer?
2. Как изображение можно сделать гиперссылкой? Перечислите основные шаги.
3. Что включают в себя глобальные настройки документа?
4. Изучите самостоятельно и опишите, как можно изменить параметры уже существующей гиперссылки (например, ее адрес).
5. Создайте две остальных страницы сайта «Домашняя страница Пети Иванова» (по аналогии со страницей «О себе»):

Мою маму зовут Елена Евгеньевна. Ей 35 лет. Она окончила медицинский институт и работает врачом-педиатром в детской районной поликлинике. Моя мама очень добрая и веселая.

Источник: tepka.ru

Kompozer, программа для новичка

Здравствуйте друзья! В статье мы рассмотрим программу Kompozer, с помощью которой мы научимся создавать подписные и продающие страницы.

Подписная страница в Kompozer за час

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

Создавать продажник по шаблону будет сложнее, поэтому её лучше сделать с нуля. Для создания подписных и продающих страниц (лендинг) существуют различные программы (конструкторы). Одной из таких программ является программа KompoZer и её прародитель Nvu – по сути это одна и та же программа.

Программа очень простая и позволяет создавать лендинги в визуальном режиме, знать HTML и CSS не надо. Код страницы формируется автоматически. В программе достаточно простое управление шрифтами, легко вставляются изображения и ссылки. С помощью данной программы легко создавать лендинги с полного нуля, а также можно использовать любой шаблон и переделать его под себя.

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

Итак, программа бесплатная, для начала надо скачать её к себе на компьютер. Если просто Вы попытаетесь её скачать с официального сайта Kompozer.net – Вы получите англоязычную версию. Поэтому поступаем следующим образом. Заходим в любой браузер и прописываем в адресной строке следующий адрес froggy-soft.ru/KompoZer.html и нажимаем Enter.

Нам будет предложено скачать программу Композер, в новом окне может быть предложено, скачать программу NVU, скачивайте смело, это одно и то же. Программу, которую я скачивал с этого портала, была русифицирована. Теперь её надо разархивировать и установить на компьютер, делается это за минуту. Можно зайти сюда http://kompozer.net/download-07.php#l10n и скачать русифицированную версию (смотрите скрин). В последнее время предыдущая ссылка иногда не работает, поэтому можете зайти сюда и скачать русифицированную версию здесь.

Можно найти версии программы для Windows, Mac и других операционных систем.

После запуска программы она открывается в таком виде (смотрите скрин 2).

Выделенные различными цветами функции нам пригодятся для работы. Коротко их опишу. При нажатии кнопки «Файл» мы будем часто использовать функции «Открыть файл» и «Сохранить». То есть если нам надо загрузить в программу шаблон подписной или продающей страницы, либо ранее созданный свой лендинг, мы загружаем его с компьютера с помощью кнопки «Открыть файл». Если мы провели работы с подписной страницей, то каждое действие сохраняем через кнопку «Сохранить».

Если выполненное действие надо отменить, то мы нажимаем кнопку «Правка» и «Отменить». Кнопки «Вставка», «Формат» будут использоваться для создания страницы, и функционал этих кнопок увидим по ходу работы. Создание лендинга начинается с создания таблицы, поэтому будем использовать функцию «Таблицы», выделено коричневым цветом. Для вставки на подписную страницу изображений и ссылок, будем использовать функции «Изображение» и «Ссылка».

Для работы с текстом, будем использовать выбор шрифта (ниже поля выбора жирный и курсив), выбор цвета шрифта (выделено розовой рамкой). Размер шрифта регулируется стрелками над буквами «А» — большая буква увеличивает шрифт, маленькая, уменьшает (подчеркнуто на скрине, синим цветом).

Далее можем выбирать шрифт жирный, курсив, подчеркнутый, а также выравнивание текста на странице. Можно текст смещать от края страницы, подчеркнуто зеленым.

Теперь, когда разобрались с функционалом, перейдём к созданию тестовой подписной страницы. Для начала надо определиться с геометрическим размером (с шириной) нашей подписной страницы, обычно её делают 600-900 px. Выбираем ширину 800 px.

Теперь идём в меню программы и нажимаем «Таблица» (смотрите скрин 2). Открывается окно «Вставка таблицы».

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

В окне программы появился проект нашей таблицы. Нажимаем правой кнопкой мыши на таблицу и выбираем «Свойства ячейки таблицы».

Открывается окно таблицы, в верхнем левом углу выбираем «Таблица», в полях «Высота», «Ширина» выставляем размерность в пикселях (в процентах будет неудобно). Мы уже решили, что ширина лендинга будет 800 px, поэтому прописываем ширину 800 (смотрите скрин).

Далее проставляем размеры рамки и полей, я сделал рамку 5 px. Теперь выравниваем таблицу по центру и нажимаем «Применить» «Ок». Как видим, сформирована заготовка для создания подписной страницы нужного размера, остается наполнить подписную страницу содержимым.

Перед заполнением лендинга, надо выполнить подготовительные работы. Для этого создаем на компьютере отдельную папку с названием нашей подписной страницей (написать лучше на латинице). Теперь присваиваем имя файла будущей подписной в Kompozer, для этого идём в «Файл», нажимаем «Сохранить как». Имя присвоить лучше index и сохраняем файл в заранее созданную папку. В эту же папку обязательно надо загрузить все картинки, которые мы собираемся использовать в подписной странице, причем их название должно быть написано на латинице.

Текстовую часть можно набирать в самой программе Kompozer, а можно сделать заготовку в Word, мне больше нравится делать предварительную заготовку текста в Word.

Печатаете или переносите заголовок, подзаголовок и текст в таблицу, выравниваете заголовок по центру с помощью функционала (смотрите скрин 2), делаете шрифт нужного размера и цвета. Иногда для выравнивания заголовка по центру надо переместить курсор на следующую строку, а затем уже центровать. В основном там всё просто.

Для того чтобы вставить в нужное место картинку, устанавливаем курсор в нужное нам место страницы, нажимаем кнопку «Изображение» (смотрите скрин 2). В открывшемся окне нажать кнопку «Выбрать файл» (скрин),

выбрать нужное изображение именно из той папки, где лежит наш файл index и нажать «Открыть». Напомню, мы туда должны были заранее перенести нужные нам изображения, иначе они не откроются в браузере.

В строке «Адрес изображения» автоматически пропишется название вставляемой картинки, галочка «Относительный URL» должна стоять, желательно заполнить поле «Альтернативный текст», либо отметить поле «Не использовать альтернативный текст» и нажимаем «Ок». Если размер изображения нужно скорректировать, то это делается с помощью кнопки «Размеры», «Задать размер», там ничего сложного нет. Если курсор будет по центру, то и изображение будет по центру.

Под рисунком мы делаем нужные нам записи, например, «Прочитав эту книгу, Вы узнаете» и далее перечисляете выгоды. Различные галочки вставляются как отдельные рисунки напротив каждой строчки текста, их надо тоже заранее поместить в папку.

Теперь рассмотрим, как установить форму подписки, либо кнопки социальных сетей, всё то, что связано с установкой через код HTML. Делается это просто. Предварительно генерируем форму подписки, например, в SmartResponder и сохраняем полученный код формы подписки. Это отдельная тема, поэтому её здесь рассматривать не будем.

Теперь выбираем место, куда надо установить форму подписки на подписной странице (я поставил слева) и нажимаем правой кнопкой мыши, теперь выбираем «Вставить таблицу», «Таблица».

Теперь таблицу устанавливаем по центру, выше мы рассматривали, как это делать.

Ставим курсор внутрь таблицы, идем в меню «Вставка», выбираем «HTML» (смотрите скрин),

«Вставка», всё наша форма подписки установлена. Таким же путём мы можем установить и кнопки социальных сетей.

Теперь рассмотрим, как установить ссылку на элемент текста. Предположим нам надо сделать кликабельным выражение «Служба технической поддержки». Пишем текст, выделяем его. Нажимаем на кнопку «Ссылка» (скрин 2), в открывшемся окне вставляем нужную ссылку и нажимаем «Ок», не забываем нажать «Сохранить». Да и еще, надо сделать так, чтобы ссылка открывалась в новом окне.

Как это сделать показано d статье «Как открыть ссылку в новом окне«.

Всё, вставленная ссылка рабочая. Как это проверить? Для этого идём в папку, где сохранён файл index. Находим файл, нажимаем по нем правой кнопкой мыши и выбираем «Открыть с помощью», выбираем любой браузер Mozilla, Chrome и т.д. Страница откроется так, как она будет открываться у посетителя сайта.

Кликнув по ссылке легко убедиться, что она рабочая.

И в заключении рассмотрим, как улучшить дизайн страницы с помощью фона. Для этого идем в меню, нажимаем «Формат», «Цвета и фон страницы», отмечаем поле «Использовать цвета», нажимаем на окошко «Фон».

Выбираем цвет и нажимаем «Ок». Получилась окраска не только фона, но и всей подписной страницы. Далее нажимаем правой кнопкой мыши по подписной странице, «Выделить таблицу», «Таблица». Снова нажимаем правую кнопку и выбираем «Свойства таблицы», открывается окно настройки таблицы (скрин 5), нажимаем на «Цвет фона», выбираем, например, белый и «Ок». Как видим, есть выбранный фон, а подписная страница осталась белой (скрин 7).

Таким же образом можно переделывать чужие подписные или продающие страницы под себя, для этого достаточно загрузить файл index другого одностраничника в программу Композер. Далее последовательно изменяете текст, ненужные картинки вырезаются и вставляются свои, изменяются ссылки, корректируется дизайн. Если Вы захотите сделать свою подписную или продающую страницу с помощью программы Kompozer, Вы можете скачать мой видео-курс «Как сделать подписную страницу новичку» или купить платный курс за символическую цену «Как создать подписную и продающую страницу за три шага новичку«.

После завершения всех работ, папка, которая была создана для нашей подписной (продающей) страницы закачивается на сайт (блог), например, через FTP.

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

С уважением, Иван Кунпан.

Источник: biz-iskun.ru