Методическое пособие 378
.pdf
сохранен, то все изменения, сделанные после последнего сохранения, будут утеряны. Чтобы этого избежать, перед изменением кодировки необходимо сохранить документ. Преобразование кодировок возможно только между кодировками одного типа. Например, изменение кодировки
Кириллица (KOI8-R) в Кириллица (Windows) будет выполнено корректно, а преобразование из Западноевропейской в Кириллицу (KOI8-R) будет некорректным.
Рис. 4. Диалоговое окно настройки параметров страницы
(категория Title/Encoding)
В диалоговом окне Preferences (рис. 4) в списке Category осталось еще несколько групп параметров, которые требуют пояснения. В категориях Highlighting и Invisible Elements собраны параметры, отвечающие за подсвечивание цветом служебных областей и важных, но невидимых тэгов на поле редактирования HTML-документов.
Параметры работы со слоями собраны в категории AP Elements, а параметры работы в режиме Layout – в категории
Layout Mode.
Настроить режим быстрого просмотра HTMLдокументов в браузере можно с помощью элементов управления, расположенных в категории Preview in Browser.
Параметры работы с инструментами управления сайтом можно настроить в категории Site (рис. 5). Изменить внешний вид строки подсказки в окне редактора можно с помощью параметров, собранных в категории Status Bar.
9
Рис. 5. Управление сайтом
Настройку параметров работы редактора Dreamweaver достаточно выполнить один раз после установки программы. А далее при редактировании HTML-документов во всех сеансах работы с программой она будет работать согласно установленным параметрам.
Создание web-узла
Для определения нового локального узла требуются следующие действия.
1.Выполните команду Site > New Site (Сайт > Создать). На экране появится диалоговое окно Site Definition (Определение сайта).
2.Editing files, Часть 1. В первой строчке впишите название сайта, во второй строчке – будущий адрес вашего сайта. Нажмите Next (далее).
3.Editing files, Часть 2. Если вы не собираетесь использовать ColdFusion, ASP.NET, ASP, JSP или PHP,
то оставьте все как есть и нажмите Next (далее).
10
4.Editing files, Часть 3. Здесь указать, где на вашем компьютере будет хранится локальная версия сайта.
5.Sharing files, Часть 1. Выбрать способ связи с сервером (например FTP), далее вписать адрес сервера (например ftp.narod.ru, набор имени в виде ftp://ftp.narod.com или narod.ru будет считаться ошибкой), в строчках login и password вписать свое имя пользователя и пароль (нужно предварительно зарегистрироваться на www.narod.ru или на другом хостинге).
6.Sharing files, Часть 2. Оставить, как есть. Нажать далее.
7.Summary. Проверить, все ли правильно, и нажать Done.
Если вы все сделали правильно, то увидите справа в панели files так называемый Site Manager (рис. 1.6), здесь несколько кнопок:
Connect - подключение к удаленному серверу
Refresh - обновление списка фалов на удаленном и локальном серверах
Get - закачка выделенного файла (каталога, группы файлов) на локальный диск
Put - противоположная операция - закачка файлов, каталогов или групп фалов на удаленный сервер (при закачке файла из подкаталога CSS или любого другого файл автоматически помещается в тот же каталог на удаленном сервере, т.е. тоже оказывается в каталоге
CSS.
Выпадающий список «Local view»:
Local view - локальная версия сайта.
Remote view - создаваемый сайт на сервере.
Map view - карта сайта.
11
Рис. 6. Site Manager
Задания
1.Откройте редактор Dreamweaver и осуществите его настойку. Установите требуемую кодировку создаваемых Web-страниц.
2.Определите рабочую папку для локального сайта и параметры удаленного доступа к серверу.
3.Создайте HTML-документ (текст с картинкой).
Не забывайте сохранять создаваемый документ в рабочую папку, задав ему имя (например, text.htm).
Контрольные вопросы
1. Каково назначение редактора Dreamweaver?
2.Что такое тэги?
3.Как настроить параметры редактора Dreamweaver?
4.Как изменить кодировку текста?
5.Как создать web-узел?
12
Практическая работа № 2
Создание и форматирование текста web-документа
Цель работы: создание web-документа.
Теоретические сведения
Для освоения web-программирования необходимо научиться создавать web-документы и управлять ими средствами операционной системы [1-4].
HTML - не язык верстки! Это средство логической разметки, и не пытайтесь располагать ваши элементы в определенных позициях и определенных местах. У вашего клиента нет размера экрана, нет размера браузера, нет цветов и нет звуковой карты. Множество качественной информации, относящейся к языку HTML, можно получить на [9, 10].
Независимо от того, как выглядит ваша страница, и какую информацию вы хотите отобразить, существует три тэга, которые в соответствии со стандартами HTML должны присутствовать на каждой странице:
<html>- Сообщает браузеру, что документ создан на
HTML;
<head>- Отмечает вводную и заголовочную части HTML-документа;
<body>- Отмечает основной текст и информацию.
Изменение цвета
Язык HTML понимает 2 вида цветовых переменных:
HEX (табл. 1) и Color (табл. 2).
В HEX-палитре числа представлены парами. Первая пара влияет на красный цвет, вторая пара чисел влияет на зеленый цвет, и третья пара – на синий (#RRGGBB). Например, #00CCFF расшифровывается так: 00 частей красного, СС частей зеленого, FF частей голубого. Каждый из знаков может быть от 0 до 9, или буквы от А до F. Таким
13
образом, вы можете синтезировать любой цвет.
|
|
|
|
|
Таблица 1 |
|
|
|
HEX-значения |
|
|
||
#110000 |
#330000 |
|
#550000 |
#990000 |
#ff0000 |
|
#001100 |
#003300 |
|
#005500 |
#009900 |
#00ff00 |
|
#000011 |
#000033 |
|
#000055 |
#000099 |
#0000ff |
|
|
|
|
|
|
Таблица 2 |
|
|
|
Color -значения |
|
|
||
red |
cyan |
|
lime |
pink |
fuchsia |
|
green |
gray |
|
maroon |
navy |
olive |
|
blue |
purple |
|
silver |
teal |
yellow |
|
Заголовки
Подобно названию страницы, заголовки должны быть краткими и полезными. Существует шесть размеров шрифта заголовков (они пронумерованы от одного до шести, причем первый номер соответствует самому крупному размеру шрифта). Нужно обозначить выделяемый текст тэгами <h1> и </h1> (<h2> </h2> … <h6> </h6>).
Процедура набора текста в HTML-документ является самой простой.
Обратите внимание на порядок следования тэгов, вложенных в другие тэги. Тэги [4] должны быть вложены друг в друга, как матрешки.
Чтобы все не смещалось, необходимо отформатировать текст. Тэг <br> нужно вставлять в месте, где нужно делать перенос строки. Тэг <dd> задает отступ от начала строки.
Например: Я умею:<br>
<dd>создавать сайты <dd>размещать их в интернете <dd>веб дизайну
<dd>веб графике
14
Для определения абзаца используйте тэги <p> и </p>. Для того чтобы сделать текст жирными используются
парные тэги <b> и </b>, курсивом <i> и </i>( b- от слова bold, т.е. жирный, i- от слова italic, т.е. курсив).
Помимо тонкой линии поперек страницы можно применить и другой тип линии, используя расширения тэга
<hr>.
<hr noshade> По умолчанию, линия отбрасывает трудно-видимую тень. Для того чтобы тени от линии не было, необходимо использовать синтаксис <hr noshade>.
<hr size="10"> По умолчанию линия имеет размер 1 пиксель. Можно его менять. Для этого необходимо вписать size=число, где число – число пикселей.
<hr width="80%"> По умолчанию линия имеет ширину равную 100%, т.е. во всю длину окна браузера. В данном случае мы изменили этот параметр на 80%, т.е. ширина линии равна не 100, а 80% занимаемой ширины окна.
<hr color="orange"> По умолчанию, линия имеет прозрачный цвет. Но из-за тени, нам кажется, что линия серая. Можно изменить цвет линии.
Все эти параметры могут сочетаться и использоваться параллельно.
Выравнивание текста
Выравнивание текста по центру позволяют сделать тэги <center>…</center>. При использовании этих тэгов заголовки или текст не будут прижаты к левому краю, они равномерно заполнят область вывода текста.
Команды для выравнивания:
<h1 align="left">Выровнять заголовок по левому краю</h1>
<h2 align="right"> Выровнять заголовок по правому краю</h2>
<h3 align="center">Выровнять заголовок по центру</h3>
15
<h4 align="justify">Выровнять заголовок равномерно</h4>
<p align="left">Выровнять абзац по левому краю</p> <p align="center">Выровнять абзац по центру</p> <p align="justify">Выровнять абзац равномерно</p>
Размер шрифта можно менять тэгами <big>…</big> и <small>…</small>.
Тэг <font> имеет дополнительные возможности для задания размера шрифта основного текста. Вместо определенного номера вы можете задать относительный размер шрифта, например +3 или –1. Браузер прибавляет (или вычитает) заданное число к номеру шрифта, используемого по умолчанию (размер 3).
Например:
<br> <font color="#0000FF" size="4"><b>Я освою Web
дизайн и создам свой сайт!</b></font>
Для вставки на страницу картинки используется тэг <img>. В качестве параметра для этого тэга, используется имя файла картинки (например, заяц.bmp, fer,gif). Вставьте тэг <img> в код страницы в то место, куда мы хотим вставить картинку:
<img src="images/sv1.gif" width="553" height="468">
Параметр src указывает имя файла-картинки, images – папку, где она находится. Параметры width="553" и height="468" – размеры (ширину и высоту) картинки в пикселях.
16
Задания
1. Создайте текстовый документ в Блокноте.
Создавая новый HTML-файл, в первую очередь необходимо ввести пару тэгов <html>….</html> Для этого наберите <html> в самом начале текста. Затем наберите его «напарника» </html> в конце. Теперь весь текст, написанный между ними, будет принят браузерам за текст HTML. Вы заметили, что во втором тэге присутствует символ "/"? Правый слэш (/) используется для обозначения закрывающихся тэгов. Большинство HTML-тэгов парные: один открывает (<html>), другой закрывает (</html>). Их действие распространяется только на тот текст, который находится между ними. Открыв в браузере эту страницу, мы ничего не увидим, пока не завершим работу над <head> и </head>.
Теперь введем тэги <head> и </head>. Они должны быть между тэгами <html> и </html>. Тэги <head> и </head> отмечают ту информацию в документе, которая будет служить названием.
Заголовок вводится между тэгами <title>…</title>
Если Вы создаете свой документ в блокноте или другом простейшем текстовом редакторе, то надо вставить строку:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Зона тэгов <body> … </body> – тело страницы, т.е. отображающаяся в браузере. То, что написано и изображено в этой зоне, увидит посетитель страницы.
Создайте в удобном для Вас месте жесткого диска новую папку, пусть она будет называться WWW. В этой папке создайте текстовый документ (блокнот).
Для этого воспользуемся текстовым редактором Блокнот. Для запуска Блокнота, используем кнопку Пуск > Все программы > Стандартные > Блокнот.
17
Пишем в него следующее (рис. 7): <html>
<head>
<title>Моя первая web страница </title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1251"> </head>
<body> Рабочая область </body> </html>
Рис. 7. Файл в блокноте
Теперь выбираем в меню Блокнота: Файл > Сохранить как и сохраняем в папку WWW файл как … .html (интернетстраницу) (рис. 8).
Рис. 8. Сохранение текста
Для просмотра созданного файла заходим в папку WWW, находим файл на диске и запускаем его. У вас запустится ваш браузер, например Internet Explorer и откроется html-страничка.
18