Работа в Интернете. Энциклопедия
Шрифт:
В рассмотренном примере использовался шрифт Comic Sans MS, однако на практике при создании веб-страниц чаще всего применяются следующие шрифты: Arial, Courier New, Comic Sans MS, Times New Roman и Verdana. Эти шрифты установлены на абсолютном большинстве компьютеров, поэтому их применение гарантирует, что конечный пользователь будет видеть созданную веб-страничку в том же виде, что и ее автор.
Кроме размера и названия шрифта, можно использовать различные эффекты, которые задаются самостоятельными тегами, не относящимися к тегу <FONT>. В табл. 11.1 приведен список таких тегов.
Таблица 11.1. Теги для задания эффектов, применяемых к шрифтуНа рис. 11.4 можно увидеть, как выглядит действие перечисленных в таблице 11.1 тегов.
Добавим, что можно применять несколько эффектов к одному и тому же тексту. Так, например, код <В><1>Текст</1></В> отобразит слово «Текст» наклонным полужирным шрифтом.
Гиперссылки
Гиперссылки по праву считаются основой Интернета. Вся суть Всемирной паутины заключается в присутствии ссылок на страницах различных интернет-ресурсов, благодаря чему становится возможным быстрый переход с сайта на сайт. Рассмотрим вопросы использования ссылок в веб-документах.
Как и прочие элементы оформления веб-страниц, гиперссылки создаются с помощью тегов. Тег для гиперссылки выглядит так: <A href="#">Название
Насчет конкретного адреса страницы стоит поговорить отдельно. Адрес может быть абсолютным или относительным. Чтобы подробнее объяснить, что это такое, покажем все на примере. Допустим, есть сайт, который называетсяНа этом сайте есть каталоги, один из которых носит имя, например, dir1. В этом каталоге есть некоторые файлы, один из которых называется file1.html, а другой – file2.html. Таким образом, абсолютный путь к первому файлу будет выглядеть так:Данный путь приведет именно к этому файлу, на какой бы из страниц Интернета ни была расположена данная ссылка.
Другое дело – относительные ссылки. Если в рассматриваемом примере нужно разместить ссылку на файл file1.html или file2.html, то в качестве пути достаточно будет задать просто имя файла, то есть file1.html. Тогда полностью тег ссылки будет выглядеть примерно так: <A href="#">Ссылка</A>. При этом данная ссылка будет обрабатываться корректно, только если она находится в файле, размещенном в той же директории.
Разумеется, относительный путь короче и писать его удобнее. При этом он будет корректно работать, скажем, на локальном компьютере, пока пользователь тестирует работоспособность сайта. Поэтому в большинстве случаев его применение оправданно.
Иногда бывает необходимо, чтобы ссылка открывалась не в том же окне, что и основная страница, а в новом. В большинстве браузеров это можно сделать, удерживая нажатой клавишу Shift при переходе по ссылке. Однако нас интересует открытие ссылки в новом окне, независимо от воли пользователя. Для этого используется параметр TARGET со значением _blank. Полностью код выглядит так: <A href="#" TARGET = "_BLANK">Название ссылки</A>.
Гиперссылка может вести не только к документу, но и к конкретному месту в нем. Для этого в месте документа, на которое планируется установить ссылку, вставляется так называемый якорь. Выглядит это так: <A NAME="ЧИСЛО ИЛИ ИМЯ АНГЛИЙСКИМИ БУКВАМИ"><М>. Допустим, в качестве имени якоря в файле file1.html, находящемся в папке dir1, задали параметр metka1. Тогда абсолютная ссылка на него будет выглядеть так: <A href="#"> Название ссыпки<М>. Если же речь идет о ссылке из того же файла (то есть если нужно переместиться в другое место уже открытой страницы), то ссылка может быть описана следующим тегом: <A href="#">Название ссыпки<М>).
Владея уже изложенными в данной книге знаниями о веб-дизайне, в принципе, можно создать простейшую веб-страничку. Однако вид она будет иметь несколько «бедноватый», поэтому поговорим о дополнительных элементах оформления.
Использование цветов в языке HTML
Страница не будет достаточно красочной, если ограничиться в ее оформлении только черным и белым цветом. Вкратце расскажем, как задается цвет тех или иных элементов страницы в языке HTML.
Тег, определяющий цвет, выглядит следующим образом: COLOR="#000000", где нули обычно заменяются цифрами, которые, собственно, и задают цвет. Сам по себе этот тег ничего не меняет, а используется вместе с другими тегами. Например, тег <FONT COLOR="#000000">Текст</FONT> задает цвет выводимого текста. Также с помощью тега COLOR можно задавать цвет заливки фона веб-страницы, ячеек и границ таблицы и т. п.
Чтобы окрасить текст в конкретный цвет, заменив нули в теге требуемыми цифрами, необходимо знать следующие сведения. Шесть цифр идут после знака #. Первые две обозначают насыщенность цвета красным (Red), следующие две – насыщенность зеленым (Green) и две последние – насыщенность синим цветом (Blue). Отсюда название принципа обозначения цвета цифрами – RGB, от первых букв соответствующих английских слов. Цифры, использующиеся в обозначении цвета, – шестнадцатеричные, то есть их значение может колебаться в пределах от 00 до FF.
Если для вас обозначение цвета посредством цифр, да еще и шестнадцатеричных, – слишком сложное занятие, то на помощь может прийти русско-английский словарь. Для обозначения цвета вместо #000000 можно использовать соответствующие английские слова, например, тег COLOR="RED" обозначает красный цвет. Однако с помощью цифровых кодов можно получить гораздо больше цветовых оттенков.
Таблицы
Если для обычного документа таблица – это элемент оформления, без которого при желании можно обойтись (во всяком случае, таблицы, как правило, не являются основой обычных документов), то для веб-страницы значение таблиц сложно переоценить. Правда, в последнее время многие сайты создают основу своего оформления на базе других элементов языка HTML, но таблицы по-прежнему актуальны в веб-дизайне.
С помощью таблицы можно создать сколь угодно сложное оформление веб-страницы, например, оформить меню или другие элементы.
Тег, с помощью которого на веб-страницу вставляется таблица, достаточно объемен, однако и сама таблица не простой элемент. Пример таблицы размером 2 х 2 ячейки приведен в листинге 11.3.
Листинг 11.3. Пример простейшей таблицы<TABLE WIDTH="200" BORDER="1" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE>Внешний вид этой таблицы представлен на рис. 11.5.
Стоит дать некоторые пояснения, хотя если вдумчиво посмотреть на приведенный фрагмент HTML-кода, то и так все становится ясно.
Тег <TABLE> означает начало таблицы, здесь же задаются следующие параметры:
• WIDTH – ширина таблицы;
• BORDER – толщина бордюра или границы;
• CELLSPASING – расстояние между ячейками;
• CELLSPADDING – отступ от границ ячейки внутри ее.
Тег <TR> начинает новую строку таблицы, а <TD> – новую ячейку. Для обоих этих тегов допустимо применение тех же параметров, которые задаются для таблицы. Другие теги, используемые в табличном дизайне, приведены в табл. 11.2.
Таблица 11.2. Теги, применяемые при форматировании таблицИспользуя перечисленные теги в разных сочетаниях, с помощью таблиц можно придать сайту желаемый вид. Чтобы веб-ресурс выглядел еще привлекательнее, на его страницах нужно разместить рисунки.
Картинки
Современный сайт сложно представить без изображений. Не будем рассуждать об их необходимости, а сразу скажем, что для вставки картинки на веб-страницу используется тег <img src="URL">, где вместо букв URL пишется реальный адрес рисунка в Интернете. Тег вставки картинки непарный, то есть не имеет закрывающего тега. К этому тегу могут быть также применены некоторые дополнительные параметры. Например WIDTH, HEIGHT, BORDER, ALIGN могут применяться не только к элементам таблицы, но и к изображениям. Причем в этом случае они имеют то же значение и формат, что и для таблицы.
Среди дополнительных параметров назовем HSPACE и VSPACE. Они позволяют задать соответственно горизонтальный и вертикальный отступ текста от картинки, чтобы сделать страницу более привлекательной, не «слепливая» все.
Рисунок, как и текст, можно вставить внутрь гиперссылки – щелкнув на такой картинке, можно будет перейти на заданную страницу.
Также для картинки можно задать тег ALT (например, ALT="Красивая картинка">). По сути, этот тег призван заменить содержимое рисунка, если по каким-то причинам последний не может быть отображен.
Еще один тег, который можно применять не только к изображениям, но практически к любому элементу веб-страницы, – тег TITLE (например, <TITLE>TeKCT</ TITLE>). Данный параметр позволяет задать не только заголовок страницы, как уже было сказано выше, но и текст всплывающей подсказки, которая будет появляться при подведении к картинке или другому объекту указателя мыши.
В этом разделе были приведены самые общие знания, необходимые начинающему веб-дизайнеру. Читатели, которые захотят изучить язык гипертекстовой разметки глубже, могут обратиться к специальной литературе на эту тему. Возможно, кто-то уже успел испугаться некоторой сложности языка HTML и подумать: «А так ли нужен мне этот собственный сайт?». Спешу поделиться хорошей новостью. Создавать сайты можно гораздо проще, чем вручную писать весь HTML-код. Для этого существуют специальные приложения.Создание сайтов в визуальном режиме WYSIWYG
Аббревиатура WYSIWYG образована от англ. What You See Is What You Get – что в вольном переводе звучит как «Что видишь, то получишь». Это название подхода к работе, когда конечный результат сразу же виден разработчику чего-либо. В частности, на
В простейшем случае создать интернет-страничку в режиме WYSIWYG можно даже с помощью текстового процессора Microsoft Word. Однако этот способ хорош, только если не планируется выкладывать созданную страницу в Интернете, а, например, нужно использовать ее в качестве презентации чего-нибудь на локальном, то есть не подключенном к Сети, компьютере. HTML-код, полученный с помощью текстового редактора, получается довольно громоздким, что не очень приемлемо для уважающего себя интернет-ресурса. Да и ориентирован этот текстовый процессор прежде всего на подготовку традиционных, то есть бумажных, документов, а не веб-страниц.
Для создания интернет-страниц существуют специализированные среды разработки, например программа Adobe Dreamweaver компании Adobe (рис. 11.6). На примере (мы используем версию CS3, хотя это не принципиально) рассмотрим основные принципы разработки веб-документов в режиме WYSIWYG.
Рис. 11.6. Окно программы Adobe Dreamweaver CS3
Начало работы с пакетом Adobe Dreamweaver
Процесс установки пакета не требует особых навыков, поэтому подробно останавливаться на нем не будем. Следует сделать только одно замечание. Очень желательно пользоваться именно англоязычной версией пакета, так как официального русского варианта не существует, а всевозможные «самодельные» русификаторы, которые можно встретить в Интернете или в продаже на компакт-дисках, не только не помогают лучше понять программу, а, наоборот, запутывают все, так как вызывают многочисленные ошибки в ее работе. Поэтому неплохо будет, если пользователь хотя бы немного владеет английским.
После запуска программы появится меню (рис. 11.7) в котором будет предложено выбрать одно из дальнейших действий:
• Open (Открыть) – открыть готовый документ;
• Create New (Создать новый) – создать новый документ;
• Create from Samples (Создать на основе готовых шаблонов) – создать документ на основе имеющихся в программе шаблонов.
Рис. 11.7. Начало работы с программой Adobe Dreamweaver
Создадим новый пустой HTML-документ, выбрав в разделе Create New (Создать новый) пункт HTML.
Основные элементы интерфейса
Даже при беглом взгляде на рабочее окно программы Adobe Dreamweaver (рис. 11.8) можно заметить, что принципиальных отличий от множества других компьютерных программ здесь нет: та же строка меню, те же панели инструментов и т. д.
Обратим внимание на некоторые моменты. Самое большое по площади место занимает рабочее окно, в котором создаются и редактируются веб-страницы. Отдельного упоминания заслуживают кнопки переключения режимов работы: Code (Код), Split (Разделитель) и Design (Дизайн). Работать над обликом веб-страницы в рассматриваемом пакете можно в режиме дизайна, то есть видя перед собой редактируемую страницу и непосредственно воздействуя на элементы ее оформления, или в режиме ручного написания, так, как если бы пользователь писал HTML-код, например, в Блокноте. Режим дизайна включается кнопкой Design (Дизайн), а режим кода – кнопкой Code (Код). Кнопка Split (Разделитель) включает режим одновременного отображения HTML-кода и дизайна, как показано на рисунке.
Под рабочим окном расположена панель Properties (Свойства). В зависимости от того, с каким объектом в данный момент работает пользователь (таблица, рисунок, текст, гиперссылка), содержимое панели Properties (Свойства) может изменяться, отображая свойства выделенного объекта. Разумеется, эти свойства можно изменять.
Правую сторону основного окна программы занимает панель дополнительных функций и элементов управления.
Создание веб-страницы
Поскольку основная составляющая веб-страниц – это текст, то работа в Adobe Dreamweaver CS3 ничем особо не отличается от работы в текстовом редакторе. Если программа уже запущена и создан пустой HTML-документ, как было описано выше, то можно приступать к работе. Если нет – следует выполнить команду File ► New (Файл ► Новый) – откроется окно New Document (Новый документ) (рис. 11.9).
В разделе Page Type (Тип страницы) следует выбрать пункт HTML и нажать кнопку Create (Создать) – будет создана новая пустая веб-страница.
Прежде чем наполнять страницу содержимым, или, как говорят веб-дизайнеры, контентом, нужно задать некоторые ее свойства. Для этого на панели Properties (Свойства) внизу главного окна программы следует нажать кнопку Page properties (Свойства страницы) – откроется окно (рис. 11.10), в котором можно управлять всеми свойствами редактируемой веб-страницы.
В частности, можно устанавливать основной шрифт страницы, его размер, стиль и цвет; внешний вид гиперссылок; внешний вид заголовков (H1, H2, H3 и т. д.); указать название страницы, фоновый рисунок, кодировку.
Написав первые слова в режиме дизайна страницы, нужно выделить их и переключиться в режим работы с кодом (нажать кнопку Code (Код). Появится HTML-код созданной страницы, причем тот фрагмент, который выделен в режиме дизайна, в режиме кода тоже будет выделен. Если в код страницы вносятся какие-либо изменения, то они тут же будут отражены в режиме дизайна. Такой принцип работы помогает начинающему веб-дизайнеру освоить навыки работы с HTML-кодом. Впрочем, можно обойтись и без обращения к коду, а работать исключительно в режиме WYSIWYG.
Следует сохранить страницу на винчестер, а затем продолжить редактирование. При этом нужно уяснить следующие моменты.
• Для хранения всех файлов сайта нужно создать отдельную папку. При этом для полностью корректной работы лучше расположить эту папку в корневом каталоге одного из дисков и присвоить ей имя, состоящее из латинских букв, длиной не более восьми символов. Это гарантирует правильную обработку путей к файлам на этапе разработки сайта и тестирования его на локальном компьютере.
• Как правило, сайт состоит из нескольких отдельных страничек, разумеется, все они хранятся в отдельных файлах. Каждому такому файлу также присваивается имя из латинских букв, желательно не очень длинное и по возможности осмысленное (например, для странички Контакты хорошо назвать файл contacts.html).
• Файл главной страницы сайта в большинстве случаев должен называться index.html. Поэтому следует не изобретать ничего нового, а сразу так и назвать этот файл, независимо от того, будет ли сайт состоять из одной странички или из нескольких.
• Все рисунки сайта лучше поместить в одну папку, которая будет находиться в корневом каталоге веб-ресурса. Так будет удобнее организовать доступ к картинкам с разных страничек. В крайнем случае, если изображений довольно много, лучше разложить их по подпапкам общей папки, созданной специально для рисунков.
Выполнив команду File ► Save (Файл ► Сохранить), нужно присвоить файлу нужное имя и сохранить его в нужной папке.
Продолжим редактирование страницы. Добавлять элементы оформления удобно с помощью панели инструментов, расположенной над областью редактирования сайта. Точнее, даже не одной панели, а нескольких, между которыми можно переключаться. Доступны следующие панели инструментов:
• Common (Общие) – содержит общие элементы оформления, такие как ссылки, таблицы, комментарии и т. п.;
• Layout (Планировка) – включает в себя инструменты, с помощью которых можно управлять расположением тех или иных элементов на странице;
• Forms (Формы) – здесь расположены веб-формы, например текстовое поле, флажок, кнопка и другие;
• Data (Данные) и Spry (Активные) – позволяют использовать в составе страницы базы данных;
• Text (Текст) – как несложно догадаться, предназначена для работы с текстом;
• Favorites (Избранное) – может быть настроена пользователем на свой вкус путем добавления на нее тех или иных наиболее часто используемых кнопок.
Какой-либо элемент интерфейса добавляется на страницу с помощью удобного визуального редактора, где можно задать все параметры этого элемента. Если что-то было указано не так, то любые свойства, например, картинки или гиперссылки всегда можно отредактировать на панели Properties (Свойства). Также не следует забывать, что всегда можно вручную подредактировать HTML-код страницы. Таким образом, понятно, что создать веб-страницу в режиме WYSIWYG намного проще и удобнее, чем вручную писать код. Разумеется, здесь рассмотрены не все аспекты работы с WYSIWYG-редактором, однако, надеемся, основная идея читателю ясна.
Помимо такого рода приложений, есть еще некоторые идеи, позволяющие создавать качественные веб-сайты, имея лишь самые общие представления о языке HTML. К таким идеям относятся, например, CMS (от англ. Content Management System – системы управления содержимым, или, как еще говорят, контентом). Правда, использование таких систем требует знаний и навыков другого рода, понимания тонкостей настройки баз данных, прав доступа, знания языков веб-программирования и т. д. Однако это тема для отдельного разговора.
Есть, правда, еще один способ создавать сайты почти профессионального уровня, не прибегая при этом ни к ручному написанию кода, ни к WYSIWYG-редакторам, ни к CMS. О нем будет рассказано чуть ниже.