Какие типы маркированных списков можно создать в программе kompozer

4. Создайте для сайта «Домашняя страница Пети Иванова» страницу «Мои учителя» с использованием маркированного списка. В качестве маркера используйте квадрат. Заполните ее следующей информацией: Создание таблиц и списков на web-странице.

5. Добавьте на главную страницу сайта ссылки на страницы «Мое расписание уроков» и «Мои учителя». Проверьте их работоспособность.

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

§ 15. Создание таблиц и списков на wеb-странице

С помощью программы KompoZer добавим к нашему сайту еще две страницы: «Мое расписание уроков» и «Мои учителя». Для создания расписания уроков будем использовать таблицу, а для списка учителей — маркированный список.

Списки в HTML | Маркированный и нумерованный списки | Список определений

Создание таблиц

• выбрать пункт меню Таблица → Вставить → Таблица;
• выбрать вкладку Точная и задать количество строк и столбцов таблицы, ширину таблицы (либо в % от ширины окна, либо в пикселях), а также ширину рамки таблицы;
• выбрать вкладку Ячейка и задать тип выравнивая содержимого ячейки по горизонтали и вертикали, а также расстояние между ячейками и величину отступа от границы до содержимого ячейки.

Начнем создавать таблицу «Расписание уроков». В конечном варианте таблица должна будет выглядеть следующим образом:

Обратите внимание, что в таблице есть ячейки, которые разбиты на две части. В одной ячейке разбиение идет по горизонтали (ИЗО и Музыка) — это означает, что занятия по этому предмету проходят раз в две недели поочередно. В двух ячейках разбиение идет по вертикали (французский и английский языки), что означает деление класса на две группы и их параллельные занятия у разных преподавателей. Кроме того, первая строка и первый столбец таблицы выделены другим цветом.

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

Для начала создадим таблицу с простой структурой без деления ячеек, как уже было описано выше. Размер таблицы — 6 строк на 6 столбцов, ширина таблицы — 95% от ширины окна, ширина рамки — 1, выравнивание по горизонтали — влево, по вертикали — по верху, отступы — по 2 пикселя.

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

Рис. 2.14. Первоначальный вид таблицы

Изменение свойств таблицы

• установить курсор в любую ячейку таблицы;
• выбрать пункт меню Таблица → Свойства таблицы;
• изменить нужные свойства всей таблицы (вкладка Таблица) или отдельных ячеек (вкладка Ячейки).

Изменим способ выравнивания нашей таблицы. Для этого выберем указанный выше пункт меню и с помощью вкладки Таблица изменим тип выравнивания таблицы на значение — по центру.

HTML список. Маркированный список. Нумерованный список. Атрибуты списков. HTML5. Урок#6

Выделение ячеек таблицы

1. выделить с помощью мыши первую ячейку диапазона, а затем при нажатой клавише Ctrl щелкать по остальным ячейкам диапазона;
2. выделить с помощью мыши первую ячейку диапазона, а затем при нажатой клавише Shift щелкнуть по последней ячейке диапазона (в том случае, если нужно выделить подряд идущие ячейки);
3. установить курсор в любое место таблицы и щелкнуть по нужной строке или столбцу в линейке настройки таблицы (см. рис. 2.15).

Рис. 2.15. Верхняя линейка настройки таблицы

Теперь рассмотрим вопрос о разбиении и объединении ячеек. Дело в том, что в HTML-редакторах нет возможности разбиения уже существующей ячейки. Есть только возможность объединения строк и столбцов. Рассмотрим пример. Пусть мы хотим создать таблицу с приведенной ниже структурой (рис.

2.16).

Рис. 2.16. Пример сложной таблицы

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

Объединение ячеек

• выделить ячейки;
• выбрать пункт меню Таблица → Объединить выбранные ячейки.

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

Добавление строк и столбцов

• установить курсор в строку или столбец, куда нужно осуществить вставку;
• выбрать пункт меню Таблица → Вставить, а далее один из четырех пунктов: Строку сверху, Строку снизу, Столбец до или Столбец после.

1. объединим третий и четвертый столбцы во всех строках, кроме четвертой;
2. объединим шестой и седьмой столбцы во всех строках, кроме третьей;
3. объединим строки с номерами 5 и 6 во всех столбцах, кроме четвертого.

Изменение цвета фона ячеек

Для изменения цвета фона ячеек необходимо:

=> выбрать пункт меню Таблица → Цвет фона ячейки или таблицы;

