Отправляет email-рассылки с помощью сервиса Sendsay

"Пособие для Веб-дизайнера"

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр Левитас

Статистика

765 подписчиков
0 за неделю
←   Все выпуски   →

"Пособие для Веб-дизайнера" Выпуск 4


 

 

 

Пособие для веб-дизайнера

Рассылка сайта www.Gury-Soft.narod.ru
Выпуск 4
Сегодня для вас:

- Глава 2

Знакомство с CSS

Свойства шрифта; Свойства текста; Отступы; Цвет элементов и фон; Границы; Курсоры; Полоса прокрутки; Псевдоэлементы

- Знакомство с Adobe Photoshop

Вступление
Здравствуйте, уважаемые читатели!

Сегодня на сайте вы познакомитесь с началом Главы 2 . Мы научимся использовать каскадные таблицы стилей CSS, в этом выпуске я вам объясню что это такое и изучим свойства шрифта.

Статья: Знакомство с Adobe Photoshop CS2, вас научит новый автор рассылки Валерия.

Обновление сайта: 9.04.08

 - Обновлен раздел Галерея

 - Добавлен новый раздел Ссылки

 - Проводится опрос посетителей "Что бы вы еще хотели видеть на сайте", для просмотра вариантов ответа посмотрите на Главной странице сайта. Примите участие в голосовании!

Глава 1 "Знакомство с CSS"

Что такое css.

Для  начала немного истории. Как вы уже  знаете ,первоначально была создана технология HTML,что в переводе означает Hyper Text Markup Language. То есть язык разметки гипертекста. Еще раз повторю гипертекста. Эта технология  дает возможность создавать web-страницы, которые соединены гиперссылками. Но красиво представить информацию с помощью HTML, не удавалось и не удаётся до сих пор. Так вот, для того чтобы сделать дизайн своего сайта более приятней была придумана технология css, но не только дизайн, а еще удобство в оформлении и представлении информации. Представьте, что у вас на сайте около 50 страниц. Вы вдруг задумали изменить шрифт надписей с Georgia на Arial. Неужели вы будете, работать над каждой страницей для того, чтобы только изменить шрифт? Я например с этим не согласен! Так вот, css может это сделать буквально за 5 минут. Это действительно удивляет!

А ведь надо то всего создать обычный текстовой документ с расширением css. Делается это очень просто. Открываете блокнот и перед сохранением, после точки напишите «css» (без скобок). Далее, вам необходимо создать гиперссылку на этот текстовой документ, для этого на всех страницах между тегами <head> </head>. Вписать строчку

<link rel="styleshet" type="text/css" href="style.css"> ;всего-то, не правда ли? Есть конечно еще пара способов, но этот самый удобный.  Данная строка и создаст гиперссылку на css. Далее в самом файле css, пишут необходимые команды. Но для того, чтобы их знать вам необходимо изучить технологию css, это не PHP, разобраться можно. Для этого вам надо купить книжку или в том же Интернете поскачивать  уроки по css, изучение css и т.д. Предлагаю подписаться на мою рассылку «Пособие для веб-дизайнера», там скоро будет изучаться эта технология. Я вам привел пример только текста, но есть еще и другие «трюки». Для этого вам необходимо подумать, что бы вы хотели сделать одинаковым на сайте, например:

Сделать одинаковый фон на всех страницах

Все страницы имеют стандартный шрифт Arial

Заголовки H1, должны иметь шрифт Georgia, а все заголовки H2 выделятся зеленым цветом.

Все обычные ссылки должны иметь красный цвет, посещенные- коричневый, активный -  темно-коричневый. Вот все прелести css.

Свойства шрифта

Свойства шрифта

 

  
Атрибут Значение
 
font-size- размер шрифта Пункты. font-size: 12pt

Дюймы. font-size: 12in

Сантиметры. font-size: 12cm

Пикселы. font-size: 12px

Проценты. font-size: 12%

