Разработка и создание сайта "Синьор Пекарь" (стр. 6 из 7)
Для удобства передвижения по сайту внизу показано, на какой странице внутри рубрики находится пользователь (рубрикой считается каждая кнопка из панели навигации). Также предлагается ссылка на главную страницу.
5. ДЕКОМПОЗИЦИЯ МАКЕТА НА СТРУКТУРНЫЕ БЛОКИ И МОДУЛИ
5.1 Разработка модульной сетки на основе утвержденного макета
Модульная сетка представляет собой набор невидимых направляющих, вдоль которых располагаются элементы web–страницы. Это облегчает размещение данных в документе, обеспечивает визуальную связь между отдельными блоками и сохраняет преемственность дизайна при переходе от одной страницы к другой.
Web–страница фактически рассматривается как набор прямоугольных блоков, которые выкладываются в определенном порядке. При этом, как правило, данные располагаются по колонкам, поэтому при верстке применяют термин одно–, двух–, трехколонный макет и т.д.
Модульные сетки помогают упростить верстку сайта, потому что весь материал разбивают по отдельным блокам, которые потом выравнивают по невидимым направляющим линиям. И хотя эти блоки и взаимосвязаны между собой, но обычно позволяют независимое редактирование данных, что в свою очередь упрощает оформление.
Перед созданием web–страницы в HTML–редакторе, удобнее сделать набросок на бумаге. Это сократит время на выбор типа модульной сетки, которая в дальнейшем будет применяться. В зависимости от количества материала и целей сайта применяют различные типы модульной сетки (одно–, двух, трех или многоколонную). Необходимо помнить, чем больше колонок, тем больше возможностей по изменению вида дизайна, но и сложнее верстка такого макета. Мой вариант будет представлен в виде двухколонной модульной сетки.
Рисунок 32– Пример двухколонной модульной сетки
Рисунок 33 – Двухколонная модульная сетка внутренней страницы моего сайта
5.2 Разработка руководства по стилю
В данном разделе я указала в виде таблицы руководство по стилю, которое включает в себя следующие элементы:
· заголовки и подзаголовки;
· основной текст;
· ссылки;
· форматирование таблиц;
· цвет фона;
· размер графических элементов.
Таблица 2 – Руководство по стилю графического и HTML–текста для Web–сайта
| Style (Стиль) | Example | Font settings |
| Headlines (Заголовок) | Приготовление песочного теста дома | Графический текст. CambriaBold Курсив, 8 pt, Color# 9f193e |
| Subheads (Подзаголовок) | Состав: | HTML текст. Arial, size 14 pt, Color# 9f193e |
| Bodytext | · мука – 260 г, · сливочное масло – 150 г, · 1 яичный желток или целое яйцо, · сметана – 1 столовая ложка, · сахар – 2–3 столовых ложки, · ванильный сахар – 1 чайная ложка, · щепотка соли, · лимонная цедра – 1 чайная ложка (по желанию) | HTML текст. Arial, size 14 pt, Color# 9f193e |
| Background(фон) |  | Цвет фона: графический текст IMG=" fon.jpg" |
| Image 1 |  | width:235px; height:314px; |
| Image 2 |  | Header: width:958px; height:320px; |
| Image 3 |  | width: 314px; height: 209px; |
| Image 4 |  | width:495px; height:324 px; |
| Image 5 |  | width:500 px; height:375 px; |
| Image 6 |  | width:450 px; height:403 px; |
| Image 7 |  | width:515 px; height:400px; |
| Image 8 |  | width: 448px; height:336 px; |
| Image 9 |  | width:410px; height:589 px; |
| Image 10 |  | width:400 px; height:220 px; |
| Image 11 |  | width:640px; height:480px; |
| Image 13 |  | width:448 px; height:336px; |
| Image 14 |  | width:478 px; height:594px; |
| Image 15 |  | width:314 px; height:10px; |
| Image 16 |  | width:314 px; height:10px; |
| Image 17 |  | width:160 px; height:76px; |
| Image 18 |  | width:160 px; height:33px; |
| Image 19 |  | width:448 px; height:15px; |
В данной главе я рассмотрю оптимизацию текстового и графического контента моего сайта, поэтому оптимизацию сайта я условно разделю на две части: текстовая и графическая оптимизация.
Текстовая оптимизация – свой текст я брала из кулинарных книг. Особенных каких–либо изменений не вносила. При подготовке текста к верстке я убрала слишком непонятные слова, которые могут встретиться неопытному кулинару, и разбила его на абзацы, чтобы он воспринимался легче. Создала удобную навигацию для простоты перемещения по страницам. Внутри каждого раздела есть своя уникальная навигация, представленная в виде полоски со страницами. Это помогает посетителю понять, где именно на сайте он находится. Название навигационных кнопок отражают суть раздела. Для примера, предлагаю посмотреть на текст "до" и "после" оптимизации.
Исходный текст:
Одна из задач Направления "Медиа–Холдинг" – это продвижение сайтов Системы в Интернет, опыт работы в этой области – 3 года. Мы готовы предложить Структурам и Направлениям Системы только качественные и недорогие услуги в этом вопросе. Сотрудничая с нами, вы можете рассчитывать на увеличение переходов с поисковиков на продвигаемый вами сайт только тех посетителей, кто реально заинтересован в реализации проектов Системы и подключении к ним. Затраты на продвижение сайтов начинают окупать себя уже со второго месяца раскрутки!
Текст после оптимизации:
Направление "Медиа–Холдинг" занимается продвижением сайтов уже 3 года. Зарекомендовало себя на рынке поисковой оптимизациисайтов Системы в качестве профессионала. Мы готовы предложить Структурам и Направлениям Системы только качественные и недорогие услуги по оптимизации сайтов и их дальнейшей раскрутке в поисковыхсистемах. Поручая нам раскрутку вашего сайта, вы можете рассчитывать как на увеличение целевых переходов заинтересованных пользователей с поисковых систем, так и на быструю окупаемость затрат, на оптимизацию и продвижение сайта.
После оптимизации осталась суть, а все лишние обороты, которые нагружают текст, убраны.
Графическая оптимизация – все изображения подобраны по своей тематике. [3] Если это, например, песочное тесто, то и фотографии соответствующие.
Рисунок 34 – Пример оптимизации изображения
Все изображения на сайте представлены в цветовой модели RGB, изображения формата JPEG и PNG.
В зависимости от назначения изображения у меня вышли следующие эмпирические размеры: большие изображения – 410px × 589px (367 kb), средние изображения – 448 px × 336 px (91 kb), основное изображение – 235px ×314px (30 kb),кнопки навигации – 314px × 31 px (11 kb), фоновое изображение – 960 px × 595 px (18 kb).
7.1 Разработка физической и логической структуры сайта
В данной главе я рассмотрю логическую и физическую структуры сайта, для того чтобы по созданной мной таблицей было наглядно видно что где находится.
Таблица 3 – Оформление документированного проекта
| Имя файла | Директория | Описание |
| index.html | /www | Стартовая страница сайта |
| pesochnoe_testo.html | /pesochnoe_testo | Стартовая страница "Песочное тесто" |
| biskvitnoe_testo.html | /biskvitnoe_testo | Стартовая страница раздела "Бисквитное тесто" |
| drozhzhevoe_testo.html | /drozhzhevoe_testo | Стартовая страница раздела "Дрожжевое тесто" |
| sloenoe_testo.html | /sloenoe_testo | Стартовая страница раздела "Слоеное тесто" |
| recept_dnya.html | /recept_dnya | Стартовая страница раздела "Рецепт дня" |
По данной таблице я составила физическую и логическую структуру сайта.