WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


Pages:     || 2 | 3 | 4 | 5 |   ...   | 9 |
НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ «ВЫСШАЯ ШКОЛА ЭКОНОМИКИ» В САНКТ-ПЕТЕРБУРГЕ Серия: «Управление образованием» МАГИСТЕРСКАЯ ПРОГРАММА «УПРАВЛЕНИЕ ОБРАЗОВАНИЕМ» Направление 081100.68 «Государственное и муниципальное управление» Л. А. Керов ИНФОРМАЦИОННОКОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ В УПРАВЛЕНЧЕСКОЙ ПРАКТИКЕ Часть 1. Web-дизайн Учебное пособие НИУ ВШЭ — СПб Санкт-Петербург 2011 УДК 681.3.07 ББК 32.973.26-0.18.2.75 К36 Р е ц е н з е н т ы :

В. А. Костин, доцент кафедры информатики СПбГУ;

С. В. Афанасьева, доцент кафедры бизнес-информатики Национального исследовательского университета «Высшая школа экономики» в Санкт-Петербурге Керов Л. А. Информационно-коммуникационные технологии в управленК36 ческой практике. Часть 1. Web-дизайн. Учебное пособие. — СПб.: Отдел оперативной полиграфии НИУ ВШЭ — Санкт-Петербург, 2011. 138 с.

Учебное пособие посвящено созданию и использованию в управленческой практике образовательных учреждений персональных и корпоративных Webсайтов. При этом в качестве инструментальной системы для разработки сайтов применяется инструментальная система Microsoft Visual Studio версии 2008. Используется русифицированный вариант системы, что удобно для преподавания в вузах России.

В учебном пособии рассматриваются вопросы создания Web-сайтов с HTMLстраницами в инструментальной среде Microsoft Visual Studio, излагаются технические детали публикации Web-сайтов в сети Интернет, детально рассматриваются вопросы стилевого оформления HTML-страниц с использованием внутренних и внешних таблиц стилей, создаваемых с помощью визуального редактора стилей, входящего в состав Microsoft Visual Studio. Особое внимание уделяется программному управлению Web-сайтами с помощью языка JavaScript и работе с Web-формами. Приводятся примеры, иллюстрирующие создание образовательного контента и тестов, т.е. элементов систем класса e-Learning.

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

Материал учебного пособия апробирован автором в курсах, которые он преподавал студентам математико-механического факультета Санкт-Петербургского государственного университета и студентам Национального исследовательского университета – Высшей школы экономики.

Для студентов, обучающихся по направлению 081100.68 «Государственное и муниципальное управление» подготовки магистра, для магистерской программы «Управление образованием» Рекомендовано к печати Учебно-методическим советом НИУ ВШЭ в Санкт-Петербурге © Керов Л., © Национальный исследовательский университет «Высшая школа экономики». Санкт-Петербург, ГЛАВА СОздАНИЕ WEB-САЙТА В MICROSOFT VISUAL STUDIO 1.1. Создание Сайта С HTML-Страницами 1.1.1. Создание Web-сайта Для создания Web-сайта нужно выполнить следующие действия (рис. 1.1):

1) Запустить инструментальную систему Visual Studio 2) Выбрать из меню Файл пункт Создать и команду Веб-узел 3) На экран будут выведено диалоговое окно Новый веб-узел, в верхнем списке которого нужно выбрать элемент.NET Framework 3.4) В списке Шаблоны следует выбрать элемент Пустой веб-узел 5) В списке Расположение следует выбрать элемент Файловая система, а в следующее за ним текстовое поле требуется ввести полное имя папки, в которой должны храниться страницы Web-сайта 6) В списке Язык нужно выбрать элемент Visual C# 7) В заключение следует щелкнуть кнопку ОК В результате выполненных действий будет создан пустой Web-сайт.

Содержимое Web-сайта в любое время работы над ним можно увидеть в окне Обозреватель решений.

