И. В. Машковцев Создание и редактирование Интернет-приложений




НазваниеИ. В. Машковцев Создание и редактирование Интернет-приложений
страница1/9
Дата публикации21.03.2013
Размер0.64 Mb.
ТипУчебное пособие
odtdocs.ru > Информатика > Учебное пособие
  1   2   3   4   5   6   7   8   9
Федеральное агентство по образованию

И.В. Машковцев

Создание и редактирование Интернет-приложений

с использованием Bluefish и Quanta Plus

(ПО для создания и редактирования
Интернет-приложений)


Учебное пособие


Москва 2008
Машковцев И.В.

М 383

Создание и редактирование Интернет-приложений с использованием Bluefish и Quanta Plus (ПО для создания и редактирования Интернет-приложений): Учебное пособие. – Москва: 2008. – 74 с.



Настоящее учебное пособие включает в себя теоретический и практический материал, позволяющий получить представление о работе в веб-редакторах Quanta Plus и Bluefish. В пособии даны основные понятия веб-разработки, рассмотрен интерфейс редакторов (с иллюстрациями), показаны приемы, позволяющие самостоятельно создавать простейшие веб-страницы, содержатся примеры использования инструментов, задания и материалы для самоконтроля.

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


Оглавление

Предисловие 5

Введение 7

Глава 1. Основы работы с Quanta Plus 9

1.1. Интерфейс 10

1.1.1. Меню 11

1.1.2. Рабочая область 11

1.1.3. Панели инструментов 13

1.1.4. Служебные панели 16

1.1.5. Информационные вкладки 17

1.2. Первые шаги 18

1.2.1. Создание HTML-документа 18

1.2.2. Открытие HTML-документа 18

1.2.3. Сохранение HTML-документа 18

1.3. Создание структуры HTML-документа 18

1.4. Форматирование текста 20

1.4.1. Размер текста, начертание, цвет 20

1.4.2. Выравнивание 23

1.4.3. Абзац, новая строка, непрерывный пробел 24

1.5. Вставка объектов, их атрибуты 26

1.5.1. Вставка изображения 26

1.5.2. Вставка гиперссылки 27

1.5.3. Цвет фона веб-страницы, фоновый рисунок 28

1.6. Таблицы, списки 30

1.6.1. Вставка таблицы 30

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

1.7. Проекты 34

1.7.1. Создание проектов 34

1.8. Фреймы 35

1.8.1. Создание фреймовой структуры 35

1.9. Шаблоны 37

1.10. Визуальное редактирование 38

Глава 2.Основы работы с Bluefish. 40

2.1. Запуск Bluefish 40

2.2. Пользовательский интерфейс 41

2.2.1. Рабочая область 41

2.2.2. Меню и панели инструментов 42

2.2.3. Боковая панель 43

2.2.4. Строка состояния 45

2.2.5. Меню Помощь 45

2.3. Работа с файлами и папками 47

2.3.1. Создание файлов 47

2.3.2. Управление каталогами 47

2.3.3. Открытие файлов 48

2.3.4. Сохранение файлов 50

2.3.5. Переименование файлов 51

2.3.6. Удаление файлов 51

2.3.7. Закрытие файлов 52

2.3.8. Вставка файлов 53

2.3.9. Меню Редактирование 53

2.3.10. Подсветка синтаксиса 54

2.3.11. Дистанционные файлы 54

2.3.12. Кодировка символов 54

2.4. Проекты 56

2.5. Некоторые особенности работы в редакторе 58

2.5.1. Автозакрытие тега 58

2.5.2. Панели инструментов HTML 58

2.5.3. Эскиз изображения 59

2.5.4. Настройка Панели быстрого доступа 61

2.5.5. Закладки 62

2.6. Получение Bluefish 63

2.7. Пример создания веб-страницы с фреймовой структурой 64

Вопросы для самоконтроля и задания для самостоятельного выполнения 66

Глоссарий 70

^ Список литературы 73


Предисловие


В настоящем учебном пособии рассмотрены два веб-редактора для операционной системы Linux: Quanta Plus и Bluefish. Эти редакторы относятся к Свободному Программному Обеспечению (СПО). Исходные коды программ находятся на официальных сайтах для скачивания. Установочные пакеты редакторов можно установить на свой компьютер, а имея определенный уровень в программировании, принять участие в улучшении программного продукта для создания веб-приложений.

Во введении рассмотрены основные понятия веб-разработки: веб-сайт, язык разметки гипертекста, его основные возможности, указаны более сложные инструменты, которые поддерживаются данными веб-редакторами. Дано несколько советов по подготовке сайта к публикации.

