Показ дописів із міткою html. Показати всі дописи
Показ дописів із міткою html. Показати всі дописи

середа, 22 жовтня 2008 р.

Плюсы использования CSS при создании сайта

Эта статья на философскую тему раскроет общеизвестные преимущества использования CSS. Как показал личный опыт, использование CSS при разработке сайтов дает много преимуществ, которыми просто грех не воспользоваться.


Одним из главных преимуществ CSS заключается в том, что один файл CSS может контролировать внешний вид множества документов HTML(не могу сказать что делала огромнейшие сайты, но и при количестве более 5 страниц заметна явная экономия времени). Чтобы изменить вид всего сайта, достаточно отредактировать единственный файл CSS (а не огромный набор HTML-документов). Сопровождение сайта, созданного с использованием CSS ощутимо проще. CSS отделяет стили представления документов от содержимого этих документов, тем самым облегчая труд. Помимо того, частые изменения на сайте сведутся к изменению одного CSS-файла. Это сохранит значительное количество времени, особенно, если приходится редактировать каждую страницу отдельно. CSS делает код легче и чище.


Еще одним значительным преимуществом CSS является то, что сайт становится более легким для поисковой оптимизации. Причина - боты поисковиков обычно очень вялые. Они не ходят вглубь HTML-кода в поисках того, что можно проиндексировать. Шрифтовые тэги и таблицы делают HTML-код громоздким, тем самым понижают точность и качество результата индексирования. Если же использовать внешние CSS-файлы для определения атрибутов дизайна, то HTML-код становится чище и это даст лучший результат при оценке позиции в результатах поиска. Существует множество инструментов в Интернете, которые показывают соотношение кода разметки и полезному тексту на сайте. Знаете почему это нужно? Потому что современным поисковикам, таким как Google, Yahoo и MSN, нравятся “легковесные” сайты. Они желают видеть содержимое, т.е. текст, но не код. С помощью CSS это возможно реализовать.


Также CSS делает сайт более доступным. Количество пользователей, просматривающих сайты с помощью карманных устройств продолжает расти с огромной скоростью. Всегда важно, чтобы сайт был доступен всем. Выгода от CSS в данном случае в основном в разделении структуры документа от его представления. Разделяя стиль от разметки, разработчики смогут упростить и очистить HTML-код в своих документах, тем самым делая эти документы более доступными.


CSS-код загружается быстрее, чем таблицы. Браузеры читают таблицы дважды, прежде, чем выдать содержимое посетителю; первый раз, чтобы отработать структуру и затем уже определить содержимое. Более того, таблицы показываются на экране целиком, никакая из частей таблицы не может быть отображена до тех пор, пока вся таблица не будет загружена полностью и не будет готова к отображению. Весь код, который отвечает за расположение элементов, может быть помещен в отдельный CSS-документ, который будет считываться только один раз и затем будет сохранен на компьютере посетителя; тогда как расположение таблиц, сохраняемое в каждом HTML-документе, должно быть загружено каждый раз при запросе страницы.


Использование CSS позволит сайту загружаться быстрее и облегчит сопровождение, тем самым сохранит много времени и труда. Это в свою очередь позволить получить больше денежной отдачи. CSS делает ссылки на сайте более привлекательными и динамичными.


Таким образом, CSS позволяет выглядеть сайту профессионально. Все основные браузеры Firefox, Internet Explorer и Netscape на данный момент прекрасно распознают CSS.

вівторок, 21 жовтня 2008 р.

Создание горизонтального меню

Тему создания меню также нельзя обойти стороной поскольку, как и прочие элементы. Данный элемент существенно влияет на визуальное восприятие сайта. О формате визуализация меню можно говорить много и долго. Меня лично заинтересовали способы создания горизонтального меню. На этой теме я и буду акцентировать внимание.


Для начала я решила попробовать реализовать самые простые примеры, чтобы иметь общее представление.


Первый, самый простой вариант горизонтального меню можно прописать вот таким несложным способом.


Второй, простенький способ создания меню для знатоков html-а и css-а.


Всего в одной статейке не пропишешь именно по этому подкину всем желающим еще несколько полезных линков на очень даже миленький и простенькие менюшки:

http://www.clone.h16.ru/css-js/2/


http://www.jongol.ru/css/solid-block-menu.html


http://www.seo-copywrite.ru/web6/


http://www.alexilin.ru/centered-horizontal-menu/


Третий способ создания специфического меню, который не могла оставить без внимания. Порой очень даже удобное меню, которое сразу объясняет, куда приведет тот или иной пункт меню, или разъяснит, что он значит.


Четвертый вариант выпадающего горизонтального меню для страниц с "резиновым" дизайном. Замечательный, на мой взгляд, способ, который можно легко реализовать.


Пятый вариант, более сложный, но встречается довольно таки часто, а значит стоит внимания. Здесь также есть меню и подменю. Прелесть данного способа состоит в том, что он прописан достаточно просто, то есть спокойно можно разобраться. Итак, смотрим:


Еще один – шестой вариант горизонтального меню с подменю. Чтобы не создавать «испорченный телефон» предлагаю прочесть все от первоисточника.


В завершение еще несколько ресурсов, которые наверняка будут полезными при создании горизонтального меню и не только:


http://www.stunicholls.com/menu/index.html


http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html


http://cssor.ru/css/polezno-interesnoe/cssmenu


http://www.alexilin.ru/dynamic-menu-without-javascript/

понеділок, 20 жовтня 2008 р.

Редактирование кода под разное расширение монитора

Первой на что хотелось бы обратить внимание это визуальные изменения, с которыми мы сталкиваемся при просмотре сайта на мониторах с разным расширением. Мне кажется, этот момент нельзя упускать, создавая сайт, поскольку это один из самых главных аспектов. Потому как если пользователю будет визуально неудобно, скорее всего, он просто закроет страницу и не будет напрягаться.

Просканировав несколько источников, я понята, что одним html-кодом здесь не обойтись. Для этого необходимы иные знания, которыми на данный момент я не обладаю. Например, один из источников предлагает решить это проблему с помощью PHP+JavaScript. Вариант конечно, но для столь сложной задачи необходимо вовлекать в дело более компетентных людей…

Есть и еще один вариант, html-ный, но не уверенна, что он подойдет всем. Приблизительно так я себе и представляла решение, но очень сомневаюсь, что профессионалы его используют… Короче, ламерский способ:






И последний, третий вариант, редактировать с помощью небольшого фрагментика JavaScript:







И все-таки, вопрос остается открытым. Если найдутся умные люди, которые смогут мне помочь, буду очень благодарна. Я не ищу легких путей, но и PHP+JavaScript так вот сразу тоже не осилю.

 
Copyright © 2010 100 things YOU can make yourself. All rights reserved.