Для Вас может стать полезным код верстки другого сайта, но только в том случае, если Вы имеете представление о верстке веб-страниц,знаете основные теги HTMLи свойстваCSS,т.е. сможете разобраться вHTML и CSS-кодах веб-страницы.
HTML-код и CSS-код любой веб-страницы доступны для просмотра и изучения.
Допустим, Вы зашли на наш сайт, Вам понравился дизайн, и Вы решили посмотреть программный код страницы.Для просмотра программного кода следует поместить курсор мыши над фоном страницы, правой кнопкой мыши открыть контекстное меню и выбрать команду"Просмотр кода страницы", после чего откроется программный код.
Внимание!!!В разных браузерах вместо пункта меню "Просмотр кода страницы" (см. рис. 26) может быть пункт с другим названием, но похожим смыслом!
Таким образом можно открыть программный код любой страницы. С целью усложнения изучения кода страницы он может быть записан в одну строку. Например,так выглядит код одной из страниц известного сайта facebook.com (см.рис. 7.23):
Рис. 7.23
Вспомним, что CSS-свойства могут находиться внутри HTML-кода, а могут быть подключены в виде внешних файлов. Чтобы посмотреть CSS-код из внешнего файла необходимо в теге link, где подключаются файлы CSS,посмотреть путь к ним. Значение атрибутаhref – это путь к файлу.
Чтобы увидеть содержимое файла CSS, в адресной строке браузера в конце указывается путь к CSS-файлу и нажимаем клавишу Enter.
Такой подход –изучение программного кода других сайтов –является хорошим дополнением к книгам и справочникам поHTMLи CSS.
Итог занятия:На этом занятии мы:• выполнили верстку основного каркаса сайта;• рассмотрели отличия табличной и блочной верстки;• познакомились с основными принципами верстки.
1Подробное описание подготовительных действий можно посмотреть в пятом занятии данного методического пособия!
Занятие 8. "Создание главного меню и раздела описания товаров"
На этом занятии мы создадим основные разделы сайта: - сформируем верхнее горизонтальное меню; - добавим в базу данных таблицу с описанием товаров; - создадим раздел описания товаров.
Подготовим PHP-проект к разработке.Мы создали основной каркас нашего сайта.Теперь будем пошагово работать над отдельными блоками страницы. На этом занятии мы реализуем следующее: добавим верхнее горизонтальное меню и раздел с описанием товаров (см. рис.8.1):
Рис. 8.1
Для решения этих задач нам понадобятся семь новых изображений и тексты с описанием товаров. Файлы: menu1.png, menu2.png, menu3.png, menu4.png– это картинки для четырех пунктов меню (см.рис. 1). Наше меню будет состоять из следующих пунктов:
1. Главная –это домашняя страница нашего сайта, на которой будет информация о нашей компании.
2. Товары –описание товаров (эту страницу мы реализуем на этом занятии).
3. Заказать –страница, где можно сделать заказ.
4. Контакты –контактная информация.
Следующие три файла:sheet1.png, sheet2.png, sheet3.png –предназначены для создания прямоугольной области, внутри которой будет выводиться описание товара (см. рис. 1).
Все изображения подготовлены в графическом редакторе.Самый простой вариант изменить дизайн сайта –это подменить файлы с изображениями! Если подобрать изображения точно такого же размера, сохранить их в таком же формате и также назвать, то дизайн сайта изменится.При этом даже не придется менять HTML-кодили CSS-код.
Сайт, который мы создаем,можно взять за шаблон и, изменив изображения и текстовые материалы –получить вариант сайта для других целей.
ОписаниеТоваров.txt–это текстовые материалы для раздела описания товаров. Откроем этот файл в программеБлокнот (см. рис. 8.2):
Рис. 8.2
После наименования следует текстовое описание товара.Количество товаров в нашем проекте фиксированное –десять позиций. В файле находятся описания всех товаров. Эти описания мы будем копировать и вставлять в базу данных.Текстовые материалы для сайта готовятся заранее.
Такой работой могут заниматься отдельные люди –если проект создается не в одиночку.
