Или Как просмотреть исходный код страницы 16 страница
доступ, ведет историю поисковых запросов, ввода URL-адресов и т. д. При желании вы можете полностью или частично удалить все подоб- ные сведения, а также настроить журнал недавно просмотренных документов. Для этого в настройках программы предназначена вкладка История, содержимое которой показано на рис. 5.9.
 |
Рис. 5.9. Настройка программы, вкладка История
На данной вкладке в поле Длина списка недавних документов можно самостоятельно определить, сколько недавно открываемых документов программа должна помещать в журнал для последующе- го быстрого к ним доступа из подменю Файл > Недавние документы. Требуемое значение можно ввести как с клавиатуры, так и с помо- щью кнопок счетчика. По умолчанию программа предлагает сохра- нять в журнале 15 недавно просмотренных документов.
Остальные параметры данной вкладки предназначены для уда- ления соответствующих сведений из истории ее эксплуатации. В частности, вы можете очистить историю поисковых запросов, уда- лить все данные из журнала недавно открываемых документов и т. д. С помощью кнопки Стереть всю историю вы можете удалить все сведения, которые перечислены на расположенных ваше кнопках.
На вкладке Просмотр вы можете указать Интернет-обозреватель, который будет использоваться для просмотра создаваемых и редакти- руемых веб-страниц. Для этого в поле Путь к внешнему браузеру нужно указать путь к исполняемому файлу этого Интернет-обозревателя.
|
|
|
Если на вкладке Система установить флажок Встроить в си- стемное меню, то в контекстном меню, вызываемом нажатием пра- вой кнопки мыши на ярлыке файлов формата Html, CSS или JavaScript, будет присутствовать команда Редактировать в NeonHtml, с помо- щью которой можно будет сразу перейти в режим редактирования данного файла средствами программы NeonHtml.
Все настройки программы вступают в силу после нажатия кнопки
ОК, которая доступна на всех вкладках данного окна.
Как создать новый веб-документ?
Чтобы начать работу над новой веб-страницей, ее необходимо вначале создать. Вы можете это сделать как из стартового (см. рис. 5.1), так и из главного (см. рис. 5.2) окна программы. В первом случае нужно воспользоваться кнопками Новая страница, Заготовка или Пустой, во втором — соответствующими командами подменю Файл > Новый. Дальнейший порядок действий будет одинаков. По- скольку со стартовым окном мы уже познакомились ранее, в данном разделе мы будем оперировать командами подменю Файл > Новый.
Чтобы создать новую веб-страницу в соответствии с заданными параметрами, выполните команду главного меню Файл > Новый > Веб-страница. При активизации данной команды на экране отобра- жается окно, изображенное на рис. 5.10.
|
|
|
 |
