Создайте образец веб-страницы с использованием HTML5, CSS3, JavaScript и Json.

Предварительное условие: загрузите код Visual Studio по этой ссылке.

Код Visual Studio (VS) имеет множество расширений, помогающих разработчикам. Расширение Live server позволяет нам просматривать работу в режиме реального времени. Это расширение убирает ручное обновление браузера каждый раз, когда вы вносите изменения в исходный код.

Чтобы открыть проект с работающим сервером в коде Visual Studio, выполните следующие действия.

перейдите к расширениям… найдите живой сервер… нажмите «Установить».

откройте свой html-файл… щелкните правой кнопкой мыши…. откройте с живым сервером… страница откроется в вашем браузере по умолчанию.

Создать проект

Создайте папку с именем HTML_CSS_JS_PROJECT. Внутри этой папки создайте еще 5 подпапок с именами: css, html, images, js, json.

А] html

Наша веб-страница имеет 4 меню. Итак, нам нужно создать 4 html файла (home.html, product.html, About.html, contact.html) внутри папки html.

# home.html: когда вы открываете домашнюю страницу (home.html), она случайным образом генерирует всплывающее окно с просьбой принять участие в опросе/обзоре. Эта страница обзора имеет код в review.html.

На home.html также включены файлы cookie. Вы можете установить cookie, используя ссылку «пожалуйста, нажмите здесь…». Теперь вы можете проверить его, выполнив следующий шаг.

щелкните правой кнопкой мыши веб-страницу — — — проверьте — — — Приложение — — — Файлы cookie — — — ключ: пара значений

# product.html содержит только таблицу с заголовком таблицы (элемент th).

Б] JavaScript

# product.html содержит только заголовок таблицы. product.js загрузит табличные данные внутри таблицы на html-странице.

# product.html file
<script src="/js/product.js"></script>

# product.js file
prodRequest.open("GET", "/json/product.json");

# Data for table is stored in product.json file.

# product.js содержит 4 основные функции.

• renderTable(): загрузить данные из json на html-страницу
• функции сортировки: sortByID(), sortByName(), sortByPrice()

В] CSS

Чтобы придать стиль нашей веб-странице, нам нужен файл css (каскадные таблицы стилей) для каждой html-страницы.

home.html — — — -›home.css

About.html — — — — — →About.css

contact.html — — — — →contact.css

product.html — — — — -›webPage.css, menu.css, Table.css

Итак, нам нужно создать 6 файлов css (home.css, About.css, contact.css, webPage.css, menu.css, Table.css внутри папки css.

D] изображений

Эта папка содержит все изображения, необходимые для правильной работы веб-страницы.

Д] JSON

# product.json содержит данные, необходимые для нашей веб-страницы. json содержит данные в виде пары ключ-значение.

  "prodID": 101, 
  "prodImg": "/images/cabbage.jpg",
  "prodName": "Whole Cabbage (3 lb)",
  "prodDesc": "This is our farm fresh green cabage.",
  "prodPrice": 11.95

Общая иерархия кода:

Исходный код F]

Получите исходный код проекта, используя мою учетную запись GitHub.

Ссылка на GitHub для исходного кода:

https://github.com/LataPokhrelBidary/web_page_HTML5_CSS3_JS

г] открыть приложение

# О странице: щелкните правой кнопкой мыши About.html и выберите «Открыть с живым сервером». Это откроет ваше приложение в веб-браузере, как показано ниже.

# Страница продуктов: выберите ПРОДУКТЫ из списка меню. Это откроет ваше приложение на веб-странице продукта, как показано ниже.

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

Когда вы нажмете кнопку подтверждения, вы увидите всплывающее сообщение, как показано ниже.

Когда вы нажмете кнопку «ОК», вы увидите другое сообщение, как показано ниже.

Нажмите кнопку «Сброс», чтобы очистить поле количества.

# Страница контактов: нажмите на меню контактов.

# Домашняя страница: Нажмите на главное меню.

Проверьте файлы cookie и случайную страницу опроса.

ПРИМЕЧАНИЕ: не забудьте удалить файлы cookie (удалить историю), чтобы просмотреть случайное всплывающее сообщение при второй загрузке страницы.

ПРИЯТНОГО ОБУЧЕНИЯ!!! УДАЧНОГО КОДИРОВАНИЯ!!!