Количество информации, получаемое пользователями. Главная страница. Эксперт. Метрики юзабилити. Частые ошибки. Меры. Анализ неудовлетворенности сайтом. Где я был. Internet rakenduste architektuur ja realiseerimine. Навигация. Конечный пользователь. Названия страниц. Куда я могу пойти. Готовность пользователя подождать загрузки. Разделение представления и содержания. Тестирование юзабилити. Ссылки.
«1С-Битрикс: Маркетплейс» - Салон красоты. Интернет-магазин парфюмерии и косметики. Интернет-магазин подарков. Тиражные решения и готовые интернет-магазины на платформе «1С-Битрикс». Интернет-магазин бытовой техники. Интернет-магазин стройматериалов. Сайт консалтинговой компании. Запуск интернет-магазина за 4 часа. Типовые интернет-магазины. Что такое «сайты из коробок». 1С-Битрикс: маркетплейс. Сайт медицинской клиники. Новые типовые интернет-магазины.
«ZEN» - Run-time поведение ZEN. ZEN методы. ZEN и CSP. Tablepane компонент. ZEN компонент. Определение ZEN компонентов. Document Object Model. Содержание. Model – View - Controller. AJAX. Особенности tablePane. Что такое ZEN. Расположение на странице (ZEN Layout). ZEN Application. ZEN стили. TablePane. «Snapshot» режим. Архитектура ZEN. Новое приложение ZEN. Библиотека компонентов ZEN. Добавляем простой элемент.
«Web-дизайн» - Paul Cйzanne. Цветовые схемы сайтов. Насыщенность (Saturation). Двойные закладки. Комплиментарные, дополнительные цвета (Complementary Colors). Виды навигаций. Высокая хроматичность - очень сияющие, живые цвета. Способность выделяться. Системы цвета. Светимость (Luminance). CMYK. Теория цвета. Оттенки (добавляем белый к чистому цвету). Основные цвета (Primary Colors). Ссылки цепочки. Композиция. Web-дизайн.
«Проектирование web-сайта» - Тип источника. Творческое задание. Для создания web-сайта разработано много программ. WWW. Тестирование и публикация web-сайта. Неудачное цветовое решение. Верстка web-страничек сайта «Азбука юного журналиста». Основные требования: правильная компоновка информации на странице. Зарождение идеи, обличение идеи в проект. Дизайн сайта - это художественное и функциональное оформление сайта. Основы создания web-сайта.
«Скорость загрузки сайта» - Сжатие данных. Загрузка сайта. Время загрузки главной страницы. Пример анализа. Спрайты. Как измерять скорость работы сайта. Все о скорости сайтов. 3 нестандартных шрифта. Внешние коннекты. Сеть (стучимся туда, где сайт). Время загрузки страницы. DNS (узнаем, где сайт). Правильное проектирование сайта. Уменьшение изображений. Плохой пример – один блогер. 6 потоков. Выигрыш от правильного использования поддоменов.
Структура веб-сайтаСтруктура сайта - это его основа. Еще на этапе создания сайта необходимо позаботиться об удобном структурировании всей информации. Специалисты по технической поддержке сайта могут предложить несколько типов структур, каждая, из которых имеет свои достоинства и недостатки.
Самая простая структура - линейная . На сайте с таким типом структурирования все страницы идут по очереди. Это значительно затрудняет посетителю поиск интересующей его информации, ведь прежде чем найти нужную страницу необходимо пролистать все стоящие до нее. Конечно, далеко не у каждого есть столько терпения и времени, по этому, часто, сайты с такой структурой остаются без посетителей. Линейная структура сайта очень примитивна, и, не смотря на свою ценовую доступность, не пользуется спросом у заказчиков. Применение такого типа структурирования оправданно лишь в том случае, когда речь идет о сайте-визитке с парой страниц.
Для структурирования информации на небольших сайтах, часто применяют модифицированную линейную структуру. От классической структуры она отличается тем, что с определенной страницы имеет несколько ответвлений. Это позволяет посетителям быстрее попасть на интересующую их страницу. И хотя на первый взгляд недостатки такого типа структуры очевидны: ответвлений мало, свобода посетителей ограниченна. Тем не менее, данный способ структурирования имеет неоспоримое достоинство, а именно, дает уникальную возможность контролировать поведение пользователей. Например, в интернет-магазине, можно направить посетителя на страничку с рекламным описанием товара, потом дать информацию о бонусах, различных скидках, и только после этого разрешить доступ к страничке с ценами.
Самыми удобными считаются древовидная и решетчатая структуры. Древовидная структура сайта имеет, как бы ствол, стержень сайта от которого расходятся ветви-странички. Такая структура позволяет быстро найти информацию и не заблудиться на сайте. Иногда для структурирования сайта выбирают решетчатый тип расположения информации. На сайте с такой структурой найти нужную информацию можно мгновенно и с любой странички, однако существует реальная возможность заблудиться. По этому, выбирая такую структуру, нужно обязательно добавлять понятную карту сайта.
Структура страницы веб-сайтаФормирование страницы веб-сайта производится динамически на основе используемого шаблона страницы, данных выводимых компонентами и статической информации, размещенной на странице. Создание шаблонов сайта и размещение на них компонентов осуществляется разработчиками сайтов. Тем не менее, необходимо иметь основное представление о том, как устроена страница сайта. Для всех страниц веб-сайта обычно используется один и тот же внешний шаблон.
Структурно дизайн поделён на три части:
верхняя - header . Включает в себя, как правило, верхнюю и левую часть дизайна со статической информацией (логотипом, лозунгом и так далее), верхним горизонтальным меню и левым меню (если они есть в дизайне). Может включать в себя информационные динамические материалы.
основная рабочая область - work area . Рабочая область страницы, в которой размещаются собственно информационные материалы веб-сайта. В качестве Основной рабочей области может подключаться как физический файл, так и создаваемый системой на основе комплексных компонентов динамический код.
Если в качестве Основной рабочей области подключается физический файл, то такая страница называется статической. Если подключается динамический код, то такая страница называется динамической.
нижняя - footer . Включает в себя, как правило, статическую информацию (контактная информация, сведения об авторе и владельце веб-сайта и так далее), нижнее горизонтальное меню и правое меню (если они есть в дизайне). Может включать в себя информационные материалы.
Эти три части могут занимать разную площадь, иметь разную форму. Неизменно одно: их порядок.
Верхняя и нижняя части дизайна формируются на основе шаблона дизайна веб-сайта, т.е. информация, отображаемая в данных областях, определяется параметрами шаблона веб-сайта.
Когда речь заходит о редактировании страниц веб-сайта, в большинстве своем имеется в виду изменение содержимого Основной рабочей области . Здесь можно разместить любую информацию: текст, список новостей, каталог товаров, форму голосования и т.д.
Так же в шаблоне веб-сайта могут быть предусмотрены дополнительные включаемые области , в которых также может быть размещена любая информация. Включаемые области могут размещаться как в верхней, так и в нижней частях страницы.
Благодаря правильной компоновке блоков на странице в дальнейшем облегчается сопровождение сайта для его разработчиков. При грамотном распределении информации на странице упрощается перемещение по сайту и поиск интересующей информации для посетителей сайта.
Развитие компьютеров позволило существенно расширить границы уже существующих областей жизни и бизнеса, и создать абсолютно новые. Именно благодаря компьютерным технологиям стали возможны программы для разработки трехмерного дизайна новых моделей Ford Mustang, Subaru Impreza, Renault logan и других автомобилей, проектирование домов и ландшафтов, появились электронные деньги и системы их мгновенных переводов по всему миру и так далее.
Но помимо этого, широчайшее распространение получил абсолютно новый вид сферы услуг – это разработка и поддержание веб-сайтов. Их использование практически безгранично – на собственной интернет-странице вы можете вести блог для друзей или писать стихи и прозу, проводить рекламные акции нового опель инсигния или бытовой техники, можете создавать фотоальбомы или хранилище видеофайлов, можете общаться с людьми по всему миру с помощью микрофона и веб-камеры…
Однако разработка сайта – достаточно сложный и многоступенчатый процесс, включающий в себя девять основных этапов.
Этап первый – работа с клиентом: важно правильно понять, что именно хочет ваш заказчик, как именно он представляет себе будущий сайт. Можно и даже нужно ознакомить клиента с вариантами уже готовых работ и вашими возможностями, лучше всего на конкретных примерах.
На втором этапе формируется техническое задание, в которое входит структура и перечень основных средств разработки сайта, калькуляция стоимости выполнения работы и её сроки, размещение сайта в Интернете, создание доменного имени и дальнейшая техническая поддержка ресурса.
Третий этап – утверждение технического задания заказчиком и подписание договора о выполнении работ, внесение аванса (обычно это 50% от общей стоимости заказа).
На четвертом этапе дизайнер создает эскизы главной страницы ресурса, которые формируются в фирменном стиле заказчика (если это юридическое лицо), а затем утверждаются с перспективой дальнейшей работы с сохранением этого же стиля оформления.
Пятый этап – разработка программных модулей и навигационной системы, html-кода и структуры в совместной работе программиста и дизайнера. Этот этап нуждается в информационных материалах, которые предоставляются клиентом.
Шестой этап подразумевает регистрацию доменного имени для сайта или размещение ресурса на уже существующем домене, который указывается заказчиком.
Седьмой этап – непосредственно прием сайта клиентом, подписание необходимой документации и внесение второй половины суммы гонорара.
На предпоследнем, восьмом этапе, производится финальное тестирование веб-сайта как заказчиком, так и разработчиком в течение недели или 10 дней – срок может быть оговорен в техническом задании. Выявляются и исправляются мелкие ошибки, могут вноситься изменения в информационную начинку ресурса.
Последний девятый этап – регистрация нового сайта в основных поисковых системах, а также в виде дополнительного сервиса – в системах рейтингов. Также на этом этапе может заключаться договор о технической поддержке ресурса разработчиком, если это не было оговорено заранее в контракте.
59.WEB-страница является контейнером для текста и изображений, размещаемых в интернете. Для того, чтобы создать WEB-страницу, надо использовать программу, которая может преобразовывать текстовый документ в гипертекстовый. Гипертекстовая разметка нужна не только для создания страниц в интернете. Она используется для подготовки писем электронной почты, электронных изданий. А также для создания обычных документов.Для создания WEB-страницы удобнее всего использовать мастер. Он запускается на вкладке WEB-страницы, вызываемой командой «Файл» «Создать». Разработаем для примера деловое письмо. Создание документа с помощью мастера можно поделить на несколько этапов:
На первом шаге надо выбрать тип страницы. Типы отличаются наборами готовых элементов. Это шаблоны документов, и их можно произвольно изменять. Выберем тип «Простая» (страница) и самостоятельно добавим все необходимые детали.
Следующий шаг – выбор стиля страницы, то есть художественного оформления. Редактор использует для создания стиля рисунки, которые находятся в папках пакета MS Offiсe. Выберем стиль «Загородный» - орнамент из листьев. На этом создание заготовки WEB-страницы заканчивается. Можно нажать кнопку «Готово», и мастер завершит работу.Теперь работа с WEB-страницей будет идти как с обычным документом. Здесь некоторые инструменты изменили свой вид. Например, исчез список для выбора размера шрифта, а его место заняли кнопки «Увеличить размер шрифта» и «Уменьшить размер шрифта». Создадим в самом начале документа новый абзац, выберем самый мелкий шрифт и введем адрес фирмы.
Преобразуем строку заголовка. Сотрем имеющийся в шаблоне текст-подсказку и введем название фирмы. А в правой части строки вставим логотип, то есть рисунок.
Осталось ввести текст письма, и документ готов.
Особенность WEB-страницы заключается в том, что для их оформления
можно применять стандартные элементы: линии, гиперпосылки, рисунки форматов GIF и т.д. Для их создания используется меню «Вставка». Документ можно редактировать и в режиме источника, если выбрать страницу «Вид» - «Источник HTML». Тогда будет понятно, как создана та или иная деталь страницы. Но этот режим полезен только для пользователей, знающих HTML. Если на WEB-странице неправильно отображаются русские буквы, надо открыть ее в режиме источника и исправить соответствующий атрибут элемента МЕТА. Сохранять WEB-страницы необходимо в оригинальном формате (документ HTML). В этом случае файлу присваивается тип НТМ или HTML. При конвертации таких документов в формат DOS или обратно некоторые параметры форматирования не будут сохранены.
Основные этапы создания веб-сайта:
1. Определение целей веб-сайта и его позиционирование
На этом этапе необходимо определить, для чего нужен сайт, т.е. какие задачи он должен решать: предоставить общее представление о компании или многосторонне осветить какую-либо сторону человеческой деятельности, увеличить продажи по традиционным каналам или организовать веб-торговлю, провести рекламную или маркетинговую кампанию.
После определения целей сайта надо совершенно четко и как можно подробнее представить и описать целевую аудиторию сайта, т.к. это влияет на то, в каком виде будет представлена информация.
2. Создание Технического Задания (ТЗ) на разработку веб-сайта.
В ТЗ необходимо как можно более подробно описать:
Цели создания сайта и его целевую аудиторию;
Структуру веб-сайта и количество страниц в каждом разделе;
Работу динамических модулей;
Пожелания по дизайну (цвета, использоание фирменного стиля, соотношение графика/текст и т.д.
Используемые технологии (HTML, Flash, PHP и проч.);
Порядок предоставления, обработки или создания графической и текстовой информации;
Технические требования к сайту.
ТЗ является основным документом, на основе которого осуществляются все последующие этапы разработки веб-сайта.
Создание дизайн-макета веб-сайта.
На этом этапе дизайнер в специальной графической программе создает дизайн страниц будущего веб-сайта с прорисовкой всех графических (банеров, кнопок, фотографий) и текстовых элементов. Дизайнер создает дизайн веб-страниц с учетом пожеланий заказчика и задания, прописанного в ТЗ.
4. Верстка сайта.
После того, как Заказчик утвердил дизайн-макет (в письменном виде или по электронной почте) за работу принимается верстальщик – это тот человек, который переводит дизайн-макет на язык, понятный компьютеру с использованием языка HTML.
5. Программирование сайта.
Очень часто этап программирования и верстки объединяют в один. На мелких и средний проектах оба действия в состоянии выполнить один человек. На крупных проектах в силу специфики работ эти этапы разделяют.
На этапе программирования (как правило, с использовавнием DHTML, PHP, Perl, ASP и баз данных) происходит создание всех страниц сайта, определяется порядок работы меню, расставляются гипер-ссылки, создается динамика на сайте, программируются такие составляющие, как гостевая книга, форум, новостная лента и проч.
6. Наполнение сайта информацией.
На этом этапе информация, предоставленная Заказчиком, размещается на сайте, т.е. путем перевода в специальный формат текст и графика располагаются на сайте на определенных страницах, и эта информация становится доступной для просмотра.
7. Расположение сайта в сети Интернет.
Данный этап необязательно выполняется после проведения всех вышеперечисленных работ. Он может проводиться параллельно с любым из этапов. Он заключается в том, что файлы сайта располагаются на хостинге.
8. Тестирование сайта.
Этот этап можно осуществить как до, так и после размещения сайта по его «родному» адресу. На этом этапе выявляются все ошибки и недочеты в программировании и написании текстов. Срок тестирования зависит от сложности проекта, но, как правило, не превышает 1 месяца.
60. Структура HTML - документа. Итак, HTML (Hyper Text Markup Language) - язык гипертекстовой разметки. Собственно, его появление и зарождение браузеров, которые способны распознавать и интерпретировать код html в понятное пользователям содержание вебстраниц положило начало развитию всемирной паутины (интернета), в том числе появлению информационных ресурсов (сайтов, блогов, крупных порталов и т.д.). Таким образом, используя язык гипертекстовой разметки, мы имеем возможность создавать свои проекты в сети. Для обеспечения единых стандартов был создан Международный Консорциум W3C, задачей которого стало не допустить анархии в использовании элементов HTML среди разработчиков.
Была определена спецификация языка разметки, которая изредка обновлялась. На данный момент последней версией является HTML 4.01, однако идут активные работы по внедрению 5 версии, отдельные нововведения уже поддерживаются популярными браузерами, поэтому проверка страниц сайта на ошибки, проводимого W3C validator, производится применительно именно к HTML 5, с отличиями которого от 4 версии можно ознакомиться на этой странице(правда, на английском языке).
Структура документа HTML - основные теги (html, head, body)
Если вы на какой-либо вебстранице кликните по ней правой кнопкой мышки и выберете из контекстного меню «Просмотр кода страницы» (в случае браузера Google Chrome), то в отдельной вкладке откроется текст, который и является html кодом, состоящим из совокупности тегов. Тегами называются команды языка HTML. Эти теги определяют то, что пользователи видят при просмотре.
Текст документа html, который определяет содержание того или иного элемента на странице, заключается между открывающим и закрывающим тегами (например, и ). Как вы могли заметить, названия тегов заключаются между угловыми скобками, а закрывающий тег отличается от открывающего только наличием в нем слэша. Здесь надо отметить, что на приведенном выше скриншоте отмечены три главных тега (html, head, body) вместе со специальным тегом DOCTYPE:
- специальный тег, который называют еще декларацией. Он начинается с угловой скобки и восклицательного знака и показывает, на какую версию html ориентироваться браузеру. Приведенный мной вариант написания декларации уже является детищем 5 версии языка разметки и поддерживается последними модификациями всех популярных браузеров, хотя в html 4.01 существуют несколько вариантов, например, такой:
Однако мы уже будем ориентироваться на 5 версию, жизнь идет вперед, тем более, как я писал выше, валидация документов происходит уже в соответствии с новейшей версией, хотя до конца она еще не вступила в законную силу.
head - внутри этого тега размещается служебная информация, которая необходима браузеру для корректной интерпретации html документа. Она не видна на открытой вебстранице.
body - между закрывающим и открывающим тегами будет помещена информация, отображаемая на web странице.
html - все содержание документа определяется эти тегом
Обращаю внимание на то, что все вышеприведенные теги являются обязательными и входят в состав любого документа html. Более того, используется принцип вложенности, который определяет расположение тегов открытия и закрытия следующим образом:
Кроме этого, существуют теги, называемые пустыми, которые не требуют закрытия (например, тег br, определяющий перенос строки). В языке разметки существует строго ограниченный набор тегов для всех разработчиков, определенный консорциумом W3C, список валидных по версии HTML 4.01 тегов можно посмотреть на официальной странице
Структура документа HTML
HTML -документ заключается в теги и . Между этими тегами располагаются два раздела: раздел заголовка (элемент head ) и раздел тела документа (элемент body для простого документа либо элемент frameset, задающий набор кадров). Все указанные элементы имеют начальный и конечный тег.Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит текст, предназначенный для отображения браузером и элементы, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее.Формально, согласно спецификации HTML 4+, первым в документе должен указываться элемент doctype, сообщающий браузеру об использованной версии HTML (а версии, как уже говорилось, различаются наборами допустимых элементов и правилами их объявления). В элементеdoctype указывается также адрес, с которого браузер может загрузить определение типа документа - Dtd (DocumentTypeDefinition). На практике же этот элемент зачастую опускают без ущерба для отображения документа.Браузер отобразит этот документ, выведя в строке заголовка своего окна текст "Самый простой HTML-документ", а в самом окне текст "Проще не бывает", причем параметры шрифта и цвет фона будут зависеть от умолчаний конкретного браузера. На практике, конечно, в разделе заголовка следует задавать определенную информацию. Для элементаbody могут быть указаны атрибуты, определяющие цвета текста и фон документа.Строгости ради надо сказать, что согласно спецификации HTML 4+ лишь два элемента документа являются обязательными:doctype и title.
61.Основные средства для автоматизации разработки Веб-страниц.Публикация Веб-сайтов .
В современной литературе наряду с термином Web-сервер часто используется термин Web-cайт или Web-узел .Для подготовки этих электронных изданий создано множество программных продуктов - от простейших HTML-редакторов до средств проектирования Web-страниц и Web-серверов.Наиболее заметные различия между Web-страницами и печатными публикациями касаются скорости их появления. Несомненно, время загрузки Web-страницы имеет существенное значение, но работа Web-дизайнеров в первую очередь зависит от требований, предъявляемых клиентами к темпам реализации проекта на всех его стадиях, начиная с рождения идеи и заканчивая ее практическим воплощением. Не менее важно и то, как часто клиент планирует обновлять содержание узла, а также добавлять в него новую информацию.В традиционной печати сроки выпуска изданий определяются графиками работ типографий и структур распространения. Как правило, новая интересная информация появляется в Internet гораздо раньше. Это объясняется наличием средств автоматизации проектирования Web-страниц и более сложных информационных структур - Web-серверов. Именно в этом особая роль и значение программных пакетов MacromediaDreamweaver и MicrosoftFrontPage.В данной главе рассмотрен один из наиболее распространенных программных пакетов автоматизированного проектирования Web-публикаций MacromediaDreamweaver.После того как сайт создан, его нужно опубликовать на Web-сервере. И сделать это можно тремя различными способами.Первый способ самый простой, но далеко не всегда самый легкоосуществимый. Заключается он в том, что все файлы сайта переписываются на дискету или более емкий носитель информации (дискета IomegaZip, магнитооптический диск, перезаписываемый диск CD-RW, лента стримера, обычный жесткий диск, в конце концов) и относится администратору Web-сервера. Администратор просто переписывает содержимое вашего носителя в соответствующую папку сервера и настраивает программное обеспечение.
Похожая информация.
Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.
HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .
HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).
Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.
Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.
Теги могут вкладываться друг в друга, например,
Текст
. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:Текст
.HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.
Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.
Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.
Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.
HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .
Структура веб-страницы 1. Структура HTML-документаЯзык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
...
Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.
Рис. 1. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент является предком для всех содержащихся в нем тегов: ,
, , и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент
Является потомком одновременно для и .
Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег
Является родительским только для .
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,
И являются дочерними по отношению к .
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и
Являются между собой сестринскими.
1.1. Элемент 1.2. ЭлементРаздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
1.2.1. ЭлементОбязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
1.2.2. ЭлементНеобязательным тегом раздела является одинарный тег . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
| charset | Указывает кодировку символов для текущего HTML-документа: |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: |
| name | Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: . keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: . Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. |
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
...
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:
1.2.4. Элемент
Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .
Подключить файл со стилями к веб-странице можно двумя способами:
через
директиву @import url
@import url(style.css);
с использованием элемента . Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
| crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована. |
| href | Основной атрибут тега, в качестве значения выступает путь к файлу со стилями. |
| hreflang | Определяет язык текста в документе, на который идет ссылка. |
| media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), . archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре. |
| sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения: ширинах высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах высота (размеры иконки задаются в пикселях), например: ; any - иконка может масштабироваться до любого размера. |
| title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
| type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" . |
| async | Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). |
| charset | Определяет кодировку символов |
| crossorigin | Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен. |
| defer | Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. |
| nonce | Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. |
| src | Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу. |
| type | Используются для объявления языка сценария, использованного при составлении содержимого тега. |
В этом разделе располагается все содержимое документа. Для элемента доступны .
| onafterprint | Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. |
| onbeforeprint | Событие, срабатывающее перед отправкой страницы на печать. |
| onbeforeunload | Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. |
| onhashchange | Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . |
| onmessage | Событие происходит, когда сообщение получено через источник события. |
| onoffline | Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. |
| ononline | Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. |
| onpagehide | Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. |
| onpageshow | Событие происходит, когда пользователь переходит на веб-страницу, после события onload. |
| onunload | Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. |
Еще несколько лет назад требования к сайтам были достаточно низкими. Их оформление не изобиловало анимацией, изображениями, различными динамическими элементами, а структура ресурсов была достаточно однотипной. Но с развитием технологий “вес” и объем сайтов значительно возросли. Сейчас практически каждая вторая компания имеет собственный ресурс в сети. При этом его структура является достаточно разветвленной и на нем может насчитываться несколько десятков или даже сотен страниц.
Разработка Интернет-ресурса — длительный и трудоемкий процесс, который нельзя производить без тщательной подготовки. Прежде чем создавать сайт, следует продумать каждую его страницу и элемент. Это необходимо чтобы обеспечить максимальное удобство для посетителей. Поскольку пользователи будут попадать на различные страницы из поисковых систем, следует предоставить им возможность перехода между ними и свободного доступа ко всей информации.
Пользователь строит свою модель взаимодействия с Интернет-ресурсом на основании уже имеющегося у него опыта. Именно это зачастую является решающим фактором при проектирование структуры сайта. В будущем популярность ресурса будет зависеть от того, насколько ожидания пользователя совпадут с контентом, ссылками и элементами, размещенными на странице. Логически продуманная и предсказуемая структура позволит максимально упростить поиск необходимой информации и сделает более комфортной его эксплуатацию.
Структура web-сайта — это перечень разделов, страниц, подразделов и других функциональных блоков, которые могут использоваться в качестве отдельных элементов, а также их взаимосвязей. На стадии проектирования у вас нет необходимости заботиться о внешнем виде страниц, поскольку картинки, текст и все остальные элементы дизайна будут добавлены в будущем.
В первую очередь необходимо отметить, что не стоит полностью копировать структуру чужих сайтов, так как Вы рискуете повторить их ошибки. Лучше начать с самого начала и разработать свой, уникальный проект.
Некоторые особенности проектирования структуры web-сайтаДля того, чтобы разработка структуры веб-сайта была максимально комфортной, ее можно отобразить с помощью компьютерных программ, таких как MS Visio, Power Point или обычный Paint. Таким образом Вы сможете в графическом виде составить набор необходимых страниц, а также продумать их связи друг с другом. Также можно воспользоваться обычной ручкой и бумагой, чтобы нарисовать структуру ресурса. Стоит отметить, что для подобных целей существует специализированное ПО, но его использование не целесообразно при создании небольших сайтов.
Структура сайта разделяется на внутреннюю и внешнюю. При этом внутренняя структура зачастую значительно влияет на внешнюю.
Различают четыре основные типовые структуры сайтов. В чистом виде каждая из них используется достаточно редко. Чтобы сделать сайт максимально удобным для пользователя и не навредить его функционалу следует грамотно комбинировать различные виды структур web-сайтов.
Линейная структура сайтаДанный вид сайта является наиболее простым. Подобная структура последовательна, в ней каждая из страниц ведет на предыдущую и следующую страницы ресурса. В данном случае навигация очень проста и осуществляется с помощью 2-3 ссылок, использование такого сайта чем-то похоже на перелистывание страниц книги.
Решетчатая структура сайтаРазработка структуры веб-сайта подобного типа также не отличается особой сложностью, но она более удобна для использования, чем линейный вариант. В данном случае каждая страница ресурса связана с двумя или тремя страницами одновременно. Обычно каждая из них имеет связи с одной или двумя страницами разделов одного уровня, а также с одной страницей — подразделом. Здесь уже должна прослеживаться иерархическая структура информации на ресурсе.
Иерархическая структура сайтаОсновным элементом иерархической структуры является главная страница сайта. Ссылки с нее ведут на разделы второго уровня, а на страницах второго уровня размещены ссылки на материалы/разделы третьего уровня и т.д. В данном случае пользователь, перейдя на главную страницу сайта, должен обязательно посетить страницу определенного раздела, чтобы добраться до подраздела. Зачастую подобная структура web-сайта применяется для каталогов товаров.
Паутинообразная структура сайтаОна предполагает связь страниц “все со всеми” то есть пользователь может попасть с любой страницы ресурса на любую другую страницу, минуя все разделы. Разработка структуры веб-сайта подобного типа достаточно сложна, особенно если на ресурсе расположено много страниц. На практике пользователь просто “потеряется” в огромном количестве ссылок. Стоит отметить, что данная структура web-сайта повторяет в малом масштабе структуру всемирной сети Интернет.
Создание гибридной структуры сайта для повышения удобства его использованияВыше описанные структуры web-сайтов практически не пригодны для использования в чистом виде. Они являются конструктором, из которого каждый может взять необходимые ему блоки для реализации своего проекта. К примеру, для каталога товаров интернет-магазина лучше всего использовать иерархическую структуру. При этом на самой странице товара можно расположить ссылки на сопутствующие товары, чтобы пользователь долго их не искал, а это уже элемент паутинообразной структуры.
Главное требование к разработке структуры — это логичность и простота. Пользователь должен с легкостью находить нужные ему материалы. Необходимо отметить, что любой web-сайт не может постоянно поддерживать одну и ту же структуру. Не смотря на то, что разделы и каталоги будут оставаться неизменными, при размещении новых материалов и статей будет возникать внутренняя перелинковка, которая внесет свои корректировки.
Сайты отличаются друг от друга по размеру и предназначению. Интернет-магазины имеют сотни или тысячи страниц, блоги могут обойтись несколькими десятками страниц, а сайтам-визиткам достаточно одной-двух. Поэтому нельзя придумать универсальный шаблон структуры, который подойдет каждому web-сайту.
Разработка структуры для сложных многостраничных сайтовЕсли Вы желаете создать крупный новостной ресурс или каталог какой-либо продукции, следует помнить, что Вам необходимо уделить максимум внимания на этапе разработки структуры. Это требуется чтобы избежать ошибок, влияющих на удобство эксплуатации, и, как следствие, снижающих конверсию.
После того, как структура web-сайта описана, можете нарисовать связи между страницами. Это поможет Вам упростить восприятие строения ресурса.
Структура бизнес-сайтов и сайтов-визитокДанные типы ресурсов обычно имеют очень простую структуру, соответствующую иерархическому типу. Они состоят из нескольких страниц, а в некоторых случаях включают в себя блоги. В подобных проектах нет необходимости создавать множество отдельных блоков и делать массу разветвлений. Структура web-сайта состоит из главной страницы, а также страниц второго и третьего уровня, которые распределены по категориям.
Разрабатывая любой сайт, поставьте себя на место пользователя и подумайте, что является для Вас неприемлемым при посещение сторонних ресурсов, а также учтите, какие идеи привлекли Ваше внимание. Это позволит сделать Ваш сайт более удобным и увеличить конверсию.
После того, как Вы завершите проектирование структуры Интернет-ресурса, можно будет перейти к процессу создания страниц, разработки их дизайна и наполнения контентом.
