Размещено на http://www.allbest.ru/

РОССИЙСКИЙ УНИВЕРСИТЕТ ДРУЖБЫ НАРОДОВ

ФИЛОЛОГИЧЕСКИЙ ФАКУЛЬТЕТ

РЕФЕРАТ.

Предмет: "Информатика"

Тема: "Про сайт".

Группа: ФЖБ-11

Хагуш Лана Нуриевна

Преподаватель:

Матухин Павел Гранитович

Москва 2013

Оглавление

• Информация об использованном Html коде
• Использованные сайты и литература
• Приложения

Информация об использованном Html коде

Все страницы созданы с помощью CSS (Каскадные таблицы стилей).

Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.

Назовем эту таблицу главной.

<table bgcolor="#101096" align="center" width="740" height="100%" cellspacing="2" cellpadding="2" border="5" bordercolor="#101096">

<tr>

<td rowspan="2" colspan="2">

</tr>

</table>

Тэг "Bgcolor ” Определяет цвет фона в таблице в шестнанцатиричном значении цвета. "Align" Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа). Данная таблица расположена по центру страницы. Тэг "Width" Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек. "Cellspacing" Определяет расстояние между рамками ячеек таблицы в пикселях. "Cellpadding" Определяет расстояние в пикселях между рамкой ячейки и текстом. "Border” Устанавливает толщину рамки. "Bordercolor" Устанавливает цвет окантовки. "Rowspan" Растягивание ячейки по строке.

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

Таблица №1:

<table bgcolor="ffffff" width="740" height="50" cellspacing="1" cellpadding="2" border="1" bordercolor="#101096">

<tr>

<td rowspan="1" colspan="1"><p align="center"><img src="Gag 1. bmp" ></p>

</td>

<tr>

</tr>

</table>

Эта таблица находится выше остальных таблиц. В ней находится рисунок с заголовком "Юрий Алексеевич Гагарин". Такой рисунок был сделан с помощью текстового редактора "Microsoft Word”. Я написал текст на в WordArt и изменил на понравившееся мне стиль. Далее я копировал весь текст в "Paint”, сделал размер рисунка и сохранил его. Вот так можно сделать рисунок без помощи программы PhotoShop!

Итак, переходим к таблице №2:

<table bgcolor="#ffffff" width="740" height="30" cellspacing="1" cellpadding="2" border="0">

<tr align="center">

<td><a href="index.html" title="Это ссылка на страницу <Главная>">Главная</a></td>

<td><a href="Bio.html" title=" Это ссылка на страницу <Биография>">Биография</a></td>

<td><a href="Avt.html" title="Это ссылка на страницу <Об авторах>">Об авторах</a></td>

</tr>

</table>

В данной таблице находится три гиперссылки. Первая ссылка осуществляет переход на страницу "Главная" Вторая на страницу "Биография". Третья на страницу "Об авторах". Но здесь еще есть и дополнительный атрибут. Если навести мышку на гиперссылку и подождать несколько секунд, то появится текст в котором написано куда ведет эта ссылка.

Таблица №3

<br><table align="center" width="430" height="444" cellspacing="2" cellpadding="20" border="5" bgcolor="#ffffff" bordercolor="#101096">

<tr>

<td rowspan="2" colspan="2">

<H2 align="center" >Приветствуем вас! </H2>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp; <img src="10598. jpg" align="top" alt="Ю.А. Гагарин" border="1" height="230">

<p align="center">Данный сайт посвящен Юрию Алексеевичу Гагарину, великому летчику-испытателю и космонавту, который 12 апреля 1961 года совершил первый полет в космос. </p>

</td>

</tr>

<tr>

</tr>

</table>

</br>

Эта таблица изменяется на каждой странице. В данной таблице присутствует фотография Ю.А. Гагарина. А подтаблицей вставлен текст. На странице "Биография" в этой таблице текст, в котором описывается краткая биография Юрия Алексеевича Гагарина. А на странице "Об авторах" текст с информацией о создателях сайта.

Техническое задание на сайт.

1. Имя сайта (название домена).

www.yrigag. narod.ru

2. Название сайта.

Биография Юрия Алексеевича Гагарина

3. Назначение сайта (цель создания сайта).

Сайт представлен в Интернет, для того чтобы пользователь мог получить информацию о Ю.А. Гагарине. Пользователь может использовать информацию для написания докладов, рефератов.

4. Количество страниц сайта.

Сайт должен содержать следующие html страницы: 1-Главная, 2-Биография, 3-Об авторах.

5. Объём сайта.

172 kb

6. Общий фон сайта.

Общий фон сайта синий.

7. Срок разработки сайта.

4 месяцев (с января по апрель), срок сдачи май 2008 года.

CSS.

Cascading Style Sheets (CSS) - каскадные таблицы стилей. Таблицы стилей - попытка отделить детали дизайна странички от ее структуры и содержания. В классическом HTML структура и дизайн были вперемешку: рядом с текстовым абзацем его цвет, размер шрифта, тип шрифта и т.п. Если ты захочешь изменить такой простой параметр, как размер шрифта на своем сайте - придется переписывать все странички. CSS позволяет назначить всем объектам стиль, описание которого может храниться вообще в отдельном файле. Используя CSS, ты можешь изменить размер шрифта во всех страницах сайта, исправив только один файл с описанием стилей. Чем больше разных стилей ты придумаешь, тем круче менять дизайн. Самое главное, что не придется менять уже готовые HTML документы, лежащие на сервере. Браузер пользователя сам обратится к файлу (по ссылке) со стилями и придаст страничке нужный облик.

