Отправляет email-рассылки с помощью сервиса Sendsay

Создание сайтов (HTML CSS PHP MySQL JavaScript ActionScript)

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Рассылка которая делает сайты..." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2012   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
webonlife

Статистика

242 подписчиков
+35 за неделю
←   Все выпуски   →

Создание сайтов (HTML CSS PHP MySQL JavaScript ActionScript) Что такое CSS


Что такое CSS я расскажу вам в конце урока, а сейчас давайте немного поработаем над нашим сайтом про мед, чтобы у нас было достаточно примеров для использования стилей. После этого я смогу вам не только объяснить что такое CSS но и показать его преимущества.

Создаем таблицу для сайта.

В предыдущем уроке мы узнали что такое таблицы в HTML. Теперь нам предстоит Создать таблицу для нашего сайта про мед. Что нам нужно на страницах сайта? Безусловно нам необходимо выделить место для рекламы, наверное, целую колонку. Еще одна колонка будет для ссылок по сайту, для меню. Большую часть места на экране будет занимать колонка, которая будет содержать полезную тематическую информацию сайта. Еще нам нужна полоска вверху страницы, там размещается самая дорогая реклама. Там же будут основные ссылки, чтобы передвигаться по сайту. Внизу тоже оставим полоску для счетчиков посетителей, предупреждении об авторском праве и других не очень нужных вещах. Таким образом у нас выходит расположение ячеек как на моем сайте и как на большинстве других сайтов в интернете. Почему так? Потому что это оптимальный вариант и придумывать что-то свое не целесообразно. Создадим нашу таблицу и на время отладки сделаем видимыми ее границы.

<table border="3"> <tr><td colspan="3"><!-- Это верхняя ячейка на странице. Здесь будет логотип сайта и его главное меню. --></td></tr> <tr> <td></td> <td><!-- Это центральный столбик. Сюда вставлять основной текст страницы. --></td> <td></td> </tr> <tr><td colspan="3"></td></tr> </table>


Вот как выглядит наша таблица здесь (еще раз обратите внимание на то, что таблица может не отображаться правильно если в ее ячейках не будет содержимого, вы можете вставить символ пробела в каждый столбик (&nbsp;) чтобы это исправить):
 
   
 

На главной нашего сайта про мед еще смешнее). Дело в том что она пустая и мы ей не указали никаких размеров. Размеры мы укажем с помощью стилей а вот содержанием надо каким либо заполнить. Поскольку наш сайт называется "МЕД И ПЧЕЛЫ" то напишем там, для начала, про мед. Хочу обратить внимание, что перенимать что-то умное у других стоит но копировать или пересказывать тексты чужие - это жульничество которое не сделает популярным ваш сайт. Вы должны быть оригинальными. Единственное, что может повториться на нескольких разных сайтах - это определение чего либо)). Например: HTML - язык гипертекстовой разметки страницы. Если размещаете на своем сайте текст с другого то размещайте ссылку на источник, за это на вас не только не будут в обиде но еще и останутся благодарны за рекламу)). Еще один повод быть автором текстов на сайте - не рекламировать что-либо даром)). Хотя не ознакомясь с другими источниками можно написать однобокий текст с не достаточно раскрытой темой). Итог всей нашей работы вы можете увидеть на нашей с вами странице сайта http://pirogoff.16mb.com/bee. Сейчас же давайте заполним нашу таблицу начальным текстом:

 
 

Мед. Многие могут думать что они знают что это. Они отчасти правы. Просто знают они не все и не про все меда =). Хотя, может конкретно про вас я и ошибся и вы знаете больше меня, очень надеюсь что вы со мной поделитесь своими знаниями. В разделе Обратная связь вы можете узнать как это можно сделать.

