Переносим макет сайта в HTML



Если вы читали Основные этапы создания сайтов, то знаете, что после этапа создания макета сайта получившуюся картинку нужно перенести в HTML. Этому процессу и посвящены эти два урока.

Сайт, на котором вы сейчас находитесь, мог бы иметь и другой дизайн. Предположим, у нас есть вот такой макет:



Эту картинку нам надо перенести в HTML. Попробуем сделать так называемый фиксированный дизайн, взяв за основу таблицу. Поэтому наложим на эту картинку сетку таблицы, чтобы разделить на структурные элементы, например, так:


Целиком наша картинка имеет размеры 800 х 600 пикселов, значит и наша таблица-каркас будет иметь размеры 800 х 600 пикселов. Далее, мы разделили нашу картинку на 7 частей, на эти же 7 ячеек мы разделим и нашу таблицу. Первую часть нашей картинки оставим без изменений, а в остальных частях удалим текст (его мы вернем при помощи HTML).

Теперь надо подготовить наши 7 картинок, например, в программе ImageReady (как это сделать читайте на странице Подготовка графики с помощью ImageReady). Для удобства дадим им имена в виде im_01.gif - im_07.gif и сложим в папку с названием im.

Теперь создадим папку site на любом диске компьютера, поместим в нее папку im с картинками и сюда же будем складывать все наши страницы.

Создайте страницу index.html с каркасом нашей таблицы:
<html> <head> <title>Как сделать сайт</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <table width="800" height="600" border="0" cellpadding="0" cellspacing="0"> </table> <!-- Old_YandexMetrika --><!-- Old_YandexMetrika --><!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter36680855 = new Ya.Metrika({ id:36680855, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, ut:"noindex" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/36680855?ut=noindex" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter36680855 = new Ya.Metrika({ id:36680855, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, ut:"noindex" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/36680855?ut=noindex" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </body> </html>
Сейчас наша таблица выглядит так:

1 2 3
4
5
6
7


Зададим ширину и высоту каждой ячейки, а фоном сделаем подготовленные картинки, уберем рамку у таблицы (border="0").

Чтобы задать размеры ячеек, нужно знать размеры картинок, которые в них будут располагаться. Наша картинка im_01.gif имеет размер 352 х 31 пикселов, картинка im_02.gif имеет размер 398 х 31 пикселов и т.д. Именно эти размеры мы и укажем в качестве размеров ячейки:
<html> <head> <title>Как сделать сайт</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <table width="800" height="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="352" height="31" background="im/im_01.gif"> </td> <td width="398" height="31" background="im/im_02.gif"> </td> <td rowspan="3" width="50" height="183" background="im/im_03.gif"> </td> </tr> <tr> <td colspan="2" width="750" height="112" background="im/im_04.gif"> </td> </tr> <tr> <td colspan="2" width="750" height="40" background="im/im_05.gif"> </td> </tr> <tr> <td colspan="3" width="800" height="366" background="im/im_06.gif"> </td> </tr> <tr> <td colspan="3" width="800" height="51" background="im/im_07.gif"> </td> </tr> </table> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter36680855 = new Ya.Metrika({ id:36680855, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, ut:"noindex" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/36680855?ut=noindex" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter36680855 = new Ya.Metrika({ id:36680855, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, ut:"noindex" }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/36680855?ut=noindex" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </body> </html>
Теперь наша страница выглядит так, как мы и хотели:


Сейчас наша страница прижимается к левому краю, исправим это с помощью параметра align="center" тега <table> и зададим фоновый цвет окна параметром bgcolor тега <body>.
... <body bgcolor="#477B1D"> <table width="800" height="600" border="0" cellpadding="0" cellspacing="0" align="center"> ...
Отлично, мы перенесли нашу картинку в HTML, остался один нюанс. Сейчас фоном ячейки, где будет контент, является картинка белого цвета (im_06.gif). Но картинка занимает место и при этом не несет никакой информации, поэтому разумно ее удалить, а белый цвет задать параметром bgcolor.
... <tr> <td colspan="3" width="800" height="366" bgcolor="#FFFFFF"> </td> </tr> ...
На следующем уроке зададим слоган, пункты меню и создадим остальные страницы сайта.



Следующий урок Вернуться в раздел