Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Создание Web-cайта методичка 1.doc
Скачиваний:
5
Добавлен:
23.11.2019
Размер:
382.46 Кб
Скачать

1. Встроенный стиль.

Синтаксис:

<тэг style="свойство: значение"> текст </тэг>

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

2. Вложенный стиль.

Синтаксис:

<head>

<style type="text/css">

селектор1 {свойство: значение}

селектор2 {свойство: значение}

...

</style>

</head>

Данный стиль будет применяться для фрагментов документа, выделенных с помощью отмеченных селекторов.

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

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

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

Синтаксис:

селектор.класс {свойство: значение}

Можно также описать класс без явного указания селектора.

Синтаксис:

.класс {свойство: значение}

Связывание какого-либо тэга с объявленным классом осуществляется следующим образом.

Синтаксис:

<тэг class="класс"> текст </тэг>

3. Присоединенный стиль.

Синтаксис:

<head>

<link rel="stylesheet" type="text/css" href="file.css">

</head>

Данный стиль описан в отдельном файле (file.css). Файл может располагаться на другом компьютере в сети. В этом случае атрибут href содержит ссылку на URL нужного компьютера.

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

Синтаксис:

{свойство: значение!important}

Примеры:

1. Вывод всех фрагментов документа, отмеченных тэгом h1, полужирным шрифтом.

<head>

<style type="text/css">

h1 {font-weight: bold}

</style>

</head>

<body>

<h1>здесь используются стили</h1>

здесь стилей нет

</body>

2. Группировка селекторов, имеющих одинаковую декларацию.

Три одинаковых декларации

h1 {font-weight: bold}

h2 {font-weight: bold}

h3 {font-weight: bold}

могут быть заменены одной конструкцией вида

h1, h2, h3 {font-weight: bold}

3. Использование контекстного селектора.

<head>

<style type="text/css">

b i {color: red}

</style>

</head>

<body>

<b>здесь стилей нет</b>

<i>здесь стилей нет</i>

здесь стилей нет

<b><i>здесь используются стили</i></b>

<i><b>здесь НЕ ИСПОЛЬЗУЮТСЯ стили</b></i>

</body>

4. Назначение ряда свойств одному тэгу.

<head>

<style type="text/css">

h1 {font-weight: bold;

font-size: 20pt}

</style>

</head>

<body>

<h1>здесь используются стили</h1>

здесь стилей нет

</body>

5. Использование классов селекторов.

<head>

<style type="text/css">

.red {color: red}

.blue {color: blue}

.green {color: green}

</style>

</head>

<body>

<h1 class="red">красный заголовок</h1>

<h1 class="green">зеленый заголовок</h1>

<div class="blue">синий текст</div>

</body>

6. Пример использования иерархии стилей.

<head>

<style type="text/css">

.red {color: red}

.blue {color: blue!important}

</style>

</head>

<body>

<h1 class="red" style="color: green">

зеленый заголовок </h1>

<h1 class="blue" style="color: green">

синий заголовок </h1>

</body>

Форматирование страниц.

1. Цвет фона

Синтаксис:

<body style=”background: цвет”>

2. Фоновое изображение

Синтаксис:

<body style=”background: url(‘файл’) повтор фиксация x-позиция y-позиция”>

Атрибут url представляет собой сетевой адрес графического файла.

Как правило фоновое изображение повторяется на странице столько раз, сколько необходимо для покрытия всего свободного пространства. Существует возможность управлять направлением повтора или вообще запрещать его посредством команды повтор. Команда представляет собой одно из четырех ключевых слов: repeat (заполняется все доступное пространство), no-repeat (изображение выводится только один раз), repeat-x (повтор только по горизонтали), repeat-y (повтор только по вертикали).

Режим фиксации (команда fixed) запрещает перемещение фонового изображения при прокрутке содержимого экрана браузера.

Если изображение не повторяется, то представляется возможным указать его положение на странице с указанием координат или методов позиционирования. В качестве методов позиционирования могут использоваться: по горизонтали – left (по левому краю), center (в центре), right (по правому краю), по вертикали – top (по верхнему краю), center (по центру), bottom (по нижнему краю).

Тестирование и продвижение web-сайта.

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

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

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

На практике тестирование может растянуться на длительный срок – все зависит от сложности возникающих проблем при просмотре сайта в браузере и объемов многовариантных проверок, поскольку тестироваться могут как отдельные элементы сайта, так и целые веб-страницы.

После тщательного тестирования, можно загружать сайт во Всемирную Сеть. Чтобы увеличить посещаемость веб-сайта, используют следующие методы:

  1. поисковое продвижение сайта – комплекс мероприятий по выводу сайта на верхние строчки результатов выдачи поисковых систем. В результате продвижения сайта в поисковых системах количество целевых посетителей существенно увеличивается.

  2. SMM (маркетинг в социальных медиа) – комплекс мероприятий, направленных на продвижение бизнеса в социальных сетях. Данный вид предполагает продвижение сайта в таких социальных сетях, как Facebook, Twitter, Vkontakte и т.д;

  3. медийная реклама – данный метод предполагает рекламные кампании, использующийся для привлечения потенциальных посетителей на страницы сайта;

  4. почтовые рассылки;

  5. баннеры;

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

Подготовка сайта к регистрации

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

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

Оптимальным вариантом является регистрация в поисковых сис­темах и каталогах уже оптимизированного сайта. На рейтинг, вы­ставленный поисковой системой сайту, влияет множество факторов. Большинство из них поддаются оценке и управлению со стороны разработчика ресурса при проведении поисковой оптимизации, ко­торая включает:

  • анализ и подбор ключевых слов и фраз, характерных для те­матики сайта;

  • коррекцию содержания страниц;

  • оптимизацию мета-тегов;

  • улучшение ссылочной структуры страниц и сайта в целом.

Далее следует ручная регистрация сайта в основных поисковых системах и каталогах, а также платная регистрация на некоторых ресурсах.

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

Обзор мероприятий по продвижению сайта

Для продвижения интернет-ресурса могут быть использованы следующие мероприятия:

  • регистрация в поисковых системах;

  • обмен ссылками с другими сайтами:

  • участие в рейтинговых системах;

  • совместные проекты с посещаемыми ресурсами;

  • баннерообмен;

  • создание рассылки сайта;

  • рекламирование сайта на форумах;

  • включение адреса ресурса в подпись, которая используется при написании e-mail'a сообщений на форумах;

  • использование «интуитивного» доменного имени.

Рассмотрим основные из них:

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

Регистрация сайта в поисковых системах. Поисковые систе­мы по запросу пользователя, состоящему из ключевых слов или вы­ражений, относящихся к исследуемой предметной области, выдают список ссылок на сайты, релевантные запросу. Чтобы поисковая система выдавала ссылку на продвигаемый сайт компании, необхо­димо, чтобы на его страницах было 3-5% ключевых слов от их об­щего количества. Таким образом, поисковая система при регистра­ции сайта уделяет особое внимание его текстовому содержимому. Т.к. около 90 процентов посетителей сайтов переходят на них из поисковых систем, то проектирование содержимого сайта и нали­чие в нем ключевых слов по тематике, к которой относится сайт, - это важнейший этап продвижения сайта.

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

Размещение ссылок на других сайтах возможно по несколь­ким направлениям:

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

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

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