Как посмотреть html код документа работая в программе kompozer ответ информатика

1. Создайте каталог begin_html

2. Скопируйте файлы : contact_text.txt, fountain_versailles.jpg в каталог begin_html

3. Запустите Kompozer.

4. Установите кодировки: выберите Инструменты, Настройки, Основное , выберите Использовать стили CSS вместо HTML-элементов и их атрибутов , выберите Новая страница , в области Интернационализация выберите Кодировка windows-1251 , в выберите Дополнительно , в области Разметка выберите Язык XHTML1 , DTD выберите Transitional, нажмите Ладно.

5. Установите активную кодировку: выберите Вид, Кодировка, Настроить список, в поле Автивные кодировки удалите все кодировки кроме Кириллица ( windows-1251) , нажмите Ладно.

6 . Закройте Kompozer.

7. Запустите Kompozer

8. Определите рабочий каталог: в окне Менеджер сайта выберите МП, Редактировать сайты, в поле Имя сайта введите Начало, в поле Папка сайта выберите выбрать директорию, выберите begin _ html , нажмите Открыть , нажмите Ладно .

В окне Менеджер сайта должны быть файлы каталога: contact_text.txt, fountain_versailles.jpg.

Как посмотреть и скопировать html код страницы сайта, открыть

6.1.2. Создание страниц

9 . Создайте страницу: выберите Файл, Создать , выберите Пустой документ, выберите Создать X HTML document , н ажмите Создать .

11 . Посмотрите код: выберите Код.

12 . Посмотрите дизайн: выберите Дизайн.

13 . Перед вводам текста определите кодировку: выберите Вид, Кодировка, Кириллица ( windows -1251) .

14 . Откройте файл contact_text.tx t в любой программе по рабте с текстовыми документами, например, OOWriter или Блокнот.

15 . Скоипируйте текст в буфер обмена: щелкните в любом месте текста и выберите Правка, Выделить все, выберите Правка, Копировать .

16 . Вставьте текст из буфера обмена: в окне Kompozer выберите contact . html , еще раз проверьте кодировку Вид, Кодировка, Кириллица ( windows-1251), выберите Правка , Вставить .

17. Отформатируйте текст: выберите Правка, Выделить все, выберите Формат, Абзац, Абзац.

18 . Выберите вкладку Код. По завершении этого шага содержимое основной области окна будет разбито на десять абзацев.

20 . Вставьте изображение: в режиме Дизайн поместите курсор абзацем Если вы заинтересованы и щелкните на кнопке Изображение , в поле Адрес изображения выберите файл fountain _ versailles . jpg , в поле Alternative text введите Эта фотография фонтана в Версаля во время поездки клиентов в путешествие «Прекрасная Франция», жмите Ладно .

21. Создайте таблицу: п оместите курсор перед абзацем По почте и нажмите кнопку Таблица .

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

22 . Выберите вкладку Точная, задайте 2 строки, 2 столбца, установите Ширина равной 400 пикселам, толщину границы, равной 1, отступ от границы до содержимого ячеек укажите равным 3 , а расстояние между соседними ячейками укажите 0, нажмите Ладно .

23 . Перетащите абзац По почте в верхнюю левую ячейку таблицы.

24 . Перетащите Email или по телефону в в ерхнюю правую ячейку.

25 . Переместите три абзаца с почтовым адресом в н ижнюю левую ячейку, а электронный адрес и телефон в – нижнюю правую ячейку.

26 . Поместите курсор перед 3-09 , и нажмите Backspace , чтобы удалить разрыв абзаца, отделяющий слова 3-09 от Enisey Tours , – они должны находиться в одной строке. Оставьте курсор в месте объединения строк и, удерживая нажатой клавишу Shift , нажмите Enter . В то время как нажатие Enter приводит к возникновению нового абзаца (

), нажатие Shift+Enter приводит к вставке символа разрыва строки (
).

27 . Удалите лишние пробелы между строками с названиями улицы, города , а также почтовым индексом в левой ячейке.

29 . Удалите пустое пространство между строками с указанием телефона и адреса электронной почты в правой ячейке.

30. Сохраните contact.html . Итак, создание новой страницы закончено.

31 . Закройте Kompozer.

32 . Откройте файл contact . html в браузере.

33. Проверьте кодировку файла: выберите Вид, Кодировка , должна быть windows-1251.

