Или Как просмотреть исходный код страницы 9 страница

</body>

</html>

Теперь сохраним выполненные изменения, и откроем веб- страницу в окне Интернет-обозревателя. Результат выполненных действий представлен на рис. 2.23.

Рис. 2.23. Вставка графического объекта

В нашем примере мы для тега <img> использовали не только ат- рибут src, но и атрибут align, которому присвоили значение left. Бла- годаря этому изображение размещено слева таким образом, что иду- щий после него текст обтекает это изображение справа от него. Отметим, что само изображение в программном коде выделено тега- ми абзаца  .

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

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

Глава 3. РАЗРАБОТКА САЙТОВ В ПРОГРАММЕ CATSHTML

В данной главе мы расскажем о том, как заниматься разработкой и администрированием веб-сайтов с помощью бесплатной програм- мы CatsHtml. Этот HTML-редактор создан отечественными разработ- чиками, и распространяется бесплатно. Дистрибутив программы можно легко найти в Интернете; к скачиванию предлагается rar- архив объемом чуть более 2 Мб.

Чтобы установить программу на компьютер, запустите инсталля- ционный файл и следуйте указаниям Мастера установки.

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

Описание пользовательского интерфейса

После установки программы на компьютер в меню Пуск будет сформирована ее программная папка, включающая в себя две коман- ды: для запуска CatsHtml и для ее деинсталляции. Кроме этого, на ра- бочем столе появится ярлык запуска программы.

После запуска CatsHtml на экране отображается ее пользователь- ский интерфейс, который показан на рис. 3.1.

Рис. 3.1. Интерфейс программы CatsHtml

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

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

Самую большую часть интерфейса занимает рабочая область, в ко- торой, собственно, и ведется вся работа по созданию и редактированию веб-страниц. На рис. 3.1 в рабочей области показана предварительная разметка документа, которая формируется автоматически при созда- нии нового веб-документа, а также при запуске программы. Здесь мож- но увидеть уже знакомые нам теги: <html> </html>, <title> </title> и др.

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

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

Под инструментальной панелью находится семь вкладок: Общие (данная вкладка открыта на рис. 3.1), Специальные, Эффекты, Табли- цы, Формы, Цвета и Буфер обмена. Каждая из этих вкладок содержит набор инструментов, предназначенных для выполнения соответ- ствующих операций и процедур. Более подробно порядок работы на каждой вкладке мы будем рассматривать ниже, по мере знакомства с программой.

Настройка параметров программы

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

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

Рис. 3.2. Настройка программы, вкладка Подсветка

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

На вкладке Стиль (рис. 3.3) осуществляется настройка стиля оформления программного кода веб-страницы.

Рис. 3.3. Настройка программы, вкладка Стиль

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

Содержимое вкладки Основные показано на рис. 3.4.

Рис. 3.4. Настройка программы, вкладка Основные

На данной вкладке находится несколько параметров, определяю- щих общую направленность работы программы. Если вы пользуетесь Интернет-обозревателем Mozilla Firefox, рекомендуется установить флажок Включить поддержку стандартов браузера Мозилла (действу- ет на ссылки). Если установить флажок При каждом просмотре стра- нички файл сохраняется в виде копии (иначе страничка постоянно со- храняется автоматически), то при каждом просмотре результатов проделанной работы веб-страница будет сохранена в виде копии. При снятом данном флажке сохранение изменений осуществляется авто- матически через определенные интервалы времени.

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

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

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

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

Создание, открытие и сохранение веб-страниц

С помощью программы вы можете создавать новые веб- страницы, а также редактировать созданные ранее.

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

Чтобы открыть созданный ранее файл веб-страницы (например, для редактирования), нужно выполнить команду главного меню Файл > Открыть, вызываемую также нажатием комбинации клавиш Ctrl+O. Также для этого можно воспользоваться кнопкой Открыть, находящейся в инструментальной панели (напомним, что названия кнопок инструментальных панелей отображаются в виде всплываю- щих подсказок при подведении к ним указателя мыши). При выпол- нении любого из перечисленных действий на экране открывается окно, в котором нужно указать путь к требуемому файлу и нажать кнопку Открыть. Отметим, что этот файл должен иметь расширение html, htm или php.

