'

Создание сайтов в Quanta Plus

Понравилась презентация – покажи это...





Слайд 0

Создание сайтов в Quanta Plus Лекция №28 Ахмедова Е.В. МОУ «СОШ №1» г.Осташков


Слайд 1

Введение Quanta Plus - программа, позиционируемая как универсальное средство Web-разработчика. Quanta Plus поддерживает возможности набора и редактирования html-кода: автоматический ввод основных тегов и их атрибутов, подсветку синтаксиса, предварительный просмотр Web-страницы и так далее. Весьма развиты средства обработки текстов: поиск и замена (в том числе с использованием регулярных выражений), проверка орфографии. Программа также имеет средства управления проектами (дополняемые интегрированным файловым менеджером, представляющим собой облегченный вариант konqueror) и, особенно, визуальный редактор, позволяющий выполнять html-разметку методами, привычными по работе с текстовыми процессорами. Quanta Plus также допускает  приемы работы с языком разметки XML и стилевыми таблицами, сценариями PHP.


Слайд 2

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


Слайд 3

Структура программы Через главное меню осуществляется доступ ко всем доступным функциям программы. На главной инструментальной панели расположено множество пиктограмм. При наведении на любую кнопку всплывает исчерпывающая (русскоязычная) подсказка. Через вкладки и соответствующие панели тегов (пользовательские панели инструментов) удобно выполнять тонкую индивидуальную настройку редактора. По умолчанию вкладок шесть: Стандартная; Стиль; Таблицы; Списки; Формы; Прочие.


Слайд 4

Вкладки Вкладка Стандартная объединяет элементы, используемые постоянно в ходе разметки тела html-страницы: параграфы и разрывы строки, гиперссылки и вставки изображений, выделения и выравнивания. Стоит отметить, что полужирному и курсивному выделению соответствуют не визуальные теги <b> и <i>, а структурные теги <strong> и <emphasis>, выравнивание же достигается значениями атрибутов тега <div>. Во вкладке Стиль объединены теги, используемые для заголовков (с 1-го по 4-й уровень) переформатированного текста, верхних и нижних индексов, цветового выделения, а также для работы со стилевыми таблицами (CSS). Кнопки вкладки Таблицы позволяют создать таблицу целиком (Редактор таблиц): с требуемым числом строк и колонок, с заголовком, шапкой, примечаниями и даже данными. Возможно и поэлементное создание таблицы в абсолютно любой последовательности. Вкладка Списки предназначена для создания именно этих элементов html-разметки: нумерованных и ненумерованных списков  и их элементов, а также списков определений.


Слайд 5

Вкладки Вкладка Формы служит для создания простых интерактивных элементов Web-страницы: форм, выпадающих меню, переключателей, радиокнопок и т.д. Во вкладке Прочие находятся несколько кнопок, не охваченных в предыдущих вкладках, как то: вставка даты/времени, ссылки на адрес электронной почты, метатегов, мнемонических кодов для замены специальных символов. Очень важна кнопка Прочие теги. Все многообразие тегов современного html не охвачено на панелях. И потому, если потребуется вставить тег типа <code>, придется обратиться к этой кнопке. Кроме этого, элементы xml-разметки в программе Quanta Plus также не предусмотрены – их на первых порах придется задавать посредством кнопки Прочие теги. Все кнопки пользовательских панелей можно разделить на две группы: обычные и диалоговые. Нажатие первых вызывает вставку простого тега (при необходимости – как открывающего, так и закрывающего), например, параграфа или разрыва строки. Диалоговые же кнопки связаны с тегами, требующими (или допускающими) указания атрибутов и их значений. В этом случае вызывается диалоговая панель, в соответствующих полях которой можно указать требуемые параметры.


Слайд 6

