Некоммерческое акционерное общество

Некоммерческое акционерное общество

АЛМАТИНСКИЙ УНИВЕРСИТЕТ ЭНЕРГЕТИКИ И СВЯЗИ

Кафедра компьютерных технологий

 

ИНТЕРНЕТ ТЕХНОЛОГИИ

Методические указания к лабораторным работам для студентов специальности 5В070400 – Вычислительная техника и программное обеспечение

 

Алматы 2013

СОСТАВИТЕЛИ: Жунусов З.А., Ельчибаева Р.Б., Рахимжанова З.М. Интернет технологии. Методические указания к лабораторным работам  для студентов специальности 5В070400 – Вычислительная техника и программное обеспечение. - Алматы: АУЭС, 2013. - 25 с.

 

Методические указания содержат указания по подготовке к проведению пяти лабораторных работ по установке, изучению, настройке и работе в Adobe Dreamweaver; приведены описания каждой лабораторной работы, дана методика проведения и ход выполнения, оговорен перечень рекомендуемой литературы.

Методические указания к лабораторным работам  предназначены для студентов специальности 5В070400 – Вычислительная техника и программное обеспечение.

Ил. – 10, библиография – 14 названий.

 

Рецензент: доцент Куликов А.А.

 

Печатается по плану издания некоммерческого акционерного общества «Алматинский университет энергетики и связи» на 2012 г.

 

© НАО «Алматинский университет энергетики и связи», 2013 г.

 

Сводный план 2012 г. поз.231

 

 Содержание

 

Введение

4

1 Лабораторная работа №1. Знакомство с HTML-редактором Adobe Dreamweaver и настройка рабочего пространства

5

2 Лабораторная работа №2. Форматирование HTML-страниц

14

3 Лабораторная работа №3. Создание гипертекстовых ссылок

20

4 Лабораторная работа №4. Создание и форматирование таблиц

22

5 Лабораторная работа № 5. Вставка изображений и других элементов. Использование графических материалов

30

Приложение 1

36

Приложение 2

38

Список литературы

39

 

 Введение

 

В основу всемирной паутины положена идеология и технология гипертекста, технически реализованная при помощи языка HTML. HTML (HyperText Markup Language, язык гипертекстовой разметки) представляет собой язык, разработанный специально для создания web-документов. HTML-документы представляют собой обычные текстовые ASCII-файлы. Помимо текстового содержания, они включают в свой состав специальные управляющие конструкции языка - так называемые теги. При отображении документа в браузере сами теги на экран не выводятся. Они определяют структурные единицы внутри документа, задают параметры форматирования, включают в состав документа новые элементы (встроенные изображения, Java-апплеты и т.п.) и позволяют создавать гипертекстовые ссылки на другие документы и ресурсы сети Internet.

Для создания и редактирования HTML-документов достаточно простого текстового редактора, например, Блокнот Windows. На практике обычно используют средства редактирования, разработанные специально для написания HTML - редакторы WYSIWYG (от англ. what you see is what you get, что видишь, то и получаешь) или, как их еще называют, средства визуального редактирования. Такие программные продукты имеют графические интерфейсы, делающие написание HTML-кода подобным работе с программой редактирования текстов и разметки страниц. Подобные программные продукты позволяют повысить эффективность и значительно сократить время разработки. Специализированные HTML-редакторы также работают с исходным кодом web-страницы, но располагают различными вспомогательными инструментами, ускоряющими и упрощающими процесс редактирования документов, и дополнительными средствами для выполнения повторяющихся операций. Кроме того, наиболее мощные из них включают в свой состав средства автоматизации процесса разработки (работа с шаблонами, стилями и библиотеками элементов) и средства размещения файлов сайта на web-сервере. К данной группе редакторов относится большое количество программных продуктов, в том числе и распространяемых бесплатно.

 

Порядок выполнения лабораторных работ

 

Работа выполняется студентом самостоятельно и состоит из следующих этапов:

1)   изучение методических указаний по выполнению лабораторной работы;

2)  создание сайта на выбранную тематику с использованием Adobe Dreamweaver (см. Приложение 1 и Приложение 2);

3)  защита лабораторной работы.

Конечным результатом выполнения лабораторных работ является работоспособный сайт. Исходный код сайта представляется в электронном виде. После выполнения лабораторной работы преподаватель проверяет качество оформления сайта и правильность функционирования.

 

1 Лабораторная работа №1. Знакомство с HTML-редактором Adobe Dreamweaver и настройка рабочего пространства

 

Цель работы: изучение и настройка рабочего пространства, инструментария программы Dreamweaver, создание нового документа.

Рабочее задание:

1)       Запустить программу Dreamweaver, изучить систему меню и палитру инструментов.

2)       Настроить рабочее пространство.

3)       Создание главной страницы сайта.

 

1.1 Методические указания

 

1.1.1 Описание программы Dreamweaver.

Создатели программы Dreamweaver постарались сделать удобный и простой в использовании инструмент, облегчающий процесс создания HTML-страниц, их редактирования и управления большим количеством связанных друг с другом документов.

Каждый новый HTML-документ открывается в новой закладке. Для более удобной работы с программой предусмотрены система меню и набор палитр инструментов.

Вы можете настраивать рабочее пространство программы таким образом, чтобы ваша работа с ней была максимально удобной и эффективной. Программа Dreamweaver, являясь визуальным HTML-редактором, также позволяет переключаться в режим ручного редактирования кода, выполняя взаимосвязь между визуальным представлением страницы и ее исходным кодом. Для переключения между режимами отображения и редактирования HTML-документа предназначены три первые кнопки  () на панели инструментов.

Все основные действия при создании и редактировании HTML-страницы выполняются в поле документа. Как известно, кроме текстовой информации, HTML-документ может содержать различные графические и мультимедийные элементы. Для удобства вставки таких элементов предназначена панель объектов “Вставка” (см. рисунок 1). С помощью кнопок, расположенных на этой панели, можно быстро вставить различные объекты (изображения, таблицы, Flash-анимация) в редактируемый документ.

 

dw_workspace-рис1

 

Рисунок 1– Рабочее пространство Dreamweaver

(A. Панель объектов; B. Панель инструментов; C. Поле документа; D. Панель вкладок; E. Выбор HTML-тегов; F. Панель свойств объекта)

 

Любой HTML-документ можно представить как совокупность таких элементов, как слово, абзац, изображение, ячейка таблицы и других. Все они имеют некоторые общие свойства (например, выравнивание), но в то же время каждый объект обладает присущими только ему свойствами, параметрами и настройками. Для быстрого доступа к редактированию параметров объекта предназначена панель свойств “Свойства(см. рисунок 1). В зависимости от текущего выделенного объекта она изменяет свой внешний вид - предлагается просмотреть и при необходимости изменить набор свойств именно этого объекта.

 

1.1.2 Создание документа.

При самом первом запуске программы, вам будет предложено выбрать рабочую среду. Давайте создадим новый документ "File – New" (Файл-Новый)

 

 

Image3.GIF

 

Рисунок 2 – Окно создания нового документа

 

На этой вкладке создайте новый документ, выбрав Basic Page (Базовая страница) -> HTML. Перед вами откроется рабочее окно программы.

 

Image2.GIF

 

Рисунок 3 – Рабочее окно Dreamweaver

 

И на вновь созданной странице напишите какой-нибудь текст, состоящий из русско-английских слов. Для примера: "полезная информация по работе с программой DreamWeaver".  После чего сохраните страницу командой "File- Save as", но саму страницу не закрывайте в редакторе, а теперь откройте вновь созданную страницу в браузере, - что у вас получилось? В нашем случае отобразилась такая вот надпись

