лабораторные работы Microsoft FrontPage
advertisement
ЛАБОРАТОРНАЯ РАБОТА №1
ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML
Язык HTML – это коллекция управляющих символов – дескрипторов, с помощью которых можно добавлять и
форматировать элементы документа. Для настройки внешнего вида и функционирования элемента страницы
устанавливаются его атрибуты.
Все команды языка записываются в угловых скобках <> и могут быть парными и одиночными. Парные теги
ограничивают область применения команды: открывающий тэг <Н1> и закрывающий тэг </Н1>.
HTML-документ имеет определённую структуру, которую нельзя нарушать.
<HTML>
<HEAD>
Здесь следует служебная информация для браузера
<ТIТLЕ>заголовок страницы</ТITLЕ>
</HEAD>
<BODY>
Информация, видимая в рабочей зоне окна браузера
</BODY>
</HTML>
Начало HTML- документа
Начало головной части (голова)
Текст, расположенный между этими тэгами появляется в
зоне заголовка окна браузера
Конец головной части
Начало основной части. Всё, что расположено между этими
тэгами, отображается в рабочей зоне браузера
Конец HTML- документа
Откройте Блокнот, наберите приведенный ниже код, проверьте его на ошибки и сохраните в файле с
именем 1.1.htm. Когда будете вводить имя файла в стандартном окне
сохранения, выберите Тип файла: Все файлы и пропишите имя вместе с
расширением. После этого откройте полученный файл в Webобозревателе, для чего достаточно дважды щелкнуть по нему мышью.
<HTML>
<HEAD>
<ТIТLЕ>WEB-страница</ТITLЕ>
</HEAD>
<BODY>
<Н1>Пример WEB-страницы</Н1>
<Р>Это простейшая Web-страничка, созданная в
стандартном Блокноте и отображенная в Microsoft Internet
Explorer.</P>
</BODY>
</HTML>
Теги вложены друг в друга. Величина отступа показывает уровень вложенности того или иного тега. Весь
HTML-код Web-страницы вложен внутрь парного тега <HTML>. . .</HTML>.
Откройте созданный документ в Блокноте. Выделите название фирмы Microsoft жирным шрифтом. Для этого
заключите название в тег, задающий "жирность", — <B>. . .</B>: <B>Microsoft</B>.
Программа FrontPage – редактор Web страниц с удобным интерфейсом, который позволяет использовать все
возможности языка HTML. Средствами FrontPage вы можете создать пустую страницу и заполнить ее текстом,
картинками, гиперссылками и другой полезной информацией.
Редактор Web-страниц FrontPage
1. На своём сетевом диске создайте папку, в которой будет
находиться Web-узел.
1.1. Запустите программу FrontPage: Пуск/Все программы/Microsoft
Office/ Microsoft Office FrontPage.
1.2. Справа на панели Приступая к работе в разделе Открыть выбрать
Создать страницу или узел…
1.3. Справа на панели «Создание» выберите Одностраничный Webузел. В появившемся окне
«Шаблоны
Web-узлов»
выберите
Одностраничный
Web-узел.
1.4. Нажмите кнопку Обзор и задайте
путь к папке, в которой будет
находиться Web-узел, нажмите ОК.
1.5. В появившемся окне будут
представлены две папки _private и
images и первая страница – index.
Все страницы, входящие в Web-узел,
хранятся в папке _private, а все
рисунки, которые будут вставляться,
на страницы – в папке images.
2. Настройка кодировки страницы
Откройте страницу index.htm и настройте кодировку. Для этого выполните команду ФайлСвойства, в окне
Свойства страницы выберите вкладку Язык и задайте параметры в соответствии с приведенным ниже рисунком,
ОК.
Настройку кодировки необходимо выполнять для каждой вновь создаваемой страницы сайта для ее
корректного отображения в браузере.
3. Создание титульной страницы сайта - Index
Внизу страницы на панели расположены кнопки, изменяющие режим работы со страницей. Последующая
работа будет проводится в режиме «Код».
3.1. В блок <HEAD> после команды
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">, задающей браузеру
информацию о кодировке написания HTML- документа, вставьте название страницы Создание сайта. Наберите с
клавиатуры угловую скобку < и выберите название тега ТIТLЕ из раскрывающегося списка и закройте скобку.
Закрывающий тэг будет сформирован автоматически.
3.2. В части <BODY>…</BODY> наберите следующий текст:
Работа с текстом
Тэги форматирования текста
Для того, чтобы разбить текст на абзацы, используют специальные тэги, обозначающие начало и конец
абзаца и создающие межабзацный промежуток.
По умолчанию абзацы выравниваются по левому краю. Требуемое выравнивание задаётся специальными
параметрами.
Значение CENTER – центрирование всех строк абзаца, в том числе при наличии принудительного разрыва
строки.
Значение RIGHT – выравнивание по правому краю.
Значение LEFT – выравнивание по левому краю (так же, как по умолчанию).
Значение JUSTIFY позволяет обеспечить выравнивание текста одновременно и по левому, и по правому краю,
но в старых версиях браузеров воспринимается как выравнивание только по левому краю.
Просмотрите страницу в конструкторе.
3.3. Добавьте форматирование, используя функцию быстрого выбора тэгов. В начале каждого абзаца
добавьте тэг <Р>, а в конце - </Р>.
3.4. Определите центрирование текста в абзацах в зависимости от содержания текста. В тэг <Р> второго
абзаца добавьте указание центрирования по центру <Р
ALIGN=CENTER>, выбирая значения из раскрывающегося
списка. Аналогично определите центрирование для
остальных абзацев согласно текста.
4. Заголовки и подзаголовки. Чтобы объявить
выбранный абзац заголовком или подзаголовком, задав
более крупный и жирный шрифт, достаточно заключить
выбранный абзац в контейнер <Н*></Н*>, поставив
вместо звёздочки цифру от 1 (наибольший размер) до 6
(наименьший размер).
4.1. Сделайте предложение «Работа с текстом»
основным заголовком, а второй абзац – подзаголовком.
4.2. Определите расположение заголовков по центру, добавив в тэг заголовка указание <Н1
ALIGN=CENTER>.
4.3. Посмотрите результаты форматирования, перейдя в режим « Просмотр».
5. Изменение параметров шрифта: вид (гарнитура), размер символов, цвет. Управление
отображением произвольного фрагмента текста (части абзаца, целого абзаца или нескольких абзацев)
производится при помощи контейнера <FONT > . . . </ FONT >. Название шрифта задаётся параметром
FACE=«название шрифта». Не все браузеры читают тексты одинаково, поэтому надёжнее задавать несколько
вариантов, например <FONT FACE=“Arial Cyr, Arial” >.
Уменьшение или увеличение размера шрифта на
несколько единиц определяется значением параметра SIZE:
<FONT SIZE=. . . >, где вместо многоточия вписывается цифра от
1 до 7 (по умолчанию 3). Размер шрифта можно задать,
используя знаки «+» или «-» и указав на сколько единиц,
например <FONT SIZE=-2 >.
Чтобы установить желаемый цвет текста используется
параметр
COLOR=«цвет»,
значением
которого
является
словесное обозначение цвета (red, yellow, blue и пр.) либо
специальный код (OOOOFF, FFFFOO, FFOOOO и пр.)
Жирный шрифт задаётся контейнером <B>. . . </B>, а
курсив контейнером <I>. . .</I>
1. Измените начертание шрифта: для заголовка используйте шрифт Verdana, курсив, синего цвета. Для
подзаголовка установите шрифт Monotype Corsiva. Размер и цвет выберите сами.
2. В первом абзаце установите размер шрифта +1, Times New Roman.
3. Установите для второго абзаца: шрифт, размер +6, цвет красный.
4. Измените оформление остальных абзацев.
6. Отлиновки – это горизонтальные линии заданной длины и толщины, служащие для отделения одной
части текста от другой. Для создания отлиновок служит тэг <НR>. Его параметры: ALIGN (LEFT, RIGHT, CENTER)
определяет выравнивание на странице; SIZE определяет толщину линии в пикселях; WIDTH определяет ширину
(длину) в пикселях или процентах от ширины страницы.
<h2 align=center>Примеры отлиновок</h2>
<hr size=2 width=80% align=center>
<p align=center><font face="Wingdings">й</font>
Простая отлиновка толщиной 2 пикселя</p>
<hr size=20 width=20% align=center>
<p align=center><font face="Wingdings">й</font>
Толстая и короткая линия</p>
<hr size=20 width=20% color=#FF0000 noshade align=center>
<p align=center><font face="Wingdings">й</font>
Толстая и короткая линия красного цвета</p>
<hr size=30 width=30 color=#000000 noshade align=center>
<p align=center><font face="Wingdings">й</font>
Чёрный квадрат 30х30 пикселей</p>
Лабораторная работа №2
Создание многостраничного узла. Заготовка страницы. Использование фона.
Как правило, все страницы сайта объединены не только общей тематикой, но и общим оформлением.
Чтобы не создавать оформление каждый раз заново, используют заготовку страницы, в которой определяют
место навигационной панели, фон, способы размещения материала.
1. Создание навигационной панели. Создайте новую страницу: Тюмень.
1.1. Выберите команду меню Файл/Создать или нажмите кнопку Создать на панели инструментов.
Сохраните страницу в папку _private, присвоив ей имя, записанное латинскими буквами.
1.2. Цвет фона и шрифта для всего документа можно задать при помощи атрибутов bgcolor и text тега
<body>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Мой родной город</title>
</head>
<body bgcolor=#FFFFCC text=#0000FF >
</body>
</html>
1.3. Создадим горизонтальное меню, которое будет повторяться на всех страницах. От основного текста
отделим меню отлиновками <HR>. Для того, чтобы слова в меню отделялись друг от друга, вставим
неразрывный пробел &nbsp (можно вставить несколько пробелов). Выровнять по центру можно не только
отдельный абзац или заголовок, но и группу элеметов, если разместить их описание внутри блока
<CENTER>…</CENTER>
<HR size=5 width=70%>
<CENTER>
<i>
<NOBR>
<FONT size=4>
На первую страницу &nbsp&nbsp
Тюмень &nbsp&nbsp
История &nbsp&nbsp
Город сегодня &nbsp&nbsp
Некоторые даты
</FONT>
</NOBR>
</i>
</CENTER>
<HR>
1.4. Создайте страницы История, Город сегодня и Некоторые даты, скопировав страницу Тюмень в
папку _private. Переименуйте копии страниц, присвоив им соответствующие имена.
1.5. Откройте страницу Тюмень и заполните её следующим образом:
Title: Тюмень
Заголовок: Тюмень – сибирская столица
Подзаголовок: автор сайта (указать собственные данные, оформить курсивом)
2. Маркированные и нумерованные списки
Маркированные списки создаются при помощи контейнера <UL>…</UL>, нумерованные – при помощи
контейнера <OL>…</OL>, где открывающий и закрывающий теги указывают браузеру начало и конец блока
строк, являющихся пунктами списка. Сами же эти пункты предваряются каждый своим тегом <LI>, аналогичны им
контейнеры <DIR>…</DIR> и <MENU>…</MENU>, воспроизведение содержимого которых отличается от
<UL>…</UL> в некоторых деталях, но в целом они дублируют последние и поэтому используются редко.
Для тега <UL> предусмотрен параметр TYPE, определяющий вид символа-маркера: disk – «жирная точка»,
circle – не закрашенный кружок, sguare – маленький чёрный квадрат.
Для тега <OL> предусмотрены два параметра, определяющие способ нумерации пунктов:
TYPE=1
(арабские цифры), TYPE=I (римские цифры), TYPE=А (латинские заглавные буквы) и т.д. Значение параметра
START указывает с какого номера начинается нумерация (по умолчанию начинается с 1). Для нумерованных
списков также можно указывать в составе тэга <LI> для каждого отдельного пункта другой способ нумерации.
Контейнеры <UL>…</UL> и <OL>…<OL/> могут комбинироваться.
2.1. Создайте оглавление, используя нумерованный список:
1. История
2. Город сегодня
3. Некоторые даты
Оглавление задаётся нумерованным списком:
<ol start=1 type=1>
<li>История
<li>Город сегодня
<li>Некоторые даты
</ol>
2.2. Порядок размещения материала на странице: заголовки выровнены по центру страницы, нумерованный
список по левому краю.
3. Оформление страниц.
3.1. Структура страницы История: Title и Заголовок: История .
Текст: разбить текст на абзацы и
выровнять по ширине.
3.2. Структура страницы Город сегодня: Title и Заголовок: Город сегодня .
3.3. На страницу Некоторые даты поместите текст, который удобно представить в таблице.
Title
Некоторые даты. Заголовок: Некоторые даты из истории города
Лабораторная работа №3
1. Создание таблиц.
Таблица, размещённая на Интернет-странице, может содержать практически любую информацию: фрагмент
текста, рисунок, комбинацию текста и рисунка (с заданным обтеканием), ссылки на другие страницы и пр.,
включая и вложенные другие таблицы. В HTML-документе таблице соответствует структура вложенных друг в
друга контейнеров:
<table>
начало контейнера таблицы
<tr>
начало контейнера первой строки таблицы
<td>
начало контейнера первой ячейки первой строки
</td>
конец контейнера первой ячейки первой строки
<td>
начало контейнера второй ячейки первой строки
</td>
конец контейнера второй ячейки первой строки
<td>
начало контейнера третьей ячейки первой строки
</td>
конец контейнера третьей ячейки первой строки
</tr>
конец контейнера первой строки таблицы
<tr>
начало контейнера второй строки таблицы
<td>
начало контейнера первой ячейки второй строки
</td>.
конец контейнера первой ячейки второй строки
…..
далее аналогично
</tr>
конец контейнера последней строки таблицы
</table>
конец контейнера таблицы
Контейнер <tr>…</tr> кроме всего прочего указывает браузеру ширину таблицы (количество ячеек по
горизонтали). Наличие всей указанной в таблице иерархии контейнеров обязательно независимо от размеров
таблицы. Например, если Вы хотите разместить таблицу всего из одной ячейки, то содержимое этой ячейки всё
равно придётся заключать последовательно в контейнеры <table><tr><td>…</td></tr></table>.
Дополнительно самый внешний контейнер <table>…</table> может быть заключён в контейнер
<p>…</p>, чтобы с помощью параметра align открывающего тега <p> обеспечить центрирование таблицы на,
странице или её выравнивание к правому краю (по умолчанию таблица выравнивается влево).
Если, в таблице есть строки, содержащие неполное количество ячеек, то пустые ячейки автоматически
«подгоняются» к левому краю.
Параметры тэга <table>
BORDER – толщина разлиновки таблицы в пикселях или нуль, если разлиновку необходимо отключить
(таблицы с невидимой разлиновкой – наиболее удобный способ размещения текста и графики, а также
многоколонной вёрстки). Если параметр BORDER отсутствует, то разлиновка также отключена.
WIDTH – ширина таблицы (может указываться в пикселях или в процентах от ширины всей Интернетстраницы, тогда после числового значения записывается знак «%»). Если содержимое таблицы требует большего
размера, чем это указано в параметре WIDTH, то его значение игнорируется
CELLPADDING и CELLSPACING – отступ в пикселях содержимого ячеек от их границ (по умолчанию равен 1
пикселю)
BGCOLOR – цвет фона таблицы (здесь и в остальных тегах только для Internet Explorer)
Параметры для тэга <tr>
ALIGN – горизонтальное выравнивания для всех ячеек строки в право, в лево или по центру
VALIGN – определяет вертикальное выравнивание содержимого всех ячеек строки: TOP – по верху ячеек,
BOTTOM – по низу, CENTER – по центру
BGCOLOR – определяет цвет фона только для ячеек данной строки
Параметры тега <td>
WIDTH – ширина ячей таблицы (в пикселях или в процентах, относительно ширины всей таблицы).
Важным является указание ширины ячеек только в первой строке таблицы. Ширина остальных
устанавливается автоматически, даже если для них устанавливается иное значение параметра WIDTH
ALIGN – горизонтальное выравнивание содержимого только одной ячейки
VALIGN – вертикальное выравнивание содержимого только одной ячейки
BGCOLOR – определяет цвет фона для данной ячейки
BACKGROUND – позволяет задать отдельное фоновое изображение для данной ячейки
NOWRAP – отключение автопереноса текстовых строк в пределах ячейки
COLSPAN и ROWSPAN – объединение нескольких ячеек в одну по горизонтали и вертикали соответственно
1.1. Откройте страницу Некоторые даты и вставьте следующий пример кода, показывающий возможности
объединение ячеек:
<p аlign=сenter>
<tаble bordеr=3>
<tr аlign=cеnter>
<td ссоlspan=4>Вся строка как одна
ячейка</td></tr>
<tr align=center>
<td>Отдельная ячейка</td>
<td>Отдельная ячейка</td>
<td>Отдельная ячейка</td>
<td>Отдельная ячейка</td></tr>
<tr align=center>
<td соlspan=2 rowspan=2>Ячейка 2х2</td>
<td соlspan=2>Две ячейки по ширине</td></tr>
<tr align=center>
<td>Отдельная ячейка</td>
<td rowspan=2>Две ячейки по высоте</td></tr>
<tr align=center>
<td>Отдельная ячейка</td>
<td>Отдельная ячейка</td>
<td>Отдельная ячейка</td>
</tr>
</tаble>
</p>
1.2. Самостоятельная работа: оформите текст, содержащий даты, как таблицу: в первой строке –
заголовок. Вторая и последующие строки разбиты на три столбца: год, месяц, событие.
Лабораторная работа №4
Ссылки. Кнопки
Именно ссылки стали основой создания WWW. Если бы с одной страницы нельзя было свободно перейти на
другую с помощью одного щелчка мыши, WWW не завоевал бы такую популярность.
За ссылки отвечает один тэг - <A>. В тэге указывается обязательный атрибут HREF, который обозначает
адрес, куда ведёт ссылка. Затем пишется название ссылки, затем тэг закрывается.
Например:
<A HREF=” gorod.html”>Мой город</A>
Как видно, слова «Мой город» - это ссылка на файл gorod.html, который находится в одном каталоге с тем
файлом, из которого сделана ссылка.
Адрес может быть относительным и абсолютным. Относительный адрес показывает, где находится файл
относительно текущего файла. Пример относительного адреса – в предыдущем абзаце. А если бы мы хотели дать
ссылку на файл director.html, который находится в каталоге admin, являющимся подкаталогом текущего, значение
атрибута HREF было бы таким: “admin/director.html”. Если же наоборот, нужно дать ссылку на файл page17.html в
родительском каталоге, надо написать “../page17.html”, так как две точки – это символ родительского каталога. В
абсолютном адресе расположение файла указывается целиком: “http://www.school10.ru/main/administr/
director/belonogina.html” . Относительная форма удобна, если файл находится на том же сервере и в той же папке,
что и текущий. Абсолютные адреса применяются, если необходимо сослаться на другой ресурс.
Чтобы сделать ссылку на адрес электронной почты, в значении атрибута HREF указывается адрес с
префиксом “mailto:”, примерно так:
<A HREF=”mailto:name@server.ru”>Написать письмо</A>
1. Создание ссылок, объединяющих страницы узла.
1.1. Откройте страницу Тюмень в режиме кода и добавьте к заголовкам меню ссылки на соответствующие
страницы. Адреса страниц выбираются Выбрать адрес URL…
<a href=../index.htm>На первую страницу</a> &nbsp&nbsp
Тюмень &nbsp&nbsp
<a href=history.htm>История</a>&nbsp&nbsp
<a href=gorod_segodnya.htm>Город сегодня</a>&nbsp&nbsp
<a href=nekototie_daty.htm>Некоторые даты</a>
1.2. Аналогично скорректируйте меню на всех страницах. Название страницы, на которой находитесь в
данный момент, оставьте без ссылки, например, Тюмень &nbsp&nbsp.
2. Создание кнопок
Панель навигации, как правило, состоит из кнопок, с помощью
которых осуществляется переход по страницам. В программе FrontPage уже
существуют шаблоны кнопок. Необходимо только задать текст для кнопки и
ее размеры. Продублируйте горизонтальное меню кнопками, расположив их
по правому краю страницы.
2.1. В режиме Конструктор
выполните
команду
Вставка/Меняющаяся кнопка
2. В появившемся окне на вкладке
Кнопка выберите шаблон кнопки. В
окне Текст введите текст, который
должен быть на кнопке (например,
«Город», «История», «Город сегодня» и
пр.). Нажав на кнопку Обзор…,
выберите на какую страницу будет ссылаться кнопка.
2.1. Перейдите на вкладку Шрифт.
2.2. Задайте параметры шрифта для надписи на кнопке.
2.3. Задать цвет шрифта для кнопки: Исходный цвет:, Цвет при наведении: и
Цвет при нажатии:.
2.4. Перейдите на вкладку Рисунок и задайте
размеры кнопки таким образом,
чтобы название кнопки поместилось на рисунке
кнопки.
2.5. Поставить переключатель в
положение Использовать для
кнопки формат Gif и прозрачный фон
и нажмите ОК. Кнопка должна
появиться на экране.
2.6.
Выполните
процедуру
сохранения файла. Для этого
нажмите на значок
на Панели
инструментов. Должно появиться
окно
3. Сохранение внедренных
документов.
3.1. Укажите папку в
которой должны храниться рисунки. Как правило, это папка с именем Image. Для этого необходимо нажать на
кнопку Сменить папку… и указать адрес своего Web-узла, папку Image и нажать ОК.
Эта процедура повторяется для каждой кнопки.
После того как сделана панель навигации на главной странице index.htm, необходимо продублировать ее на
другие страницы сайта.
Лабораторная работа №5
Оптимизация графики для WEB-страниц
В программе Photoshop имеются удобные средства оптимизации (получение файла с графическим
изображением возможно меньшего объема при достаточно высоком качестве) параметров файлов для их
последующего использования в Web-дизайне. Качество изображения
определяется субъективно, на глаз, а вот объем файла — вполне
объективная характеристика, определяющая занимаемое место на диске и
влияющая на скорость передачи по линии связи и загрузки в Webбраузер.
Откройте в программе Photoshop любой файл с фотографией
города из папки «Фото».
1. Все фото имеют достаточно большие размеры. Поэтому для
начала размеры надо уменьшить.
1.1. В меню Изображение откройте Размер изображения.
1.2. В открывшемся окне укажите новые размеры изображения:
ширина 300 пикселей, высота 400 пикселей.
1.3. Нажмите ОК. Изображение уменьшилось без потери качества.
2. Сохранение изображения для WEB. В Photoshop система оптимизации графики для Web вызывается
командой Файл>Сохранить для Web. Открывается окно, в котором имеются 4 вкладки, определяющие, каким
образом должна отображаться картинка при предварительном просмотре. По умолчанию выбирается режим
Optimized (Оптимизированное), при котором показывается только один результат оптимизации. Чтобы
просмотреть исходное изображение, перейдите на вкладку Original (Исходное). Для просмотра одновременно
исходного и оптимизированного изображений перейдите на вкладку 2-Up. Вкладка 4-Up покажет исходное
изображение и 3 варианта его оптимизации. Внизу
каждого окна с вариантом указан объем файла, время
его передачи и другие характеристики, позволяющие
выбрать наилучший из них.
2.1.
Щелкните
на
выбранном
варианте
оптимизации. При этом окно предварительного
просмотра выделится рамкой, а в правой части окна
отобразятся его текущие параметры, которые можно
изменить.
2.2. Задайте необходимые значения параметров в
правой части окна. Набор доступных параметров
зависит
от
выбранного
формата
файла
(раскрывающийся список в первом левом окошке).
Можно выбрать следующие форматы: GIF, JPEG, PNG-8
и PNG-24. Два варианта PNG отличаются глубиной
цвета (8 и 24 бит, т. е. 256 и 16 млн цветов).
Как только вы измените значение какого-нибудь
параметра, Photoshop сразу же отразит эти изменения и
окне предварительного просмотра. Чтобы сравнить несколько групп значений параметров, щелкните на другом
окне предварительного просмотра и задайте нужные значения параметров. Вы можете сравнить различные
наборы значений параметров для одного и того же формата файла, а также для различных форматов.
2.3. Щелкните на наиболее подходящем варианте (выделите его), затем щелкните на кнопке ОК или
нажмите клавишу <Enter>. Откроется диалоговое окно Save Optimized As (Сохранить оптимизированное как). В
этом окне можно указать имя файла, а также тип. Под типом здесь понимается не формат файла (он уже был
указан ранее), а информация о том, что именно следует сохранить: только изображение (Images Only), только
HTML-документ (HTML Only) или и то, и другое (HTML and Images).
Меню предварительного просмотра
В верхней части окна оптимизации, справа от вкладки 4-Up, щёлкните по
круглой кнопке со стрелкой, открывающей меню предварительного просмотра
(Preview). Пункты в этом меню разделены на три группы:
Browser Dither позволяет просмотреть, как будет выглядеть изображение на
мониторе, который поддерживает только 8-битную глубину цвета (т. е. 256 цветов).
Color Compensation позволяют увидеть, как будет выглядеть изображение в
зависимости от особенностей типов мониторов и операционных систем. По умолчанию
используется Uncompensated Color (Некомпенсированный Цвет), при котором Photoshop не пытается определить,
как будет выглядеть изображение в различных операционных системах. Для показа изображения с учетом
операционной системы выберите пункт Standart Windows Color или Standart Mackintosh Color. Пункт Photoshop
Compensation позволяет увидеть изображение в установленной на вашем компьютере версии Photoshop.
Download Rate позволяют задать скорость передачи данных по линии связи (например, модемного
соединения с поставщиком Интернет-услуг), чтобы оценить скорость передачи и загрузки в Web-браузер
графического файла.
Меню оптимизации
Справа от раскрывающегося списка Preset находится круглая кнопка со стрелкой. Щелчок на ней открывает
меню оптимизации (Optimization), которое содержит следующие команды:
Save Settings (Сохранить настройки). Позволяет сохранить текущие значения параметров оптимизации,
чтобы потом выбрать их в раскрывающемся списке Settings. Каждому сохраняемому набору значений параметров
присваивается имя, что очень удобно.
Delete Settings (Удалить настройки). Удаляет текущий набор значений параметров оптимизации.
Optimize to File Size (Оптимизировать по размеру файла). Если вы не расположены к экпериментам с
значениями параметров, то выберите эту команду. Откроется диалоговое окно, в котором вы можете указать
предполагаемый размер файла (Disired File Size), следует ли использовать текущий формат (переключатель
Current Settings) или разрешить Photoshop самому изменить значения параметров (переключатель Auto Select
GIF/JPEG).
Repopulate Views (Обновить представления). Как уже отмечалось, на вкладке 4-Up Photoshop создает
три варианта оптимизированного изображения. Первый вариант оптимизирован в соответствии с
заданными вами параметрами. Два других варианта соответствуют параметрам, обеспечивающим
меньший размер файла. Если вы измените значения параметров оптимизации для первого варианта, то
можете обновить сразу оба дополнительных варианта, выбрав команду Repopulate Views (Обновить
представления).
После всех изменений сохраните файл в папку Images своего WEB-узла, щелкнув на кнопке Save (Сохранить).
3. Вставка изображений. Чтобы поместить иллюстрацию на страницу, нужно в соответствующем месте
вставить тег <img …… >, где вместо многоточия записываются адрес и имя файла, содержащего рисунок. На
случай, если браузер не позвлдяет просматривать графику, добавляется параметр alt=[текст комментария],
который в подобной ситуации будет выводить текстовую строку вместо рисунка (или при наведении курсора на
рисунок).
Расположение рисунка на странице определяется параметром align.
Первый способ: вставка картинки отдельно между абзацами. Для этого тег <img> заключают в
контейнер<р align=…> </р>.
Второй спосо: выполнение оборки (обтекания) рисунка текстом. Для этого параметр align включается в
состав тега <img>. Например, <img srс= images/DSN4444.jpg align= left>.
Управление размерами рисунка (независимо от реальных) осуществляется с помощью параметров width
=[ширина] height=[высота]. Эти атрибуты задают ширину и высоту прямоугольника на экране, в котором
выводится картинка. Размеры можно указывать в пикселах или процентах от ширины страницы. Например, width
=250 (250 пикселей) или width =20% (20% от ширины экрана). Если атрибуты не заданы, картинка рисуется в
реальных размерах. Если размеры прямоугольника не будут пропорциональны реальным размерам картинки –
картинка будет искажена, т.к. браузер масштабирует рисунок соответственно заданным размерам. Если размеры
вывода рисунка на экран не указывать, то в момент прихода картинки из сети на экране произойдёт
«перетряска»: не зная размеров изображения, браузер оставляет под него на экране стандартный прямоугольник,
продолжая строить остальные элементы. После загрузки картинки браузеру придутся полностью перестроить
экран. Если рисунок не отредактирован в графическом редакторе, можно воспользоваться атрибутами width и
height, но!!! При прочтении в браузере рисунок может быть сильно деформирован. Поэтому, без
соответствующей подготовки в графическом редакторе, помещать рисунок на WEB- страницу не рекомендуется.
4. Самостоятельная работа.
4.1. Вставьте две-четыре фотографии из папки Фото, предварительно скопировав их в папку images .
4.2. Из фала gorod.txt. подберите надписи к фотографиям.
4.3. Порядок размещения: фотографии и надписи к ним разместите произвольно (в качестве основы для
размещения можно использовать таблицу).
4.5. Добавьте к фотографиям альтернативный текст.
Лабораторная работа №6
1. Бегущая строка.
Эффект бегущей строки обеспечивается контейнером тега <marquee></marquee>. Поместите между
открывающим и закрывающим тегами текст: Бегущая строка может использоваться для выведения рекламной или
новостной информации.
Для форматирования текста укажите необходимые параметры (атрибуты) тега <marquee>:
BGCOLOR= фоновый цвет «плашки», на которой выводится «бегущая строка»;
WIDTH И HEIGHT – соответственно, ширина и высота «плашки» в пикселях ил процентах от ширины окна
браузера (как для таблиц). Если заданная высота недостаточна для данного содержимого, она будет
автоматически увеличена до нужной;
LOOP – определяет количество повторений «прокручивания» заданного содержимого. Указывается целое
число от 1 и более или значение infinite (непрерывное повторение);
SCROLLAMOUNT и SCROLLDELAY – определяют скорость прокручивания: первый указывает число
пикселей, на которое происходит смещение при каждом шаге прокрутки (чем меньше число, тем плавнее
движение), второй – задаёт задержку между шагами.
BEHAVIOR – основной параметр, определяющий «поведение» строки
При значении scroll строка появляется из-за одного края «плашки» и скрывается за другим,
оставляя «плашку» пустой;
При значении slide
движение строки производится аналогично, но по достижении
противоположного края строка не уходит за него, а просто исчезает. После
окончания заданного числа повторов, строка остаётся на экране.
При значении alternate строка начинает движение от одного края «плашки» (не выползает,
а изначально видна), доходит до другого и бежит обратно.
DIRECTION – указывает направление прокрутки при BEHAVIOR=scroll или BEHAVIOR=slide, а также
первоначальное направление при BEHAVIOR=alternate (слева направо right и справа налево left)
Вставьте и оформите бегущую строку.
2. Альтернативный текст.
Если браузер не позволяет просматривать графику (или просмотр графики отключен) используют
альтернативный текст, который указывает, что изображено на картинке.
Откройте страницу, на которой расположены фотографии и надписи к ним. Добавьте ко всем рисункам
альтернативный текст, определяемый атрибутом ALT=. Например:
<img src=../images/DSCN4444.jpg" alt="Памятник школьникам, не вернувшимся с войны">
3. Стили. Каскадные таблицы стилей.
3.1. Создание стиля в отдельном файле. Создайте новую страничку. Очистите содержимое и вместо
стандартных тегов внесите следующую информацию:
BODY {bgcolor: #FFFFCC; text: #000099; font-family: Arial, sans-serif; font-size: 16pt}
h1 {font-size:32pt; color:#990099;}
h2 {font-size:20pt; color:990099;}
h3 {font-size:16pt; color:#990099;}
p {align: justify; text-indent: 20px; font-size: 14pt; color: #CC3399 bgcolor=#FFFFCC text=#000099}
a:hover { color: #0000FF; }
a:link { color: #0066FF;}
В данной таблице описывается цвет фона (bgcolor), написание и размер шрифта, размер и цвет заголовков
1, 2, и 3 уровней в BODY; размер и цвет шрифта в абзацах; цвет ссылок при наведении курсора мыши и после
использования.
3.2. Сохраните страницу под именем stile.css.
3.4. Чтобы данный стиль читался браузером для страниц, на них надо добавить соответствующую ссылку.
Откройте страницу Город и перед закрывающим тегом </head> вставьте ссылку на стилевой файл:
<link rel="stylesheet" type="text/css" href=stile.css>
</head>
3.5. Уберите все обозначения стиля, касающиеся фона страницы, написания текста в абзаце, написания
заголовков 1, 2 и 3 уровней. Иначе браузер будет читать стиль элемента, а не стиль, обозначенный в отдельном
файле.
Лабораторная работа №7
1. Создание фреймовой структуры
Создание фреймов подразумевает создание нескольких независимых информационных документов,
загружаемых каждый в свой фрейм, и создание специального файла, определяющего структуру фреймов.
Преимущества фреймов:
1. каждый фрейм обрабатывается браузером отдельно, что даёт возможность сделать часть информации
постоянно видимой в окне браузера;
2. возможность управления одним фреймом из других, что применяется при создании меню, заголовков и
других элементов, которые должны постоянно присутствовать на странице.
Недостатки:
1. не все браузеры поддерживают фреймовые структуры;
2. фреймы сокращают полезное пространство страницы.
Создадим фреймовый документ по эскизу:
Заголовок сайта /раздела (фрейм 1)
Меню
разделов
сайта
(фрейм 2)
Информационная часть
(фрейм 3)
Каждый фрейм – это отдельный HTML-документ. Web-страницы, загружаемые во фрейм представляют
собой обычные HTML-документы.
1. Для фрейма 1 создадим документ zagolovok.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>фрейм 1</title>
</head>
<body>
<p align=center><h1>Заголовок в первом фрейме</h1>
</body>
</html>
2. Во втором фрейме расположим меню. Нtml-документ (сохраните его под именем menu.htm),
содержащий меню, может выглядеть в виде нумерованного списка (как в примере) или содержать меняющиеся
кнопки:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>фрейм 2</title>
</head>
<body>
<p align=left>
<ol>
<li>Город
<li>История
<li>Город сегодня
</ol>
</p>
</body>
</html>
3. В третий фрейм будут загружаться страницы, созданные на предыдущих занятиях.
4. Разметка основной страницы.
4.1.
Создайте новую страницу. Структура фреймов определяется с помощью тэга <frameset>,
который является контейнером для тэгов, определяющих фреймы - <frame>. Тэг <frameset>
имеет два важных атрибута:
rows – определяет количество горизонтальных фреймов (строк)
cois – определяет количество вертикальных фреймов (столбцов)
4.2.
Измените код страницы следующим образом (то, что в круглых скобках писать не надо – это
поясняющий текст):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фреймовая структура</title>
</head>
<frameset rows="100" frameborder=1 framespacing=4 noresize scrolling=no>
(первая строка)
<frameset cols="150,*" frameborder=1 framespacing=4> (первый столбец второй строки)
<frame name="leftFrame" noresize scrolling="no" src="_private/menu.htm" target="startFrame">
<frame name="startFrame" src="_private/gorod.htm" target="_self">
</frameset>
</frameset>
</html>
В результате при загрузке этого файла в браузере страница должна выглядеть следующим образом:
5. Основные атрибуты фреймов
scrolling – определяет присутствие полосы прокрутки
name= “название фрейма”
src= “URL” = адрес страницы, которая будет показываться в данном фрейме
frameborder – определяет показ границ фрейма и может принимать значение 1 (границы
показаны) или 0 (границы отсутствуют)
framespacing - определяет ширину границы между фреймами
target= - определяет в каком окне гиперссылка должна открыть связанный документ
6. Установка связи между страницами. Откройте файл menu.html и добавьте гиперссылки:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
<base target="startFrame">
</head>
<body>
<p align=left>
<ol>
<li><a href=gorod.htm>Город</a>
<li><a href=history.htm>История</a>
<li><a href="gorod cegodnia.htm">Город сегодня</a>
</ol>
</p>
</body>
Лабораторная работа №8
1. Создание Web-страниц на основе шаблонов
Для создания Web-страницы на основе шаблона откройте диалоговое окно Создание страницы командой
меню Файл /Создать/Страница.
Внимание! При щелчке на кнопке Создать панели
инструментов создается новая Web-страница по умолчанию.
Для создания страницы на основе шаблона используется
команда Файл/Создать/Другие шаблоны страниц.
Существует три типа Web-страниц, представленных в
окне Шаблоны страниц:
1. На вкладке Общие предлагаются варианты Webстраниц по различной тематике.
2. Вкладка Страница рамок предлагает оформление с
помощью фреймов - структурных элементов, используемых для
одновременного отображения нескольких Web-страниц на
экране.
3. Вкладка Таблицы стилей предлагает шаблоны
стилей Web-документа. Вставив выбранный шаблон в Webузел, можно поменять оформление всех страниц, добавив в них перед закрывающим тегом </head> ссылку на
стилевой файл:
<link rel="stylesheet" type="text/css" href=(имя вставленной стилевой страницы).css>
</head>
Выберите подходящий шаблон, и вставьте его в Web-узел, щелкнув на кнопке ОК. Добавить задачу для
создания и последующего редактирования страницы, о чем вам будет напоминать новая запись в списке задач.
Добавление задач особенно полезно в том случае, если вы строите "скелет" Web-узла и собираетесь создавать
сразу несколько страниц.
Для заполнения нескольких похожих страниц просто добавьте новые страницы, используя тот же шаблон.
Web-страница, основанная на шаблоне, не только имеет разметку структуры, но и содержит рекомендации,
какую информацию следует поместить на странице.
Аналогично создайте новый Web-узел, используя готовый шаблон: Файл/Создать/Другие шаблоны
Web-узлов
2. Сохранение страницы в виде шаблона
Сохраните одну из ранее созданных «в ручную» страниц как шаблон. Он будет отображаться в диалоговом
окне Создание страницы наравне со всеми остальными шаблонами.
2.1. Команда Файл/Сохранить как, в открывшемся окне выберите в
раскрывающемся списке Тип файла Шаблон FrontPage, присвойте имя
сохраняемому файлу. После этого откроется диалоговое окно Сохранить
как шаблон
2.2. Заполните поля этого диалогового окна следующим образом:
Название. Укажите название шаблона, которое будет
использоваться в диалоговом окне Шаблоны страниц.
Имя. Введите имя файла новой страницы. При открытии
диалогового окна здесь отображается URL или имя файла Web-страницы, на основе
которой вы создали этот шаблон.
Описание. Введите описание шаблона, которое будет отображаться в разделе
Описание диалогового окна Шаблоны страниц.
Обзор. Щелкните на кнопке Обзор для выбора названия шаблона, который вы
хотите заменить новым шаблоном, или папки для сохранения создаваемого шаблона.
Для сохранения нового шаблона щелкните на кнопке ОК. Чтобы убедиться в том, что
шаблон создан, и проверить его название и описание, откройте диалоговое окно
Файл/Создать/Страница. Каждый файл шаблона хранится в собственной папке
(расширение .TEM) внутри папки Pages, находящейся, в свою очередь, в программной
папке FrontPage. Для удаления шаблона следует удалить папку, в которой он находится
(это делается с помощью Проводника Windows или окна Мой компьютер).
3. Темы и их использование
Интересная функция FrontPage, называемая тема, обеспечивает еще большее
единообразие. В случае использования тем FrontPage использует для оформления всех
Web-страниц узла одни и те же фоновый узор, цветовую схему, кнопки, панели навигации,
шрифты, активную графику и другие элементы. Так как тема охватывает весь узел, новые
Web-страницы автоматически создаются со всеми стандартными элементами дизайна
текущего Web-узла.
3.1. Вызовите окно Темы: меню Формат/Тема.
Выберите любую тему. Изменение свойств темы производится установкой трех
флажков в нижней левой части окна Тема.
- делает цвет некоторых блоков текста или графических объектов
более ярким;
- создает анимацию некоторых элементов Web-страницы;
- добавляют текстуру фона на Web-страницу.
Если ни один из флажков не установлен, фон имеет белый цвет. Для использования темы щелкните на
кнопке ОК. Для просмотра новых эффектов переключитесь на другой режим просмотра и откройте страницу в
редакторе.
3.2. Изменение и удаление темы
Для использования другой темы выберите пункт меню Формат/Тема, а затем выберите понравившуюся
тему.
Для удаления темы установите флажок Не использовать темы.
После установки вышеуказанного флажка, текст приобретает свой первоначальный стиль или стиль
Обычный. В большинстве случаев вам все-таки придется форматировать текст Web-страниц узла, причем
вручную. Если вы сочтете такую работу лишней, снова используйте тему.
3.3. Применение тем к ранее созданным Web-узлам
При применении темы к ранее созданному Web-узлу, FrontPage предупредит, что все ранее произведенное
форматирование страниц Web-узла будет утеряно. Внимание! Отменить сделанные изменения будет
невозможно. После применения темы к Web-узлу возможности форматирования становятся более ограниченными.
Например, вы не сможете использовать разный фон страниц, покуда не удалите тему с отдельных Web-страниц
или со всего узла.
Внимание! Темы FrontPage основаны на каскадных таблицах стилей. Поэтому не рекомендуется
использование таблиц стилей на Web-страницах и Web-узлах, оформленных с использованием тем. Также не
следует редактировать файлы тем с расширением .CSS, так как это может привести к разрушению темы.
4. Использование классов
Можно выбрать несколько параметров стиля и сохранить их во внешней или внедренной таблицах стилей
как класс (class). Класс - это новый стиль, создаваемый на основе уже существующего стиля. Например, можно
переопределить цвет шрифта в каком-либо фрагменте текста.
4.1. Перед закрывающим тегом </head> вставьте конструкцию, определяющую стиль оформления цитаты:
<STYLE>
<!—
.CITT{ font-family: Arial; font-size: 14 pt; color: #0000FF; font-weight: bold position: relative; left: 20;}
-->
</STYLE>
Перед названием стиля (CITT) обязательно ставится точка, которая обозначает класс.
4.2. В одном из абзацев вставьте ссылку на стилевую таблицу: <P CLASS= CITT>. Сохраните изменение
стиля.
5. Макетные таблицы — особый вид HTML-таблиц, которые создаются в FrontPage. В отличие от обычных
таблиц, макетные таблицы обеспечивают ряд преимуществ, которые помогают в проектировании компоновки
страницы.
Макетная таблица состоит из следующих компонентов:
1. Сама макетная таблица представляет основу, или «полотно», для разработки макета. Будучи выбрана в
режиме конструктора, она выделяется зеленой рамкой.
2. Макетная таблица содержит макетные ячейки — области макетной таблицы, в которых размещается
содержимое страницы, включая текст, рисунки и другие элементы. Будучи выбрана, она выделяется синей
рамкой.
3. Макетная таблица также может содержать ячейки-заполнители, которые не содержат данных — они
существуют лишь для того, чтобы дополнять сумму ширин столбцов таблицы до общей ширины таблицы. Ячейкизаполнители выделяются бежевым цветом. Бежевый цвет, однако, появляется только в режиме конструктора и не
виден в обозревателе.
Вы можете свободно перемещать и изменять размеры макетных ячеек в пределах макетной таблицы.
Ячейки-заполнители при этом реагируют соответственно.(обычные таблицы не имеют гибких ячеек-заполнителей,
которые могут автоматически реагировать и изменяться). Именно эта функция обеспечивает гибкость
упорядочения и позиционирования, доступную во многих программах для разработки веб-страниц и настольных
издательских системах.
Для разметки элементов макетной таблицы используются теги HTML. Макетные таблицы являются HTMLтаблицами м представляются теми же тегами: . <table>, <tr> и <td>.
Единственное отличие заключается в том, что FrontPage помещает в код макетной таблицы комментарий,
подобный следующему:
<!--MSTableType="layout"-->
5.1. В меню Таблица выберите команду Макетные таблицы и ячейки.
Выберите любую макетную таблицу и щёлкните по ней. На странице автоматически
сгенерируется код, описывающий параметры таблицы.
5.2. Перейдите в режим Конструктора. Все строки и
столбцы имеют маркеры с указанием размеров в пикселах. Эти
размеры можно изменять.
5.3. Исследование гибкости макетной таблицы
Поэкспериментируйте
с
позиционированием
и
упорядочением макетных ячеек, В области Быстрый выбор
тегов нажмите кнопку <td>, чтобы выбрать макетную ячейку.
Передвигая маркеры (квадратики по периметру ячейки) можно уменьшить
ячейки, оставляя вокруг них пространство. В свободном пространстве можно
перемещать выделенные ячейки.
Внимание! При необходимости, изменить макетную таблицу можно также в
диалоговом окне Свойства таблицы.
5.4. Щелкните внутри любой макетной ячейки. В области Быстрый выбор тегов нажмите кнопку <td>. В
меню Таблица выберите команду Формат ячейки. В правой части окна появляется область задач Формат
ячейки. Здесь имеются специальные параметры компоновки, которые могут использоваться при форматировании
макетных ячеек.
Первый шаг в построении макета — создание макетной таблицы. Это можно сделать, "рисуя" или
перетаскивая объекты, настраивая их нужные размеры. Вот несколько советов по рисованию макетной таблицы:
Внимание! Ширина и высота могут измеряться только в пикселах. Это объясняется тем, что функция
создания макетных ячеек может использоваться только для фиксированных компоновок таблиц, измеряемых в
пикселах. (Это правило имеет исключение, которое называется авторасширением: ширину или высоту можно
задать как 100% с тем, чтобы таблица автоматически расширялась в доступное пространство. Эта методика,
однако, применяется уже после разработки макетных таблиц и ячеек.
