Практикум 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE
advertisement
МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Практикум 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ Цели: Освоить технологию: создания создания создания создание создание создания второй гипертекстовой страницы; гиперссылок; навигационной карты; таблицы; таблицы с изображениями; фреймовой структуры. Оглавление 7.3.1. Создание гипертекстовых страниц с помощью языка разметки HTML Задание 1. Знакомство с принципами разметки гипертекстового документа Задание 2. Форматирование текста документа Задание 3. Вставка изображений Задание 4. Создание второй гипертекстовой страницы Задание 5. Создание гиперссылок Задание 6. Создание навигационной карты Задание 7. Создание таблицы Задание 8. Создание таблицы с изображениями Задание 9. Ввод информации в заголовок страницы Задание 10. Связывание страниц в единый сайт 7.3.2. Технология создания гипертекстовых документов в среде приложения Microsoft Dreamweaver Задание 11. Знакомство со средой Micromedia Dreamweaver Задание 12. Установка параметров приложения и страницы Задание 13. Форматирование страницы Задание 14. Создание фреймовой структуры Задание 15. Вставка таблицы Задание 16. Редактирование страницы Задание 17. Сохранение файлов 1 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 7.3.1. Создание гипертекстовых страниц с помощью языка разметки HTML Задание 1. Знакомство с принципами разметки гипертекстового документа 1. Создайте на своем диске папку HTML. 2. Скопируйте файл index.html из папки Free_Access\Вечернее\НTML. 3. Откройте index.html в браузере двойным щелчком. Рис. 1. Гипертекстовая страница, открытая в браузере 4. Рассмотрите документ в окне браузера. Обратите внимание на заголовок, абзацы, список. Откройте страницу в Блокноте командой ВИД/Просмотр HTML-кода. 5. Расположите открытые окна браузера и Блокнота рядом. 6. Преобразуйте документ, содержащий только текст, в документ, разбитый на абзацы, имеющий списки, графическое изображение (рис. 1). 7. В окне Блокнота отображается код разметки. Текст в окне Блокнота содержит текстовые фрагменты, которые отображаются в браузере в отформатированном виде, и указания браузеру, называемые тэгами. Они заключены в угловые скобки. 8. Найдите в блокноте тэг <HTML>. Это тэг-контейнер, обозначающий начало гипертекстовой разметки. Такой же тэг, закрывающий гипертекстовый код располагается в конце открытого в блокноте документа - </HTML >. 2 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 9. Найдите начало и конец тэга-контейнера <BODY></BODY>. Между этими тэгами располагаются все остальные элементы страницы – фрагменты текста, и другие тэги. 10. Тэг < BODY > содержит атрибуты (указание свойств элементов) задания цвета фона страницы Bgcolor, текста Text (табл. 2 Тема 7.3). Примечание. Размер символов тэгов не имеет значения. В практикуме обязательные элементы тэга будут обозначены заглавными буквами, а атрибуты – строчными, с большой буквы. 11. Измените цвет страницы, задав цвет фона “#CCFFCC”, цвет текста – “#333300” цвет ссылки - “#СССС00”, изменив соответствующие атрибуты тэга <BODY>: <BODY Bgcolor=”#CCFFCC” Text=“#333300” Link=“#СССС00”>. 12. Сохраните изменения командой Файл/Сохранить в окне блокнота. 13. Перейдите в окно браузера и нажмите кнопку Обновить. 14. Отметьте изменения, происшедшие в документе. Примечание. Коды цвета можно посмотреть в таблице известного дизайнера А.Лебедева по адресу: http://www.artlebedev.ru/tools/colors или в таблице 2 тема 7.3. Белый цвет задается смешением максимальных значений красного, зеленого и синего цветов. Код его FFFFFF. Черный – наоборот все нули. Задание 2. Форматирование текста документа 1. Найдите фразу, содержащую перечисления: заводы, гостиницы и пр. Создайте из нее маркированный список, введя перед каждым элементом тэг <li>. Разметка этого фрагмента страницы выглядит следующим образом: <ul> <li>заводы, <li>вокзалы, <li>гостиницы, <li>банки. </ul>. 2. Оформите как заголовок первого уровня фразу: Невский проспект начала ХХ столетия, поместив <H1 Align = right> </H1>. ее в тэг-контейнер: Атрибут Align позволяет располагать заголовок справа, слева или по центру в зависимости от заданного значения Align = left; Align = center. Расположите заголовок справа, задав выравнивание по правой границе. 3 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 3. Сохраните изменения командой Файл/Сохранить в окне блокнота. Перейдите в окно браузера и нажмите кнопку Обновить. Заметьте изменения, происшедшие в документе. 4. Вернитесь к тексту в Блокноте, выровняйте заголовок по центру, и повторите действия пункта 3, затем - по левой границе и оставьте так. 5. Найдите фразу, начинающуюся со слов «Изменился облик…». Введите перед ней Тэг <P Align = right>, который задает начало абзаца и выравнивание по правому краю. Посмотрите на изменения в странице. Измените тэг на <P Align=left> и оставьте так. 6. Задайте курсивом слова «ни одно здание не должно превышать по высоте Зимний дворец». Для этого перед ней и после нее поставьте тэги задания курсива: <I>. Задание 3. Вставка изображений Изображение вставляется следующим тэгом: <IMG SRC =”адрес файла изображения”>. При вставке изображения важно правильно указать его адрес иначе он будет отображаться значком. Если файл с изображением находится в той же папке, что и страница, куда он вставляется, то адресом будет имя файла. Если папка с изображением находится в одной папке со страницей, то нужно в адресе указать папку. Вставьте на страницу изображение из локальной папки и изучите влияние атрибутов на вид страницы: 1. Создайте на диске в папке HTML папку images. 2. Скопируйте туда файл nord.jpg из папки Free_Access\Вечернее\НTML\images. 3. Откройте файл index.html в блокноте. 4. Найдите на странице самое начало текста после заголовка и вставьте туда тэг <IMG src = images/nord.jpg>. 5. Сохраните файл командой Файл/Сохранить. Обновите окно браузера командой Вид/Обновить. 6. Оцените результат. Изображение занимает слишком большую часть страницы. Необходимо его уменьшить. Для этого используют атрибуты Width (ширина), Height (высота), с помощью которых можно задавать размеры изображения в пикселях или в процентах от экрана. 7. Добавьте в тэг вставки изображения после адреса файла с изображением атрибут Width =400. 8. Сохраните изменения. Обновите окно браузера. Заметьте изменения на странице. 9. Измените размер окна. Отметьте, что происходит с изображением. 10. Откройте страницу в блокноте и измените значение атрибута Width =30%. 11. Сохраните изменения. Обновите окно браузера. 12. Поменяйте размер окна. Изображение меняет размер пропорционально изменениям окна. 13. Добавьте в тэг вставки изображения атрибут альтернативного текста Alt =” NORD. Здание кондитерской фирмы Север”. 14. Сохраните изменения. Обновите окно браузера. 4 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 15. Наведите на изображение указатель мыши и отметьте, что в появившемся всплывающем поле отображается текст атрибута Alt. 16. Добавьте в тэг изображения атрибут Border =3. Сохраните изменения, обновите окно браузера. 17. Вернитесь в окно Блокнота. Измените значение Border на 0. 18. Добавьте в тэг атрибут Align (выравнивание относительно текста). Расположите рисунок слева от текста, посередине, справа и оставьте так. 19. Добавьте тэг Hspace (расстояние от текста по горизонтали), Vspace – по вертикали, задавая им значения в пикселях. Сохраняя, и обновляя файл с гипертекстовой разметкой, наблюдайте за изменением расположения изображения относительно текста. Задание 4. Создание второй гипертекстовой страницы 1. 2. 3. 4. Запустите Блокнот. Создайте в нем новый файл. Введите тэги согласно рис. 2: Текст страницы скопируйте из файла Ассигнационный банк.txt из папки Free_Access\ Вечернее\НTML\Resourses. 5. Сохраните файл с именем history.html. 6. Сравните результат с рис. 3. 7. Добавьте на страницу после текста изображение Банковского моста, расположив его посередине. Файл с изображением называется bridge.jpg и находится в папке Free_Access\ Вечернее\НTML\images. Рис. 2. Гипертекстовая разметка страницы history.html 5 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 3. Вид гипертекстовой страницы history.html в окне браузера Задание 5. Создание гиперссылок Гиперссылка на другую страницу сайта . 1. Откройте файл index.html в Блокноте. 2. Найдите слово “банки” в списке. Слева от этого слова после тэга < li > расположите тэг <a href =”history.html”> 3. Справа от него поместите тэг, закрывающий гиперссылку </a >. 4. Сохраните. Обновите окно браузера. Щелкните по гиперссылке и убедитесь, что загружается страница history.html. Гиперссылка на адрес электронной почты . 1. Откройте страницу index.html в Блокноте. 2. Перейдите к тэгу</BODY >, закрывающему основную часть страницы. Введите перед этим тэгом следующий текст: < FONT size =2>< i >< A HREF = mailto:” a дрес_ почт_ящика”>Пишите</A> нам письма по адресу: “адрес Вашего почтового ящика.” </i> </font> Слово Пишите станет гиперссылкой, щелчок по которой откроет окно почтовой программы. Убедитесь в этом. Гиперссылка – изображение 1. Откройте страницу history.html. 2. Найдите тэг вставки изображения и добавьте тэги гиперссылки, содержащие нужные атрибуты. <A HREF=”http://bridgespb.narod.ru/bankovsk.htm"><IMG SRC=bridge.jpg></A> 3. Сохраните файл history.html. 4. Проверьте в Вашей папке HTML наличие созданных гипертекстовых страниц. 5. Откройте файл history.html в браузере. Проверьте как действует созданная гиперссылка. 6 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Задание 6. Создание навигационной карты Карта - изображение, содержащее гиперссылки с разных его участков, определенных как прямоугольники, многоугольники или окружности. Для задания этих областей используются координаты плоскости. 1. Скопируйте в свою папку images файл karta. jpg из папки Free_Access\HTML\ image. 2. Запустите графический редактор MSPaint командой Пуск/Программы/Стандартные/MSPaint. 3. Откройте в окне графического редактора файл с изображением карты karta.jpg. Определите координаты областей карты: выберите две неперекрывающиеся прямоугольные области, которые будут гиперссылками; определите верхнюю левую и нижнюю правую точки первой прямоугольной области. Поставьте курсор в верхнюю точку, и в строке состояния заметьте два числа. Это координаты х и у этой точки, запишите их; определите координаты х и у, нижней точки выбранной прямоугольной области и запишите их. На рис. 4 такая область выделена пунктирной линией. 4. Создайте два файла b1.html и b2.html, в которые поместите информацию из файла банки. txt о банках, находившихся по адресам Невский 1 Невский 7/9; добавьте в них изображения nev1.jpg и nev7_9.jpg соответственно. 5. Откройте файл index.html в Блокноте. 6. Сделайте описание карты < MAP ></MAP > для того чтобы действовала гиперссылка. Для этого введите после тэга < BODY > набор тэгов: <MAP Name=”kar”> <AREA Shape=”rect” Coords=”2,129; 62,195” HREF=”b1.html”> <AREA Shape=”rect” Coords=”70,164; 90,194” HREF=”b2.html”> </MAP > Это описание определяет две прямоугольные области рисунка. Имя этого описания – kar. Объявите изображение karta. jpg, соответствующим этому имени. 7. Введите перед тэгом </BODY > тэг вставки изображения: <IMG src = images/karta.jpg name=”#kar”>. 7 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 4. Карта с выделенной областью 8. Сохранить файл. Задание 7. Создание таблицы Создайте таблицу (рис. 6), используя элементы языка разметки (рис. 5). 1. Создайте в блокноте файл table.html. 2. В основной части страницы задайте таблицу, состоящую из двух столбцов и нескольких строк, содержащих цвет и его код. Рис. 5. Фрагмент кода, задающего на странице таблицу с цветами 3. Введите текст страницы согласно рис. 5. Добавьте еще несколько строчек с описанием цветов сами. Сохраните в новом файле. Для задания цвета используйте коды - рис. 6. Примечание. &nbsp; - это вывод пробела на странице браузера. Ячейки таблицы не должны быть пустыми. Поэтому, если в них нет никаких элементов в них вводят пробелы. 4. Сохраните результат в файле. Откройте в браузере. Сравните с рис. 6. 8 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 6. Таблица цветов Задание 8. Создание таблицы с изображениями,/a> Создайте таблицу, содержащую изображения банков (рис. 7). 1. Скопируйте из папки Free_Access\Вечернее\НTML\images в свою папку images файлы nev58.jpg, nev12.jpg. Рис. 7. Таблица с текстом и изображениями 2. Введите в первые 2 ряда ячеек таблицы текст и тэги (рис. 8). Вставьте изображения, используя тэги: 9 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 8. Вид страницы b_tabl.html в Блокноте <TD Valign=middle Align=center><IMG SRC=nev12.jpg width=200></TD>, где Valign = middle – атрибут, позволяющий располагать элементы таблицы по вертикали: middle - по центру; bottom – к низу; top – к верху. 3. Введите в третий ряд таблицы текст (рис. 8). В соседней ячейке поместите изображение, находящееся на компьютере Интернет, указав адрес его расположения: В окне браузера наберите адрес: http://www.elitarium.ru/index.php?pid=83&id=1866 На появившейся странице внизу найдите изображение (рис. 9). Наведите на него указатель мыши и вызовите правой кнопкой контекстное меню. Выберите команду Свойства. Рис. 9. Изображение сайта Интернет «Прием вкладов В окне свойств найдите URL – это адрес, который нужно указать в тэге для вставки найденного изображения в Вашу страницу. Выделите адрес. Правой кнопкой откройте контекстное меню, выберите Копировать. Вернитесь в окно Блокнота. В тэге вставки изображения щелкните после указания источника изображения SRC = и командой контекстного меню Вставить задайте адрес изображения. В результате должна получиться следующая разметка: 10 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE <TD Valign=middle Align=center> <IMG SRC= http://www.elitarium.ru/image/site/224kredit03.jpg width=200></TD> Добавьте альтернативный текст “Прием вкладов в банке России начала ХХвека”. Задание 9. Ввод информации в заголовок страницы 1. Откройте страницу index.html в Блокноте. После <HTML> введите следующие тэги: < HEAD ><TITLE> Банки на Невском проспекте в начале 20 столетия</TITLE ></HEAD> для задания темы документа в World Wide Web. Так же именуется окно браузера, в котором документ просматривается. 2. Поместите после тэга </TITLE >: < META name =" description " content ="банки Невского проспекта начало 20 века"><META name ="keywords "content="банк, история, Невский, дома, архитектор">. Ключевые слова и описание документа могут использоваться поисковыми системами. Задание 10. Связывание страниц в единый сайт 1. Определите, какие файлы загружаются из файла index.html. 2. Создайте в них гиперссылки, связывающие их index.html. 3. Проверьте, как осуществляются переходы. с файлом 7.3.2. Технология создания гипертекстовых документов в среде приложения Microsoft Dreamweaver Задание 11. Знакомство со средой Micromedia Dreamweaver 1. Запустите приложение командой Пуск/Программы/MicromediaDreamweaver. 2. Рассмотрите внимательно окно приложения (рис. 1), панели инструментов. 3. В основном поле окна пользователь может создавать страницу. Название по умолчанию – Untitlеd. 4. Выведите в окно приложения панель объектов командой Window/Objects. Расположите ее слева. 11 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 10. Окно приложения Панель объектов (Objects) – окно, с помощью которого создаются различные объекты гипертекстового документа, например, вставляются таблицы, изображения, Flash-объекты. Предназначено для работы с элементами структуры сайта. 5. Выберите на панели объектов (рис. 10, слева) инструмент Изображение (левый верхний). Перейдите на поле страницы и укажите адрес изображения. 6. Вызовите окно свойств (Контекстное меню/Properties). Окно свойств отображает заданные параметры, которые можно менять с помощью кнопок, списков и, вводя данные с клавиатуры. 7. Задайте адрес изображения - nev1.jpg. Задайте его ширину – 500, выравнивание по центру ширину рамки - 0. 8. Вызовите окно Code Inspector командой Window/Code Inspector. Code Inspector – окно для просмотра html –кода и его редактирования. 9. Окно Siteслужит для установки параметров создаваемого сайта, определяется его структура, а также указываются его URL. С его помощью можно наблюдать изменения на сайте после корректировки составляющих его документов. 12 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 11. Установка параметров шрифта Задание 12. Установка параметров приложения и страницы Window Properties - окно свойств используется для изменения свойств выделенного объекта, например, стиля текста или размера изображения и т.д. При выделении конкретного объекта в окне отображаются его различные атрибуты 1. Откройте окно для установки общих параметров командой Edit/General Preferences (рис.11). Здесь задаются параметры для работы в среде Dreamweaver, например, такие как размеры и цвет шрифта. 2. Выберите категорию Category – Fonts/Encoding. Задайте: код по умолчанию Default Encoding - Cyrilic (Windows 1251); шрифт - Font Setting – Cyrilic; шрифт окна инспектора кодов Code Inspector – Arial, 12 пт. 3. На вкладке Общие General установите в поле Add extention when saving (добавление при сохранении расширения) – htm. 4. Нажмите ОК. 5. Установите параметры страницы в окне Page properties командой Modify/Page propeties. 6. Введите заголовок страницы в поле Title, указав тему Архитектура. 7. Установите в окне (рис. 12) цвет фона бледно - голубой в поле background #ССFFFF. 8. Установите цвет текста в поле Text, выбрав из списка темно-синий. 13 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 9. Установите размеры отступов слева 10 px, сверху 12 px в полях Left margin, Top margin. 10. Укажите вид кодировки в поле Document Encoding - Cyrillic (Windows-1251). 11. Нажмите кнопку OК. Рис.12. Окно установки свойств страницы Задание 13. Форматирование страницы 1. Введите на страницу текст «Международный коммерческий банк». Выделите его и примените к нему стиль заголовка 2 уровня командой Text/Paragraph format/Heading2. 2. Введите текст: Адрес: Невский 58. Построен в 1896 -1898 годах. Архитектор Брзжовский С.А. 3. Измените текст командами Text/Font/Arial; Text/Size/3; Text/Style/Italic. 4. Задайте тексту цвет. 5. Щелкните указателем мыши перед заголовком страницы. Вставьте изображение командой Insert/Image. Укажите местоположение файла nev58.jpg. 6. В открывшемся окне свойств (рис.13) Properties (можно открыть его правой кнопкой, если оно отсутствует), установите размеры изображения: width = 250, height=262. 7. В окне свойств установите вид выравнивания Align = Right. 8. Сравните полученный результат с рис. 13. 9. Сохраните страницу в свою папку НTML с именем b58.html Примечание. Вставку изображений можно осуществлять с помощью панели объектов. Размеры изображения можно устанавливать мышью, предварительно его выделив. 14 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Рис. 13. Окно приложения. Вставка рисунка, задание свойств. Задание 14 Создание фреймовой структуры 1. Задайте в окне вид структуры страницы командой Insert/Frame определите свойства фреймов в окне свойств - две колонки (cols). Задайте размеры фреймов: левая колонка составляет 40%, а правая – остальную часть окна. 2. В левом фрейме напишите: Банки Невского проспекта. Оформите этот фрагмент заголовком 2 уровня. 3. Введите перечисления банков. Выделите весь список, который ввели и объявите его маркированным списком командой Text/List/Unordered list. 4. Создайте гиперссылку. Для этого выделите в левом Фрейме слова Международный коммерческий банк. 5. В контекстном меню найдите Make link. 6. В открывшемся окне укажите адрес файла b58.html. 7. В правый Фрейм поместите страницу banks.html. 8. Сохраните файл, указав имя файла с фреймом - frame.html, имя файла, находящегося в левом кадре – spisok. html и файл правого кадра с тем же именем. 9. Откройте файл spisok.html. Для того, чтобы файл загружался не в тот кадр из которого вызван, а в правый, оставляя доступным список, нужно указать в тэге гиперссылки параметр target, указывающий имя фрейма < a href = b58.html target =”left”>, Задание 15. Вставка таблицы 15 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE 1. Создайте новый файл. Назовите его lamps.html. 2. Вставьте таблицу командой Insert/Table. 3. Задайте количество строк в поле Rows – 1; в поле Columns количество столбцов – 3, в поле Width - длину таблицы 80 %. В текстовом поле Cell Spacing - расстояние между ячейками – 0, а в поле Border - толщину границы таблицы. 4. Вызовите панель свойств таблицы (рис. 14). Рис. 14. Панель свойств таблицы 5. Задайте также: рамку таблицы – 0; цвет фона – синий; расположение Align = center. 6. Вставьте в ячейку таблицы файл lamp1.gif. Вызовите окно свойств и установите выравнивание по вертикали - Valign по верхней границе (top). Подпишите рисунок, введя Лампа 1. 7. Установите стиль шрифта Bold и Italic. Цвет – желтый. 8. Таким же образом поступите с другими ячейками таблицы, вставив в нее файлы с изображениями lamp2.gif и lamp3.gif. 9. Сравните результат работы с рис.15. 10. Откройте Code Inspector. Определите, имеются ли, на Ваш взгляд, лишние строки в коде разметки. 11. Сохраните файл, назвав его lamps.html. Рис. 15. Таблица с изображениями Примечание. Таблицы имеют широкое применение: прайс-листы, ссылки, состоящие из миниатюрных фото. Часто таблица используется для создания панели навигации. Задание 16. Редактирование страницы 1. Откройте файл b_tabl.html. 2. Добавьте 2 строки в таблицу, заполнив их соответствующей информацией из файлов с ресурсами. 3. Используйте панель свойств для определения свойств таблицы, расположения элементов в ячейках. 16 МЕЖДУНАРОДНЫЙ БАНКОВСКИЙ ИНСТИТУТ INTERNATIONAL BANKING INSTITUTE Задание 17. Сохранение файлов Сохраняя файлы, обратите внимание на возможные расширения. 17