Image4.GIF

Поэтому первое с чего стоит начать - это обучить DreamWeaver кириллице. Главное меню “Edit” (Редактировать) – “Preferences” (Настройки), в открывшемся диалоге выберите категорию “New Document” (Новый документ) и на этой вкладке в списке "Default Encoding" выберите "Cyrillic (Windows-1251)". Далее в левой части этого диалога выберите пункт “Fonts” (Шрифты) и в списке “Font Setting” (Настройки Шрифта) выберите пункт "Cyrillic (Кириллица)".

 

Image1.GIF

 

Рисунок 4 – Настройка кириллицы

 

Здесь вы так же можете настроить отображение текста (выбрать шрифты и установить размер букв), который будет использоваться по умолчанию. Для завершения нажмите "ОК". После чего создайте еще одну страницу и впишите какой-либо текст, сохраните ее "File - Save" и откройте сохраненную страницу. Теперь все в порядке, НО! Любая веб - страница, где в теге Meta явным образом не будет указана кодировка "charset = windows-1251", будет "перегоняться" в кодировку "Cyrillic (ISO-8859-5)"

1.gif
2.gif

Чтобы это не происходило, откройте файл: (Ваш диск \Program Files\ Macromedia\ Dreamweaver 8\ Configuration\ Encodings\ EncodingMenu.xml) и в списке кодировок найдите четыре кодировки Кириллицы, идущие друг за другом.

Исходная кодировка Кириллицы:

<mm:encoding name="Cyrillic (ISO-8859-5)" charset="UTF-8""iso-8859-5" fontgroup="Cyrillic" winfontcharset="UTF-8" macfontscript=7 filename="iso88595.xml"/>
<mm:encoding name="Cyrillic (KOI8-R)" charset="UTF-8""KOI8-R" fontgroup="Cyrillic" winfontcharset="UTF-8" macfontscript=7 filename="KOI8R.xml"/>
<mm:encoding name="Cyrillic (MacCyrillic)" charset="UTF-8""x-mac-cyrillic" fontgroup="Cyrillic" winfontcharset="UTF-8" macfontscript=7 filename="MacCyrillic.xml"/>
<mm:encoding name="Cyrillic (Windows-1251)" charset="UTF-8""windows-1251" fontgroup="Cyrillic" winfontcharset="UTF-8" macfontscript=7 filename="Win1251.xml"/>

Отредактируйте этот файл в "Блокноте", поменяв местами кодировки "ISO-8859-5" и "Windows-1251", чтобы порядок следования кодировок Кириллицы принял следующий вид.

Отредактированная кодировка Кириллицы:

<mm:encoding name="Cyrillic (Windows-1251)" charset="UTF-8""windows-1251" fontgroup="Cyrillic" winfontcharset="UTF-8" macfontscript=7 filename="Win1251.xml"/>
<mm:encoding name="Cyrillic (KOI8-R)" charset="UTF-8""KOI8-R" fontgroup="Cyrillic" winfontcharset="UTF-8" macfontscript=7 filename="KOI8R.xml"/>
<mm:encoding name="Cyrillic (MacCyrillic)" charset="UTF-8""x-mac-cyrillic" fontgroup="Cyrillic" winfontcharset="UTF-8" macfontscript=7 filename="MacCyrillic.xml"/>
<mm:encoding name="Cyrillic (ISO-8859-5)" charset="UTF-8""iso-8859-5" fontgroup="Cyrillic" winfontcharset="UTF-8" macfontscript=7 filename="iso88595.xml"/>

Сохраните изменения в файле, на этом процесс обучения программы русскому языку можно считать законченным.

Интерфейс

Теперь давайте снова вернемся к рабочей среде программы.

Image5.GIFДля переключения режима отображения рабочей среды (режимов всего три: “Code” (Код), “Design” (Дизайн) и “Code and Design” на панели инструментов или главное меню "View"(Вид). Выберите из этих режимов тот, с которым вы можете/умеете работать, хотя предпочтительно оставить "Code and Design", тогда рабочее окно как бы разделится на две части и вы сможете видеть и сам HTML-код и страницу в режиме WYSIWYG.

Выше, ниже и правее окна документа находятся группы панелей — небольшие окна, которые могут быть либо "приклеены" к одному краю главного окна, либо свободно "плавать" рядом с ним. В верхней части каждой группы панелей имеется ее заголовок — "выпуклая" синяя полоса, на которой написано название панели.

Большинство панелей имеют так называемое дополнительное меню. Оно открывается при щелчке мышью по небольшой кнопке Image65.GIF, расположенной в правом верхнем углу группы, в которой находится данная панель, и имеющей изображение списка из трех позиций и небольшой стрелки, направленной вниз. (В сжатом состоянии эта кнопка не видна.)

Группы панелей всегда располагаются над окном документа, даже если в данный момент неактивны. Это сделано для того, чтобы мы могли всегда Image66.GIFполучить к ним доступ, вне зависимости от того, какое окно сейчас активно. Если же мы захотим убрать какую-либо из этих групп, мы можем "вынести" ее за пределы окна документа или вообще закрыть, раскрыв ее дополнительное меню и выбрав пункт Close panel group. Теперь обратим внимание на правый край главного окна, где находится множество всяческих групп панелей. Это так называемый док — область, специально для них предназначенная. Док отделен от остального пространства главного окна толстой серой полосой, которую мы можем перетаскивать мышью, изменяя размеры дока.

Еще три панели Dreamweaver достойны отдельного упоминания. От обычных панелей они отличаются тем, что имеют постоянные размеры и образуют каждая свою особую группу:

1)       инструментарий объектов

Image6.GIF

2)       инструментарий документа

Image10.GIF

3)       стандартный инструментарий, предоставляющий доступ к операциям с файлами (создание, открытие и сохранение Web-страницы), буфером обмена и пр., изначально скрыт.

Image8.GIF

Image11.GIFЕсли мы откроем несколько Web-страниц, разобраться в них будет очень трудно — окна документов перекрывают друг друга, и добраться до нужного удается далеко не сразу.

Если же мы раскроем одно из окон Image9.GIFдокументов на весь экран (точнее, на все главное окно), то можем легко переключаться между окнами. В этом случае в инструментарии документа появятся вкладки, соответствующие открытым Image12.GIFокнам документа.

Если нам необходимо держать на виду сразу два окна или больше, стоит воспользоваться пунктами меню “Window - Cascade, Tile Horizontally или Tile Vertically”. Первый из них "выкладывает" все открытые окна документов в виде "стопки" в главном окне так, что мы сможем видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в главном окне "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий — по вертикали.

Определение сайта в Dreamweaver

Прежде чем начать управлять сайтом, его необходимо зарегистрировать в Dreamweaver.

Для того чтобы создать новый сайт, воспользуйтесь пунктом “New site” (Новый сайт) меню “Site” (Сайт). После выбора на экране появится диалоговое окно “Site Definition” (Определение сайта), состоящее из двух вкладок.

 

Image18.PNG

 

Рисунок 5 – Окно «Определение сайта»

 

Если оно открыто на вкладке “Basic” (Основные), переключитесь на вкладку “Advanced” (Дополнительно) — она предоставляет больше возможностей по настройке вашего сайта. Как видите, в левой части этого окна находится список вкладок второго уровня. Переключитесь на вкладку “Local Info” (Локальная информация), где задается информация о файлах вашего сайта, находящихся на жестком диске вашего компьютера (локальной копии сайта).

В поле ввода “Site Name” (Имя сайта) вводится имя сайта. Оно служит только для того, чтобы вам самим было удобно с этим сайтом работать. Назовите сайт "proba".

