Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Октябрь, 2016

Создание фреймов

Для создания фрейма используется тег , который заменяет тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги , которые указывают на HTML-документ, предназначенный для загрузки в область (рис. 1).

Рис. 1. Пример разделения окна браузера на фреймы

Для размещения фреймов, как показано на рис. 1, код будет следующий.

Пример 1. Создание двух фреймов

   

Заметьте, что в примере 1 используется другой тег , чем в обычных HTML-документах, это связано с применением фреймов. Указанный применяется только для главной страницы, определяющей структуру фреймов.

В данном примере окно браузера разбивается на две колонки, левая занимает 200 пикселов, а правая — оставшееся пространство заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.

В теге задается имя HTML-файла, загружаемого в указанную область, с помощью параметра src. В левое окно будет загружен файл, названный menu.php, а в правое — content.php. Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно.

Рис. 2. Пример разделения окна браузера на фреймы

Если нужна более сложная структура фреймов, например, как показано на рис. 2, теги можно вкладывать один в другой (пример 2).

Пример 2. Создание трех фреймов

           

Первый тег разбивает окно браузера на две строки шириной 10 и 90 процентов. А следующий, вложенный — создает две колонки, как и в примере 1.

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

Записки о сайтостроении

Черканул admin | В рубрике WordPress Среда Фев 18, 2015

Создать поиск по WordPress, даже если его нету.
Открыть полный листочек »

Черканул admin | В рубрике CSS, HTML Среда Фев 18, 2015 Черканул admin | В рубрике WordPress Воскресенье Фев 8, 2015

Шорт код — это код в квадратных скобках, который в большинстве случаев выводит какую либо чать плагина или дополнения на сайте. Открыть полный листочек »

Черканул admin | В рубрике WooCommerce Понедельник Янв 26, 2015

Для этого есть прекрасный плагин нзывается Открыть полный листочек »

Черканул admin | В рубрике HTML Суббота Янв 24, 2015 Черканул admin | В рубрике Joomla Воскресенье Янв 11, 2015

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

Черканул admin | В рубрике phpmyadmin Суббота Янв 10, 2015 Черканул admin | В рубрике WordPress Понедельник Янв 5, 2015 Черканул admin | В рубрике WordPress Суббота Дек 13, 2014

This is somewhat embarrassing, isn’t it?
It seems we can’t find what you’re looking for. Perhaps searching can help. Открыть полный листочек »

Черканул admin | В рубрике Joomla Суббота Сен 27, 2014

Если у вас выскакивает при удалении копирайтов белая страница и надпись Please keep the footer links intact! Есть очень простой способ

Открыть полный листочек »

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

Списки HTML предназначаются именно для таких функций и имеют несколько графических вариаций в зависимости от специфики сайта и пожеланий владельца, как именно подать эту информацию.

Виды и особенности создания списков HTML

В зависимости от графического вида и структуры списки HTML бывают нескольких видов:

  • нумерованные списки;
  • маркированные;
  • списки определений;
  • многоуровневые списки.

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

    и

  • , где при каждом добавлении элемента списка надо устанавливать маркер. Если ничего не менять, то список выйдет по умолчанию – обычный кружок. Сам контейнер имеет вид , а в него уже помещается начинка, то есть будущие элементы списка. В конечном итоге список будет иметь следующую структуру: .

    Нумерованный список имеет другой внешний вид. Создается нумерация при помощи тега

      и вложенных в него тегов

    1. . По умолчанию данный список будет отображаться обычными арабскими цифрами.

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

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

      Маркированный список

      .

      Маркеры могут принимать один из трех видов: круг (по умолчанию),
      окружность и квадрат. Для выбора стиля маркера используется атрибут type=»» тега

        Значение атрибута type=»»

        • disc — закрашенный кружок (по умолчанию);
        • circle — не закрашенный кружок;
        • square — закрашенный квадратик.

        Пример HTML — кода, с закрашенным кружком.

        Формы

        • Яблоко
        • Груша
        • Вишня

        Результат:

        Нумерованный список

        .

        Нумерованные списки представляют собой набор элементов с их порядковыми номерами.Вид и тип нумерации зависит от атрибутов тега

          ,который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом

        1. Значение атрибута type=»»

          Номерация арабскими цифрами — 1; 2; 3;….и т.д.

          Большими римскими цифрами — I; II; III; …..

          Большими латинскими буквами — A; B; C;…

          Маленькими латинскими буквами — a; b; c;….

          Пример:

          Нумерованный список.

          1. Вишня
          2. Груша
          3. Яблоко

          Результат:

          У тега

            есть атрибут start=»», при помощи которого не имеет значение, какой список установлен с помощью атрибута type=»», он работает и с римскими и арабскими числами.

            Пример: Зададим type=»A» арабские буквы, start=»3″ цифра три означает начать список с третьей буквы.

            Нумерованный список.

            1. Вишня
            2. Груша
            3. Яблоко

            Результат:

            Список определений.

            Список определений состоит из двух элементов — термина и его определения.  Cписок задается с помощью контейнера , термин — тегом , а его определение — с помощью тега . Список определений хорошо подходит для расшифровки терминов.

            Пример:

            HTML>

            Язык гипертекстовой разметки

            CSS

            Каскадные таблицы стилей

            Результат:

            HTML Язык гипертекстовой разметки. CSS Каскадные таблицы стилей.

