4326

Модификация персонального сайта студента с использованием CSS

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

Информатика, кибернетика и программирование

Цель работы: изучение и применение каскадных таблиц стилей (CSS) при оформлении (разметке) Web-страниц, формирование умений разметки страниц с помощью блоков (DIV) и CSS Порядок выполнения работы: Ознакомиться с заданием на выполнение лабораторной р...

Русский

2012-11-16

96.5 KB

16 чел.

Цель работы: изучение и применение каскадных таблиц стилей (CSS) при оформлении (разметке) Web-страниц, формирование умений разметки страниц с помощью блоков (DIV) и CSS

Порядок выполнения работы:

Ознакомиться с заданием на выполнение лабораторной работы.

Ознакомиться с теоретическим материалом

Разработать стиль страниц отчета, реализовать его во внешнем CSS файле и подключить его к существующим страницам (прежнее форматирование необходимо предварительно очистить).

Программное обеспечение

Для выполнения лабораторной работы необходимо следующее ПО:

  1.  Редактор HTML документов (желательно HomeSite 4.5 и выше)
  2.  Графический редактор (желательно Adobe Photoshop 5.5 и выше)
  3.  Файловый менеджер (желательно Windows Commander 4.0 и выше)
  4.  Браузер (желательно Internet Explorer 5.0 и выше)

Теоретические сведения.

1.CSSCascading Style Sheets (каскадные таблицы стилей).

  •  Стили определяют отображение элементов HTML

HTML – для логической разметки документа (заголовки, параграфы, списки). Браузеры стали вводить новые тэги и атрибуты для отображения сложных композиций. Для стандартизации этих возможностей и уменьшения несовместимости W3C разработал сначала HTML 3.2, введя ряд тегов визуальной разметки, потом удалил их в HTML 4 и разработал отдельную спецификацию CSS. Все основные браузеры поддерживают CSS.

  •  Стили ускоряют и упрощают верстку

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

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

  •  Несколько стилей объединяются в один

Стили могут храниться в разных местах: внутри HTML элемента с помощью атрибута STYLE, внутри тэга HEAD или во внешнем CSS-файле (или даже в нескольких файлах). Для одного HTML элемента стиль может оказаться в нескольких местах и они «каскадно» объединяются в один в соответствии со следующими приоритетами (начиная с младшего):

  •  установки браузера по умолчанию
  •  внешний CSS
  •  встроенный CSS (внутри тэга HEAD)
  •  CSS, встроенная в html-элемент (атрибут STYLE)

Синтаксис

Синтаксис стиля следующий:

селектор {свойство: значение}

В простейшем случае селектор – это HTML-тэг. Например:

 body {background-color: yellow} — задает желтый фон страницы

p {color: blue} — синий цвет текста внутри абзацев

Несколько свойств указывается через точку с запятой, селекторы также можно объединять:

h1, h2, h3, h4, h5, h6 {

color: brown;

font-family:Arial;

}

— заголовки будут отображаться коричневым цветом шрифтом Arial.

Пробелы и регистр не важен.

Селекторы-классы

С помощью селекторов-классов можно задавать разные стили для одних и тех же HTML элементов. Например, для ссылок меню и ссылок в тексте могут быть разные стили. Пример:

a {text-decoration:underline} — все ссылки подчеркнуты

a.menu {text-decoration:none} — но ссылки класса menu не подчеркнуты

В HTML, чтобы указать класс элемента используется атрибут CLASS:

<a href="about.html" class="menu">О сайте</a>

Можно объявлять селектор-класс без привязки к конкретному элементу, тогда его можно использовать для любых элементов, например:

.important {font-weight: bold}

ID-селектор

Можно объявить стиль для элемента по его идентификатору (задается в HTML атрибутом ID):

#logo {margin: 10px}

В HTML этот элемент оформляется так:

 <img src=”logo.gif” id=”logo”>

Контекстные селекторы

Можно объявить стиль для селектора, при условии, что находится внутри другого селектора, например:

 p em {background: yellow}

– все выделения тэгом em внутри абзацев будут выделяться желтым фоном.

Комментарии

/* абзацы текст выровнены по обоим сторонам */

P {text-align:justify}

Псевдо-классы

Псевдо-классы используются для специальных эффектов с некоторыми селекторами. Основное применение – настройка отображения ссылок:

a:link {color: #FF0000}     /* непосещенная */

a:visited {color: #00FF00}  /* посещенная */

a:hover {color: #FF00FF}   /* с мышью над ссылкой */

Есть и некоторые другие псевдо-классы, которые используются намного реже.

Вставка стилей

Внешний файл:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

Внутренняя таблица стилей:

<head>

<style type="text/css">

body {background-image: url("images/bg.gif")}

</style>

</head>

Внедренный стиль:

<p style="color: orange; margin-left: 20px">Абзац…</p>

– не рекомендуется.  Лучше всего использовать первый вариант, иногда, в комбинации со вторым (например, если на некоторой странице необходимы особые стили).

Основные свойства

Фон элемента:

background-color: #ff0000

background-image: url(bg.jpg)

Цвет текста:

color: blue

color: #FF00CC

Выравнивание текста в элементе:

text-align: left | right | center | justify

Подчеркивание:

text-decoration: none | underline | overline | line-through

Красная строка:

 text-indent: 5px <!-- в пикселях -->

 text-indent: 5pt <!-- в пунктах -->

text-indent: 2em <!-- высота шрифта -->

Переводы строк:

 white-space: normal <-- обычным образом -->

 white-space: nowrap <-- всё в одну строку -->

white-space: pre <-- предформатированый текст -->

Шрифт:

font-family: serif | Times | sanf-serif | Arial | monospace | Courier

font-size: large | 13pt | 150%

font-weight: normal | bold

Отступы вокруг элемента:

margin: top right bottom left <!—например: margin:5px 7px 5px 7px -->

margin-left: 5px

Рамка:

border: 2px solid red

Отступ от содержимого до рамки:

 padding: top right bottom left

padding-top: 5px

Стиль списка и/или его элементов:

 list-style-type: disc | circle | decimal | upper-roman

list-style-image: url(li.png)

Габариты:

 width: 200px

 height: 20pt

Стиль отображения:

 display: none | inline | block

Примечание: Селекторы-классы часто используется в сочетании с тэгами div и span. Эти тэги по умолчанию особым образом не выделяются и используются там, где нет подходящих HTML-тэгов. С помощью стилей они могут быть отображены особым образом. div является блоковым элементом (display:block), т.е. после него делается перевод строки, а span – внутри-текстовым элементом (inline). Например:

<div class="menu"><a href="about.html">О сайте</a>…</div>

 И пример стиля:

.menu a {margin:1em; text-decoration:none}

Позиция:

left: -100px

top: 50px

position: static | relative | absolute

 static: позиция не меняется с помощью left  и top (значение по умолчанию)

 relative: позиция (свойства left и top) задается относительно его исходного места,

absolute: позиция задается относительно всего окна документа и он не показывается в обычном потоке документа (наслаивается сверху); однако если у родительского элемента position:relative, то позиция указывается относительного родительского.

2.Вспомним недостатки использования таблиц:

  •  "Медленная загрузка". Пока вся таблица не загрузится, информация на экране не появится.
  •  Излишний код. Приходится создавать много ячеек и строк, которые, в общем-то, не нужны.
  •  Отсутствие возможности с точностью до пикселов расположить элемент на экране.
  •  Отсутствие возможности "надвинуть" один элемент на другой.
  •  Отсутствие возможности управлять отображением элементов (при переполнение, таблица просто увеличивается в размерах).

Эти проблемы можно решить с помощью CSS и <DIV>.

Как это делается 

Тэг <DIV> - служит для группирования элементов в блок.

К сгруппированным элементам можно применить стили.

Посмотрим на примерах, как это делается:

Примеры. Выделение блока бордюром 

Границу можно легко разместить вокруг заголовка, списка, абзаца или их группы, поместив их в элемент div.

Прописываем стили для этого блока

Это можно использовать с разметкой следующим образом:

<div style="border-color:#FF00FF; border-style:dotted; ">

Содержимое этого элемента DIV будет заключено в прерывистую рамку.

</div>

 

 

<div style="border:15px double #008000; ">

Содержимое этого элемента DIV будет заключено в сплошную рамку шириной 15 пикселов.

</div>

 

<div style="border-style: outset; border-color: #FF0000">

Содержимое этого элемента DIV будет заключено в такую рамку.

</div>

 

<div style="border-right: 10px solid #00FF00; border-bottom: 10px solid #00FF00">

Содержимое этого элемента DIV будет заключено в такую рамку.

</div>

 

<div style="border-left: 20px solid #FFFF00; border-right: 20px solid #FFFF00">

Содержимое этого элемента DIV будет заключено в такую рамку.

</div>

 

Пример. Выделение блока цветом фона 

 

<div style="background-color: #00FFFF">

Содержимое этого элемента DIV будет выделено таким цветом.

</div>

 

Пример. Позиционирование и задание размеров 

 

<div style="background-color: #AAAAFF">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

<div style="float: left; width: 200; height: 200; background-color: #00FFFF">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

<div style="float: right; width: 200; height: 200; background-color: #FFFF00">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

<div style="width: 200; height: 200; position: relative; left: 20; background-color: #0FFD02">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

<div style="background-color: #FCC403">

Содержимое этого элемента DIV будет позиционироваться здесь.

</div>

 

Пример. Позиционирование в 2,5 мерном измерении 

Порядок наложения (перекрытия) блоков определяется атрибутом z-index.

 

 

Блок - 1

Блок - 2

Блок - 3

Блок - 4

Почти 3D

Код этого примера:


<div style="position: relative; width: 200; height: 200;
z-index: 0; background-color: #FFFF00">
Блок - 1
</div>


<div style="position: relative; width: 200; height: 200; left: 100;
z-index: 1; top: -100; background-color: #00FFFF">
Блок - 2
</div>


<div style="position: relative; left: 220; top: -400; width: 200; height: 200;
z-index: 2; background-color: #00FF00">
Блок - 3
</div>


<div style="position: relative; width: 750; height: 20;
z-index: 1; top: -580; background-color: #FE76AF">
Блок - 4
</div>


<div style="position: relative; top: -600;
z-index: 3; left: 100">
Почти  3D
</div>
 

Примеры. Управление переполнением и видимостью. 

При переполнении следующего блока:
<div style="width: 200; height: 200; background-color: #00FFFF">
</div>
блок будет увеличиваться (т.е. также как и таблица).

переполнениеееееееееееееееееееееееееееееееееееееее переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение

 

При переполнении следующего блока:
<div style="
overflow: auto; width: 200; height: 200; background-color: #00FFFF">
</div>
блок не будет увеличиваться, информацию можно просмотреть с помощью прокрутки

переполнениеееееееееееееееееееееееееееееееееееееее переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение

 

При переполнении следующего блока:
<div style="
overflow: hidden; width: 200; height: 200; background-color: #00FFFF">
</div>
блок не будет увеличиваться, информация, не поместившаяся в блок, не будет отображена

переполнениеееееееееееееееееееееееееееееееееееееее переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение переполнение переполнение переполнение  переполнение переполнение  переполнение

 

Задание

Задание 1. Разработать стилевые решения. Стили должны быть описаны во внешнем файле. Файл со стилями должен быть связан со всеми документами, входящими в состав сайта.

Задание 2. Провести разметку документов. Переработать разработанные ранее страницы. Документы, входящие в состав сайта, должны быть размечены при помощи стилей, определенных в 1 задании.

Задание 3

  1.  Создайте новую страницу.
  2.  Сделайте ее визуальной копией первой страницы, но используйте не таблицы, а блоки и стили. Пользуйтесь спецификацией каскадных таблиц стилей CSS2 (RUS).
  3.  Стили для блоков вынесите в main.css.
  4.  В комментариях поясните свойства блоков.

Задание 4 

  1.  Создайте новую страницу.
  2.  Сделайте коллаж из картинок или фотографий (не менее 5-ти) применив 2,5 мерное позиционирование.
  3.  Проверьте работоспособность на сервере.
  4.  В комментариях поясните свойства блоков.

Задание 5

  1.  Для страницы с метками примените свойство overflow:
    - visible - для первого раздела
    - auto - для второго раздела
    - hidden - для третьего раздела
    - scroll - для четвертого раздела
    - auto - для пятого раздела
    обязательно задайте размеры, цвет фона или бордюр блоков.
  2.  Проверьте работоспособность на сервере.

Отчет

Отчет о выполнении лабораторной работы должен содержать следующие разделы:

  1.  Титульный лист
  2.  Таблицу изображений
  3.  Описание стилей (привести текст CSS файла)
  4.  Текст одного HTML документа, размеченного стилями и содержащего скрипт анимированного меню (по выбору студентов)

Защита


     
Для защиты необходимо предоставить отчет о выполнении лабораторной работы и продемонстрировать версию сайта с элементами CSS и DIV.

     Демонстрация работоспособности сайта осуществляется на рабочей станции дисплейного класса путем загрузки страниц сайта из папки студента программой просмотра страниц (браузером).

Пример

  1.  Описание стилей (файл styles.css)

.title {

font-family : "Times New Roman", Times, serif;

font-size : 22px;

color : Teal;

}

.subtitle {

font-family : "Times New Roman", Times, serif;

font-size : 16px;

color : Black;

text-decoration : underline;

font-weight : bold;

}

.bold {

font-family : "Times New Roman", Times, serif;

font-size : 16px;

color : Black;

font-weight : bold;

}

.normal {

font-family : "Times New Roman", Times, serif;

font-size : 16px;

color :black;

 font-weight : normal;

}

  1.  Текст файла res.html (в примере анимирована одна кнопка меню)

<html>

<head>

<title>Персональный сайт Иванова И.И. Резюме</title>

<link href="img/styles.css" rel="stylesheet">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="keywords" content="Иванов, персональный сайт, резюме">

</head>

<body bgcolor="#CCCCCC">

<script language="Javascript">

<!--

// инициализация массивов, содержащих имена файлов

 var PassivePictures=new Array(1);

 var ActivePictures=new Array(1);

// заполнение массивов

 ActivePictures[0]="img/res2.gif";

 PassivePictures[0]="img/res.gif";

// функция замены изображений

function Change(button,param,type) {

 if (type=="act") button.src=ActivePictures[param];

 else button.src=PassivePictures[param];

}

-->

</script>

<center><span class="title">Резюме</span></center>

<hr size="1" width="100%">

<table width="100%" cellspacing="10" cellpadding="0" border="0">

<tr>

 <td width="200" valign="top">

  <a href="res.html"><img src="img/res.gif" width="157" height="47" alt="Резюме" border="0" onmouseover="Change(this,0,'act')" onmouseout="Change(this,0,'pas')"></a><br><br>

  <a href="#"><img src="img/bio.gif" width="157" height="47" alt="Биография" border="0"></a><br><br>

  <a href="#"><img src="img/proj.gif" width="157" height="47" alt="Проекты" border="0"></a>

 </td>

 <td>

  <table width="100%" cellspacing="0" cellpadding="0" border="0">

   <tr>

 <td class="normal">

  <span class="bold">Ф.И.О:</span> Иванов Иван Иванович<br>

     <span class="bold">Дата рождения:</span> 1 января 1970г.<br>

     <span class="bold">Семейное положение:</span> холост<br>

     <span class="bold">Домашний телефон:</span> 111-11-11<br>

     <span class="bold">E-mail:</span> ivanov@mail.ru<br><br>

     <span class="subtitle">Образование</span><br>

     Иркутский государственный университет, филиал в г.Братске(БФ ИГУ).<br>

  <span class="bold">Специальность:</span> Прикладная информатика в экономике.<<br><br>

     <span class="subtitle">Опыт работы</span><br>

     1995-2004 ООО "СуперСофт"<br>

     <span class="bold">Должность:</span> системный администратор<br><br>

     <span class="subtitle">Профессиональные навыки</span><br>

     <span class="bold">ОС:</span> MS Windows 9x/2000/XP, UNIX<br>

     <span class="bold">Языки программирования:</span>  C/С++, Visual Basic<br>

     <span class="bold">Программные продукты:</span> MS Office, MS Visio<br><br>

     <span class="subtitle">Дополнительные сведения</span><br>

     <span class="bold">Личные качества:</span> аккуратность, педантичность, обучаемость<br>

     <span class="bold">Увлечения:</span> музыка, литература, спорт, компьютерные игры<br>

     <span class="bold">Прочее:</span> Английский язык (технический)

 </td>

</tr>

  </table>

 </td>

</tr>

</table>

</body>

</html>

Литература

  1.  CSS в примерах
  2.  Настройка параметров. CSS


 

А также другие работы, которые могут Вас заинтересовать

28738. Первые письменные свидетельства о славянах 18.87 KB
  славяне окончательно выделяются из индоевропейской общности. Древнейшим известным местом обитания славян в Европе было нижнее и среднее течение Дуная. славяне стали столь значительны по численности влиянию в окружающем их мире что о них стали сообщать греческие римские арабские византийские авторы римский писатель Плиний Старший См.