Редактор кодов Интерфейс Quanta Plus разделён на части: редактор; панель быстрой информации; панели инструментов. Окно редактирования Quanta Plus позволяет открыть несколько файлов одновременно. Если открыто больше одного файла, внизу окна редактирования появляются вкладки с соответствующими именами файлов и, если файл был изменён после последнего сохранения, со значком в виде дискеты. В контекстном меню вкладок содержатся некоторые команды для работы с документами. Наполнение контекстного меню редактора немного другое, оно включает действия редактирования, изменения тега, если курсор находится в нём, или открытия файла, если курсор находится на его имени. Вверху расположены панели инструментов. Quanta Plus использует по умолчанию панель для HTML 4.01. С развитием программы они будут дополняться для соответствия потребностям пользователей.


Слайд 7

Служебные панели Чтобы вставить стандартный тег в открытый документ, например <p>, необходимо щёлкнуть на значке, который его представляет. Если тег имеет обязательные атрибуты, откроется окно, где будет предложено их ввести. Перед Вами пример окна, в котором задаются свойства тега А. Служебные панели позволяют перемещаться по документу, основываясь на порядке тегов, а также получать различную информацию, в частности структуру сайта, шаблонов, документа, атрибутов, документации, доступ к дереву каталогов.


Слайд 8

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


Слайд 9

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


Слайд 10

Информационные панели Quanta Plus По умолчанию в Quanta Plus имеется две вкладки внизу главного окна – Сообщения и Проблемы. Во вкладке Сообщения выводится информация сценариев, запускаемых программой. Например, текущее DTD и другие сведения по нему. Во вкладке Проблемы выводятся найденные ошибки в разметке текущего документа. Запускаемые сценарии также будут передавать сюда свои сообщения об ошибках. Панели инструментов Работа с панелями инструментов очень проста: после щелчка на значке выполняется связанное с ним действие, часто это добавление определённого текста в документ. В Quanta Plus Вы можете создать свои собственные панели инструментов и действия к ним. Управление панелями инструментов происходит через меню Панели. При загрузке панели инструментов нужно выбрать рабочую область, к которой она принадлежит. Вы также можете отправить созданные Вами панели инструментов по почте. Они отправляются в сжатом виде с использованием KMail. Если Вам прислали такую панель инструментов, Вы можете сохранить её в любом месте и загрузить через соответствующее меню Quanta Plus.


Слайд 11

Создание Web-страницы вручную Web-страницы создаются с помощью языка HTML – HyperText Markup Language (язык разметки гипертекста). Именно этот язык используют специальные программы при создании документов Всемирной паутины. Браузеры при просмотре Web-страниц также интерпретируют HTML документы. HTML-документ представляет собой обыкновенный текстовый файл. Элементы языка, которые управляют отображением текста, называются тегами. Теги заключаются в угловые скобки < >. Например, тег <b> устанавливает полужирное начертание текста. Многие теги спарены: за открывающим тегом следует закрывающий тег, а между ними содержится текст или другие теги. Закрывающий тег содержит символ слеш /, например, закрывающим для тега <b> будет </b> Язык HTML не различает большие и малые буквы, так что теги <b> и <B> эквивалентны. В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов – любые символы. Если в качестве значений атрибута применяются русские символы, то они должны быть заключены в кавычки. Следует отметить, что неверно записанный тег или его параметр игнорируется браузером. Чтобы просмотреть результат введенной последовательности тегов в программе Quanta Plus, в меню Вид или на панели инструментов выберите команду  Просмотр. Чтобы вернуться к коду, в меню Вид или на панели инструментов выберите команду Редактор кода.


Слайд 12