Первая глава посвящена веб-редактору Quanta Plus. Теоретический материал данного учебного пособия основан на Руководстве пользователя Quanta Plus (F1 при запущенном редакторе), которое является составляющей частью Центра справки KDE в разделе Веб-разработка. Рассмотрен интерфейс программы, операции с файлами и папками, инструменты создания проектов, даны инструкции по работе с редактором начинающему пользователю. Создание HTML-документов начинается с создания структуры элементов разметки, применения форматирования текста, вставки объектов с настройкой атрибутов несколькими вариантами, создания таблиц, списков, использования изображений, анимации, разделения веб-страницы на фреймы.

Quanta Plus позволяет переключиться в режим визуального редактора. Таким образом, наполнение веб-страницы материалом будет похоже на работу в текстовом редакторе OpenOffice.org Writer. Так как этот веб-редактор находится в стадии доработки, не все параметры веб-страницы доступны в этом режиме. Поэтому рекомендую вам использовать режим кода или совмещенный режим во избежание ошибок и сбоев программы.

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

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

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

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

Учебное пособие содержит пример создания веб-страницы и набор практических заданий для выполнения в веб-редакторах.

Для создания скриншотов (снимков экрана), описания интерфейса и инструментария редакторов использовались следующие версии: Quanta Plus 3.5.8 и Bluefish 1.0.5. В более поздних версиях возможны: добавление элементов интерфейса, измененная цветовая схема по умолчанию, смена пиктограмм кнопок. Снимки были сделаны в операционной системе Линукс Мастер и Легкий Линукс.

Для написания учебного пособия использовались интернет-статьи Алексея Федорчука, Сергея Супрунова и Сергея Яремчука; в переводе англоязычных материалов применялся инструмент Переводчик Google.com. Тезаурус частично заимствован из самоучителя HTML [1, стр. 21-22].

Данное учебное пособие может быть рекомендовано:

  • к самостоятельному изучению интерфейса программ учителями информатики и учителями-предметниками для создания предметного сайта или раздела, посвященного определенному школьному предмету, создание интерактивного классного журнала, доски объявлений и пр. в рамках школьного сайта;

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

Все пожелания по улучшению учебного пособия, замечания и критику, пожалуйста, присылайте по адресу: spo_method_support@armd.ru.

    Введение


Интернет (World Wide Web, «Всемирная паутина») состоит из огромного, постоянно растущего количества порталов, чатов, форумов, поисковых, почтовых серверов, корпоративных и личных веб-сайтов. Веб-сайт (от англ. website, от web – паутина и site – «место») – это одна или совокупность веб-страниц, доступных в Интернете через протоколы (правила передачи данных) HTTP/HTTPS [3]. Любой пользователь компьютера может самостоятельно создать личный веб-сайт.

Перед созданием сайта необходимо изучить основы языка разметки гипертекста HTML (HyperText Markup Language) по книгам [1,2] или в Сети [20, 21].

Гипертекст позволяет:

  • задать расположение объектов на странице;

  • задать цвет, размер, шрифт, начертание, выравнивание текста;

  • задать цвет фона или фоновое изображение;

  • создавать таблицы с различным объединением ячеек, настроить толщину и цвет границ и пр.;

  • вставить в документ изображения, анимацию;

  • связать HTML-документы гиперссылками;

  • открывать мультимедийные файлы непосредственно в браузере или скачать на локальный диск.

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

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

В данном пособии будем использовать фрагменты кода языка HTML. Язык HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными единицами – тегами. Теги бывают одиночными и парными. Парные теги состоят из начальных (открывающих) и конечных (закрывающих, начинающимися со знака "/"). Например, теги тела веб-страницы: и [3, 21].

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

Цвет в HTML-документе задается дюжиной зарезервированных слов или числом в шестнадцатеричной системе счисления (например, ff0000 – красный цвет).

Готовый сайт размещается на сервере, он имеет уникальный адрес (IP-адрес, например, 82.200.16.13 или доменное имя, например, tspu.edu.ru). Адрес можно зарегистрировать в поисковых системах, разместить рекламу (в виде баннеров или ссылок) на других сайтах.

Просмотр веб-страниц осуществляется специальной программой – браузером (от англ. browser — просмотрщик). Наиболее распространенными браузерами являются Microsoft Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera. В каждой операционной системе имеется браузер, а также иногда можно инсталлировать дополнительные. Современные мобильные устройства позволяют установить (в качестве java-приложения) браузер Opera Mini, последняя версия (4-я на момент написания данного пособия) позволяет просматривать веб-страницы в уменьшенном виде с возможностью увеличения интересующих фрагментов и перемещения по странице.

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