В поле ввода “Local Root Folder” (Локальный корневой каталог) указывается путь к корневой папке локальной копии сайта. Вы также можете щелкнуть по значку папки, расположенному справа от этого поля ввода, и выбрать нужную папку в появившемся на экране диалоговом окне.

Флажок “Refresh Local File List Automatically” (Обновить локальный список файлов автоматически) включает или отключает автоматическое обновление списка файлов локальной копии сайта. Если вы оставите его включенным, список файлов сайта всегда будет обновляться автоматически, как только Dreamweaver становится активным. Если же вы выключите вышеназванный флажок, вам самим придется обновлять список файлов сайта, но Dreamweaver будет активизироваться быстрее.

В поле ввода “Default Images Folder” (Папка с картинками по умолчанию) вводится имя папки, в которой по умолчанию будут располагаться все графические изображения, помещаемые вами на Web-страницы сайта. Вы также можете щелкнуть по значку папки, расположенному справа от этого поля ввода, и выбрать нужную папку в появившемся на экране диалоговом окне. Введите в это поле “pic”.

В поле ввода “HTTP Address” вводится интернет-адрес вашего сайта. Не вводите в это поле ничего.

 

Image21.PNG

 

Рисунок 6 – Окно определения сайта

 

Если просмотреть все категории справа, то у вас будет множество различных настроек.

После нажатия кнопки “Готово” в панели “Файлы” отобразится список файлов сайта, изначально там нет файлов, но они появятся по мере Вашей работы.

 

Image67.GIF

 

Рисунок 7 – Список файлов сайта

 

После того как структура будущего сайта продумана, можно приступать к разработке самих web-страниц (отдельных элементов сайта). И начать следует с главной (домашней) страницы сайта.

 

2 Лабораторная работа №2. Форматирование HTML-страниц

 

Цель работы: изучение тэгов HTML, таблицы стилей CSS.

Рабочее задание:

1)       Использовать HTML тэги при создании документа.

2)       Форматировать текст с использованием каскадных таблиц стилей.

 

2.1 Методическое указание

 

В HTML-документе необходимо разделять данные документа и их представление. Содержание документа задается в виде тэгов HTML. Для определения же визуального представления документа следует использовать таблицы стилей (CSS - Cascading Style Sheets) (через CSS задаются интервалы между строками текста, отступы, цвета, используемые для текста и фона, размер и стиль шрифтов и другое оформление).

Существует несколько основных тэгов HTML, которые должны присутствовать в тексте любой web-страницы. Каждая web-страница обязана содержать тэг <HTML>, располагаемый в самом начале (каждый из тэгов имеет открывающую (например, <HTML>) и закрывающую части (например, </HTML>)). Этот тэг описывает документ как web-страницу, выполненную в формате HTML. Непосредственно за тэгом <HTML> обычно следует тэг <HEAD>, который указывает на наличие текста, содержащего наименование страницы и дополнительные сведения о ней. В раздел HEAD обычно вложен тэг <TITLE>, служащий для обозначения наименования страницы, (наименование страниц обычно отображается в строке заголовка окна браузера). Затем следует тэг <BODY>, который указывает на начало "тела" web-страницы. В этом разделе размещается весь текст, отображаемый браузером, графика, таблицы и другие элементы содержимого страницы, которые увидит посетитель, обратившийся к сайту.

Пример HTML-документа:

<html>

<head><title>Online обучение: HTML</title></head>

<body>

 

Текст сайта

 

</body>

</html>

Любой текст разделяется на последовательность абзацев. Для того чтобы начать новый абзац (при редактировании страницы в режиме дизайна), как и в большинстве текстовых редакторов, достаточно нажать клавишу “Enter”. При этом в исходный текст HTML-документа автоматически вставляются открывающий и закрывающий теги <Р>. Для создания принудительного перехода на новую строку используется комбинация клавиш “Shift+Enter”. В исходный код в этом случае будет добавлен тег <BR>.

Как правило, текст документа должен содержать заголовки. Причем это будет не просто выделенный крупным шрифтом, цветом или каким-либо другим образом текст, а именно структурная единица - заголовок. В языке HTML существует шесть уровней заголовков: тег <H1> задает наиболее важный (заголовок первого уровня) и <H6> - наименее важный (заголовок шестого уровня). При использовании этих элементов следует соблюдать их иерархию.

Общим заголовком документа должен быть заголовок первого уровня. Не следует пропускать уровни, используя для заголовков разделов сразу заголовки третьего или четвертого уровня.

Для каждого блока текста можно установить его тип, то есть сделать этот текст заголовком любого уровня или форматированным текстом. Проще всего это делать, используя панель свойств объекта (рисунок 8). Если панели нет на экране, то можно ее открыть, выполнив команду “Window – Properties” (кроме того, указать тип блока текста (абзаца) можно в меню “Text – Paragraph Format” или в разделе “Paragraph Format”  контекстного меню, появляющегося при щелчке правой кнопкой мыши в поле документа).

 

 

Рисунок 8 – Панель свойств объектов

 

Выделив блок текста или просто установив курсор в любое место абзаца, можно выбрать его тип в поле “Format”. В соответствии с элементами языка HTML возможны следующие варианты: “Paragraph” - обычный абзац (ограничен тегами <Р>), “Heading 1…6” - заголовки соответствующего уровня (ограничены тегами <Н1>…<H6>), “Preformatted” - предварительно форматированный текст (тег <PRE>) или  “None” - блок текста перестает быть абзацем.

Использование тегов визуального форматирования является нежелательным.

В Dreamweaver для форматирования текста можно использовать каскадные таблицы стилей (CSS, Cascade Style Sheet). Преимущество CSS - удобство редактирования дизайна всего сайта путем изменения всего одного файла CSS и сокращения объема сайта из-за выноса оформления в отдельный файл CSS.

Таблица стилей (CSS) состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений обрамляется фигурными скобками и состоит из набора свойств и их значений. Схематически это можно показать так:

селектор {

свойство1: значение;

свойство2: значение;

...

свойствоn: значение;

}

Dreamweaver позволяет редактировать правила CSS с использованием специальных панелей и диалоговых окон, которые представляют правила в наглядной форме.

Для отображения панели стилей нужно выполнить команду “Window – CSS Styles” или нажать на кнопку “CSS Styles” в навигаторе панелей (см. рисунок 9).

 

 

Рисунок 9 – Панель стилей

 

Для создания нового стиля (правила) надо нажать кнопку “New CSS Rule” на панели стилей или выбрать команду  “New...” из контекстного меню, появляющегося при щелчке правой копкой мыши в любом месте панели стилей.

В открывшемся диалоговом окне (см. рисунок 10) необходимо указать тип создаваемого стиля - список “Selector Type”. “Class” (can apply to any HTML element) создает именованный стиль, который может быть применен к различным блокам текста. При этом в поле “Selector Name” необходимо указать имя - идентификатор стиля (CLASS). Оно должно начинаться с символа “точка”, являющегося идентификатором класса. “Tag” (redefine an HTML element) переопределяет параметры форматирования определенного тега, который необходимо выбрать в списке “Tag”. “ID” (applies to only one HTML element) позволяет определить форматирование для тегов, содержащих особый идентификатор. Идентификаторы используются аналогично именованным стилям, но предназначены для форматирования элементов, требующих индивидуальной обработки. В остальных случаях предпочтительным является использование именованных стилей (CLASS).

