Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Белорусский государственный университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Веб программирование.Начало пути.doc

Скачиваний:

Добавлен:

01.04.2025

Размер:

8 Мб

Скачать

☆

<<< < Предыдущая 106 107 108 109 110 111 112 113 114 115 116 117118 / 139118 119 120 121 122 123 124 125 126 127 128 129 130 > Следующая >>>

Трехколоночный контейнерный макет сайта

top
left-side	center	right-side
footer

<style>

#left-side { float:left;

width:200px;

}

#wrapper { margin-left:200px;

background-color: yellow;

}

#right-side { float:right;

width:200px;

}

#center {}

#footer { clear:both;

}

</style>

</head>

<body>

<div id="right-side"> right-side </div>

<div id="center"> center </div>

</div>

<div id="footer"> footer </div>

</body> </html>

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

<html>

<head>

<title>Сглаженные закругленные углы без использования изображений</title>

<style>

.b1, .b2, .b3, .b4, .b5,

.b1 i, .b2 i, .b3 i, .b4 i, .b5 i,

.b1 b, .b2 b, .b3 b, .b4 b, .b5 b,

.b1 q, .b2 q, .b3 q, .b4 q, .b5 q {

height: 1px;

font-size: 1px;

overflow: hidden;

border-style: solid;

border-width: 0 1px;

display: block;

}

.b1 {

margin: 0 2px;

background: #EBEEF0;

border: none;

}

.b1 b {

margin: 0 1px;

background: #B8C3C8;

border-color: #CBD3D7;

}

.b2 {margin: 0 1px; border-color: #D6DCDF;}

.b2 b {border-color: #B8C3C8;}

.b2 i {border-color: #E4E8EA;}

.b2 q {border-color: #F7F8F9;}

.b3 {border-color: #EBEEEF;}

.b3 b {border-color: #BCC6CB;}

.b3 i {border-color: #F9FAFB;}

.b4 {border-color: #CAD2D6;}

.b4 b {border-color: #E5E9EB;}

.b5 {border-color: #B5C0C6;}

.b5 b {border-color: #FAFBFB;}

.text {

border: 1px solid #B0BCC2;

border-width: 0 1px;

padding: 0 12px;

}

</style>

</head>

<body>

<div class="text"> каждый угол состоит из пяти расположенных

специальным образом пикселей, придающих углу закругление. </div>

</body> </html>

Добавить информеры: погода, курсы валют, гороскоп: например:

border=”0”/> </a> – включение информера

Добавить баннеры.
Проверить сайт на валидность (http://validator.w3.org/unicorn)
Проверьте сайт на кроссбраузерность (правильность отображения сайта в различных браузерах).
Разместить сайт на любом бесплатном хостинге.

Темы для создания сайтов в Приложении 1, курсовые работы 1,2

Лабораторная работа 4. Применение каскадных таблиц стилей css

Создайте шаблон для своего персонального сайта в Adobe Dreamweaver (файл с расширением .dwt). Для создания шаблона используйте меню: Вставка –> Объекты шаблона – >Создать шаблон. Для вставки контейнеров (частей макета) используйте Вставка ‑> Объекты макета ‑> Тег Div. Для создания редактируемых областей Вставка –> Объекты шаблона –> Редактируемая область. Продумайте, какие области в шаблоне могут быть постоянными, а какие должны изменяться. Создайте страницу на основе созданного шаблона Файл ‑> Создать... –> Страница из шаблона.
Добавьте на сайт, созданный в лабораторной работе №3 графическую навигационную карту. В качестве изображения можно использовать любую фотографию. При щелчке на отдельных объектах изображения должен осуществляться переход на страничку с детальной информацией об объекте. Например, если на фотографии изображены Вы с любимым котом Барсиком на руках на фоне дачного домика, то при клике мышкой на Вашем изображении будет открыта страничка с Вашей биографией, при клике на Барсике – страничка о котах, при щелчке по дому – страничка с приглашение в гости описание схемы проезда до дачи. Для создания графической навигационной карты воспользуйтесь возможностями Adobe Dreamweaver. Для этого вставьте изображение на страницу. Затем выделите изображение, внизу страницы в редакторе свойств отобразятся инструменты для выделения горячих областей.

Первая кнопка предназначена для редактирования уже существующих областей (при нажатой клавише Ctrl вершины многоугольника можно перемещать), а 2-4 для создания прямоугольной, круглой области и области сложной формы. Как только Вы выберите тип области и приступите к ее выделению на изобржении, Dreamweaver подставит в поле Map редактора свойств слово Map (имя навигационной карты), можно его изменить. Для каждой области надо указать адрес перехода по ссылке, где будет открыта ссылка и замещающий текст.

3.Блочная верстка сайтов

Рассмотрим основные элементы HTML и CSS, используемые для блочной верстки.

<!DOCTYPE html >

<head>

<title>WebConf 09</title>

</head>

< !- -Первый мета-тэг показывает на кодировку сайта. Второй — это краткое описание сайта для поисковых серверов. В третьем мета-тэге ключевые слова для поисковиков-->

<body>

<div>

</div>

<!--

<ul>

<li>Главная</li>

<li><a href="#">О Секциях</a></li>

<li><a href="#">Тезисы</a></li>

<li><a href="#">Оплата</a></li>

<li><a href="#">Контакт</a></li>

</ul> </div>

<h2><span>Подробная информация</span></h2>

<p>Белорусский государственный университет (БГУ) и Институт математики Национальной Академии наук Беларуси организуют международную научную конференцию: <a href="">«X Белорусская математическая конференция»</a>, 3–7 ноября 2008 года в г. Минске (Беларусь).

<H2>Список участников:</H2>

<ol>

</ol>

<ol>

</ol> </div>

</div>

<h3>Самые распоследние новости:</h3>

<ul>

<li>Новости. Наука</li>

<li>Новости. Заработать</li>

<li> Пляски намечаются до утра. будет весело.</li>

</ul>

</div>

<p>Главная | <a href="#">О нас</a> | </a> | <a href="#"> </a></p>

<a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html"> XHTML</a> |

<a href="http://jigsaw.w3.org/css-validator/validator? uri=http://www.dizweb.ru/pig/style.css"> CSS</a> | | e-mail: <a href="mailto:piggs@pig.ru">piggs@pig.ru</a></p>

</div> </div> </body> </html>

Сохраним документ в файле для главной страницы index.html.

Открываем новый документ style.css

* {margin : 0; padding : 0; border : 0; }

body {

padding : 2% 0 0;

background : #fff; color : #333;

font-family : "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif; }

#container { width : 760px; margin : 0 auto; border : 1px solid #999; }

#header {

background : url(header.jpg); width : 760px;

height : 158px; }

#nav {

background : url(navbg.jpg) repeat-x; color : #f00;

font-size : 120%; font-weight : bold;

line-height : 1.8em; text-align : center; }

#nav ul { list-style-type : none; }

#nav li { display : inline; margin : 0 8px; }

#nav li a { color : #0c0; }

#nav li a:hover { color : #f00; }

a { text-decoration : none; }

#text {

width : 545px; font-size : 0.8em; color : #333; margin : 10px auto;

float : left;

}

#text p {

text-align : justify; text-indent : 1.5em; margin : 0; padding : 0 15px; }

#text a {

color : #396; }

#text a:hover {

color : #f36;

border-bottom : 1px dotted #f36; }

.img1 { width : 200px;

height : 287px; margin : 0 0 0 15px; float : right; }

.img2 {

width : 200px; height : 200px;

margin : 10px 10px 0 15px;

float : left;

}

.venzel { width : 300px; height: 23px;

margin : 10px 10px 0 15px;

float : left;

}

#members {

width : 300px;

height : 190px; float : right;

}

#members h2 {

color : #f60; font-size : 120%;

font-weight : bold; text-align : center;

}

#members ol {

color : #999; font-size : 120%;

margin : 10px;

float : left;

}

#members li { margin : 0 5px; }

#members li a {color : #0c0;}

#members li a:hover {color : #f00;}

.line {width : 304px; height : 13px; float : right;}

#news {background : #ffc; width : 185px; color : #665; margin : 10px 5px; float : right;}

#news h3 {color : #f60; font-size : 120%; font-weight : bold; text-align : center; }

#news ul { list-style : url(marker.jpg) inside; }

#news li { font-size : 75%; padding : 5px 10px;}

#footer {

background : #665;

color : #fff; font-size : 70%;

padding : 5px; clear : both;

}

#footer a {

color : #ff0;

}

#footer a:hover {

color : #f00;

}

#footer p { padding : 2px; text-align : center; }

.clearfloat{ clear:both; }

В первом правиле звёздочка означает всю страницу разом. Браузеры применяют данные с ней правила ко всей странице. В правиле мы указали :Отступы - 0, Поля - 0, Рамка - 0. Значения указываются либо в процентах, либо в пикселах. Если стоит ноль, то единицу измерения не нужно указывать.

Следующим правилом мы задали для тела страницы: поля — сверху 2%, с боков по нулям, снизу тоже ноль. У любого прямоугольника есть 4 стороны, значения отступов для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Так как по бокам должно быть одинаковое расстояние от края экрана, то и значений всего три — 2% 0 0. Средняя цифра в этой записи нуль означает, что она одинакова для правой, и для левой стороны.

В следующем правиле появилось слово container с решёткой (#). Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице.

Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы при этом равна 760 пикселям.

А теперь сохраним наш лист стилей в ту же самую папочку, где лежит Главная страница и картинки. Сохраняем таким же образом, как и раньше, только в имени добавляем расширение .css — style.css

Открываем его и следом за правилом для шапки запишем правило для блока навигации:

#nav { background: url(nav-bg.jpg) repeat-x; color: #f00;

font-size:120%;font-wight: bold; line-height: 1.8em; text-align: center; }

#nav ul { list-style-type: none; }

#navli{display:inline;margin: 0 8px; }

#nav li a { color: #0c0; }

#nav li a:hover { color: #f00; }

Панель навигации будет у нас одна — сразу под шапкой, горизонтальная (в подвале сделаем простое дублирование обычными ссылками). Для её реализации мы воспользуемся таким элементом как маркированный список.

Данный список в HTML обозначается тэгом ul. Элементы списка (строчки) обозначаются тэгом li.

Теперь вернёмся к нашему листу стилей. Блок навигации мы обозвали атрибутом nav. Вначале укажем общие настройки для него: бэкграунд — это картинка с именем nav-bg.jpg размером 8х35 пикселей. Это обычный такой "столбик" с градиентом от белого к серому сверху вниз. Чтобы растянуть его по всей полосе навигации, мы указали в значении слово repeat-x, что означает "повторить по оси х", то есть по горизонтали (об этом уже говорилось в чуть выше).

пропишем ещё пару правил для ссылок.

#nav li a { color: #0c0; }

#nav li a:hover { color: #f00; }

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

Ну а теперь следом добавим вот такое правило:

a {text-decoration: none;}

Это общее для всех ссылок правило. Оно указывает, что все ссылки на странице по умолчанию не используют подчёркивание.

Продолжим верстать Главную страницу. Следом за шапкой добавим блок навигации. Находим в коде следующее место:

</div>

всё просто: наши разделы оформлены как пункты списка, и каждый пункт, кроме первого, является ссылкой. В данном случае вместо адреса несуществующих страниц мы вставили решётку (#), которая всегда возвращает на текущую страницу.

Ну а теперь пора уже, наконец, наполнить нашу страницу Контентом. полезная площадь страницы разделена на две функциональные области:

Основной текст (с картинками и пр.)
Блок новостей.

Обычно, такую вёрстку называют двухколоночной.

В первом правиле мы указали, что ширина у области текста будет равна 545 пикселям. Размер шрифта 0.8em (в данном правиле ноль можно не писать, .8em — обозначает тоже самое). С отступами понятно — верх и низ по 10 пикселей, по бокам на автомате. А вот последняя строчка как раз и задаёт местоположение нашего блока текста нигде попало, а с левой стороны. Слово float переводится как "обтекание'". left — сам объект слева, а течёт всё правее. И наоборот, right — объект справа, а течёт всё левее.

Для чего это нужно? Скопировав приведённые выше правила в свой лист стилей и сохранившись, посмотрите, что получилось — текст выровнялся по левому краю странички, оставив справа пустое место. В это пустое место мы потом и вставим блок новостей, присвоив ему в листе стилей значение right для атрибута float.

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

Далее. Слово indent означает не что иное как обычную "красную строку". Размер её указан в полтора размера шрифта.

Ну и, наконец, ссылочки. Для неактивной задали цвет салатовый, а для активной красный, и с подчёркиванием точечной (dotted) полоской в 1 пиксель толщиной.

А теперь давайте укажем правила для наших картинок.

В блоке текста мы разместим список новых участников не маркированным, а нумерованным списком. Задаётся такой список тэгом ol.

Далее у нас идут подряд аж целых два нумерованных списка. Зачем два? На макете мы разместили новых участников в две колонки с вертикальной нумерацией в каждой. Можно было бы, конечно, занести всех в один общий список, сделать ширину одной ячейки ровно вполовину отведённого под список места, и тогда ячейки автоматом переносились бы на новую строчку. Но тогда нумерация выглядела бы так:

1 2

3 4

5 6

Поэтому мы сделали просто два списка подряд. Но! Каждому в листе стилей задали обтекание слева. Об этом чуть позднее. Сразу после списков мы положили картинку волнистой линии.

Ну, а теперь откроем наш лист стилей и запишем ещё кусочек красивых правил.

#members { width: 300px; height: 190px; float: right;}

#members h2 { color: #f60; font-size: 120%; font-weight: bold; text-align: center;}

#members ol {color: #999;font-size: 120%; margin: 10px; float: left;}

#members li { margin: 0 5px;}

#members li a { color: #0c0;}

#members li a:hover { color: #f00;}

.line {width: 304px; height: 13px; float: right;}

Для начала мы задали всему блоку размер. Причём на этот раз не только ширину, но и высоту. Для чего это нужно? Если, например, в нашем списке было бы чуток меньше народу, то картинка волнистой линии "поджимала" бы список снизу, а нам надо, чтобы она была почти под срез картинки. Поэтому мы задали жёсткий размер как по ширине, так и по высоте. И обтекание справа. Ну, это уже понятно — список должен быть правее указанного рисунка.

Далее задали правило для заголовка второго уровня. Для самого нумерованного списка с тэгом ol мы указали обтекание слева. То есть оба наших списка (помним, что в коде страницы их два подряд) будут идти не в столбик, а один подле другого рядышком оба-два.

Все имена в списке оформлены в виде ссылок. Для них мы задали только цвета, без всяких подчёркиваний. Но почему-то на страничке они всё равно подчёркиваются при наведении мышки, да ещё точечной линией! Вот тут как раз и сработал так называемый каскад — список-то лежит в зоне действия атрибута text и поэтому просто перенял от него часть правил.

В самом низу мы добавили "очистку обтекания" — clearfloat (для неё также в листе стилей пропишем свои правила, а именно очистку с обоих сторон). Для чего это? Вообще наша вёрстка является "плавающей". Вон сколько у нас уже обтекаемых элементов. При этом разные браузеры по-разному воспроизводят такую вёрстку (о том, что IE по-своему "видит" поля и отступы уж и не говорю). В Opera и Firefox можно было бы обойтись и без очистки и сразу ниже писать код футера. Но в IE в таком случае появляются странные подёргивания фона у футера при наведении на ссылки мышки. Браузер словно хочет подпрыгнуть и заполнить все пустующие места какие есть. Поэтому мы просто добавим эту строчку и не станем заморачиваться.

А теперь открываем наш лист стилей и допишем следующий код:

#news {background: #ffc; width: 185px; color: #665; margin: 10px 5px; float: right;}

#news h3 { color: #f60; font-size: 120%; font-weight: bold; text-align: center; }

#news ul { list-style: url(marker.jpg) inside; }

#news li { font-size: 75%; padding: 5px 10px; }

Здесь мы для начала поменяли фон для блока новостей, чтобы визуально отделить колонку от основного содержимого. Затем задали ширину блока, цвет для шрифта и обтекание справа. С заголовком получилось хитро. Если вернуться чуток назад, то можно заметить, что у заголовка 2-го уровня (у списка участников), также задан размер шрифта в 120%.

Следующим правилом мы задали для списка стиль маркеров. По-умолчанию любой браузер отображает маркеры в виде чёрных кружков. Но можно задать и другое отображение — окружностей, квадратов, без маркеров, или вообще свой собственноручно нарисованный маркер. Как раз так мы и поступили. Нарисовали симпатичную зелёную галку с размерами 14х17 пикселей и указали в стиле ссылку на неё — url(marker.jpg). Следом приписали слово inside. Что это значит? Маркеры по-умолчанию не входят в сам блок текста. Когда мы задаём поля для текста, то маркеры не слушаются и вылезают за края. Поэтому мы принудительно указали им быть inside, то есть внутри колонки с текстом.

Нам осталось только оформить "подвал" (footer),

Здесь у нас слово «Главная» не является ссылкой, а следом идут обычные ссылки на другие разделы сайта. Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на "mail" и ещё две интересные ссылочки. Это ссылки на валидаторы, которые проверяют страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы даёте команду валидаторам проверить ваши странички (которые уже лежат в сети конечно же). И тут же получаете ответ.

<<< < Предыдущая 106 107 108 109 110 111 112 113 114 115 116 117118 / 139118 119 120 121 122 123 124 125 126 127 128 129 130 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
01.07.2025180 Кб0Введение.docx
#
01.03.2016451 Кб10Введение.pdf
#
29.02.20161 Мб9Вводная презентация ФИЗИКА 3 зет.pdf
#
06.05.2019652 Кб6Вводная_лекция(1).doc
#
06.11.201952 Кб6ВЕБ Программа практики.doc
#
01.04.20258 Мб7Веб программирование.Начало пути.doc
#
01.05.20257 Мб3Веб программирование.Начало.doc
#
25.04.201964 Кб8веб.docx
#
01.04.202567 Кб2вебдизайн.doc
#
01.05.202546 Кб3Ведущие концепции культуры, Зачет по Усовской.docx
#
01.03.2025182 Кб3Ведущие( опорные) понятия МПП.doc