Лабораторная работа №6

Примеры верстки страниц

Цель: На занятии необходимо будет создать сайт, имеющий вот такую структуру

Задания для выполнения лабораторной работы 7

    1. Создайте в папке c:\webservers\home\<ваша папка>\www\ папку images.
    2. Скопируйте в эту папку картинки из архива к лабораторной работе 6
    3. Создайте в программе NVU html-файл и сохраните его с именем lab6.htm в вашей папке на web-сервере.
    4. Создайте  css-файл и сохраните его с именем styles_6.css в той же папке.
    5. Свяжите html файл с css файлом. В теге напишите
      <link type=’text/css’ rel=’stylesheet’ media=’all’ href=’styles_6.css’>
    6. Создайте заголовок web-странице ‘Лабораторная работа 6’
      <title>Лабораторная работа 6</title>
    7. Опишите в css файле параметры всего html документа
      body {
      background-color:#DFF5FF;
      font-size:13px;
      margin:0;
      }
    8. Сохраните оба файла (css и html) и просмотрите страницу в браузере, она должна быть нежно голубого цвета и иметь заголовок окна.
    9. Внутри тега <body> создайте таблицу со следующими параметрами: 1 столбец, 4 строки, ширина таблицы 100%, рамка 0 пикселей (воспользуйтесь для этого кнопкой таблица на панели инструментов):
      <table width=’100%’ cellpadding=’0′ cellspacing=’0′ border=’0′>

      </table>
    10. Перед началом каждой строки добавьте комментарий с информацией о номере строки
      <!—Первая строка—>
    11. Внутри первой строки (внутри тега <td>) поместите таблицу состоящую из одной строки и двух ячеек внутри этой строки
      <table width=’100%’ cellspacing=’0′ cellpadding=’0′ border=’0′>

      </table>
    12. В css файле создайте класс для левой ячейки (файл css) и  назначьте его первой ячейке (файл html) <td class=’top_left’>:
      .top_left{
      text-align: left;
      vertical-align: top;
      background-image: url(images/bg_top.gif);
      height: 318px;
      }
    13. В css файле создайте класс для правой ячейки и назначьте его второй ячейке <td class=’top_right’>
      .top_right{
      width: 713px;
      background-image: url(images/big_picture.jpg);
      }
    14. Разместите в первой (левой) ячейке логотип и ссылку на ваш сайт (для этого используйте вставку изображения, а ссылку в нем можно будет указать)
      <a href=»http://my.net»>
      <img src=»images/logo.jpg» width=»277″ height=»318″ alt=»» /></a>
    15. Что бы ссылка не имела синей контурной линии добавьте в изображение (тег <img>) атрибут border=’0′.
    16. Посмотрите что получилось (верхняя часть странички должна полностью соответствовать картинке).

Вторая строка главной таблицы предназначена для разделителя шапки и меню

    1. Для ячейки второй строки главной таблицы создайте и подключите класс separator.
    2. Класс должен содержать следующие свойства: высота 19 пикселей, ширина 100 процентов, фон изображение su_bg.gif.
    3. Сохраните, обновите, посмотрите что получилось.

Третья строка главной таблицы предназначена для верхнего горизонтального меню

    1. Создайте для ячейки со строкой меню класс menu_line со следующими параметрами: высота 32 пикселя, внутренний отступ 60 пикселей, фоновое изображение menu_bg.gif.
    2. Назначьте ячейке третей строки класс menu_line.
    3. Создайте внутри ячейки третей строки блочный объект, в который поместите изображение и ссылку (сделайте 5-6 копий блоков подряд)
      <div>
      <a href=»#»>Один ссылка</a>
      </div>
    4. Опишите класс menu_item в ктором учтите: фоновое изображение (треугольничек menu_list.gif), запретить повтор фонового изображения, выровнять фон по левом краю, внутренний отступ слева 15 пикселей, а наружный отпступ справа 40 пикселей, блоки ложить в ряд так, что бы они своим левым краем присоединялись к предыдущему блоку.
    5. Сохраните, обновите, посмотрите что получилось.
    6. Опишите стиль для «.menu_item a«, который будет описывать стиль ссылок расположенных именно внутри тега имеющего класс menu_item. В классе должны быть не жирный шрифт, не подчеркнутый текст, цвет ссылок #B7F7FF, шрифт Verdana, размер шрифта 13 пикслей.
    7. Создайте класс, который будет при наведении на ссылку изменять ее состояние на подчернутое.

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

  1. Создайте для ячейки четвертой строки класс content_td, который будет содержать повторяющийся по оси Х фон (из файла bottom.jpg), привязанный к нижнему краю объекта и назначьте этот класс этой ячейке.
  2. В эту же ячейку поместите таблицы и назначьте ячейкам классы вот так:

Структура классов таблицы

  1. Опишите каждый класс. Для класса content_left.content_left{background-image:url(images/palmOS.jpg);background-position:left bottom;background-repeat:no-repeat;padding:8px 8px 290px;width: 220px;vertical-align: top;}
  2. Поместите вовнутрь ячейки с классом menu_left следующий фрагмент страницыУровень первый<br /><a href=»#»>Ссылка</a><a href=»#»>Ссылка</a><a href=»#»>Ссылка</a><a href=»#»>Ссылка</a><a href=»#»>Ссылка</a><a href=»#»>Ссылка</a>Уровень второй<br/><a href=»#»>Ссылка</a><a href=»#»>Ссылка</a>Уровень третий<br /><a href=»#»>Ссылка</a><a href=»#»>Ссылка</a><a href=»#»>Ссылка</a>

    <a href=»#»>Ссылка</a>

    <a href=»#»>Ссылка</a>

  3. Для классов menu_table_top, menu_left, menu_table_bottom опишите стили так, что бы они соответстовали изображению на картинке (имя шрифта Verdana): menu_table_top:
    высоту, ширину, фон; menu_left: фон, отступы от границы до текста, цвет текста, подчеркиваемость текста, жирность текста, название шрифта, размер шрифта (следите что бы изменения в этом классе правильно влияли на написание «Уровень первый», «Уровень второй», «Уровень третий»); menu_table_bottom: высоту, ширину, фон.
  4. Создайте стиль для ссылок внутри ячейки с классом menu_left.
    В имени стиля необходимо указать имя касса и имя тега. Для этого стиля опишите свойства так, что бы они соответствовали изображению на картинке. Что бы ссылки начинались с новой строки им необходимо указать свойство display: block;
  5. Поместите в правую контентую часть фрагмент кода из текстового файла (в том же архиве что и рисунки). Создайте для нее стили что бы текст и изображения соответстовали изображению

Добавить комментарий

Яндекс.Метрика