Презентация "Представление о веб-конструировании"

Представление о веб-конструировании Web -дизайн

Введение в Web Mastering

Этапы разработки документа/узла

• создание на бумаге макета начального документа и внутренних документов узла;
• реализация макета в графическом редакторе с учетом предполагаемой цветной гаммы;
• перенос разработанного макета в редактор визу-ального проектирования и его реализация в нем;
• создание на основе макета шаблона/ов для вну-тренних документов узла;
• создание на основе шаблона документов и напол-нение их содержимым;
• публикация (копирование) узла на удаленный компьютер;
• проверка корректности ссылок.

Требования к дизайну домашней страницы

• информационное наполнение;
• дизайн;
• скорость загрузки документа;
• удобная система навигации;
• отсутствие орфографических и грам-матических ошибок;
• наличие реквизитов для обратной связи ( e-mail, телефон, почтовый адрес и т.д.).

Требования к дизайну узла в целом

• использование единой цветовой гаммы;
• стилизация оформления текстовых элементов, т.е. одинаковое начертание, размер шрифта, выравнивание абзацев и т.д.;
• стилизация оформления списков, таблиц, ссы-лок, меню и т.д.;
• использование шапок (заголовок, логотип, разделители, элементы навигации) и реквизи- тов (почтовые адреса, ссылки на авторские права и т.д.)
• наличие графических элементов, оформлен-ных в едином стиле.

Макет документа

При разработке макета документа следует учесть:

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

Структура Web -узла

Иерархическая

Линейная

В виде паутины

Иерархическая структура web -узла

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

Index.html

www

www

www

www

www

www

www

Линейная структура web -узла

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

www

Index.html

www

www

www

www

www

Организация web -узла в виде паутины

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

Index.html

www

www

www

www

www

www

Типы связей

Связь устанавливаемая между гипертекстовыми доку-ментами называется ссылкой ( link ) или гиперссылкой ( hyperlink ). Существуют следующие типы связей:

• якорь (anchor, target) или закладка ( bookmark) – уста-новка метки перед определенным блоком документа;
• ссылка на закладку (якорь) – обращение к установлен-ной метке;
• относительная ссылка – путь к файлу относительно корневого каталога узла;
• абсолютная ссылка – полный путь к файлу с указани-ем доменного адреса узла и пути к файлу на данном узле.

Методы проектирования HTML -документов

• Средства визуального проектирования:

• Office for Windows ; специализированные редакторы;
• Office for Windows ;
• специализированные редакторы;

• Средства для подготовки документов в исходных кодах ( html -кодирование):

• простой текстовый редактор; специализированные html -редакторы.
• простой текстовый редактор;
• специализированные html -редакторы.

MS Office

Приложения, входящие в состав Office , позво-ляют:

• сохранять свои документы в формате web -страниц;
• вставлять ссылки;
• публиковать страницы, т.е. размещать на удаленном узле;
• облегчать доступ к файлам, расположенным на локальном компьютере или в Интернете;
• интегрированы с Internet Explorer .

Специализированные редакторы

Редакторы визуального проектирования или WYSIWYG ( от англ. What You See Is What You Get ). Примеры:

• Macromedia Dreamweaver;
• Netscape Composer;
• Adobe PageMill;
• AOLpress;
• NetObject Fusion;
• MS FrontPage Editor

и т.д.

Примеры текстовых редакторов

• FarEditor – редактор, входящий в состав файлового менеджера Far и позволяющий разрабатывать доку - менты в различных кодировках( Cyrillic Windows-1251, Cyrillic KOI8-R, Cyrillic DOS-866, Cyrillic ISO-8859-5, Cyrillic MacCyrillic );
• Блокнот – текстовый редактор, позволяющий созда - вать документы в кодировке Cyrillic Windows-1251 ;
• Norton Editor – редактор, входящий в состав файло - вого менеджера Norton Commander и позволяющий разрабатывать в зависимости от версии документы в кодировке Cyrillic DOS-866 или Cyrillic Windows-1251;
• другие редакторы.

Примеры html -редакторов

• Homesite ( www.allaire.com ) – один из популярнейших html -редакторов, позволяющих не только верстать код, но и работать со структурой сайта;
• Hotdog Professional ( www.sausage.com ) – html -редактор, который по многим функциям близок к Homesite , и в котором дополнительно реализовано разграничение доступа к частям проекта, протоколирование выпол-няемых работ и т.д.;
• CoffeeCup HTML Editor++ ( www.coffeecup.com ) – html -редактор содержащий огромный набор заготовок, би-блиотеку рисунков и т.д.
• другие html -редакторы.

