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

Язык HTML Язык разметки гипертекстовых документов HTML основан на совокупности команд, называемых тегами (от английского tag). HTML-тег записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов. Теги могут быть одиночными или парными. Парный тег состоит из открывающего и закрывающего. Закрывающий тег содержит ту же последовательность букв, но им предшествует косая черта: </тег>.

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

Атрибуты тегов Атрибуты добавляются в тег для расширения или модификации его действия. <тег атрибут1=“значение” атрибут2=“значение” атрибут3=“значение”. . . > Значения: • могут быть чувствительны к регистру; • имеют ограниченную длину в 1024 символа; • должны заключаться в двойные или одинарные кавычки (за исключением случаев, когда значение состоит из одного слова или числа, только из букв (a-z), цифр (0 -9), и специальных символов (точка или дефис)).

Контейнеры и автономные теги Большинство тегов являются контейнерами (парными тегами). У них имеется начальный (открывающий) и конечный (закрывающий) теги. <парный_тег>элемент документа</парный_тег> Непарные теги используются для размещения отдельных (автономных) элементов на странице. <непарный_тег>

Вложенные теги В теги HTML могут помещаться другие HTMLтеги для осуществления воздействия нескольких тегов на один элемент – вложение тегов. <тег 1>Пример использования <тег 2>вложенных</тег 2> тегов. </тег 1> Теги не могут перекрываться! Неверно: <тег 1>Пример неверного использования <тег 2>вложенных</тег 1> тегов. </тег 2>

Пример использования тегов <TABLE border=0> <tr> <td><IMG src="pic. gif" width =10 height=20></td> <td><b><i>Текст</i> для примера</b></td> </tr> <td>Текст</td> <td><IMG src="pic 2. gif" align=top></td> </tr> </TABLE>

Структура HTML-документа Документ в формате HTML образуют три основные части: • строка, содержащая информацию о версии HTML; • заголовочная часть (определяется тегом <head>); • тело, непосредственно включающее содержание документа (определяется тегом <body> или <frameset>).

Пример простейшего HTML-документа <html> <head> <title>Простой документ</title> </head> <body text="#0000 ff" bgcolor="#f 0 f 0 f 0"> <h 1>Пример простого документа</h 1> <hr> <p>Проба пера. </p> <p><img src="pict/book. gif" width="149" height="226"></p> </body> </html>

Результат отображения документа в окне броузера

Структура сайта Последовательная (линейная) структура Иерархическая (древовидная) структура Структура системы координат Структура сети (паутина)

Организация файловой структуры сайта

Правила назначения имен файлов и папок сайта Cледует ограничиться цифрами и латинскими буквами; Рекомендуется использовать только нижний регистр; Имена должны быть короткими и интуитивно понятными; Главная страница в большинстве случае обязательно должна называться index. html (index. htm).

Компоновка и дизайн страниц

Пример компоновки и оформления страницы

Отрицательный пример оформления страницы

Организация навигационной панели

Организация гипертекстовых переходов Типы гипертекстовых ссылок: 1. Структурные. 2. Встроенные. 3. Ассоциативные.

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

Классификация вебсайтов 1. Личные страницы (Home pages). 2. Корпоративные сайты. 3. Коммерческие сайты. 4. Контент-сайты. 5. Некоммерческие сайты.

Основные этапы разработки сайта 1. Анализ. 2. Выработка концепции. 3. Проектирование. 4. Создание дизайна. 5. Подготовка информационного наполнения. 6. Создание программных компонентов (если необходимо). 7. "Верстка". 8. Отладка и тестирование. 9. Публикация. 10. Продвижение, поддержка и эволюция.

Состав команды разработчиков 1. Писатель. 2. Редактор. 3. Иллюстратор. 4. Дизайнер. 5. Верстальщик. 6. Веб-мастер. 7. Программист.

С чего начать? Цели, которые преследует сайт Целевая аудитория

Разработка информационного наполнения • Краткость. • Четкость формулировок. • Удобочитаемость. • Редакторская правка. • Тестирование и отладка. • Минимализация объема страниц. • Главная страница – наиболее важная страница.

Представление информации в электронном виде Виды электронной информации: 1. Текстовая. 2. Графическая. 3. Звуковая. Типы электронной информации: 1. Статическая (неизменная). 2. Динамическая (изменяющаяся с течением времени). 3. Интерактивная (изменяющаяся при взаимодействии).

Предварительная оценка 1. Цели, которые преследует сайт. 2. Целевая аудитория. 3. Первое впечатление.

Основные критерии оценки сайта 1. Структура сайта. 2. Компоновка (дизайн) страниц. 3. Организация навигационной панели. 4. Организация гипертекстовых переходов. 5. Информационное наполнение. 6. Качество текста. 7. Качество иллюстраций. 8. Качество программных модулей (если есть). 9. Качество доступа. 10. Простота использования.

Специализированные HTML-редакторы Как правило используют технологию WYSIWYG (англ. What You See Is What You Get – что видишь, то и получаешь). К их достоинствам относятся: • ускорение и упрощение процесса разработки; • автоматизация многих рутинных операций; • позволяют осуществлять быстрое макетирование; • могут использоваться начинающими. Недостатки: • не создают «чистого» кода (добавляют «фирменные» или избыточные элементы);

Некоторые современные HTML-редакторы • Adobe Dreamweaver; • Adobe Go. Live; • Microsoft Front. Page Многие современные неспециализированные программные продукты так же позволяют сохранять документы в формате HTML. Например Microsoft Word. Однако результат как правило оставляет желать лучшего.

Рабочее окно программы Dreamweaver