В плане структурной организации Web-сайт – это папка с файлами.

Среди этих файлов обязательно присутствуют файлы Web-страниц.

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

Совокупность тегов и правил их использования называется языком гипертекстовой разметки. В Web-сайтах, разрабатываемых с помощью Microsoft Visual Studio, используется самая новая версия этого языка – расширяемый язык гипертекстовой разметки (eXtensible HyperText Markup Language, XHTML).

Теги подразделяются на следующие виды:

• Клиентские теги, которые «понимает» Web-браузер • Серверные теги, которые «понимает» только Web-сервер Web-страница, которая содержит только клиентские теги, называется HTML-страницей. Примером Web-страницы с серверными тегами может служить ASP-страница (Active Server Page, активная серверная страница).

Рис. 1.1. Создание Web-сайта Информационно-коммуникационные технологии в управленческой практике 1.1.2. Добавление HTML- страницы Для добавления HTML-страницы в созданный сайт следует выбрать из меню Веб-узел команду добавить новый элемент. На экран будет выведено одноименное диалоговое окно, в котором требуется выполнить следующие действия (Рис.1.2):

• В области Шаблоны выбрать шаблон HTML-страница • В поле Имя отредактировать имя файла HTML-страницы • Щелкнуть кнопку добавить Рис. 1.2. Добавление HTML-страницы Глава 1. Создание Web-сайта в Microsoft Visual Studio В сайт будет добавлена страница, содержимое которой может быть отображено в одном из трех режимов:



• В режиме Конструктор страница показывается в таком виде, как она будет выглядеть в окне Web-браузера • В режиме Исходный код показывается код разметки страницы • В режиме Разделить рабочая область Visual Studio разделяется на две части, одна из которых соответствует режиму Исходный код, а вторая — режиму Конструктор Переключение указанных выше режимов выполняется с помощью ярлыков в нижней части окна. Код разметки страницы содержит следующие элементы:

1) Директиву , которая задает формат кода разметки (в данном случае – XHTML 1.0 Transitional) 2) Особые команды, которые заключены в угловые скобки, называются тегами и используются для задания внешнего вида элементов страницы в окне браузера или для указания назначения элементов страницы, в частности:

• — теги начала и конца кода разметки страницы • — теги заголовка страницы • 1 ББК 32.973.26-0.18.2.75 К36 Р е ц е н з е н т ы :В. А. Костин, доцент кафедры информатики СПбГУ;С. В. Афанасьева, доцент кафедры бизнес-информатики Национального — теги названия страницы • — теги тела страницы 1.1.3. Разметка заголовков Для выделения заголовков (header) в языке XHTML предусмотрены теги заголовков:

Информационно-коммуникационные технологии в управленческой практике Пример разметки заголовков (рис. 1.3):

1 ББК 32.973.26-0.18.2.75 К36 Р е ц е н з е н т ы :В. А. Костин, доцент кафедры информатики СПбГУ;С. В. Афанасьева, доцент кафедры бизнес-информатики Национального

Санкт-Петербург

Санкт-Петербург

Санкт-Петербург

Санкт-Петербург

Санкт-Петербург
Санкт-Петербург
Заметим, что большинство тегов в языке XHTML являются парными и состоят из открывающего тега (например,

) и закрывающего тега (например,

). Текст между открывающим и закрывающим тегами называется содержанием тега; именно к нему применяется действие тега.

Рис. 1.3. Вид заголовков в окне браузера Глава 1. Создание Web-сайта в Microsoft Visual Studio 1.1.4. Разметка абзацев Если некоторый фрагмент текста страницы должен быть выделен в виде абзаца (paragraph), то он заключается в парные теги

. Абзацы отделяются друг от друга пустой строкой.

Пример разметки абзацев (рис.1.4):

