 |
Формирование первой страницы сайта
|
|
|
|
Лабораторная работа №3. Перенос структуры сайта на сервер
Установка и настройка Denwer
Для того, чтобы начать установку Denwer зайдите на диск \\fileserver-ksi\Install и найдите дистрибутив Denwer-а. Также можно скачать его с официального сайта http://www.denwer.ru/.
Запустите дистрибутив Denwer.
1) Вас спросят о том, в какой каталог вы хотели бы установить комплекс (по умолчанию используется C:\WebServers). Вам необходимо указать D:\WebServers, так как изменения на диске D в нашем случае не сбрасываются после перезагрузки компьютера. В указанном каталоге будут расположены абсолютно все компоненты системы, и вне его никакие файлы в дальнейшем не создаются.
Настоятельно рекомендуем вам устанавливать комплекс в каталог первого уровня — то есть, D:\WebServers, а не, например, D:\My\WebServers. Дело в том, что инсталляторы пакетов расширений ищут базовый комплект именно на первом уровне по всем дискам. И, если не находят, заставляют вас ввести имя директории вручную.
2) Далее вам предложат ввести имя виртуального диска, который будет связан с только что указанной директорией (по умолчанию Z:). Важно, что диска с этим именем еще не должно содержаться в системе — чаще всего так и происходит с диском Z.
3) После этого начнется копирование файлов дистрибутива, а под конец вам будет задан вопрос, как именно вы собираетесь запускать и останавливать комплекс. У вас есть две альтернативы:
1. Создавать виртуальный диск при загрузке машины, а при остановке серверов его (диск) не отключать.
2. Создавать виртуальный диск только по явной команде старта комплекса (при щелчке по ярлыку запуска на Рабочем столе). И, соответственно, отключать диск от системы — при остановке серверов. Необходимо выбрать данный пункт для корректной работы.
|
|
|
После установки Denwer может возникнуть проблема, при которой система не будет запускаться из-за пересечения портов с другими службами. Для устранения данной проблемы необходимо поменять порт запуска apache для Denwer. Для этого:
1) Запускаем файл D:\WebServers\usr\local\apache\conf\httpd.conf.
2) Находим в нем строку «Port 80» (неважно закомментирована она или нет).
3) Изменяем на «Port 8080» (желательно написать именно этот порт, чтобы потом не путаться и чтоб не путались другие студенты).
4) Находим строку, содержащую «1251» и делаем ее закомментированной с помощью символа #.
После этого запускаем Denwer и заходим на адрес http://localhost:8080/.
Свою разработанную схему сайта можно расположить в каталоге D:\WebServers\home\localhost\www\<Имя сайта>\ или в D:\WebServers\home\<Имя сайта>\www\. В первом случае сайт запускается по пути http://localhost:8080/<имя_сайта>, а во втором http://<имя_сайта>/ (возможно, нужно запустить через порт 8080).
Формирование первой страницы сайта
После того как мы запустили и проверили на сервере разработанную схему с простейшим html-кодом, необходимо приступить к непосредственной разработке каждой страницы сайта.
Для начала необходимо спроектировать основные конструкционные моменты страницы. Для этого рассмотрим на примере типичную страницу. Многие страницы строятся по данной схеме. Схема типичной страницы на php:
Обратите внимание на то, что страницы сделанные с использованием php рекомендуется делать с расширением.php, хотя это не является обязательным условием. При определенных настройках хостинга файлы с обычным расширением.html также могут обрабатывать PHP-код.
Теперь рассмотрим код шаблона сайта на php:
Код основного файла index.php:
<html>
<head>
<title>Название страницы</title>
...
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/head.php';
?>
...
</head>
<body>
...
<div class="shapka">
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/top.php';
|
|
|
?>
</div>
...
<div class="page">
<div class="sidebar_left">
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/sidebar1.php';
?>
</div>
...
<div class="content">
... Основная часть сайта...
</div>
...
<div class="sidebar_right">
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/sidebar2.php';
?>
</div>
...
<div class="footer">
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/footer.php';
?>
</div>
...
</div>
</body>
</html>
Обратите внимание, что подключается они через специальную команду PHP:
require_once <полный путь/имя файла>
Каждый файл соответственно отвечает за отдельную часть сайта. Сайт может состоять из большего множество таких подключаемых файлов. Теперь отдельно рассмотрим каждый из подключаемых элементов:
1. Файл head.php. Сюда обычно пишут всю мета информацию, которая дублируется на каждой странице сайта. Например, сюда необходимо включить как минимум подключаемые стили, favicon и скрипты. Эта информация дублируется на каждой странице, поэтому логично прописать это все в один файл. Код файла head.php:
...
<link rel="stylesheet" type="text/css" href="/style.css"/>
<link rel="shortcut icon" href="/images/favicon.ico" />
<script type='text/javascript' src='/javafile.js'></script>
...
2. Файл top.php – это шапка сайта. Сюда обычно включают лого сайта, контактную информацию, рекламу и прочее. Зачастую код файла top.php является следующим:
...
<div class="logo">
<img src="/logo.jpg">
Название сайата
</div>
<div class="contact">
Какая-то контактная информация
</div>
<div class="top_reklama">
Место для рекламы
</div>
...
3. Файл sidebar1.php – левая колонка сайта. Очевидно, что сюда чаще всего размещают меню сайта, ссылки на полезную информацию, рекламу и прочие ссылки (меню мы рассмотрим позже, однако про его создание можно почитать здесь http://zarabotat-na-sajte.ru/uroki-php/kak-sdelat-menu-dlay-sayta-na-php.html). Зачастую код файла sidebar1.php является примерно следующим:
...
<div class="menu">
...
Меню
...
</div>
<div class="link_interes">
...
Ссылки на интересные материалы
...
</div>
<div class="reklama_sidebar1">
...
Какая-то реклама
...
</div>
...
4. Файл sidebar2.php – это правая колонка нашего сайта. Сюда можно было бы разместить меню, но справой стороны его делают редко. Сюда размещают метки сайта, популярные записи, какую-то полезную информацию для пользователей. Зачастую код файла sidebar2.php является следующим:
|
|
|
...
<div class="metki">
...
Метки
...
</div>
<div class="popular">
...
Ссылки на популярные материалы
...
</div>
...
5. Файл footer.php – это нижняя часть сайта. Чаще всего она полностью повторяется на каждой странице сайта, как и шапка. Сюда можно вписать ссылки на основные разделы сайта, поставить счетчики и написать ещё раз контакты. Зачастую код файла footer.php является следующим:
...
<div class="footer_menu">
...
Ссылки на главные разделы
...
</div>
<div class="counter">
...
Коды счетчиков
...
</div>
<div class="footer_contact">
...
Ещё раз контакты
...
</div>
...
Это самая простая схема страницы сайта на PHP, которую можно назвать модифицированной версией html-сайта. Изменяя и заполная ее можно разработать достаточно сложный и функциональный сайт.
|
|
|