Изменим в нашей таблице цвет первой строки и первого столбца на цвет #993300 (коричневый).

Далее необходимо заполнить таблицу данными (шрифт — Verdana, размер — medium). Для первой строки и первого столбца используйте белый цвет шрифта. При наборе текста ширина ячеек будет изменяться. Не обращайте на это внимание.

Изменение ширины столбцов

1. Использовать специальную шкалу, которая находится под панелью вкладок.
2. С помощью пункта меню Таблица → Свойства таблицы, вкладки Ячейки. При использовании этого способа нужно выделить столбец, ширину которого необходимо изменить, установить флажок Ширина, указать размер столбца и установить флажок Разбивка текста на строки. Если последний флажок не будет установлен, то ширина столбца будет автоматически определяться по самой длинной строке и ее изменение вручную будет невозможно.

Подберите для каждого столбца таблицы «Мое расписание уроков» оптимальную ширину, чтобы в итоге таблица приобрела вид, как на рис. 2.17.

Рис. 2.17. Итоговый вид таблицы «Мое расписание уроков»

Сохраните полученную таблицу в файле rasp.html.

Создание списков

• ввести с клавиатуры элементы списка;
• выделить элементы списка;
• выбрать пункт меню Формат → Список;
• выбрать тип списка — Маркированный или Нумерованный. Изменение формата списка

Для изменения формата уже существующего списка необходимо:

=> выделить элементы списка;

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

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

1. Изучите самостоятельно, как выполняется действие по удалению строк и столбцов. Запишите алгоритм выполнения.
2. Сколько строк и столбцов должно быть изначально в таблице, чтобы получить следующую структуру:

1. Изучите самостоятельно, какие типы маркированных списков можно создать в программе KompoZer, и перечислите их.
2. Создайте для сайта «Домашняя страница Пети Иванова» страницу «Мои учителя» с использованием маркированного списка. В качестве маркера используйте квадрат. Заполните ее следующей информацией:

• Орлова Любовь Евгеньевна — русский язык и литература;
• Шахова Елена Петровна — алгебра и геометрия;
• Любимов Вячеслав Сергеевич — физика и информатика;
• Горелова Ирина Федоровна — английский язык;
• Филиппова Ольга Александровна — французский язык;
• Большаков Андрей Сергеевич — ОБЖ и технология;
• Леонова Татьяна Дмитриевна — история и обществознание. Сохраните страницу в файле teacher.html.

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

Kompozer текстовый редактор для работы с HTML

Kompozer – это визуальный редактор для разработки HTML-страниц. Данное ПО сложно рекомендовать профессиональным разработчикам и верстальщикам, так как в нём имеется только необходимый минимум для работы с HTML-тэгами и их корректным отображением, а также выводом готового результата в специальную область. Здесь можно с помощью HTML разметки отформатировать текст на странице, вставить изображения, формы и другие элементы.

Пускай Kompozer сильно уступает в функциональности профессиональным редакторам кода, но он смог завоевать некоторую популярность в определённых кругах. Далее рассмотрим все его главные функции, а также некоторые дополнительные возможности.

Рабочая область

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

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

Редактор

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

Также редактор позволяет работать только с текстом, без использования HTML-тэгов. В таком случае вам просто нужно переключиться во вкладку «Normal», которая подразумевает только работу с текстом. Здесь также поддерживается вставка различных элементов – ссылок, изображений, анкоров, таблиц форм. С помощью комбинаций клавиш Ctrl+Z и Ctrl+Y или специальных кнопок пользователь может повторить или отметить последнее действие. Это доступно в любой рабочей среде.

Работа с FTP-клиентом

Здесь есть встроенный FTP-клиент, который может быть интересен тем, кто собирается разработать более-менее полноценный веб-сайт и выгрузить его на хостинг. Чтобы начать взаимодействовать с ним, нужно ввести необходимую информацию о вашем FTP-аккаунте и совершить вход. С помощью этого инструмента вы можете свободно взаимодействовать с файлами, размещёнными на хостинге прямо из рабочей области визуального редактора HTML.

Текстовый редактор

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

Также здесь имеются инструменты для добавления нумерованных и маркированных списков. Плюс есть возможность вставлять заголовки и менять их формат или оформление. При необходимости готовый результат можно перевести в HTML-разметку.

Достоинства и недостатки Kompozer

У этого текстового редактора, как и у любой программы имеются своим сильные и слабые стороны. В качестве вывода к этой статье приведём список самых влиятельных из них.

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

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

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

Источник: public-pc.com