- •Занятие 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
- •Заключение
- •Постановка задачи(логическое описание проекта):
- •Техническое описание проекта:
Селекторы css
Поработаем при помощиCSS над текстом:Hello!!! Посмотрим,как легко можно преобразовать обычный текст к совершенно другому виду. Для данной операции мы применим селектор по тегу.
Селекторы тегов(селекторы типа) —от английского select, это элементы,соответствующие названиям HTML-тегов,отображение которых будет переопределено свойствами CSS.
Внутри тега style добавим CSS-код,получится:
<html>
<head>
<title>PagePHP</title>
<style type="text/css">
span
{
font-size:50px;
color:green;
backgound-color: blue;
}
</style>
</head>
<body>
<span>Hello!!!</span>
</body>
</html>
Селектор по тегу имеет следующий формат: сначала указывается имя тега, к которому необходимо применить свойства CSS,далее внутри открывающей и закрывающей фигурных скобок –указывается список свойств.Открывающая и закрывающая фигурная скобки напоминают скобки из Javaдля выделения блока. Мы сейчас записали те же три свойства, которые ранее записывали в атрибуте style.Посмотрим в браузере - мы видим результат:надпись зеленого цвета размером 50px на синем фоне.
Свойства CSS обычно записываются на отдельной строке - для удобства просмотра кода. Формат записи свойств, в данном случае, ничем не отличается от записи в атрибуте style. В чем отличие подключенияCSS через селектор по тегу?Отличие в том, что все теги span, которые находятся на странице–получат эти три свойства: цвет текста, цвет фона, размер текста. Добавим еще один тег span, но уже с другим текстом:
<html>
<head>
<title>PagePHP</title>
<style type="text/css">
span
{
font-size:50px;
color:green;
backgound-color: blue;
}
</style>
</head>
<body>
<span>Hello!!!</span>
<span>CSS</span>
</body>
</html>
Посмотрим на результат в браузере –другая надпись имеет такой же вид. Другими словами, все теги span получают одно и то же свойство, которое мы описали при помощи тега style.
Если бы мы пользовались первым методом, то нам пришлось бы подключить атрибут styleк каждому тегу span. Представьте, что тегов span на странице несколько десятков. Преимущества второго способа сразу станут очевидны. Или приведем другой пример:представьте, что у вас несколько десятков тегов span, в которых при помощи атрибута style указан зеленый цвет, а нам нужно изменить его на красный.При использовании селектора по тегу придется сделать всего одно исправление,тогда как при подключении атрибута style к каждому тегу нам пришлось бы делать исправления несколько десятков раз.
ПодключениеCSS при помощи атрибутаstyle рекомендуется использовать для временной корректировки при отладке!
При использовании селектора по тегу необходимо указать имя тега и внутри фигурных скобок перечислить свойства CSS.
Селектор по идентификатору:
Удалим два тега span внутри тега body и добавим следующие три тега span,получится:
<html>
<head>
<title>PagePHP</title>
<style type="text/css">
span
{
font-size:50px;
color:green;
backgound-color: blue;
}
</style>
</head>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>
Посмотрим на результат в браузере - отображаются три цифры: 1,2,3– каждая цифра находится в отдельном теге span.
Селектор по тегу подключил свойства сразу для всех теговspan на странице.Представьте, что таких тегов у вас несколько десятков, но необходимо всего лишь для одного тега указать другое свойство. Для этого служит селектор по идентификатору. У тегов есть специальный атрибут: id –он предназначен для задания тегу уникального имени, похожего на имя переменной. Выполним это для первого тега span:
<span id="span1">1</span>
К тегу spanдобавлен атрибут id–идентификатор со значением: span1. Имя идентификатора задается произвольно, по правилам задания имени переменной в Java.
Не забывайте, что у каждого тега должен быть уникальный (свой собственный) идентификатор!
Важно!!!Ошибки при написании HTML-тегов и CSS-свойств приведут к неправильному отображению страницы! Часть результатов может отсутствовать или отобразиться по другому. Если что-то не работает – обратите внимание на синтаксические ошибки!
По идентификатору можно обратиться к тегу из CSSпри помощи селектора по идентификатору. В этом случае селектор записывается с символа "решетка" (#), затем записывается имя идентификатора, напрмер: #span1, внутри фигурных скобок идет список свойств, которые необходимо применить к тегу с данным идентификатором:
#span1
{
color:red;
}
Пусть цифра 1 на нашей веб-странице отображается красным цветом.Добавим внутри тега styleсоответствующий селектор:
<html>
<head>
<title>PagePHP</title>
<style type="text/css">
span
{
font-size:50px;
color:green;
background-color: blue;
}
#span1
{
color:red;
}
</style>
</head>
<body>
<span id="span1">1</span>
<span>2</span>
<span>3</span>
</body>
</html>
Теперь посмотрим на результат в браузере. Мы видим, что цифра:1 (первый тегspan) стала красной. При помощи селектора по идентификатору можно обратиться к конкретному тегу по указанному идентификатору в атрибуте: id.
Применение свойствCSS происходит сверху вниз, как и обычное выполнение программного кода. Поэтому более высокий приоритет имеет то, что написано ниже.Например: в селекторе по тегу написаны несколько строк:
span
{
color:green;
color:blue;
color:red;
}
Первое свойство изменит цвет текста на зеленый, второе на синий,третье на красный. Выполняться они будут сверху вниз. В результате цвет текста на странице будет красным, потому что это свойство применится последним!Последнее свойство–перекрывает предыдущие свойства! Порядок следования блоков селекторов также имеет значение.