Далее необходимо определить, где будет расположено описание стилей - список “Rule Definition”. При выборе “New Style Sheet File” таблица стилей будет сохранена в отдельном файле, ссылка на который будет вставлена особым образом в заголовок создаваемого HTML-документа (если с редактируемой страницей уже связаны какие-либо файлы с описанием стилей, то их имена будут перечислены в списке). При таком подходе одна и та же таблица стилей может использоваться в различных документах. Это особенно удобно, когда надо определить элементы форматирования, общие для всех страниц сайта. Во втором случае (This Document Only) описание стилей будет сохранено непосредственно в редактируемом документе (и соответственно может быть использовано только в его пределах). Такой вариант удобен для создания стилей, специфичных для данной страницы.

 

 

Рисунок 10 – Создание нового стиля

 

После того как все параметры определены, можно нажать “ОК”, после чего откроется диалоговое окно определения параметров нового стиля (см. рисунок 11). В левой его части в списке “Category” можно выбирать группы параметров форматирования, которые необходимо определить.

“Type” - параметры форматирования шрифта. В поле “Font-family” можно задать гарнитуру шрифта. Поле “Font-size” позволяет определить размер шрифта. Он может быть задан числовой величиной, тогда в соседнем поле необходимо указать единицы измерения (наибольший интерес здесь представляют пиксель – “pixels” и традиционная типографская единица измерения пункт – “points”). Кроме того, размер может быть задан при помощи одной из предопределенных относительных единиц измерения или в процентах от унаследованного размера.

 

 

Рисунок 11 – Диалоговое окно определения параметров нового стиля

 

В поле “Font-style” можно выбрать один из вариантов начертания шрифта: “normal” - обычное (используется по умолчанию), “italic” - курсив, “oblique” - наклонное. Параметр “Line Height” позволяет задать расстояние между базовыми линиями смежных строк текста - интерлиньяж. Свойство “Text-decoration” применяет к тексту подчеркивание (“underline”), надчеркивание (линия над текстом, “overline”), зачеркивание (“line-through”), эффект мигания (“blink”), “none” используется по умолчанию для обычного текста.

Параметр “Font-weight” задает вес, или жирность, шрифта. Свойство “Font-variant” используется для отображения элемента маленькими прописными буквами (значение “small-caps”). Параметр “Text-transform” оказывает влияние на использование заглавных букв в элементе (“capitalize”) - отображает первую букву каждого слова в верхнем регистре, “uppercase” - отображает все символы в верхнем регистре, “lowercase” - отображает все символы в нижнем регистре). Параметр “Color” используется для задания цвета текста.

“Background” - параметры свойства фона, применяемые к "холсту" позади элемента. “Background Color и Background Image” определяют соответственно цвет фона и фоновое изображение элемента. Если задано фоновое изображение, то свойство “Repeat” определяет, как оно будет повторяться (“repeat” - в вертикальном и горизонтальном направлениях, “repeat-x” - только по горизонтали, “repeat-у” - только по вертикали, “no-repeat” - без повторов, один раз). Параметром “Attachment” определяется, будет ли прокручиваться фоновое изображение вместе с документом (по умолчанию, “scroll”) или нет (“fixed”). Свойства “Horizontal Position” и “Vertical Position” определяют начальное положение фонового изображения относительно прямоугольника, окружающего содержимое элемента.

“Block” - параметры выравнивания и взаимного расположения фрагментов текста в элементе. Свойство “Word Spacing” задает интервал между словами. “Letter Spacing” определяет размер интервала между символами. Параметр “Vertical-alignment” влияет на вертикальное выравнивание элемента. “Text-align” задает горизонтальное выравнивание текстовых элементов. Свойство “Text-indent” определяет размер отступа перед первой строкой текста элемента. Параметр “Whitespace” определяет, каким образом используются пробелы, заданные в исходном документе: “normal” - трактует текст обычным образом, заменяя множественные пробелы на один; “pre” -аналог тега <pre> в HTML (но при этом не используется шрифт с фиксированной шириной); “nowrap” - предотвращает перенос элементов текста на следующую строку, если не задан тег <br>.

Параметры из раздела “Border” позволяют управлять выводом и параметрами рамок вокруг элементов.

“List” - параметры форматирования списков.

“Positioning” - параметры позволяют преобразовать тег или выделенный блок текста в слой. Использование ограничено тем, что эти свойства поддерживаются только Internet Explorer.

“Extensions” - параметры, не поддерживаемые большинством браузеров.

После того как все необходимые параметры стиля определены, он появится в списке в панели стилей. Выбранный в списке стиль применяется к текущему выделенному элементу документа.

Чтобы включить созданные стили в HTML-страницу, необходимо в разделе <HEAD> поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:

 

<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">,

 

где "styles.css" - имя файла с созданными стилями CSS.

 

3 Лабораторная работа №3. Создание гипертекстовых ссылок

 

Цель работы: создание гипертекстовых ссылок в web-документе.

Рабочее задание:

1)  Создать ссылку в редакторе Dreamweaver.

2)  Создание якоря.

 

1.1       Методическое указание

 

3.1.1 Создание гипертекстовой ссылки.

Существует несколько способов создания гипертекстовых ссылок на различные типы файлов. Начать следует с создания навигации по сайту. Для создания связи между файлами нужно точно указать путь, по которому можно добраться до нужного документа. Путь может быть как полный - начинаться с указания интернет адреса (например: http:// Dreamweaver/index.htm), так и корнезависимый ( ../index.htm ). Давайте рассмотрим, как процесс задания связей между документами реализован в DreamWeaver. Для того чтобы сделать из любого слова или нескольких слов гиперссылку - достаточно "прицепить" к нему интернет-адрес. Для наглядности сделаем так: в тексте "Macromedia DreamWeaver. Практикум " выделите словосочетание " Macromedia DreamWeaver." и в поле "Link" вкладки "Properties" введите начальный адрес этого руководства (http://Dreamweaver/) и нажмите "Enter".

Image42.GIF

Рисунок 12 – Создание гиперссылки

Как вы можете заметить - слова " Macromedia DreamWeaver.  Практикум" изменили цвет и стали гиперссылкой. Для удаления гиперссылки - просто удалите интернет адрес в поле "Link" вкладки "Properties" и так же нажмите клавишу "Enter". Теперь перейдем к корнезависимому пути.

Image43.GIFВыделив " Macromedia DreamWeaver", нажмите кнопку с изображением папки

и в открывшемся диалоге вы можете указать страницу, на которую следует перейти при нажатии по этой ссылке. Причем, по умолчанию откроется та папка, где расположена страница, с которой вы хотите дать ссылку. Так как и эта (текущая страница, на которой я создаю гиперссылку) и та страница, куда эта гиперссылка направит, расположены в одной папке - то достаточно просто выделить мышкой нужную страницу и нажать кнопку "ОК".

http://24ikt.ru/html/6/pic/Image75.GIFТеперь поставьте курсор мыши на эту ссылку и раскройте список "Target" вкладки "Properties".
В этом списке имеется четыре пункта, причем в нашем случае работать будут только два. Первый пункт - "_self" - выведет страницу, на которую указывает гиперссылка в том же окне обозревателя (этот режим устанавливается по умолчанию), и второй - "_blank" - раскроет страницу в новом окне. Остальные пункты меню "Target" понадобятся для работы с фреймами.

Когда вы создаете сайт, то начальная папка этого сайта является корневой, а в ней уже находятся разные файлы и другие вложенные папки.
Если вы посмотрите на HTML - код этой гиперссылки, то увидите, что он принял следующий вид ../index.htm. Причем эти две точки перед черточкой говорят браузеру "подняться" на один уровень вверх по дереву каталога. На два уровня вверх - ../../index.htm и так далее.

В том случае если вы даете ссылку на страницу лежащую во вложенной папке, ссылка примет следующий вид:

<a href="new_folder/new_page_00001.htm">.

Если вы хотите вставить почтовый адрес, то для этого необходиом ввести в поле "Link" вкладки "Properties" адрес электронной почты (например: mailto:***@****.ru ), любая ссылка на почтовый адрес начинается с mailto: , хотя если вы в силу каких-то обстоятельств не хотите руками вписывать слово "mailto:", тогда можете на вкладке "Common" нажать кнопку Image44.GIF, где в поле "Text" впишите текст ссылки, а в поле "E-Mail" - адрес электронной почты. И в том, и другом случаях эффект будет тот же.

 

3.1.2      Создание якоря.

Еще один тип ссылок - "якоря". Использовать этот тип ссылок особенно полезно при большом количестве информации, расположенной на одной странице.

Давайте установим переход вверх текущей страницы. Первое, что нужно будет сделать - это установить сам якорь на странице и нажать кнопку Image45.GIFна вкладке "Common". В открывшемся диалоге укажите имя якоря имя "new_page_11_top".

Теперь осталось только установить здесь ссылку на этот якорь. Для этого нужно выделить текст, и в поле "Link" вкладки "Properties" ввести адрес гиперссылки, ссылающейся на этот якорь: #new_page_11_top. И мы получим следующий результат:

Image46.GIF

Решетка (#) перед именем якоря - это и есть команда браузеру "направиться" к отметке под именем new_page_11_top. Если вы хотите сослаться на якорь, расположенный на другой странице, тогда укажите путь до самой страницы с якорем. Для примера, я хочу направить посетителей на страницу с "примерами якорей". Так как имя страницы с примерами – “examples.htm” , а якорь, на который мы хотим перенаправить, имеет имя “02”, то и ссылка будет иметь следующий вид: (examples.htm#02 ).

 

4 Лабораторная работа №4. Создание и форматирование таблиц

 

Цель работы: изучение модели таблиц HTML, добавление таблицы в Dreamweaver.

Рабочее задание:

1)  Создать таблицу в документе.

2)  Табличный дизайн.

 