Структура документа в формате HTML Документы на языке HTML имеют определенную структуру. Каждый HTML-документ содержит теги <html> и </html>, отмечающие начало и конец документа. Кроме того, документ должен включать заголовок, ограниченный тегами <head> и </head>. Основная информация страницы находится в теле документа, заключенном между тегами <body> и </body>. Элемент верхнего уровня в языке HTML. Показывает, что строки между данными тегами представляют единый HTML-документ. Пример: <html> Заголовок и тело документа </html> <head>…</head> Определяет заголовок документа и содержит необходимую информацию для программы, интерпретирующей документ, например, браузера. <title>…</title> Данный тег является обязательным тегом в заголовке. Определяет название документа. Название документа не отображается на Web-странице, а выводится в заголовке окна браузера. Атрибуты: Profile – указывает местоположение профилей метаданных. Под метаданными понимается информация о документе, например, в метаданных можно указать автора страницы.


Слайд 13

<meta> Тэг <meta> определяет информацию о документе, которая описывает его свойства, например, авторство или ключевые слова. Элементы данного тега не влияют на отображение документа в браузере. Атрибуты: Name – определяет имя свойства; Content – задает значение свойства; Scheme – определяет имя схемы, которая используется для интерпретации значения свойства; http_equiv – может применяться вместо атрибута name. Web-серверы используют этот атрибут для сбора информации в заголовках сообщений ответов серверов. Пример: <head> <title>Компания АТЛАНТ</title> <meta name=”keywords” content=”компьютер, программа”> </head> Следует отметить, что тег <meta> часто применяется для установки кодировки символов. Например, указанный фрагмент кода устанавливает русскую кодировку символов: <meta http_equiv=”Content_Type” content=”text/html;charset=”Windows_1251">


Слайд 14

<body>…</body> Атрибуты: Alink – устанавливает цвет активной ссылки, иными словами: когда она выбрана пользователем; Background – указывает электронный адрес фонового изображения; Bottommargin – определяет границу нижнего поля документа в пикселах; Bgcolor – устанавливает цвет фона документа; Leftmargin – определяет границу левого поля документа в пикселах; Link – устанавливает цвет непросмотренной ссылки; Rightmargin – определяет границу правого поля документа в пикселах; Scroll – устанавливает наличие полос прокрутки в окне браузера; Text – задает цвет текста; Topmargin – определяет границу верхнего поля документа в пикселах; Vlink – устанавливает цвет просмотренной ссылки. Необходимо иметь в виду, что задавать цвет в числовом представлении неудобно. Лучше использовать названия цветов, из которых наиболее распространенными являются: aqua (голубой), black (черный), blue (синий), gray (серый), green (зеленый), fuchsia (сиреневый), lime (светло-зеленый), maroon (каштановый), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (серебряный), teal (сине-серый), white (белый), yellow (желтый). <address>…</address> Указывает контактную информацию.


Слайд 15

Элементы web-страницы Представление текста На любой Web-странице текст должен быть красиво оформлен. <p>…</p> определяет текстовый абзац. Закрывающий тег </p> может быть опущен. Атрибуты: Align – указывает тип выравнивания текста в абзаце. Значение данного атрибута left позволяет выровнять текст по левому краю окна браузера, center – по центру, right – по правому краю, justify – по ширине окна. В программе Quanto Plus вы можете быстро вставить тег <p>, нажав на кнопку Абзац на панели инструментов Редактора кода. <br> определяет принудительный перевод строки. Атрибуты: Clear – позволяет прервать или продолжить обтекание текста. Значение данного атрибута none обеспечивает неизменность обтекания текста, left прерывает обтекание и выравнивает переносимый текст по левому краю окна, right выравнивает текст по правому краю, all – по обоим краям. Чтобы вставить новую строку, Вы также можете в программе Quanto Plus нажать кнопку Новая строка.


Слайд 16

