14.12.2011
Во второй части мы видели, как использовать WebMatrix для создания простой веб страницы, и как с этой страницей будут работать различные браузеры. В этой части вы увидите и научитесь, как изменять визуальный стиль вашей страницы, используя технологию под названием Cascading Style Sheets –CSS (Каскадные таблицы стилей).
Данная статья будет разбита на 2 половины!
Далее приведен список фильмов, который вы уже создавали на своей веб станице:
Подготавливаем свою страницу для внедрения элементов стиля, используя CSS
Далее вы узнаете немного больше HTML -тегов, которые предназначены для функционирования гиперссылок , разделения страницы и тегов сценария, а так же, как можно отредактировать страницу, используя CSS для установки стиля и свойств. Наконец, вы используете разметку, чтобы использовать контент, который будет свойственен этой странице и другим страницам на вашем веб-сайте, таким образом, станет понятно, как отредактировать общий контент более легким способом.
Использование разделителей
С помощью HTML вы можете логически поделить вашу станицу на отдельные блоки с помощью тега <div>. Это пригодиться, когда вы позже походу этой статьи начнете просматривать часть про стиль страницы и, когда вы будите определять стили для отдельных частей страницы.
Итак, для начала код HTML вышей страницы из первой части:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Favorite Movies</title>
</head>
<body>
<h1>A list of my Favorite Movies</h1>
<ol>
<li>It's a wonderful life</li>
<li>Lord of the Rings</li>
<li>The Fourth World</li>
<li>The Lion King</li>
</ol>
</body>
</html>
Первое, что нужно сделать, это заключить список, содержащий фильмы в тег <div>, как показано здесь:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Favorite Movies</title>
</head>
<body>
<h1>A list of my Favorite Movies</h1>
<div id="movieslist">
<ol>
<li>It's a wonderful life</li>
<li>Lord of the Rings</li>
<li>The Fourth World</li>
<li>The Lion King</li>
</ol>
</div>
</body>
</html>
Теперь вы видите, что список <ol><li>, содержащий фильмы, содержится внутри тега <div>. Если вы теперь просмотрите страницу, то никакого отличая не будет. Это потому, что тег <div> является логическим делителем, и у него нет никакого физического проявления.
Использование гиперссылок
Вероятно, вы уже знакомы с гиперссылками, активизируемыми по щелчку по ним, которые связывают вас с другой страницей. «Гиперссылки» в HTML первоначально называли связками, и всегда, когда вы хотите их создать, необходимо использовать тег <a>.
В теги <a> </a> (теги привязки привязка) заключается контент, что делает его кликабельным. Когда пользователь нажимает на этот контент (гиперссылку), браузер перенаправляет его по адресу, указанному в качестве значения атрибута HREF. Атрибут href заключается внутри тега <a></a>.
Атрибут определен на теге непосредственно, в пределах тега, как здесь:
<tag attribute=”attributevalue”>content</tag>
Таким образом, чтобы создать гиперссылку, вы можете использовать следующий синтаксис:
<a href=”http://www.microsoft.com”>Click Here</a>
Href не обязательно должен ссылаться на веб-сайт, как описано выше, он может также быть функцией JavaScript, выполняющей действия предусматриваемые программистом. Существует специальный href, который может использоваться в качестве метки во время написания кода для того, чтобы было можно увидеть, как работает стиль гиперссылок. Чтобы сделать это, используйте символ "#" в href.
Чтобы сделать все элементы <li>, содержащие гиперссылки, ссылающиеся на фильмы, мы просто заключаем текст с названием фильма в тег <a> и устанавливаем атрибуту HREF значение #, как показано здесь:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Favorite Movies</title>
</head>
<body>
<h1>A list of my Favorite Movies</h1>
<div id="movieslist">
<ol>
<li><a href="#">It's a wonderful life</a></li>
<li><a href="#">Lord of the Rings</a></li>
<li><a href="#">The Fourth World</a></li>
<li><a href="#">The Lion King</a></li>
</ol>
</div>
</html>
Если вы запустите страницу, то увидите, что элементы в вашем списке будут использовать знакомый стиль для гиперссылок, а именно: синее подчеркивание
Добавление заголовка и нижнего колонтитула
Следующая вещь, что мы сделаем – это добавим заголовок и нижний колонтитул к странице. Сделаем это с помощью новых тегов <header> и <footer>, доступных в HTML5. Более подробную информацию о HTML5 можно узнать на w3cschools сайте:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" />
<title>My Favorite Movies</title></head>
<body> <header> <h1>A list of my Favorite Movies</h1>
</header> <div id="movieslist">
<ol> <li><a href="#">It's a wonderful life</a></li> <li><a href="#">Lord of the Rings</a></li>
<li><a href="#">The Fourth World</a></li> <li><a href="#">The Lion King</a></li>
</ol> </div> <footer> This site was built using Microsoft WebMatrix.
<a href="http://web.ms/webmatrix">Download it now.</a> </footer></html>
Как видите, это приятное дополнение HTML.
Для создания заголовка мы всего лишь переносим <h1>, который создали ранее в теге <header>. Для нижнего колонтитула мы создаем небольшой текст и гиперссылку.
Когда Вы посмотрите на страницу в браузере, она будет выглядеть примерно так:
Кроме нижнего колонтитула отличий не много, они скоро появятся!
Определение стиля страницы
В предыдущем разделе, при рассмотрении тегов привязки, вы узнали о таких атрибутах, которые описывают поведение элемента. В теге привязки вы определяете поведение т.е., что произойдет после нажатия, определяя атрибут HREF.
Вы можете использовать атрибуты, чтобы определить, как будет выглядеть элемент, включая его стиль шрифта, размер шрифта, цвет, границу и многое другое.
Так, например если вы помните <h1>, который мы поместили на странице, содержащий ‘A list of my Favorite Movies’, вы могли изменить его шрифт и поменять цвет как показано здесь:
<h1 style="color:blue; font-size:32; text-decoration:underline">A list of my Favorite Movies</h1>
Как можно заметить, атрибут стиля тег <h1> содержит список определений для стиля. Таким образом, вышеупомянутая разметка выбрала синий цвет, размер шрифта 32, шрифт Verdana и нижнее подчеркивание, сформировался итоговый результат:
Хотя это и работает хорошо, но не является лучшим способом создания стилей на странице. Представьте, чтобы было, если бы каждый элемент пришлось разрабатывать таким образом. Вы закончили бы работу с большим количеством текста на вашей странице, замедляя загрузку страницы и замедляя браузер.