Рис. 5.10. Настройка параметров веб-страницы
В данном окне осуществляется предварительная настройка пара- метров создаваемой веб-страницы. В поле Имя файла следует указать имя и тип файла создаваемого документа. Для этого нужно нажать кнопку, расположенную справа от данного поля, и в открывшемся окне по обычным правилам Windows указать тип файла, его имя, а также путь для сохранения. Значением поля Имя файла будет яв- ляться полный путь к этому файлу (см. рис. 5.10).
В поле Заголовок с клавиатуры вводится произвольный заголо- вок создаваемой страницы. Введенное в данном поле значение впо- следствии будет отображаться вверху окна Интернет-обозревателя.
В поле Описание можно ввести произвольное описание докумен- та, кратко характеризующее его суть.
Ранее мы уже отмечали: для того, чтобы сайт был успешным, необ- ходимо не только его создать, но и обеспечить ему рекламу, продвиже- ние и «раскрутку». Одним из самых распространенных приемов про- движения сайтов является использование ключевых слов, по которым сайт будет отбираться поисковыми машинами при получении соответ- ствующих запросов от пользователей. Эти ключевые слова, разделен- ные запятой, вы можете ввести в поле Ключевые слова через запятую.
|
|
|
В поле Автор можно указать сведения о разработчике данного документа. Если для оформления веб-страницы предполагается ис- пользовать стили, то в поле Относительный путь к файлу стиля CSS можно указать путь к файлу стиля, который будет использоваться для оформления. Для заполнения данного поля нужно нажать распо- ложенную справа от него кнопку, и в открывшемся окне указать тре- буемый путь.
В расположенных ниже раскрывающихся списках можно выбрать тип иконки для данной веб-страницы, кодировку символов, язык веб- страницы и гипертекстовый язык разметки, который будет исполь- зоваться при ее создании (по умолчанию — HTML 4.01 Transnational).
Если установить флажок Включить информацию о редакторе, то в веб-страницу будут автоматически включены сведения о программе NeonHtml, в которой она была разработана.
Завершается ввод исходных параметров создаваемой веб- страницы нажатием в данном окне кнопки ОК. В листинге 4.1 пред- ставлен программный код веб-страницы, который автоматически сге- нерируется при применении параметров, представленных на рис. 5.10.
Листинг 4.1. Создание веб-страницы на основании заданных параметров
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition-
al//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Опытный образец веб-страницы</title>
<meta http-equiv="Content-Type" content="text/html; char- set=windows-1251">
<meta name="keywords" content="образец, пример, веб-обучение, веб- разработка">
<meta name="Content-language" content="ru">
</head>
<body>
</body>
</html>
Вы можете создавать новые веб-документы на основании имею- щейся заготовки. Эта заготовка создана в программе по умолчанию, но при желании вы можете ее отредактировать произвольным обра- зом в настройках программы (см. рис. 5.7). Для создания документа на основании заготовки нужно выполнить команды главного меню Файл > Новый > Заготовка страницы. Если вы будете использовать заготовку, предложенную в программе по умолчанию, то при активи- зации данной команды программа автоматически сгенерирует код, который представлен в листинге 4.2.
Листинг 4.2. Создание веб-страницы на основании заготовки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition-
al//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; char- set=windows-1251" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
</body>
</html>
Если же вы хотите самостоятельно начать разработку новой веб- страницы «с нуля», без использования заготовки и предварительной настройки параметров, выполните в главном меню программы ко- манду Файл > Новый > Пустой документ (эта команда вызывается
также нажатием комбинации клавиш Ctrl+N). При активизации дан- ной команды будет создан новый документ без программного кода (то есть рабочая область для него будет абсолютно пустой).
Открытие веб-документа для просмотра и редактирования
С помощью программы NeonHtml вы можете не только создавать новые сайты, но также открывать для просмотра и редактирования созданные ранее веб-страницы. Программа поддерживает работу с документами следующих типов: Html, CSS, JavaScript, SSI, PHP, а также с текстовыми документами.
Чтобы открыть документ для просмотра и редактирования, вы- полните команду главного меню Файл > Открыть (эта команда вы- зывается также нажатием комбинации клавиш Ctrl+O). При активи- зации данной команды на экране открывается окно открытия файла, изображенное на рис. 5.11.
 |