Горизонтальная линия <hr> позволяет провести горизонтальную линию в окне браузера. По умолчанию линия отображается обычным двухцветным стилем. Атрибуты: Align – указывает тип выравнивания линии. Значение данного атрибута left обеспечивает выравнивание по левому краю окна браузера, center – по центру; right – по правому краю; Width – определяет длину линии в пикселах или процентах от ширины окна браузера; Size – задает толщину линии в пикселах; Noshade – устанавливает отображение линии сплошным цветом; Color – определяет цвет линии. Пример: <hr align=center width=80% size=2> <h1>…</h1>, <h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>,<h6>…</h6> Создают заголовки для частей документа. Заголовки имеют шесть уровней или размеров. Заголовок первого уровня с тегами <h1>…</h1> является самым крупным, а заголовок шестого уровня с тегами <h6>…</h6> – самым мелким. Атрибуты: Align – указывает тип выравнивания текста в элементе. Значение данного атрибута left  позволяет выровнять текст по левому краю окна браузера, center – по центру, right – по правому краю.


Слайд 17

Форматирование текста <pre>…</pre> Определяет отображение текста элемента в том виде, как он выглядит в обычном текстовом редакторе. Иными словами, тег указывает, что текст элемента уже отформатирован с использованием символов перевода строки, табуляции, пробелов, которые должны применяться при выводе текста браузером. При этом текст элемента будет отображаться символами одинаковой ширины. Данный тег, например, удобно использовать для текстов программ. <center>…</center> Определяет выравнивание фрагмента текста по центру окна браузера. <!—…—> Задает комментарий, который не обрабатывается браузером и не отображается на экране. Обычно комментарии используются для пояснения специфики документа. Комментарий может включать несколько строк. Пример: <!— Комментарий документа —> <blockquote>…</blockquote> определяет длинную цитату. В данный элемент можно включать любые теги форматирования. <cite>…</cite> Отмечает цитаты, названия, ссылки на другие документы. Браузерами такой текст обычно отображается курсивом. <code>…</code> Отмечает текст как программный код. <strong>…</strong> Выделяет важные фрагменты текста. Обычно отображается полужирным шрифтом.


Слайд 18

Шрифты Язык HTML позволяет явным образом определить формат отображения фрагмента текста. <b>…</b> – отображает текст полужирным шрифтом. <i>…</i> – представляет текст курсивом. <tt>…</tt> – отображает текст моноширинным шрифтом. <u>…</u> – представляет текст подчеркнутым шрифтом. <s>…</s> – отображает текст, который перечеркнут горизонтальной линией. <big>…</big> – отображает текст крупным шрифтом. <sub>…</sub> – отображает текст в виде нижнего индекса, т.е. сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера. <sup>…</sup> – отображает текст в виде верхнего индекса, т.е. сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера. <font>…</font> – устанавливает параметры шрифта: тип, размер и цвет. Атрибуты: Face – указывает название шрифта, которым браузер будет выводить текст. Можно задать несколько шрифтов, перечисленных через запятую: если на компьютере пользователя отсутствует первый шрифт, то будет использоваться следующий шрифт в списке; Size – определяет размер шрифта в условных единицах от 1 до 7. По умолчанию шрифт имеет размер 3. Размер шрифта можно указывать как в абсолютных величинах, так и в относительных, например, величина +1 означает на один размер больше; Color – устанавливает цвет шрифта.


Слайд 19

Списки Списки являются удобным способом представления информации. Для работы со списками в программе Quanta Plus есть вкладка Список в окне Редактор кодов. <ul>…</ul> - маркированный список. Каждый элемент списка должен начинаться тегом <li>. Атрибуты: Type – указывает тип маркера в списке. Значение атрибута disk задает отображение маркера в виде закрашенных кружков, circle – в форме пустых окружностей, square – в виде закрашенных квадратиков. По умолчанию маркер имеет форму окружности; Compact – определяет вывод списка в компактном виде. Интерпретация атрибута зависит от браузера. Пример: <ul type=disk> Направления деятельности компании АТЛАНТ: <li> Продажа компьютерного оборудования <li> Продажа программ <li> Настройка оборудования и программ </ul>


Слайд 20

