Internet Explorer 8 и MS Visual Studio Web Developer 2008 Express

Порядок выполнения работы

Задание 1. Создание и редактирование HTML документа в VWDE2008.

• С помощью меню "File > New File" или комбинации клавиш <CTRL> + N создайте HTML страницу (выбрав соответствующий шаблон).
  

  
  Рис. 4.7 . Редактор HTML документа
• С левой стороны от окна с HTML кодом наведите курсор на панель инструментов "Toolbox" , на которой представлены основные элементы HTML документов.
  

  
  Рис. 4.8 . Панель инструментов "Toolbox"
• Выберите элемент Table и перетащите его в окно с HTML кодом. В результате в HTML коде странице автоматически добавятся теги, описывающие пустую таблицу. Причем в режиме отображения "split" (задается выбором закладки в нижней части окна с кодом HTML ) внизу появится окно дизайна с видом пустой таблицы.
  

  
  Рис. 4.9 . Вид новой таблицы в режиме "split"
• Используя контекстное меню (правая кнопка мыши) добавьте в окне дизайна к таблице новый столбец и 2 новых строки.
• В первой строке таблице вручную измените теги <td> на <th> для того, чтобы сформировать "шапку" таблицы.
• Заполните ячейки таблицы следующим содержимым:

  №	Дисциплина	Семестр	Учебных часов
  1	Математический анализ	1	90
  2	Информатика	1	72
  3	Философия	3	72
  4	Информационные сети	6	64
• Выделите в окне дизайна всю таблицу, затем в меню Format выберите раздел New Style:
  

  
  Рис. 4.10. Определения стиля для идентификатора subjects
• Задайте в полях появившегося окна "New Style" следующие значения:
  • имя селектора: #subjects
  • категория "Font": font-family:" Times New Roman, Times, serif" ;
  • категория "Position": width:100%;
  • категория "Table": border-collapse:collapse;
• Нажмите кнопку "OK" и затем аналогичным образом задайте для селектора "#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;

  В итоге в окне HTML кода появится новая секция объявления списка стилей:

  

  
  Рис. 4.11. Описание таблицы стилей CSS

• Выделите целиком таблицу и в окне "Properties" задайте для свойства Id значение subjects:

  

  
  Рис. 4.12. Задание стилей CSS элементов таблицы в окне "Properties"

  Таким же образом для 2-й и 4-й строк таблицы задайте значение свойства class = "alt" .

  В результате в HTML коде будут автоматически добавлены идентификаторы (классы) задающие стиль элементов таблицы.
• В окне дизайна таблицы с помощью правой кнопки мыши выберите "View in Browser"
  

  
  Рис. 4.13 . Предварительный просмотр таблицы в веб-браузере
• Сохраните файл с веб-страницей с именем "Table.html" .