Верстка основного каркаса сайта
Подготовим PHP-проект к разработке.Выполним подготовительные действия для работы с проектом.1
Откроем два файла нашего проекта, которые понадобятся для верстки:
index.php и puh.css (см. рис. 7.1):
Рис. 7.1
Периодически мы будем переключаться через закладки сверху(см. рис. 7.1)между файлами index.phpи puh.css.Файл index.php–это главная страница нашего сайта, в нем мы будем записывать теги HTML. Файл puh.css–это CSS-стили, которые будут применяться к тегам HTML.
Добавим к нашему проекту новую папку, в которой будут храниться картинки для нашего сайта. Для этого выделим заголовок проекта puh, нажмем правую клавишу мыши и в меню выберем New, Папка (см. рис. 7.2):
Рис. 7.2
Далее вводим имя папки"img"и нажимаем кнопку"Готово" (см. рис. 7.3):
Рис. 7.3
В результате к проекту добавится новая папка img (см.рис. 7.4):
Рис. 7.4
В этой папке будут размещаться файлы картинок, которые будут использоваться в нашем проекте. Напомним,что все файлы сайта находятся в папкеwww на виртуальном диске (см. рис.7.5):
Рис. 7.5
Все файлы и папки,которые добавляются из Eclipseдля PHP, создаются на диске.Сайт может содержать большое количество различных файлов (файлы-изображения,PHP-файлы, CSS-файлы и т.д. ), и если их все разместить в одну папку, то работать будет неудобно. Именно поэтому используют следующий подход: для каждого типа файлов создают отдельную папку: для файлов CSS одну папку, дляPHP-файлов другую, для изображений третью и т.д. Наш сайт будет не очень большого размера, в нем будет всего один файл CSSи три файла PHP, поэтому мы разместили их в одну папку. Файлов картинок будет много, поэтому мы создали для них отдельную папку img.
По примеру папки для картинок в более крупном проекте можно создать и другие папки, например, css –для CSS, php–для PHP и т.д.
Вспомним!!!После разработки PHP сайта он, как правило, переносится на хостинг под управлением операционной системы Linux, где регистр букв в именах файлов и папок имеет значение!
Внимание!!!Если вы не являетесь дизайнером и не любите рисовать, не следует увлекаться дизайном при создании сайта в одиночку. В этом случае лучше создать простой сайт, который не будет отталкивать пользователя. За пример можно брать сайты, которые имеют приятный и удобный вид. Изучайте другие сайты, но не копируйте дизайн и материалы – это может стать нарушением авторских прав!
Перед тем, как приступить к верстке веб-страницы,необходимо продумать ее дизайн –внешний вид.Создание дизайна страницы –это отдельное мастерство, которое требует таланта и навыков. Когда сайт разрабатывается в веб-студии, над дизайном работают профессиональные дизайнеры, версткой занимаются верстальщики, а программированием сайта веб-программисты.При разработке сайта в одиночку все эти части возлагаются на одного человека.
Дизайн является важной составляющей любого сайта! Плохой дизайн будет отталкивать посетителей –пользователь может сразу закрыть сайт и больше никогда к нему не вернуться.
Как правило, страница состоит из следующих частей (некоторые части могут отсутствовать):
шапка–верхняя часть страницы, где размещается логотип сайта и другая информация;
верхнее горизонтальное меню –это главное меню с основными разделами сайта;
левая и правая боковина –это полосы справа и слева от центральной части страницы, где может находиться вспомогательное меню и вход в личный кабинет пользователя сайта;
центральная часть –центральная часть страницы, где отображается основной текстовый материал;
подвал –нижняя часть страницы, где отображается информация о разработчиках сайта.
Это стандартные составляющие страницы, которые можно взять за основу при создании страницы. В зависимости от предназначения сайта основные блоки могут быть другими.
Рис. 7.6
Наша страница будет иметь каркас, как на рис.6. Он будет фиксированным.Шапка, верхнее горизонтальное меню, левая и правая боковины, подвал –будут всегда неизменными, а центральная часть будет изменяться в зависимости от выбранного пункта меню. На нашей странице центральная часть будет динамической, которая изменяется программным образом.
После того, как общая схема страницы нарисована, пришло время подобрать нужные изображения, которые будут использоваться для оформления. Для обработки изображений следует использовать графический редактор,например всем известный Photoshop.При помощи графического редактора можно изменить размеры изображений, вырезать нужные фрагменты,составить изображение из различных фрагментов. Сами изображения можно найти в интернете или нарисовать самостоятельно. В некоторых случаях это могут быть фотографии.
Внимание!!!Любое изображение, которое отображается на экране, можно получить в качестве снимка экрана. Для этого нажмите на клавиатуре клавишу "Print Screen" (Prt Sc). При нажатии на эту клавишу снимок экрана помещается в буфер обмена. Далее необходимо открыть в любом графическом редакторе новый лист для изображения и нажать комбинацию клавиш - вставить из буфера обмена. После этого необходимый фрагмент экрана появится в графическом редакторе, где его можно отредактировать и разместить на веб-странице.
При созданииизображений для страницы также используются специальные приложения -шаблонизаторы.В этих программах можно подобрать различные изображения для фона, элементов страницы и др. Многие шаблонизаторы являются платными.
Мы будем создаватьстатичнуюстраницу, размеры которой будут фиксированными по ширине. При выборе ширины статичной страницы необходимо учитывать следующее: пользователь при открытии страницы в браузере должен увидеть ее полностью по ширине, чтобы ему не пришлось пользоваться горизонтальной прокруткой страницы. Прокрутка страницы по ширине раздражает пользователя!Из этих соображений необходимо выбирать ширину, рассчитанную на разрешение 1024 пикселяпо ширине.
Конечно, среди пользователей нашего сайта будут такие, у кого разрешение экрана 800x600, но их будет мало,и они привыкли к прокрутке по ширине в браузере.
Также нужно учесть, что в браузере имеется боковая линия прокрутки–для прокрутки страницы вверх и вниз, поэтому из числа 1024 необходимо вычесть примерную ширину линии прокрутки с небольшим запасом.Возьмем ширину 980пикселей. На мобильных устройствах при открытии сайта ширина страницы автоматически подстраивается по ширине экрана, поэтому выбранная нами ширина вполне подойдет и для мобильных устройств.
Для верстки каркаса нашей страницы мы воспользуемся уже готовыми изображениями, которые созданы с учетом ширины страницы в 980пикселей. Основные форматы изображений: PNG, JPEG (JPG), GIF.Мы будем использовать все изображения в формате PNG.
У нас есть пять изображений в формате PNG:
fon.png –картинка для фона страницы;
shapka.png –картинка для шапки страницы;
menu.png –картинка для фона верхнего горизонтального меню;
centr.png –картинка для фона центральной части и боковин;
podval.png –картинка для подвала страницы.
Теперь поместим все эти изображения в папку imgнашего проекта. Выделим все изображения в папке (см. рис.7.7):
Рис. 7.7
Скопируем их в буфер обмена (<Ctrl+С>)и перейдем в Eclipseдля PHP. Здесь выделим папкуimg (см. рис. 8) и вставим сюда изображения (<Ctrl+V>).
Рис. 7.8
Теперь, если развернуть содержимое этой папки, там можно найти пять файлов (см. рис. 7.9):
Рис. 7.9
Теперь приступаем к верстке.
Создадим фон нашей страницы. Для этого перейдем в файл puh.css и добавим CSS-код для фона страницы:
@CHARSET "UTF-8";
body
{
/*Фон страницы*/
background-color:white;
background-image:url('img/fon.png');
background-repeat:repeat;
background-attachment:fixed;
background-position:topleft;
}
Мы добавили селектор по тегу body и с помощью пяти CSS-свойств создали фон страницы. Все эти свойства нам знакомы. Обратите внимание, что путь к изображению указан вместе с папкой, в которой находятся картинки:
background-image: url('img/fon.png');
Сохраним проект, откроем в браузере ссылку http://puh/index.phpи увидим фон страницы (см. рис. 7.10):
Рис. 7.10
Ниже добавим еще четыре свойства в селектор по тегу body:
body
{
/*Фон страницы*/
background-color:white;
background-image:url('img/fon.png');
background-repeat:repeat;
background-attachment:fixed;
background-position:topleft;
/*Размеры*/
width:100%;
height:100%;
/*Отступы и поля*/
margin:0px;
padding:0px;
}
Свойства width иheightсо значением 100% указывают, что наш фон будет занимать все пространство по ширине и высоте.
Свойства margin иpadding cо значением в 0 пикселей указывают,что содержимое страницы будет находиться без всяких отступов и полей от границ браузера.
Важно!!!Не забывайте про CSS-справочник, который должен находиться открытым в этот момент. Все используемые свойства можно смотреть в справочнике, чтобы они лучше запоминались, а их смысл был более понятен. Если не совсем понятно, как работает какое-либо CSS-свойство, меняйте его значение на другое и смотрите на изменения в браузере.
Перейдем на страницуindex.php и начнем записывать код внутри тегов body (см. рис. 7.11):
Рис. 7.11
Для создания основного каркаса нашей страницы мы воспользуемсятабличной версткой. При табличной верстке сначала следует разбить страницу на основные блоки. В ячейки таблицы будут вкладываться другие таблицы, которые будут разбивать ячейку на более мелкие части. Уровень вложенности таблиц должен быть не более трех, иначе может снизиться скорость загрузки страницы браузером!
Добавим первую таблицу:эта таблица будет состоять из четырех строк по одной ячейке в каждой строке,ширина таблицы и ширина каждой ячейки будет 980 пикселей. Пока происходит разработка толщина рамки таблицы делается равной 1 для того, чтобы разработчик видел границы блоков веб-страницы.Когда разработка страницы будет закончена–рамку можно убрать и сделать равной 0.
Добавим следующий код внутри тегов body:
<center>
<table border="1" cellpadding="0" cellspacing="0" width="980">
<tr valign="top">
<td valign="top" width="980">
Шапка
</td>
</tr>
<tr valign="top">
<td valign="top" width="980">
Верхнее горизонтальное меню
</td>
</tr>
<tr valign="top">
<td valign="top" width="980">
Центральная часть
</td>
</tr>
<tr valign="top">
<td valign="top" width="980">
Подвал
</td>
</tr>
</table>
</center>
Посмотрим на результат в браузере – на странице появилась таблица из четырех строк, а каждая строка состоит из одной ячейки. (см. рис. 7.12):
Рис. 7.12
В каждой ячейке записано название блока страницы, который будет вставлен в эту ячейку.
Рассмотрим подробно записанный выше программный код:
<center>
Tег centerцентрирует все,что раположено между открывающим и закрывающим тегом (<center>< / center>).В нашем случае вся таблица будет располагаться в центре веб-страницы.
Тег table–это тег таблицы, все содержимое таблицы находится между открывающим и закрывающим тегами.
Атрибут border –толщина рамки.
Атрибуты cellpadding иcellspacing обязательно нужно сделать нулевыми, иначе ячейки таблицы не будут прилегать друг к другу плотно,вследствие чего появятся зазоры между ячейками.
Атрибут width –ширина таблицы.
<table border="1" cellpadding="0" cellspacing="0" width="980">
Тег tr–это строка таблицы, между открывающим и закрывающим тегами строки находятся ячейки таблицы.
Атрибут valign –выравнивание содержимого строки по вертикали, в данном случае содержимое будет "прижиматься" к верхней части:
<tr valign="top">
Тег td–тег ячейки таблицы, все, что находится между открывающим и закрывающим тегами, будет находиться внутри ячейки таблицы –в данном случае это текст.
Атрибут valign –выравнивание содержимого строки по вертикали, содержимое будет прижиматься к верхней части.
Атрибут width –ширина ячейки. В данном случае ячейка занимает всю ширину таблицы:
<td valign="top" width="980">
Шапка
</td>
Таким образом, наш программный код создает таблицу, состоящую из четырех строк, в каждой строке по одной ячейке, а вся таблица выравнивается по центру страницы.
Вместо надписей мы будем вставлять изображения. Начнем с шапки: для этих целей в папке img находится изображение shapka.png (см. рис.7.13):
Рис. 7.13
Логотипом нашего сайта будет "Пчела с баночкой меда", что отражает тематику нашего сайта и деятельность компании.Рядом с логотипом находится наименование компании. Поместим эту картинку в самую верхнюю ячейку вместо надписи "Шапка". Как правило,можно щелкнуть на логотип сайта и перейти на его домашнюю страницу, поэтому мы сделаем картинку еще и ссылкой, получится код:
<tr valign="top">
<td valign="top" width="980">
<a href="index.php" target="_self">
<img src="img/shapka.png" border="0" width="980" height="150" />
</a>
</td>
</tr>
Посмотрим на результат в браузере –картинка вставилась в верхнюю ячейку таблицы (см.рис. 7.14):
Рис. 7.14
Щелкните на картинку– осуществится переход на домашнюю страницу. Рассмотрим программный код.
<a href="index.php" target="_self">
Тег aпозволяет добавить ссылку.Его атрибут href содержит адрес перехода, атрибутtarget –вариант перехода (напомним, если значение атрибута –_self, то страница откроется в этом же окне,если_blank, то откроется новое окно/закладка в браузере).
Все, что находится внутри открывающего и закрывающего тегаa, является ссылкой –это может быть текст или картинка (как в нашем случае).
<img src="img/shapka.png" border="0" width="980" height="150" />
Тег img–это изображение. Атрибут src –путь к файлу изображения,border –толщина рамки вокруг картинки, лучше ее сделать равной 0. Атрибуты width, height –ширина и высота картинки. Картинка shapka.pngимеет размеры 980x150 после создания в графическом редакторе.
У таблицы есть одно важное свойство: если в ячейку таблицы вставлена картинка, то ячейка растянется до размеров картинки по ширине и высоте.Ширину ячейки мы указали в атрибуте ячейки, а высота получилась автоматически по высоте картинки.
Теперь добавим картинку для подвала, для этих целей в папке img находится изображение podval.png (см. рис.7.15)
Рис. 7.15
На этом изображении указано название проекта и год его создания. Вместо надписи "Подвал" в самую нижнюю ячейку добавим изображение. Изображение подвала не будет являться ссылкой, код будет выглядеть так:
<tr valign="top">
<td valign="top" width="980">
<img src="img/podval.png" width="980" height="50" border="0" />
</td>
</tr>
В отличие от шапки данный тег img не вложен в тег a –ссылку. Посмотрим на результат в браузере. Если код не содержит ошибок, то страница будет выглядеть так (см. рис. 7.16):
Рис. 7.16
Далее поработаем с верхним горизонтальным меню. Само меню с его пунктами мы пока создавать не будем, но добавим фон, на котором будут отображаться пункты меню. В качестве фона будем использовать изображение menu.png из папки img (см. рис. 7.17):
Рис. 7.17
Размер этого изображения 980x38 (чтобы узнать размеры изображения нужно навести курсор мыши на файл изображения, хранящийся на локальном компьютере, появится подсветка с информацией о размерах) (см.рис. 7.18):
Рис. 7.18
Для размещения изображений шапки и подвала мы использовали тег img. Но для того, чтобы разместить изображения для меню, придется использовать другой метод. Изображение должно быть фоном, на котором будут располагаться пункты меню.
Вместо надписи "Верхнее горизонтальное меню"во вторую ячейку таблицы добавим код:
<tr valign="top">
<td valign="top" width="980">
<div id="vmenu">
</div>
</td>
</tr>
Мы добавили тег div –блок. В качестве атрибутаid указали значение vmenu. Данное значение будет использовано в CSS для селектора по идентификатору. Перейдем в файл puh.css и в самом низу добавим:
#vmenu
{
/*Отступы и поля*/
margin:0px;
padding:0px;
/*Размеры*/
width:980px;
height:38px;
/*Фон меню*/
background-image: url('img/menu.png');
background-repeat: repeat;
background-attachment: fixed;
background-position: topleft;
}
Посмотрим на результат в браузере –появился фон для меню (см. рис. 7.19):
Рис. 7.19
Подробно рассмотрим программный код.
#vmenu
{
}
Селектор по идентификатору vmenu указывает CSS-свойства для тега с данным атрибутомid:
/*Отступы и поля*/
margin:0px;
padding:0px;
Отступы и поля обнуляем.Это делается на тот случай, если браузер по умолчанию использует не нулевые отступы и поля. В таком случае можно наблюдать зазоры или смещение элементов страницы.
/*Размеры*/
width:980px;
height:38px;
Указываем такие же размеры по ширине и высоте, как у картинки фона - 980x38.
Блок div–это прямоугольная область, внутрь которой можно добавлять другие элементы:текст, изображения, кнопки и т.д. Чтобы все было ровно, размеры этой области должны точно совпадать с размерами изображения для фона.
/*Фон меню*/
background-image: url('img/menu.png');
background-repeat: repeat;
background-attachment: fixed;
background-position: topleft;
Данные свойства настраивают фон, они уже знакомы нам.Обратите внимание, что свойство background-repeat установлено в значение repeat. Это означает, что изображение будет повторяться по ширине и высоте, если размер области фона больше размеров изображения.В нашем случае эффекта повторения мы не увидим, потому что области фона и размеры изображения равны.
Осталось разобраться с центральной частью веб-страницы. Напомним,что центральная часть будет состоять из двух боковин и центра. Для этого мы создадим еще одну вложенную таблицу внутрь ячейки. Вложенная таблица будет состоять из одной строки и трех ячеек в строке.Ширина таблицы будет 980пикселей.
С первой таблицей мы закончили, поэтому можно убрать рамки таблицы - в атрибут borderвпишем значение 0.
<center>
<table border="0" cellpadding="0" cellspacing="0" width="980">
Вместо надписи "Центральная часть"внутрь тега td, в ячейку добавим вложенную таблицу:
<table border="1" cellpadding="0" cellspacing="0" width="980" id="tab_centr">
<tr valign="top">
<td valign="top" width="200">
Левая боковина
</td>
<td valign="top" width="580">
Центр
</td>
<td valign="top" width="200">
Правая боковина
</td>
</tr>
</table>
Посмотрим на результат в браузере (см. рис. 20):
Рис. 7.20
Появилась вложенная таблица из трех ячеек. Ширина левой и правой боковины 200пикселей, ширина центральной части 580 пикселей. В сумме все три ячейки составят в ширину 980 пикселей, что совпадает с шириной главной таблицы. Многое похоже на первую таблицу, поэтому самый простой вариант –это скопировать и добавить готовый программный код, внеся в него некоторые изменения.
На этот раз строка всего одна, поэтому тег tr тожеодин, а все три ячейки (тегиtd) вложены в эту строку. В атрибуте width указана ширина каждой ячейки.
Пока происходит разработка этой таблицы атрибут border установлен на значении 1,чтобы на веб-странице было четко видно расположение ячеек таблицы. К тегу table был добавлен еще один атрибут - id со значением tab_centr:
<table border="1" cellpadding="0" cellspacing="0" width="980" id="tab_centr">
По данному идентификатору мы будем обращаться к таблице из CSS.
Важно!!!Разработка с данными примерами происходит в браузере Google Chrome! Для максимального соответствия с методическим пособием рекомендуется использовать браузер Google Chrome!
Перейдем в файл puh.css и в самом низу добавим код:
#tab_centr
{
/*Фон таблицы*/
background-image: url('img/centr.png');
background-repeat: repeat;
background-attachment: fixed;
background-position: topleft;
}
Данный код через идентификатор подключает к таблице фон(для фона используется файл centr.png).
После выполнения программного кода страница должна выглядеть так (см. рис.7.21):
Рис. 7.21
Верстка страницы производится в одном выбранном браузере.Когда верстка закончена, начинается проверка для других браузеров. В ходе такой проверки часто выявляются моменты, которые нужно исправить.
Если открыть текущий вариант сайта в браузере Internet Explorer, то возможно появится щель (см. рис.7.22):
Рис. 7.22
Если такая щель у вас появилась – не расстраивайтесь! После окончания верстки мы все обязательно поправим!
Итак, центральная часть нашей веб-страницы разбита на три блока. В центре будет выведен основной текст, левая и правая боковина будут служить для вспомогательных целей (например, для вставки дополнительных элементов веб-страницы).
На примере верстки основного каркаса страницы мы познакомились с принципами табличной верстки. По такой схеме можно создать страницу любого вида. Таблицы будут надежно связывать элементы страницы друг относительно друга.Кроме табличной верстки познакомились и с некоторыми принципами блочной верстки(div-верстки).Добавленный блок с помощью тега div настраивался при помощи CSS. Этим способом мы поместили на веб-страницу верхнее горизонтальное меню.
Теперь можно сказать,что верстка основного каркаса сайта закончена!
Мы будем изменять содержимое левой и правой боковин,центральной части, добавим пункты меню,но сам каркас будет оставаться неизменным.
Все составляющие страницы имеют следующие размеры по ширине:
Шапка, верхнее горизонтальное меню,подвал 980 пикселей;
Левая и правая боковина 200 пикселей;
Центральная часть 580пикселей.
Высота шапки, верхнего горизонтального меню и подвала также жестко зафиксированы. Высота центральной части будет изменяться в зависимости от объема вводимого в нее текста.
Данный каркас гарантирует расположение всех основных блоков страницы в задуманном виде благодаря табличной верстке.
Все внутреннее содержимое основных блоков мы будем создавать при помощи блочной верстки,которая является более современной!