Практическая работа №20
advertisement
«Инструментальные средства разработки программного обеспечения»
(профессиональный модуль)
МДК: «Web технологии»
3 курс
Практическая работа №20
Тема: «Верстка сайта. Разбивка шаблона на PHP-блоки»
Цель: научиться верстать страницу на основе блоков и стилей, а также
использовать php – блоки для создания шаблона.
Теоретическая часть
Введение
Блочная верстка сайта является наиболее распространенной среди остальных способов
компоновки Web-страниц. Разбивка макета на php – блоки позволяет статичный сайт сделать
динамическим путем создания шаблона на основе php – блоков.
Блочная верстка страницы
Верстка выполняется на основе каркаса с использованием языка верстки HTML и
таблицы стилей CSS. Технология выполнения блочной верстки рассматривалась в
Практической работе №7 «CSS. Контейнеры. Позиционирование».
Способы внешнего оформления содержимого сайта рассматривались в предыдущих
работах с таблицами стилей.
Итак, для начала создадим шаблон (каркас) сайта (Рис. 1.), который будет состоять из
шапки - блока div с id=header, содержимого сайта - блок div с id=content , правого сайдбара блок div с id=sideright и футера или подвала сайта - блок div с id=footer.
Рис.1. Каркас сайта
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>Хочу веб-сайт</title>
<meta name="title" content="Хочу веб-сайт" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="stylesite1.css" type="text/css"
media="screen, projection" />
</head>
<body>
<div id="main">
<div id="header"
<h1>Хочу веб-сайт</h1> </div>
</div><!-- #header-->
<div id="content">
Каждому пользователю интернета
рано или поздно наверняка приходила в голову мысль:
<strong >«Хочу веб-сайт!»</strong>.
Что ж,хочу вам сообщить что ничего невозможного в этом нет!<br
/>
;Этот сайт создан специально для тех, кто хочет
претворить это желание в жизнь.<br />
Я постараюсь собрать здесь советы и рекомендации по созданию сайта
с нуля,
строительству сайта из кирпичиков - как дома.<br />
</div><!-- #content-->
<div id="sideright">
<p align="center" Навигация</p>
<div class="coolmenu">
<a href="">Главная</a>
<a href="">Обучение</a>
<a href="">О нас</a>
</div>
</div><!--#sideRight -->
<div id="footer">©Сергей Зарубин 2011г.
</div><!-- #footer -->
</div><!-- #main -->
</body>
</html>
А чтобы у нас все красиво отображалось добавим стили:
2
*{
margin: 0;
padding: 0;
}
#main{
background-color:#fff;
width:600px;
margin:0 auto;
overflow:hidden;
}
#header {
height:70px;
background-color: #cc5050;
text-align: center;
}
#content{
background-color:#50cc50;
padding:5px;
width:400px;
float:left;
padding-bottom:32000px;
margin-bottom:-32000px;
}
#sideright{
background-color:#5050cc;
width:190px;
float:left;
padding-bottom:32000px;
margin-bottom:-32000px;
}
#footer{
background-color:#FFFF00;
padding:5px;
clear:both;
float:left;
width:100%;
text-align: center;
}
.coolmenu a {
font: bold 13px Verdana;
/*Шрифт текста*/
padding: 2px;
padding-left: 4px;
display: block;
color: #000000;
text-decoration: none;
border-bottom: 1px dotted #d0d0d0;
3
}
.coolmenu a:hover {
background-color: #cccccc;
color: #000000;
color: red; /*Цвет текста при наведении курсора*/
text-decoration: none;
}
.coolmenu a {
width: auto;
}
Разбивка на PHP – блоки
Итак, теперь когда наш шаблон сайта готов, разделим его на основные блоки и
сохраним их в отдельные файлы, с расширением PHP.
Cоздадим отдельный файл header.php, куда вставим следующий фрагмент нашего
шаблона:
<div id="header">
<div class="menu" >
<h1>Хочу веб-сайт</h1>
</div>
</div><!-- #header-->
Далее создадим файл с навигацией по сайту - sideright.php и вставим в него следующий код
нашего шаблона:
<div id="sideright">
<p align="center" >Навигация</p>
<div class="coolmenu">
<a href="">Главная</a>
<a href="">Обучение</a>
<a href="">О нас</a>
</div>
</div><!--#sideRight -->
Затем то же самое проделаем с контентом сайта - файл content.php:
<div id="content">
Каждому пользователю интернета
рано или поздно наверняка приходила в голову мысль:
<strong >«Хочу веб-сайт!»</strong>.
Что ж,хочу вам сообщить что ничего невозможного в этом нет!<br
/>
Этот сайт создан специально для тех, кто хочет
4
претворить это желание в жизнь.<br />
Я постараюсь собрать здесь советы и рекомендации по созданию сайта
с нуля,
строительству сайта из кирпичиков - как дома.<br />
</div><!-- #content-->
Ну а завершит все футер сайта - файл footer.php. В ставим в него следующий код нашего
шаблона:
<div id="footer">©Сергей Зарубин 2011г.
</div><!-- #footer -->
Создание php - шаблона
Итак, все блоки вынесены в отдельные файлы. Теперь их необходимо подключить к
основному шаблону (каркасу) нашего сайта. Создадим для этого файл index.php и
подключим к нему все созданные нами файлы:
Делается это при помощи команды include():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Хочу веб-сайт</title>
<meta name="title" content="Хочу веб-сайт" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="stylesite.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="main">
<?php
include ("header.php");
?>
<?php
include ("content.php");
?>
<?php
include ("sideright.php");
?>
<?php
include ("footer.php");
?>
</div>
</body>
</html>
5
Конструкция include предназначена для включения файлов в код сценария PHP во
время исполнения сценария PHP. <?php include("file.php");?> Где file.php – имя
подключаемого файла. Для того, чтобы добавить в HTML страницу php-код необходимо
прописать <?php, а для того, чтобы закрыть php-код - ?>.
Мы создали самый простой динамический php-сайт, состоящий из отдельных
блоков. Теперь если вам будет необходимо изменить шапку своего сайта, то просто откройте
файл header.php, отредактируйте его и сохраните. Эти изменения автоматически сохраняться
на всех страницах вашего сайта, где будет подключен этот файл.
Практическая часть
Задание 1.
Выполнить HTML (CSS) - верстку сайта из предыдущей работы № 18 (Рис.1.).
Рис.1. Пример HTML (CSS) для верстки.
Задание№2.
Сделать разбивку сайта на PHP- блоки. (Рис.2.)
6
Рис.2. Примерная разбивка сайта на
php - блоки
7