Создание приложения на основе базы данных на языке PHPУрок 8: усовершенствование внешнего облика приложения с использованием технологии CSSСодержание учебного курса.
![]() В этом уроке вы научитесь выполнению следующих действий:
Текущий документ является частью краткого учебного курса "Создание приложения CRUD в IDE NetBeans для PHP". Исходный код приложения из предыдущего урокаДля пользователей MySQL: перейдите по этой ссылке для загрузки исходного кода, описывающего состояние проекта на момент завершения предыдущего урока. Для пользователей баз данных Oracle: перейдите по этой для загрузки исходного кода, описывающего состояние проекта на момент завершения предыдущего урока. Скрытие формТеперь на главной странице index.php приложения отображаются полные формы "logon" и "showWishList". Для усовершенствования внешнего вида приложения можно скрыть формы и заменить их кнопками. При нажатии на кнопку соответствующая скрытая форма раскрывается. Для реализации этого выполните следующие действия:
Функции JavaScriptФункции JavaScript не требуют входных параметров и не возвращают результат. Следующий код проверяет состояние видимости соответствующей формы и изменяет его на противоположное. При этом также изменяется текст на кнопке. Для выполнения этих изменений введите следующий код внутри тегов <script></script>: <script> function showHideLogonForm() { if (document.all.logon.style.visibility == "visible"){ document.all.logon.style.visibility = "hidden"; document.all.myWishList.value = "My Wishlist >>"; } else { document.all.logon.style.visibility = "visible"; document.all.myWishList.value = "<< My Wishlist"; } } function showHideShowWishListForm() { if (document.all.wishList.style.visibility == "visible") { document.all.wishList.style.visibility = "hidden"; document.all.showWishList.value = "Show Wish List of >>"; } else { document.all.wishList.style.visibility = "visible"; document.all.showWishList.value = "<< Show Wish List of"; } } </script> Обновление index.php
Определение стилей с помощью каскадной таблицы стилей (CSS)В настоящее время элементы управления в приложении "слипаются" и размещены в верхнем левом углу экрана. Для усовершенствования внешнего вида страниц укажите размер, положение, цвет, шрифт и другие параметры элементов управления путем определения стилей и назначения этих стилей определенным элементам управления. Стили определяются в отдельном файле каскадной таблицы стилей (CSS). Все рекомендации и предложения, касающиеся проектирования приложений, являются необязательными. Приведенные ниже определения стиля являются только примером усовершенствования внешнего вида приложения. Параметры настройки применимы для разрешения экрана 1024x768 пикселей и выше. Создание файла CSS
Определение стилей CSSОткройте файл "wishlist.css". Файл уже содержит "корневой" класс, который можно удалить. Для получения копии файла wishlist.css необходимо загрузить полную версию этого учебного курса поэтой ссылке. Код интуитивно понятен и содержит следующее:
Реализация дизайна с помощью отделений HTMLВсе рекомендации и предложения, касающиеся проектирования приложений, являются необязательными. Равно как и определения стиля выше, они являются только примером усовершенствования внешнего вида приложения. На примере ниже показано, как можно улучшить внешний вид страницы index.php.
Для получения дополнительных сведений по использованию каскадных таблиц стилей (CSS) см. http://www.htmlpedia.org/wiki/List_of_CSS_Properties Исходный код приложения на момент завершения текущего урокаДля пользователей MySQL: перейдите по этой ссылке для загрузки исходного кода, включающего пример дизайна и файл CSS. Для пользователей баз данных Oracle: перейдите по этой ссылке для загрузки исходного кода, включающего пример дизайна и файл CSS. PDO: благодарим Горана Мисковича (Goran Miskovic), любезно предоставившего версию PDO полного учебного курса, доступную по этой ссылке. В этом проекте можно переключаться между базами данных Oracle XE и MySQL, просто изменяя параметр DSN. Проект включает все необходимые сценарии SQL и задокументирован в коде. Однако следует учесть, что расширение PDO_OCI является экспериментальным. Команда IDE NetBeans выражает благодарность Озану Хазеру (Ozan Hazer) за его вклад, а именно за CSS и усовершенствование кода в готовом образце. Что дальше?Назад на главную страницу руководства Для отправки комментариев и предложений, получения поддержки и новостей о последних разработках, связанных с PHP IDE NetBeans присоединяйтесь к списку рассылки . |
Documentation |