Создание Веб-страниц с помощью WebMatrix (часть 1 вводная)

Создание Веб-страниц с помощью WebMatrix (часть 1 вводная)

<p style="text-align: justify; ">Если вы студент или просто обладаете со стратью к разработке, новейшим технологиям, любитне принимать новые вызовы и вам хочет работать с инновационной технологией &quot;первых рук&quot; - то вы пришли в нужное место!</p> <p style="text-align: justify; ">Эта серия статей была специально разработана для таких людей, как вы и предлагает уникальную возможность принять участие в приключении, которое познакомит Вас с увлекательным миром WebMatrix, и вы сами увидите, что создание веб-страниц на этой платформе вовсе не сложно и очень весело! Данный цикл подготовлен на основе 6 уроков Рафала Квиэка (Rafal Kwiek), опубликованных в оригинальных MSDN блогах Microsoft.</p> <p style="text-align: justify; ">Из этого цикла вы узнаете о ключевых аспектах технологии, лежащей в основе WebMatrix, получите современные инструменты разработчки, и шаг за шагом пройдёте путь к быстрому старту работы по созданию веб-страниц. </p> <h2>Что это такое? </h2> <p style="text-align: justify; ">WebMatrix – это всё, что нужно для создания веб-сайтов с использованием Windows. Она включает в себя IIS Developer Express (виртулаьный сервер веб-разработки), ASP.NET (веб-фреймворк) и SQL Server Compact (встроенная база данных). Он упрощает процесс разработки веб-сайта и позволяет легко запустить веб-сайт на основе одного из популярных приложений с исходным кодом. Данные и код, полученные в результате разработки на WebMatrix могут быть безболезненно переведены в Visual Studio и на SQL Server.</p> <h3>Почему вам следует использовать это решение? </h3> <p style="text-align: justify; ">Вы будете использовать те же мощные веб-сервера, базы данных и веб-фреймворк, которые будут в последствии работать в Интернете, что делает переход от разработки к «боевому» применению вашего сайта элементарным и максимально простым. Помимо обеспечения простоты переноса, WebMatrix включает в себя новые функции, которые делают веб-разработку проще.</p> <h3>Для кого это решение? </h3> <p style="text-align: justify; ">WebMatrix предназначена для разработчиков, студентов, или просто тех, кто хочет без лишних проблем и усилий создать небольшой и простой веб-сайт. Начало разработки кода, тестирования и развертывания ваших собственных веб-сайтов без необходимости беспокоиться о настройке собственного веб-сервера, управления базами данных, или изучение многих других понятий. WebMatrix делает разработку веб-сайта легкой. </p> <p style="text-align: justify; ">Найдите минутку, чтобы узнать, что произойдёт (какие знания вы получите по мере нашего продвижения):</p> <ol> <li style="text-align: justify; "><a href="#step1" title="Урок 1" >Установка инструментов</a>.</li> <li style="text-align: justify; "><a href="#step2" title="урок 2" >Hello World в WebMatrix</a>.</li> <li style="text-align: justify; "><a href="/information/Создание-Веб-страниц-с-помощью-WebMatrix/" title="урок 3" >Динамический контент (Основы синтаксиса)</a>.</li> <li style="text-align: justify; ">Динамический контент (Основы: переменные).</li> <li style="text-align: justify; ">Динамический контент (Основы: Инструкции).</li> <li style="text-align: justify; ">Динамический контент (Основы Forms).</li> </ol> <p></p> <p> </p> <h2> <a name="step1"></a> Урок 1 – установка инструментов</h2> <p style="text-align: justify; ">В этой статье мы собираемся провести вас через процесс установки необходимых инструментов, чтобы начать создание веб-страниц с помощью WebMatrix. </p> <h3>Шаг 1: Загрузите Web Platform Installer</h3> <p style="text-align: justify; ">Для начала скачайте необходимое программное обеспечение с официального сайта WebMatrix. Перейдите по следующему адресу: http://www.microsoft.com/web/webmatrix/download/ . Найдите и нажмите на кнопку &quot;Скачать сейчас&quot; для скачивания дистрибутива WebPlatform Installer.</p> <p style="text-align: justify; ">WebPlatform Installer выступает в качестве единого места для получения последних компонентов веб-платформы Microsoft в том числе:</p> <ul> <li style="text-align: justify; ">WebMatrix (веб-разработки инструментов),</li> <li style="text-align: justify; ">Веб-сервер (IIS с IIS Media Services),</li> <li style="text-align: justify; ">База данных (SQL Server 2008 Express),</li> <li style="text-align: justify; ">Web Apps (бесплатно популярные ASP.NET и PHP веб-приложений, таких как Umbraco и WordPress),</li> <li style="text-align: justify; ">.Net Framework (. NET),</li> <li style="text-align: justify; ">Инструменты (Visual Web Developer Express)</li> <li style="text-align: justify; ">И, наконец, ряд дополнительных инструментов (PHP интерпретатор для Windows, и пробная версия Expression Web 3!).</li> </ul> <p></p> <p style="text-align: justify; ">Пока мы только собираемся сконцентрироваться на установке WebMatrix - не стесняйтесь, изучать все остальные ресурсы, в свое свободное время. В данном руководстве мы уделим всё своё внимание именно работе с WebMatrix, однако знание других инструментов Microsoft может пригодиться вам в будущем, если вы собираетесь перейти на более профессиональный уровень веб-разработки.</p> <p><img src="/upload/medialibrary/b8f/b8f601fc92ea1e55f34cce4bcc97f93d.PNG" title="step1.PNG" border="0" alt="step1.PNG" width="434" height="323" /></p> <h3>Шаг 2: Запустите установку</h3> <p style="text-align: justify; ">После установки, вы увидите cnhfybwe &quot;Что нового?&quot; (What’s New) - там вы можете найти подробную информацию обо всех имеющихся ресурсах, устанавливаемых с помощью WPI (Web Platform Installer) (см. изображение выше). Вы можете найти более подробную информацию о каждом продукте, просто нажав на пиктограмму&quot;i&quot; рядом с его именем.</p> <p style="text-align: justify; ">Для этого урока, выберите &quot;Приступая к работе&quot; (Getting Started), а затем нажмите кнопку &quot;Установить WebMatrix&quot; (Install WebMatrix), чтобы продолжить.</p> <p><img src="/upload/medialibrary/3db/3db9406ee0e2f08c72f56ea61e227205.PNG" title="step2.PNG" border="0" alt="step2.PNG" width="491" height="365" /></p> <h3>Шаг 3: Завершение установки</h3> <p style="text-align: justify; ">Лучше всего дважды проверить содержимое вашей установки - она должна выглядеть как на рисунке ниже. Как только вы закончите проверку нажмите на кнопку &quot;Я принимаю&quot; (I Accept).</p> <p><img src="/upload/medialibrary/cc3/cc3ec781c7a900d1ec9c03e3fb76a4b7.PNG" title="step3.PNG" border="0" alt="step3.PNG" width="522" height="359" /></p> <h3>Шаг 4: Готово!</h3> <p> </p> <p style="text-align: justify; ">Дождитесь пока установщик загрузит и установит все необходимые компоненты. Как мы писали в одной из предыдущих статей, этот процесс может потребовать перезагрузки компьютера или даже вызвать определённые ошибки, которые легко исправить просто повторив установку.</p> <p style="text-align: justify; "> Как только установка будет закончена нажмите на кнопку &quot;старт&quot; (Launch) для запуска WebMatrix.</p> <p> </p> <p> </p> <h2>Что мы сделали здесь?</h2> <p> </p> <p style="text-align: justify; ">Поздравляю, вы установили все инструменты, которые понадобятся для создания веб-страниц с WebMatrix. Далее мы будем строить что-то простое, но полезное – начнём с &quot;Hello World!&quot; веб-страницы. Пожалуйста, следите за обновлениями! </p> <p style="text-align: justify; "> </p> <h2> <a name="step2"></a> Урок 2 - Hello WebMatrix!</h2> <p>В этом уроке мы собираемся создать простую &quot;Hello World!&quot; веб-страницу с помощью WebMatrix.</p> <h3>Шаг 1: Начало WebMatrix</h3> <p>Запустите WebMatrix (Пуск&gt; Все программы&gt; Microsoft WebMatrix).</p> <p>Вы увидите иконки для &quot;Быстрого старта&quot;. Есть ряд вещей, которые мы можем сделать здесь - можно выбрать один из последних сайтов, создать новый сайт из веб-галереи или шаблона, или, наконец, открыть сайт из папки. Здесь мы собираемся использовать шаблон, так что выбираем &quot;сайта из шаблона&quot; (Site From Template).</p> <p><img src="/upload/medialibrary/2f2/2f266b29340351ddafc2385d4504cdea.PNG" title="step1.PNG" border="0" alt="step1.PNG" width="551" height="314" /></p> <p>В следующем окне, убедитесь, что вариант &quot;Пустой сайт&quot; выбирается из списка доступных шаблонов.</p> <p>После того как вы сделали это, следует задать имя сайта. Отредактируйте &quot;Имя узла&quot;, используя текстовое поле, изменив его на «Hello World». Затем нажмите на кнопку &quot;ОК&quot;.</p> <p><img src="/upload/medialibrary/149/1491451cc168123f23bad36f66edce76.PNG" title="step2.PNG" border="0" alt="step2.PNG" width="633" height="361" /></p> <h3>Шаг 2: WebMatrix IDE</h3> <p>Новый сайт создан и будет представлен на главном экране приложения IDE (см. ниже). Левое меню делится на 4 категории, все из которых нуждаются в пояснениях. </p> <p>Пока мы хотим изменить содержание основных (индексных) страниц сайта, так что выберите &quot;Файлы&quot; из меню слева.</p> <p><img src="/upload/medialibrary/3f8/3f88cc957bc6b18b1f84cdf0c29fe99a.PNG" title="step3.PNG" border="0" alt="step3.PNG" width="633" height="383" /></p> <p>Двойной клик на &quot;index.cshtml&quot; файл в меню слева.</p> <p><img src="/upload/medialibrary/a22/a22d19df27afe496b0e0ae4cea169ef3.PNG" title="ВебМатрикс" border="0" alt="ВебМатрикс" width="634" height="383" /></p> <h3>Шаг 3: Написание простейших HTML</h3> <p>Измените названия сайта на &quot;Hello World!&quot;, А затем добавить h1 пунктом для вывода &quot;Hello World!&quot; Сообщения.</p> <p><img src="/upload/medialibrary/c0a/c0aa3cd5e380cf574f1672fa5079134c.PNG" title="WebMatrix" border="0" alt="WebMatrix" width="634" height="383" /></p> <p>Полный пример кода: </p> <table> <tbody> <tr> <td> <p><span class="Apple-style-span" style="background-color: rgb(215, 215, 215); ">&lt;! DOCTYPE HTML&gt;</span></p> <p><span class="Apple-style-span" style="background-color: rgb(215, 215, 215); ">&lt;HTML&gt; </span></p> <p><span class="Apple-style-span" style="background-color: rgb(215, 215, 215); "> &lt;head&gt; </span></p> <p><span class="Apple-style-span" style="background-color: rgb(215, 215, 215); "> &lt;title&gt; Hello World! :-) &lt;/ Title&gt; </span></p> <p><span class="Apple-style-span" style="background-color: rgb(215, 215, 215); "> &lt;/ HEAD&gt; </span></p> <p><span class="Apple-style-span" style="background-color: rgb(215, 215, 215); "> &lt;body&gt; </span></p> <p><span class="Apple-style-span" style="background-color: rgb(215, 215, 215); "> &lt;H1&gt; Hello World! :-) &lt;/ H1&gt; </span></p> <p><span class="Apple-style-span" style="background-color: rgb(215, 215, 215); "> &lt;/ Body&gt; </span></p> <p><span class="Apple-style-span" style="background-color: rgb(215, 215, 215); ">&lt;/ HTML&gt; </span></p> </td> </tr> </tbody> </table> <h3>Шаг 4: Наслаждайтесь!</h3> <p> </p> <p>Теперь вы готовы, чтобы увидеть вашу веб-страницу в действии! Для этого нажмите на кнопку &quot;Выполнить&quot; на стандартной панели инструментов или нажмите клавишу F12 на клавиатуре.</p> <p>Ваш веб-браузер по умолчанию будет открыт и веб-страницы отображаются с помощью встроенного сервера разработки &quot;IIS Express&quot;.</p> <p> </p> <h3>Что мы сделали?</h3> <p> </p> <p>В этом уроке мы запустили WebMatrix, создали веб-сайт и отредактировали простую HTML-страницу. В следующем уроке вы начнете учиться создавать динамические веб-страницы с использованием WebMatrix. Пожалуйста, следите за обновлениями!</p> <p></p>