34. Посмотрите код страницы: выберите Вид, Исходный код страницы . Содержание должно быть русскими буквами.

6.1.3. Создание каскадных таблиц стилей

35 . Запустите Kompozer.

36 . Откройте файл contact.html

37 . Сохраните файл под другим именем: выберите Файл, Сохранить как , введите about . html

38 . Создайте вкладку: нажмите CTRL+T.

39 . Откройте в новой вкладке contact.htm .

40 . Выберите Инструменты, Редактор CSS

41. В поле Таблицы стилей и правил удалите внутренняя таблица стилей используя кнопку Удалить .

Рисунок 6.1. Редактор CSS

42. Создайте таблицу: в списке Таблицы стилей и правил выберите Новая ссылка , в поле URL введите имя таблицы стилей eniseyю.css , нажмите Создать таблицу стиля .

43 . Создайте правило: выберите enisey.css , в списке Таблицы стилей и правил выберите Новое правило, выберите Стиль применяемый ко всем элементам этого стиля, выберите body, нажмите Создать правило стиля.

44. Определите свойства: выберите тип body, выберите Текст, выберите предопределенное, в поле Семейство шрифта выберите Arial, Helvetica, sans-serif , а в списке Размер шрифта — 10 points (но не pixels), нажмите Ладно .

45 . Создайте правило: выберите enisey , нажмите Новое правило, выберите Стиль применяемый ко всем элементам этого стиля, выберите td, нажмите Создать правило стиля .

46. Определите свойства: выберите тип td , в поле Семейство шрифта выберите Arial , Helvetica , sans serif , в списке Размер шрифта укажите 10 points, Цвет выберите Синий , нажмите Ладно .

47. Сохраните файл: Файл , Сохранить .

48 . Откройте файл about . htm .

49 . Выберите Инструменты, Редактор CSS

50. В поле Таблицы стилей и правил удалите внутренняя таблица стилей используя кнопку Удалить .

51. Присоедините таблицу: в списке Таблицы стилей и правил выберите Новая ссылка , в поле URL выберите enisey.css , нажмите Создать таблицу стиля .

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

52. Создайте правило: выберите Инструменты, Редактор CSS . выберите enisey , выберите Новое правило, выберите Стиль применяемый ко всем элементам этого стиля, выберите h 1, Создать правило стиля.

53. Определите свойства: Размер шрифта — 18 points ; Вес шрифта — полужирный ; Цвет — #00993, н ажмите Ладно . Должен измениться заголовок.

6.1.4. Проверка

54. В окне браузера введите в адресной строке validator.w3.org . На экране Web-браузера появится страница W3C HTML Validation Service.

55. Для проверки правильности HTML-кода Web-страницы, еще не помещен­ной на сервер, щелкните на гиперссылке Validate byUpload Files. В окне Web-бpayзepa появится страница с формой загрузки файла. В поле File в верхней части формы введите путь к файлу XHTML-документа или воспользуйтесь кнопкой Browse для поиска и выбора файла на локальной или сетевом диске.

56. Нажмите на кнопке Check . Программа проверки проверит полученный XHTML-документ и передаст Web-браузеру страницу результатов проверки.

Обратите внимание, что XHTML-документ создан правильно (т.е. в соответствии с требованиями стандарта) только в том случае, когда про­грамма проверки не обнаружила ошибок. Таким образом, если на странице были обнаружены ошибки, исправьте их и повторно проверьте код Web-страницы с по­мощью программы проверки. (Программа проверки не только перечисляет имею­щиеся ошибки, но и дает рекомендации по их устранению.)

Рисунок 6.2. Окно результата проверки

57 . На странице результата проверки выберите ссылку Congratulations · Icons.

Для подтверждения того, что ваша страница соответствует стандарту выделите на странице Congratulations · Icons и вставьте на страницу следующий код:

Пример 6.1. Код Congratulations · Icons

58 . Проверьте таблицу стилей: выберите ссылку CSS Validation Service, Проверить загруженный файл , выберите enisey.css , Проверить .

Рисунок 6.3. Окно результата проверки CSS

59. Для подтверждения того, что ваша страница соответствует стандарту выделите на сайте и вставьте на страницу следующий код:

Пример 6.2. Код Congratulations · Icons

60 . Откройте файл about .html в браузере.