Мы кратко рассмотрели основные понятия создания веб-страниц. Приступ к изучению интерфейса программ.
  1. ^

    Основы работы с Quanta Plus


Quanta Plus – это среда разработки документов на языках разметки, которая также поддерживает популярные сценарные языки, используемые для веб-разработки, CSS и некоторые другие форматы, разработанные W3C [5]. W3C, Консорциум Всемирной паутины (от англ. World Wide Web Consortium) – организация, разрабатывающая и внедряющая технологические стандарты для Интернета, которые затем внедряются производителями программ и оборудования. Таким образом, достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной.

Сегодня эта утилита (приложение) – главная составляющая KDE-пакета kdewebdev (в него входит еще несколько утилит для веб-мастера). Этот HTML-редактор обеспечивает стандартные для программ этого класса возможности набора и редактирования HTML, такие, как автоматический ввод основных тегов и их атрибутов, подсветка синтаксиса, предварительный просмотр веб-страницы и пр.

Чтобы запустить программу Quanta Plus, нужно нажать на Главное менюРазработкаQuanta Plus (рис. 1).



Рис. 1. Запуск Quanta Plus

    1. Интерфейс


Веб-редактор Quanta Plus обеспечивает разработчиков интуитивным и мощным многооконным интерфейсом (Multiple Document Interface, MDI).

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

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

^ Локальные элементы – это объекты, образующие личную коллекцию веб-инструментов пользователя – панели инструментов, шаблоны и т.д. Они хранятся в домашнем каталоге пользователя.

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

Интерфейс Quanta Plus разделён на части (рис. 2):

  1. строка меню;

  2. редактор (рабочая область);

  3. панели инструментов;

  4. служебные панели;

  5. информационные вкладки.





    Рис. 2. Многооконный интерфейс Quanta Plus


      1. Меню


Главное меню редактора (рис. 3) состоит из вполне распространенных пунктов (Файл, Правка, Вид и пр.). Остальные пункты меню (Проект, Теги, Модули, …) несложно изучить, особенно при русской локализации KDE. Меню позволяет настроить (добавить/убрать) необходимые панели инструментов, работать с проектом, тегами, выполнять операции с файлами. Само же меню можно скрыть для увеличения рабочего пространства комбинацией Ctrl + M.



Рис. 3. Главное меню Quanta Plus

      1. ^

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


Окно редактирования Quanta Plus позволяет открыть несколько файлов одновременно. Если открыто больше одного файла, внизу окна редактирования появляются вкладки с соответствующими именами файлов и, если файл был изменён после последнего сохранения, значком в виде дискеты.

В контекстном меню вкладок содержатся некоторые команды для работы с документами.

Наполнение контекстного меню редактора (рис. 4) немного другое, оно включает действия редактирования, изменения тега, если курсор находится в нём, или открытия файла, если курсор находится на его имени.



Рис. 4. Контекстное меню редактора
Разметка гипертекста осуществляется вводом тегов вручную, имея под рукой справочник HTML или вставка тегов нажатием кнопки на панели инструментов. Чтобы вставить стандартный тег в открытый документ, например тег параграфа
, щёлкните на значке, который его представляет. Если тег имеет обязательные атрибуты, откроется окно, где будет предложено их ввести (рис. 5).



Рис. 5. Ввод обязательных параметров при вставке тега

      1. ^

        Панели инструментов


Панели инструментов

  • Основная панель инструментов

  • Редактор

  • Модули

  • Навигация

  • Панель отладчика

  • Панель проекта

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

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

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



Рис. 6. Панель Стандартная
В панель Стиль (рис. 7) объединены теги для заголовков (с 1-го по 5-й уровень), преформатированного текста, верхних и нижних индексов, цветового выделения, а также для работы со стилевыми таблицами (CSS).



Рис. 7. Панель Стиль
Пиктограммы панели ^ Таблицы (рис. 8) позволяют создать таблицу целиком (Редактор таблиц) с требуемым числом строк и колонок, с заголовком, шапкой, примечаниями и даже данными. Возможно и поэлементное создание таблицы в абсолютно любой последовательности.



Рис. 8. Панель Таблицы
Панель Списки (рис. 9) предназначена для создания именно этих элементов HTML-разметки — нумерованных и ненумерованных списков и их элементов, а также списков определений.



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



