Верстка дизайна главной страницы
реклама
Отчет о проделаной роботе «Верстка дизайна главной страницы» Было сделано: 1. Нарисован логотип 2. Верстка главной страницы со следующими элементами: Меню сайта с плавающим ползунком. Всплывающая форма авторизации Всплывающая форма регистрации Мульти выбор категорий. Всплывающие сообщения Плитка товаров Предстоит доработки: 1. Форма авторизации, необходимо подключить api для подгрузки стран/городов. 2. Доработать ползунок для возврата на активную страничку. Пояснение к файлам проекта: 1. 2. Структура файлов в проекте: Index.html – html файл, содержит разметку страници тегами . Css – папка в которой хранятся все файлы стилей. Img - папка с изображениями, подгружаемых на страницу Js – папка javascript-ов и доп. Библиотек. Файл index.html: Содержит семантичесскуюраз метку странички. Для построения полученой странички использовался механизм блочной верстки(метод при котором элементы страницы разбиваются на блоки, при этом один блок может содержать несколько вложеных блоков, т.к. блок в блоке, а затем делается позиционирование этих блоков). Структура: Раздел head содержит подключаемый модули и мета теги. Блок с id wrapper (начинается с <div id="wraper">) – содержит обертку страницы, ним я группирую все остальные области в одну, затем всей этой области придаем стили теней и т.п. Блок с id header (<div id="header">) – разметка заголовка страницы. В нем содержится логотип, блок signForm – панель вызова форм регистрации и авторизации, блок searchForm – панель поиска, панель price – переход в корзину и информация о заказаных товарах. Блок с id menu (<menu id="menu">) – блок меню, содержит перечесления <li> пунктов меню. <div id="sep"><div id="menuSelect"></div></div> - разделитель между меню и телом странички, <div id="menuSelect"> - в стилях этого блока задается полоска которая будет ездить под менюшками. <div id="main"> - начало тела странички (все что между верхушкой и подвалом находится тут). <div id="category"> - блок категорий(марок товара). Содержит перечисление <ul id="filter"> - Варианты фильтра. <div id="body"> - содержит блоки товаров: <div id="good">. <div id="footer"> - подвал страницы. <div id="messageBar"> - блоки пока не функционируют(за исключением уведомления про выбраные категории), будут нужны при выводе всплывающих сообщений при регистрации и авторизации. <form id="authorization" style=display:none> - форма авторизации (отображается посредством jQuery) <form id="registration" method="POST" style=display:none> - форма регистрации(отображается посредством jQuery) 3. Папка css: reset.css – файл сброски css стилей (сбрасываем стили для кроссбраузерной верстки) style.css – файл стилей страницы 4. Папка js: function.js – пока файл не используется, будет содержать функций отправке ajax, приема, обработки формы регистрации и т.п. main.js – содержит обработчики всех наших эффектов (файл содержит комментарии) jquery.js – библиотека jquery(Внимание в проекте библиотека загружается с сервера google, это сделано для того чтобы была возможность не загружать всю библиотеку постоянно а выгрузить ее с кэша если вы заходили уже на сайт где используется эта библиотека, а вы скорее всего заходили. Если показывать сайт без интернета кэш может очистится тогда необходимо вместо в раздел <head> добавить <script src=" js/jquery.js"></script>).
