Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Школа Web - пошаговые инструкции для создания сайта
Школа Веб - Dreamweaver
Выпуск 9 от 2001-07-19
Школа Веб
∙ Ведущий рассылки Eris
|
Работа с текстом Работа с текстом - один из самых распространенных видов работ, которые постоянно приходится выполнять веб-мастеру. Скажем так, что стандартный HTML не оставляет много возможностей по форматированию текста - небольшой набор стандартных шрифтов, изменение его цвета, в некоторых пределах - размера, жирность, курсив, да еще пару эффектов. Это в принципе и все, чего можно добиться стандартными средствами. Несколько позже, когда будем разбирать каскадные таблицы стилей, мы чуток разнообразим возможности работы с текстом, а сейчас давайте познакомимся с основными принципами работы с ним. Прежде всего, давайте для учебных целей откроем новый проект. Это будет специальный проект, не предназначенный для публикации на сервере - он нужен только для экспериментов. Перейдите, пожалуйста к окну просмотра сайта.
Сделать это можно, например с помощью значков быстрого вызова инструментов, расположенной внизу, на строке состояния окна редактирования инструментов. Напомню, что вы не увидите всех изображенных на рисунке инструментов, если не настроите строку состояния явно. Эта процедура описана в статье о предварительной Dreamweaver. Но даже если вы этого не сделали, нужный значок (под номером 3 на рисунке) будет виден. Нажмите на него и перейдите в окно сайта, если вы еще там не находитесь. Создайте новый проект с именем Test, например, как было описано ранее. Не беспокойтесь об удаленном подсоединении к серверу - это нам не нужно. Мы пока что будем работать только в локальной директории. Теперь в поле Site окна сайта выберите вновь созданный проект. Вы получите окно сайта с абсолютно пустым проектом, в котором нет ни единого файла. Теперь наша задача создать новый файл, в который мы могли бы поместить текст. В правом окне, где располагается локальная директория будет единственная строчка, с указанием пути к вашей локальной директории. Щелкните на ней правой кнопкой мыши и выберите New Folder.Dreamweaver незамедлительно создаст новую директорию. Вы можете сразу же ввести ее имя. Наберите, к примеру text. Здесь мы будем хранить все файлы, касающиеся наших экспериментов с текстом. Шелкните мышкой в любую точку экрана, что бы изменение имени папки вступилио в силу. Если вы захотите переименовать папку или любой файл - щелкните на них правой кнопкой мыши и выберите Rename. Теперь в открытой папке создадим файл. Щелкните на папке text правой кнопкой и выберите New File. Опять же будет создан файл с именем untitled.html или untitled.htm, в зависимости от настроек. Наберите simple.hthl и нажмите Enter или щелкните мышью в какую-нибудь точку экрана. Теперь дважды щелкните на вновь созданном файле, и Dreamweaver откроет окно с этим файлом. Прежде, чем мы продолжим, давайте немного отвлечемся на предмет изучения HTML.
Взгляните на верхнюю часть окна документов. Слева есть три кнопки, позволяющие настроить вид просмотра документа (на рисунке они подчеркнуты красной линией. Нажмите среднюю из них. Окно разделится по горизонтали на 2 части. В верхней будет показан html-код вашей страницы, в нижней - ее вид, как он будет показан в броузере. На данный момент в окне будет нечто похожее на
В нижней части экрана не будет ничего. То что вы видите - стандартная схема html-документа. Кстати, если у вас не видна нумерация строк в верхней части окна - включите ее. Для этого из четырех кнопок расположенных справа вверху окна (на рисунке подчеркнуто зеленым) выберите самую крайнюю справа, щелкните на ней и выберите Line Numbers. Теперь разберемся с кодом вверху страницы. Прежде всего, слова заключенные в угловые скобки называются тегами (или тагами) и являются элементами html. Броузер из не показывает. Первые две строки означают начало html- страницы и начало ее заголовка. Третья строка - заглавие страницы. Оно будет отображено броузером в заголовке окна. Я рекомендую сразу же менять его. Для этого в поле Title (см рис 2) введите свой заголовок, например - "Форматирование текста". щелкните на любой точке окна и обратите внимание на изменения, которые произошли в строке 3. как видите, в подавляющем большинстве случаев вам не нужно редактировать html-код напрямую, все сделает программа. В строке 4 расположен так называемый мета-тег. В данном случае он означает, что тип документа text/html и он содержит символы кодовой страницы windows-1251. А как быть, если вы работате с кодировкой KOI8? Очень просто. В меню окна документа выберите Modify - Page Properties... или наберите Ctrl-J. В поле Document Encoding выберите нужную кодировку. Нажмите Ok. И посмотрите как изменилась строка 4. Кстати, кодировку по умолчанию можно выбрать с помощью меню Edit - Prefences. Выберите Fonts/Encoding и выберите нужную. Все вновь созданные странички будут создаваться именно в этой кодировке. Строка 5 содержит тег окончания заголовка, а строка 7 содержит тег начала тела документа. Все что будет находиться между <body> и </body> будет видно пользователю. Строка 10 содержит тег окончания документа. Теперь щелкните мышкой в нижней части окна, и наберите какой-нибудь текст. Обратите внимание, что этот текст появится и в верхней части окна. Вы можете просто набирать текст, не заботясь о переносах слов. Если же вам нужно закончить этот абзац и перейти к другому - нажмите Enter. Тогда новая строка начнет печататься на некотором расстоянии от предыдущей. Обратите внимание на верхнюю часть окна. Если вы переходите к печати другого обзаца, обратьте внимание, что он помещается между тегами <p> и </p>. Первый из них означает начало нового абзаца, а второй - его окончание. Теперь щелкните мышкой в верхней части окна после тега </p>. Наберите там следующую строку:
После этого щелкните в нижней части окна. Набранный вверху текст появится в виде нового абзаца. Как видите, вы можете редактировать свою страничку и набирая просто текст, и редактируя непосредственно html-код странички. Кроме того такой режим работы позволит нам быстро изучить язык html.
Теперь вызовите панель свойств объекта (кнопка 13, см. рис 1). Щелкните на введенный вами текст; панель при этом примет вид, показанный на рисунке 3. С помощью этой панели можно управлять свойствами того объекта, который в данный момент выделен. Итак разбираем возможности форматирования. Прежде всего щелкните мышкой в пределах какого-нибудь абзаца и в списке Format выберите один из вариантов - Heading 1 Это дает возможность форматировать весь абзац в качестве заголовка. Обратите внимание на теги <h1></h1>, которые появились в начале и конце абзаца. Эти теги говорят броузеру, что данный текст является заголовком. Некоторые поисковые системы строкам заголовков придают особое значение. Вы можете использовать один из шести уровней заголовков. С их помощью удобно составлять различные оглавления и тексты, соответствующие этим оглавлениям. Очень интересное значение поля Format - Preformatted. Он заключает выбранный абзац в теги <pre></pre>. Когда вы вводите текст , вы не можете управлять произвольно отступами, вводить произвольное количество пробелов - броузер все это проигнорирует, и расположит текст последовательно перенося его со строки на строку, то е сть расположит его как сам пожелает. С помощью Preformatted можно располагать текст так, как вы того пожелаете, например сделать отступ в первой строке, добавить пробелы так, что бы текст располагался в виде таблицы. Следующее поле, которое содержит на рисунку Default Font - задает имя шрифта. Я настоятельно рекомендую 2 вещи. Первое - никогда не оставляйте Default Font, если вам не все равно, каким шрифтом будет выведен текст, поскольку броузер поставит сюда то, что сам захочет. Второе - не используйте шрифты, которые не входят в стандартый список, т.е. не пользуйтесь Edit Font List... У вас будет красиво, а у пользователя, у которого нет такого шрифта, будет что , броузер придумает. Для выбора шрифта для участка текста вам вначале нужно выделить мышкой или клавишами этот текст, а затем выбрать нужный вам шрифт. Изменения будут действовать только на выделенный текст. Обратите внимание на теги <font></font>, которые появились вокруг выбранного текста. Именно они и управляют режимом отображения текста в броузере. Группа кнопок 1на рис 3 позволят вам сделать выделенный текст жирным и/или наклонным. При этом в верхнен части окна вокруг текста появятся теги <b>для жирного шрифта</b> <i>для наклонного</i>. Группа кнопок 2 позволит форматировать расположение абзаца по левому краю, по центру и по правому краю. При этом в теге <p> для данного абзаца появится параметр align.
И, наконец, группа кнопок 3. Эти кнопки создают упорядоченные списки. Вот пример нумерованного списка
Я не проставлял цифры в начале строки сам - система делала это автоматически. Сдвиг к подпунктам выполняется с помощью описанных выше кнопок сдвига. Аналогичные ненумерованный список будет выглядеть так:
И в заключение, еще несколько
слов. Можно задать текст цвета текста сразу по всему документу с помощью команды
меню Modify - Page Properties. для этого просто нужно задать цвет в поле Text.
Найти ее можно здесь. Она очень проста - набираете текст, задаете количество переходов и цвет каждого из них. В окно программа выводит html-код полученного текста. Выделите этот код и скопируйте его в ту часть окна редактирования странички, где располагается html-код. Перейдите на нижнюю часть экрана и вы увидите свой текст. Вы можете изменить его размер, сделать жирным, наклонным, расположить по центру описанными выше методами. Не меняйте только цвет:). Но если сделали что-то не так - не переживайте - нажимая несколько раз подряд Ctrl-Z можно вернуться к одному из предыдущих вариантов. А если отменили что-то важное, нажмите Ctrl-Y, и действие Ctrl-Z будет отменено. Следующая статья, посвященная Dreamwever будет рассказывать о работе с ссылками - механизмом, который позволяет связать все документы Сети в единое (и довольно запутанное :) целое. Если вы не получали предыдущих выпусков, найти вы можете в архиве рассылки или на сайте рассылки Всего наилучшего ;)
|
| http://subscribe.ru/
E-mail: ask@subscribe.ru | Отписаться | Рейтингуется SpyLog |
| В избранное | ||