Списки <ol>…</ol> - нумерованный список. В нумерованном списке браузер перед каждым элементом автоматически отображает его порядковый номер. Каждый элемент списка должен начинаться тегом <li>. Атрибуты: Type – указывает вид нумерации в списке. Значение атрибута 1 задает нумерацию в виде арабских цифр, A – с помощью прописных латинских букв, a – в виде строчных латинских букв, I – с помощью больших римских цифр, i – в виде маленьких римских цифр. По умолчанию элементы списка нумеруются арабскими цифрами; Start – определяет номер первого элемента в списке. В качестве значения всегда нужно указывать натуральное число. Например, если для строчных латинских букв значение данного атрибута 2, то нумерация списка будет начинаться с буквы b. По умолчанию значение атрибута равно 1; Compact – определяет вывод списка в компактном виде. Интерпретация атрибута зависит от браузера. Пример: <ol type=”a”> Программы, продаваемые фирмой АТЛАНТ: <li> Microsoft Windows <li> Microsoft Office <li> Microsoft Visual Studio </ol>


Слайд 21

Таблицы Табличное представление информации находит все более широкое применение, например, для подготовки прайс-листов или структуры организации. В программе Quanto Plus работе с таблицами посвящена вкладка Таблицы окна Редактор кодов. <table>…</table> - создает таблицу. Таблицы состоят из строк, которые состоят из ячеек. Каждая строка обрамляется тегами <tr> и </tr>, а ячейка обычно начинается тегом <td> и завершается тегом </td> . Количество строк в таблице определяется числом тегов <tr>, а число столбцов – максимальным количеством тегов <td>. Атрибуты: Border – определяет ширину рамки вокруг таблицы в пикселах. Наличие этого атрибута задает рамки вокруг каждой ячейки таблицы. По умолчанию рамки ячеек отсутствуют; Cellspacing – указывает расстояние между смежными рамками ячеек в пикселах. По умолчанию значение данного атрибута равно 2; Cellpadding – определяет интервал между рамкой и данными ячейки в пикселах. По умолчанию значение атрибута равно 1; Width – указывает ширину таблицы в пикселах или процентах от размера окна. По умолчанию ширина таблицы автоматически вычисляется браузером.


Слайд 22

Атрибуты таблицы Height – определяет высоту таблицы в пикселах или процентах от размера окна. По умолчанию высота таблицы автоматически вычисляется браузером; Align – задает горизонтальное расположение таблицы в окне браузера. Значение атрибута left определяет выравнивание таблицы по левому краю окна, величина right – по правому краю, center – по центру окна. По умолчанию таблица выравнивается по левому краю окна; Summary – предоставляет краткую информацию о назначении и структуре таблицы; Bgcolor – устанавливает цвет фона ячеек таблицы. <colgroup>…</colgroup> Позволяет условно объединить столбцы таблицы в группы и применить к ним одинаковые атрибуты, например, способ выравнивания данных. Тег <colgroup> должен располагаться сразу после тега <table>. Закрывающий тег </colgroup> необязателен. Valign – указывает вертикальное расположение данных в ячейках. Значение атрибута top определяет выравнивание данных по верхнему краю ячеек, величина bottom – по нижнему краю, middle – по вертикальному центру, baseline – по базовой линии. По умолчанию данные выравниваются по вертикальному центру.


Слайд 23

Ссылки Ссылки являются удобным и эффективным средством для связи между Web-документами, которые могут находиться и на разных компьютерах. Ссылка состоит из двух частей: указателя и адресной части. Указатель ссылки связан с ее представлением на Web-странице. Указателем ссылки может быть фрагмент текста или изображение. Адресная часть ссылки содержит имя документа, на который указывает ссылка, или его электронный адрес для загрузки из Интернета. <a>…</a> Создает гипертекстовую ссылку. Атрибуты: Href – задает адресную часть ссылки, т.е. электронный адрес документа, к которому можно перейти. Есть возможность указывать как абсолютные адреса, так и относительные. В качестве значения атрибута могут быть адреса любых ресурсов Интернета, например, адрес электронной почты; Name – определяет имя для фрагмента текста. В дальнейшем к этому фрагменту текста можно будет перейти по его имени с помощью ссылки; Hreflang – задает язык документа, на который указывает ссылка; Type – определяет тип содержимого документа, на который указывает ссылка; Charset – задает кодировку символов документа, на который указывает ссылка.


