Тип урока: урок усвоения новых знаний
Цели:
- Познакомиться с понятием Веб 2.0, а также со структурой веб-сайтов, рассмотреть основные этапы создания сайта на хостинге
- Вырабатывать навыки по регистрации на хостинге и разработке структуры сайта, используя возможности бесплатного хостинга
- Формировать ответственное отношение к представляемой на сайте информации, её достоверности, актуальности, оригинальности.
Дидактические материалы : инструкционные листы с заданиями
Программное обеспечение : браузер, пакет «Denver», СМS «Kandidat»
Структура урока
I. Организационный момент
II. Актуализация опорных знаний
V. Закрепление материала учащимися
VI. Подведение итогов
VII. Домашнее задание
Ход урока
I. Организационный момент
II. Актуализация.
- Что представляет собой сайт и каково его назначение?
- Какая служба в Интернет отвечает за веб-сайты?
- Что означает доменное имя сайта?
- С чего начать создание собственного сайта и какие технологии использовать?
III. Сообщение темы и целей урока
IV. Изучение теоретического материала
Структура веб-сайтов
Структура веб-сайта – это его каркас, определяющий порядок навигации.
Базовые структуры веб-сайтов можно разделить на три группы: линейная, древовидная, решетчатая.
Линейная структура представляет собой последовательность веб-страниц, доступ к которым возможен только с предыдущей и последующей. Такая структура может быть применена для имиджевых сайтов, сайтов-презентаций, онлайновых учебных пособий.
Древовидная структура является иерархической, где главная страница является первым, самым верхним уровнем, страницы категорий – более низким, вторым уровнем, а конечные страницы, соответственно – третьим. В ряде случаев уровней может быть больше, если категории содержат подкатегории, но большое количество уровней негативно сказывается на индексации страниц сайта. Данная структура подходит практически для любого сайта. Это может быть тематический сайт, портал, интернет-магазин.
Решетчатая структура сайта позволяет осуществлять переходы, как по вертикали, так и по горизонтали между ветвями в разных уровнях. Эта структура применяется, как правило в сайтах-каталогах.
Разновидности веб-страниц
Веб-сайты различных структур в основном включают в себя четыре типа страниц:
- главная страница,
- страницы категорий,
- конечные страницы,
- служебные страницы.
Главная страница должна давать обобщенные сведения о сайте в целом и указывать направления по основным категориям.
Конечные страницы содержат в себе основные материалы сайта – статьи, изображения, видео. Именно эти страницы представляют наибольший интерес для пользователя.
Служебные страницы предназначены для размещения карты сайта, контактной информации, лицензионного соглашения и других служебных данных.
Выбор хостинга и доменного имени
Хо?стинг - это услуга по предоставлению вычислительных мощностей для физического размещения сайта на сервере, постоянно подключенном к компьютерной сети (в данном случае Интернет).
Хостинговая компания (хостинг-провайдер ) - организация, предоставлением услуг размещения оборудования, данных и web-сайтов на своих серверах.
Для создания и размещения сайта требуется выбрать хостинг (они бывают платные и бесплатные), а также доменное имя, которое чаще всего можно приобрести через хостинг-провайдера. Доменное имя покупается на год (цена в зависимости от доменной зоны), но ряд бесплатных хостингов предоставляют бесплатные доменные имена третьего уровня. Для небольшого сайта вполне подойдет бесплатный хостинг, где можно будет отработать основные навыки работы с веб-сайтом. Следует учесть что бесплатный хостинг и домен накладывают определенные ограничения на возможности создаваемого проекта. Когда выбор хостинга сделан, требуется зарегистрироваться на нём и начать работу по созданию сайта.
Создание сайта с помощью СМС
В настоящее время сайты, как правило, создаются с помощью специальных программ, именуемых системами управления сайтом (СМS). Часто используется термин «Конструктор сайтов», который по сути является также CMS. Система управления сайтом предназначена для автоматизированного создания сайта, а также для управления контентом (содержимым). Другими словами, СМС позволяет на основе шаблона определенного типа создать сайт, задать его структуру и наполнить информацией даже человеку, слабо владеющему HTML. Ряд хостингов имеют встроенные CMS: в частности, популярный ucoz.ru.
Несмотря на многообразие CMS, принципы их работы одинаковы. Для отработки приемов работы с ней целесообразно на свой локальный компьютер установить пакет программ «Denver», который позволяет смоделировать работу сервера. С помощью данного пакета можно использовать разнообразные СМС, создавая сайты непосредственно на локальном компьютере. Овладев основными приемами работы с сайтом, можно уверенно приступать к регистрации на сервере хостинг-провайдера.
Технология Веб 2.0
Следует упомянуть современное направление в принципах web-разработок, называемое web 2.0
Веб 2.0 является методикой проектирования сайтов, которые путём взаимодействия с пользователями становятся тем совершеннее, чем больше людей ими пользуются. Эта методика подразумевает участие пользователей в развитии web-проекта (примером является «Википедия»), а если точнее, в наполнении информацией. Хотя Веб 2.0 именуется технологией, далеко не все специалисты с этим согласны, поскольку речь не идет о каком-то особом методе web-дизайна.
V. Закрепление материала учащимися (Создание сайта на локальном сервере)
- Запустить на выполнение программу «Start Denver»
- В адресную строку браузера ввести доменное имя, указанное в инструкционной карте (например, http://school24.ua). Ознакомиться с шаблоном сайта, предложенного по умолчанию.
- Открыть административную панель сайта: http://school24.ua/admin
- Указать логин и пароль (admin, admin)
- Настройки , задать название сайта, выбрать шаблон, соответствующий теме сайта
- В разделе “Навигация” выбрать пункт Начало . Создать нужное количество категорий (Ссылка «Добавить категорию»–Указать название категории–Установить переключатель Включить ссылку страницы в меню в положение «Да »–Кнопка Добавить категорию )
- При необходимости откорректировать меню сайта (В разделе “Навигация” выбрать пункт «Редакция меню»)
- Проверить созданный сайт (Ссылка «Перейти на сайт»)
VI. Подведение итогов.
- Домашнее задание: зарегистрироваться на одном из бесплатных хостингов со встроенной CMS, получить доменное имя сайта, создать сайт (без наполнения контентом).
Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.
Что такое HTML и CSS?
HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.
Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.
При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.
Основные термины HTML
Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML - элементы, теги и атрибуты.
Элементы
Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с
до
) и абзацев (определены как
); в список можно включить элементы
, Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так: Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов. Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег
и закрывающий тег
. Что находится между этими двумя тегами будет содержимым ссылки. Так, теги ссылок будут выглядеть примерно так: Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id
, который идентифицирует элемент; атрибут class
, который классифицирует элемент; атрибут src
, который определяет источник встраиваемого содержимого; и атрибут href
, который указывает ссылку на связанный ресурс. Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент
с атрибутом href
будет выглядеть следующим образом:
Shay Howe
Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега
и закрывающего тега
охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com"
в открывающем теге. Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь - мы расшифруем всё по ходу. HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac. Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы:
,
, Объявление типа документа или
находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто
. После этого идёт элемент
означающий начало документа. Внутри
элемент Всё видимое содержимое веб-страницы будет находиться в элементе
Это веб-страница. Этот код показывает документ, начиная с объявления типа документа,
, затем сразу идёт элемент
. Внутри
идут элементы Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента В предыдущем примере элемент
был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега.
является одним из таких элементов. Содержимое элемента
в примере присваивается с помощью атрибута charset
и значения. К другим типичным самозакрывающимся элементам относятся: Приведённая структура, сделанная с помощью объявления типа документа
и элементов
, Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS , которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода. В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так! Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид. В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой. При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац. Селекторы, как правило, связаны со значением атрибута, вроде значения id
или class
или именем элемента, вроде В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы P { ... }
Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background
, color
, font-size
, height
и width
и другие часто добавляемые свойства. В следующем коде мы определяем свойства color
и font-size
, применяемые ко всем элементам P {
color: ...;
font-size: ...;
}
Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы И устанавливаем значение свойства color
как orange
, а значение свойства font-size
как 16 пикселей. P {
color: orange;
font-size: 16px;
}
Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой. Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным. Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения Знание нескольких основных терминов и общего синтаксиса CSS - это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS. Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы. Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы Div { ... }
Классы позволяют выбрать элемент на основе значения атрибута class
. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа. Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута class
для нескольких элементов. В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class
, включая элементы Awesome { ... }
Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class
, идентификаторы используют значение атрибута id
в качестве селектора. Независимо от типа отображаемого элемента, значение атрибута id
может быть использовано только один раз на странице. Если id
присутствуют, то они должны быть зарезервированы для важных элементов. В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id
. Здесь идентификатор выберет только элемент, содержащий атрибут id
со значением shayhowe
.
#shayhowe { ... }
Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные. Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе. Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым. Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением.css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл. Внутри элемента В следующем примере HTML-документа элемент
Чтобы CSS отображался правильно, значение пути атрибута href
должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка. Если CSS-файл располагается в подпапке, то значение атрибута href
должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href
будет stylesheets/main.css
. Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку. На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS. Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS. Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) - наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта. Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера , его сброс CSS адаптирован для включения новых элементов HTML5. Если вы чувствуете себя немного авантюристом, есть также Normalize.css , созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей. Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени - это решение вы должны будете сделать на основе того, что лучше для вашего сайта. Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить. Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS. Просматривая файл index.html в браузере мы можем видеть, что элементы Уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт , скопируйте код и вставьте его в верхней части нашего файла main.css.
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} Мы также включим ссылку на наш файл main.css используя атрибут href
. Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href
, который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css
.
Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше. Рис. 1.04. Наш сайт Styles Conference со сбросом CSS Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент. Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке. Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками. Напомним, что мы рассмотрели следующее: Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой. Прежде чем переходить непосредственно к созданию сайта, необходимо разработать
структуру основных входящих в него страниц, чтобы пользователю легко было перемешаться
между страницами различных уровней, а также, чтобы он в любой момент мог вернуться
на домашнюю страницу. Первая страница, на которой оказывается посетитель, это домашняя страницa.
Она, несомненно, должна содержать заголовок, краткое описание разделов веб сайта,
ссылки на разделы второго уровня иерархии в структуре, а также информацию об
авторских правах и информацию для контактов, которую можно разместить в колонтитуле. После того как вы определились с домашней страницей и размещаемой на ней
информацией, необходимо перейти к разработке страниц второго уровня. Их количество
должно определяться количеством основных разделов веб узла. На этих страницах
размещается наиболее важная информация, относящаяся к разделам, а также, если
в них есть необходимость, ссылки на страницы третьего уровня иерархии.
На страницах третьего уровня размещается уточняющая информация к основным
разделам веб сайта. Важным понятием в разработке веб сайта является схема навигации
, определяющая,
как пользователь будет перемещаться между страницами. С помощью схемы навигации
пользователь получает представление о структуре сайта, а также представление
о том, в каком месте узла он находится в данный момент. Правильно разработанная
схема позволит пользователю легко перемещаться между страницами сайта в поисках
нужной ему информации. Существует много вариантов организации навигационной схемы. Рассмотрим два
полярных подхода. Первый из них дает возможность пользователю перемещаться по
иерархии страниц только вверх или вниз без возможности перехода между страницами
одного иерархического уровня. При такой схеме навигации для перехода к странице,
расположенной на другой ветви иерархии, необходимо вернуться назад, и лишь затем,
перейдя на нужную ветвь, перемещаться по дереву вниз. Заблудиться на веб узле
с такой структурой тяжело, но и для перехода к нужной информации требуется больше
времени. Другой подход, это когда пользователь получает возможность с любого уровня
иерархии переходить на любую страницу сайта. В этом случае достигается максимум
возможностей по перемещению, но с другой стороны пользователю тяжело определить,
в каком месте сайта он находится в данный момент. Мы рассмотрели два полярных подхода к разработке схемы навигации. Задача разработчика
- подобрать такой оптимальный вариант, при котором бы обеспечивалось удобство
перемещения между страницами и не терялась ориентация. Так, например, в процессе
движения вниз по иерархической структуре необходимо предусмотреть для пользователя
ссылки на домашнюю страницу, а также ссылки на страницы, находящиеся на том
же уровне, если они содержат подобную по тематике информацию. Можно также, если
необходимо, предусмотреть ссылки для движения вверх по иерархической структуре сайта.
Главное, чтобы посетитель не запутался в предлагаемой его вниманию информации. Панели ссылок
После того как разработана схема
навигации, необходимо продумать названия навигационных ссылок, а также заголовки
страниц, на которые с их помощью осуществляется переход. Названия ссылок должны
соответствовать названиям представляемых ими материалов. В этом случае посетитель
веб узла имеет возможность определить, какую ссылку надо выбрать для просмотра
той или иной информации. Панели ссылок
- это несколько расположенных рядом ссылок, предназначенных
для перемещения между страницами сайта. Размещаются панели ссылок, как правило,
на страницах в специально отведенных для них местах, называемых
общими областями
, в верхней части или с левой стороны страницы.
Панели ссылок могут быть отображены на веб странице в виде кнопок или текста.
Панели ссылок можно располагать и с правой стороны страницы. Но этого нежелательно
делать, так как при просмотре веб страницы в обозревателе с неполным открытием окна эта
область окна может оказаться не видна пользователю. Приступая к созданию макета веб страницы, необходимо знать об ограничениях,
с которыми сталкивается разработчик. Это ограничения используемого при создании
веб страницы HTML языка и браузера, а также аппаратные ограничения, связанные
с типом монитора и модема. Рассмотрим данные ограничения. При создании веб узла используется язык HTML. Язык HTML состоит из
набора специальных символов, называемых
тегами. Именно теги служат для задания параметров форматирования и определяют
структуру и внешний вид документа в браузере. Они идентифицируют документ, определяют
входящие в страницы разделы, осуществляют загрузку графических изображений и
форматирование отображаемого на веб странице текста. Иными словами, благодаря
языку HTML, страница сайта выглядит так, какой ее видит пользователь. Браузеры
Загрузка и отображение веб страницы на экран монитора выполняется браузером,
установленным на компьютере пользователя. Именно браузер загружает HTML-документ,
содержащий HTML-теги, определяет форматирование текста, выполняет загрузку графических
изображений. Отображение документа осуществляется программным обеспечением
браузера. Но так как браузеры, применяемые пользователями, различны, а сами
браузеры отличаются заложенными в них стандартами, то и страницу сайта они отображают
каждый по-своему. Если вы хотите, чтобы созданные вами веб страницы можно было просматривать
с помощью разных браузеров, старайтесь использовать стандартные для большинства
браузеров теги. Ограничения, связанные с аппаратными средствами
Внешний вид просматриваемой в обозревателе веб страницы зависит не только
от типа браузера, но и от монитора, видеокарты, применяемой пользователем операционной
системы и установленного на мониторе разрешения. Поэтому, разрабатывая собственный
сайт, вы должны просмотреть, как будет выглядеть ваша страница в браузере
при различных разрешениях экрана. Важным параметром веб страницы, который необходимо учитывать при разработке,
является занимаемый ею объем. Чем больше объем, тем дольше будет загрузка страницы.
При большом объеме страницы посетитель может не дождаться завершения ее загрузки
и уйти на другой сайт. На время загрузки веб страницы влияет объем страницы,
быстродействие сети и модема. Объем веб страницы, как правило, определяется объемом размещаемых на странице
графических и мультимедийных файлов. Поэтому для уменьшения времени загрузки
файла необходимо использовать файлы данных типов в оформлении веб страницы как
можно меньшего объема. Описание презентации по отдельным слайдам: 1
слайд
Описание слайда:
2
слайд
Описание слайда:
Web-сайты Публикации во всемирной паутине реализуются в форме Web-сайтов Web-сайт содержит информацию, посвященную какой-либо теме или проблеме. Web-сайт состоит из Web-страниц. Обычно сайт имеет титульную страницу, на которой имеются гиперссылки на его разделы (Web-страницы). Гиперссылки имеются также на других Web-страницах сайта. Web-сайты обычно являются мультимедийными, т.е. содержать иллюстрации, анимацию, звуковую- и видеоинформацию. Web-страницы сайта могут содержать динамические объекты (исполнимые модули), созданные с использованием сценариев на языках JavaScript и VBScript или элементов управления ActiveX. Расположенные на сайте управляющие элементы (например, кнопки) позволяют запускать те или иные динамические объекты. 3
слайд
Описание слайда:
Web-страницы Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере. Основные достоинства HTML-документов: малый информационный объем; возможность просмотра на персональных компьютерах, оснащенных различными операционными системами. Для создания Web-страниц используются простейшие текстовые редакторы (например, Блокнот) Для упрощения работы по созданию Web-сайтов можно применять специальные программные средства (Web-редакторы), в которых процесс создания и редактирования страниц нагляден, - производится в режиме WYSIWYG (от англ. «What You See Is What You Get» - «Что видишь, то и получишь»). 4
слайд
Описание слайда:
Проектирование сайта Сначала необходимо разработать проект сайта, то есть определить, сколько Web-страниц будет входить в сайт, какова будет их тематика и как они будут связаны между собой. Пусть наш сайт будет содержать следующие страницы: Компьютер (титульная страница) Программы (содержит классификацию программного обеспечения) Словарь (содержит словарь компьютерных терминов) Комплектующие (содержит цены на устройства компьютера) Анкета (содержит анкеты для посетителей сайта) 5
слайд
Описание слайда:
Структура Web-страницы Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тэги (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги можно записывать как прописными, так и строчными буквами. HTML-код страницы помещается внутрь контейнера … … … 6
слайд
Описание слайда:
Web-страница делится на две части: заголовок и содержание. Заголовок Web-страницы заключается в контейнер 7
слайд
Описание слайда:
Содержание страницы, отображаемое в браузере, помещается в контейнер Прежде чем приступить непосредственно к созданию сайта, нужно определиться с его типом. Ниже приведена примерная классификация интернет-сайтов, условно разбитая на группы.
Структура сайта
- это своеобразный каркас, на основе которого выстраивается последовательность отображения контента на сайте. Если структура организованна правильно, то пользователи не испытывают совершенно никакого неудобства при перемещении по сайту.
Идеальная структура сайта
имеет один вход и один выход. Как это сделать, если сайт имеет множество страниц? В данном случае сайт будет иметь много входов и всего один выход. Посетитель заходя, на главную страницу, находит интересующую его информацию, под которой находится ссылка на страницу сайта, где ее можно найти. Таким образом посетитель продвигается от главной страницы в внутренним, что позволяет ему не пропустить ту информацию, которая будет ему интересна и полезна.
1. Линейная
- это структура, построенная по типу слайд - шоу. Пользователи просматривают web-ресурс страница за страницей.
Линейная структура сайта
2.
Древовидная структура
- самая популярная структура, которая подходит для всех видов сайта. Главное, что нужно помнить при построении «сайта-дерева» с многочисленными ветвями в виде страниц и «под - страниц», чтобы ресурс «рос» и развивался не только вширь, но и в глубь.
Древовидная структура сайта
3.Гибридная структура сайта
Гибридная структура сайта
4. Решетчатая структура
Решетчатая структура сайта
Внешняя структура
- это визуальное восприятие информации. То, каким образом будут выглядеть переходы, где разместятся баннеры, меню, список разделов и другая информация.
У каждого сайта есть шапка, где пишется заголовок (подзаголовок) сайта, навигационное меню - названия рубрик, меток и другая полезная информация, основная часть сайта, где публикуется основная информация, подвал, где показана некоторая служебная информация.
Внешняя структура
Лицом сайта является главная страница, а значит, именно она должна быть самой информативной частью. При этом важное значение для посетителя имеет простота структуры. Т.е. по возможности необходимо избегать подразделов сайта.
Наиболее популярные mind map или Visio.
Создание сайта и его разделов - кропотливая и ответственная работа.
Люди и роботы поисковых систем должны легко находить ссылки на все страницы вашего сайта. Если на какую либо страницу не ведет обычная текстовая ссылка, то скорее всего люди и роботы не смогут найти эту страницу. Поэтому если вы хотите максимальной индексации вашего сайта, размещайте ссылки на все страницы в обычном текстовом виде.
Cделайте HTML карту сайта , на которой будут ссылки на все страницы сайта.
Cтруктура сайта должна быть упорядочена и понятна.
Пример чистой структуры URL:
Имена URL адресов должны отражать суть ваших страниц, тогда роботам и посетителям легко будет разобраться где и что искать на вашем сайте.
На сайте не должно быть «битых ссылок» которые ведут на несуществующие страницы отдающие код 404. Такие ссылки могут привести к тому что поисковой робот уйдет с вашего сайта, а посетитель не найдет то чего хотел.
В URL используйте ЧПУ, например:
Старайтесь делать длину URL максимально короткой и понятной. Если в URL будут присутствовать ключевые слова то это поможет роботам и пользователям понять что находится на странице.
На всех страницах сайта используйте навигационные цепочки (хлебные крошки) это поможет пользователям и поисковым системам легко ориентироваться на сайте.
Размер страниц сайта должен быть столько, сколько потребуется по содержанию. Для одной страницы сайта достаточно 1000 знаков. Страницы сайта не должны быть перенасыщены текстом. Чтобы найти необходимую информацию на странице перенасыщенной текстом пользователю потребуется слишком много сил и временных затрат. Большинство пользователей считают, что поиск информации в огромном объеме текста не стоит затраченного на это времени. Поэтому следует придерживатьсяоптимального размера текста на странице.
Тексты на страницах сайта должны быть доступными и удобными для беглого просмотра. При необходимости текст можно оптимально разместить на нескольких страницах, связав их необходимыми ссылками.
СКОЛЬКО ДОЛЖНО БЫТЬ ВНУТРЕННИХ ССЫЛОК СО СТРАНИЦЫ САЙТА?
Определение количества ссылок на странице должно подчиняться следующим закономерностям:
Какой размер статьи на сайте должен быть для эффективного продвижения?
Почему полезно и нужно ежемесячно увеличивать количество страниц на сайте?
Публикуя на своём сайте уникальную, актуальную и интересную для целевой аудитории информацию о своей деятельности Вы:
Навигация по сайту должна быть удобной. Пользователь не сумев найти необходимую информацию из-за запутанных переходов, уйдет к конкурентам. Именно поэтому грамотная навигация - основной критерий для удобства сайта.
Навигационные компоненты включают в себя:
1.
Глобальная навигация;
2.
Локальная навигация;
3.
Вспомогательная навигация;
4.
Фильтры категорий, ценовых границ и т. п.;
6.
Футер, дублирующий элементы глобальной, локальной и вспомогательной навигации страницы.
Чтобы меню на сайте не был длинным, можно сгруппировать некоторые пункты между собой для организации двухуровневого меню. Раскрывающееся меню, должно быть обозначено: пользователь, взглянув на панель навигации, должен догадываться, что после наведения указателя мыши на пункт меню он сможет открыть подменю.
Хлебные крошки
- зто злемент навигации по сайту, визуализирующий путь по сайту от его "корня" до текущей страницы, на которой находится пользователь, в виде цепочки. Обычно представляет собой полосу в верхней части страницы примерно такого вида.
Главная страница→ Раздел→ Подраздел→ Текущая страница.
Все злементы в цепочке, кроме конечной, должны быть ссылками.
Хлебные крошки
- полезнейшая вещь при создании дизайна интернет-каталогов, магазинов, фотогалерей, а также сайтов с большим количеством уровней вложенности. Они облегчают пользователю навигацию, позволяют быстро перейти на несколько уровней выше и помогают ориентироваться в пространстве сайта.
виды навигации
Виды навигации можно выделять исходя из двух критериев: функционального и визуального.
По функциям
система навигации делится на следующие виды:
По визуальному оформлениювыделяют следующие виды навигации:
Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне - признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!Теги
Атрибуты
Демонстрация основных терминов HTML
Настройка структуры документа HTML
Привет, мир!
Демонстрация структуры HTML-документа
и абзац текста через <р>
. Поскольку и заголовок и абзац вложены в элемент
, они видны на веб-странице.
Самозакрывающиеся элементы
Валидация кода
На практике
Основные термины CSS
Селекторы
или <р>
.
Свойства
Значения
Работа с селекторами
Селекторы типа
Классы
Идентификаторы
Дополнительные селекторы
Подключение CSS
Другие варианты добавления CSS
Использование сброса CSS
Кроссбраузерность и тестирование
На практике
и
Демонстрация и исходный код
Резюме
Ресурсы и ссылки
Схема навигации по сайту
Макетирование веб страницы
§ 1. Виды структур сайтов
§ 2. Правильная структура сайта
§ 3. Число страниц сайта
§ 4. Навигационное меню