1 ББК 32.973.26-0.18.2.75 К36 Р е ц е н з е н т ы :В. А. Костин, доцент кафедры информатики СПбГУ;С. В. Афанасьева, доцент кафедры бизнес-информатики Национального

Санкт-Петербург

В мае 1703 г. Петром I в устье Невы была заложена крепость,позднее получившая название Петропавловской. Спустя год после ее основания на противоположной стороне Невы была построена верфь — Адмиралтейство.

На стрелке Васильевского острова затем обосновалась торговая пристань.

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

,...,

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

— жирный шрифт (bold) • — подчеркивание (underline) Когда браузер встречает тег, вложенный в другой тег, он складывает эффект от применения этих тегов. При этом порядок следования закрывающих тегов должен быть обратным тому, в котором следуют открывающие теги. Если это правило нарушено, браузер может не отобразить страницу правильно (хотя Microsoft Internet Explorer славится своим умением исправлять мелкие ошибки).

Пример разметки страницы с вложенными тегами (рис. 1.5):

1 ББК 32.973.26-0.18.2.75 К36 Р е ц е н з е н т ы :В. А. Костин, доцент кафедры информатики СПбГУ;С. В. Афанасьева, доцент кафедры бизнес-информатики Национального

Санкт-Петербург

В мае 1703 г. Петром I в устье Невы была заложена крепость,позднее получившая название Петропавловской.

Спустя год после ее основания на противоположной стороне Невы была построена верфь - Адмиралтейство.

На стрелке Васильевского острова затем обосновалась торговая пристань.

Глава 1. Создание Web-сайта в Microsoft Visual Studio Рис. 1.5. Вид страницы с вложенными тегами на браузере 1.1.6. Просмотр страницы в браузере Для проверки функционирования страницы в окне браузера нужно выполнить следующие действия:

• Щелкнуть правой кнопкой мыши в окне Обозреватель решений по имени страницы • В контекстном меню выбрать команду Просмотр в обозревателе В ответ на это действие инструментальная система Visual Studio выполнит следующие действия (рис. 1.6):