4.1 Методическое указание

 

4.1.1 Вставка таблицы в документ.

Одним из наиболее широко используемых в HTML средств являются таблицы. Причем очень часто они используются не только традиционно - как метод представления табличных данных, но и как средство форматирования web-страниц.

Основное назначение HTML-таблиц - упорядочить данные (текст, форматированный текст, изображения, ссылки, формы, поля форм, другие таблицы) и разместить их в отдельных ячейках.

Для того чтобы создать новую таблицу, перейдите на вкладку "Commons" панели "Insert" и нажмите кнопку  “Table”. В появившемся диалоге заполните необходимые поля.

Image48.GIF

 

 

 

 

 

 

 

 

 

 

Рисунок 13 – Вставка таблицы

 

“Rows” - количество строк в таблице;

“Columns” - количество столбцов в таблице;

“Table width” - ширина таблицы, причем в выпадающем меню вам нужно указать единицы измерения - проценты или пиксели;

“Border thickness” - толщина рамки таблицы в пикселях, причем если вы поставите значение равным нулю, то сама таблица будет не видна на странице;

“Cell Padding” - расстояние отступа внутри ячеек таблицы;

“Cell Spacing” - расстояние между границами ячеек таблицы.

Набор переключателей “Header” (Верхний колонтитул) позволит нам создать "шапку" и выделенный первый столбец таблицы.

В этом наборе доступны переключатели “None” (нет ни "шапки", ни выделенного первого столбца), Left (выделенный первый столбец), “Тор” ("шапка") и “Both” (и "шапка", и выделенный первый столбец).
Ячейки, составляющие "шапку" и выделенный столбец, будут оформлены как ячейки заголовка, а текст, который мы введем в них, будет автоматически выровнен по центру и выделен полужирным шрифтом.

В поле ввода “Caption” (Заголовок) вводится название таблицы. Это название будет находиться над создаваемой таблицей. Раскрывающийся список “Align caption” (Выравнивание) позволит нам задать местоположение и выравнивание названия (если, конечно, мы его ввели). Здесь доступны следующие пункты:

1)       “default” (по умолчанию)— выравнивание выполняет сам Web-обозреватель, обычно в этом случае название находится над таблицей и выравнивается по центру;

2)       “top” — название находится над таблицей и выравнивается по центру;

3)       “bottom” — название находится под таблицей и выравнивается по центру;

4)       “left” — название находится над таблицей и выравнивается по левому краю;

5)       “right”— название находится над таблицей и выравнивается по правому краю.

В области редактирования “Summary” (Итого) вводится примечание таблицы. Это примечание не выводится Web-обозревателями на экран, но может быть использовано для каких-то других целей (например, его могут обрабатывать программы, читающие экранный текст). Задавать его не обязательно.

Image49.GIF

После того как таблица создана, вы можете изменять ее размеры перетаскиванием границ при помощи мышки. Наведите курсор на один из трех квадратиков в выделении таблицы.  Теперь поставим текстовый курсор в любую ячейку таблицы и наберем какой-нибудь текст. Повторим то же самое с остальными ячейками таблицы. Ячейка таблицы обязательно должна иметь хоть какое-то содержимое, иначе Web-обозреватель может отобразить ее некорректно. Если же ячейка все-таки должна быть пустой, вставьте в нее неразрывный пробел (его код HTML — &nbsp;), как это делает в подобных случаях сам Dreamweaver. Чтобы определить свойства таблицы – вывести вкладку "Properties", кликнув левой кнопкой мышки по границе таблицы.

Image50.GIF

Рисунок 14 – Cвойства таблицы

Вы сможете изменить свойства таблицы и настроить ее вид.
Поле “Table id” - задайте имя таблицы (атрибут не обязательный).

Поля “Rows” и “Cols” - количество строк и столбцов в таблице.

Поля “V” и “H” - ширина и высота таблицы в пикселях или процентах.

Поле “Align” - выравнивание таблицы по левому краю, центру или правому краю.

Поле “CellPad” - расстояние внутри ячейки (между содержимым и границей ячейки).

Поле “CellSpase” - расстояние между ячейками таблицы.

Поле “Bolder” - ширина границы таблицы.

“Bg Color” - цвет фона таблицы.

“Brdr Color” - цвет границ для всей таблицы.

“Bg Image” - задание фонового рисунка для таблицы.

Там же находятся еще шесть дополнительных кнопокImage51.GIF:

1)  кнопка “Clear Column Widths” - очистить значения ширины столбца;

2)  кнопка “Clear Row Heights” - очистить значения высоты строки;

3)  кнопки “Convert Widths to Pixels” и “Convert Widths to Percent" - преобразовать ширину ячеек в пиксели и преобразовать ширину ячеек в проценты;

4)  кнопки “Convert Heights to Pixels” и “Convert Heights to Percent” - преобразовать высоту ячеек в пиксели и преобразовать высоту ячеек в проценты.

Кроме задания свойств таблицы существует и задание свойств ячейки или группы ячеек. Для задания свойств ячейки - кликните в ней левой кнопкой мышки. Если же вы хотите задать свойства группе ячеек, то после того, как кликните по полю первой ячейки, не отпуская левую кнопку мышки,  выделите требуемые ячейки (вы можете выделить таким способом хоть всю таблицу). При выделении - границы всех добавленных ячеек будут окрашиваться в другой цвет. После того,  как ячейки выделены - снова обратите внимание на панель "Properties".

 

Image52.GIF

 

Рисунок 15 – Свойства ячеек

 

