Как менять шрифты, цвета и размера текста с Dreamweaver CS6Среди вещей, которые веб-мастера считают, что они должны сделать, время от времени является задача изменения внешнего вида текста в некотором роде. Например, вы можете решить, что вы хотите использовать другой шрифт, сделать ваши слова казаться больше или меньше, изменить их цвет ("цвет" в американском английском ), или, что чаще, поставить некоторые слова жирным шрифтом или курсивом. Dreamweaver предоставляет различные объекты, которые вы можете использовать, чтобы выполнить эти вещи.

Если вы прибыли на эту статью извне thesitewizard.com, пожалуйста, внимание, что это 3-я глава из учебника Dreamweaver CS6 . Те, которые являются новыми для Dreamweaver могут предпочесть, чтобы начать в первой главе . Однако, если это первый сайт вы делаете, вы, вероятно, найти его будет проще, если вы начинаете с , как сделать / создать свой собственный сайт: AZ Руководство для начинающих .

Цель этой главы

К концу этой главы вы узнаете ("уроки") Как менять шрифты, цвета и размера текста, а также складывать слова жирным шрифтом и / или курсивом.

Введение в каскадные таблицы стилей (CSS)

До сих пор мы рассматривали изменения, которые вы сделали, чтобы внешний вид вашего веб-страницы, как будто они были чем-то волшебным осуществляется Dreamweaver сам. Например, в главе 2, мы по центру ("центру"), Ваш логотип, вызвав диалоговое окно, в Dreamweaver и изменение поля здесь и там. А потом, после еще нескольких процветает, привлекая дополнительный клик или два, о чудо, ваш логотип был сосредоточен.

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

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

На языке мастер, эти метки известны как классы , и они могут быть применены к любому количеству объектов на веб-странице. Например, если у вас есть несколько фотографий на веб-странице, все с той же ширины, как ваши логотипом сайта, вы можете даже маркировать все из них "логотип". И все они будут в конечном итоге с тем же правилам, применяемые к ним, то есть все они будут по центру. Чтобы поставить его в более техническом образом, вы можете назначить несколько элементов на веб-странице того же класса. Любые правила, которые вы создаете для этого класса будет применяться ко всем из них.

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

Те из вас, которые находят длинные лекции снотворное, вероятно, будет интересно (с глубоким чувством страха), почему я вам все это рассказываю. В конце концов, не является одной из причин вы используете визуальный редактор, как Dreamweaver, чтобы можно было избежать того, чтобы слоняться без дела со всем этим вызывающие мигрень фетиш?

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

В любом случае, вы будете создавать ряд правил CSS начиная с этой главы, хотя и косвенно, через меню Dreamweaver и диалоговых окнах. Таким образом, даже если вы задремали на протяжении большей части приведенных выше объяснений, вы по крайней мере знаю, что это таинственное "CSS" можно сказать.

Изменение шрифтов, размер текста и цвет в Dreamweaver CS6

  1. Если вы бросить Dreamweaver с момента последней главе, запустить его снова и открыть домашнюю страницу, которую вы так долго работали с Глава 1. Вы можете сделать это с помощью двойного щелчка " index.html "линии в панели файлов.

  2. Как уже упоминалось в моем краткое введение в CSS ранее , вы будете в первую очередь необходимо создать правило CSS. Это можно сделать, нажав на кнопку "Формат | Стили CSS | Новый ..." из меню. Вспомните из предыдущих глав, что это означает нажать кнопку "Формат" в строке меню, а затем "Стили CSS" из выпадающего меню и "Новый ..." из подменю, которое появляется.

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

    Нажмите на выпадающем списке для "тип селектора" поля (верхнее поле) и выберите "класса (можно применить к любому элементу HTML)". Если поле уже показывает, что вариант, просто переходите к следующему шагу.

  4. Нажмите однострочный пустое место для "имя селектора" поле. Это поместит мигающий текстовый курсор в поле. Теперь вы должны дать имя классу.

    Имя класса лишь некоторые произвольное имя, ты придумываешь. Например, если вы хотите использовать Times New Roman шрифт для всех вхождений ваши имена продукт на веб-страницы, вы можете создать класс с именем "PRODUCTNAME" и положил правило, которое говорит ничего с этим классом будет отображаться с Times New Roman шрифт. Тогда вы можете найти на странице, чтобы найти все экземпляры продукции, и назначить эти слова "PRODUCTNAME" класса. Это приведет к тому, как Dreamweaver и браузерах посетителей, чтобы показать эти слова в Times New Roman.

    Как вы уже догадались, вы на самом деле не должны использовать "PRODUCTNAME" для вашего класса. Последняя является лишь пример, который я изобрел для этого урока. Не стесняйтесь монеты другое название. Однако обратите внимание, что все имена классов должны начинаться с буквы алфавита. Оставшаяся часть названия (кроме первой буквы) может содержать либо букв или цифр, но не может содержать знаков препинания и пробелов. Так именами, как "companyslogan" и "PRODUCTNAME" это хорошо, но не "слоган компании" или "название продукта", так как последние два содержать пробелов.

    Это обычно считается хорошей практикой использовать имена, которые описывают содержание, которое они связаны. Например, если ваш план должен поставить все ваши наименований, Times New Roman, лучше вызывать соответствующие классу "PRODUCTNAME", а не "TimesNewRoman". Таким образом, если вы передумаете и хотите использовать Comic Sans для вашей продукции, все что вам нужно сделать, это изменить правила, связанные с классом, и все ваши веб-страницы, использующие этот класс будет автоматически об ... Читать дальше »