Слайд 24

<base> Задает полный электронный адрес документа. Относительно данного адреса в документе построена адресация. Например, относительный адрес может использоваться в атрибуте href тега <a>. Тег <base> располагается в элементе <head>…</head>. Пример: <head> <title>Компания АТЛАНТ</title> <base href=”http://www.atlant.ru”> </head> <link> определяет связь документа, содержащего данный тег, с другими документами. Тег <link> располагается в элементе <head>…</head>. Пример: <head> <title>Компания АТЛАНТ</title> <link rel=”next” href=”book3.html”> <link rel=”prev” href=”book1.html”> </head>


Слайд 25

Объекты и изображения Изображения позволяют существенно повысить привлекательность и содержательность Web-страниц. <img> - включает рисунок в Web-документ. Атрибуты: Src – указывает электронный адрес файла с изображением. Браузеры, в частности, поддерживают графические форматы GIF, JPEG, PNG. Если файл расположен на локальном компьютере, то достаточно указать его путь; Align – задает расположение рисунка относительно текста и других элементов страницы. По умолчанию изображение выравнивается по базовой линии; Width – определяет ширину рисунка при отображении в пикселах или процентах от размеров окна; Height – указывает высоту изображения при отображении в пикселах или процентах от размеров окна; Hspace – определяет горизонтальный отступ текста от рисунка в пикселах; Vspace – указывает вертикальный отступ текста от изображения в пикселах;


Слайд 26

Атрибуты тэга <img> Border – задает размер рамки в пикселах вокруг рисунка. По умолчанию рамка вокруг изображения не отображается; Alt – определяет альтернативный текст, который отображается вместо рисунка, если загрузка графики отключена. Usemap – указывает электронный адрес для связи навигационной карты-изображения с элементом; Lowsrc – задает электронный адрес альтернативного изображения. Указанный рисунок будет отображаться при первом проходе формирования документа браузером. Обычно альтернативное изображение обладает низким разрешением для быстрой загрузки; Longdesk – определяет ссылку на длинное описание рисунка. Это описание дополняет значение атрибута alt.


Слайд 27

Внешние объекты <object>…</object> Встраивает внешние объекты, т.е. позволяет задавать внешнюю генерацию данных или использовать некоторую программу, генерирующую данные в браузере. С помощью данного тега, например, можно отображать в браузере рисунки разных форматов или запускать программы на клиентском компьютере. Пример: <object data=”http://www.atlant.ru/atlant.gif” type=”image/gif”> </object> <map>…</map> Создает карту-изображение, т.е. рисунок, элементам которого можно назначить гипертекстовые ссылки. Области карты-изображения описываются внутри элемента <map>…</map> с помощью тега <area>. Атрибуты: Name – указывает имя карты-изображения, которое должно соответствовать значению атрибута usemap тега <img>. Пример: <img src=”atlant.gif” usemap=”#pict”> <map name=”pict”> Здесь описание карты </map>


Слайд 28

<area> <area> Задает активную область в карте-изображении. Атрибуты: Shape – указывает форму активной области. По умолчанию активной областью является прямоугольник; Coords – задает координаты активной области. Начало координат находится в левом верхнем углу и соответствует 0,0. Для прямоугольника указываются координаты левого верхнего и правого нижнего углов. Для круга задаются координаты центра и радиус. Для многоугольника указываются координаты его вершин; Href – для области определяет электронный адрес ссылки, который может записываться в абсолютной или относительной форме; Nohref - указывает, что для активной области нет ссылок; Target – задает имя фрейма, в котором будет размещен документ, загружаемый по данной ссылке; Alt – определяет альтернативный текст для активной области изображения. Пример: <img src=”atlant.gif” usemap=”#pict”> <map name=”pict”> <area shape=rect coords=”10, 10, 100, 100” href=”computers.htm”> <area shape=rect coords=”120, 120, 300, 300” href=”software.htm”> </map>