По умолчанию ширина слоя принимает значение auto, и слой, как правило, занимает всю доступную ширину. Поэтому описанным методом по центру можно выровнять только такой слой, у которого явно задана ширина в процентах или пикселах. После чего к стилю слоя следует добавить отступ слева (параметр margin-left) и справа (margin-right) со значением auto. Впрочем, можно воспользоваться универсальным атрибутом margin со значением 0 auto. Первый аргумент задает нулевое значение отступов сверху и снизу от слоя, а второй — слева и справа.

Пример

Выравнивание слоя по центру #center {  width: 200px;  padding: 10px;  margin: 0 auto;  background: #fc0; } Lorem ipsum dolor sit amet…

В браузере Internet Explorer выравнивание слоя работает только при установленном DOCTYPE.

htmlcssmanual.ru — Последствия

Последствия

Уже через несколько дней стали приходить варианты дизайна от посетителей сайта; за первую же неделю трафик вырос до нескольких тысяч посетителей в день. Люди вызывались добровольно перевести сайт на десятки других языков. Сразу стало понятно, что Zen Garden сумел удовлетворить долго накапливавшийся спрос, для которого в Web не было никаких других предложений.

С тех пор сайт Zen Garden упоминался в десятках журналов, издаваемых в разных странах, и во множестве книг, так что его канонический статус в истории вебдизайна можно считать зафиксированным. Со всего света приходят благодарственные письма от дизайнеров и разработчиков, которым с помощью этого сайта удалось убедить своих работодателей, клиентов и коллег в ценности дизайна на основе CSS. А многие из тех, кто прислал свои работы, испытали резкое ускорение в своем карьерном росте, ощутив мощное воздействие сайта Zen Garden.

Хотя сайт Zen Garden создан и поддерживается одним человеком, он тем не менее является плодом коллективных усилий добровольцев. Своим успехом он обязан многим талантливым дизайнерам, приславшим свои работы. Каждый находит в Zen Garden что-то свое и, хотя этот сайт задумывался главным образом ради демонстрации ценности CSS для целей дизайна, но у него обнаружились и другие, заранее неведомые достоинства.

  • Дизайнерам, решающим проблему верстки, теперь есть куда обратиться, если что-то не получается; когда в одном месте собраны сотни работ, шансы, что кто-то раньше уже сталкивался с подобной задачей, весьма высоки. Использовать представленные на сайте таблицы стилей в качестве образца для верстки допустимо и даже поощряется.

  • Там же можно найти новые способы применения CSS и создания различных эффектов. Вполне вероятно, что среди сотен вариантов вы найдете для себя что-то новенькое.

  • Это замечательный способ проверить поведение браузера. Весь код заведомо корректен и соответствует стандартам, так что теоретически страницы должны одинаково выглядеть в любом браузере. (На практике так обстоит дело не всегда. Из-за ошибок и отсутствия поддержки для некоторых элементов в конкретном браузере дизайнерам приходится учитывать возможные различия во внешнем виде, применяя для этого всяческие CSS-фильтры и уловки.)

  • Именно сюда приводят работодателей и клиентов, когда хотят убедить их в пользе дизайна на основе стандартов. + Это прекрасное лекарство от творческого застоя. Ничего не выходит? Загляните в поисках вдохновения.

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

  • Преподаватели находят этот сайт полезным инструментом для обучения современным методам вебдизайна.

htmlcssmanual.ru — Дизайн

Дизайн

дизайн   css   web  