Чтобы сохранить выполненные в текущем файле изменения, нужно выполнить команду главного меню Файл > Сохранить, которая вызывается также нажатием комбинации клавиш Ctrl+S. Также для этого можно воспользоваться в инструментальной панели кнопкой Сохранить. При первом сохранении файла на экране открывается окно, в котором нужно указать его имя, а также путь для сохранения. Впоследствии при работе с данным файлом такое окно открываться не будет, а просто сохранятся изменения.

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

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

Ввод и редактирование текстового контента веб-страницы

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

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

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

Рис. 3.5. Настройка параметров шрифта

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

Листинг 2.1. Фрагмент программного кода с настройками шрифта

<body>

Этот файл создан для примера </body>

В данном случае настройки шрифта применены к тексту Этот файл создан для примера.

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

Далее следуют кнопки, с помощью которых можно включить по- лужирное, курсивное, подчеркнутое или зачеркнутое начертание шрифта. Если, например, вы хотите отобразить какое-то слово или словосочетание полужирным шрифтом — выделите его, а затем нажмите кнопку Ж. В результате выделенный фрагмент будет за- ключен в теги  , которые, как известно, включают полужир- ное начертание.

Следующая кнопка называется Параграф. Она предназначена для разбиения текста на параграфы. При ее нажатии в программный код документа вставляется тег с атрибутом . При необходимости вы можете вручную добавить атрибут align: в зави- симости от значения (left, center или right) он позволяет выровнять параграф соответствующим образом по горизонтали.

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

Листинг 2.2. Перевод текста на следующую строку

<body>

Этот файл создан для примера. Если нужно, будет сформиро- ван еще один такой файл.

</body>

В данном примере вторая фраза будет начата с новой строки. Следующие четыре кнопки предназначены для создания неупоря-

доченных, нумерованных и маркированных списков. При их нажатии в программный код добавляются соответствующие теги (например, при создании неупорядоченного списка — теги <ul> и </ul> и т. д.).

ПРИМЕЧАНИЕ

С помощью соответствующих кнопок вы можете формировать марки- рованные списки как с квадратными, так и с круглыми маркерами.

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

q Мелкий шрифт — при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице уменьшен- ным шрифтом относительно расположенного рядом текста.

q Крупный шрифт — при нажатии данной кнопки выделенный текстовый фрагмент будет отображаться на веб-странице укрупнен- ным шрифтом относительно расположенного рядом текста.

q Нижний индекс и Верхний индекс — эти кнопки предназначены для сдвига выделенного слова или текстового фрагмента соответ- ственно вниз или вверх относительно расположенного рядом текста (иначе говоря, включается нижний или верхний индекс).

q Форматированный текст — данную кнопку удобно использо- вать для вставки в программный код веб-страницы уже отформати- рованного текста. У этого текста будут сохранены все пробелы и пе- реносы.

q Текст фиксированной ширины — при нажатии данной кнопки выделенный текст будет отображаться в окне Интернет- обозревателя моноширинным шрифтом.

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

уровень заголовка и нажать кнопку Заголовок (на ней отображается символ Н).

Вставка специальных элементов

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

Рис. 3.6. Вкладка Специальные

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

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

Листинг 2.3. Вставка гиперссылки

<body>

Этот файл создан для примера. Если нужно, будет <a href="http://">сформирован</a> еще один такой файл.

</body>

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

Чтобы вставить в документ изображение, нужно нажать на вклад- ке Специальные кнопку Вставить картинку, предварительно поместив курсор в то место программного кода, где должна находиться картин- ка. При нажатии кнопки на экране отображается окно, в котором нуж- но указать путь к файлу изображения. В листинге 2.4 показан фраг- мент кода со вставкой изображения из файла Образец.html.

Дата добавления: 2021-01-21; просмотров: 67; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 4 5 6 7 8910 11 12 13 Следующая ⇒

Мы поможем в написании ваших работ!