Сделать шаблон верстки по полной ширине страницы и перевести таблицу расписания на вертикальную схему

sadr0b0t / vkurse

Automatically exported from code.google.com/p/vkurse

0 stars 0 forks source link

Продолжение этой темы:
http://code.google.com/p/vkurse/issues/detail?id=33&can=1&colspec=ID%20Type%20St
atus%20Priority%20Component%20Owner%20Summary

В общем, я думал над тем, как нам лучше 
решить проблему с отображением расписания 
и пришел к таким выводам:
- Горизонтальная прокрутка нас не устроит 
просто потому, что html не очень хорошо 
приспособлен для подобных шаблонов (даже 
при условии, что страница будет 
расширяться влево динамически, у нас 
поползет вся верстка например у той же 
шапки и мне не приходит в голову никаких 
мыслей, как это можно сделать красиво), а 
скролл-бар внутри страницы просто некрасив 
и неудобен.
- При выборе вертикальной модели 
расписания 7 колонок на каждый день недели 
должны вполне уместиться по ширине 
страницы - по крайней мере при моем 
разрешении 1028x1024. 
- Предыдущий пункт становится еще более 
весомым в условиях форсированной 
популяризации широкоформатных мониторов.

В общем, вертикальное расписание - наш 
однозначный выбор и для интерфейса админа 
и для интерфейса клиента.

Всвязи с этим выбором, нужно сделать в 
шаблоне верстки такие изменения:
1. Сделать так, чтобы все страницы сайта 
раздвигались по полной ширине страницы 
браузера (для этого нужно просто задать 
параметр width:100% в css для нужного дива)
1.1. Левый верхний балон "группа 794" и все 
левое меню отправляется прямо на левый 
край страницы
1.2. Московский физико-технический институт 
с логотипом - отправляются на правый край.
1.3. Расписание остается по центру - 7 стобцов 
также равномерно занимают все доступное 
пространство по ширине страницы.

2. Переделать верстку таблицы расписания на 
вертикальные дивы, как советовал в 
предыдущем треде.
2.1. Во-первых, это позволит не делать 
сложный цикл, с которым пришлось бы иметь 
дело в случае использования table.
2.2. Это позволит привести внешний вид 
таблицы к тому, как он изображен на макетах 
дизайнера, элементарным образом - нужно 
будет всего-лишь поставить фоновый цвет и 
небольшние маргины для класса див-ячейка в 
css. С таблицами в этом смысле пришлось бы 
разбираться отдельно - во-первых, сначала 
руками отключать бордеры, во-вторых 
разбираться в нюансах из стилизации под css - 
а с дивами мы уже более-менее разобрались.

Original issue reported on code.google.com by bender...@gmail.com on 25 Nov 2010 at 12:02

репост из соседней ветки http://code.google.com/p/vkurse/issues/detail?id=13 А почему само расписание - такая страшная таблица? Страшная не только в смысле дизайна (дизайн особенно ужасен), но и в архитектурном смысле - таблица. Нужно тоже переделать на DIV. И с архитектурной точки зрения это лучше и более гибко, и выглядит лучше в разы. Как пример, прототип, который я набросал за полтора-два часа. http://vkurse.apx.jr1.ru/ Элементы кликабельны - отправляют на гугл, подставив определенную фразу в запрос. Изменив ссылку и подставляя фразу "запроса" из jsp-кода, который генерирует страницу, можно, например, по клику открывать информацию о занятии. У меня все размеры забиты жестко, таблица занимает почти весь экран моего ноутбука. Если размеры и положение элементов задавать не абсолютно, а в процентах от родительских, то получается гибкая, красивая, растягиваемая табличка. У меня, правда, есть хорошая особенность - каждый вертикальный пиксель равен одной минуте. Но в jsp-коде пересчитывать проценты - не проблема. Неужели это так сложно? Прототип я набросал меньше, чем за два часа.

ответ оттуда же: Любая помощь только приветствуется - помимо самой таблицы у нас есть еще разные небольшие элементы, которые тоже нужно приводить к оригинальному виду: - левое меню - серые баллоны для ссылок (удалить/править) - красные баллоны для заголовков - стилизация кнопок под красные баллоны (если конечно <input>/css )это позволяет - стилизация комбо-боксов (если поддерживается html/css) - подгонка шрифтов (размера/начертания) и т.п. Если есть желание и время сделать что-нибудь из всего этого частично или полностью - договоритесь с Максимом, чтобы не дублировать работу. Актуальный макет дизайна для админа: http://code.google.com/p/vkurse/wiki/WebAdminNew для пользователя: http://code.google.com/p/vkurse/wiki/web_user

sadr0b0t / vkurse

Сделать шаблон верстки по полной ширине страницы и перевести таблицу расписания на вертикальную схему #41