Рис. 10. Панель Формы
Наконец, в панель Прочие (рис. 11) попало несколько пиктограмм, не охваченных в предыдущих закладках, а именно: вставка даты/времени, ссылки на адрес электронной почты, метатегов, мнемонических кодов для замены специальных символов (символа копирайта, "собаки" и пр.). Во избежание спамового завала в адресах электронной почты вместо @ лучше использовать его эквивалент @ [11].



Рис. 11. Панель Прочие
Работа с панелями инструментов очень проста — после щелчка на значке выполняется связанное с ним действие, часто это добавление определённого текста в документ. В Quanta Plus вы можете создать свои собственные панели инструментов и действия к ним.

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



Рис. 12. Диалог вставки рисунка (тег )
На рис. 12 показано окно вставки тега рисунка. Кнопка этого действия находится на на Стандартной панели (рис. 6, девятая кнопка слева направо). В окне диалога необходимо ввести имя файла (при необходимости полное имя с путем расположения) и другие параметры. При нажатии на кнопку ОК, добавится соответствующий рисунку тег с заполненными параметрами и атрибутами.

Для создания панели инструментов используйте: ^ ПанелиСоздать пользовательскую панель инструментов… Далее следует добавить и настроить действия: НастройкаНастроить действия.... Нажмите кнопку Новое действие… (в левом нижнем углу окна). Заполните все необходимые поля и добавьте тег в соответствующую панель инструментов. Если у тега есть атрибуты (и вы будете часто их использовать), отметьте Запустить диалог "Изменить тег", если он доступен, и каждый раз при использовании данного действия будет предложено заполнить свойства добавляемого тега.

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

Вы также можете отправить созданные вами панели инструментов по почте. Они отправляются в сжатом виде с использованием KMail. Если вам прислали такую панель инструментов, вы можете сохранить её в любом месте и загрузить через соответствующее меню Quanta Plus.


      1. ^

        Служебные панели


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

^ Дерево файлов

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

^ Дерево проекта

Проекты – одна из мощных сторон Quanta Plus. Данная вкладка отображает все файлы активного проекта и позволяет управлять ими через контекстное меню.

^ Дерево шаблонов

Другая отличительная возможность Quanta Plus – работа с шаблонами. Шаблоном может быть любой файл – изображение, сценарий или целая страница. Шаблоны упорядочены по трём категориям, в соответствии с их принадлежностью к той или иной сфере действия. Глобальные шаблоны доступны постоянно, локальные – только пользователю, создавшему их, а шаблоны проекта доступны только в рамках одного проекта.

^ Дерево сценариев

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

^ Структура документа

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

^ Редактор атрибутов

Здесь вы можете изменить атрибуты тегов. Такая система позволяет быстро изменить содержание тегов без их поиска в документе.

^ Дерево документации

Здесь собрана основная документация по веб-технологиям. Обновить документацию, скачав архив, вы можете на сайте Quanta Plus по темам

или создать её самому, если таковой вы не нашли.

      1. ^

        Информационные вкладки


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



Рис. 13. Информационные панели Quanta Plus

    1. ^

      Первые шаги

      1. Создание HTML-документа


При загрузке приложения автоматически создается новый документ. Для создания нового HTML-документа используйте меню ^ Файл – Создать (Ctrl + N). Для всех операций с файлами на Основной панели инструментов существуют дублирующие кнопки. В нижней части Рабочей области появится вкладка Untitled1 (Безымянный1). Можно переключаться между документами, щелкая по вкладкам.

      1. ^

        Открытие HTML-документа


Для открытия существующего HTML-документа используйте меню Файл – Открыть… (Ctrl + O), затем выберите каталог с интересующими вас файлами (HTML-, CSS-, PHP-, XML-файлы) и нажмите кнопку Открыть. Программа также запоминает последние открытые файлы, найти их можно в соответствующем пункте меню Файл.

      1. ^

        Сохранение HTML-документа


Для сохранения HTML-документа используйте меню Файл – Сохранить (Ctrl + S) или Файл – Сохранить как…. В первом случае сохраняются изменения в уже существующем файле. Если же файл сохраняется впервые, откроется диалоговое окно второго варианта.

В появившимся окне:

  • выберите размещение файла (каталог);

  • имя файла (при некорректном переводе поле называется Расположение);

  • тип файла (или Фильтр). Чаще это документ HTML.

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

    1. ^

      Создание структуры HTML-документа


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