Рисунок 6.4. Окончательная страница

Пред.	Уровень выше	След.
Глава 5. Лабораторная работа «Енисейские окна»	Начало | ToC	6.2. Контрольная работа «Окно Родины»

Источник: enisey.name

В каких случаях удобнее использовать редакторы nvu или kompozer кратко

Kompozer — это визуальный html редактор для редактирования и создания веб страниц. Редактор Kompozer является лучшей бесплатной альтернативой Adobe Dreamweaver. Для тех, кто знаком с интерфейсом Dreamweaver, будет удобно работать и в Kompozer. Программа разработана таким образом, чтобы все пользователи без знаний html и css смогли без особого туда создать веб сайт самостоятельно.

Визуальный редактор Kompozer позволяет создавать страницы сайта в том виде, в котором они отобразятся в вашем браузере. Web редактор воплощает в себе лучшие идеи от самых популярных программ DreamWeaver и FrontPage будучи при этом совершенно бесплатным.

Визуальный html редактор Kompozer обладает возможностями:

• Визуальный и текстовый редактор html
• Встроенный редактор стилей
• Встроенная консоль JavaScript
• Поддержка форм, таблиц, шаблонов
• Выбор языка разметки документов
• Выбор кодировок страницы
• Поддержка вкладок
• Поддержка шрифтов
• Проверка орфографии при наборе текста
• Предварительный просмотр страницы в браузере
• Встроенный FTP-клиент
• Поддержка сторонних расширений
• Работа с прокси
• Экспорт в txt

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

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

Практическое руководство пользователя Kompozer

Создать сайт или страницу получится значительно быстрее, если сначала изучить руководство, а потом применить знания на практике. Редактор Kompozer очень удобно использовать, если разработка сайтов, это ваши первые шаги.

Чтобы лучше понять как создавать сайты и потренироваться в этом, надо загрузить страницу любого сайта из интернета в программу Kompozer и посмотреть, как она выглядит, как структурирована и из каких элементов состоит. Также можно поэкспериментировать с любыми готовыми шаблонами сайтов. Приобретете начальный опыт и знания для создания сайтов в программах Kompozer, DreamWeaver, FrontPage и др.

Kompozer — отличный визуальный html редактор для создания веб-контента с публикацией в интернете по FTP. Программа не требует инсталляции, небольшого размера и очень быстрая в работе.

Урок 27. Web-сайт – гиперструктура данных. Инструментальные средства создания Web-сайтов

Инструменты для разработки wеb-сайтов (§ 13)

Вернемся к разговору о web-сайтах и узнаем, с помощью каких средств можно самостоятельно создать сайт.

Web-сайт — это совокупность гипертекстовых документов, которые рассматриваются как единое целое и определяются одним URL-адресом.

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

Понятие языка разметки гипертекста

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

Moя домашняя страница

Визуальные HTML-редакторы

Для создания сайта необязательно знать язык HTML. Существует множество доступных визуальных HTML-редакторов, их другое название — WYSIWYG-редакторы, позволяющих создавать сайты без знания данного языка. WYSIWYG расшифровывается как: What You See Is What You Get — что видишь, то и получаешь. Работа в таких редакторах происходит с визуальными формами, а не с тегами.

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

Визуальный HTML редактор (WYSIWYG-редактор) — прикладная программа, в которой содержимое web-страницы строится из визуальных форм и в процессе редактирования автоматически формируется HTML-код страницы, текущий вид которой сразу отображается на экране.

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

1. Adobe Dreamweaver — один из наиболее популярных коммерческих программных продуктов, предназначенных для разработки сайтов. Изначально был разработан и поддерживался компанией Macromedia (до 2005 г.). Следующие версии, начиная с Dreamweaver CS3 (2007 г.), выпускает компания Adobe. Редактор содержит огромный выбор всевозможных инструментов, удобный интерфейс, тонкие настройки, позволяющие подогнать программу под нужды web-мастера, а также встроенный FTP-менеджер для загрузки файлов на сервер.

Начинающий пользователь может создавать страницы практически без знания HTML — добавляя элементы страницы и указывая их параметры с помощью встроенного мастера (рис. 2.7).

