Можно создавать неплохие сайты без глубоких знаний языка 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">

<p align=center> Авторы: СибАДИ, кафедра &quot;Информационные технологии&quot;, &copy; 2013

</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 пикселов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



Техника прыжка в длину с разбега

Тактические действия в защите

История Олимпийских игр

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