Абсолют. xx-smaill; x-smaill; smaill; medium; large; x-large; xx-large. font-size: small
   
 
Атрибут Значение
font-family- вид шрифта Можно указать один шрифт. font-family: Times

На случай, если у пользователя не установлен данный шрифт, можно указать несколько. font-family: Times, Garamond, Arial

Можно также указать сразу тип шрифта. Serif- с засечками, Sans Serif- без засечек, Cursive- курсивные , Fantasy- декоративные, Monospase- моноширинные

 
font-weight- жирность шрифта normal, lighter, bold, bolder. font-weight: bold 100, 200, 300, 400, 500, 600, 700, 800, 900.

font-weight: 500

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

элемент { атрибут: значение; }

Элемент может быть практически любым: b (выделение жирным),H2 (Заголовок H2), p (абзац)... Затем идет атрибут и его значение в фигурных скобках "{}". Пример атрибута и значения: font-size: 12% (знак ":" в CSS заменяет "=" в HTML). Получим следующее: B {font-size: 12%; }, размещается это все под тегом body, то есть в самих таблицах это будет так:

body

{font-size: 12%; } и т.д. Теперь  весь шрифт на странице будет именно такого размера  (<b> слово </b>). Атрибутов может быть и несколько. Тогда они пишутся через  ";". Например вам нужно, чтобы слова, выделенные жирным, имели шрифт Arial

B { font-size: 12%; font-family: Arial; } Вот так все просто. Удачи!

Подготовил Люнгрен Илья

Знакомство с Adobe Photoshop
Автор: Валерия

Редактирование и гиперссылки: Люнгрен Илья

Здравствуйте уважаемые читатели! Меня зовут Валерия. Я уже очень давно увлекаюсь работой с Adobe Photoshop. Делаю различные шаблоны для сайтов, навигации и много других интересных штучек. Илья мне предложил провести небольшой курс в своей рассылке. Я с удовольствием согласилась.

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

Для начала, откройте программу Adobe Photoshop CS2. После того, как программа загрузилась вы увидели небольшое окошко с рабочим полем; слева находится "панель инструментов", снизу находится линейка кадров анимации (не у всех), справа как вы видите также расположено множество окошек и тому подобное...

Все это вы можете просмотреть здесь www.gury-soft.narod.ru/ras04.html

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

  • Создайте новый документ с черным или любым другим фоном фоном.
    Возьмите инструмент - прямоугольник со скругленными углами и нарисуйте вертикальный прямоугольник.
  • Нажмите Ctrl+T, чтобы вызвать инструмент свободная трансформация. Щелчок правой кнопкой мыши - выберите команду Warp (это возможно в новых версиях программы Adobe Photoshop CS2, CS3). Выберите вид трансформации "Arc". Установите следующие параметры:
  • Дваджы щелкните по слою с фигурой, чтобы появилось окно добавления стилей - примените следующие стили:
  • Дублируйте этот слой несколько раз (Layer - Duplicate layer).
    Где нужно уменьшите и разверните как на рисунке. Используйте инструмент - свободная трансформация Ctrl+T

 

  • Нарисуйте несколько кружков с помощью инструмента - форма эллипса (elliptical shape tool). Примените к этим кружкам те же стили.
  • Нарисуйте прямоугольник с помощью этого инструмента "Прямоугольная область".
  • Дваджы щелкните по слою с фигурой, чтобы появилось окно добавления стилей - примените следующие стили:
  • Создайте совсем крошечные эллипсы, примените тот же стиль и разместите их по углам прямоугольника.
  • Дублируйте слой с кнопкой и разместите их на панели.
  • А теперь осталось только напечатать на кнопках названия ваших ссылок.

На этом урок закончен. Я с вами прощаюсь!

Просмотреть урок в графическом режиме: www.gury-soft.narod.ru/ras05.html

А на сегодня все. Успехов!

2008 Люнгрен Илья

E-mail: ljungren@mail.ru
В избранное