Новости IT новости в сфере it
Цель: На занятии необходимо будет создать сайт, имеющий вот такую структуру
- Создайте в папке c:\webservers\home\<ваша папка>\www\ папку images.
- Скопируйте в эту папку картинки из архива к лабораторной работе 6
- Создайте в программе NVU html-файл и сохраните его с именем lab6.htm в вашей папке на web-сервере.
- Создайте css-файл и сохраните его с именем styles_6.css в той же папке.
- Свяжите html файл с css файлом. В теге напишите
<link type=’text/css’ rel=’stylesheet’ media=’all’ href=’styles_6.css’> - Создайте заголовок web-странице ‘Лабораторная работа 6’
<title>Лабораторная работа 6</title> - Опишите в css файле параметры всего html документа
body {
background-color:#DFF5FF;
font-size:13px;
margin:0;
} - Сохраните оба файла (css и html) и просмотрите страницу в браузере, она должна быть нежно голубого цвета и иметь заголовок окна.
- Внутри тега <body> создайте таблицу со
следующими параметрами: 1 столбец, 4 строки, ширина таблицы 100%, рамка 0
пикселей (воспользуйтесь для этого кнопкой таблица на панели
инструментов):
<table width=’100%’ cellpadding=’0′ cellspacing=’0′ border=’0′>
…
</table> - Перед началом каждой строки добавьте комментарий с информацией о номере строки
<!—Первая строка—> - Внутри первой строки (внутри тега <td>) поместите таблицу состоящую из одной строки и двух ячеек внутри этой строки
<table width=’100%’ cellspacing=’0′ cellpadding=’0′ border=’0′>
…
</table> - В css файле создайте класс для левой ячейки (файл css) и назначьте его первой ячейке (файл html) <td class=’top_left’>:
.top_left{
text-align: left;
vertical-align: top;
background-image: url(images/bg_top.gif);
height: 318px;
} - В css файле создайте класс для правой ячейки и назначьте его второй ячейке <td class=’top_right’>
.top_right{
width: 713px;
background-image: url(images/big_picture.jpg);
} - Разместите в первой (левой) ячейке логотип и ссылку на ваш сайт (для
этого используйте вставку изображения, а ссылку в нем можно будет
указать)
<a href=»http://my.net»>
<img src=»images/logo.jpg» width=»277″ height=»318″ alt=»» /></a> - Что бы ссылка не имела синей контурной линии добавьте в изображение (тег <img>) атрибут border=’0′.
- Посмотрите что получилось (верхняя часть странички должна полностью соответствовать картинке).
Вторая строка главной таблицы предназначена для разделителя шапки и меню
- Для ячейки второй строки главной таблицы создайте и подключите класс separator.
- Класс должен содержать следующие свойства: высота 19 пикселей, ширина 100 процентов, фон изображение su_bg.gif.
- Сохраните, обновите, посмотрите что получилось.
Третья строка главной таблицы предназначена для верхнего горизонтального меню
- Создайте для ячейки со строкой меню класс menu_line со следующими параметрами: высота 32 пикселя, внутренний отступ 60 пикселей, фоновое изображение menu_bg.gif.
- Назначьте ячейке третей строки класс menu_line.
- Создайте внутри ячейки третей строки блочный объект, в который поместите изображение и ссылку (сделайте 5-6 копий блоков подряд)
<div>
<a href=»#»>Один ссылка</a>
</div> - Опишите класс menu_item в ктором учтите: фоновое изображение (треугольничек menu_list.gif), запретить повтор фонового изображения, выровнять фон по левом краю, внутренний отступ слева 15 пикселей, а наружный отпступ справа 40 пикселей, блоки ложить в ряд так, что бы они своим левым краем присоединялись к предыдущему блоку.
- Сохраните, обновите, посмотрите что получилось.
- Опишите стиль для «.menu_item a«, который будет описывать стиль ссылок расположенных именно внутри тега имеющего класс menu_item. В классе должны быть не жирный шрифт, не подчеркнутый текст, цвет ссылок #B7F7FF, шрифт Verdana, размер шрифта 13 пикслей.
- Создайте класс, который будет при наведении на ссылку изменять ее состояние на подчернутое.
Четвертая строка главной таблицы предназначена для левого меню и контекстной части документа
- Создайте для ячейки четвертой строки класс content_td, который будет содержать повторяющийся по оси Х фон (из файла bottom.jpg), привязанный к нижнему краю объекта и назначьте этот класс этой ячейке.
- В эту же ячейку поместите таблицы и назначьте ячейкам классы вот так:
- Опишите каждый класс. Для класса 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;}
- Поместите вовнутрь ячейки с классом 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>
- Для классов menu_table_top, menu_left, menu_table_bottom опишите
стили так, что бы они соответстовали изображению на картинке (имя шрифта
Verdana): menu_table_top:
высоту, ширину, фон; menu_left: фон, отступы от границы до текста, цвет текста, подчеркиваемость текста, жирность текста, название шрифта, размер шрифта (следите что бы изменения в этом классе правильно влияли на написание «Уровень первый», «Уровень второй», «Уровень третий»); menu_table_bottom: высоту, ширину, фон. - Создайте стиль для ссылок внутри ячейки с классом menu_left.
В имени стиля необходимо указать имя касса и имя тега. Для этого стиля опишите свойства так, что бы они соответствовали изображению на картинке. Что бы ссылки начинались с новой строки им необходимо указать свойство display: block; - Поместите в правую контентую часть фрагмент кода из текстового файла (в том же архиве что и рисунки). Создайте для нее стили что бы текст и изображения соответстовали изображению