Язык HTML

синтаксис языка

Язык HTML

Язык , предназначенный для создания форматированного текста, который на-сыщен изображениями, звуком анима-цией и ссылками на другие объекты, например гипертекстовые документы, графические файлы и т.д., разбросанные по всему пространству Web -серверов Интернет.

Зачем изучать HTML ?

• гибкость;
• глубина понимания;
• упрощение отладки;
• цена;
• независимость.

) и закрывающий ( тег ), причем открывающий тег может иметь атрибуты (параметры), влияющие на его поведение. Контейнер (блок) – структура, состоящая из открывающего или открывающего и закрывающего тегов. Примеры: Тег параметр1=знчение1… Тег параметр1=знчение1… текст другие конструкции /Тег Тег параметр1=значение1… Тег параметр1=значение1… текст другие конструкции " width="640"

Синтаксис языка HTML

Тег (дескриптор) – инструкция языка HTML . Тег может быть открывающий ( тег ) и закрывающий ( тег ), причем открывающий тег может иметь атрибуты (параметры), влияющие на его поведение.

Контейнер (блок) – структура, состоящая из открывающего или открывающего и закрывающего тегов.

Примеры:

• Тег параметр1=знчение1…
• Тег параметр1=знчение1…

текст

другие конструкции

/Тег

• Тег параметр1=значение1…
• Тег параметр1=значение1…

текст

другие конструкции

Структура документов HTML

Документ HTML является блоч-ным элементом и сам состоит из блоков. Два основных блока – это HEAD (определяет свойства документа) и BODY (определяет тело документа). Каждый из них включает другие блоки. HTML -документ состоит из стандарт-ных элементов разметки: заго-ловки, списки, таблицы, пара-графы и т.д., - которые разделе-ны на два типа: строчные и блочные. К блочным относятся параграф, список, таблица. К строчным относятся начерта-ние, текст гипертекстовых ссы-лок.

• … заголовок
• … заголовок
• … заголовок
• … заголовок

• … тело документа
• … тело документа
• … тело документа

Содержимое области HEAD

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

Примеры тегов:

• title – определяет текст, отображаемый в заголовке браузера;
• meta – определяет различные свойства документа, например, тип кодировки, ключевые слова, описание документа, автор и т.д.;
• base href – указывает адрес документа;
• link – определяет ссылку на другой файл.

текст документа текст документа " width="640"

Элемент BODY

Тег определяет тело документа, имеет различные атрибуты для определения цвета фона документа, цвета текста, цвета ссылок и т.д. пример записи:

• параметр1=данные1, параметр2=данные2…

• текст документа
• текст документа

Параметры элемента BODY

• bgcolor – определяет цвет фона для тела документа;
• text – определяет цвет, используемый при выводе на экран текста из данного документа;
• background – определяет адрес URL , откуда будет браться изображение для фона текущего документа;
• link – определяет цвет, который будет использоваться при выводе на экран текста из еще не выбранных вами гипертекстовых связей;
• vlink - определяет цвет, который будет использоваться при выводе на экран текста из уже проверенных вами гипертекстовых связей;
• alink – задает цвет, которым будут выделяться в тексте гипертекстовые связи в тот момент, когда пользова-тель щелкает по ним клавишей мыши.

Элементы форматирования на уровне блоков

• Параграф

• Заголовок

• Горизонтальная линейка

• Перевод каретки

Элементы задающие шрифт

• телетайпный текст;
• стиль с наклонным шрифтом;
• стиль с жирным шрифтом;
• стиль с подчеркиванием текста;
• печать текста шрифтом увеличенного размера;
• печать текста шрифтом уменьшенного размера;
• печать текста со сдвигом вниз (нижний индекс);
• печать текста со сдвигом вверх (верхний индекс);
• стиль с перечеркиванием текста.

текст /FONT size – устанавливает размер шрифта. Изменяет-ся в пределах от 1 до 7. Размер по умолчанию – 3. Может быть указан относительный размер, например size=“+1” или size=“-2” ; color – указывает цвет, которым будет выделен данный текст. Цвета задаются в виде RGB -значения с шестнадцатеричной нотацией, либо выбирается один из 16 стандартных цветов . size – устанавливает размер шрифта. Изменяет-ся в пределах от 1 до 7. Размер по умолчанию – 3. Может быть указан относительный размер, например size=“+1” или size=“-2” ; color – указывает цвет, которым будет выделен данный текст. Цвета задаются в виде RGB -значения с шестнадцатеричной нотацией, либо выбирается один из 16 стандартных цветов . " width="640"

