Разработка информационного сайта для торговой фирмы «Мир мебели»

Рис. 20. Таблица данных контактов

 

4. После ввода имени каждой из этих таблиц, появится таблица для редактирования полей. Введите имена полей, укажите их тип, длину поля, для первых двух полей задайте атрибут UNSIGNED, который означает, что числа будут только положительными. Обязательно надо задать для первого поля id первичный ключ и, чтобы не изменять значение поля самим, — параметр auto_increment (рис. 21). Для удобства можно добавить к таблице комментарий.

 
Рис. 21. Редактирование полей таблицы section

Изменение таблицы

Всегда есть возможность  изменить существующую таблицу —  добавить новые поля или изменить существующие. Для этой цели выберите закладку «Структура», где доступны следующие варианты.

• Чтобы изменить существующие поля, необходимо отметить возле них чекбокс и нажать кнопку «Изменить». Откроется уже знакомая схема (рис. 5), где модифицируются параметры поля таблицы.
• Добавление нового поля производится при выборе той же закладки «Структура», где следует выбрать количество добавляемых полей и где они будут размещаться — в начале или конце таблицы (рис.22).

 
Рис.22. Добавление нового поля

Добавление  и редактирование данных

Информацию в таблицу  лучше всего заносить через административную систему сайта, которую предстоит  еще написать. Но пока она не создана, предварительные данные для отладки программы можно добавлять и через phpMyAdmin. Для этого выберите необходимую таблицу и нажмите на закладку «Вставить» (рис.23).

 
Рис.23. Добавление данных

В удобной форме перечислены  все поля таблицы для создания записи. Поля, помеченные как auto_increment (у нас это поле id), заполнять не надо, записи в них будут созданы автоматически.

Просмотреть существующие в таблице записи можно через  закладку «Обзор». Там же можно при  необходимости удалить их или  отредактировать. Если требуется выбрать  только определенные записи, для этого  предназначена закладка «Выбрать».

 

9. Подключение шаблона сайта

Шаблон нашего сайта будет внедрен в сайт по средством Adobe Dreamveawer и Adobe Photoshop, подробно возможности этих программ описаны выше.

Процесс верстки заключается в конвертации psd-макета в html-документ. Делается это при помощи тэгов html и средствами css.

Верстка веб-страниц — процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы.

Вёрсткой веб-страниц  занимаются верстальщики веб-страниц.

По принципам использования средств разметки HTML различают логическую разметку и презентационную разметку, когда элементы разметки используются не в соответствии с той семантикой, которую они несут, а ради внешних эффектов, которые они добавляют фрагментам текста.

Часто с первой манерой  разметки отождествляют блочную  вёрстку, а со второй — более традиционную, обкатанную, но и чаще критикуемую  табличную вёрстку.

Верстка с помощью слоев

Слои представляют собой  для структурные элементы, которые  можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Скрипты позволяют изменять параметры слоя динамически. Это дает возможность создавать на веб-странице разные эффекты, такие как выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и др.

До недавнего времени  в качестве основных инструментов верстки  выступали фреймы и таблицы. Фреймы, ввиду их некоторого несоответствия принципам веб-дизайна и навигации, были объявлены злом и подвергнуты  остракизму. Любое использование  фреймов, за редким исключением (например, в чатах), вызывало возгласы о том, что веб-мастер недостаточно профессионален и не понимает всех тонкостей создания сайтов. Что оставалось делать в этой ситуации верстальщикам? Только переходить к таблицам. Поэтому вёрстка с использованием таблиц на долгое время стала определенным стандартом.

И как только таблицы  не применяются — и рамки с  помощью них делают, и модульные  сетки задают, и цветной фон  создают, и элементы выравнивают  по разным краям. Конечно, это противоречит идеологии разделения оформления и содержания, но о такой «мелочи» никто и не вспоминает.

Ситуация поменялась с выходом новых версий браузеров, которые стали придерживаться современных  стандартов и содержать средства по работе со слоями. Вот тогда и  заговорили о новой системе верстки сайтов, которая позволяет забыть о таблицах или использовать их только по прямому назначению.

 
Преимущества и недостатки слоёв

Свойства слоя удобно задавать и настраивать через  стили. Возможности стилей гораздо  шире, чем традиционного html и расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код. Справедливости ради, отметим, что данное утверждение можно отнести и к любым другим элементам веб-страницы, а не только к стилям. Слой можно перемещать, прятать и показывать без перезагрузки всей страницы. С помощью всего нескольких инструкций можно создавать разные эффекты, вроде выпадающих меню, всплывающих подсказок, движущихся элементов и другое. Добавление подобных трюков хотя и увеличивает объем кода, но не требует повторной загрузки и обновления документа и происходит без лишних задержек со стороны браузера. Кроме того, выразительность и привлекательность сайта во многом повышается благодаря использованию подобных приемов со слоями.

Слои можно накладывать  друг на друга, что упрощает размещение элементов на веб-странице и предоставляет  больше возможностей при верстке.

Слои можно размещать  в окне браузера с точностью до пиксела. Положение слоя задается двумя координатами, которые задают положение левого верхнего или правого угла относительно окна браузера. Смещать слой можно и относительно родительского элемента.

