Форум для практиков и дилетантов, в том числе - для практикующих дилетантов, а также для специалистов и профессионалов, которым есть что рассказать или есть о чём спросить наших практиков и дилетантов
Зарегистрирован: 13.09.2009 Сообщения: 840 Откуда: Санкт-Петербург
Добавлено: Вс Мар 13, 2011 4:33 pm Заголовок сообщения: HTML и все, все, все или «3С-альтернатива» в примерах
Продолжение - следует...
Далее - Цветная кнопка за пару секунд.
Спасибо. С уважением, Вадим, Природа.
_________________ Магазин Природа - старейшее в Петербурге-Ленинграде торговое предприятие, предлагает широкий выбор декоративных растений, экзотических животных и зоотоваров! Заказ и доставка товара, полезные статьи, книги, бесплатные консультации!
Последний раз редактировалось: priroda (Вт Июл 19, 2011 6:16 pm), всего редактировалось 3 раз(а)
Зарегистрирован: 13.09.2009 Сообщения: 840 Откуда: Санкт-Петербург
Добавлено: Вс Мар 13, 2011 4:39 pm Заголовок сообщения: Цветная кнопка за пару секунд
Как известно, гиперссылка есть мать навигации. И от того, как она выглядит и работает, подчас посетители сайта судят о его (сайта) достоинствах или недостатках, в том числе с точки зрения того, что наши продвинутые зарубежные коллеги называют нерусским словом «юзабилити» или, если говорить «по-простому, по-нашенски» (Шариков П.П.), «удобством использования».
И в этом случае, кнопочка, да ещё и цветная конечно выглядит попривлекательней подчёркнутых (а в некоторых браузерах и нет) букв, которые при наведении на них курсора меняют свой цвет (а в некоторых браузерах может и нет) на синий или красный, или не синий и не красный (а потому, что у именно этого пользователя такие установки на компьютере) и при этом ещё по щелчку мыши (обычно) открывают новую страницу. Это если ко всему вышесказанному вы не промахнулись во время этого щелчка, например, из-за недостаточного (может быть, лично для вас) размера font-size букв в гиперссылке…
Другое дело, кнопка навигации.
Всем хороша, кроме, пожалуй одного – её надо откуда-то взять.
И тут многие вэб-гуру советуют «скачать» кнопочку из интернета или обратиться за помощью к любому доступному графическому редактору, например, «Фото-шопу» и «быстренько» нарисовать прямоугольничек нужного цвета и размера.
Сложновато …
Однако опустим частности и будем считать, что картинка для кнопки у нас есть. Но при написании кода от этого проще не стало.
И как-то эту картинку надо обозвать, и где-то её надо хранить, а в коде придётся писать тег <img> со всеми из этого вытекающими последствиями, в частности, следуя рекомендациям современных «вэб-стандартов», обязательно указывая в этом теге width и height картинки, а также прописывая в её alt альтернативный текст, а то и «заголовок»-подсказку в title. Да, и не забыть в конце поставить «косую»!
В общем, тут байтик (для написания «лишнего» кода), там байтик (для хранения картинки), вот и набежало… И всё это только для того, чтобы при наведении курсора на цветной прямоугольничек, щёлкнув мышкой можно было перейти по гиперссылке!
А если размер кнопки надо будет изменить? Или фантазия потребует для нужд навигации десяток-другой разных по размеру и цвету кнопочек?
Сделаем проще – возьмём немножко «чистого HTML-я» со «стилями» (типа технологии «3С-альтернатива») и всё.
Первое. Прописываем в коде нашей страницы тег <div> со всеми необходимыми для решения поставленной задачи атрибутами: width и height определяют размеры будущей кнопки (например, в пикселях), left и top задают координаты левого верхнего угла кнопки на странице, для того, чтобы эти координаты «привязать» к началу страницы, укажем position, а для того, чтобы кнопка не потерялась, расположим её на странице повыше с помощью z-index, ну а в background зададим её цвет, например, жёлтый (yellow).
Для отображения вышесказанного напишем следующий код:
<div style="position:absolute; z-index:10; width:300px; height:100px; left:200px; top:100px; background: yellow"></div>
и в результате на странице в заданном месте появится «жёлтенький» прямоугольничек шириной 300 и высотой 100 пикселей. Пустой.
Сразу оговоримся: прямоугольничек с заданными характеристиками однозначно появится при использовании для открытия страницы любого из ныне известных браузеров, кроме … , ну конечно, некоторых версий браузера «Интернет Эксплорер». Этому «ослику IE» недостаточно объявления на странице слоя div. Ему требуется, чтобы в этом слое (контейнере, блоке) что-нибудь было и при этом, не важно что.
Поэтому …
Второе. Возьмём «обычную» (текстовую) гиперссылку «куда-нибудь», которая, как известно, выглядит в коде, например, так:
<a href="куда-нибудь" title="это ссылка куда-нибудь">текст ссылки</a>.
Так как в этом случае текст внутри ссылочного тега будет отображаться на странице так, как это определено «штатными» установками используемого браузера, то для «любителей всего красивого» можно предложить оформить текст гиперссылки как-нибудь по-своему, поместив его в, например, тег <p style="font-size:30px">, хотя никто не мешает использовать в этом случае что-нибудь «поинформативнее», типа <b> или <span> (и т.д., и т.п. - выбор «по вкусу»).
В итоге получаем следующую строку кода:
<a href="куда-нибудь" title="это ссылка куда-нибудь"><p style="font-size:30px">текст ссылки</p></a>,
которая выводит гиперссылку в виде подчёркнутого (обычно) текста установленного на компьютере или браузере шрифта «стандартного» цвета, в нашем случае, размером (для наглядности) 30 пикселей.
Третье. Дабы не обижать «ослика» (шутка), поместим эту конструкцию в подготовленный выше «контейнер»:
<div style="position:absolute; z-index:10; width:300px; height:100px; left:200px; top:100px; background: yellow"><a href="куда-нибудь" title="это ссылка куда-нибудь"><p style="font-size:30px; padding:25px 0 0 10px">текст ссылки</p></a></div>
и на нашей страничке появилась кнопка навигации жёлтого цвета с «объектом целенаведения» (об этом в другом месте, попозже и поподробнее) для гиперссылки в виде текста «браузерного» цвета, «отцентрированного» в кнопке с помощью значений отступа padding (здесь указаны расстояния от краёв кнопки-слоя div сверху, справа, снизу и слева, соответственно).
Ура! У нас есть элемент навигации в виде кнопки, такой же как, например, используется для оформления горизонтальных меню на сайте интернет-магазина «Books.ru».
Однако, проблема, о которой было сказано выше, недостаточного (может быть, лично для вас) размера font-size букв в гиперссылке для её уверенной активации остаётся. Ссылка работает, если (прицелившись) попасть курсором в текст на кнопке, при том, что сама кнопка (помимо той её части, что занята текстом) остаётся пассивной.
Ну, вот, раскритиковали использование картинок для нужд навигации и на тебе! А картинки, кстати, активны при наведении на них курсора (если они, конечно, используются в гиперссылке) на все 100%!
Но и в этом случае и без «Меллера» есть решение.
Поменяем в коде местами теги слоя <div…> и гиперссылки <a…> (и, само собой, их ответные части) и получим следующий код для получения 100%-но активной кнопки без всяких картинок:
<a href="куда-нибудь" title="это ссылка куда-нибудь"><div style="position:absolute; z-index:10; width:300px; height:100px; left:200px; top:100px; background: yellow"><p style="font-size:30px; padding:25px 0 0 10px">текст ссылки</p></div></a>
и всё…
Хотя ... мы забыли про «ослика».
Этот браузер при использовании кода приведённого выше в ряде случаев «упрямо» не будет менять вид курсора (обычно, стрелочка) при наведении на гиперссылку (обычно, на «указующий перст»). Придётся дать ему пряник (о некоторых пряниках поподробнее см. http://magpriroga.3nx.ru/viewtopic.php?t=58 ) в виде стилевого правила для тега гиперссылки типа style="display:block".
То есть, делаем изначально строчный элемент гиперссылки блочным, что для большинства браузеров очевидно по сути (строчный элемент в который помещается блочный «автоматически» становится блочным – великий принцип аналогии).
Ну, и для пущей уверенности добавим для IE правило cursor:pointer и уберём подчёркивание текста гиперссылки (это же кнопка всё-таки!) с помощью text-decoration:none. И, кстати, если принципиально появление подсказки из атрибута title исключительно для всё того же «ослика» поместим этот атрибут из тега гиперссылки <a…> в тег контейнера <div…>.
Итого:
<a href="куда-нибудь" style="display:block; cursor:pointer; text-decoration:none"><div style="position:absolute; z-index:10; width:300px; height:100px; left:200px; top:100px; background:yellow" title="это ссылка куда-нибудь"><p style="font-size:30px; padding:25px 0 0 10px">текст ссылки</p></div></a>.
Далее - Активная рамка за пару секунд.
Спасибо. С уважением, Вадим, Природа. _________________ Магазин Природа - старейшее в Петербурге-Ленинграде торговое предприятие, предлагает широкий выбор декоративных растений, экзотических животных и зоотоваров! Заказ и доставка товара, полезные статьи, книги, бесплатные консультации!
Последний раз редактировалось: priroda (Вт Июл 19, 2011 6:16 pm), всего редактировалось 1 раз
Зарегистрирован: 13.09.2009 Сообщения: 840 Откуда: Санкт-Петербург
Добавлено: Чт Мар 17, 2011 5:57 pm Заголовок сообщения: Активная рамка за пару секунд
… А, собственно, чем мы хуже «Майкрософт»? У них повсеместно используются «окна» (в смысле, «виндовс») для создания «оконного» интерфейса, а мы сделаем интерфейс «рамочный» (не путать с «рюмочный»), то есть поместим наши страницы в рамки, причём, активные.
Для чего?
Во-первых, с учётом многообразия браузеров, а следовательно имеющихся вариантов «их видения» как отображать наши страницы в обрамлении собственно «браузерных» же менюшек, иконок, окон поисковиков и тому подобного, страница в рамке будет полностью соответствовать современным требованиям «веб-стандартов» по созданию «интуитивно понятного интерфейса», так как «логически» будет отделена нашей рамкой от прочего содержимого «браузерного» окна.
И, кстати, вопрос о различиях в размерах «пустых» полей (внизу и справа), который каждый из браузеров может решать по-своему, перестаёт быть для нас и прочих любителей точности актуальным.
Во-вторых, сделав рамку активной, мы получаем дополнительный элемент навигации, причём неразрывно (физически и «смыслово») связанный с обрамляемым этой рамкой контентом.
Впрочем, сразу оговоримся, если такой элемент навигации не нужен, то вполне можно обойтись при оформлении страницы просто рамкой (для наглядности) без её активации гиперссылкой.
Точно также можно предложить при необходимости поместить в рамки не только собственно саму страницу, но и выбранные для этого её области или элементы, например, картинки.
Справедливости ради надо заметить, что последнее предложение, конечно, гораздо проще реализуется заданием при описании страницы или её частей значений соответствующих атрибутов свойства border в интересующих нас тегах.
Но не для случаев «активной» рамки…
Итак.
Воспользуемся кодом из примера выше, слегка изменив размеры слоя внутри тега гиперссылки, а также его цвет:
<a href="куда-нибудь" style="display:block; cursor:pointer; text-decoration:none">
<div style="position:absolute; z-index:10; width:400px; height:300px; left:200px; top:100px; background:red" title="это рамка со ссылкой куда-нибудь"></div></a>.
В результате получаем прямоугольник красного цвета размером, для примера, 400 на 300 пикселей, при наведении курсора на который можно активировать ссылку «куда-нибудь».
Поверх полученного слоя поместим похожую конструкцию из слоя <div…> с вложенным в него абзацем <p…> с неким текстом:
<div style="position:absolute; z-index:10; width:350px; height:250px; left:225px; top:125px; background:yellow" title="это страница в активной рамке">
<p style="font-size:30px; padding:100px 0 0 10px">содержимое страницы</p></div>.
Эта конструкция в данном случае будет изображать из себя некое подобие страницы или её фрагмента (для наглядности) жёлтого цвета с содержимым в виде текста из абзаца тега <p…>. Сразу отметим, что вместо абзаца с текстом внутрь «страничного» слоя можно поместить всё, что угодно, например, картинку.
Благодаря абсолютному позиционированию, заданному при описании слоёв с помощью стилевого правила position:absolute, размещение этих слоёв относительно начала страницы и друг друга определяется согласно значениям «координатно-габаритных» атрибутов width, height, left и top тегов <div…>.
Изменяя эти значения можно не только размещать «контент в активной рамке» в любом месте страницы, но и легко менять размеры всей конструкции, а также толщину самой активной рамки (всей или отдельных её сторон).
Последнее предложение может быть особенно актуальным в случае применения при оформлении страницы так называемого «резинового» дизайна.
На всякий случай напишем код полностью:
<a href="куда-нибудь" style="display:block; cursor:pointer; text-decoration:none">
<div style="position:absolute; z-index:10; width:400px; height:300px; left:200px; top:100px; background:red" title="это рамка со ссылкой куда-нибудь"></div></a>
<div style="position:absolute; z-index:10; width:350px; height:250px; left:225px; top:125px; background:yellow" title="это страница в активной рамке">
<p style="font-size:30px; padding:100px 0 0 10px">содержимое страницы</p></div>.
И напоследок: в случае, если применение атрибута title с описанием содержимого в рамке в верхнем («страничном») слое покажется излишним или просто необязательным, советуем оставить в коде хотя бы «пустышку» в виде title="", так как при отсутствии такого атрибута в верхнем теге <div…> «единственный и неповторимый» браузер, ну конечно, «Интернет Эксплорер» при наведении курсора не только на область активной рамки, но и на собственно лежащую поверх неё пассивную страницу будет «упрямо» выводить «нижнюю» подсказку (в случае нашего примера, заголовок title="это рамка со ссылкой куда-нибудь").
Далее - HTML-шатлы или слои многоразового использования.
Спасибо. С уважением, Вадим, Природа. _________________ Магазин Природа - старейшее в Петербурге-Ленинграде торговое предприятие, предлагает широкий выбор декоративных растений, экзотических животных и зоотоваров! Заказ и доставка товара, полезные статьи, книги, бесплатные консультации!
Добавлено: Сб Сен 08, 2012 9:05 am Заголовок сообщения:
Добрый день!
Сайт который у Вас построен, хорош на начальной стадии открытия проекта, пора расти.
Что я предлагаю:
1. Сменить Ваш сайт на хороший бесплатный движок CMS от WordPress.
2. Установить тему с уже готовым вариантом электронного магазина или просто с помощью плагинов создать возможность электронных заказов.
Движок WordPress очень гибок и прост в управление. Решать Вам.
Зарегистрирован: 13.09.2009 Сообщения: 840 Откуда: Санкт-Петербург
Добавлено: Сб Сен 08, 2012 9:39 am Заголовок сообщения:
Здравствуйте.
Спасибо, мысль интересная. Один наш одногрупник из "В Контакте" http://vkontakte.ru/club12030880 уже предлагал помощь в этом вопросе, но ... так руки и не дошли воспользоваться.
А нынче опять на неделю в командировку.
В итоге имею встречное предложение - Вам, подтянем (не)указанного выше одногрупника (тоже кстати заинтересованного в наших товарах), м.б. ещё кто примкнёт и сделаем нормальный, удобный, и т.д., и т.п. сайт-интернет-магазин "Террариумный Центр", где всем интересующим будет предложена огромная линейка террариумов и террариумного оборудования от "Репти-Зоо" (сейчас мы только ещё начали и то ли ещё будет, спасибо Сократу http://vk.com/club38016055 ) и всего этому оборудованию в частности и террариумистике вообще сопутствующего (кокосовый субстрат и прочее) по (это кредо) нормальным человеческим ценам и соответствующего качества.
Готов 17-го сентября по возвращении с московской выставки "Парк-Зоо" продолжить разговор.
Спасибо. С уважением, Вадим, Природа.
P.s. А сайт "Природа" пусть останется для проб (и ошибок). Я ещё в 3-м CSS и 5-м HTML ... не разочаровался _________________ Магазин Природа - старейшее в Петербурге-Ленинграде торговое предприятие, предлагает широкий выбор декоративных растений, экзотических животных и зоотоваров! Заказ и доставка товара, полезные статьи, книги, бесплатные консультации!
Добавлено: Сб Сен 08, 2012 11:23 am Заголовок сообщения:
Для начала надо передумать имя домена на котором это все разместиться, а почему только террариумов, там можно все размещать любой товар просто товар хочется видеть как он выглядит.
Что бы не терять время я начну строить по тихонько на тест площадки, результаты покажу.
Зарегистрирован: 13.09.2009 Сообщения: 840 Откуда: Санкт-Петербург
Добавлено: Сб Сен 08, 2012 11:27 am Заголовок сообщения:
Я работаю с BizHost, всё устраивало.
Мало того, там же под magazin-priroda.ru у нас есть возможности для создания других площадок.
А с именем домена - разберёмся... После 17-го, я уехал.
Спасибо. С уважением, Вадим, Природа. _________________ Магазин Природа - старейшее в Петербурге-Ленинграде торговое предприятие, предлагает широкий выбор декоративных растений, экзотических животных и зоотоваров! Заказ и доставка товара, полезные статьи, книги, бесплатные консультации!
Вы не можете начинать темы Вы не можете отвечать на сообщения Вы не можете редактировать свои сообщения Вы не можете удалять свои сообщения Вы не можете голосовать в опросах