· История CSS

Принятие Консорциумом W3C в декабре 1996 года в качестве стандарта CSS первого уровня был огромным шагом вперед, поскольку позволял отделить содержание WEB-страницы (текст, изображение и т.д.) от ее форматирования (макет и характеристики текста, например, информация о шрифтах). После этого язык HTML снова стал функционально-ориентированным (а не ориентированным на форму), что однако не мешало пользователем контролировать вид страницы.

В мае 1998 года был принят стандарт CSS2, позволяющий разработчикам осуществлять контроль над WEB-страницами на более высоком уровне. Этот стандарт основан на CSS первого уровня и включал новые функции, в частности, возможность точно располагать элементы и объекты WEB-страницы, а также звуковые таблицы стилей, позволяющие специальному программному обеспечению считывать содержимое WEB-страницы (что полезно для слабовидящих пользователей).

· Типы листов стилей.

Существуют три способа применения стилей в документе HTML.

1. Встраивание (inline). Описание стиля можно встроить в различные дескрипторы (теги) HTML, для которых стиль имеет смысл, например: для объявления абзацев, заголовков, горизонтальных полос, якорей и ячеек таблицы. В следующем примере демонстрируется дескриптор объявления абзаца с добавлением к нему атрибута STYLE для получения требуемого эффекта.

<p style="color: red"> текст красного цвета </p>

2. Внедрение (embed), обеспечивающее контроль над страницей HTML. Использование дескриптора <STYLE> в пределах раздела <HEAD> страницы позволяет детально описать атрибуты, применяемые ко всей странице стиля.

<html>

<head>

<style>

<! - -

p{color: red}

->

</style>

</head>

<body>

<p>текст красного цвета</p>

</body>

</html>

3. Связанные (link) стили, называемые также внешними, являются развитием внедренных стилей. При этом используется тот же дескриптор STYLE, что и ранее, но все описания хранятся в отдельном файле (обычно с расширением. css). Сам файл либо должен располагаться в корневом каталоге узла, либо вы должны корректно определить связь с ним в HTML-документах.

<html>

<head>

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

</head>

<body> <p>текст красного цвета</p> </body>

</html>

style. css должен содержать:

p{color: red}

· Селекторы

Это элементы дескрипторов, задаваемые в начале определения листов стилей; эти элементы сообщают браузеру, где применить стиль. Стоящее после селектора определение стиля заключается в фигурные скобки. Вот пример, в котором селектором является BODY:

body { color: blue}

Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми:

h1, p, h2{font-size: 12px}

Вместо селекторов можно использовать маску *. В данном примере стиль с определенным кеглем шрифта применяется ко всем находящемся на странице дескрипторам:

* { font-size: 14pt}

Другим символом маски является знак >. Таким образом, браузеру дается указание искать дочерние селекторы в пределах определенного родительского. В данном примере стиль применяется только к элементам LI спискам OL:

ol > li {list-style-type: decimal}

Используя селекторы классов, можно к одному и тому же дескриптору применять разные стили. После общего селектора следуют точка и имя класса, и стиль применяется тому дескриптору, чей атрибут CLASS соответствует этому имени. В следующем примере стиль применяется ко всем дескрипторам H2, у которых атрибут CLASS равен "myBlue":

h2. mybule {background-color: bule}

<h2 class="mybule">у этого заголовка синий фон</h2>

Селекторы также можно определять с помощью атрибута id, используя для этого символ #.

В следующем примере стиль соответствует любому дескриптору, у которого значение атрибута id является "ducie"

#ducie {border-color: yellow}

Селектор A [att] соответствует любому элементу А, у которого задан определенный атрибут, не зависимо от его значения (не работает в IE).

table [border] { border: 1px solid red; }

Селектор A [att=”val”] соответствует любому элементу А, определенный атрибут которого имеет заданное значение (не работает в IE).

input [type=”submit”] {background-color: red; }

Селектор А [lang|=”val”] соответствует любому элементу А, который имеет заданное значение в качестве одного из значений атрибута lang (не работает в IE).

P [lang|=”en”] {text-align: left; }

· Псевдоклассы.

Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для дескриптора P псевдокласс: first-letter, в котором устанавливаете различные стили:

p: first-letter { float: right; font-size: 2em; color: red; }

В CSS2 определяются следующие псевдоклассы:

: first-child - первый дочерний элемент другого элемента;

: link - еще не посещенные ссылки;

: visited - посещенные ссылки;

: hover - элемент, над которым в настоящее время находится курсор;

: active - активный в данный момент элемент;

: focus - элемент, имеющий фокус ввода;

: lang - этот псевдокласс определяет текущий язык;

: first-line - первая формированная строка абзаца;

: first-letter - первая буква абзаца;

: before - определяет содержимое перед элементом;

: after - определяет содержимое после элемента.

сайт атрибут селектор стиль

Использованные сайты и литература

1. Саймон Коллизон "Мастерская CSS: профессиональное применение Web-стандартов"

2. Расс Уикли "Освой самостоятельно CSS.10 минут на урок".

3. www.ruled.ru

4. http://lib-sgi.com/masterskaya-css-professionalnoe-primenenie-web-standartov/

Размещено на Allbest.ru

...