Рис. 5.11. Открытие документа для просмотра и редактирования
В данном окне нужно открыть каталог с требуемым файлом, вы- делить этот файл щелчком мыши и нажать кнопку Открыть. В ре- зультате программный код выбранного документа отобразится в рабочей области главного окна программы.
Сохранение веб-документов
По мере работы над документом рекомендуется периодически сохранять вносимые в него изменения. Это позволит избежать поте- ри данных при возникновении нештатной ситуации (программный или аппаратный сбой, внезапное отключение электроэнергии и т. д.). Для сохранения изменений в документе предназначена команда главного меню Файл > Сохранить, вызываемая также нажатием ком- бинации клавиш Ctrl+S.
Отметим, что если вы только начали работать с документом и до настоящего момента не сохраняли его в отдельном файле, то при ак- тивизации команды Файл > Сохранить на экране откроется окно, в котором нужно будет указать путь для сохранения и имя файла. А уже впоследствии с помощью данной команды вы будете просто сохранять внесенные в документ изменения.
При необходимости вы можете сохранить изменения, выполнен- ные в документе, в отдельном файле под другим именем. Для этого нужно в главном меню выполнить команду Файл > Сохранить как (данная команда активизируется также нажатием комбинации кла- виш Ctrl+Alt+S), после чего в открывшемся окне нужно будет указать путь для сохранения и имя файла.
Описание режимов работы
Далее мы будем последовательно рассматривать действия, необ- ходимые для создания полноценного веб-документа средствами про- граммы NeonHtml. В частности, мы рассмотрим, как осуществляется построение структуры будущей веб-страницы, как формируется и оформляется текстовый контент, вставляются картинки и мульти- медийные файлы, таблицы, ссылки и т. д.
Построение структуры веб-страницы
Начинать разработку новой веб-страницы в программе NeonHtml рекомендуется с построения ее структуры. Конечно, структура доку- мента в процессе работы с ним может дорабатываться и совершен- ствоваться (более того — в большинстве случаев так и происходит), но в любом случае основные его структурные компоненты лучше определить заранее.
Формирование структуры веб-страницы осуществляется с помо- щью инструментов, находящихся на вкладке Структура. Содержимое данной вкладки представлено на рис. 5.12.
Рис. 5.12. Инструменты для построения структуры веб-документа
Как видно на рисунке, данная вкладка включает в себя несколько кнопок. Действие кнопок Страница и Заготовка нам уже знакомо — они функционируют так же, так и соответствующие команды подме- ню Файл > Новый (подробнее см. выше раздел «Как создать новый веб-документ?»). Иначе говоря, одним нажатием кнопки вы можете получить в рабочей области автоматически сгенерированную пред- варительную структуру будущей веб-страницы.
При нажатии кнопки Теги открывается меню, команды которого предназначены для быстрой вставки соответствующих тегов в про- граммный код документа. Например, при активизации команды Теги
> <HEAD> в программном коде веб-страницы появится контейнер
<head> </head> и т. д. Таким образом, буквально несколькими щелч- ками мыши можно получить предварительную структуру документа, пример которой представлен в листинге 4.3.
Листинг 4.3. Предварительная структура веб-документа
<html>
<head>
<title></title>
<meta name="keywords" content="">
</head>
<body>
</body>
</html>
Данная структура идентифицирует Html-документ, определяет место для названия веб-страницы, содержит мета-теги для задания ключевых слов, а также предусматривает место для ввода основного контента.
Ранее мы уже отмечали, что программные коды часто содержат комментарии — текстовые пояснения, которые предназначены для служебного пользования. Они позволяют пояснить, что означает тот или иной фрагмент программного кода. Комментарии являются ча- стью программного кода, однако они не оказывают никакого влия- ния на его функциональность.
Для вставки комментария на вкладке Структура предназначена кнопка Комментарий (название кнопки отображается в виде всплы- вающей подсказки при подведении к ней указателя мыши). При ее нажатии на экране отображается окно ввода комментария, которое представлено на рис. 5.13.
 |