Новость опубликована 29.06.2013, её прочитали 3153 раз(а) и оставили 0 комментариев.

Как использовать JavaScript для изменения каскадную таблицу стилей (CSS) Динамически

JavaScript Стиль Switcher для CSS


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

Предпосылки

Одно из предположений я сделаю в этом уроке , что вы знаете, как писать HTML и CSS . Вы не должны быть очень опытными в любом из них, но вы должны иметь хотя бы базовые знания. Некоторые знания JavaScript и необходимо.

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

  1. Как Позвольте вашим посетителям переключения между альтернативных стилей CSS / темы . Она имеет дело с аспектом CSS переключения таблиц стилей.

  2. Как использовать Cookies в JavaScript . Хотя строго говоря, не часть стиля CSS коммутатор серии, код маркеры управления, предусмотренным этой статьей используется для сохранения выбора темы, что ваши посетители делают на вашем сайте. Без установки печенья, их CSS настройки не сохраняются, когда они идут на другие страницы на своем сайте.

Шаги к Добавление стилей Switcher в JavaScript

Давайте предположим, что мы имеем следующую таблицу стилей, определенных в нашем ГОЛОВА разделе. Это тот же самый код описано и объяснено впервой партии этого учебника.

<Ссылка отн = "стилей" Тип = "текст / CSS" название = "синий"
 HREF = "http://example.com/css/blue.css">
<Ссылка отн = "альтернативный стиль" Тип = "текст / CSS" название = "розовый"
 HREF = "http://example.com/css/pink.css">
  1. HTML код, чтобы обеспечить способ для пользователей, чтобы выбрать самый стилей

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

    Вот пример HTML кода с помощью обычных кнопок нажать кнопку.

    <form>
    <Входной тип = "Отправить"
     OnClick = "switch_style (« синий »); возвращение ложным;"
     Name = "тема" Значение = "Blue Theme" ID = "синих">
    <Входной тип = "Отправить"
     OnClick = "switch_style ('розовый'); возвращение ложным;"
     Name = "тема" Значение = "Pink Theme" ID = "розовый">
    </ FORM>
    

    , Когда посетитель нажимает на любую из кнопок, JavaScript OnClick обработчик, switch_style () , будет работать. Функции будут переданы либо «голубой» или «розовый», как его параметры, в зависимости от того, какая кнопка нажата. Слова «голубой» и «розовый» соответствуют названию атрибуты ссылка элементов ссылкой на таблицы стилей.

  2. JavaScript функцию для изменения таблиц стилей

    Фактический код JavaScript, необходимых для осуществления переключения стилей CSS можно найти ниже. Если вам трудно вырезать / копировать код, он, вероятно, означает, что вы используете IE 6. Пожалуйста, см. мой Copy / Paste Проблемы FAQ для обхода.

    / / *** БУДЕТ НА ЗАКАЗ ***
    
    Var style_cookie_name = "стиль";
    Var style_cookie_duration = 30;
    
    / / *** КОНЕЦ *** Раздел Настраиваемые
    
    Функция switch_style (css_title)
    {
    / / Вы можете использовать этот скрипт на вашем сайте бесплатно при условии
    / / Вы не удалите это уведомление или URL ниже. Сценарий от
    / / Http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
     Var I, link_tag;
     для (я = 0, link_tag = document.getElementsByTagName ("ссылка");
     Я <link_tag.length, я + +) {
     Если ((link_tag [I]. rel.indexOf ("стилей")! = -1) &&
     link_tag [I]. название) {
     link_tag [I] = отключено правда.;
     Если (link_tag [I]. == css_title название) {
     link_tag [I] = False отключены.;
     }
     }
     set_cookie (style_cookie_name, css_title,
     style_cookie_duration);
     }
    }
    Функция set_style_from_cookie ()
    {
     Var css_title = get_cookie (style_cookie_name);
     Если (css_title.length) {
     switch_style (css_title);
     }
    }
    Функция set_cookie (cookie_name, cookie_value,
     lifespan_in_days, valid_domain)
    {
     / / Http://www.thesitewizard.com/javascripts/cookies.shtml
     Var domain_string = valid_domain?
     ("; Домен =" + valid_domain):'';
     document.cookie = cookie_name +
     "=" + EncodeURIComponent (cookie_value) +
     »; Максимальный возраст =" + 60 * 60 *
     24 * lifespan_in_days +
     »; PATH = /" + domain_string;
    }
    Функция get_cookie (cookie_name)
    {
     / / Http://www.thesitewizard.com/javascripts/cookies.shtml
     Var cookie_string = document.cookie;
     Если (cookie_string.length! = 0) {
     Var cookie_value cookie_string.match = (
     '(^ | ;) [\ S]' '+
     cookie_name +
     '= ([^;] *)');
     вернуться decodeURIComponent (cookie_value [2]);
     }
     вернуться'';
    }
    

    Обратите внимание, что этот сценарий включает set_cookie () и get_cookie () функции из Как использовать Cookies в JavaScript статье. Для Вашего удобства, я уже включены эти функции в блок кода выше, так что вам не нужно копировать и вставлять из этой статьи. Тем не менее, вы все равно хотите читать эту статью , чтобы понять, настройки по умолчанию и предположения я делаю в моей печенья кода.

    Switch_style () функции по существу проходит по всем вашу ссылку теги ищет стилей с таким же названием, как текст, указанный в аргументе (параметр). Если они совпадают, он устанавливает особое свойство, называемое отключена , к ложным, так как позволило стилей. В то же время, все другие соответствующие таблицы стилей отключены. Функция игнорирует все стойкие таблицы стилей , а также любого не-стиль-листа ссылкатегов, таких как те, которые используются для вашего значок сайта .

    Когда он заканчивает, он устанавливает куки с необходимой информацией о настройке таблиц стилей. По умолчанию, имя куки является "стиль" и сохраняется в течение 30 дней. Вы можете изменить это, изменяя значения style_cookie_name и style_cookie_duration переменные в начале сценария.

    Для того, чтобы посетители настроек стилей остаются, когда они посещают другие страницы вашего сайта, а также, когда они перезагрузите страницу, вы также должны добавить OnLoad атрибут к веб-страницам ' тела тега. Например, можно изменить <body> к следующему:

    <body onload="set_style_from_cookie()">
    

    Это вызывает браузер для запуска set_style_from_cookie () функцию, когда страница загружена. Функция проверяет только для стиля установления печенье, и если он присутствует, переключает стилей соответственно. В противном случае, он ничего не делает.