Слайд 29

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


Слайд 30

Мастер создания проекта Поля просты для понимания. Рассмотрим их по порядку. Все пути и информация об авторе могут быть изменены позже через последовательность команд Проект > Настройки проекта («Shift+F7»). В поле Имя необходимо ввести название проекта. После его ввода поле Файл заполняется автоматически. В поле Протокол вводится протокол, который будет использоваться для доступа к проекту, если он располагается не на текущей машине. Список протоколов, доступных для выбора в выпадающем списке, зависит от настроек вашей системы. Он получается с помощью KIOSlave. Обычно в число портов входит SSH, FTP, NFS, SMB и WebDAV. Если проект будет находиться на удалённой машине,  в поле Сервер нужно ввести её имя, например (hostname.example.com), или IP. В поля Логин и Пароль вводятся соответственно имя пользователя и пароль на удалённой машине. Регистр букв учитывается. Если протокол соединения уже был выбран, поле Порт следует оставить пустым.


Слайд 31

Мастер создания проекта Далее в поле Каталог необходимо указать корневой каталог проекта. Каталог шаблонов – это каталог, где будут храниться шаблоны. Путь по умолчанию: templates. Если у Вас есть файлы, которые Вы используете в нескольких проектах, чтобы не копировать их отдельно для каждого проекта, можно указать существующий к ним путь. В поле Каталог панелей инструментов указывают каталог, где будут храниться панели инструментов, задействованные в проекте. Путь по умолчанию: Главный каталог/toolbars. Если у Вас есть панели инструментов, которые Вы используете в нескольких проектах, чтобы не копировать их отдельно для каждого проекта, необходимо указать существующий к ним путь. Если для создаваемого сайта есть файлы-источники, Вы можете указать локальные или удалённые файлы для добавления их в проект или использовать wget для загрузки файлов с сайта. Последний вариант полезен, если у Вас есть статические веб-страницы, которые Вы хотите загрузить и изменить. Для получения динамических файлов (PHP, Python, SHTML) это не годится. После заполнения полей во время первого шага нужно нажать кнопку Далее, чтобы перейти ко второму шагу.


Слайд 32

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


Слайд 33

Мастер создания проекта В поле DTD по умолчанию выберите язык, который планируется использовать в проекте. В поле Кодировка по умолчанию вводится кодировка, которую необходимо использовать при открытии и сохранении файлов проекта. Флажок Префикс для просмотра – это каталог для просмотра (например, динамически генерируемых страниц PHP или JSS). Нужно просто ввести начальный адрес Вашего сайта в сети. Например, если Ваш сайт расположен по адресу www.ivanovmolodec.ru/~linux, и Вы хотите просмотреть файл index.php (учитывая, что была установлена директива файла htaacces на отображение этой страницы как стартовой), Вы можете после изменения закачать его на сервер и нажать F6 для его просмотра уже на удалённом сервере (т.е. PHP-сценарии будут выполняться на сервере). В поле Префикс нужно ввести адрес Вашего сайта в Интернете. Флажок Добавить глобальные шаблоны позволяет копировать глобальные шаблоны в дерево каталогов Вашего проекта. Флажок Добавить локальные шаблоны позволяет копировать Ваши локальные шаблоны в дерево каталогов проекта. Для завершения создания сайта необходимо нажать кнопку Готово.


Слайд 34

Настройки проекта Указанные в процессе создания сайта настройки всегда можно изменить и дополнить, выбрав в меню Проект команду Настройки проекта во вкладке Профили загрузки или воспользовавшись комбинацией клавиш «Shift+F7». Некоторые из полей диалогового окна свойств проекта сходятся с соответствующими полями Мастера проектов. В этом окне в поле Исключить из проекта можно указать список имён файлов (можно использовать маски файлов), которые будут игнорироваться при выполнении таких действий, как Обновить каталог проекта.


