Ћекции.ќрг


ѕоиск:




 атегории:

јстрономи€
Ѕиологи€
√еографи€
ƒругие €зыки
»нтернет
»нформатика
»стори€
 ультура
Ћитература
Ћогика
ћатематика
ћедицина
ћеханика
ќхрана труда
ѕедагогика
ѕолитика
ѕраво
ѕсихологи€
–елиги€
–иторика
—оциологи€
—порт
—троительство
“ехнологи€
“ранспорт
‘изика
‘илософи€
‘инансы
’ими€
Ёкологи€
Ёкономика
Ёлектроника

 

 

 

 


уроков качественной html-верстки

Ќаверн€ка вы часто видели советы по верстке, собранные в виде длинного файла вопросов и ответов. Ёто очень полезна€ информаци€, однако html-страницу обычно приходитс€ верстать "от" и "до".  огда € начинала заниматьс€ web-дизайном, € смотрела исходные коды других сайтов и пыталась в них разобратьс€. Ќо зачем подсматривать? ѕеред вами - подробно разобранный пример одной верстки по типичному шаблону.

HTML верстка. ”рок 1: —оздание "каркаса" страницы

»так, у нас есть макет страницы (допустим, в формате Photoshop). Ќа рисунке - его уменьшенное изображение (чтобы посмотреть макет в полную величину, кликните на рисунке). “еперь откройте html-страницу, которую мы должны сверстать из этого макета. ќна выгл€дит абсолютно одинаково в Internet Explorer, Opera и Firefox. ѕопробуйте свернуть окно до размеров 640х480, а потом развернуть на весь экран.  ак видите, вс€ страница хорошо раст€гиваетс€, даже формы ввода:) “еперь отключите изображени€ в вашем браузере - страница осталась вполне читаема.

¬ уроках, которые вы сейчас читаете, мы подробно рассмотрим технологию такой верстки, чтобы html-страница:

  • не зависимо от разрешени€ экрана, браузера (возьмем самые попул€рные: IE, Firefox, Opera), темы оформлени€ Windows и настроени€ вебмастера, выгл€дела бы одинаково - как на макете;
  • была "читаемой" даже при отключенной графике;
  • имела легкий, удобный дл€ редактировани€ html-код;
  • раст€гивалась на полную ширину экрана.

—оздайте файлы index.html и style.css. ¬ процессе верстки мы постараемс€ большую часть форматировани€ вынести в style.css, т.к.:

  • размер html-страниц будет меньше;
  • если вы в будущем захотите отредактировать дизайн сайта, вам не понадобитс€ мен€ть все html-файлы - только style.css.

Ќаметим "каркас" нашей страницы. ”добно делать его в виде таблицы 100%-й высоты, разделенной на 3 горизонтальные области - Top, Text и Bottom. Top и Bottom имеют фиксированную высоту, а €чейка Text раст€гиваетс€ по высоте на всю оставшуюс€ часть экрана. “аким образом, даже когда на странице мало или совсем нет текста, Bottom всегда находитс€ там, где ему положено - внизу.

ћы сделаем разметку немного сложнее, т.к. нам нужно, чтобы блоки Search, News, Copyright были равны по ширине. Ћучший способ этого добитьс€ - поместить их в €чейки таблицы, расположенные одна над другой.

¬от получившийс€ html-код (€ специально поставила параметр border="1" в теге <table> и написала внутри каждой €чейки ее название, чтобы мы удостоверились, что сделали разметку правильно. ѕотом все это нужно будет удалить.

index.html
<html><head> <title>Layout</title> <link href="style.css" rel="stylesheet" type="text/css"></head><body><table class="main" border="1"><tr> <td class="top" colspan="2">top</td></tr><tr> <td class="search">search</td> <td class="topmenu">topmenu</td></tr><tr> <td class="news">news</td> <td class="text">text</td></tr><tr> <td class="copyright">copyright</td> <td class="bottommenu">bottommenu</td></tr></table></body></html>
style.css
table.main { width: 100%; height: 100%;}td.top {}td.search {}td.topmenu {}td.news { width: 30%;}td.text { width: 70%; height: 100%;}td.copyright {}td.bottommenu {}

ƒл€ каждой €чейки был создан класс в style.css. ѕосмотрите на первый рисунок. ѕока эти классы пустые, наша таблица в браузере не не очень похожа на ту, котора€ на макете. „тобы она выгл€дела так, как на втором рисунке, необходимо внести еще несколько изменений.

1) „тобы не было промежутков между таблицей и границами экрана, пишем:

html, body { margin:0px; padding:0px;}

2) „тобы убрать зазоры между €чейками, добавл€ем в свойства таблицы border-collapse: collapse (это аналог html-параметра cellspacing="0").

table.main { border-collapse: collapse;}

3) „тобы убрать отступы внутри €чеек, пишем:

td { padding: 0px;}

“акже нужно прописать несколько общих параметров, которые будут использоватьс€ по умолчанию:

5) ÷вет фона дл€ <body> и элементов форм.  огда фон белый, об этом часто забывают. “огда у пользователей, установивших какую-нибудь экзотическую тему оформлени€ Windows, некоторые €чейки могут оказатьс€, например, зелеными:)

6)  огда больша€ часть текста будет написана одним шрифтом (в нашем случае - Tahoma 11px, черный), имеет смысл указать его сразу дл€ всех €чеек и элементов форм.

7) ѕо умолчанию текст и изображени€ располагаютс€ (вертикально) в середине €чейки. ќбычно удобнее, чтобы они подт€гивались к верхнему краю. ƒл€ этого нужно указать vertical-align: top дл€ всех €чеек.

body, input, select, textarea { background-color: #ffffff;}td, input, select, textarea { font-family: Tahoma; font-size: 11px; color: #000000; vertical-align: top; }

 аркас готов. ѕосмотрите html-страницу, а также полный текст файлов index.html и style.css. кассовые аппараты

index.htm<html><head> <title>Layout</title> <link href="style.css" rel="stylesheet" type="text/css"></head><body><table class="main" border="1"><tr> <td class="top" colspan="2">top</td></tr><tr> <td class="search">search</td> <td class="topmenu">topmenu</td></tr><tr> <td class="news">news</td> <td class="text">text</td></tr><tr> <td class="copyright">copyright</td> <td class="bottommenu">bottommenu</td></tr></table></body> </html> style.css html, body { margin:0px; padding:0px;}body, input, select, textarea { background-color: #ffffff;}td, input, select, textarea { font-family: Tahoma; font-size: 11px; color: #000000; vertical-align: top; }td { padding: 0px;}table.main { width: 100%; height: 100%; border-collapse: collapse;}td.top {}td.search {}td.topmenu {}td.news { width: 30%;}td.text { width: 70%; height: 100%;}td.copyright {}td.bottommenu { }

 



<== предыдуща€ лекци€ | следующа€ лекци€ ==>
∆елта€ лихорадка | „етвЄртое
ѕоделитьс€ с друзь€ми:


ƒата добавлени€: 2015-05-06; ћы поможем в написании ваших работ!; просмотров: 411 | Ќарушение авторских прав


ѕоиск на сайте:

Ћучшие изречени€:

¬аше врем€ ограничено, не тратьте его, жив€ чужой жизнью © —тив ƒжобс
==> читать все изречени€...

2024 - | 1984 -


© 2015-2024 lektsii.org -  онтакты - ѕоследнее добавление

√ен: 0.01 с.