Я знаю что есть кроме пчелиного меда мед шмелиный, есть поддельный мед и искусственный. Искусственный - это сделанный из сахара и цветов растений при этом не скрывается его происхождение. Поддельный - это мед, выдаваемый за настоящий но частично или полностью состоящий из продуктов не пчелиного происхождения (и не всегда съедобных или безвредных). Шмелиный мед - это частично переваренный шмелями цветочный нектар и высушенный от избытка влаги. Мед пчелиный имеет такое же происхождение как и шмелиный. Разница между этими медами в том, что делают их разные насекомые. Эти меды имеют разный состав и консистенцию, они состоят из нектара разных растений даже если собраны на одной территории.

  
 

Я не привожу код примера так как там все нам знакомые теги (абзаца и ссылки) и вы уже сами должны уметь их использовать. На итог нашей с вами работы вы можете посмотреть на нашем сайте-примере http://pirogoff.16mb.com/bee. Ячейка с содержанием заняла почти все место пустых ячеек. Это работают установки по умолчанию. Чтобы элементы нашей таблицы заняли нужное нам расположение, необходимо указать это явно. Мы сделаем это сегодня но сначала давайте создадим еще одну страницу. Назовем ее "contact.html". Это и будет наша страница на обратную связь. Перенесем на нее весь код из index.html. Только центральный столбик заполним по другому:

 
 

Здравствуйте. Меня зовут Александр. Буду очень вам признателен за отзывы, предложения, критику и жалобы. Буду очень признателен если вы укажете мне на любые ошибки на моем сайте, буду стараться сразу же их исправлять. Если вы хотите просто со мной пообщаться, тоже с радостью вам отвечу. У вас есть четыре способа со мною связаться: skype (Sanek_pirojok), a-meil (aleks.pirogoff@gmail.com), Вконтакте (http://vk.com/pirojok_sanek) и Одноклассники (http://www.odnoklassniki.ru/profile/543640625079).

  
 

Этот пример показателен для того случая, когда является актуальным применение тех возможностей HTML, которые считаются устаревшими. Поскольку текст и его стиль форматирования в основной колонке этой страницы нигде повторяться не будут то я не вижу смысла создавать какие-то стили для этого, проще использовать для форматирования возможности HTML. В теге <img> я с помощью атрибута align указал обтекаемость картинки текстом:

<img src="img/ya.PNG" align="left" />

Текст выделил жирным шрифтом с помощью тегов <b> </b>:

.........
У вас есть четыре способа со мною связаться: <b>skype</b> (Sanek_pirojok), <b>a-meil</b> (aleks.pirogoff@gmail.com), <b>Вконтакте</b>
...........

Для ярых противников всего устаревшего могу сказать, что стили сюда применить можно, для этого всего лишь нужно написать соответствующий код, который займет больше места и времени. Руководствуясь только этими соображениями я не стал применять стили)). Вы же можете поступить в данном случае иначе, когда ознакомитесь с CSS. Прежде чем перейдем к его изучению давайте сначала добавим в верхнюю ячейку таблицы на обеих наших страницах два пункта главного меню:

<a href="index.html">Главная</a> <a href="contact.html"> Обратная связь</a>

Благодаря верхнему меню сайта мы теперь можем перемещаться между всеми двумя страницами этого сайта лишь щелчком по ссылке)). И теперь у нас достаточно примеров и знаний чтобы изучать CSS =).

CSS

CSS в переводе с английского означает "Каскадные таблицы стилей". Это язык описания внешнего вида документа. С помощью операторов языка вы указываете цвет, высоту, ширину, размер и другие значения элементов документа.

Основная причина создания CSS - отделение логической структуры веб-документа от описания его внешнего вида. Логическую структуру мы описываем с помощью HTML, описание - с помощью CSS. Такое разделение дает возможность упростить описание документа, читаемость его кода, внесение изменений на сайт.

Заключение и анонс

Вот мы и начали практиковаться и изучать материал на практике. В дальнейшем текст страниц нашего сайта-примера я буду изменять, так как я хочу довести его между делом до приличного состояния, чтобы выложить его в интернете как отдельный сайт. В следующем уроке мы уже начнем изучать и применять операторы языка CSS. Пока советую побольше практиковаться. Всем удачи! =)

Читать далее

В избранное