Слайд 35

Настройки проекта Флажок Исключить файлы в .cvsignore аналогичен предыдущей команде, но берёт список файлов из файлов .cvsignore. В поле Отладчик нужно выбрать отладчик, который хотите использовать. Параметры модуля можно настроить нажатием соответствующей кнопки. Во вкладке Профили загрузки можно настроить профили, а также включить отображение дерева файлов сервера для каждого профиля. Во вкладке Параметры команды можно добавить, удалить и изменить данные участников проекта, а также определить список рассылки команды. Во вкладке Параметры событий можно включить действия, порождаемые событиями, добавить, изменить и удалить их.


Слайд 36

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


Слайд 37

Передача файлов проекта на сервер Далее необходимо выбрать из списка имя профиля. Нажав кнопку Новый, можно создать новый профиль. Для указанного списка файлов Вы можете нажать кнопку Все, чтобы выделить и передать на сервер все файлы. Кнопка Изменённые позволяет передать на сервер только изменённые файлы. Кнопка Нет очищает выделение файлов Кнопку Инвертировать Вы можете использовать для выделения всех файлов, кроме уже выделенных. Кнопка Развернуть всё позволяет развернуть структуру всех каталогов и отобразить их содержимое. Экраны проекта Экран проекта – это список открываемых файлов и загружаемых панелей инструментов. Переключаясь между экранами проекта, можно быстро переходить от одного вида работы к другому. Работа с экранами проектов осуществляется через меню Проект или панель инструментов Проект, которую можно загрузить, выбрав в меню Настройка команду Панели инструментов и выбрав Панель проекта. Можно выбрать экран проекта по умолчанию.


Слайд 38

Контрольный вопрос 1. Какие возможности предоставляет программа quanta plus? Поддерживает возможности набора и редактирования html-кода Предоставляет средства обработки текстов: поиск и замена (в том числе с использованием регулярных выражений), проверка орфографии. Предоставляет средства управления проектами (дополняемые интегрированным файловым менеджером, представляющим собой облегченный вариант konqueror), визуальный редактор, позволяющий выполнять html-разметку методами, привычными по работе с текстовыми процессорами. Допускает приемы работы с языком разметки XML и стилевыми таблицами, сценариями PHP. Позволяет записывать звук напрямую или импортировать Ogg, WAV, AIFF, AU, IRCAM или MP3 фай


Слайд 39

Контрольный вопрос 2. Какие элементы объединяет вкладка стандартная? Параграфы и разрывы строки. Теги для заголовков, переформатированного текста, верхних и нижних индексов, цветового выделения. Гиперссылки и вставки изображений. Выделения и выравнивания. 3. Как просмотреть web-страницу, html-код которой представлен на экране? Нажать кнопку Просмотр на панели инструментов Навигация. Нажать кнопку Преобразовать html-код на панели инструментов Просмотр. В меню Правка выбрать команду Просмотр web-страницы.


Слайд 40

Контрольный вопрос 4. Какая информация выводится во вкладке сообщения? Найденные ошибки в разметке текущего документа. Сообщения об ошибках в запускаемых сценариях. Информация сценариев, запускаемых программой (например, текущее DTD и другие сведения по нему). Внутреннее представление документа для анализатора.


Слайд 41

Контрольный вопрос 6. Соотнесите теги, определяющие структуру документа, и их назначение. (Установите соответствие между элементами правого и левого столбцов, используя арабские цифры) <html> 4 1. Определяет название документа. <head>5 2. Определяет информацию о документе. <title>1 3. Указывает контактную информацию. <meta>2 4. Отмечает начало документа. <body>6 5. Определяет заголовок документа. <address>3 6. Определяет тело документа.


×

HTML:





Ссылка: