01.12.2011
В первой части вы освоили, что такое WebMatrix, видели, как ее установить и как запустить. В этой главе вы будете использовать эти знания для создания своего первого веб-сайта, и укрепите знания, создав первую веб-страницу.
Создаем свой сайт.
Выберите опцию Создать сайт из шаблона. Перед вами отобразится диалоговое окно, см. ниже. Обратите внимание, что вы видете множество различных шаблонов, поскольку WebMatrix все время расширяется. Далее необходимо выбрать Пустой шаблон сайта и дать ему название «Movies».
Когда вы нажмете OK, WebMatrix создаст новый пустой веб-сайт. Далее он будет загружен в редакторе WebMatrix, как показано здесь:
Прежде, чем вы продолжите чтение, необходимо понять информацию, которая отобразилась перед вами. WebMatrix – это больше чем просто инструмент редактирования кода. Она интегрирует веб-сервер под названием IIS Express. Веб-сервер – это специальная часть программного обеспечения, которая принимает запросы на данные по Интернету, и отвечает, поставляя данные веб-браузеру.
Когда вы открываете свой браузер и вписываете в URL что-то подобное - http://www.microsoft.com, вы вызываете веб-сервер Microsoft, и он отвечает, отправляя код, HTML, JavaScript, CSS, изображения и другое. Ваш браузер после этого собирает все данные в единую страницу.
Наличие сервера, встроенного в WebMatrix, делает разработку своего сайта более легкой, похожей на разработку веб-сервера в Интернете. Если вы посмотрите на имя сайта на форме, изображенной ниже (в нашем случае это «Movies»), то увидите, что название сервера в адресе сайта http://localhost:8946 означает, что узел к серверу локален, то есть разрабатываемая машина является вашей.
С этой страницы WebMatrix вы можете запустить веб-сервер и свой сайт. Но если сделать это сейчас, то выйдет ошибка, потому что вы еще не создали контент для сайта. Сделаем это в следующем пункте.
Создание первой веб-страницы
Вы заметили, что WebMatrix позволяет перемещаться между различными рабочими пространствами, нажимая кнопки слева. В настоящее время кнопка Site нажата, и отображает такие детали о вашем сайте, как URL сайта, и другие инструменты, которые вы можете использовать, например, можно мониторить запросы к сайту. Вы изучите каждое из этих рабочих пространств, поскольку читаете данную статью, но для начала, выберите рабочее пространство Files, нажав соответствующую кнопку.
WebMatrix откроет рабочее пространство Files, и так как у вас еще нет файлов на сайте, пространство будет пустым. Однако, есть хорошая дружественная кнопка, которая позволяет вам добавлять файл к своему сайту, или можно использовать кнопку New на панели инструментов, для создания нового файла.
Когда вы выберете любую из них, вы увидите диалоговое окно для выбора типа файла, которое выдает вам множество вариантов для большого количества различных типов файлов, которые обычно используются в сети.
Выберите тип файла HTML, назовите его default.html и нажмите ОК. Теперь WebMatrix создаст простой файл HTML и откроет его для Вас.
HTML (Язык разметки гипертекста), файл – это просто ряд инструкций, которые говорят браузеру как отрисовать страницу. Обычно он состоит из Заголовка, который непосредственно включает инструкции о странице, и Тела, которое является содержанием страницы. Контент создается с помощью тегов, которые открываются именем тега в угловых скобках, как < body > и заканчиваются именем с наклонной чертой, также в угловых скобках, такой как </body>. Поэтому контент между этими тегами будет обработан браузером как тело страницы. Вы можете узнать больше о HTML и его тегах в w3cschools.com. http://w3schools.com/html/default.asp.
Отредактируйте свою страницу так, чтобы она была похожа на подобный код:
<!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>
Вы вводите некоторый текст в тег <title>, так же как помещаете некоторый код между тегами < body >. Этот код будет использовать < h1> для Заголовка 1 текста стиля, < ol >, чтобы сообщить браузеру, что вы обрабатываете список и некоторые элементы < li >, чтобы сообщить браузеру, что вы представляете некоторые элементы списка.
На панели инструментов WebMatrix вы увидите кнопку ‘Run’.
Выберите её, WebMatrix запустит браузер и откроет веб-сайт, работающий на вашем локальном сервере.
Здесь есть много вариантов. Позвольте детализировать их.
Веб Сервер
Видете строку поиска на браузере? Она не открывает файл с вашего жесткого диска, но запускает веб-сервер и указывает браузеру на сервер, запрашивая обслуживание файла default.html.
Помотрите вниз на системный трей своего ПК, и вы увидите, что небольшой значок указывает на то, что веб-сервер IIS Express работает.
Щелкните правой кнопкой мыши по нему, и вы увидите, что он запустит Фильмы на вашем сайте.
Заголовок страницы
Теперь обратите внимание на вкладку браузера для данной страницы. Она должна содержать текст ‘My Favorite Movies’. Для сравнения вот тот же самый сайт, работающий в Internet Explorer, Chrome, Safari, FireFox и Opera. Заметьте, что текст - это то, что вы ввели в теге < title > и в теге < head > страницы, и тем самым, вы сообщили браузеру, что это есть название страницы. Различные браузеры обрабатывают название страницы по-разному.
Internet Explorer:
Chrome:
Safari:
Firefox:
Opera:
Веб-разработчику важно помнить, что различные браузеры могут обрабатывать одинаковые вещи различными способами. Хорошо будет протестировать вашу страницу в различных браузерах, чтобы проверить, что страница ведет себя как и ожидалось.
Примечание: Запуск вашего сайта в различных браузерах
Действительно хорошим аспектом WebMatrix, кроме предоставления веб-сервера, который работает на вашей машине, является возможность быстро запустить любой из установленных браузеров. Вы можете видеть это, щелкая по стрелке вниз у основания кнопки Run в ленте инструментов WebMatrix.
В списке отобразятся только установленные браузеры.
Тело страницы
В своем коде вы использовали тег < h1> рядом с фразой ‘A list of my Favorite Movies’. Это было командой браузеру использовать стиль ‘Заголовок 1’, и отображалось большим полужирным шрифтом.
Наконец, вы выписали список своих любимых фильмов, используя < ol > (для ‘Ordered List’’) и < li > теги (для ‘List Item’), и браузер отображал их. Обратите внимание, что вы не помещали маркеры в список,а браузер так или иначе отображал их, потому что это стиль по умолчанию, который браузер будет использовать, чтобы представить элементы < li >. В третьей части этого учебного руководства вы узнаете, как изменить этот стиль, чтобы заставить элементы списка отображаться так, как вы хотите.
Подведем итог
В этой части учебного руководства вы использовали WebMatrix, чтобы создать простую веб-страницу, и увидели, как эта веб-страница была отображена в качестве части веб-сайта, используя веб-сервер. Вы создали свою первую страницу HTML и записали некоторую разметку HTML, чтобы сообщить браузеру, как отображать эту страницу. Вы видели, что можете добавлять некоторую разметку к заголовку, чтобы отображать данные о странице, и к телу, чтобы определить содержание страницы. Вы запускали страницу и видели, как она работает в нескольких различных браузерах. В следующем учебном руководстве вы увидите, как разработать страницу и заставить ее выглядеть более симпатичной!
В следующей части этой статьи вы узнаете о таблицах стилей и каскадных таблицах стилей, и о том, как можно использовать их, чтобы сделать вашу страницу красивой!