2. Microsoft Office SharePoint Designer 2007 — визуальный HTML-редактор и программа для web-дизайна от компании Microsoft (рис. 2.8). Является одним из компонентов пакета Microsoft Office 2007, но при этом требует отдельной установки. Данный пакет относится к числу достаточно сложных редакторов, позволяющих создавать не только простейшие web-страницы, но и полноценные web-узлы, предназначенные для коллективной работы пользователей. Более новая версия программы Microsoft Office SharePoint Designer 2010 максимально завязана на совместную работу большого числа людей над одним проектом, что требует установки соответствующего программного обеспечения на сервере, где хранится данный проект.

Изначально этот продукт относился к разряду коммерческих, но с 2009 года стал распространяться бесплатно для всех желающих на официальном сайте Microsoft Office:

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

Встроенный FTP-менеджер позволяет быстро загрузить готовый сайт на сервер. Сайты, сделанные в WebPageMaker-3.0.3, одинаково корректно отображаются во всех основных типах браузеров.

К одному из существенных достоинств редактора относится очень небольшой объем дистрибутива (всего 3,5 Мбайт). Кроме того, существует так называемая версия portable, которая не требует установки (ее объем — 6 Мбайт).

4. Nvu — свободно распространяемый визуальный HTML-peдактор. Преимущество редактора Nvu состоит в его кроссплатформенности: есть версии под Linux, Microsoft Windows и MacOS.

Помимо типовых для web-редакторов функций, Nvu содержит интегрированный FTP-менеджер, мощную поддержку для форм, таблиц и шаблонов. Редактор очень прост в использовании. В последние несколько лет Nvu не развивается, но потенциал этого редактора продолжает реализовываться в редакторе KompoZer.

5. KompoZer (рис. 2.9) — ответвление от редактора Nvu. KompoZer является свободно распространяемой web-авторской системой, которая сочетает в себе менеджер для web-файлов и визуальный редактор. По сравнению с Nvu, KompoZer создает более короткий код разметки.

KompoZer чрезвычайно прост в использовании, что делает его привлекательным для пользователей, которые хотят создавать сайты без получения серьезных технических знаний. KompoZer может рассматриваться в качестве редактора для создания небольших web-проектов. Объем дистрибутива — 7 Мбайт.

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

1. Что такое web-сайт?

2. Какой язык используется для разработки сайтов?

3. В чем преимущества визуальных HTML-редакторов?

4. В чем недостатки визуальных HTML-редакторов?

5. Какой из известных вам программных продуктов вы порекомендовали бы использовать для создания мощного web-проекта, над которым работает большое число людей?

6. В каких случаях удобнее использовать редакторы NVU или KompoZer?

ü освоение приемов работы с поисковыми системами Интернета: поиск информации с помощью поискового каталога; поиск информации с помощью поискового указателя.

ü освоение приемов извлечения фрагментов из загруженных web-страниц, их вставка и сохранение в текстовых документах.

ü способствовать углублению представлений студентов об характерных особенностях глобальной сети

ü освоение приемов работы с браузером Internet Explorer; изучение среды браузера и настройка браузера; получение навыков извлечения web-страниц путем указания URL-адресов; навигация по гиперссылкам.

ü научить студентов применять полученные знания при работе в интернете.

ü знать правила работы с разными браузерами;

ü способствовать формированию умения использовать приемы настраивать браузер для эффективной работы в сети

ü способствовать развитию логического мышления;

ü умения анализировать, сравнивать, систематизировать и обобщать;

ü интерес к учению, стремление к расширению кругозора

ü способствовать развитию кругозора студентов;

ü способствовать пониманию связей и взаимосвязей, лежащих в основе алгоритмических процессов;

ü совершенствовать умения систематизировать знания по данной теме.

ü способствовать формированию коммуникативных умений студентов;

ü способствовать развитию информационно-познавательной компетенции студентов.

ü способствовать развитию культуры программирования;

ü прививать интерес к предмету

Оборудование: Internet Explorer (возможно использование другой программы аналогичного назначения), поисковый сервер Rambler, Яндекс, браузер WWW, текстовый процессор Microsoft Word, компьютеры для студентов, §13, (учебник Информатика 11 кл. /И.Г.Семакин, Е.К.Хеннер,Т.Ю.Шеина 5-е издание, 2015г.),

Инструменты для разработки web-сайтов

Вернемся к разговору о web-сайтах и узнаем, с помощью ка­ких средств можно самостоятельно создать сайт.

