Разработка сайта автоматизированного тестирования: оформление сайта с использованием CSS
Дипломная работа - Компьютеры, программирование
Другие дипломы по предмету Компьютеры, программирование
Вµм стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов. Хотя к таблицам стиль легко добавляется, но обилие лишних тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы. К тому же не все параметры таблиц имеют свой стилевой синоним, поэтому в любом случае приходится обращаться к коду web-страницы и править его.
Несоответствие стандартам
В последнее время стандарты HTML и CSS прочно засели в умах web-разработчиков. Этому способствует развитие XHTML и XML, которые более жестко относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями.
Что же говорит спецификация относительно таблиц? А говорит она, что таблицы в первую и последнюю очередь нужны для размещения табличных данных. Все остальные способы использования таблиц осуждаются.
1.6 Блочная вёрстка
Блочная вёрстка - это вёрстка дивами или слоями, при которой весь основной каркас проектируемого сайта создаётся из отдельных блоков, которыми являются html и div-теги.
Блочный тип вёрстки используется намного чаще, чем табличный, вероятно, во многом благодаря тому, что блочная div-вёрстка обладает целым рядом значимых преимуществ. Во-первых, по сравнению с табличной вёрсткой она имеет меньший размер программного кода, а во-вторых, существенно увеличивает быстродействие страниц сайта и снижает нагрузку на сервер.
Такую вёрстку следует доверять профессионалам, так как при выполнении блочной вёрстки крайне важно следить за правильным расположением слоёв, в противном случае вы можете получить крайне неудачный проект сайта, не пользующийся особой популярностью у вашей целевой аудитории.
1.6.1 Преимущества блочной вёрстки над табличной
Есть возможность создания одновременно разных дизайнов web-страницы для различных цифровых устройств. Это очень замечательная возможность, ибо с помощью табличного дизайна порой сложно добиться нормального отображения сайта одновременно на экране компьютера, сотового телефона и КПК. CSS же спокойно помогает решать данную проблему.
Web-страница сверстанная на CSS весит гораздо меньше и быстрее загружается в браузерах. Неудивительно, ведь все данные параметров отображения документа заносятся в отдельный css-файл. За счёт этого документ становится очень легким и пользователь даже может не заметить, как быстро загрузится страничка.
За счёт того, что web-страница становится очень легкой и быстрозагружаемой, она гораздо быстрее индексируется поисковыми системами. Кроме того, сайт или блог, сделанный на CSS-вёрстке гораздо легче и удобней оптимизировать под поисковые машины и продвинуть его в ТОП.
Простота, доступность каждого элемента и малые временные затраты на то, чтобы при необходимости менять дизайн сайта или какие-то отдельные его элементы. Достаточно будет открыть один или несколько css-файлов, чтобы изменить сайт до неузнаваемости;
Каскадные таблицы стилей предоставляют дополнительные возможности оформления web-страницы, например, сделать плавающие объекты, создавать специальные блоки текста, которые будут обтекаться другим текстом и многое другое.
Из недостатков каскадных таблиц стилей, пожалуй, можно назвать лишь то, что иногда бывает сложно добиться правильного отображения дизайна сайта во всех известных браузерах. Но при профессиональном подходе эта проблема легко решается. Да и ещё - научиться владеть CSS всё же сложнее, чем обычной html-вёрсткой, но гораздо проще, чем даже самым лёгким языком web-программирования - php.
ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ
.1 Оформление шапки сайта
В верхней части сайта находится выпадающее меню, состоящее из 5 пунктов. Данное меню было создано при помощи jQuery - библиотеки JavaScript, фокусирующейся на взаимодействии JavaScript и HTML, а также CSS.
Для этого меню использовался неупорядоченный список с ссылками и текстом внутри элементов списка:
CSS
Для начала мы определяем свойства для списка
ul#navigation {: fixed;: 0px;: 0px;: 0px;: 10px;style: none;index:999999;
width:721px;
}
Список позиционируется в правом верхнем углу страницы. Навигация должна быть всегда доступна пользователю, даже если он прокручивает страницу вниз. Поэтому позиционирование необходимо зафиксировать. Все отступы и границы выставляем на 0. Навигация также должна быть поверх всех элементов на странице. Именно поэтому также выставляется высокой значение z-index. Также необходимо прописать ширину меню, чтобы элементы списка не наезжали друг на друга при изменении размера окна браузера.
Теперь перейдем к свойствам элементов списка:
ul#navigation li {: 103px;
display:inline;:left;
}
Теперь рассмотрим свойства ссылок в элементах списка:
ul#navigation li a {: block;:left;top: -2px;left:25px;: 100px;: 25px;color:#f964a1;repeat:no-repeat;position:50% 10px;:1px solid #10dbed;decoration:none;align:c