- •Занятие 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
- •Заключение
- •Постановка задачи(логическое описание проекта):
- •Техническое описание проекта:
Реализация клиентской части на Java
Для создания приложения на Java нам понадобится уже знакомый вариант Eclipse для Java, который был использован в первых двух модулях поJava. Вспомним,чтобы использовать Eclipseдля Java, понадобится установленный JDK- пакет разработчика Java. На момент создания данного методического пособия официальный сайт находился по адресу: http://www.oracle.com (оригинальная версия была получена по этому адресу).
Установка пакета разработчика Javaпроизводится стандартным способом.
Вариант Eclipse, который был использован при изучении Java,для создания игры "Новогодний дождь",приложений "Графический редактор", "Калькулятор" и других- называется: JavaStandard Editionили сокращенно: JavaSE. На момент создания данного методического пособия официальный сайт находился по адресу: http://www.eclipse.org (оригинальная версия среды Eclipse дляJavaSE ирусификаторбыли получены по этому адресу).
Установка Eclipseдля JavaSEпроизводится стандартным способом.
Запустим Eclipseдля JavaSE.
Создадим новый проект:Файл, Создать, Проект Java (см.рис. 4.1).
Рис. 4.1
Введем имя проекта:puh и нажмем кнопку Готово (см. рис.4.2):
Рис. 4.2
Выбираем проект puh в списке проектов,выделяем заголовок проекта (см. рис. 4.3):
Рис. 4.3
Нажимаем правую клавишу мыши для открытия меню, выбираем:
Создать, Прочие… (см.рис. 4.4):
Рис. 4.4
Добавим форму для визуальной разработки.
В появившемся окне выбираем: WindowBuilder, Swing Designer, JFrame (см. рис. 4.5):
Рис. 4.5
Нажимаем кнопку Далее и введем имяprog (см. рис. 4.6):
Рис. 4.6
Нажмем на кнопку Готово - появится знакомый интерфейс для визуальной разработки. Теперь создадим интерфейс приложения. На нашем сайте будут представлены продукты пчеловодства, всего их будет десять.
Список будет фиксированным.Давайте перечислим эти десять продуктов:
Мед
Прополис
Воск пчелиный
Цветочная пыльца
Перга
Маточное молочко
Трутневое молочко
Пчелиный яд
Пчелиная огневка
Пчелиный подмор.
Можно придумать свою продукцию с теми названиями, которые больше нравятся.
Перейдем в визуальный редактор и включим возможность произвольного размещения элементов формы.Для этого нажмем левой клавишей мыши на панель JPanel внутри окна, при этом панель должна выделиться рамкой (см. рис.4.7):
Рис. 4.7
Далее в свойствах дляLayout указываем значение: Absolute layout (см. рис.4.8):
Рис. 4.8
Изменим заголовок окна на: Поступление товаров (см. рис. 4.9):
Рис. 4.9
Для удобного отображения списка товаров и их количества воспользуемся элементом формы: JTable (таблица). Добавим таблицу на панель (см. рис.4.10):
Рис. 4.10
Обратите внимание, что после добавления таблицы на панель –появится черный квадратик (см. рис. 4.11):
Рис. 4.11
Этот квадрат нужно растянуть мышью, чтобы увеличить размеры таблицы (см. рис. 4.12):
Рис. 4.12
Если нажать на элемент в общем списке, то он становится выбранным(текущим) элементом. Выберем таблицу (см. рис. 4.13):
Рис. 4.13
Список свойств всегда отображается для выбранного элемента формы!
Найдем свойство model для таблицы и откроем его. При помощи этого свойства можно создать строки и колонки таблицы, а также записать значения в ячейки таблицы. При открытии свойства – появится новое окно.С помощью этого окна мы создадим строки и колонки таблицы. В нашей таблице будет четыре колонки и десять строк. Начнем с колонок: нажмем четыре раза кнопку Insert в разделе Columns (см. рис. 4.14):
Рис. 4.14
Далее добавим строки:нажмем десять раз кнопку Insertв разделе Rows.
В итоге должна получиться таблица из четырех колонок и десяти строк.
Двойной щелчок левой клавишей мыши позволяет ввести текст в ячейку. В первую колонку необходимо ввести номера товаров от 1 до 10, а во вторую колонку наименование товара. Заполните таблицу наименованиями продукции.
При выборе ячейки в колонке –внизу отображаются ее свойства (см. рис. 4.15):
Рис. 4.15
В поле:
