Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Можно создавать неплохие сайты без глубоких знаний языка html, стилей css, языка javascript.

↑

⇐ ПредыдущаяСтр 5 из 5

<p>Но если вы хотите создать классный сайт, востребованный пользователями - вам необходимо, хотя бы немного, изучить язык HTML.

Здесь как раз действует правило 20/80. Знание 20% языка html позволяет сделать 80% работы по созданию сайта.

<p align=justify>

Рано или поздно каждый пользователь Internet начинает подумывать о создании собственного Web-сайта.

Обственные Web-сайты есть у отдельных пользователей и целых компаний, у писателей и артистов.

А чем вы хуже, почему бы и вам не занять свою нишу в Интернете, к тому же, имея свой сайт, можно неплохо зарабатывать.

</div>

<div id="sidebar"> <h2> Комментарии </h2>

<p align=justify> Начнем из создания своей первой web-странички и дойдем до создания интерактивных web-страниц,

Что лежит в основе создания современных web-сайтов.

Изучим основные принципы создания web-страниц, структурирование и оформление текста.

Освоим внедрение в web-страницы графических изображений и мультимедийных данных.

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

</div>

<div id="footer">

</div></div>

</html>

Верстка страницы блоками DIV

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

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

· left - элемент страницы устанавливается ниже любого предыдущего, перемещенного влево блока;

· right - элемент страницы устанавливается ниже любого предыдущего, перемещенного вправо блока;

· both - элемент страницы устанавливается ниже любого предыдущего перемещенного блока;

· none - ограничений на положение блока относительно перемещаемых блоков не накладывается.

Пример.

1) Создаем папку и называем ее, sait. Создаем и помещаем в эту папку две страницы: index.html и style.css, а также папку images, куда будем помещать картинки. Все ссылки в примерах будут иметь относительные адреса, исходя из данной структуры.

2) Представим макет страницы. Для начала выключим весь текст.
Теперь разделим нашу картинку на блоки. Это можно сделать по-разному, например, так:

3) Именно такие картинки, с такими названиями мы и складываем в папку images. Обратите внимание, картинка reklama_bg будет фоном, поэтому ее можно сохранить в виде тонкой полоски, так же можно поступить и с картинкой footer. Еще нам понадобится картинка с фоном всей страницы.

4) У сайта может быть фиксированный либо резиновый дизайн.

а) Рассмотрим сначала фиксированный, т.е. ширина нашей страницы будет всегда одинакова - 800 пикселов.

1. Создаем структуру главной страницы: <html> <head> <title> Блочная верстка сайта </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main"> <div id="header"></div> <div id="menu1"></div> <div id="menu2"></div> <div id="menu3"></div> <div id="reklama"> <div id="reklama_top"></div> <div id="reklama_text"></div> <div id="reklama_bottom"></div> </div> <div id="content"></div> <div id="footer"></div> </div> </body></html>

2. Создаем файл style.css с таблицами стилей, в котором задаем положение, размер и фон наших блоков.

Ø Блок main имеет ширину 800px, фоновый рисунок fon_bg.jpg, который повторяется по вертикали:

#main{ width:800px; background-image: url(images/fon_bg.jpg); background-repeat: repeat-y;}

Ø Блок header находится в нормальном потоке, имеет ширину 800px и высоту 155px (это размеры фонового рисунка header.jpg, который не повторяется ни по горизонтали, ни по вертикали):

#header{ width:800px; height:155px; background-image: url(images/header.jpg); background-repeat:no-repeat;}

Ø Блоки menu1, menu2, menu3 находятся в нормальном потоке, имеют ширину 800px, а высоты 33px для menu1, 36px - для menu2 и 72px - для menu3 (это размеры соответствующих фоновых рисунков):

