Технологии Microsoft для создания RIA-приложений

Web Matrix. Подготовка рабочего места. Программа Hello world

Разбить на страницы
Показывать лекцию целиком

Установка Web Matrix

Для установки WebMatrix необходима утилита Web Platform Installer, её можно скачать по ссылке: http://www.microsoft.com/web/downloads/platform.aspx

После установки Web Platform Installer, запустим утилиту. В открывшемся окне необходимо выбрать "Microsoft WebMatrix" и нажать на кнопку "Добавить", после чего на кнопку "Установить":

(рис 6.1)

По завершению установки, можно приступать к работе с WebMatrix ( Пуск->Все программы-> Microsoft WebMatrix ).

Создание просто приложения с помощью WebMatrix

После установки WebMatrix, создадим простую Web – страницу.

1.Запустим WebMatrix.

(рис 6.2)

2.Выберем "Сайт на основе шаблона". Шаблоны включают в себя файлы-конструкторы и страницы, для различных типов сайтов.

3.Выберем шаблон "Пустой сайт" и назовем его HelloWorld:

(рис 6.3)

4.Нажмем кнопку "OK", после чего WebMatrix создаст и откроет проект сайта:

(рис 6.4)

5.В WebMatrix перейдем в рабочую область ( workspace ) "Файлы", которая позволяет работать с файлами и папками. В левой панели будет отображаться файловая структура проекта:

(рис 6.5)

6.На верхней панели программы WebMatrix, нажмем кнопку "Новый" и далее "Новый файл":

(рис 6.6)

В WebMatrix откроется окно со списком различных типов файлов, таких как HTML, CSS и т.д

7.Выберем из списка - CSHTML, и назовем файл default.cshtml. CSHTML страница – это страница специального типа в WebMatrix, которая может содержать как обычный HTML, Javascript код, так и специальный программный код Веб-страниц:

(рис 6.7)

8.Нажмем кнопку "OK". WebMatrix создаст и откроет страницу в редакторе:

(рис 6.8)

9.К сгенерированному коду добавим: к заголовку документа (тег <title> ) значение "Hello World Page ", заголовок первого уровня (тег <h1> ) значение "Hello World Page", и блок <p>Hello World!</p>.

В результате получим код:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
    <h1>Hello World Page</h1>
    <p>Hello World!</p>
    </body>
</html>

10.Сохраним проект через меню или нажатием на клавиши CTRLl+S:

(рис 6.9)

11.На верхней панели программы, нажмем кнопку "Запуск":

(рис 6.10)

WebMatrix запустит веб-сервер ( IIS Express ) и в результате в окне браузера отобразится:

(рис 6.11)
Страницы:

Установка Web Matrix

Для установки WebMatrix необходима утилита Web Platform Installer, её можно скачать по ссылке: http://www.microsoft.com/web/downloads/platform.aspx

После установки Web Platform Installer, запустим утилиту. В открывшемся окне необходимо выбрать "Microsoft WebMatrix" и нажать на кнопку "Добавить", после чего на кнопку "Установить":

(рис 6.1)

По завершению установки, можно приступать к работе с WebMatrix ( Пуск->Все программы-> Microsoft WebMatrix ).

Создание просто приложения с помощью WebMatrix

После установки WebMatrix, создадим простую Web – страницу.

1.Запустим WebMatrix.

(рис 6.2)

2.Выберем "Сайт на основе шаблона". Шаблоны включают в себя файлы-конструкторы и страницы, для различных типов сайтов.

3.Выберем шаблон "Пустой сайт" и назовем его HelloWorld:

(рис 6.3)

4.Нажмем кнопку "OK", после чего WebMatrix создаст и откроет проект сайта:

(рис 6.4)

5.В WebMatrix перейдем в рабочую область ( workspace ) "Файлы", которая позволяет работать с файлами и папками. В левой панели будет отображаться файловая структура проекта:

(рис 6.5)

6.На верхней панели программы WebMatrix, нажмем кнопку "Новый" и далее "Новый файл":

(рис 6.6)

В WebMatrix откроется окно со списком различных типов файлов, таких как HTML, CSS и т.д

7.Выберем из списка - CSHTML, и назовем файл default.cshtml. CSHTML страница – это страница специального типа в WebMatrix, которая может содержать как обычный HTML, Javascript код, так и специальный программный код Веб-страниц:

(рис 6.7)

8.Нажмем кнопку "OK". WebMatrix создаст и откроет страницу в редакторе:

(рис 6.8)

9.К сгенерированному коду добавим: к заголовку документа (тег <title> ) значение "Hello World Page ", заголовок первого уровня (тег <h1> ) значение "Hello World Page", и блок <p>Hello World!</p>.

В результате получим код:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
    <h1>Hello World Page</h1>
    <p>Hello World!</p>
    </body>
</html>

10.Сохраним проект через меню или нажатием на клавиши CTRLl+S:

(рис 6.9)

11.На верхней панели программы, нажмем кнопку "Запуск":

(рис 6.10)

WebMatrix запустит веб-сервер ( IIS Express ) и в результате в окне браузера отобразится:

(рис 6.11)
Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^