Элементы задающие шрифт

• size=… color=… текст /FONT

• size – устанавливает размер шрифта. Изменяет-ся в пределах от 1 до 7. Размер по умолчанию – 3. Может быть указан относительный размер, например size=“+1” или size=“-2” ; color – указывает цвет, которым будет выделен данный текст. Цвета задаются в виде RGB -значения с шестнадцатеричной нотацией, либо выбирается один из 16 стандартных цветов .
• size – устанавливает размер шрифта. Изменяет-ся в пределах от 1 до 7. Размер по умолчанию – 3. Может быть указан относительный размер, например size=“+1” или size=“-2” ;
• color – указывает цвет, которым будет выделен данный текст. Цвета задаются в виде RGB -значения с шестнадцатеричной нотацией, либо выбирается один из 16 стандартных цветов .

Маркированные списки

• • … первый пункт списка
  • … второй пункт списка
  • … первый пункт списка
  • … второй пункт списка

• вверх

• вниз

• влево

• вверх
• вниз
• влево

Нумерованные списки

• … первый пункт списка
• … второй пункт списка
• … первый пункт списка
• … второй пункт списка

• символ
• слово
• строка
1. символ

2. слово

3. строка
   • символ
   • слово
   • строка

1-я клетка 1-ой строки параметры=… 2-я клетка 1-ой строки параметры=… 1-я клетка 1-ой строки параметры=… 2-я клетка 1-ой строки параметры=… 1-я клетка 1-ой строки параметры=… 2-я клетка 1-ой строки 1-я клетка 2-ой строки … 1-я клетка 2-ой строки … 1-я клетка 2-ой строки … … … " width="640"

Таблица

• …
  …
  …
  …
  …

  параметры=… 1-я клетка 1-ой строки	параметры=… 2-я клетка 1-ой строки	параметры=… 1-я клетка 1-ой строки	параметры=… 2-я клетка 1-ой строки	параметры=… 1-я клетка 1-ой строки	параметры=… 2-я клетка 1-ой строки
  1-я клетка 2-ой строки	1-я клетка 2-ой строки	1-я клетка 2-ой строки

" width="640"

Таблицы

colspan – определяет количество столбцов, на которые простирается данная ячейка;

rowspan – определяет количество рядов, на которые простирается данная ячейка .

3

Пример: Корабль моей мечты ”… align=left width=70 height=50 border=2 hspace=3 vspace=3 " width="640"

Изображения

• src=… alt=… align=… width=… height=… border=… hspace=… vspace=…

Пример:

• Корабль моей мечты ”… align=left width=70 height=50 border=2 hspace=3 vspace=3

текст или указатель на объект текст или указатель на объект /a Примеры: Щелкните по этой ссылке Корабль моей мечты ” Кораблик!!! Письмо Maryia Щелкните по этой ссылке Корабль моей мечты ” Кораблик!!! Письмо Maryia Якорь (anchor) Maryia Maryia " width="640"

Ссылки

• href=… title=…

• текст или указатель на объект
• текст или указатель на объект

• /a

Примеры:

• Щелкните по этой ссылке Корабль моей мечты ” Кораблик!!! Письмо Maryia
• Щелкните по этой ссылке
• Корабль моей мечты ” Кораблик!!!
• Письмо
• Maryia

• Якорь (anchor)

• Maryia
• Maryia

Абсолютный и относительный путь

• xyz.html

• Файл HTML с именем xyz.html находится в текущем каталоге;
• Файл HTML с именем xyz.html находится в текущем каталоге;

• abc/xyz.html

• Файл HTML с именем xyz.html находится в подкаталоге abc текущего каталога;
• Файл HTML с именем xyz.html находится в подкаталоге abc текущего каталога;

• http://myDomain.by/abc/xyz.html

• Файл HTML с именем xyz.html находится в каталоге abc на сервере MyDomain.by ;
• Файл HTML с именем xyz.html находится в каталоге abc на сервере MyDomain.by ;

• ../abc/xyz.html

• Файл HTML с именем xyz.html находится в подкаталоге abc каталога, лежащего на один уровень выше текущего;
• Файл HTML с именем xyz.html находится в подкаталоге abc каталога, лежащего на один уровень выше текущего;

• ../../abc/xyz.html

• Файл HTML с именем xyz.html находится в подкаталоге abc каталога, лежащего на два уровня выше текущего.
• Файл HTML с именем xyz.html находится в подкаталоге abc каталога, лежащего на два уровня выше текущего.

Спасибо за внимание