- •Занятие 1. "Быстрый старт: организация рабочего места веб-разработчика. Создание и запуск первого проекта"
- •Установка и настройка пакета Denwer
- •Установка среды разработки Eclipse для php
- •Создание и запуск веб-проекта php
- •Добавление php кода к веб-проекту
- •Занятие 2. "Технология верстки веб-страницы: изучениеHtml"
- •Предназначение html иCss
- •Вспомним основные тегиHtml
- •Правила записиHtml-кода
- •Занятие 3. "Технология верстки веб-страницы: изучениеCss"
- •Несколько слов оCss
- •Основы css
- •Посмотрим на результат в браузере (см. Рис. 3.5)
- •Селекторы css
- •Селектор по идентификатору:
- •Селектор по классу:
- •Основной способ подключения css
- •Основные csSстили
- •Из списка стандартных цветов.
- •При помощи указания компонентов цвета: rgb, в этом случае перед компонентами цвета ставится символ "#" – решетка.
- •Проект "Винни-Пух и компания"
- •Технология создания крупного проекта
- •Реализация клиентской части на Java
- •Title - указывается название колонки;
- •Галочка editable - включает/отключает возможность редактирования ячеек колонки пользователем;
- •Галочка resizable - включает/отключает возможность изменения ширины колонки пользователем (см. Рис. Тот же).
- •Обмен данными с сайтом
- •Занятие 5. "Начало создания серверной части проекта"Винни-Пух и компания"
- •Создание серверной части проекта на php
- •Кодировка проектаUtf-8
- •Обработка get-запроса вPhp
- •Работа с MySql изPhp
- •Занятие 6. "Завершение создания php-скрипта для приема данных от клиентской части на Java"
- •ФормированиеSql-запросов из php
- •Занятие 7. "Верстка основного каркаса сайта интернет-магазина"
- •Методики верстки
- •При большой вложенности таблиц друг в друга снижается скорость загрузки страницы браузером.
- •Индексация страницы поисковой системой происходит сложнее, что влияет на оптимизацию сайта для поисковых систем(сайт хуже находится).
- •При открытии страницы в старых браузерах страница может отображаться не корректно –старый браузер не поддерживает современные css- свойства.
- •Типы верстки
- •Верстка основного каркаса сайта
- •Изучение верстки других сайтов
- •Занятие 8. "Создание главного меню и раздела описания товаров"
- •Создание таблицы описания товаров
- •Формирование верхнего горизонтального меню
- •Создание белой прямоугольной области
- •Получение описания товаров из базы данных и вывод на веб-страницу
- •Занятие 9 "Создание левой и правой боковой части страницы"
- •Создание таблицы дляHtml-разметки
- •Программирование пунктов меню
- •Получение html-разметки из базы данных
- •Создание левой боковой части страницы
- •Использование Flash на веб-странице
- •Создание правой боковой части страницы
- •Занятие 10. "ПодключениеJavaScript. Создание разделов сайта: Главная и Контакты"
- •Реализация раздела сайта: Главная
- •Реализация раздела сайта: Контакты
- •Немного оJavaScript
- •Создание эффекта подмены изображения
- •Создание эффекта появления изображения
- •Занятие 11. "Создание раздела сайта: Заказать"
- •Создание верхней части раздела
- •Отправка и получение данных с веб-страницы
- •Использование файлов для хранения данных
- •Открытие файла для записи/чтения;
- •Запись/Чтение;
- •Закрытие файла.
- •Создание функции для получения и сохранения данных
- •Создание таблицы и формы отправки данных
- •Создание тегов для верхней части таблицы с заголовком.
- •Создание функции формирования десяти строк таблицы с остатками.
- •В заключение внешний вид подкорректируем при помощи css.
- •Занятие 12. "Отладка проекта"
- •Кросс-браузерная отладка
- •Посмотреть сайт на различных разрешениях экрана. Для этого необходимо изменять текущее разрешение экрана.
- •/*Вертикальное выравнивание по верхней части*/
- •Создание дополнительных настроек в тегахHead
- •Перенос сайта на веб-сервер
- •Выгрузка базы данных с исходного компьютера.
- •Загрузка базы данных на веб-сервер.
- •Проверка взаимодействия с клиентской частью наJava
- •Заключение
- •Постановка задачи(логическое описание проекта):
- •Техническое описание проекта:
Создание дополнительных настроек в тегахHead
Теги headглавной страницыindex.phpсодержат теги заголовка страницы, подключениеJavaScriptи CSS, указание кодировки страницы.
Добавим еще несколько основных тегов, которые понадобятся каждой веб-странице. Все последующие теги должны находиться между открывающим <head> и закрывающим тегом< /head> !
Укажем информацию для поискового робота:
<!--Разрешаем поисковым роботам индексировать страницы сайта-->
<meta name="robots" content="all" />
Специальные программные средства осуществляют поиск всех веб-страниц интернета. Найденные страницы добавляются в базы данных поисковых систем, таких как Google илиYandex. Содержимое веб-страниц будет использоваться при поиске информации.
При помощи атрибутаname="robots" тегаmetaможно разрешить или запретить индексирование страницы. Значение атрибута content="all" разрешаетиндексирование страницы и других страниц, на которые имеются ссылки на данной странице.Для запрета индексирования страницы необходимо указать значение атрибута content="none".Дополнительной настройкой для индексации является файл: robots.txt, который необходимо разместить в корневой папке сайта. Добавим файл robots.txt к нашему проекту(см. рис. 12.11):
Рис. 12.11
Внутри файла robots.txtдобавим строки(см. рис. 12.12):
User-agent: *
Allow: /
User-agent –это обращение к поисковым роботам, значение звездочка (*)указывает на обращение ко всем поисковым роботам.
Рис. 12.12
Allow –означает разрешить, наклонная черта(/) указывает на все файлы и папки нашего сайта.
Данная запись означает:разрешить индексацию всего сайта всем поисковым роботам. Если вместо Allow, указать Disallow –это будет запрет на индексирование. Нужно обязательно указывать равнозначную настройку в файлеrobots.txt и внутри тегов meta!
Продолжим добавлять теги внутри тегов <head> < /head>. Следующие теги добавляют иконку нашего сайта:
<!--Подключаем иконку для сайта-->
<link rel="icon" href="img/r1.png" type="image/png" />
<link rel="shortcut icon" href="img/r1.png" type="image/png" />
В атрибуте href указывается изображение, которое отобразится в верхней части браузера (см. рис.12.13):
Рис. 12.13
В данном случае это изображение в формате PNG: type="image/png".Указанное изображение сжимается до размеров иконки.
Рядом с иконкой укажем описательное наименование сайта:
<!--Указываем заголовок сайта в списке поисковой системы-->
<meta name="description" content="Project Winnie the Pooh and Company" />
Значение атрибутаcontent будет отображаться в результатах поисковой системы.
Добавим последний тег:
<!--Указываем ключевые слова для поисковой системы-->
<meta name="keywords"
content="мед, перга,прополис, продукты пчеловодства" />
Это список ключевых слов для нахождения сайта через поисковые запросы.
Список слов или словосочетаний указывается через запятую в значении атрибута content.
Теперь сайт готов для переноса на веб-сервер!
Перенос сайта на веб-сервер
Вариантов открытия сайта для общего доступа может быть несколько:
Настройка собственного веб-сервера.
Приобретение платного хостинга.
Получение бесплатного хостинга.
Для тестирования сайта достаточно бесплатного хостинга.
Бесплатный хостинг подразумевает:
Сайт будет иметь доменное имя четвертого уровня. Например: puh.edu.1c.ru.
В отдельном месте страницы (сверху,сбоку), скорее всего, будет располагаться реклама.
Для того чтобы найти бесплатный хостинг в поисковой строке следует ввести: бесплатный хостинг php mysql (см. рис. 12.14):
Рис. 12.14
В результатах поиска отобразится достаточное количество предложений.
Следует выбрать один из понравившихся вариантов и пройти процедуру регистрации. После получения бесплатного хостинга должны быть известны данные: доменное имя,данные подключения поFTP, данные для подключения к базе данных.
Внимание!!!Перенос сайта на платный хостинг происходит по такой же схеме!
Перенос сайта осуществляется в несколько шагов:
Изменение параметров подключения к базе данных в программном коде PHP.
Копирование файлов по FTP с исходного компьютера на веб-сервер.