... Читать дальше »
Новость опубликована 29.06.2013, её прочитали 572 раз(а) и оставили 0 комментариев.

HTML и CSS проверки: вы должны проверить свою веб-страницу?

Использование валидатор для проверки кода и ссылок на вашем сайте

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

Примечание: если вы не уверены, что HTML и CSS имею в виду, пожалуйста, прочитайте Каковы HTML, CSS, JavaScript, PHP и Perl? Мне нужно, чтобы научить их создать сайт? прежде чем продолжить. В противном случае вы будете полностью потерял здесь, так как я полагаю, вы по крайней мере, знать, что означают эти термины.

Некоторые Справочная информация: Что Пользователи HTML или CSS означает?

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

В частности, HTML валидатор проверяет код HTML на веб-странице соответствует стандартам, установленным консорциумом W3C (организация, которая выдает HTML стандартов). Существуют различные типы валидаторов - некоторые только проверка на наличие ошибок, другие также вносить предложения о коде, говорю вам, когда определенный способ написания вещей может привести к (скажем) к неожиданным результатам.

Консорциум W3C имеет свой собственный интернет-валидатор, который вы можете использовать бесплатно. Это может быть найдена по адресу:http://validator.w3.org/

CSS валидатор проверяет Каскадных таблиц стилей в том же порядке, в основном, большинство будет проверить их, чтобы убедиться, что они соответствуют стандартам CSS установленные консорциумом W3C. Есть несколько, которые также скажет вам, какой CSS функции поддерживаются, какие браузеры (так как не все браузеры равны в своей реализации CSS).

Опять же, вы можете получить бесплатную проверки для таблицы стилей от консорциума W3C: http://jigsaw.w3.org/css-validator/

Есть множество других валидаторов вокруг, как бесплатные, так и коммерческие, посвященные различным аспектам обеспечения, что ваш код будет работать бесперебойную различных браузеров и платформ. Вы можете найти список бесплатных единиц (в том числе специализированные валидаторы наподобие тех, что проверять свой код на доступность) от бесплатных валидаторы HTML, CSS валидаторов, доступность валидаторов в http://www.thefreecountry.com/webmaster/htmlvalidators.shtml

Обратите внимание, что проверка вашей веб-странице не гарантирует, что она появится, как вы хотите в различных браузерах. Он лишь гарантирует, что ваш код без ошибок HTML или CSS синтаксиса. Обеспечение того, чтобы код корректно отображается в различных браузерах требуют крест тестирования браузера. Вы можете узнать больше информации о том, как сделать это, даже если у вас есть только один компьютер из статьи Как проверить Ваш сайт с нескольких браузеров на одном компьютере в http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml

Почему Подтвердить HTML код?

Сторонники HTML проверки (проверки CSS и, конечно) сказал, что есть целый ряд причин, почему вы должны подтвердить свой код:

  1. Это помогает кросс-браузерный, кросс-платформенный и будущей совместимости

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

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

  2. Видимость Поисковая

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

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

  3. Профессионализм

    Даже если вы тестирование веб-сайт со всеми различных браузерах существуют на всех платформах используется (Mac, Linux, Windows, FreeBSD и т.д.) и обнаружили, что она прекрасно работает во всех, ошибки на своем сайте отражать плохо от ваших навыков, как веб-разработчик.

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

Почему не проверяют?

Те, кто против безоговорочного правила о проверке часто приводят следующие причины:

  1. Проверка не никакой гарантии, что работает страница

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

  2. Временное ограничение для преобразования

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

  3. Средний посетитель не проверяет исходный код

    Против аргумента о профессионализме контраргумент, что средний посетитель сайта, вероятно, не ходить ваш сайт Просмотр исходного кода на ваших страницах в усилия, чтобы найти HTML или CSS ошибок. Для посетителей, как страница выглядит в его / ее браузер подлинным испытанием мастерства веб-дизайнера.