“Horz” - горизонтальное выравнивание содержимого ячеек (по левому краю, по центру или по правому краю).

“Vert” - вертикальное выравнивание содержимого ячеек (по верху, посередине, по низу или по базовой линии).

В полях “W” и “H” - укажите ширину и высоту выбранных ячеек, если вам необходимо указать значения в процентах - добавьте после числового значения символ %.

“Bg” и “Brdr” - установление фона ячеек и установление цвета границ ячеек. А с помощью верхнего поля Bg - вы сможете задать фоновое изображение для ячеек.

Флажок “No Wrap” - запрет переноса строки.

Флажок “Header” - для форматирования выбранных ячеек как заголовок таблицы.

Теперь кликните левой кнопкой мышки внутри любой ячейки и нажмите кнопку Image53.GIF. При помощи этого диалога вы сможете разделить выбранную ячейку на несколько частей. Переключатели “Rows” и “Columns” - разделить на строки и столбцы соответственно. Number of... - на какое количество строк или столбцов следует делить выбранную ячейку.

Image54.GIF

Теперь выделите две ячейки и нажмите кнопку Image55.GIF.
Две выбранные вами ячейки объединились в одну, и эту новую объединенную ячейку вы можете снова делить или наоборот объединять с другими, как и стандартные.

К любой таблице можно быстро применить форматирование. Для этого следует выделить таблицу и в меню “Commands” выбрать пункт “Format Table” (Форматировать таблицу)” и в открывшемся диалоге вы сможете настроить дизайн вашей таблицы.

 

Image56.GIF

 

Рисунок 16 – Форматирование таблицы

 

После выбора одного из предустановленных шаблонов вы можете изменять все его атрибуты на свой вкус. Вы можете вырезать, вставлять или копировать ячейки таблицы.  

Для того чтобы вырезать ячейку (или несколько ячеек), вам нужно выделить ее и дать команду “Edit – Cut”. Ячейка (или несколько) будет удалена из таблицы.

 Для того чтобы скопировать ячейку (или несколько ячеек), вам нужно выделить ее и дать команду “Edit – Copy”. Ячейка (или несколько) будут скопированы. Для вставки скопированных или вырезанных ячеек воспользуйтесь командой “Edit – Paste”.

Прежде чем двигаться дальше попробуйте свои силы в создании простейших таблиц.

Image4.PNG

 

Рисунок 17 – Пример таблицы

 

4.1.2 Табличный дизайн.

Предположим, мы делаем интернет-магазин. Нам нужно поместить на страницу название, описание, цену и фотографию товара.

 

Image57.GIF

 

Рисунок 18 – Пример интернет-магазина

 

С помощью специально отформатированной таблицы мы можем разместить несколько фрагментов текста и графическое изображение так, как нам нужно. А если нам что-то не понравится, мы можем слегка переделать эту таблицу и получить совершенно другой результат.

Вот мы и подошли вплотную к табличному дизайну, т. е. способу построения Web-страниц с использованием таблиц. Основной принцип табличного дизайна – весь текст и вся графика помещаются в ячейки таблицы, что позволяет делать с ними все, что угодно. Как правило, такие таблицы (назовем их таблицами разметки) имеют невидимые границы, а линейки создаются с помощью очень тонких ячеек с фоновым заполнением. Таблицы разметки очень сложны, используют различное форматирование и многократное объединение ячеек и практически всегда — вложенные таблицы.

Image58.GIFСоздание сложных таблиц разметки вручную — высший пилотаж Web-дизайна. Не всякий, даже опытный Web-дизайнер, возьмется делать сложные страницы на основе таблиц. И все это из-за невероятной сложности получающегося HTML-кода. Поэтому очень часто в коде Web-страниц, построенных на основе таблиц, встречаются ошибки, из-за чего их не всегда может отобразить Web-обозреватель. В самом деле, во всех этих многочисленных объединенных ячейках и в сложнейшем форматировании можно элементарно запутаться. И в то же время любой может значительно улучшить вид своей страницы, используя относительно простую табличку. Проиллюстрируем это примером.

Как видите, это совсем простая таблица с двумя объединенными ячейками.

 

http://24ikt.ru/html/6/pic/areas2.jpg

http://24ikt.ru/html/6/pic/arrow1.gif

http://24ikt.ru/html/6/pic/areas3.gif

 

Рисунок 19 – Пример создания таблицы

 

 

5 Лабораторная работа № 5. Вставка изображений и других элементов. Использование графических материалов

 

Цель работы:  вставка иллюстраций в web-документ.

Рабочее задание:

1)       Работа с графикой.

2)       Работа над параметрами объекта.

 

5.1 Методическое указание

 

5.1.1 Работа с графикой.

Помимо всего прочего, что вы сделали в предыдущих работах, вы сможете задать фон вашей страницы. Если в качестве фона вы просто хотите задать какой-либо цвет, то воспользуйтесь для этого пунктом "Background (Фон)" (кликнув левой кнопкой мышки по относящемуся к этому пункту квадратику). И в раскрывшейся палитре выберите нужный вам цвет. Фоновую картинку можно задать, выбрав файл в соответствующем поле этого же диалогового окна.

 

Image33.GIF

 

Рисунок 20 – Задание фона старницы

 

Вставка графического изображения.

Поместим текстовый курсор в нужное нам место и посмотрим на вкладку “Common” инструментария объектов — там находится кнопка “Image” (Изображение). Нажмем на нее и в появившемся на экране меню выберем пункт “Image”. Также можно воспользоваться пунктом “Image” меню “Insert” или нажать <Ctrl>+<Shift>+<I>. После этого на экране появится диалоговое окно “Select Image Source”.

 

Image34.GIF

 

Рисунок 21 – Диалоговое окно “Select Image Source”

 

Раскрывающийся список папок и список файлов позволят нам выбрать нужную папку и файл. В поле ввода “Имя файла” появится имя выбранного файла (или мы можем сами ввести его туда). А раскрывающийся список “Тип файлов” позволит нам выбрать, какой тип файлов нам нужно найти. Все это знакомо нам по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие — справа находится панель предваритель ного просмотра. А если мы желаем ее убрать отключим флажок “Preview images”. Итак, мы выбрали файл. Осталось нажать кнопку ОК. Но Dreamweaver потребует от нас еще кое-какую информацию, выведя диалоговое окно “Image Tag Accessibility Attributes” (Атрибуты доступности тега изображения).

Комбинированный список “Alternate text” (Альтернативный текст) этого окна служит для задания, так называемого текста замены. Это придумано для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображения, помещенного на ней, отобразит пустую рамку соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель выведет небольшую подсказку, содержащую этот самый текст замены. Поэтому рекомендуется всегда пользоваться этой возможностью.

Image36.GIFСобственно в список “Alternate text“ вводится краткий текст замены. Его ограничение — не более 50 символов. Если нам нужно выводить на экран более подробный текст замены, его можно сохранить в отдельный файл Web-страницы, а потом ввести его интернет-адрес в поле ввода “Long description”. Также можно щелкнуть кнопку в виде папки, расположенную правее этого поля, и выбрать нужный файл в диалоговом окне “Select File”. Закончив ввод данных, нажмем кнопку ОК. Dreamweaver поместит графическое изображение в то место, где на данный момент находится текстовый курсор.

 

5.1.2 Параметры графического изображения.

Теперь сохраним получившуюся страницу, выделим изображение, если оно не выделено, и посмотрим на редактор свойств. То, что мы там увидим: поля ввода “W” и “Н” позволяют нам задать размеры изображения, введя его, соответственно, ширину и высоту вручную. Это может быть полезно, если выделенное изображение — часть оформления сайта; в остальных случаях удобнее задавать размеры изображения, перетаскивая мышью маркеры изменения размера.

 