Процесс веб-дизайна претерпевает драматические изменения, но его принципы остаются прежними. Думаете ли вы о выборе палитры, визуальном потоке, об эффектном использовании образов или управлении визуальной близостью страничных элементов-традиционные ценности остаются в силе. Обсуждаемые в этой главе варианты дизайна иллюстрируют эту точку зрения, отвечая одновременно на вопрос, все чаще встающий перед современными дизайнерами: как эффективно управлять технологическим процессом? Вне зависимости от того, что вы предпочитаете: работать с Adobe Photoshop, готовить эскиз, создавать прототип с помощью CSS или сразу приступать к кодированию, вы обязательно найдете в этой главе новые для себя полезные приемы.

Засеваем почву

css  

 В конце 2002 года над этой проблемой задумался создатель сайта Zen Garden Дэйв Ши. Как далекие от изящества примеры могут вдохновить людей, способных создать с помощью CSS истинные шедевры? Поскольку у Дэйва был опыт и в кодировании, и в графике, то он сумел распознать потенциал CSS в качестве языка дизайнера, И понял, что им пользуются не те люди, которые должны бы. В результате зародилась идея: а здорово было бы создать центральное хранилище лучших дизайнерских работ с применением CSS. Очевидно, недостаточно было просто собрать имеющееся, поскольку ничего вообще не было. Воодушевить дизайнеров на создание новых прекрасных работ — вот ключ к реализации идеи. Так были посеяны семена нового проекта.

Первые попытки

Идея сайта Zen Garden созрела, и в мае 2003 года Ши поместил плоды своих трудов на собственный сайт www.mezzoblue.corn, а затем довольно быстро перевел их в домен www.csszengarden.com, где сайт существует и по сей день. В конце 2002 года Ши уже начал разрабатывать предварительные прототипы Zen Garden, пользуясь четырьмя разными таблицами стилей, выражающими идею четырех античных стихий: земли, воды, огня и ветра. В то время разработка не была доведена до конца, и графика использовалась не слишком интенсивно. Как видно из рисунка первые наброски Zen Garden не особенно впечатляли. Дизайн был скучным именно потому, что ему не хватало броской графики. Фоновые изображения были добавлены с помощью свойства background- image. Поместить же изображения на передний план не представлялось возможным. Применение тега img лишило бы дизайн гибкости, поскольку пришлось бы ограничиться единственным набором изображений. Одна лишь фоновая графика не решала проблемы, так как дизайнеру часто нужно, чтобы картинки перемежались с текстом, а не просто находились под ним. Поэтому фоновая графика давала лишь частичное решение.

Обходной путь был найден, когда Дуглас Боумен (Douglas Bowman) опубликовал ставшую теперь знаменитой статью «Использование фоновых изображений для замены текста». Тогда-то все и стало на свои места: поместить картинки на передний план можно было, привязав их к различным текстовым элементам на странице и заменив графическими эквивалентами. Технология CSS в совокупности с дополнительной настраиваемой разметкой позволяла заменить строчные текстовые элементы фоновыми изображениями-аналогично тому, как ведет себя тег img с подходящим атрибутом alt. В апреле 2003 году началось серьезное планирование сайта Zen Garden. Был создан единый HTML-файл, к которому было применено пять разных вариантов дизайна: Жажда крови, Безмятежность, Плавленный сыр с лососем, Шторм, Четыре арки

Основной вариант дизайна-«Безмятежность»

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

Все изображения и текст в основном варианте дизайна, за исключением текста в самом теле страницы, были нарисованы в Adobe Photoshop. Сначала предполагалось, что тексты заголовков будут состоять из нарисованных вручную каллиграфических штрихов, но, потратив час на работу с кисточкой и тушью, Ши решил, что шрифт Calligraphic 421 от компании Bitstream подходит гораздо лучше.

Китайским иероглифам присуща замысловатость и внутренняя красота, поэтому многие дизайнеры любят дополнять ими свой замысел. Пытаясь уйти от типичной западной привычки вставлять бессмысленный набор иероглифов для придания таинственности, Ши потратил некоторое время на то, чтобы иероглифы на вертикальном свитке, идущем вдоль левогс края страницы, имели определенный смысл. И хотя идея была хороша, но результат все равно получился не слишком вразумительным: выбранные иероглифы означают «начало», «полный» или «целый» и «умение».

Помните, как детьми вы развлекались, капая тушью на лист белой бумаги и дуя на кляксу через соломинку1 В результате получалась черная древовидная фигурка, которую можно было перевести на мятую салфетку и представить как цветок. Дерево в правом верхнем углу страницы — это дань воспоминаниям о таких забавах. На рис 13 показано, что оно прошло несколько этапов, Сначала простыми цветами был нарисован грубый эскиз, а затем добавлено несколько слоев с деталями.

htmlcssmanual.ru — CSS

Книги CSS

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

Оглавление