Одним из возможных решений

Как и некоторые веб-дизайнеры, я начал проектировать веб-сайты, прежде, чем я пон ... Читать дальше »

Новость опубликована 29.06.2013, её прочитали 563 раз(а) и оставили 0 комментариев.

Что такое HTML? Каковы CSS, JavaScript, PHP и Perl?

Нужен ли мне, чтобы узнать их, чтобы создать сайт?Меня иногда спрашивают, посетителями думаете, начиная свой собственный веб-сайт, что такие термины, как "HTML", "CSS", "JavaScript", "PHP" и "Perl" имею в виду. Или, по случаю, на их вопросы по некоторым другим темам показать, что они не поняли смысл этих слов. В данной статье описываются термины и обсуждает то, что на самом деле знания, необходимые для создания веб-сайта.

Что такое HTML?

Когда вы пишете нормальный документ с помощью текстового процессора, как Microsoft Word / офиса, ваш текст будет сохранен в файле в специальном формате. Это не просто сохранены как строки слов, введенный с документом необходимо сохранить такие вещи, как шрифт, который выбрал, размер текста, который слова выделены жирным шрифтом, который курсивом, и так далее. Специальный формат включает в себя не только ваши слова, но все эти дополнительные информации, так что следующее слово время открывает документ, он может отображать документ с точный вид, созданный ранее.

Таким же образом, веб-страниц просто цепочки слов положить в специальный формат, что веб-браузеры способны отображать. В то время как формат документов Word называют просто «формате Word» (или «Doc формат»), грубо говоря, можно сказать, что веб-страницы, отформатированные с использованием "HTML". Возьмите абзац текста в окне, расположенном ниже, например:

Это пример пунктом чтобы проиллюстрировать, что HTML является, с целью объяснения общих терминов, как HTML, JavaScript и PHP .

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

Это пример пунктом чтобы проиллюстрировать, что HTML является, с целью <a href="http://www.thesitewizard.com/html-tutorial/what-is-html.shtml"> объясняя общие термины, как HTML, JavaScript и PHP </ A> .

Обратите внимание, что это более или менее похожи на текст данного ранее, за исключением того, что есть дополнительная информация, встроенные.Например, часть, которая говорит <a href="http://www.thesitewizard.com/html-tutorial/what-is-html.shtml"> (который я поместил в другой шрифт выше, чтобы сделать его легче обнаружить ) сообщает веб-браузера, что далее, до тех пор </> достигнута, не следует рассматривать как ссылку, указывающую на http://www.thesitewizard.com/html-tutorial/what-is-html.shtml веб-адреса

Когда веб-браузер видит эту информацию, она делает слова ", пояснив, общие термины, как ... [и т.д.]" появляются как синий подчеркнутый текст, который представляет собой активную ссылку. Остальная часть текста просто отображается как есть.

Нужен ли мне, чтобы узнать HTML начать свой собственный веб-сайт?

Так же, как вы не должны знать мельчайших "Doc формате" для того, чтобы создать документ в Microsoft Word, HTML обучение является обязательным для создания веб-сайтов.

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

  • Как создать сайт с Dreamweaver CS 5.5 - для коммерческой редактором Adobe Dreamweaver
  • Как создать сайт с Dreamweaver CS5 - для предыдущей версии Adobe Dreamweaver редактор
  • Как создать сайт с Dreamweaver CS4 - для старой версии Dreamweaver
  • Как создать сайт с Dreamweaver CS3 - для еще более старую версию Dreamweaver
  • Как создать и опубликовать свой сайт с KompoZer - за бесплатный редактор KompoZer
  • Как создать и опубликовать свой сайт с Nvu - для свободного редактора Nvu

Вы также должны прочитать , как сделать / создать свой собственный сайт: AZ Руководство для начинающих , потому что есть другие вещи, участвующих в создании собственного сайта Помимо проектирования веб-страниц.

Для тех, кто интересуется, "HTML" расшифровывается как "язык гипертекстовой разметки". В основном, это всего лишь средство для форматирования документа. Там нет ничего эзотерического или фантазии об этом, так же как нет ничего особенного Слово формата или любой другой формат документа.

Что такое CSS?

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

Вы можете использовать для Microsoft Word, "Doc" формат, в котором все, от введенного текста к появлению документа определена в одном файле, прозрачный для вас. В Интернете, необработанную информацию указан в HTML и большинство внешний вид определяется CSS.

Если вы используете веб-редактор, как те, которые я упоминал выше , вам не придется возиться с каких частях идет в HTML части и какие части переходит в часть CSS. Все будет заботиться редактора.

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

Каковы JavaScript, PHP и Perl?

Поскольку HTML / CSS комбинации аналогична данные, найденные в документ Word, это хорошо только для отображения информации.

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

JavaScript , PHP и Perl являются три наиболее часто используемых языков программирования в Интернете. Они используются сайты, чтобы проводить более сложные операции.

Программы, написанные на JavaScript работать в веб-браузер сам, так что если ваш сайт имеет программу JavaScript, программа автоматически закачиваются в браузере посетителя и выполнены на его / ее компьютера. PHP и Perl программ, с другой стороны, работать на компьютере, где ваш сайт находится, то есть, на вашем веб-хостинга компьютера. После того, как PHP или Perl программа делает то, что он должен делать, он посылает результат на веб-браузером посетителя, который просто отображает результаты.

