WebMatrix – простое создание веб-сайтов. Часть 3 – Оформление

Здравствуйте, уважаемые коллеги!

А мы продолжаем нашу серию статей про WebMatrix. Итак, сегодня я расскажу Вам про создание оформления, а именно про то, как запросто создать блоки контента для повторного использования, и как создать для всех страниц однообразное оформление с помощью макета.

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

Так вот, благодаря ASP.Net мы можем создать отдельный файл с блоком контента, в котором может быть текст, разметка или код. А потом эти данные вставлять везде, где нам только нужно, причем при этом нам не нужно копировать контент на каждую страницу. А в случае необходимости обновления, нужно всего лишь обновить один файл – и изменения распространятся автоматически.

Даная схема отображает принцип работы блоков контента:

1

Во время запроса страницы с веб-сервера, в места, где вызывается метод «RenderPage», ASP.Net вставляет блоки контента. После чего, готовая сформированная страница отправляется к нам в браузер.

Теперь давайте рассмотрим, как это делается практически.

Создаем «Наш сайт», на основе шаблона «Пустой сайт»:

2

В корневой папке веб-сайта создаем файл с именем index.cshtml.

3

В тег <body> пропишем следующие строчки:

<h1>Заголовок нашей главной страницы</h1>

<p>Содержимое нашей главной страницы нашего сайта .</p>

В результате все должно выглядеть вот так:

4

Вид в браузере:

5

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

6

И создадим в ней файлы с именами «_header.cshtml» и «_footer.cshtml». Это и будут наши верхний и нижний колонтитулы:

7

Поменяем содержимое файла «_header.cshtml» на:

<div id=”header”>

Это наш верхний колонтитул🙂

</div>

 

8

Содержимое «_footer.cshtml» на:

<div id=”footer”>

&copy; 2011 «Наш Сайт» Все права защищены.

</div>

9

Заметьте, что название файлов начинается с символа «_». Это сделано для предотвращения запроса пользователями таких страниц, поскольку ASP.Net не отправит в браузер страницы, имя которых начинается с этого символа.

Если попробовать посмотреть один из этих файлов в браузере с помощью команды «Запуск в браузере», увидим следующее:

10

Теперь, после всего сделанного , мы добавляем метод «RenderPage» в код страницы«index.cshtml»:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″ />

<title></title>

</head>

<body>

@RenderPage(“/Shared/_header.cshtml”)

<h1>Заголовок нашей главной страницы</h1>

<p>Содержимое нашей главной страницы нашего сайта </p>

@RenderPage(“/Shared/_footer.cshtml”)

</body>

</html>

44

Как Вы видите, вызывая метод «RenderPage», мы как бы указываем содержимое какого файла («_header.cshtml» или «_footer.cshtml») куда вставить (место, где вызывается метод). Результат в браузере:

11

Если посмотреть код страницы через браузер, то мы увидим следующее:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″ />

<title></title>

</head>

<body>

<div class=”header”>

Это наш верхний колонтитул🙂

</div>

<h1>Заголовок нашей главной страницы</h1>

<p>Содержимое нашей главной страницы нашего сайта </p>

<div class=”footer”>

&copy; 2011 «Наш Сайт» Все права защищены.

</div>

</body>

</html>

Как видите, в местах, где мы вызвали метод «RenderPage», вместо метода фактически появилось содержимое файлов «_header.cshtml» или «_footer.cshtml».

Теперь давайте рассмотрим метод «RenderBody», а именно создание однообразного оформления с помощью макета.

Что же делает страница макет?

Страница-макет являет собой некую страницу, у которой есть заданная структура, но у неё нет данных для отображения. То есть мы указываем данные для отображения, и макет страницу, в которой их отображать.

По сути наш макет, это как и любая другая страница HTML , только в ней есть метод «RenderBody». Там, где мы расположим метод, туда и будут вставлены данные для отображения!

Даная схема отображает принцип работы метода:

12

Как вы видите, все происходит в несколько этапов:

1. Сначала запрашивается страница контента. В ней есть код, задающий макет, который должен использоваться для данной страницы, и данные для отображения.

2. В странице макета контент вставится в место, где вызывается метод «RenderBody». Также в макет можно вставлять блоки контента с помощью метода «RenderPage», как мы уже делали.

3. И после того как сформировалась нужная нам страница, она отправляется в браузер.

Давайте теперь сделаем это на практике!

Создадим в папке «Shared» файлик «_layout.cshtml», это и будет наша страница макета:

13

Теперь изменим содержимое файла. А именно укажем стиль и место, куда будут вставляться наши данные.

В теге <head> изменим содержимое тега <title> на – «Наш структурированный контент». Также с помощью тега <link> подключим таблицу стилей:

<link href=”@Href(“/Styles/OurSite.css”)” rel=”stylesheet” type=”text/css”/>

Поскольку не все веб-сервера обрабатывают атрибут «href» ссылок одинаково, мы используем вспомогательный модуль «@Href».

В теге <body> вставим наши колонтитулы с помощью метода «RenderPage», а посередине у нас будет метод «RenderBody»:

<div id=”main”>

@RenderBody()

</div>

В результате все должно выглядеть вот так:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″ />

<title>Наш структурированный контент</title>

<link href=”@Href(“/Style/ OurSiteStyleSheet.css”)” rel=”stylesheet” type=”text/css”/>

</head>

<body>

@RenderPage(“/Shared/_header.cshtml”)

<div id=”main”>

@RenderBody()

</div>

@RenderPage(“/Shared/_footer.cshtml”)

</body>

</html>

14

Заметьте, что страница макета не может содержать больше одного вызова метода «RenderBody».

Теперь создадим нашу таблицу стилей, которую мы указали в теге <link>.

Но что такое каскадная таблица стиля?

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — это формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

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

Главной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS).

Благодаря такому разделению увеличивается гибкость, доступность документа, возможность управления отображением. Также уменьшается сложность и количество повторений в структурном содержимом.

Ну что ж, для начала создадим папочку «Style» и в ней файл «OurSiteStyleSheet.css»:

15

Добавим в него следующее:

h1 {

border-bottom: 3px solid #FFFC00;

font: 2.75em/1.75em Georgia, serif;

color: #FFFF00;

}

ul {

list-style-type: none;

}

body {

margin: 0;

padding: 1em;

background-color: #3399CC;

font: 75%/1.75em “Trebuchet MS”, Verdana, sans-serif;

font-weight: bold;

color: #FFFF00;

}

#list {

margin: 1em 0 7em -3em;

padding: 1em 0 0 0;

background-color: #ffffff;

color: #996600;

width: 25%;

float: left;

}

#header, #footer {

margin: 0;

padding: 0;

color: #FFFFFF;

}

Блок кода h1{ } служит для указания форматирования тега <h1>. То есть, текст который находится в теге <h1> в странице контента, будет отформатирован согласно блоку h1{ }. Также и с блоками кода body, #header и др. Вот только чтобы к блоку кода применилось форматирование, которое задано в таблице стиля с «#» в начале названия, нам нужно указать в теге идентификатор id. Пример, так как в таблице стиля записано:

#header, #footer {

margin: 0;

padding: 0;

color: #FFFFFF;

}

Мы в файле «_header.cshtml» в тег <div> добавляем «id=”header”», так как в противном случае форматирование с таблицы стиля не применится:

<div id=”header”>

Это наш верхний колонтитул🙂

</div>

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

Теперь создадим файл контента. В корневой папке создадим файл с именем «OurContent.cshtml»:

16

Его содержимое заменим на следующий код:

@{

Layout = “/Shared/_layout.cshtml”;

}

<h1> Структурированный контент </h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.</p>

17

Как вы уже заметили, блок кода:

@{ Layout = “/Shared/_layout.cshtml”; }

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

Теперь, давайте откроем файл «OurContent.cshtml» для просмотра в браузере. Вот что у нас получилось:

18

И для закрепления материала еще добавим в страницу контента «OurContent.cshtml» список:

<ul >

<li>Lorem</li>

<li>Ipsum</li>

<li>Dolor</li>

<li>Consecte</li>

<li>Eiusmod</li>

<li>Tempor</li>

<li>Incididu</li>

</ul>

После, в файле стиля «OurSiteStyleSheet.css» зазначим, чтобы он отображался белым цветом. Для этого в блок ul{ } вместо «list-style-type: none;» запишем:

font: 75%/1.75em Georgia, serif;

color: #FFFFFF;

В результате должно выглядеть вот так:

20

Итак, мы задали шрифт Georgia, размер 75%/1.75em, указали, что шрифт обычный с засечками и цвет шрифта – белый. И вот результат:

19

Итак, мы рассмотрели как в WebMatrix`е создать блоки контента для повторного использования и как создать для всех страниц однообразное оформление с помощью макета.

В следующей статье мы еще углубимся в работу с макетами и рассмотрим:

  1. Как создать страницу макета, имеющую несколько разделов контента;
  2. Как передать данные в страницу макета.

WebMatrix – простое создание веб-сайтов. Часть 3 – Оформление: Один коментар

  1. Блин офигительски побольше бы таких блогов и таких людей, которым не жаль своего времени – это все писать.

    Жду следующего урока с нетерпением. Спасибо и низкий поклон…

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s