#menu1{ width:800px; height:33px; background-image: url(images/menu1.jpg); background-repeat:no-repeat;}#menu2{ width:800px; height:36px; background-image: url(images/menu2.jpg); background-repeat:no-repeat;}#menu3{ width:800px; height:72px; background-image: url(images/menu3.jpg); background-repeat:no-repeat;}

Ø Блоки reklama и content будут плавающими. Чтобы блок content прижимался к правой стороне блока reklama мы зададим обоим свойство float:left. Ширина блока reklama - 263px (по фоновому рисунку), а блока content - все остальное пространство, т.е. 507px.

Блок reklama, в свою очередь, состоит из трех блоков:
- reklama_top (ширина 263px, высота 67px (по фоновому рисунку),
- reklama_text (ширина 263px, высота будет зависеть от содержания, а фоновый рисунок будет повторяться по вертикали),
- reklama_bottom (ширина 263px, высота 35px (по фоновому рисунку).
Все три блока находятся в нормальном потоке. Запишем это:

#reklama{ float:left; width:263px;}#reklama_top{ width:263px; height:67px; background-image: url(images/reklama_top.jpg); background-repeat:no-repeat;}#reklama_text{ width:263px; background-image: url(images/reklama_bg.jpg); background-repeat: repeat-y;}#reklama_bottom{ width:263px; height:35px; background-image: url(images/reklama_bottom.jpg); background-repeat:no-repeat;}#content{ float:left; width:507px; }

Ø Последний блок - блок footer. Его ширина 800px, высота 28px, фоном является повторяющийся по горизонтали рисунок footer.jpg. Чтобы этот блок расположился ниже предыдущих, мы запретим его обтекание с обеих сторон свойством clear:both.

#footer{ clear:both; width:800px; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x;text-align:center; padding-top:5px;}

3. Сейчас наша страница выглядит так:

Она прижата к левому краю и имеет отступы сверху и слева. Давайте ее отцентрируем и уберем ненужные отступы. Проблема с отступами решается добавлением свойства margin:0px для body.

body{ width:800px; padding-left:50%; margin:0px;} #main{ width:800px; margin-left:-400px; background-image: url(images/fon_bg.jpg); background-repeat: repeat-y;}

4. Осталось наполнить страницу нужным текстом.

Ø Начнем с блока header, в котором надо разместить название сайта и слоган. Для этого в блок header поместим 2 соответствующих блока headertext1 и headertext2, а в них необходимый текст:

<div id="header"> <div id="headertext1">Web-технологии </div> <div id="headertext2">Устремись вперед!</div> </div>

Ø Теперь зададим стили для новых блоков. Эти блоки плавающие, шириной около 1/3 от родительского блока (800px/3=270px) и прижаты к правому краю (свойство float:right).

Чтобы второй блок располагался ниже первого, а не прижимался к нему, запретим его обтекание справа (clear:right), а для того, чтобы он был немного смещен влево (как на картинке), уменьшим его ширину на 20px.

Наконец, зададим шрифт, его размер и цвет, а также отступы сверху:

#headertext1{ width:270px; float:right; font-size:24px; font-family:Arial; padding-top:30px; color: #FFFFFF;}#headertext2{ width:250px; float:right; clear:right; font-size:20px; font-family:Arial; padding-top:5px; color: #FAF46E;}

Ø Теперь займемся блоками меню, их три: первые два содержат ссылки, третий - простой текст. Поступим так же, как с блоком header, т.е. создадим в каждом по блоку и уже в них поместим наши ссылки и текст. Так как ссылки на нашей странице оформлены по-разному, то ссылкам в этих блоках присвоим класс menu:

<div id="menu1"> <div id="textmenu1"> <a href="#" class="menu">Главная</a> | <a href="#" class="menu">Заказ проекта</a> | <a href="#" class="menu">Отзывы</a> </div></div><div id="menu2"> <div id="textmenu2"> <a href="#" class="menu">Уголок Web-мастера</a> | <a href="#" class="menu">Тест</a> </div></div><div id="menu3"> <div id="textmenu3"> Звоните нам по телефону (3812) 12-12-12 </div></div>

Ø Теперь зададим стили. Блокам надо задать отступы слева и сверху так, чтобы их содержимое располагалось по центру:

#textmenu1{ padding-left:270px; padding-top:10px;}#textmenu2{ padding-left:300px; padding-top:10px;}#textmenu3{ padding-left:250px; padding-top:35px; font-size:14px; color:#FFFFFF;}

Ø У ссылок надо убрать подчеркивание, задать цвет и размер. Чтобы ссылки не прижимались друг к другу, зададим им отступы слева и справа:

a.menu{ text-decoration: none; color:#000000; font-size:15px; padding-left:10px; padding-right:10px;}

Ø Теперь займемся блоком reklama, он состоит из трех блоков, причем текст будет располагаться в первых двух. В них мы и добавим по блоку:

<div id="reklama"> <div id="reklama_top"> <div id="textreklamatop">Вы можете прямо сейчас узнать что-нибудь новое:</div> </div> <div id="reklama_text"> <div id="textreklamatext"> <a href="H.html" class="reklama"> Html</a> <a href="C.html" class="reklama"> CSS</a> <a href="J.html" class="reklama"> JavaScript</a> <a href="V.html" class="reklama"> VBScript</a> <a href="P.html" class="reklama"> Perl</a> <a href="P1.html" class="reklama"> PHP</a> </div> </div> <div id="reklama_bottom"></div> </div>

Обратите внимание, ссылки в этом блоке отличаются от других, поэтому и имеют свой класс reklama.

Ø Займемся стилями. Для блока textreklamatop надо задать отступы, цвет и размер текста:

#textreklamatop{ padding:25px 25px 0px 10px; font-size:14px; color:#FFFFFF; font-weight:bold;}

Ø Блоку textreklamatext нет необходимости задавать стиль, а вот ссылкам внутри него надо задать отступы слева и справа, цвет и размер. Ссылки являются строчными элементами, а у нас они должны располагаться одна под другой, для этого зададим им свойство display:block. Чтобы ссылки располагались свободно, зададим расстояние между строк свойством line-height. А для того, чтобы первая буква ссылок была зеленого цвета (как на картинке) воспользуемся псевдоклассом first-letter:

a.reklama{ display:block; line-height:30px; text-decoration: none; color:#000000; font-size:14px; padding-left:10px; padding-right:10px;}a.reklama:first-letter{ color:green; font:600;}

Ø Продолжим, нам осталось оформить только блоки content и footer. Они не требуют дополнительных блоков, им надо задать отступы, а для блока footer - горизонтальное выравнивание:

#content{ float:left; width:507px; padding:15px;}#footer{ clear:both; width:800px; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; text-align:center; padding-top:5px;}

Ø Теперь добавим сам текст:

<div id="content"> <img src="images/html5.jpg" align="left"><P> Web-технологии есть <b>концепция работы с информацией. </B>Толчок для своего стремительного и победного шествия по планете Web получила в 1993 году, когда Mark Andressen с группой студентов университета Иллинойса, разработали бесплатно распространяемую (вот истинная причина бурного развития Web) программу Mosaic для просмотра Web-страниц. <div style="clear:both"></div> <img src="images/css.jpg" align="right"> <p>Она отличается следующими особенностями: <ul type=circle><li>техническая основа Web-технологий – локальные и глобальные сети, часто Интернет; <li>применение особого типа тонких клиентов: web-браузеров (типы и история, современное состояние браузеров отдаются на самостоятельное изучение); <li>преимущественно текстовая и статично-графическая подача информации (ослабление этой тенденции связано с развитием технологий связи и ПО, экспансией медиаконтента).</Ul></div><div id="footer"> © 2013 Все права защищены</div>

Ø Ссылки в тексте не имеют класса, это будут ссылки по умолчанию, т.е. те, которые будут использоваться на всех страницах сайта, если не указано иное. Поменяем для них только цвет:

a{ color:#000000; font:600;}

Ø Осталось задать шрифт и размер для всего сайта. Для этого добавим эти свойства в стили тега body:

body{ width:800px; padding-left:50%; margin:0px; font-family:Arial, Helvetica, sans-serif; text-align:left; font-size:12px;background-color:#fffacd;}

Ø Последний нюанс: сделаем так, чтобы при наведении курсора мыши на ссылки, их цвет менялся на зеленый:

a:hover{ color:green;font:600;}

б) Резиновый дизайн

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

1. Сначала надо определить, какая часть страницы будет растягиваться. В нашем случае самым простым вариантом будет растягивание правого края. Для этого нам понадобятся еще картинки:

2. Нам придется частично переписать наш код. Суть в следующем. Мы поместим наш блок header со всем его содержимым в блок header_bg, зададим последнему ширину 100%, а фоном сделаем картинку header_bg.jpg. Аналогично поступим с блоками menu1, menu2 и menu3:

<html> <head> <title> Блочная верстка сайта </title> <link rel="stylesheet" type="text/css" href="style.css"> </head><body> <div id="main"> <div id="header_bg"> <div id="header"> <div id="headertext1">Web-технологии </div> <div id="headertext2">Устремись вперед!</div> </div> </div> <div id="menu1_bg"> <div id="menu1"> <div id="textmenu1"> <a href="#" class="menu">Главная</a> | <a href="#" class="menu">Заказ проекта </a> | <a href="#" class="menu">Отзывы</a> </div> </div> </div> <div id="menu2_bg"> <div id="menu2"> <div id="textmenu2"> <a href="#" class="menu">Уголок Web-мастера</a> | <a href="#" class="menu">Тест</a> </div> </div> </div> <div id="menu3_bg"> <div id="menu3"> <div id="textmenu3"> Звоните нам по телефону (3812) 12-12-12 </div> </div> </div>...... </div></body></html>

3. Далее блоки reklama и content со всем их содержимым поместить в блок conteyner:

<div id="main">...... <div id="conteyner"> <div id="reklama"> <div id="reklama_top"> <div id="textreklamatop">Вы можете прямо сейчас узнать что-нибудь новое: </div> </div> <div id="reklama_text"> <div id="textreklamatext">... </div> </div> <div id="reklama_bottom"></div> </div> <div id="content">..... <div style="clear:both"></div>..... </div> </div> <div id="footer"> © 2013 Все права защищены </div> </div>

4. Подкорректируем таблицу стилей.

Ø Выравнивание по центру нам больше не нужно, значит из body и main надо убрать эти свойства. Кроме того, фон для нашей страницы нам также больше не нужен, а ширина страницы теперь будет равна 100%. Следовательно, останется следующее:

body{ margin:0px; font-family: Arial, Helvetica, sans-serif; text-align: left; font-size: 12px;}#main{ width:100%;}

Ø Теперь добавим стили для наших новых блоков. Как мы и решили: шириной 100%, высотой, как у дочерних блоков и с соответствующей фоновой картинкой:

#header_bg{ width:100%; height:155px; background-image: url(images/header_bg.jpg); background-repeat: repeat-x;}#menu1_bg{ width:100%; height:33px; background-image: url(images/menu1_bg.jpg); background-repeat: repeat-x;}#menu2_bg{ width:100%; height:36px; background-image: url(images/menu2_bg.jpg); background-repeat: repeat-x;}#menu3_bg{ width:100%; height:72px; background-image: url(images/menu3_bg.jpg); background-repeat: repeat-x;}

Ø Блок conteyner мы создали, как объединяющий блоки reklama и content. Стиль этому блоку не нужен, а вот положение блока content мы определим с помощью абсолютного позиционирования:

#content{ position:absolute; left:270px; top:298px; padding:15px;}

Ø Расстояние сверху равно сумме высот блоков header, menu1, menu2 и menu3. Расстояние слева определяется шириной блока reklama. Наконец, в блоке footer поменяем ширину на 100%:

#footer{ clear:both; width:100%; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; text-align:center; padding-top:5px;} 5. Посередине страницы у нас идет зеленая линия, это граница наших картинок (при фиксированном дизайне она отделяла нашу страницу от фона). Как ее убрать? Есть два пути. Первый - переделать сами картинки. Второй – уменьшить ширину блока на 1рх. Ширина наших картинок 800px, так же, как и ширина соответствующих блоков. Уменьшим ширину блока на 1px. Тогда и наша фоновая картинка обрежется справа на тот же 1px. Этим мы и воспользуемся, т.е. поменяем везде 800px на 799px. Окончательно таблица стилей будет выглядеть так: body{ margin:0px; font-family: Arial, Helvetica, sans-serif; text-align: left; font-size: 12px;}#main{ width:100%;}#header{ width:799px; height:155px; background-image: url(images/header.jpg); background-repeat:no-repeat;}#menu1{ width:799px; height:35px; background-image: url(images/menu1.jpg); background-repeat:no-repeat;}#menu2{ width:799px; height:36px; background-image: url(images/menu2.jpg); background-repeat:no-repeat;}#menu3{ width:799px; height:72px; background-image: url(images/menu3.jpg); background-repeat:no-repeat;}#reklama{ float:left; width:263px;}#reklama_top{ width:263px; height:67px; background-image: url(images/reklama_top.jpg); background-repeat:no-repeat;}#reklama_text{ width:263px; background-image: url(images/reklama_bg.jpg); background-repeat: repeat-y;}#reklama_bottom{ width:263px; height:35px; background-image: url(images/reklama_bottom.jpg); background-repeat:no-repeat;}#content{ position:absolute; left:270px; top:298px; padding:15px;}#footer{ clear:both; width:100%; height:28px; background-image: url(images/footer.jpg); background-repeat: repeat-x; text-align:center; padding-top:5px;}#headertext1{ width:270px; float:right; font-size:24px; font-family:Arial; padding-top:30px; color: #FFFFFF;}#headertext2{ width:250px; float:right; clear:right; font-size:20px; font-family:Arial; padding-top:5px; color: #faf46e;}#textmenu1{ padding-left:270px; padding-top:10px;}#textmenu2{ padding-left:300px; padding-top:10px;}#textmenu3{ padding-left:250px; padding-top:35px; font-size:14px; color:#FFFFFF;}a.menu{ text-decoration: none; color:#000000; font-size:15px; padding-left:10px; padding-right:10px;}#textreklamatop{ padding:25px 25px 0px 10px; font-size:14px; color:#FFFFFF; font-weight:bold;}a.reklama{ display:block; line-height:30px; text-decoration: none; color:#000000; font-size:14px; padding-left:10px; padding-right:10px;}a.reklama:first-letter{ color:#02663d;}a{ color:#000000;}a:hover{ color:#02663d;}#header_bg{ width:100%; height:155px; background-image: url(images/header_bg.jpg); background-repeat: repeat-x;}#menu1_bg{ width:100%; height:33px; background-image: url(images/menu1_bg.jpg); background-repeat: repeat-x;}#menu2_bg{ width:100%; height:36px; background-image: url(images/menu2_bg.jpg); background-repeat: repeat-x;}#menu3_bg{ width:100%; height:72px; background-image: url(images/menu3_bg.jpg); background-repeat: repeat-x;}

⇐ Предыдущая 1 2 3 45

Познавательные статьи:

Техника нижней прямой подачи мяча

Комплекс физических упражнений для развития мышц плечевого пояса

Стандарт Порядок надевания противочумного костюма

Общеразвивающие упражнения без предметов

Последнее изменение этой страницы: 2016-08-15; просмотров: 503; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.191.205.110 (0.012 с.)