Практикум 02<- Разработка структуры сайта

возврат

Разработка структуры сайта

Практикум

Задание 2. Таблица

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

Canon EOS 300D. Характеристики

Konica Minolta A2. Тесты

Nikon D70. Обзоры

Результат запишите в каталог, который назовёт учитель. Файлы должны иметь следующие имена:

	Характеристики	Тесты	Обзоры	Магазины
Canon EOS 300D	`task0211.htm`	`task0212.htm`	`task0213.htm`	`task0214.htm`
Konica Minolta A2	`task0221.htm`	`task0222.htm`	`task0223.htm`	`task0224.htm`
Nikon D70	`task0231.htm`	`task0232.htm`	`task0233.htm`	`task0234.htm`

Файл со стилевыми определениями должен иметь имя task02.css. Результат запишите в каталог, который назовёт учитель. Две картинки для сайта (фоновая полоска и логотип) записаны в подкаталоге pic этого каталога.

Код страницы task0211.htm:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ru">
  <HEAD>
    <META http-equiv="Content-Type"
          content="text/html; charset=windows-1251">
    <LINK rel="stylesheet" type="text/css" href="task02.css">
    <TITLE>Canon EOS 300D. Характеристики</TITLE>
  </HEAD>

  <BODY bgcolor=white text=black
        link=blue alink=red vlink=purple>

    <!-- Логотип -->
    <IMG  id=logo 
          src="pic/logo02.gif" width=144 height=111 
          border=0 hspace=0 vspace=0 alt="Логотип" title="Логотип">  

    <!-- Вертикальное меню -->
    <DIV id=menuv>  
      <DIV class=this>Canon EOS 300D</DIV>                           
      <A href="task0221.htm">Konica Minolta A2</A>  
      <A href="task0231.htm">Nikon D70</A>  
    </DIV>

    <H1>ЦИФРОВЫЕ КАМЕРЫ</H1>

    <!-- Горизонтальное меню -->
    <DIV class=menuh> 
      характеристики                      |
      <A href="task0212.htm">тесты</A>    |
      <A href="task0213.htm">обзоры</A>   |
      <A href="task0214.htm">магазины</A> 
    </DIV>

    <H2>Canon EOS 300D. Характеристики</H2>

    <P>
Характеристики камеры.

    </P>

    <!-- Горизонтальное меню -->
    <DIV class=menuh> 
      характеристики                      |
      <A href="task0212.htm">тесты</A>    |
      <A href="task0213.htm">обзоры</A>   |
      <A href="task0214.htm">магазины</A> 
    </DIV>

    <DIV id=sign>
&copy; Василий Кук <A href="mailto:kuk@pereslavl.ru">kuk@pereslavl.ru</A>
    </DIV>

  </BODY>
</HTML>

Заготовка для файла task02.css:


BODY
{
}

H1,H2,H3,H4,H5,H6 {}

/* Логотип */
#logo
{
}

/* Горизонтальное меню */
.menuh
{
}

/* Вертикальное меню */
#menuv
{
}

/* Ссылки в тексте */
A:link    {}
A:active  {}
A:visited {}
A:hover   {}

/* Ссылки в горизонтальном меню */
.menuh A {}  /* Отмена подчёркивания */

/* Ссылки в вертикальном меню */
#menuv A, #menuv .this
{
}
#menuv A:hover   {}

/* Авторская подпись */
#sign
{
}

вверх | возврат