Спонсор: Microsoft
Опубликован: 19.07.2010 | Доступ: свободный | Студентов: 1475 / 69 | Оценка: 4.07 / 3.43 | Длительность: 20:59:00
Самостоятельная работа 4:

Работа с веб-фрагментами

< Лекция 11 || Самостоятельная работа 4: 12 || Самостоятельная работа 5 >

Задание 2. Создание собственного веб-фрагмента

  1. Для выполнения данного задания необходимо с помощью Visual Web Developer 2008 Express (запускается от имени Администратора, по правой кнопке мыши) создать веб-сайт, например http://localhost/webslice/ :
     Создание нового веб-сайта

    Рис. 15.6. Создание нового веб-сайта
  2. Далее, с помощью комбинации клавиш <CTRL+N> (или через меню File > New File ) создайте HTML страницу confer.html следующего содержания:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-TRansitional.dTD">
    <HTML>
    <BODY>
    
    <h4>ГРАФИК РАБОТЫ КОНФЕРЕНЦИИ</h4>
    
    <TABLE width=100% border=1 cellspacing='1' 
    cellpadding='5' style="margin-right: 0px"><TR VALIGN=TOP>
    <TD>Дата</TD>
    <TD>Время</TD>
    <TD>Конференц-зал</TD>
    <TD >Зеленый зал</TD>
    <TD >Синий зал</TD></TR><TR VALIGN=TOP>
    <TD ROWSPAN=5 >14 декабря</TD>
    <TD ">10.15 - 14.00</TD>
    <TD align=center >Пленарное заседание</TD>
    <TD align=center>-</TD>
    <TD align=center >-</TD></TR><TR VALIGN=TOP>
    <TD >12.15 - 12.40</TD>
    <TD COLSPAN=3 align=center>Coffee Break</TD></TR><TR VALIGN=TOP>
    <TD >14.00 - 15.00</TD>
    <TD COLSPAN=3 align=center>Обед</TD></TR>
     <TR VALIGN=TOP>
    <TD >15.00 - 17.00</TD>
    <TD align=center rowspan=2 valign=middle >секция A1</TD>
    <TD align=center rowspan=2 valign=middle>секция D</TD>
    <TD align=center >секция B1</TD></TR>
     <TR VALIGN=TOP>
    <TD >17.00 - 19.00</TD>
    <TD align=center>KC1</TD></TR>
     </TABLE>
    
    <TABLE width=100% border=1 cellspacing='1' cellpadding='5'><TR VALIGN=TOP>
    <TD >Дата</TD>
    <TD >Время</TD>
    <TD >Конференц-зал</TD>
    <TD >Зеленый зал</TD>
    <TD >Синий зал</TD></TR>
     <TR VALIGN=TOP>
    <TD ROWSPAN=8 >15 декабря</TD>
    <TD >10.00 - 11.40</TD>
    <TD align=center valign=middle >секция A2</TD>
    <TD align=center valign=middle>секцияC</TD>
    <TD align=center valign=middle>секция B2</TD></TR>
     <TR VALIGN=TOP>
    <TD class="style1">11.40 - 12.00</TD>
    <TD COLSPAN=3 align=center>Coffee Break</TD></TR>
    <TR VALIGN=TOP>
    <TD >12.00 - 14.00</TD>
    <TD align=center valign=middle >секция A1</TD>
    <TD align=center valign=middle>секция C1</TD>
    <TD align=center valign=middle>секция B1</TD></TR>
     <TR VALIGN=TOP>
    <TD >14.00 - 15.00</TD>
    <TD COLSPAN=3 align=center>Обед</TD></TR>
     <TR VALIGN=TOP>
    <TD >15.00 - 16.30</TD>
    <TD align=center rowspan=2 valign=middle >секция A3</TD>
    <TD align=center rowspan=2 valign=middle>секция C2</TD>
    <TD align=center>KC1</TD></TR> <TR VALIGN=TOP>
    <TD >16.30 - 18.00</TD>
    <TD align=center>KC2</TD></TR>
    <TR VALIGN=TOP>
    <TD >11.00 - 18.00</TD>
    <TD COLSPAN=3 align=center>Стендовые доклады(холл 1-го этажа)</TD></TR>
    <TR VALIGN=TOP>
    <TD >19.00</TD>
    <TD COLSPAN=3 align=center>Фуршет</TD></TR>
    </TABLE>
    
    <P>
    <TABLE border="1" cellpadding="5" cellspacing="1" width="100%">
    <TR valign="top">
    <TD >Дата</TD>
    <TD >Время</TD>
    <TD >Конференц-зал</TD>
    <TD >Зеленый зал</TD>
    <TD >Синий зал</TD>
    </TR>
    <TR valign="top">
    <TD  rowspan="8">15 декабря</TD>
    <TD>10.00 - 11.40</TD>
    <TD align="middle" valign="center">секция A1</TD>
    <TD align="middle" valign="center">секция C1</TD>
    <TD align="middle" valign="center">секция B2</TD>
    </TR>
    <TR valign="top">
    <TD>11.40 - 12.00</TD>
    <TD align="middle" colspan="3">Coffee Break</TD>
    </TR>
    <TR valign="top">
    <TD>12.00 - 14.00</TD>
    <TD align="middle" valign="center">секция A2</TD>
    <TD align="middle" valign="center">секция C2</TD>
    <TD align="middle" valign="center">секция B2</TD>
    </TR>
    <TR valign="top">
    <TD>14.00 - 15.00</TD>
    <TD align="middle" colspan="3">Обед</TD>
    </TR>
    <TR valign="top">
    <TD>15.00 - 16.30</TD>
    <TD align="middle" rowspan="2" valign="center">секция A3</TD>
    <TD align="middle" rowspan="2" valign="center">секция C3</TD>
    <TD align="middle">KC3</TD>
    </TR>
    <TR valign="top">
    <TD>16.30 - 18.00</TD>
    <TD align="middle">
    KC2</TD>
    </TR>
    <TR valign="top">
    <TD>11.00 - 18.00</TD>
    <TD align="middle" colspan="3">Стендовые доклады  (холл 1-го этажа)</TD>
    </TR>
    <TR valign="top">
    <TD>19.00</TD><TD align="middle" colspan="3">Фуршет</TD>
    </TR>
    </TABLE>
    </P> 
    
    <P>
    <TABLE width=100% border=1 cellspacing='1' cellpadding='5'>
    <TR VALIGN=TOP>
    <TD >Дата</TD>
    <TD>Время</TD>
    <TD>Конференц-зал</TD>
    <TD >Зеленый зал</TD>
    <TD Синий зал</TD></TR><TR VALIGN=TOP>
    <TD ROWSPAN=3 >16 декабря</TD>
    <TD >10.00 - 14.00</TD>
    <TD align=center >- </TD>
    <TD align=center>секцияA 4</TD>
    <TD align=center>секция B3</TD></TR>
     <TR VALIGN=TOP>
    <TD >14.00 - 15.00</TD>
    <TD COLSPAN=3 align=center>Обед</TD></TR>
     <TR VALIGN=TOP>
    <TD >15.00 - 17.00</TD>
    <TD align=center >- </TD>
    <TD align=center>секцияA 4</TD>
    <TD align=center>-</TD></TR>
    </TR>
    </TABLE>
    
    </P>
    
    </BODY>
    </HTML>
  3. Загрузите в браузере эту веб-страницу, указав полностью ее URL: http://localhost/webslice/confer.html. В браузере должен загрузиться график работы конференции.
     Вид веб-страницы confer.html в браузере

    Рис. 15.7. Вид веб-страницы confer.html в браузере
  4. Добавление веб-фрагмента на веб-странице.

    В качестве веб-фрагмента будет рассматриваться расписание работы конференции (т.е. все три таблицы). Добавьте перед первой таблицей следующий код:

    <div id="schedule" class="hslice">

    и тег </div> перед тегом </BODY> .

    Добавьте в заголовок расписания атрибут class="entry-title":

    <h4 class="entry-title">ГРАФИК РАБОТЫ КОНФЕРЕНЦИИ</h4>

    Сохраните внесенные изменения на веб-странице и обновите содержимое браузера ( <F5> ). При наведении курсора на любую часть расписания в верхнем левом углу должна появляться иконка, обозначающая веб-фрагмент:

     Вид веб-фрагмента на веб-странице confer.html

    Рис. 15.8. Вид веб-фрагмента на веб-странице confer.html

    Добавьте этот веб-фрагмент в избранное. На панели избранного должен появиться новый ярлык с названием "График работы конференции". При наведении курсора на этот ярлык содержимое веб-фрагмента, однако, не будет доступно.

     Новый ярлык веб-фрагмента на панели Избранное

    Рис. 15.9. Новый ярлык веб-фрагмента на панели Избранное
  5. Отображение содержимого веб-фрагмента на панели "Избранное".

    Добавьте в теги <TABLE> атрибут class="entry-content":

    <TABLE  class="entry-content" width=100% border=1 cellspacing='1' cellpadding='5'>

    Сохраните внесенные изменения, удалите ярлык "График работы конференции" с панели "Избранное", загрузите в браузере веб-страницу http://localhost/webslice/confer.html и снова добавьте на панели "Избранное" ярлык "График работы конференции".

    В результате содержимое веб-фрагмента должно отображаться при раскрытии ярлыка на панели "Избранное" в виде эскиза.

     Визуализация содержимого веб-фрагмента на панели Избранное

    Рис. 15.10. Визуализация содержимого веб-фрагмента на панели Избранное

    Проверьте каким образом будет визуализироваться содержимое веб-фрагмента, если атрибут class="entry-content" будет добавляться не во все таблицы расписания.

  6. Задание срока актуальности содержимого веб-фрагмента.

    Добавьте перед тегом </div> :

    <abbr class="endtime" title="ГГГГ-ММ-ДДTЧЧ:ММ:СС ±ЧЧ:00"></abbr>

    указав в качестве значения атрибута title конкретное время в формате UTC (т.е. время выражается по отношению к Гринвичу - GMT, например "2010-01-06T15:25:00+03:00" ), сдвинутое относительно текущего на несколько минут вперед.

    Сохраните изменения на веб-старнице и переустановите ярлык веб-фрагмента на панели "Избранное".

    До истечения срока, указанного в теге <abbr> , в нижней части эскиза веб-фрагмента можно будет увидеть иконку. При наведении на нее курсора, появиться подсказка, сообщающая о времени, оставшемся до окончания срока действия.

     Эскиз содержимого веб-фрагмента со сроком актуальности содержимого

    Рис. 15.11. Эскиз содержимого веб-фрагмента со сроком актуальности содержимого

    После истечения срока в нижней части эскиза появится иконкас подсказкой о времени, прошедшем с момента истечения срока действия (актуальности) элемента.

  7. Задание интервала обновления содержимого веб-фрагмента.

    Добавьте перед тегом </div> следующий код:

    <p style="font-size:xx-small">Обновление через 
    каждые <span class="ttl">15</span> минут.</p>

    В качестве содержимого тега <span> указывается интервал времени в минутах между обновлениями содержимого эскиза, отображаемого для веб-фрагмента. Минимальное значение интервала - 15 минут.

    Проверьте самостоятельно работу данного атрибута, изменяя вручную значение какой-либо ячейки таблицы в расписании.

  8. Применение стилей к веб-фрагменту.

    При создании окна предварительного просмотра веб-фрагмента допустимо использование следующих источников стилей:

    • встроенные стили свойства entry-content и его дочерних элементов;
    • правила стилей, определенные в элементе head исходной веб-страницы;
    • импортированные и привязанные таблицы стилей.

    Стили из родительских элементов не наследуются при предварительном просмотре веб-фрагмента. В приведенном ниже примере в режиме предварительного просмотра веб-фрагмента не отображается синий текст, поскольку стиль применяется к элементу hslice, а не к элементу entry-content.

    <div class="hslice" id="main" style="color:blue">
        <h2 class="entry-title">Timetable news</h2>
        <p class="entry-content">No changes</p>
    </div>

    Чтобы стиль действовал при предварительном просмотре HTML, применяйте его непосредственно к элементу entry-content:

    <div class="hslice" id="main">
        <h2 class="entry-title"> Timetable news </h2>
        <p class="entry-content" style="color:blue"> No changes.</p>
    </div>

    При подготовке к предварительному просмотру Internet Explorer помещает элемент entry-content в элемент body. Это гарантирует, что правила стилей, применяемые к элементу body веб-страницы, будут применяться также к основному содержимому предварительного просмотра веб-фрагмента. Для применения стиля body, который не наследуется в режиме предварительного просмотра, используйте имя класса или свойство id, чтобы отличить основное содержимое исходной веб-страницы; затем напишите особые правила стилей для этого элемента.

    В приведенном ниже примере зеленый фон применяется к исходной веб-странице, но не применяется к окну предварительного просмотра.

    <style type="text/css">
        .MyBody { background-color: green; }
    </style>
    
    <body class="MyBody">
        <div class="hslice" id="main">
            <h2 class="entry-title"> Timetable news </h2>
            <p class="entry-content"> No changes.</p>
        </div>
    <body>

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

Контрольное задание

Проверьте самостоятельно результат применения стилей (двумя способами: для элементов div и entry-content ), задавая, например, цвет шрифта: style="color:red".

< Лекция 11 || Самостоятельная работа 4: 12 || Самостоятельная работа 5 >
Наталья Алмаева
Наталья Алмаева
Россия
Андрей Лучицкий
Андрей Лучицкий
Россия