Image35.GIF

 

Рисунок 22 – Окно редактора свойств

 

Вообще-то, Dreamweaver при помещении на Web-страницу графического изображения сам помещает в эти поля ввода его изначальные ширину и высоту. Как мы уже знаем, Web-обозреватель сразу после загрузки страницы отображает еще не загруженные изображения в виде пустых рамок. Если размеры изображений были явно заданы, они будут сразу же применены к рамкам, и оформление страницы не нарушится. В противном случае Web-обозреватель отобразит рамки некоего размера, по умолчанию, и при последующей загрузке изображений их размеры будут меняться, что вызовет перерисовку самой страницы. А это очень неприятно.

Поля ввода “V Space” и “Н Space” задают, соответственно, вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.

Поле ввода “Src” задает интернет-адрес файла, где хранится графическое изображение. Справа от него видны две кнопки. Нажав на правую из них (с изображением папки), мы откроем диалоговое окно “Select Image Source”.

Мы также можем изменить имя файла изображения, щелкнув по изображению правой кнопкой мыши и выбрав пункт “Source File” в контекстном меню, или просто дважды щелкнув мышью по изображению. После этого на экране появится диалоговое окно “Select Image Source”.

Поле ввода “Low Src” аналогично полю “Src”, за тем исключением, что задает имя файла, где сохранено так называемое "черновое" изображение. "Черновое" изображение имеет меньший размер, как правило, за счет более низкого качества, и придумано, опять же, для владельцев низкоскоростных каналов связи. Web-обозреватель первым делом загрузит "черновик", т. к. он имеет значительно меньший размер, и выведет его на странице. А уже потом, пока пользователь просматривает готовую страницу, постепенно загружается основное изображение и подменяет собой "черновик".

Рекомендуется изготавливать "черновик" только тогда, когда оригинальное изображение слишком велико, чтобы быстро загрузиться. В частности, это подойдет, если мы соберемся делать сайт с художественной графикой.

Поле ввода “Border” позволяет задать толщину рамки, отображаемой вокруг изображения, в пикселах. По умолчанию, она равна нулю, т. е. рамки нет.

Комбинированный список “Alt” задает уже знакомый нам краткий текст замены.

А теперь обратимся к раскрывающемуся списку “Align”. Он позволяет нам задать выравнивание изображения, фактически — относительное местоположение его и текста, в котором оно находится.
Список “Align” содержит следующие пункты:

1)       “Default” — расположение по умолчанию, обычно аналогично пункту “Baseline”;

2)       “Baseline” — низ изображения совпадает с базовой линией текста (воображаемой линией, на которой находится строка текста) строки, в которой оно находится;

3)       “Тор” — верх изображения совпадает с верхом текста строки, в которой оно находится;

4)       “Middle” — середина изображения совпадает с базовой линией текста;

5)       “Bottom” — низ изображения совпадает с низом текста (обычно не то же самое, что “Baseline”);

6)       “TextTop” — верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что “Тор”);

7)       “Absolute Middle” — середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);

8)       “Absolute Bottom” — низ изображения совпадает с низом самого нижнего символа текста;

9)       “Left” — изображение "прижимается" к левому краю страницы, а текст "обтекает" его справа;

10)   “Right” — изображение "прижимается" к правому краю страницы, а текст "обтекает" его слева.

В последних двух случаях изображение становится плавающим. Web-обозревателем влево или вправо, при этом текст, в который оно было вставлено, будет обтекать его. А в точке, где было вставлено плавающее изображение, Dreamweaver отображает специальный маркер плавающего изображения. Этот маркер выводится только для удобства Web-дизайнера и только в Dreamweaver; Web-обозреватель его никак не отображает.

Итак, с редактором свойств мы разобрались. Теперь давайте зададим свойства нашего изображения. Расстояние от текста сделаем по 5 пикселов по горизонтали и вертикали, выравнивание — по левому краю, "альтернативный" Image37.GIFтекст — "всплывающая надпись". И сохраним страницу.

Чтобы вернуть изначальные размеры изображения, мы можем воспользоваться кнопкой отмены), расположенной между полями ввода W и Н редактора свойств и правее их, а также пунктом контекстного меню “Reset Size”. Это полезно, если мы сильно их исказили и хотим начать все сначала.

Специальные изображения.

Язык HTML и Dreamweaver позволяют создавать не только обычные изображения, но и имеющие особые свойства. Это – изображения-гиперссылки, активные изображения и карты-изображения. Они часто используются на Web-страницах, поэтому нам нужно будет их рассмотреть.

Любое изображение может использоваться в качестве гиперссылки, для этого лишь достаточно ввести интернет адрес в поле "Link" панели "Properties".

Причем ссылку вы можете дать как на адрес электронной почты, так и на другую веб страницу. Во втором случае у вас станет доступным список "Target".

Изображение можно сделать Image38.GIFактивным, реагирующим на наведение на него курсором мышки – “Rollover”. Для этого вам нужно будет запастись двумя изображениями, которые будут сменять друг друга, и на вкладке "Common" нажмите соответствующую кнопку. В открывшемся окне вам нужно будет заполнить требуемые поля. В поле “Image Name” укажите оригинальное имя активного изображения, причем в имени могут быть только латинские буквы (с буквы должно начинаться любое активное изображение) и цифры (пренепременно арабские!-:). В поле “Original Image” введите путь до основного изображения, того, которое будет первым загружаться на странице.

В поле “Rollover Image” введите путь до "изображения - эффекта", - это изображение будет появляться только при наводе курсора мыши на ваше активное изображение. Поставьте флажок в поле “Preload Rollover” - в этом случае оба рисунка сразу будут загружены броузером и выполнение эффекта начнется сразу же при наведении мышки. В противном случае (при отключенной галочке), при наведении на такое изображение мышки - браузер начнет загрузку второго изображения. В поле “Altemate Text” - введите текстовый комментарий, всплывающий при наведении курсором мышки на изображение. В поле Go To URL введите интернет адрес.

Изображения-карты.

Карта - это цельное изображение с размеченными "горячими областями", причем каждая такая область является гиперссылкой и ей соответствует свой интернет адрес.

 

int.jpg

 

Рисунок 23 – Карта

 

Для начала разместите рисунок на странице, выделите его, кликнув по нему левой кнопкой мышки и на вкладке "Properties" при помощи бирюзовых фигур (в левом нижнем углу - группа элементов Map) выберите один из методов выделения "горячей области". Так как для примера я хочу сделать "горячей областью" синие пиктограммы (см. рисунок 23), то ближе всего к этому фигура “прямоугольник”. Но вы можете выбрать как круг, так и фигуру неправильной формы. Нажмите на четырехугольник и выделите интересующую вас область.

Image40.GIF

Выделенная вами фигура примет вид:

Image10.JPG

Вам осталось только ввести интернет адрес в поле “Link” (ссылки могут быть на другие страницы вашего сайта или на другие сайты, либо на почтовые адреса), выбрать один из пунктов поля Target и ввести альтернативный текст в поле Alt.

Image41.GIFПосле выделения вы можете перемещать выделенную область, нажав для этого кнопку со стрелочкой - в левом нижнем углу. А для выделения фигур неправильных форм достаточно кликать левой кнопкой мышки по периметру области для выделения. Напоследок дайте оригинальное имя вашей карте в поле ввода “Map”.

Приложение 1

 

Основные требования к интернет-сайту

 