Помимо перечисленных выше разница, с точки зрения не программист, нет особого смысла спрашивать, что разница между языками, скажем, междуPHP и Perl . Было бы, что спросить, в чем разница между английским и немецким, или какой-либо другой человеческий язык. Они просто ... Читать дальше »

Новость опубликована 29.06.2013, её прочитали 471 раз(а) и оставили 0 комментариев.

Введение в каскадные таблицы стилей (CSS)

Кристофер Хэн, 
 

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

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

Что каскадных таблиц стилей (CSS)?

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

Самый простой способ объяснить каскадную таблицу стилей, чтобы дать пример одного.

Рассмотрим следующий код, например, вставить в головной части веб-страницы.

<style type="text/css">
BODY {
 фонового цвета: белый;
 цвет: черный;
 семейство шрифтов: Arial, Helvetica, без засечек;
}
</ Style>

В браузере, который понимает таблицы стилей, приведенный выше код вызовет страницу, чтобы иметь белый фон и черный текст. Текст в теле будет отображаться с использованием либо шрифтом Arial, шрифт Helvetica, или, если ни доступны, некоторые другие шрифт без засечек. Он имеет такой же эффект, как <body> HTML тег, который имеет "фон" и "Текст" атрибут, а затем <font> тега.

Зачем использовать каскадные таблицы стилей?

Что такое большое дело, то, вы можете спросить, если последствия указанных в каскадных таблиц стилей действительно может быть реализована с помощью старомодных HTML кода?

  1. Функция форматирования против

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

    Например, <h1> </ h1> тэгов (и остальные члены семьи) предназначены для использования в заголовках. Когда вы включите в текст в этих тегах, текст сразу видно, как заголовок. Тем не менее, многие веб-дизайнеры считают, что шрифт по умолчанию и размер точки не по нраву, и в результате курорт, чтобы сделать заголовки появляются в течение <font> </ FONT> теги вместо использования тегов заголовков. В результате документ становятся завалены форматирования кода, и любые изменения, внесенные в одном заголовке должно быть сделано, чтобы все заголовки в документе.

    С каскадными таблицами стилей, если вам нравятся все ваши заголовки <h1> использовать шрифт без засечек на 24 кегль, проще говоря линий

    h1 {
     шрифт лицу: Сан - засечек;
     Размер шрифта: 24pt;
    }
    

    между тегами стилей CSS, и в любое время вы используете <h1>, это было бы в без засечек 24 размер шрифта. Измените свой ум об этом, и вам останется только изменить его в одном месте, таблицы стилей, а не во всем документе.

    Ваш документ может быть чище и вы будете использовать соответствующий HTML тегов для соответствующей функции (например, <h1> для заголовка, и т.д.), а не заполнение документа со всеми видами форматирования кода.

    Красота стилей также блистающая в таблицах. Сколько раз вы написали таблицы вроде следующего?

    <table>
     <tr>
     <td>
     <font size=2> face="Arial,Helvetica"
     ... и т.д. ..
     </ FONT>
     </ TD>
     </ TR>
     <tr>
     <td>
     <font size=2> face="Arial,Helvetica"
     ... и т.д. ..
     </ FONT>
     </ TD>
     </ TR>
    </ TABLE>
    

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

    С помощью CSS, все что вам нужно сделать, это положить заявление, как

    TD {
     шрифт лицу: Arial, Helvetica;
     Размер шрифта: 10pt;
    }
    

    и писать ваши таблицы без теги шрифтов, как и

    <td>
    ... и т.д. ...
    </ TD>
    

    и вы получите тот же эффект.

  2. В центре города

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

    Так, например, если вы сохраните ваши стили в файл с именем "formatting.css", то вы можете ставить тэг вроде следующего в головной части документа:

    <link rel="formatting.css" type="text/css">

    Как это полезно? Это полезно, когда вы хотите применить стандартный стиль во все документы на своем сайте. Таким образом, когда вы хотите, чтобы сделать изменения, скажем, цвет фона таблицы, все что вам нужно сделать, это изменить таблицу стилей, и все ваши документы будут автоматически иметь новый внешний вид.

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

  3. Зависит от обозревателя Форматирование

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

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

    . Bannermain {
     семейство шрифтов: Arial Black;
     маржа налево: 10px;
     Цвет: зеленый;
     Размер шрифта: 28px;
    }
    
    . Bannershadow {
     семейство шрифтов: Arial Black;
     маржа налево: 8px;
     разницы-топ:-38px;
     Цвет: темно-зеленый;
     Размер шрифта: 28px;
    }
    

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

    <div class="bannermain"> мой первый сайт </ DIV> 
    <div class="bannershadow"> мой первый сайт </ DIV>

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

Проблемы с использованием CSS Сегодня

