Примеры верстки страниц
1. Я відчуваю, що я гідна людина, принаймні, не менше ніж інші. 2. Я завжди схильний відчувати себе невдахою. 3. Мені здається, у мене є ряд позитивних якостей. 4. Я здатний дещо робити не гірше, ніж більшість. 5. Мені здається, що мені особливо нічим пишатися. 6. Я до себе добре відношуся. 7. В цілому я задоволений собою. 8. Мені б хотілося більше поважати себе. 9. Іноді я повністю відчуваю свою нікчемність. 10. Іноді я думаю, що я у всьому невдаха.. Оцінка результатів: при обробці результатів кожній відповіді привласнюється бал від 1 до 4 відповідно до цих чотирьох градацій. При такому способі обробки даних чим нижчий бал по відповідях, що виражають самоповагу, тим вищий показник самоповаги. Навпаки, чим вищий бал по відповідях, що виражають самоприниження, тим нижчий показник самоприниження. Низький рівень самоповаги (самоприниження) - від 0 до 20 балів, середній рівень самоповаги (адекватна самоповага) від 20 до 35 балів, високий рівень самоповаги (завищена самоповага) - від 35 до 40 балів. Лабораторная работа 5 Примеры верстки страниц Цель:На занятии необходимо будет создать сайт, имеющий вот такую структуру
1. Создайте папки d:\<ваша папка>\www\images. 2. Скопируйте в папку images картинки из архива web_lab_9.rar 3. Создайте в программе Блокнот html-файл и сохраните его с именем lab5.htm в папке d:\ ваша папка>\www\. 4. Создайте в программе Блокнот css-файл и сохраните его с именем styles_9.css в папке d:\ ваша папка>\www\. 5. Свяжите html файл с css файлом. В теге напишите <link type="text/css" rel="stylesheet" media="all" href="styles_9.css"> 6. Создайте заголовок web-странице "Лабораторная работа 5" <title>Лабораторная работа 5</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. Посмотрите что получилось (верхняя часть странички должна полностью соответствовать картинке). Вторая строка главной таблицы предназначена для разделителя шапки и меню 17.Для ячейки второй строки главной таблицы создайте и подключите класс separator. 18. Класс должен содержать следующие свойства: высота 19 пикселей, ширина 100 процентов, фон изображение su_bg.gif. 19. Сохраните, обновите, посмотрите что получилось.
|
