Фото от INVIVO
Кастом байки
Лучший дизайн сайтов
Carlos H. Reinesch
Меню Jimdo web 1.0
Брошюры [подборка]
Авто тематика
Навигации
10.0 Оценка
Шаблон Fashion
Цветные текстуры
Обои Девушки
Шрифты
Природа и животные
Слайдеры jQuery
Аниме и рисунки

  • Это надо знать. Шрифты.

    В данной статье разберем работу со шрифтами, а также коснемся Фотошопа, и использования в HTML и CSS.

     

    Что бы установить шрифт, достаточно скопировать файл в папку "Windows" - "Fonts", тем самым он сразу появиться у вас в Фотошопе и в компьютере.

     

    В Фотошопе, пользоваться шрифтами достаточно легко. Просто нажмите на инструмент "Горизонтальный текст", далее выделите область на изображении мышью и в открывшемся окне пишите что вам нужно. Более подробно я бы хотел остановиться на использовании шрифтов в веб-дизайне, так как порой неудачный шрифт, или корявая ссылка, могут испортить хорошее впечатление о сайте. Стоит заметить, что в зависимости от платформы сайта, Joomla, Wordpress, DLE, Jimdo, uCoz, UMI CMS, Blogger. некоторые варианты изменения текста могут не подойти. Следовательно, будем разбирать несколько вариантов.

     

    Текст в HTML.

     

    Сама ссылка в HTML имеет вид:

    <a href="ССЫЛКА НА СТРАНИЦУ" >ОТОБРАЖЕНИЕ НАЗВАНИЯ</a>

    Что бы сделать ссылку жирной, достаточно добавить в название страницы тег <b>. Тем самым мы прописываем что текст имеет расширение "bold" - жирный текст и ссылка будет иметь вид:

    <a href="ССЫЛКА НА СТРАНИЦУ" ><b>ОТОБРАЖЕНИЕ НАЗВАНИЯ</b></a>

     

    Что бы поменять цвет ссылки в HTML существует несколько способов. Например просто добавим цвет путем нумерации. Выбираем в Фотошопе нужный цвет для ссылки и копируем шестизначное значение цвета, далее вставляем это значение в ссылку:

    <a href="ССЫЛКА НА СТРАНИЦУ"  style="color:#FF0000">ОТОБРАЖЕНИЕ НАЗВАНИЯ</a>

    где "#FF0000" - это цвет [в данном случае красный].

     

    Что бы убрать подчеркивание ссылки можно добавить тег "text-decoration:none", таким образом получим следующий вид ссылки:

    <a href="ССЫЛКА НА СТРАНИЦУ" style="color:#FF0000; text-decoration:none">ОТОБРАЖЕНИЕ НАЗВАНИЯ</a>

    можете убрать цвет в ссылке, если стандартный цвет ссылки вас устраивает [style="color:#FF0000; - удалить цвет ссылки].

     

    Что бы изменить размер шрифта ссылки, также не должно вызывать затруднений, так как данный пример идет на всех сайтах:

    <a style="text-decoration:none" href="ССЫЛКА НА СТРАНИЦУ" target="_blank"><font color="#BCBCBC"><font size="7">ОТОБРАЖЕНИЕ НАЗВАНИЯ</font></font></a>

    теперь смотрим:

    "text-decoration:none" - убираем подчеркивание

    <font color="#BCBCBC"> - цвет ссылки

    <font size="7"> - и вот, собственно говоря, сам размер ссылки. Всего размеров шрифта бывает от 1 до 7. Заметьте, что мы в конце ссылки прописали 2 раза закрывающий тег "</font>". Первый тег "<font>" открывал цвет ссылки, второй размер.

     

    Если брать только текст в HTML, без ссылок, то с ним еще проще. Ставите в начале тег "<p>" и в него добавляете те же теги цвета и размера, что использовались в ссылках.

     

    Можно еще упомянуть тег "<small>" - он служит для уменьшения текста. Допустим у вас стандартный шрифт и вы хотите вообще сделать текст мелким, тогда прописываем ссылку, или текст, следующим образом:

    <a href="ССЫЛКА НА СТРАНИЦУ" ><small>ОТОБРАЖЕНИЕ НАЗВАНИЯ</small></a>.

    Сам шрифт в тексте можно поменять тегом - "<font face>".

    <p><font face="Times New Roman">ОТОБРАЖЕНИЕ НАЗВАНИЯ</p>

    где "Times New Roman" - сам шрифт.

     

     

    Текст в CSS.

     

    Работая с CSS сайта следует знать, что здесь немного сложнее чем в HTML. Здесь прописывается сам стиль отображения, поэтому вариантов что в конце получиться, множество.

     

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

    a {color:#FF0000;text-decoration:none}

    a:active {color:#FF0000;text-decoration:none}

    a:visited {color:#666666;text-decoration:none}

    a:hover {color:#339900;text-decoration:none}

    где:

    a - неактивная ссылка

    a:active - активная ссылка

    a:visited - посещенная ссылка

    a:hover - ссылка при наведении мышью

    Теперь меняйте цвета по своему усмотрению. Если удалите тег "text-decoration:none", то ссылка будет с подчеркиванием. В принципе можно обойтись только самой ссылкой и видом ссылки при наведении:

    a {color:#FF0000;text-decoration:none}

    a:hover {color:#339900;text-decoration:none}

     

    Еще можно добавить размер и стиль шрифта:

    a {font-family: Arial;font-size: 12px;color:#FF0000;text-decoration:none}

    a:hover {font-family: Arial;font-size: 12px;color:#339900;text-decoration:none}

    где: font-family - тип шрифта;

    font-size - размер шрифта;

     

    Что бы добавить к уже существующим цветам и стилям ссылок, еще стили и цвета, то можно предать ссылкам дополнительные параметры:

    a.b:link {font-size: 12px;font-family: Arial;color:#5c5c5c;text-decoration:none;}

    a.b:hover {font-family: Arial;color:#FF6000;text-decoration:none;}

    как видите, я добавил к ссылке букву "b" - это новый класс, по которому ссылка будет распозноваться в HTML. То есть, грубо говоря, вы можете вставлять вместо "b" любую другую букву, или слово, тем самым теоретически у вас может быть и 300 и 600 разных ссылок на странице, с разными цветами и написанием.

    А вот это надо вставить в HTML:

    <a href="ССЫЛКА НА СТРАНИЦУ" class="b">ОТОБРАЖЕНИЕ НАЗВАНИЯ</a>

    как видите, вам всего лишь стоит дописать класс в ссылку, который задан у вас в CSS.

     

    Надеюсь эта статья поможет вам разобраться с самым элементарным, что бы больше не останавливаться на мелочах. Удачи!

     

    <b></b> - жирный шрифт

    <i></i> - курсив (шрифт с наклоном)

    <u></u> - подчеркнутый

    <s></s> - перечеркнутый (можно использовать в написании цен и скидок)

    <strong></strong> - выделение текста и жирный шрифт

    <em></em> - выделение текста и шрифт с наклоном

    <p></p> - абзац

    <br> - переход на новую строку (используется в HTML)

    <center></center> - центрирование текста

     

     

    Отступы.

     

    Что бы создать отступ ссылки следует прописать:

    <div style="margin-left:20px">< a href="#">НАЗВАНИЕ ССЫЛКИ< /a>< /div>

    или:

    <a style="margin-left:5px;" href="#">НАЗВАНИЕ ССЫЛКИ</a>

     

    Что бы создать отступ текста следует прописать:

    <div style="margin-left:20px">< p>ТЕКСТ< /p></div>

     

    Что бы разместить несколько изображений в ряд:

    <p>

    <img src="URL ИЗОБРАЖЕНИЯ" alt="Всплывающее название" width="120" height="120">

    <img src="URL ИЗОБРАЖЕНИЯ" alt="Всплывающее название" width="120" height="120">

    <img src="URL ИЗОБРАЖЕНИЯ" alt="Всплывающее название" width="120" height="120">

    </p> 

     


    автор: Аслан Сейфуллаев.

  • Это надо знать. Шрифты. скрипты

    Здесь расскажу о том, как надо обращаться с ссылками и текстом на странице. Также, данная статья будет для вас хорошей шпаргалкой в будущем, при редактировании своего контента.

  • Продвижение в поисковиках. статьи

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

  • Креативный фон сайта.скрипты

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