Ваш первый Сайт С использованием РНР-скриптов
СОЗДАНИЕ ССЫЛОК
В левую ячейку созданной нами таблицы поместим ссылки на другие страницы нашего сайта. Для начала сделаем простые ссылки, которые будут выглядеть как подчеркнутый текст, при нажатии на который будет происходить переход на заданную страницу.
Простая ссылка создается следующим образом: <А href - "адрес страницы, куда переходим">текст ссылки</А>
<А> - элемент привязки, который отображает текст ссылки на экране и указывает браузеру, на какую страницу необходимо перейти. При щелчке по тексту ссылки происходит переход на страницу, указанную в атрибуте Href. В качестве текста ссылки может быть краткая информация о странице, на которую мы переходим.
Создадим 6 ссылок на шесть страниц нашего сайта. Соответственно, у нас в левой ячейке таблицы появятся названия этих шести ссылок. Назовем их следующим образом:
• новости сайта,
• гостевая книга,
• музыка, фото,
• статьи, магазин:
<А href="novosti/newl. php">Новости сайта</А>
<А href="gostevaja/gostevl. php"> Гостевая книга</А>
<А href "muzic/muzic. php">Музыка</А>
<А href "risynki/kartinki. php">Фото </А>
<А href="statji. php">Статьи </А>
<А href "magazin/magazin. p hp "> Магазин </А>
Пока наш сайт состоит только из одной страницы index.php, с которой мы сейчас и работаем. Других страниц пока нет, поэтому, естественно, ссылки срабатывать не будут. Шаг за шагом мы будем создавать эти шесть страниц. В конце концов, мы создадим полноценный сайт со множеством страниц, число которых может быть и тысячу, но они благодаря скриптам на РНР на тех шести страницах будут уже создаваться автоматически, без вашего участия. Но об этом позже. Итак, вставим приведенные выше ссылки в наш код. Вставить их надо в пустую первую ячейку таблицы после тега <tr> между тегами <td width="25%"> и </td> (см. листинг 3.5 выше).
В листинге 3.6 приведен код с уже вставленными ссылками.
Листинг 3.6 <html> <head>
<Ш1е>Главная страница</Ш1е>
Clink type="text/css" rel="stylesheet" href="stil. css">
</head>
<body>
<h2 align="CENTER"xI>Ao6po пожаловать на мой сайт</1Х/Ь2> <table width="100%"xtr>
<td width=M25%" valign="top">
<A href="novosti/newl. php">HoBocTM Сайта</АхЬгхЬг>
<A href="gostevaja/gostevl.php">rocTeBaH Книга</АхЬгхЬг>
<A href="muzic/muzic. php ">Музыка</АхЬгхЬг>
<A href= "risynki/kartinki. php ">Фото </Axbrxbr>
<A href="statji/statji. php">CTaTbH </Axbrxbr>
<A href="magazin/magazin. php">Mara3HH </A>
</td>
<td width=M50%" valign="top"> <img src="salut. gif'x/td> <td width="25%"> <div>
Это учебный сайт. Он позволит быстро и наглядно изучить
Основные принципы программирования на РНР. Вы научитесь
Составлять скрипты для сайта любой сложности. Эти скрипты
Помогут вам автоматизировать добавление разнообразного материала
На ваш сайт, вести подсчет посетителей вашего сайта, узнать мнение
Посетителей о вашем сайте при помощи гостевой книги или системы
Оценки материалов
</div></td>
</trx/table>
</body>
</html>
Перед ссылками, в теге <td width="25%" valign="top"> мы используем уже знакомый нам атрибут valign со значением top, т. е. выравниваем блок ссылок по верхнему краю таблицы. После каждой ссылки (после закрывающего тега </А>) ставим 2 одиночных тега <br>. Этот тег означает пропуск строки, т. е. мы делаем расстояние по вертикали между ссылками в две строки. Вообще это дело вкуса. Можно поставить после каждой ссылки и 5 тегов <br>, увеличив еще больше расстояние между ними.
Сохраните страницу и запустите браузер. В левой части окна браузера появятся ваши 6 ссылок. При нажатии на любую из них, появится сообщение, что невозможно найти страницу, поскольку эти страницы мы еще не создали.
Если вас не устраивает формат текста ссылок, то вы можете его изменить. Откройте созданный нами раньше внешний файл таблиц стилей stilcss. У нас там пока две строчки. Их трогать не нужно. Запишите внизу следующие строчки:
A {font-family:Comic Sans MS; font-size: 14pt; color:black}
A:active{color:yellow}
A:hover{color:red}
Верхняя строчка дает указание браузеру, что все элементы <А> должны оформляться так, как указано в фигурных скобках. А в скобках мы указали название шрифта текста ссылок, размер шрифта и его цвет (изначально черный). Вторая строчка устанавливает цвет активной ссылки, на которую пользователь щелкнул мышью. Параметр active как раз и устанавливает стиль отображения активных ссылок, а именно, они отображены желтым цветом. Третья строчка указывает на отображение ссылки при наведении на нее указателя мыши. При наведении указателя мыши на какую-либо ссылку, она сменит черный цвет на красный. Если вы добавите в фигурные скобки еще и какой-нибудь другой тип шрифта или размер, то при наведении на ссылку указателя мыши будет изменен и сам шрифт. Вы, таким образом, как бы «оживите» ссылку. В общем, все это дело вашей фантазии. А пока сохраните файл стилей. Перезапустите браузер в редакторе и посмотрите, как изменился шрифт текста ссылок. Наведите указатель мыши на любую из ссылок и посмотрите, как меняется ее цвет.
Результат работы листинга 3.6 представлен на рис. 3.7.
Ну вот, собственно, и все о HTML. С его помощью можно составить любую HTML-страницу с любым дизайном. Существует много литературы по верстке страниц на языке HTML. Здесь рассмотрена только малая часть того, что может этот язык, ибо целью книги является нйучить вас писать скрипты на РНР и использовать их на практике для своего сайта.
|
КЗ D
Рис, 3.7 |
|
|
|
* Ш» * S а 2 fcfcft; W 'f * |
Приступим теперь к изучению и практическому использованию языка РНР5 для нашего сайта. Создадим на главной странице index. php счетчик посещения.