Web-сайт — это совокупность гипертекстовых документов,

которые рассматриваются как единое целое и определяются

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

Понятие языка разметки гипертекста

В предыдущем параграфе уже говорилось о том, что основой любого сайта является язык разметки гипертекста HTML (HyperText Markup Language). HTML включает в себя несколько десятков так называемых тегов (команд), каждый из которых определяет внешний вид отдельного элемента страницы: текста,

изображения, таблицы, списка и др. Например, следующая за­пись в HTML-документе:

MoH домашняя страница

1. KompoZer (рис. 2.9) — ответвление от редактора Nvu. KompoZer является свободно распространяемой web-авторской сис­темой, которая сочетает в себе менеджер для web-файлов и визуаль­ный редактор. По сравнению с Nvu, KompoZer создает более корот­кий код разметки. KompoZer чрезвычайно прост в использовании,

что делает его привлекательным для пользователей, которые хотят создавать сайты без получения серьезных технических знаний. KompoZer может рассматриваться в качестве редактора для созда­ния небольших web-проектов. Объем дистрибутива — 7 Мбайт.

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

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

Основные возможности Kompozer

Как пользоваться редактором

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

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

5. Какой из известных вам программных продуктов вы порекомендовали бы использовать для создания мощного wеЬ-проекта, над которым рабо­тает большое число людей?

6. В каких случаях удобнее использовать редакторы NVU или KompoZer?

1. Как посмотреть НТМL-код документа, работая в программе KompoZer?

2. Как изображение можно сделать гиперссылкой? Перечислите основ­ные шаги.

3. Что включают в себя глобальные настройки документа?

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

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

Моего папу зовут Алексей Юрьевич. Ему 38 лет. У него два высших образования (строи­ тельный и экономический факультеты) и в настоящее время он занимается собственным бизнесом в области строительства. Папа у меня строгий, но справедливый. 🙂

Рисунок — parents .jpg.

б) Мои друзья У меня много друзей, но самые большие мои друзья — Иванов Кирилл и Орлов Сергей. У нас с ними общие увлечения, поэтому м ы м ного времени проводим вместе. Кирилл стар­ше нас с Сергеем на год и учится в восьмом классе. Мы вместе с ним занимаемся плава­нием . Сергей — мой одноклассник, и мы часто с ним вместе делаем уроки, играем в шах­ маты и гуляем во дворе. Рисунок — friends .jpg.

Проверьте в браузере работоспособность всего сайта и всех гипер­ссылок.

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

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

2. Сколько строк и столбцов должно быть изначально в таблице, чтобы получить следующую структуру:

• Какой отличительной чертой отмечены все задачи по комбинаторике ответ кратко
• Школа 129 казань педагогический
• Проект педагога психолога в доу страхи
• Как вы будете действовать если в подъезде увидели подозрительного человека кратко
• Как приготовить бактериальную петлю кратко

Источник: obrazovanie-gid.ru

Как посмотреть html код документа работая в программе kompozer ответ информатика

Библиотека сайта rus-linux.net

Ссылка (Link) — вставка гиперссылки в тело HTML-документа. Ссылка может указывать на файл, расположенный локально или же удаленно, на каком-либо сайте в Интернете. Щелчок мыши на значке «Ссылка» откроет диалоговое окно «Свойства ссылки» (Link Properties), в котором можно задать свойства создаваемой ссылки.

Изображение (Image) — вставка изображения в HTML-документ. При щелчке мыши на значке «Изображение» откроется диалоговое окно «Свойства изображения» (Image Properties), в котором задаются свойства вставляемого в документ изображения.

Таблица (Table) — позволяет вставить таблицу в создаваемую web-страницу. Таблицы являются достаточно мощным инструментом форматирования, который применяется при создании HTML-документов. При вставке таблицы в KompoZer откроется диалоговое окно свойств «Вставить таблицу» (Insert Table), в котором можно настроить первоначальный вид создаваемой таблицы. После ввода нужных параметров таблица будет вставлена в документ в точном соответствии с указанными для нее параметрами. Для последующего редактирования вставленной таблицы можно выделить ее двойным щелчком мыши и затем переопределить свойства.

