Скачиваний:
146
Добавлен:
10.05.2015
Размер:
890.37 Кб
Скачать

Порядок выполнения работы Задание 1. Создание и редактирование html документа в WebMatrix

  1. После запуска WebMatrix необходимо выбрать "Сайт на основе шаблона", а затем "Пустой сайт", при этом укажите внизу имя сайта "Timetable":

  1. После этого необходим создать файлы для веб-сайта. Если на левой панели выбрать раздел "Файлы", то можно увидеть, что в списке представлен единственный файл "robots.txt". Поэтому нам потребуется создать дополнительно HTML страницу веб-сайта и таблицу стилей CSS. С этой целью, необходимо кликнуть "Создать файл на правой панели" или выбрать "Новый" на панели инструментов наверху:

Далее следует выбрать тип файла "HTML". Внизу также следует указать имя файла - "Timetable".

После этого будет автоматически создана HTML страница следующего содержания:

  1. Добавьте вручную следующий HTML код:

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  4. <html xmlns="http://www.w3.org/1999/xhtml" >

  5. <head>

  6. <title>Расписание занятий</title>

  7. <link href="TableStyleSheet.css" rel="stylesheet" type="text/css" />

  8. </head>

  9. <body>

  10. <table style="width: 100%;" id="subjects" class="alt">

  11. <tr>

  12. <th> №</th>

  13. <th> Дисциплина</th>

  14. <th> Семестр</th>

  15. <th> Учебных часов</th>

  16. </tr>

  17. <tr>

  18. <td> 1</td>

  19. <td> Математический анализ</td>

  20. <td> 1</td>

  21. <td> 90</td>

  22. </tr>

  23. <tr class="alt" >

  24. <td> 2</td>

  25. <td> Информатика</td>

  26. <td> 1</td>

  27. <td> 72</td>

  28. </tr>

  29. <tr>

  30. <td> 3</td>

  31. <td class="alt"> Философия</td>

  32. <td> 3</td>

  33. <td> 72</td>

  34. </tr>

  35. <tr class="alt">

  36. <td> 4</td>

  37. <td> Информационные сети</td>

  38. <td> 6</td>

  39. <td> 64</td>

  40. </tr>

  41. </table>

  42. </body>

  43. </html>

  44. Далее необходимо создать файл внешний файл с таблицей стилей. Это делается также как и в случае с 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;

}

  1. Выберите файл "Timetable.html" и нажмите кнопку "Запуск" в панели инструментов наверху.

В результате должен загрузиться веб-браузер с таблицей следующего вида:

Задание 2. Отладка html и css с помощью средств разработчика в ie8

С помощью средств разработки можно проверять код HTML и каскадные таблицы стилей сайта в том виде, в котором они обрабатываются браузером Internet Explorer, а не в исходном виде. Это особенно удобно в случае с динамическими сайтами, сложными сайтами и сайтами, где применяются платформы ASP или PHP.

  • Загрузите в IE9 сохраненную веб-страницу Timetable.html.

  • Вызовите панель средств разработчика через меню "Сервис" или нажав клавишу <F12>.

Рис. 4.14.  Панель инструментов разработчика в IE8

В основной области содержимого используется дерево документо-объектной модели (DOM) сайта, соответствующее структуре, содержащейся в памяти браузера Internet Explorer для отображения сайта. Для перемещения по дереву можно использовать мышь или клавиатуру. Самый быстрый способ найти узел, соответствующий определенному элементу страницы, - использовать функцию "Выбрать элемент щелчком". Используйте эту функцию, чтобы выбрать элемент на странице, и в средствах разработки будет автоматически выбран нужный узел дерева. Также можно использовать поле поиска.