Обновление (15 марта 2012): Эта статья была написана в 2000 году и, таким образом показывает свой возраст. В то время, большинство браузеров дня (Internet Explorer 6) не реализовал CSS правильно. Сегодня все современные браузеры поддерживают CSS, и таким образом, вы можете пропустить этот раздел. Я обновил одну из нижеследующих пунктах некоторое время назад, чтобы отразить изменения состояния, но все опять изменилось с тех пор, поэтому я решил дать этому разделу в неизменном виде и для истории, но с запиской, чтобы сказать вам, что это устаревшее. (Примечание:. Только в этой секции является устаревшей, а остальные статьи ... Читать дальше »

Новость опубликована 29.06.2013, её прочитали 510 раз(а) и оставили 0 комментариев.

Как добавить кнопку CSS навигационного меню для вашего сайта с KompoZer

Кристофер Хэн, 

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

Требование

Очевидно, вам потребуется KompoZer и иметь общее представление о том, как начать KompoZer и использовать его для простых операций. Если вы новичок в этом, и хотели бы узнать, как получить и использовать KompoZer, пожалуйста, прочитайте мой учебник KompoZer начинающих Как создать и опубликовать свой сайт с KompoZer на http://www.thesitewizard.com/gettingstarted/kompozer-tutorial- 1.shtml

Как создать кнопку меню при помощи кнопок меню Перевернулся

  1. Создание меню навигации кнопки CSS и HTML код

    Перейти к меню навигации CSS кнопок на панели мастера в http://www.thesitewizard.com/wizards/css-menu-buttons.shtml и следуйте инструкциям, чтобы создать кнопку меню для вашего сайта. Настройте клавиши с помощью мастера к содержимому вашего сердца. Мастер делает всю тяжелую работу за нас, генерируя все, что нужно для кнопки меню.

  2. Сохранение кода CSS для навигации по меню

    1. Не закрывая вашем браузере, запуск редактора ASCII . Если вы используете ОС Windows, у вас уже есть в вашей системе называется "Блокнот". Для запуска Блокнота, нажмите кнопку "Пуск", а затем "Все программы" (или "Программы") пункт меню, затем "Стандартные" пункта меню. В том меню, нажмите кнопку "Блокнот".

    2. Возвращение в веб-браузере. Нажмите правой кнопкой мыши где-то внутри большой коробки в разделе «каскадные таблицы стилей (CSS), код". Появится всплывающее меню. Нажмите кнопку "Выбрать все", что пункт меню. Все внутри, что окно должно быть выделена (выбрана).

    3. Нажмите правой кнопкой мыши внутри коробки снова. Выберите "Копировать" в меню, которое появляется.

    4. Переключитесь обратно в текстовом редакторе (Notepad или тому подобное), что вы начали до ранее.

    5. Вставить содержимое в редакторе. Для этого в блокноте, нажмите кнопку "Изменить" в меню в верхней части окна и выберите "Вставить".

    6. Теперь сохраните файл с именем, в мастере. Чтобы узнать правильное имя, переключитесь обратно в окно браузера. Имя файла указывается в пунктах чуть выше коробки вы скопировали ранее.

      Например, чтобы сохранить файл CSS с помощью блокнота, нажмите на меню "Файл", а затем "Сохранить как" пункт в меню, которое появляется. Появится диалоговое окно. В поле "Имя файла" введите имя, данное мастера, включая кавычки . Например, если мастер сказал вам использовать имя файла "tswnavbar.css" вы должны ввести это имя как данность, включая кавычки, иначе Блокнот изменить имя файла за вашей спиной .

      Не забудьте сохранить файл в том же каталоге, что и главная страница вашего сайта. Например, если ваша главная страница была сохранена в папке "C: \ My-сайта", сохраните ваш CSS файл в этом же каталоге.

    7. Закройте текстовый редактор (Notepad или иным образом). Вам не нужно будет его больше.

  3. Изменение головной части веб-страницы

    1. Запуск KompoZer и загружать страницу, которую вы хотите изменить.

    2. В нижней части окна KompoZer, нажмите кнопку "Источник" на вкладке. KompoZer должны переключится на представление исходного кода, где вы можете увидеть фактический HTML источник для вашего веб-страницы.

    3. Вернитесь в ваш браузер. Перейдите в раздел "HTML код секции <head>" в мастере.

    4. Нажмите правой кнопкой мыши в поле ниже него, и нажмите кнопку "Выбрать все" в меню, которое появляется. Текст в окно должно быть выделено.

    5. Щелкните правой кнопкой мыши еще раз, и нажмите кнопку «Копировать» из всплывающего меню.

    6. Вернитесь к KompoZer. Кликните указателем мыши в пространстве сразу же после слова "<head>" (в той же строке). Хит Ввод (или клавишу возврата на Mac). Это создаст новую пустую строку после тега <head>.

    7. В меню нажмите кнопку "Изменить", затем "Вставить" в появившемся подменю. Строку, скопированную ранее должен быть вставлен в KompoZer окна.

    8. Нажмите кнопку "Нормальный" на вкладке кнопки в нижней части окна KompoZer вернуться в WYSIWYG отображаемые на веб-странице.

  4. Установка кнопки Меню HTML код в веб-страницу

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

    2. Вернитесь в окно браузера и снова прокрутите вниз до "Кнопка меню HTML кода». Еще раз, выберите все код в поле и скопируйте его. (См. выше шаги, если вы забыли, как это сделать.)

    3. Вернуться на KompoZer. Нажмите на меню "Вставка" и выберите "HTML" элемент. В появившемся диалоговом окне, нажмите правой кнопкой мыши в окне и выберите "Вставить".

    4. Нажмите на кнопку "Вставить", когда вы закончите.

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

    6. После публикации загрузить веб-страницу в браузере, и вы должны быть в состоянии видеть меня там.

      Техническое примечание : KompoZer имеет некоторые ошибки в этой области, поэтому есть вероятность, что вы не увидите меню, которое будет отображаться в веб-редактор. Не волнуйся. Ваша страница будет правильно отображаться в реальном браузере.

  5. Ссылки на thesitewizard.com

    Если вы хотите, и я буду признателен, если вы можете сделать это, пожалуйста, ссылку на thesitewizard.com где-то на Вашем сайте. Поиск ссылок использованием "Работает на thesitewizard.com" кнопки дана в "Разное" раздел результатов Мастера, и вы можете использовать тот же метод вы использовали, чтобы вставить кнопку меню HTML код выше. Кнопка выглядит следующим образом:

    Бесплатный сайт дизайн Советы и учебники на thesitewizard.com

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

Заключение

Поздравляю. Вы теперь добавили профессионально выглядящие CSS / HTML навигационного меню для вашего сайта. Если вы еще не сделали этого, не забудьте проверить внешний вид вашего сайта с помощью браузера.

Новость опубликована 29.06.2013, её прочитали 1346 раз(а) и оставили 0 комментариев.

Как добавить кнопку CSS навигационного меню для вашего сайта с Nvu

Кристофер Хэн, thesitewizard.com

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

Требование

Очевидно, вам потребуется Nvu и иметь общее представление о том, как начать Nvu и использовать его для простых операций. Если вы новичок в этом, и хотели бы узнать, как получить и использовать Nvu, пожалуйста, прочитайте мой учебник Nvu начинающих Как создать и опубликовать свой сайт с Nvu на http://www.thesitewizard.com/gettingstarted/nvu1.shtml

Как создать кнопку меню при помощи кнопок меню Перевернулся

  1. Создание меню навигации кнопки CSS и HTML код

    Перейти к меню навигации CSS кнопок на панели мастера в http://www.thesitewizard.com/wizards/css-menu-buttons.shtml и следуйте инструкциям, чтобы создать кнопку меню для вашего сайта. Настройте клавиши с помощью мастера к содержимому вашего сердца. Мастер делает всю тяжелую работу за нас, генерируя все, что нужно для кнопки меню.

  2. Сохранение кода CSS для навигации по меню

    1. Не закрывая вашем браузере, запуск редактора ASCII . Если вы используете ОС Windows, у вас уже есть в вашей системе называется "Блокнот". Для запуска Блокнота, нажмите кнопку "Пуск", а затем "Все программы" (или "Программы") пункт меню, затем "Стандартные" пункта меню. В том меню, нажмите кнопку "Блокнот".

    2. Возвращение в веб-браузере. Нажмите правой кнопкой мыши где-то внутри большой коробки в разделе «каскадные таблицы стилей (CSS), код". Появится всплывающее меню. Нажмите кнопку "Выбрать все", что пункт меню. Все внутри, что окно должно быть выделена (выбрана).

    3. Нажмите правой кнопкой мыши внутри коробки снова. Выберите "Копировать" в меню, которое появляется.

    4. Переключитесь обратно в текстовом редакторе (Notepad или тому подобное), что вы начали до ранее.

    5. Вставить содержимое в редакторе. Для этого в блокноте, нажмите кнопку "Изменить" в меню в верхней части окна и выберите "Вставить".

    6. Теперь сохраните файл с именем, в мастере. Чтобы узнать правильное имя, переключитесь обратно в окно браузера. Имя файла указывается в пунктах чуть выше коробки вы скопировали ранее.

      Например, чтобы сохранить файл CSS с помощью блокнота, нажмите на меню "Файл", а затем "Сохранить как" пункт в меню, которое появляется. Появится диалоговое окно. В поле "Имя файла" введите имя, данное мастера, включая кавычки . Например, если мастер сказал вам использовать имя файла "tswnavbar.css" вы должны ввести это имя как данность, включая кавычки, иначе Блокнот изменить имя файла , не говоря вам.

      Не забудьте сохранить файл в том же каталоге, что и главная страница вашего сайта. Например, если ваша главная страница была сохранена в папке "C: \ My-сайта", сохраните ваш CSS файл в этом же каталоге.

    7. Закройте текстовый редактор (Notepad или иным образом). Вам не нужно будет его больше.

  3. Изменение головной части веб-страницы

    1. Запуск Nvu и загружать страницу, которую вы хотите изменить.

    2. В нижней части окна Nvu, нажмите кнопку "Источник" на вкладке. Nvu должны переключится на представление исходного кода, где вы можете увидеть фактический HTML источник для вашего веб-страницы.

    3. Вернитесь в ваш браузер. Перейдите в раздел "HTML код секции <head>" в мастере.

    4. Нажмите правой кнопкой мыши в поле ниже него, и нажмите кнопку "Выбрать все" в меню, которое появляется. Текст в окно должно быть выделено.

    5. Щелкните правой кнопкой мыши еще раз, и нажмите кнопку «Копировать» из всплывающего меню.

    6. Вернитесь в Nvu. Кликните указателем мыши в пространстве сразу же после слова "<head>" (в той же строке). Хит Ввод (или клавишу возврата на Mac). Это создаст новую пустую строку после тега <head>.

    7. В меню нажмите кнопку "Изменить", затем "Вставить" в появившемся подменю. Строку, скопированную ранее должен быть вставлен в окно Nvu.

    8. Нажмите кнопку "Нормальный" на вкладке кнопки в нижней части окна Nvu вернуться в WYSIWYG отображаемые на веб-странице.

  4. Установка кнопки Меню HTML код в веб-страницу

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

    2. Вернитесь в окно браузера и снова прокрутите вниз до "Кнопка меню HTML кода». Еще раз, выберите все код в поле и скопируйте его. (См. выше шаги, если вы забыли, как это сделать.)

    3. Вернуться на Nvu. Нажмите на меню "Вставка" и выберите "HTML" элемент. В появившемся диалоговом окне, нажмите правой кнопкой мыши в окне и выберите "Вставить".

    4. Нажмите на кнопку "Вставить", когда вы закончите.

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

    6. После публикации загрузить веб-страницу в браузере, и вы должны быть в состоянии видеть меня там.

      Техническое примечание : Nvu имеет некоторые ошибки в этой области, поэтому есть вероятность, что вы не увидите меню, которое будет отображаться в веб-редактор. Не волнуйтесь, ваша страница будет правильно отображаться в реальном браузере.

  5. Ссылки на thesitewizard.com

    Если вы хотите, и я буду признателен, если вы можете сделать это, пожалуйста, ссылку на thesitewizard.com где-то на Вашем сайте. Поиск ссылок использованием "Работает на thesitewizard.com" кнопки дана в "Разное" раздел результатов Мастера, и вы можете использовать тот же метод вы использовали, чтобы вставить кнопку меню HTML код выше. Кнопка выглядит следующим образом:

    Бесплатный сайт дизайн Советы и учебники на thesitewizard.com

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

Заключение

Поздравляю. Вы теперь добавили профессионально выглядящие CSS / HTML навигационного меню для вашего сайта. Если вы еще не сделали этого, не забудьте проверить внешний вид вашего сайта с помощью браузера.

Новость опубликована 29.06.2013, её прочитали 1146 раз(а) и оставили 0 комментариев.

Бесплатные CSS меню навигации кнопки мастера

'бесплатно CSS меню навигации панели кнопок мастера создают бесплатные индивидуальные профессионально выглядящие меню навигации для вашего сайта.

Особенности CSS кнопки навигации Menu Bar

  • Опрокидывание или MouseOver эффекты - когда вы наведите курсор мыши на кнопку, он меняет цвет.

  • Полностью управляемые CSS - Нет не нужен JavaScript - меню полностью управляемые CSS - это не зависит от JavaScript или любой другой язык веб-сценариев. Даже если ваши посетители отключить JavaScript, ваше меню будет полностью функциональной в Internet Explorer 6 и выше,Опера , Firefox и Safari .

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

  • Оба вертикальные полосы меню (на боковой панели) и горизонтальной панели меню (панель вкладок) Поддерживаемые - Если вы хотите, чтобы ваши кнопки меню, чтобы быть выстроены в линию вдоль одной колонке вашего сайта, например, на боковой панели, или вы хотите его в горизонтальном положении на верхний (вкладки) или нижней части веб-страницы, CSS меню навигации кнопки Мастер может генерировать код для вас.

  • Полностью настраиваемый - Вы можете полностью настроить кнопки меню, чтобы удовлетворить декора вашего сайта. Например, вы можете изменить цвет кнопок меню (как в свое нормальное состояние и его опрокидывания государства) в виде текста на те кнопки, а также URL (страниц), которые они указывают. Ссылки могут быть как внутренними, на страницы вашего сайта, или внешним, на другой сайт.

  • Подключи и играй - Весь код необходимо для навигации по меню кнопки для работы создается для вас. Просто подключите его на свой сайт, и все готово.

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

  • Бесплатно - Создание кнопки и разместить их на своем сайте бесплатно! Там не надо платить вообще.

  • Нет рекламы - Там нет рекламы в CSS кнопки порожденных меню CSS мастер навигационной клавиши.

Правила использования

  1. Вы можете использовать код, генерируемый этим мастером на вашем сайте, бесплатно.
  2. Представленные услуги, а предоставляемая и код, сгенерированный ПРЕДОСТАВЛЯЮТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, даже ПОДРАЗУМЕВАЕМЫХ ГАРАНТИЙ ПРИГОДНОСТИ ДЛЯ КОНКРЕТНЫХ ЦЕЛЕЙ. Вы соглашаетесь принять на себя все риски и ответственность за последствия использования данного сервиса, предоставляемая и код, сгенерированный ею.
  3. Если вы не можете согласиться с любым из вышеуказанных условий, вы не можете воспользоваться этой услугой, ни кода и документации генерируется.

Шаг 1 из 2

  1. Тип Строка меню навигации

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

      • Дома
      • О нас
      • Связаться с Нами
      • Карта сайта
      • Дома
      •  
      • О нас
      •  
      • Связаться с Нами
      •  
      • Карта сайта
  2. Количество Кнопки меню

    Решите, сколько кнопок вы хотите на вашем меню. Вам будет предоставлена возможность задать текст и ссылки на эти кнопки позже.

     
Новость опубликована 29.06.2013, её прочитали 713 раз(а) и оставили 0 комментариев.