По технологии На тему: «Про сайт»
СОДЕРЖАНИЕ: Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т дМОУ Лицей №4 г. Люберцы
Реферат
По технологии
На тему:
«Про сайт»
Выполнил ученик 9 б класса
Ляпин Антон
2008 год
Оглавление:
Информация об использованном Html коде:
Главная таблица ……………………………………………………………….... 2
Таблица №1 ……………………………………………………………………… 3
Таблица №2 ……………………………………………………………………… 3
Таблица №3 ……………………………………………………………………… 4
Техническое задание:
Техническое задание на сайт……………………………………………………. 5
CSS:
CSS ……………………………………………………………………………....... 6-10
Использованные сайты и литература:
Использованные сайты и литература……………………………………………. 11
Информация об использованном 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=1p align=centerimg 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
brtable align=center width=430 height=444 cellspacing=2 cellpadding=20 border=5 bgcolor=#ffffff bordercolor=#101096
tr
td rowspan=2 colspan=2
H 2 align = center Приветствуем вас!/ H 2
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 - определяет содержимое после элемента.
Использованные сайты и литература.
Энди Бадд, Камерон Молл, Саймон Коллизон «Мастерская CSS: профессиональное применение Web-стандартов»
Расс Уикли «Освой самостоятельно CSS. 10 минут на урок».
www.ruled.ru
www.yandex.ru
www.rambler.ru
www.wikipedia.org
www.google.ru