• Запустит встроенный в нее тестовый Web-сервер и отобразит на панели задач значок ASP.NET Development Server • Разместит Web-сайт на тестовом Web-сервере • Запустит браузер Microsoft Internet Explorer на клиентском компьютере и отобразит в нем страницу Информационно-коммуникационные технологии в управленческой практике Рис. 1.6. Просмотр страницы на браузере 1.2. работа С текСтом HTML-Страницы 1.2.1. Маркированные списки Маркированный список (unnumbered list) заключается в теги

    . Элемент списка (list item) заключается в теги
  • . В открывающем теге
      может быть указан атрибут style, параметр liststyle-type которого может принимать значения:





      • disc — элемент списка маркируется кружком (по умолчанию) • circle — элемент списка маркируется окружностью • square — элемент списка маркируется квадратом Глава 1. Создание Web-сайта в Microsoft Visual Studio Пример разметки маркированных списков (рис. 1.7):

      1 ББК 32.973.26-0.18.2.75 К36 Р е ц е н з е н т ы :В. А. Костин, доцент кафедры информатики СПбГУ;С. В. Афанасьева, доцент кафедры бизнес-информатики Национального Добавление HTML-страницы:

      • В области Шаблоны выберем шаблон HTML-страница
      • В поле Имя отредактируем имя файла HTML-страницы
      • Щелкнем кнопку Добавить
      Параметр list-style-type может принимать значения:

      • disc – элемент списка маркируется кружком (по умолчанию)
      • circle - элемент списка маркируется окружностью
      • square - элемент списка маркируется квадратом
      Рис. 1.7. Вид маркированных списков на браузере Информационно-коммуникационные технологии в управленческой практике 1.2.2. Нумерованные списки Нумерованный список (ordered list) заключается в теги
        .

        Элемент списка (list item) заключается в теги

      1. . В открывающем теге
          может быть указан атрибут style, параметр list-style-type которого может принимать значения:

          • decimal — элемент списка маркируется 1,2,3,... (по умолчанию) • upper-alpha — элемент списка маркируется A,B,C,...

          • upper-roman — элемент списка маркируется I,II,III,IV,...

          В открывающем теге

        1. может быть указан атрибут value, значение которого задает номер данного элемента. Последующие элементы будут нумероваться, начиная с заданного номера.

          Пример разметки нумерованных списков (рис. 1.8):

          1 ББК 32.973.26-0.18.2.75 К36 Р е ц е н з е н т ы :В. А. Костин, доцент кафедры информатики СПбГУ;С. В. Афанасьева, доцент кафедры бизнес-информатики Национального Создание Web-сайта:

          1. Запустим Visual Studio 2008
          2. Выберем команду Файл => Создать => Веб-узел
          В диалоговом окнео Новый веб-узел:,
          1. В списке Шаблоны выберем Пустой вебузел
          2. В списке Расположение выберем Файловая система
          Глава 1. Создание Web-сайта в Microsoft Visual Studio Рис. 1.8. Вид нумерованных списков на браузере 1.2.3. Списки определений Список определений (definition list) состоит из термина и его определения и заключается в теги
          . Термин (definition term) заключается в теги
          . Определение терминов (definition description) заключается в теги
           
          .

          Пример разметки списков определений (рис. 1.9):

          Рис.1.9. Вид списков определений на браузере 1 ББК 32.973.26-0.18.2.75 К36 Р е ц е н з е н т ы :В. А. Костин, доцент кафедры информатики СПбГУ;С. В. Афанасьева, доцент кафедры бизнес-информатики Национального Информационно-коммуникационные технологии в управленческой практике

          Теги уровня блока
          Начинают текст с новой строки и могут содержать другие теги. К ним относятся: <h1></h1>, <p></p>
          Встраиваемые теги
          Не начинают текст с новой строки и могут содержать только текст или другие встраиваемые теги. К ним относятся:

          <b></b>, <u></u>

          1.2.4. Управление переносом строк Браузер автоматически выполняет перенос слов в строке, если строка не помещается в окне браузера. Для принудительного разрыва текста в строке используется тег (break). В точке расположения этого тега происходит разрыв текста, и следующий за ним текст начинается с новой строки. Этот тег является одиночным, т.е. не имеет парного тега. Перед закрывающей угловой скобкой он содержит символ слеш ( / ).

          Пример разметки переноса строк (рис. 1.10):

          1 ББК 32.973.26-0.18.2.75 К36 Р е ц е н з е н т ы :В. А. Костин, доцент кафедры информатики СПбГУ;С. В. Афанасьева, доцент кафедры бизнес-информатики Национального

          Санкт-Петербург

          В мае 1703 г. Петром I в устье Невы была заложена крепость,позднее получившая название Петропавловской.

          Спустя год после ее основания на противоположной стороне Невы была построена верфь - Адмиралтейство.



          На стрелке Васильевского острова затем обосновалась торговая пристань.

          Глава 1. Создание Web-сайта в Microsoft Visual Studio Рис.1.10. Вид переноса строк на браузере 1.2.5. Специальные символы Есть еще один способ управления переносом строк: запрет переноса строки между определенными словами. Для этого достаточно между словами вставить не обычный пробел, а неразрывный пробел, для обозначения которого используется специальная кодировка: .

          Существуют и другие символы, для которых используется специальная кодировка:

          Символ Код Примечание < <

          > >

          неразрывный пробел

          & &

          © ©

          ® ®

          € €

          ™ ™

          « " Двойная кавычка “ “ Левая кавычка ” ” Правая кавычка — „ Длинное тире Пример разметки специальных символов (рис. 1.11):

          Pages:     || 2 | 3 | 4 | 5 |   ...   | 9 |










      © 2011 www.dissers.ru - «Бесплатная электронная библиотека»

      Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
      Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.