Воспользуемся вкладкой Стандартная на панели инструментов вставки тегов. Первая кнопка – Диалог Быстрый запуск (рис. 14):

  • выбор DTD (от англ. Document Type Definition – определение типа документа);

  • вводим заголовок документа;

  • имя автора для указания в Meta-тегах;

  • выбираем кодировку (часто это UTF-8 или CP-1251);

  • вводим ключевые слова для поиска данного документа в Сети;

  • указываем таблицу стиля CSS (если таковая имеется);

  • выбираем опционально параметры для тела документа при использовании PHP.



Рис. 14. Диалог Быстрый запуск
В результате появится набор тегов:

<html>

<head>

Сотрудники кафедры


голова

документа



документ

HTML
content=”text/html; charset=utf-8”>


head>


тело

документа
<
body>

body>

html>
Если кодировка (charset) utf-8 некорректно отображается вашим браузером, замените значение utf-8 на cp-1251.

Дальнейшее наполнение документа будем производить в элементе BODY.

    1. ^

      Форматирование текста


Существует два варианта разметки текста:

  1. Документ не имеет форматирования, нет рисунков, ссылок и пр. Необходимые изменения добавляются по ходу: обозначение абзацев, выравнивание, форматирования текста, вставка рисунков, ссылок, таблиц.

  2. Все форматирование указывается при наборе документа.



      1. ^

        Размер текста, начертание, цвет


Не все теги имеются на Панели инструментов, но можно создать пользовательскую панель с часто используемыми тегами (см. пп. 1.1.3). Поэтому необходимо знание основных, базовых тегов [2].

В Quanta Plus при самостоятельном наборе тегов (нужно всего лишь поставить открывающую угловую скобку «<») появляется список тегов, в котором, например, выберем FONT – тег форматирования шрифта (выбор производится клавишами «вверх», «вниз» и Enter). Затем нужно закрыть тег – «>», и если тег парный, а в данном случае это так, то закрывающий тег
появится автоматически, а курсор встанет между тегами для ввода текста.

Введем текст о сотруднике и приступим к форматированию (рис. 15).



Рис. 15. Вставка элемента FONT
Поставим курсор после первого FONT, нажмем «пробел». Появится список атрибутов для данного тега, рассмотрим некоторые из них:

  • color (цвет)
    выбираем из списка 1 из 16 цветов

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



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

  • face (шрифт)
    внутри кавычек пишем название одного или перечисление нескольких шрифтов;



В случае, если на компьютере не окажется шрифт Times New Roman, то текст будет отображаться следующим по списку шрифтом.

  • size (размер)
    при вставке данного атрибута появляется выбор из восьми возможных размеров шрифта.
    Другие значения не поддерживаются. Например, если вы введете +5, то размер будет соответствовать +4.



  1   2   3   4   5   6   7   8   9

Добавить документ в свой блог или на сайт

Похожие:

Ю. П. Немчанинова Создание и редактирование
Создание и редактирование графических элементов и блок-схем в среде OpenOffice org Учебное пособие. – Москва: 2008. 46 с

Е. В. Ковригина Создание и редактирование электронных таблиц в среде OpenOffice org
Создание и редактирование электронных таблиц в среде OpenOffice org: Учебное пособие. – Москва: 2008. — 85 с

Учебное пособие Москва 2008 Литвинова А. В. Л 641 Создание и редактирование...
Создание и редактирование текстов в среде OpenOffice org (по для создания и редактирования текстов): Учебное пособие. – Москва 2008....

Цель: сократить время создания диаграммы нотации idef0
Конечный продукт должен позволять создание, хранение и редактирование диаграмм idef0 второго уровня

Цель: сократить время создания диаграммы нотации idef0
Конечный продукт должен позволять создание, хранение и редактирование диаграмм idef0 второго уровня

Вопросы для экзамена по информатике и икт в 8 «Б» классе
Создание консольных приложений в среде программирования gambas. Виды переменных

Цель: сократить время создания неконтекстной диаграммы нотации idef0
Конечный продукт должен позволять создание, хранение и редактирование неконтекстных диаграмм idef0 второго уровня

Цель: сократить время создания неконтекстной диаграммы нотации idef0
Конечный продукт должен позволять создание, хранение и редактирование неконтекстных диаграмм idef0 второго уровня

Практическая работа
Практическая работа «Создание и редактирование табличных объектов OpenOffice org Writer»

Республики Беларусь Учреждение образования “Белорусский государственный...
Методы и технологии построения интернет-приложений предназначенных для классификации. 7

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
odtdocs.ru
Главная страница