Форма (Form) — размещает элементы форм внутри HTML-документа. Если вы вдруг не знаете, что такое форма, то вам достаточно лишь вспомнить — практически на любой Интернет-странице имеются формы или элементы форм, с которыми вы наверняка сталкивались. Это может быть заполнение каких-либо данных, кнопки, списки голосования и многое другое. Например, элементы форм используются для входа на форум PCLinuxOS, когда вы указываете свой логин и пароль зарегистрированного аккаунта.

HTML — открывает HTML-код документа для редактирования в стороннем редакторе, если такой установлен в вашей системе (прим. переводчика: примерами таких редакторов HTML-кода могут быть популярные Bluefish или Geany).

Редактор CSS (CSS Editor) — редактор для CSS (Каскадные Таблицы Стилей), применяемых для HTML-документа. С помощью таких таблиц создается визуальное оформление web-страницы. По умолчанию KompoZer встраивает таблицы стилей внутрь HTML-документа, если быть более точным — в его заголовок. Помимо этого имеется возможность подключения внешних таблиц стилей в виде файлов с расширением .css. Такой способ удобен для настройки внешнего вида сразу нескольких web-страниц, так как стили применяются одновременно для всех выбранных HTML-документов.

И наконец, в самом правом углу панели инструментов находится логотип редактора KompoZer. При наведении курсора мыши на этот значок появится всплывающая подсказка с надписью «Это KompoZer» (This is KompoZer). Никаких других действий этот значок не выполняет.

Инструменты форматирования текста

Ниже панели инструментов расположены еще две «панели», предназначенные для форматирования вводимого в HTML-документ текста. Выглядят они примерно так, как изображено на рисунке:

Начнем с верхнего ряда и сделаем краткий обзор предоставляемых этой «панелью» возможностей для форматирования текста, слева направо. В крайнем левом углу располагается выпадающий список для выбора стилей форматирования. По умолчанию выбран стиль для текста в теле HTML-документа (прим. переводчика: это тот текст, который отображается браузером при просмотре web-страницы). Другие доступные для выбора стили: параграф, заголовки уровней от 1 до 6, адрес, преформатированный текст, создание блоков div.

С помощью следующих двух значков ! и !! можно применить быстрое форматирование ко всему тексту документа или же к выделенной его части. Символ ! применяет выделение текста на странице курсивом, символ !! — выделение текста полужирным шрифтом. Применение этих двух кнопок аналогично вставке соответствующих тегов italic и bold в HTML-документ. Если щелкнуть мышью на оба значка, то выделенный текст превратится в полужирный курсив.

Следующие две кнопки отвечают за форматирование текста в виде нумерованного и ненумерованного списка. Еще два значка, которые идут за списками — это кнопки для создания или удаления отступов выделенного фрагмента текста. Значок удаления отступов будет неактивным до тех пор, пока не будет установлен отступ для части текста (то есть, пока не появится то, что можно отменить).

Следующие два значка («Definition Term» и «Definition Description») остались для меня не совсем ясными — для чего они были встроены в редактор KompoZer. Мною не было найдено какой-либо информации по этим значкам в Интернете. После нескольких экспериментов с ними я так и не обнаружил практического применения им. (прим. переводчика: на самом деле обе эти кнопки выполняют задачу создания списков определений Definition List. Первый значок «Definition Term» создает структуру списка определений вида: , второй значок «Definition Description» создает структуру списка определений вида: . С помощью комбинации этих двух значков создается полноценный список определений: . Информации по HTML-тегам для создания таких списков в Интернете предостаточно).

Последние три значка в это ряду предназначены для создания и редактирования слоев в HTML-документе. В редакторе KompoZer можно создавать слои для вставки их в web-страницу. Предназначение слоев, если быть кратким — это точное позиционирование HTML-элементов в документе. Первая кнопка создает слой (тег ), а две остальные служат для перемещения созданного слоя на передний или задний фон страницы (с помощью установки соответствующего значения для тега z-index).

Перейдем к рассмотрению второго ряда — «панели» для форматирования текста. Начнем по порядку, слева направо. Самый крайний слева значок — выпадающий список для выбора шрифта текста. По умолчанию установлено значение «Переменная ширина» (Variable Width), но для создания своих web-страниц я предпочитаю использовать определенные шрифты.

Если быть точным, то из семейства sans serif, такие как Helvetica, Arial или Liberation Sans. То, как должна выглядеть Интернет-страница, является целиком вашим предпочтением и этому соответствует конкретный выбор шрифтов.

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

