![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Пошаговый разбор, комментарии
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN" " https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <! DOCTYPE>. < html xmlns=" https://www.w3.org/1999/xhtml" > < hmtl> - заключает весь сайт. Вначале пишется и в конце закрывается < /html> < head> Используется для содержания дополнительных элементов. Например заголовок страницы, ссылка на css файлы, на java script файлы, мета тэги. < title> Строительная компания " Рост" < /title> Заголовок страницы. В браузере отображается следующим образом (см. рис.1.1):
Рис. 2.1 Заголовок браузера Firefox < meta content=" " name=" keywords" /> - ключевые слова (стройка, кирпич, камень, отделка и т.д.) < meta content=" " name=" description" /> - описание (Наша фирма строит великолепные дома из кирпича) < meta http-equiv=" Content-Type" content=" text/html; charset=windows-1251" /> - сообщает какую кодировку использовать и тип документа - документ текстовый содержащий html правила. < meta http-equiv=" Content-Style-Type" content=" text/css" /> - задается язык таблиц стилей - документ текстовый содержащий css правила. < meta http-equiv=" pragma" content=" no-cache" /> - не разрешает браузеру кэшировать содержимое страницы. Для разработки хорошо, потому что изображения в КЭШе браузера не сохраняются. < meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере < head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv. < link rel=" stylesheet" type=" text/css" href=" style/style.css" /> Указывает на то, где находится CSS файл. < body> В этом тэге начинается написание страницы, это тело всего документа. < div id=" wrapper" > < div id=" header" > < div class=" helper" > < /div> < /div> < div id=" content" > < div class=" helper" > < /div> < /div> < div id=" footer" > < div class=" helper" > < /div> < /div> < /div> Многие страницы сайта сделаны аналогично главной. Код одной из них описан ниже: Рис. 2.2 Заголовок в верхней части главной страницы
Код, комментарии: < div class=" right about-company" > - блок с текстом О компании & laquo; Рост& raquo; - текст: О компании «Рост», где & laquo; - левая кавычка, & raquo; - правая кавычка < /div> - конец блока /********************************************/ .about-company,.uslugi-zag,.uslugi-zag2 { - стиль используется еще для двух элементов color: #8c9fb1; - цвет текста font-size: 20px; - размер текста margin-right: 202px; - внешний отступ справа margin-top: 38px; - внешний отступ сверху position: relative; - позиционирование z-index: 5; - слой; чем выше слой, тем он виднее. } < div class=" company-txt" > - блок, в котором располагается текст страницы < p> Наша организация - динамично развивающаяся компания… < p> < br/> - текст заключен в тэг параграфа, < br/> - переход на новую строку. < p> Мы осуществляем весь комплекс работ при проведении строительства Вашего …< /p> < br/> < p> Качество предоставляемых услуг - наша основная задача. Заказывая у нас… < p> < br/>
Рис. 2.3 Вид web-страницы строительной компании (главная → О компании)
< p> При производстве работ мы используем только сертифицированные и …< p> < br/> < p> Ремонтно-строительные и отделочные работы, выполненные специалистами нашей < /p> < br/> < br/>
/*************************************************************/
.company-txt,.uslugi-txt,.decor-gips-txt{ - стиль еще используется у двух элементов color: #8c9fb1; width: 790px; padding: 10px 8px 8px; - внутренний отступ у блока 10 пикселей сверху 8 пикселей слева и справа и 8 пикселей снизу font-size: 17px; } Рис. 2.4 Ссылка для перехода на следующую страницу сайта < div class=" dop-spisok" > - блок в котором располагается ссылка для перехода на следующую страницу < a href=" o_maloet_i_dacha.html" > Наша специализация - малоэтажное строительство! О дачах и коттеджах & gt; & gt; < /a> - ссылка < /div> < /div> /**************************************************************/ .dop-spisok ul{ - стиль применяется к тэгу UL position: absolute; - позиционирование абсолютное, то есть блок исключается из основного потока right: 1px; - справа 1 пиксели отодвигается top: 1px; - сверху на 1 пиксель отодвигается color: #2e6c8a; - цвет width: 150px; - ширина 150 пикселей text-align: left; - выравнивание текста по левому краю } .dop-spisok a{ - тэг применяется к ссылкам color: #2e6c8a; - цвет font-size: 13px; - размер шрифта text-decoration: none; - подчеркивание ссылок отключено } .dop-spisok a: hover,.next a: hover{ - при наведении на ссылку color: #8C9FB1; - цвет } Рис. 2.5 Ссылка для перехода на главную страницу сайта
< div class=" back" > < ul> - блок < li> < a href=" index.html" > Вернуться на главную< /a> < /li> - ссылка < /ul> < /div> < /div> < /div> /****************************************************/ .back ul,.back a{ - стили для ссылки и блока color: #2E6C8A; - цвет text-decoration: none; - подчеркивание ссылки нет font-size: 17px; - размер шрифта font-weight: bold; - шрифт жирный } .back{ position: absolute; - абсолютная позиция bottom: 60px; - снизу 60 пикселей right: 60px; - справа 60 пикселей padding: 20px; - внутренние отступы 20 пикселей background: url(../pic/pl.png) repeat; - фоновая картинка border-radius: 20px; - скругляет углы (так как технология новая, то не во всех браузерах скругляет. Использован CCS3. Современные браузеры выводят так, как требуется.) z-index: 5; - слой } Код страницы «Карта сайта» рассмотрим отдельно. Его описание расположено ниже. < div style=" padding-top: 0px; " class=" decor-kamen-txt" > - общий блок < ul class=" karta-line1" > - список общий и первого уровня < li> < a href=" o_kompanii.html" > О компании< /a> < /li> - элемент списка первого уровня < ul class=" karta-line2" > - список второго уровня < li> < a href=" o_maloet_i_dacha.html" > Малоэтажное строительство - о дачах и коттеджах< /a> < /li> - элемент списка второго уровня < ul class=" karta-line3" > - список третьего уровня < li> < a href=" activnoe_stroitelstvo.html" > Активно ли ведется продажа малоэтажных строений? < /a> < /li> - элемент списка третьего уровня < ul class=" karta-line4" > - список четвертого уровня Рис. 2.6 Отображение всех ссылок, расположенных на странице «Карта сайта» < li> < a href=" vigodnoe_reshenie.html" > Выгодные решения для дачников< /a> < /li> - элемент списка четвертого уровня < /ul> < /ul> < /ul> < li> < a href=" project.html" > Проекты< /a> < /li> - элемент 1 уровня < li> < a href=" uslugi.html" > Услуги< /a> < /li> - элемент 1 уровня < ul class=" karta-line2" > < li> < a href=" design_interier.html" > Дизайн интерьеров< /a> < /li> - элемент 2 уровня < ul class=" karta-line3" > < li> < a href=" disign_kvartir_ofis.html" > Дизайн интерьеров при ремонте квартиры и офиса< /a> < /li> - элемент 3 уровня < li> < a href=" disign_komnata_deti.html" > Дизайн комнаты для двух детей< /a> < /li> - элемент 3 уровня < li> < a href=" disign_landshaft_dacha.html" > Ландшафтный дизайн на даче< /a> < /li> - элемент 3 уровня < li> < a href=" disign_exclusiv_otdelka.html" > Эксклюзивная отделка< /a> < /li> - элемент 3 уровня < li> < a href=" disign_speshit_na_pomosh.html" > Дизайнер спешит на помощь! < /a> < /li> - элемент 3 уровня < /ul> < li> < a href=" remont.html" > Ремонт и отделка< /a> < /li> - элемент 2 уровня < ul class=" karta-line3" > < li> < a href=" decor_gips.html" > Декор из гипса и искуственного камня< /a> < /li> - элемент 3 уровня < ul class=" karta-line4" > < li> < a href=" decor_gips_v.html" > Гипсовый декор< /a> < /li> - элемент 4 уровня < li> < a href=" decor_kamen.html" > Лепнина из искуственного камня< /a> < /li> - элемент 4 уровня < /ul> < /ul> < li> < a href=" maloet_stroitelstvo.html" > Малоэтажное строительство< /a> < /li> - элемент 2 уровня < /ul> < li> < a href=" stroi_material.html" > Материалы< /a> < /li> - элемент 1 уровня < ul class=" karta-line2" > < li> < a href=" material_peschanik.html" > Наша компания предлагает следующую продукцию< /a> < /li> - элемент 2 уровня < ul class=" karta-line3" > < li> < a href=" bruschatka_peschanik.html" > Песчаник и брусчатка< /a> < /li> - элемент 3 уровня < /ul> < /ul> < li> < a href=" statya_o_stroit.html" > Статьи о строительстве< /a> < /li> - элемент 1 уровня < ul class=" karta-line2" > < li> < a href=" remont_kvartir.html" > Какие услуги по ремонту квартиры сейчас наиболее востребованы? < /a> < /li> - элемент 2 уровня < li> < a href=" derev_da4a.html" > Чем хорош деревянный дачный дом? < /a> < /li> - элемент 2 уровня < ul class=" karta-line3" > < li> < a href=" derevo_kak_stroi_material.html" > Дерево - как строительный материал< /a> < /li> - элемент 3 уровня < /ul> < li> < a href=" design_kvartir.html" > Как заказывать дизайн проект квартиры, и каким он должен быть? < /a> < /li> - элемент 2 уровня < /ul> < /ul> < /div> /****************************************************************/ .karta-line1 a{ color: #2E6C8A; font-size: 20px; font-weight: bold; text-decoration: none; } .karta-line2,.karta-line2 a{ font-size: 17px; font-weight: normal; - текст не жирный margin-left: 10px; - внешний отступ слева 10 пикселей } .karta-line3,.karta-line3 a{ font-size: 15px; font-weight: normal; margin-left: 10px; } .karta-line4,.karta-line4 a{ font-size: 12px; font-weight: normal; margin-left: 10px; } .karta-line1 a: hover{ text-decoration: underline; }
|