Слои по сравнению  с таблицами отображаются быстрее. Более высокая скорость достигается  за счет компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Если сравнивать между собой скорость загрузки веб-страниц, созданных с применением таблиц и слоев, то у табличной вёрстки имеются определённые недостатки. Содержимое таблицы загружается медленнее, чем информация в слоях 
Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер. Это имеет смысл, если принять во внимание предназначение таблиц. Первоначально они были задуманы для хранения табличных данных, а их лучше всего показывать сразу целиком, а не беспорядочно по мере загрузки. При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого. Следует учитывать, также, и растущий объем веб-страниц при активном использовании таблиц, особенно в случае их вложенности друг в друга. Всё это приводит к тому, что табличная верстка вызывает ненужные задержки вывода информации в браузере.

Работа с таблицами менее гибкая, чем со стилями

При использовании таблиц широко известным приемом стало  применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.

Подобные техники не только усложняют разработку универсальных веб-страниц, но и ведут к снижению скорости загрузки документа. Браузеру в этом случае приходится загружать элементы, которые не видны пользователю и, по сути, ему не нужны, но они входят в общий трафик сайта.

Стили, на которых основана работа слоев, освобождают голову разработчика от подобных забот. Управлять любыми объектами веб-страницы с помощью стилей проще, легче и эффективней.

Усложненная верстка при большом количестве таблиц 
Данная проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Macromedia Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

Не следует считать, что использование слоев это  панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность верстки слоями — создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах. Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей, что возможно только при большом опыте работы или массе свободного времени.

Этапы внедрения  шаблона

1. Нарезаем наш макет,  который находиться в программе  Photoshop. Для этого используем «линии  разметки» и инструмент «Рамка»

Рис. 24. верстка макета в Photoshop

 

2. При помощи html и сss создаем документ index.html. Так же выносим стили в отдельный файл style.css.

3. Средствами php создаем структуру сайта.

Рис. 25. Основная структура файлов сайта

 

В папке «admin» - файлы администраторской части сайта

- «block» - вынесены части кода, которые повторяются в разных страницах. Это делается для упрощения изменения и редактирования файлов в дальнейшем. Код подключается при помощи функции include.

- «facebox» и «input» - тут хранятся js-скрипты для подключения всплывающего окошка просмотра картинок на сайте.

Рис. 26. Просмотр продукции

 

- «images» - тут хранятся  картинки сайта относящиеся к верстке

- «photo» - эта папка хранит фотографии товара из раздела Каталог продукции

- «tinymce» - тут расположены  скрипты редактора «Tinymce», для  редактирования текстовой информации на сайте.

 

10. Организация хранения и обновления информации

Вся информация храниться в БД MySQL, которая является одной из множества ПО для работы с SQL базами данных.

SQL – это структурированный язык запросов, созданный для управления реляционными БД. Он обладает широким перечнем возможностей, например, создать таблицу, редактировать и удалять данные, производить запросы из таблиц и многое другое.

Обновление информации происходит в администраторской  части сайта. Для этого в файлах php используются специальные запросы к базе данных.

Типы запросов данных

Есть четыре основных типа запросов данных в SQL, которые относятся  к так называемому языку манипулирования данными (Data Manipulation Language или DML):

• SELECT – выбрать строки из таблиц;
• INSERT – добавить строки в таблицу;
• UPDATE – изменить строки в таблице;
• DELETE – удалить строки в таблице;

Каждый из этих запросов имеет различные операторы и  функции, которые используются для  того, чтобы произвести какие-то действия с данными. Запрос SELECT имеет самое большое количество опций. Существуют также дополнительные типы запросов, используемых вместе с SELECT, типа JOIN и UNION. Но пока, мы сосредоточимся только на основных запросах.

Использование запроса SELECT для выборки нужных данных

Чтобы получить информацию, хранящуюся в базе данных используется запрос SELECT. Базовое действие этого запроса ограничено одной таблицей, хотя существуют конструкции, обеспечивающие выборку с нескольких таблиц одновременно. Для того, чтобы получить все строки данных для специфических столбцов, используется запрос такого вида:

SELECT column1, column2 FROM table_name;

Также, можно получить все столбцы из таблицы, используя  подстановочный знак «*»:

SELECT * FROM table_name;

Это может быть полезно  в том случае, когда вы собираетесь выбрать данные с определенным условием WHERE. Следующий запрос возвратит все столбцы со всех строк, где «column1» содержит значение «3»:

SELECT * FROM table_name WHERE column1=3;

Кроме «=» (равно), существуют следующие условные операторы:

Дополнительно можно использовать условия BITWEEN и LIKE для сравнения с условием WHERE, а так же комбинации операторов AND и OR.

SELECT * FROM table_name WHERE ((Age >= 18) AND (LastName BETWEEN ‘Иванов’ AND ‘Сидоров’)) OR Company LIKE ‘%Motorola%’;

Что в переводе на русский язык означает: выбрать все столбцы из таблицы table_name, где значение столбца age больше или равно 18, а также значение столбца LastName находится в алфавитном промежутке от Иванов до Сидоров включительно, или же значением столбца Company является Motorola.

Использование запроса INSERT для вставки новых  данных

Запрос INSERT используется для создания новой строки данных. Для обновления уже существующих данных или пустых полей строки нужно использовать запрос UPDATE.

Примерный синтаксис  запроса INSERT:

INSERT INTO table_name (column1, column2, column3) VALUES (‘data1’, ‘data2’, ‘data3’);

Если вы собираетесь  вставлять все значения в порядке, в котором находятся столбцы  таблицы, то можно и не указывать  имена столбцов, хотя для удобочитаемости  это предпочтительнее. Кроме того, если вы перечисляете столбцы, необязательно указывать их по порядку нахождения в базе данных, пока значения, которые вы вводите, соответсвуют этому порядку. Вы не должны перечислять столбцы, в которые не вводится информация.