Три значка «B», «I», «U» служат для быстрого форматирования текста. Названия иконок являются сокращениями от английских слов Bold (жирный), Italic (курсив), Underline (подчеркнутый). Выделите текст в документе и нажмите любую из этих кнопок. Текст станет соответственно полужирный, курсивом или подчеркнутым.

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

Последние четыре иконки предназначены для выравнивания текста в HTML-документе. Можно выбрать выравнивание по левому краю (по умолчанию), по центру, по правому краю или же выравнивание по ширине. Эти кнопки работают точно также, как и в текстовом процессоре.

Менеджер сайтов (Site Manager)

Одной из полезных возможностей редактора KompoZer является его возможность управления web-сайтами. Как правило, когда создается или редактируется Интернет-сайт, необходимо работать со множеством файлов, которые в целом составляют весь проект. Для этого создается локальная копия сайта на жестком диске компьютера, которая представляет из себя зеркальное отображение редактируемого web-сайта. С помощью менеджера сайтов в KompoZer можно управлять этой копией. В частности, через менеджер можно загружать на хостинг созданные или отредактированные страницы централизованно, что очень удобно.

Основное рабочее окно KompoZer

Самым большим элементом интерфейса в KompoZer является рабочая область — окно, в котором вводится информация (текст, картинки) и организуются HTML-элементы в том порядке следования, который необходим. Представьте для себя эту область как чистый холст для художника. Или как пустой лист бумаги в текстовом процессоре. Точно также, как печатается письмо или курсовая работа в таком процессоре, также вводится различная информация в создаваемую web-страницу в данной области.

В левом нижнем углу рабочей области находятся три очень полезных ярлычка, которые помогают при создании HTML-кода. Первый ярлычок «Дизайн» (Design) активирован по умолчанию. В этом режиме web-страница создается в стиле WYSIWYG. То есть, HTML-код не отображается, а страница сразу предстает в том виде, в каком будет опубликована в Интернете.

Этот режим очень похож на то, как создаются документы в том же MS Word или LibreOffice. Ярлычок «Исходный код» (Source) отображает создаваемую или редактируемую web-страницу в исходном HTML-коде. Это режим для опытных программистов, которые хорошо знакомы с большинством HTML-тегов.

С помощью этого режима можно редактировать HTML-документ и добавлять в него элементы, которые не представлены в графическом интерфейсе редактора KompoZer. Третий ярлычок «Разделение» (Split), будучи активирован, разделяет рабочую область редактора на две горизонтальные части. В верхней части HTML-документ представлен и может быть редактирован в режиме WYSIWYG, в нижней части отображается и также может быть редактирован HTML-код данного документа.

В правом нижнем углу рабочей области редактора KompoZer находится раскрывающийся список с тремя пунктами. С помощью этого списка можно выбрать, как будет отображаться сама рабочая область в редакторе. По умолчанию активирован режим «Нормальный» (Normal). Можно выбрать режим «Предпросмотр» (Preview). Мною не было замечено разницы между режимами «Нормальный» и «Предпросмотр».

Третий режим «HTML теги» (HTML Tags) отображает в стиле WYSIWYG HTML-теги для каждого элемента web-страницы, рядом с каждым из них. То есть, визуально виден каждый элемент страницы в режиме WYSIWYG, но рядом с ним отображается и HTML-тег, с помощью которого создан данный элемент. Сказать честно, я никогда не пользуюсь этим списком-переключателем отображения. При создании своих web-страниц я переключаюсь только между режимами «Дизайн» (Design) и «Исходный код» (Source)с помощью соответствующих ярлычков.

Строка состояния (Status Bar)

В самом низу основного окна редактора KompoZer располагается строка состояния. Она является полезным инструментов web-разработчика, так как показывает HTML-теги, образующие выделенный элемент страницы, в строгом соответствии с их вложенностью одного в другой. Щелчок мыши на любом из отображенных в этой строке тегов автоматически подсвечивает в рабочей области элемент страницы, созданный им.

Заключение

Прочитав этот краткий обзор, вы получили общее представление о HTML-редакторе KompoZer. Однако в нем можно делать гораздо больше, о чем даже еще не упоминалось в данной статье. В следующем обзоре будет рассказано, как настроить будущий сайт и создать первую HTML-страницу.

Источник: rus-linux.net