
- •Теоретический материал
- •1. Internet Explorer 9: новые возможности
- •Новые функциональные возможности ie9
- •2. Developer Tools (средства разработчика) в ie9: обзор возможностей посвященной общим сведениям о строке агента пользователя ie9
- •3. WebMatrix 2
- •Порядок выполнения работы Задание 1. Создание и редактирование html документа в WebMatrix
- •Задание 2. Отладка html и css с помощью средств разработчика в ie8
- •Проверка элементов html
- •Проверка свойств css
- •Редактирование кода на лету
- •Сохранение изменений
- •Контрольные задания
Порядок выполнения работы Задание 1. Создание и редактирование html документа в WebMatrix
После запуска WebMatrix необходимо выбрать "Сайт на основе шаблона", а затем "Пустой сайт", при этом укажите внизу имя сайта "Timetable":
После этого необходим создать файлы для веб-сайта. Если на левой панели выбрать раздел "Файлы", то можно увидеть, что в списке представлен единственный файл "robots.txt". Поэтому нам потребуется создать дополнительно HTML страницу веб-сайта и таблицу стилей CSS. С этой целью, необходимо кликнуть "Создать файл на правой панели" или выбрать "Новый" на панели инструментов наверху:
Далее следует выбрать тип файла "HTML". Внизу также следует указать имя файла - "Timetable".
После этого будет автоматически создана HTML страница следующего содержания:
Добавьте вручную следующий HTML код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Расписание занятий</title>
<link href="TableStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table style="width: 100%;" id="subjects" class="alt">
<tr>
<th> №</th>
<th> Дисциплина</th>
<th> Семестр</th>
<th> Учебных часов</th>
</tr>
<tr>
<td> 1</td>
<td> Математический анализ</td>
<td> 1</td>
<td> 90</td>
</tr>
<tr class="alt" >
<td> 2</td>
<td> Информатика</td>
<td> 1</td>
<td> 72</td>
</tr>
<tr>
<td> 3</td>
<td class="alt"> Философия</td>
<td> 3</td>
<td> 72</td>
</tr>
<tr class="alt">
<td> 4</td>
<td> Информационные сети</td>
<td> 6</td>
<td> 64</td>
</tr>
</table>
</body>
</html>
Далее необходимо создать файл внешний файл с таблицей стилей. Это делается также как и в случае с HTML файлом, только выбирается тип файла "CSS", а имя файла должно быть "TableStyleSheet.css".
Добавьте в конце файла следующий код:
#subjects
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#subjects td, #subjects th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#subjects th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#subjects tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
Выберите файл "Timetable.html" и нажмите кнопку "Запуск" в панели инструментов наверху.
В результате должен загрузиться веб-браузер с таблицей следующего вида:
Задание 2. Отладка html и css с помощью средств разработчика в ie8
С помощью средств разработки можно проверять код HTML и каскадные таблицы стилей сайта в том виде, в котором они обрабатываются браузером Internet Explorer, а не в исходном виде. Это особенно удобно в случае с динамическими сайтами, сложными сайтами и сайтами, где применяются платформы ASP или PHP.
Загрузите в IE9 сохраненную веб-страницу Timetable.html.
Вызовите панель средств разработчика через меню "Сервис" или нажав клавишу <F12>.
Рис. 4.14. Панель инструментов разработчика в IE8
В основной области содержимого используется дерево документо-объектной модели (DOM) сайта, соответствующее структуре, содержащейся в памяти браузера Internet Explorer для отображения сайта. Для перемещения по дереву можно использовать мышь или клавиатуру. Самый быстрый способ найти узел, соответствующий определенному элементу страницы, - использовать функцию "Выбрать элемент щелчком". Используйте эту функцию, чтобы выбрать элемент на странице, и в средствах разработки будет автоматически выбран нужный узел дерева. Также можно использовать поле поиска.