Тема сайта выбирается студентом из списка и утверждается преподавателем. Приступать к созданию сайта необходимо после утверждения темы и согласования с преподавателем структуры сайта. Данные процедуры проводятся в течение недели после выдачи задания на лабораторную работу.

Структура размещения информации на сайте должна исходить из удобства ее просмотра пользователями.

При создании сайта необходимо придерживаться трех основных принципов: удобство и быстрота нахождения требуемой информации, удобство восприятия информации сайта, скорость загрузки страниц.

Объем сайта должен составлять не менее 10 страниц формата А4. Излагаемый материал должен быть логично структурирован, оформлен для удобства восприятия, включать рисунки и таблицы. Информация сайта, скопированная из других источников, не должна нарушать авторские и другие права пользователей на эту информацию.

Основой разработки страниц сайта является язык HTML. HTML-страницы должны обязательно включать конструкции языка HTML, относящиеся к каждой из групп:

1)     тэги для управления шрифтом в документе;

2)     тэги для управления форматом документа;

3)     тэги для описания элементов перечислений;

4)     тэги для построения таблиц;

5)     тэги для организации гиперсвязей;

6)     тэги для включения в документ изображений.

Одна или несколько страниц сайта должны быть выполнены с использованием языков XML и XSL.

Сайт должен иметь уникальный законченный дизайн, разработанный на основе творческого подхода (использовать стандартные шаблоны дизайна не допускается). Оформление дизайна сайта должно быть выполнено с использованием технологии CSS.

Повторяющиеся элементы на страницах сайта должны быть оформлены в соответствии с технологией SSI (т.е. должны быть вынесены в отдельные файлы и включаться в страницу только во время ее загрузки пользователем).

Сайт должен включать не менее двух сценариев на языке JavaScript, которые будут расширять функциональные возможности сайта для пользователя (упрощать доступ к информации (элементы поиска информации и навигации), информировать о данных текущего сеанса работы с сайтом (время работы, идентификационная информация, просмотренные страницы), защищать конфиденциальные данные сайта, а также добавлять другие функции, не мешающие восприятию материала). Допустимо использовать стандартные скрипты, имеющиеся в Интернете.

Создание сайта может быть также выполнено с использованием технологий AJAX, jQuery, PHP, CGI, MySQL, Flash, Silver light и др.

На сайте могут применяться элементы связи с пользователями - форма для отправки электронных писем, тематический форум, блог, чат и др.

Все отступления от основных требований должны быть согласованы с преподавателем.

Сайт может быть разработан с использованием одного из стандартных средств: Adobe Dreamweaver, MS FrontPage, Amaya и др. Тестирование сайта может быть проведено, например, с использованием локального web-сервера denwer (denwer.ru) или IIS, входящего в Windows. Корректность работы сайта должна быть проверена в большинстве стандартных браузеров (в том числе и их версиях): IE, FireFox, Opera, Safari, Chrome.

После создания сайт необходимо разместить в Интернете на одном из сайтов, предоставляющих бесплатный хостинг (holm.ru, narod.ru и др.) и протестировать.

Процесс создания сайта контролируется преподавателем. Вначале студент должен согласовать структуру сайта. Далее (второй этап) необходимо согласовать дизайн основных страниц и их контент (информационное наполнение). На третьем этапе согласовывается полностью готовый сайт перед размещением его в Интернете. После выполнения всех требований студент допускается к защите работы.

При защите работы сдается электронная копия сайта.

 

Приложение 2

 

Темы сайтов

 

1.     Создать Интернет- магазин.

2.     Организовать заказ билетов.

3.     Организовать работу кадрового агентства.

4.     Организовать службу проката автомобилей.

5.     Организовать работу туристического агентства.

6.     Организовать работу библиотеки (выдача книг).

7.     Организовать работу магазина (учет товаров).

8.     Организовать работу поликлиники (учет посещений врачей).

9.     Организовать работу сервисного центра по обслуживанию техники.

10.  Организовать систему распространения обновлений программного обеспечения.

11.  Организовать систему автоматизации работы агентства недвижимости.

12.  Организовать работу видео-проката.

13.  Организовать оплату за доступ к информационным ресурсам.

14.  Организовать работу отеля.

15.  Создать средства тестирования знаний (в БД хранятся билеты по дисциплинам и варианты ответов. По результатам тестирования подводится итог и выводится оценка (деканат – кафедра – группа – студенты – преподаватели – билеты – вопросы к билетам – результаты тестирования)).

16.       Расписание маршрутов движения транспорта (станции - маршруты - станции маршрутов - время прибытия/убытия).

17.       Автопарк (учет автомобилей: за кем закреплен, километраж, путевки (гараж – подразделение - водители - путевки).

18.       Буфет (учет продуктов: когда, кем, что и сколько поставлено, кто получал, сколько продано, сколько осталось (буфеты – продукты – типы продуктов – приход/расход – перечень продуктов - работники)).

19.       Радиодетали.

20.       Картотека больных (кто и когда поступил в больницу, с каким диагнозом, как проходил курс лечения).

21.       Рецепты (раздел – подраздел – тип рецепта - рецепта).

22.       Записная книжка-планировщик (пользователь – планировщик – мероприятия).

23.       Музыкальная картотека.

24.       Университет (деканат – кафедра – группа – студенты – экзаменационные ведомости – дисциплины – преподаватели – оценки - договора поступления - оплаты).

 

Список литературы

 

1.    Adobe Dreamweaver CS4: офиц. учебный курс. - М.: Эксмо, 2009. - 304 с.

2.    Александров  А.В.,  Сергеев Г.Г.,  Костин С.П. Создание web-страниц и web-сайтов - М.: Триумф, 2008. - 288 с.

3.    Дронов, В.А. Adobe Dreamweaver CS4 (+ CD-ROM). - М.: BHV, 2009. - 832 с.

4.    Кисленко, Н.П. HTML. Самое необходимое (+ CD-ROM). – СПб.: БХВ-Петербург, 2008. - 352 с.

5.    Коэн, И.Л., Коэн, И.Д. Полный справочник по HTML, CSS и JavaScript: [пер. с англ.] / И.Л. Коэн, И.Д. Коэн. - М.: ЭКОМ, 2007. - 1168 с.

6.    Мейер, Э. CSS - каскадные таблицы стилей: подробное руководство / Э. Мейер. - М.: Символ-Плюс, 2008. - 576 с.

7.    Хольцшлаг, М. Языки HTML и CSS для создания Web-сайтов: официальный учебный курс: [пер. с англ.]. - М.: Триумф, 2007. - 304 с.

8.    http://pro.net.ru/ - Записки web-мастера.

9.    Бурсов, М.В., Домненко В.М., Гаврилин Д.А., Николаев Д.Г. Основы работы с HTML-редактором Dreamweaver: учеб.-метод. пособие. – СПб.: ГИТМО (ТУ), 2002. - 104 с.

10.  Дригалкин, В.В. HTML в примерах. Как создать свой Web-сайт: самоучитель. - М.: Диалектика, 2003. - 192 с.

11.  Кузнецов, М.В., Симдянов И.В., Голышев С.В.PHP 5. Практика разработки Web-сайтов, - СПб.: БХВ-Петербург, 2005. - 960с. ил.

12.  Пауэрс, Д. Adobe Dreamweaver, CSS, Ajax и PHP. – СПб.: BHV-CПб, 2009. - 1056 с.

13.  Ташков, П. Веб-мастеринг на 100%. HTML, CSS, JavaScript, PHP, CMS, графика, раскрутка. - СПб.: Питер, 2009. - 512 с.

14.  Экслер, А. Создание и раскрутка сайтов в Интернете. - М.: Пресс, 2007. - 288 с.