Рис. 5.13. Ввод комментария
В данном окне следует с клавиатуры ввести требуемый коммен- тарий и нажать кнопку ОК. При этом с помощью переключателя, рас- положенного внизу окна, нужно указать — к какому коду относится комментарий: к HTML-коду или к коду, написанному на языке CSS, JavaScript или РНР. Дело в том, что оформление комментариев в язы- ке HTML и в других языках веб-программирования несколько отли- чается, поэтому нужно четко указать, на каком языке написана дан- ная страница.
Если установлен флажок Однострочный комментарий, то вы мо- жете записать многострочный комментарий в одну строку. При от- крытии комментария (для этого нужно будет щелкнуть мышью при нажатой клавише Ctrl) многострочность будет восстановлена.
В листинге 4.4 показано, как в программном коде веб-страницы бу- дет выглядеть комментарий, настройка которого показана на рис. 5.13.
Листинг 4.4. Вставка комментария
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition-
al//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Опытный образец веб-страницы</title>
<meta http-equiv="Content-Type" content="text/html; char- set=windows-1251">
<meta name="keywords" content="образец, пример, веб-обучение, веб- разработка">
<meta name="Content-language" content="ru">
</head>
<body>
<!-- Далее рассмотрим процесс ввода текстового контента -->
</body>
</html>
В программе реализована возможность быстрой навигации по программному коду. Иначе говоря, вы можете в любой момент пе- рейти к любому фрагменту кода. Для этого нажмите на вкладке Структура кнопку Навигация — в результате на экране откроется навигационное окно, изображенное на рис. 5.14.
 |
Рис. 5.14. Навигация по документу
В данном окне представлена иерархическая структура всего до- кумента. По умолчанию узлы иерархии являются свернутыми, для их открытия предназначен соответствующий значок, на котором нужно
щелкнуть мышью. Чтобы перейти к любому фрагменту программно- го кода, выделите его щелчком мыши и нажмите кнопку Обновить или клавишу Enter. Сразу после этого навигационное окно автомати- чески закроется (для этого должен быть установлен флажок Закры- вать при переходе), а курсор в рабочей области главного окна про- граммы спозиционируется на выбранном фрагменте.
Ввод и оформление текстового контента
Как правило, после предварительной разметки веб-страницы и формирования ее структуры веб-разработчики занимаются вводом и оформлением текстового контента, а уже после этого добавляют на страницу ссылки, изображения и прочие элементы. Для работы с тек- стовым контентом в программе предназначена вкладка Текст, со- держимое которой представлено на рис. 5.15.
 |
Рис. 5.15. Инструменты для работы с текстовым контентом
Крайняя слева кнопка на данной вкладке предназначена для фор- мирования параграфов. При нажатии данной кнопки в программный код документа вставляется тег <p>. Кнопка, которая находится рядом с ней, позволяет вставить в программный код тег <br>, который предна- значен, как мы уже знаем, для вставки разрыва и создания абзацев.
При нажатии на кнопку Прочее открывается меню, команды ко- торого также предназначены для вставки в документ разных тегов. Содержимое данного меню представлено на рис. 5.16.
 |
Рис. 5.16. Меню, открываемое нажатием кнопки Прочее
Как видно на рисунке, данное меню содержит немало хорошо знакомых нам тегов языка программирования HTML. Вставлять эти теги в программный код веб-страницы можно двумя способами: пу- тем обычной вставки или путем заключения в теги определенного текстового фрагмента.
В первом случае нужно установить курсор в то место, в которое требуется вставить теги, и выполнить соответствующую команду меню Прочее. Во втором случае следует предварительно выделить текстовый фрагмент, который должен быть заключен в теги, и после этого выполнить нужную команду меню Прочее. Рассмотрим на кон- кретном примере, как это делается.
Предположим, что у нас есть следующий программный код (рис. 5.17).
 |
Рис. 5.17. Пример программного кола веб-страницы
Предположим, что нам нужно первую фразу текстовой части кон- тента оформить заголовком первого уровня, а последнюю фразу — в виде цитаты. Для этого действуем следующим образом: выделяем первую фразу, нажимаем кнопку Прочее и в открывшемся меню вы- бираем команду h1. После этого выделяем последнюю фразу, затем вновь нажимаем кнопку Прочее и в открывшемся меню выбираем команду <cite> Цитирование. Результат выполненных действий пока- зан в листинге 4.5.
Дата добавления: 2021-01-21; просмотров: 79; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!