Полезные сервисы
Поделись с друзьями
Помощник для тех, кто хочет научиться создавать сайты.
Вам понадобятся терпение и желание.
Всего за пять уроков Вы сможете сделать сайт-визитку, а освоив следующие уроки - сделаете первый шаг к профессионализму
Дизайн сайта
Сайт-визитка позволяет посетителю составить определенное мнение о Вас.
Поэтому, работая на его дизайном, постарайтесь чтобы сайт был Вашим отражением, лицом, визитной карточкой.
Благодаря нему клиенты легко смогут найти нужную информацию, тем более, что сайт работает на Вас полные сутки.
Как это не покажется странным, но именно дизайн сайта вызывает у меня некоторые трудности. Зачастую, наверстав внешний вид черновика сайта, я начинаю его переделывать по нескольку раз. И когда кажется, что вот оно, получилось, приходит сторонний наблюдатель или начинаешь с кем-нибудь советоваться и понимаешь, что столько часов, потрачены впустую.
Оказывается, что или слишком много всего налеплено, и нужно все упростить, или перебор красок, картинок, нет общего стиля, цветовая гамма не играет с картинками.
Как показывает практика, количество картинок должно быть умеренным, реклама - не навязчивой, а цвет и размер шрифта - нормально читаемым, но не ярко выраженным.
Основные требования для всех сайтов
- быстрая загрузка
- удобная навигация
- стильный, легкий вид
- простая система управления сайтом
Тщательно продуманный профессиональный дизайн создаст подходящую визуальную атмосферу для посетителей сайта, настроит на приятное восприятие поданной информации.
Правильно выбранный стиль как магнитом будет удерживать пользователей на странице
Не забывайте при разработке дизайна учитывать и назначение сайта. Есть определенная разница между дизайном сайта молодежный портал и, например, сайтом для садоводов. Так, если для молодежи отлично подойдет черный фон с вставками оранжевого и серого, то для садоводов он неприемлем.
Ниже приведены скриншоты сайтов с разнообразным дизайном.
Сначала подберите для своего сайта общую гамму цветов, затем стиль.
Не выбирайте сайт очень сложной конструкции.
Мы будем делать сайт как на первой картинке
Прежде чем приступить к верстке шаблона нашей странички нам предстоит освоить еще несколько уроков. Если Вы определились с цветовой гаммой, то сейчас самое время попробовать изменить цвет фона или букв.
Учимся работать с цветом
Возвращаемся к нашей заготовке (открываем в Блокноте файл index.htm). По умолчанию цвет фона белый, а цвет букв - черный.
Для смены цвета фона всей страницы нужно в тег <body> добавить стиль bgcolor и указать цвет. Скопируйте мой вариант тега <body bgcolor="#E9DBAF"> и замените в своем файле index.htm. Сохраните файл и запустите свою страничку. Если все сделали правильно, то цвет фона станет светло-бежевым.
Теперь Вы знаете как выбрать нужный цвет и можете подставить его в тег body
<body bgcolor="#ваш_цвет">
Изменим цвет текста
Нет никакой разницы в том, как изменить цвет одного символа, слова или целого блока текста. Синтаксис один. Для работы с текстом используется тег <font> Для установки цвета символов в него добавляют ключевое слово color= и в кавычках указывают цвет так, как мы это делали выше.
Основные атрибуты тега <font...>
color="#цвет" - определяет цвет текста
size="№_шрифта" - определяет размер текста
face="имя_шрифта" - определяет гарнитуру текста
size="№_шрифта" - определяет размер текста
face="имя_шрифта" - определяет гарнитуру текста
Например, измените строку <h1>Заголовок</h1> в файле index.htm на
<h1><font color="#A3D36F">Заголовок</font></h1>
и цвет заголовка изменится на такой
Обратите внимание на то, что тег font имеет начало и конец. В начальной части мы еще добавили атрибут color=, затем идет текст, цвет которого мы хотим изменить и закрытие тега font. Если не поставить закрытие тега </font>, то на зеленый цвет изменится не только слово Заголовок, но и весть текст ниже, до конца страницы.
Если теперь проверить сайт валидатором, то он выдаст ошибку в строке <font...
В настоящее время такой стиль считается устаревшим (хотя сплош и рядом встречается на сайтах).
По строгим правилам нужно писать так:
<h1 style="color:#A3D36F">Заголовок</h1>
В настоящее время такой стиль считается устаревшим (хотя сплош и рядом встречается на сайтах).
По строгим правилам нужно писать так:
<h1 style="color:#A3D36F">Заголовок</h1>
Тоже самое касается и размера шрифта и выбора гарнитуры. Для строгих правил нужно использовать стили style="..., но о них в следующей теме, а пока тренируйтесь и не волнуйтесь, т.к. такой синтаксис тоже нужно знать.
Изменим размер шрифта
Здесь следует учитывать то, что текст не должен иметь большое количество вставок с разными цветами и размерами.
Для изменения размера шрифта используется все тот же тег font с ключевым словом size= (далее указывается размер шрифта от 1 до 7), например, <font size="1">. Здесь 1 - это самый маленький размер.
За средний размер принят size="3". Этим же размером выводится текст по умолчанию. Т.е. в нашем начальном примере тект Первая строка и Вторая строка выводятся как size="3". Как и в примере выше не забудьте поставить закрывающий тег </font>.
На размер шрифта влияет не только заданный атрибут size, но и выбор гарнитуры шрифта.
Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial.
Учитывайте эту особенность при выборе шрифта и его размеров.
Как изменить гарнитуру шрифта
Существует довольно много различных шрифтов, которые отличаются внешним видом. Это называется гарнитура. Мы рассмотрим наиболее часто используемые стандартные шрифты, которые должны поддерживаться любым браузером. Но у Вас есть возможность использовать и более изощренные гарнитуры, витиеватые, рукописные, древнерусские, готические и т.д.
Для использования таких (нестандартных) их нужно специальным образом подключать. Эту тему мы рассматривать не будем, но посмотреть как это выглядет можно на моем сайте "Тату-пирсинг" (см. ссылку внизу страницы).
Там, для текстового тату используются нестандартные шрифты.
На основе шрифтов Windows, использующихся в других ОС сформировался следующий список так называемых <безопасных> Web-шрифтов:
Гарнитура Arial <font face="Arial"> текст </font>
Гарнитура Arial Black <font face="Arial Black"> текст </font>
Гарнитура Courier New <font face="Courier New"> текст </font>
Гарнитура Comic Sans MS <font face="Comic Sans MS"> текст </font>
Гарнитура Georgia <font face="Georgia"> текст </font>
Гарнитура Impact <font face="Impact"> текст </font>
Гарнитура Verdana <font face="Verdana"> текст </font>
Гарнитура Sans serif <font face="Sans serif"> текст </font>
Гарнитура Times New Roman <font face="Times New Roman"> текст </font>
Гарнитура Trebuchet MS <font face="Trebuchet MS"> текст </font>
Гарнитура Arial Black <font face="Arial Black"> текст </font>
Гарнитура Courier New <font face="Courier New"> текст </font>
Гарнитура Comic Sans MS <font face="Comic Sans MS"> текст </font>
Гарнитура Georgia <font face="Georgia"> текст </font>
Гарнитура Impact <font face="Impact"> текст </font>
Гарнитура Verdana <font face="Verdana"> текст </font>
Гарнитура Sans serif <font face="Sans serif"> текст </font>
Гарнитура Times New Roman <font face="Times New Roman"> текст </font>
Гарнитура Trebuchet MS <font face="Trebuchet MS"> текст </font>
Как показывает практика, в большинстве случаев достаточно всего лишь выделить текст жирным или курсивом или жирным курсивом чем изменять размер шрифта.
Для выделения текста жирным нужно использовать тег <b>, который имеет начало и конец. Текст вставленный между тегами <b>будет жирным</b>.
Для выделения курсивом используется тег <i>
Текст вставленный между тегами <i>будет наклонным </i>
Если же использовать оба тега, то получим жирный курсив. Тут обратите внимание на то, что тот тег, который ставится первым - должен закрываться последним. Т.е. вот так: сначала b потом i <b><i>жирный курсив</i></b> и наоборот i b по окончании.
Примеры работы с текстом:
<font face="Impact" size="4" color="#005522"> <i>Результат </i></font>
Результат
<font face="Comic Sans MS" size="4" color="#550044"> <b>Результат </b></font>
Результат
<font face="Courier New" size="5" color="#0044aa"> Результат </font>
Результат
<font face="Arial" color="#555555"> Результат </font>
Результат
Результат
<font face="Comic Sans MS" size="4" color="#550044"> <b>Результат </b></font>
Результат
<font face="Courier New" size="5" color="#0044aa"> Результат </font>
Результат
<font face="Arial" color="#555555"> Результат </font>
Результат
Вставляем фотографии
И действительно, как же без них. Вспомните детство, если в книжке нет картинок, то она нам не интересна. Нет почти никакой разницы между фотографией и картинкой. И тем не менее, фотография - это прямоугольная область, полностью залитая цветом (изображение + фон).
Картинка в отличие от фото может иметь прозрачный фон. Этот прием активно используется в веб-дизайне.
Например, смотрим на первую картинку (сайт - Услуги адвоката). Вы нашли в сети картинку статуя Фемиды, и она на белом фоне. А у нас верхняя часть страницы бордового цвета.
Вставка картинки Фемиды с белым фоном полностью меняет стиль. Как быть?
Возвращаемся к тому, что нужно иметь Фотошоп.
Загружаем картинку в Фотошоп, выделяем белый цвет фона инструментом "Волшебная палочка" и удаляем его.
Сохраняем картинку с прозрачным фоном (формат файла png) и все готово. Делаем вставку картинки на страницу и Фемида уже на красном фоне. Теперь можно, менять фон сайта - Фемида подойдет к любому.
Загружаем картинку в Фотошоп, выделяем белый цвет фона инструментом "Волшебная палочка" и удаляем его.
Сохраняем картинку с прозрачным фоном (формат файла png) и все готово. Делаем вставку картинки на страницу и Фемида уже на красном фоне. Теперь можно, менять фон сайта - Фемида подойдет к любому.
Для вставки изображения в веб-страницу используется тег <img>
Он не имеет конечного тега. Все что нужно вставляется между угловыми скобками. В общем виде синтаксис такой:
<img src="имя_файла"> Здесь имя_файла, например, fotka.jpg Если файл находится в каталоге images, то следует писать - <img src="images/fotka.jpg">
Задавая в теге <img> дополнительные атрибуты можно изменять положение картинки, сделать отступ текста вокруг нее, заключить ее в рамочку и т.д..
Например, для картинок сайтов, что я навел выше как пример дизайна, я использовал такую строку:
<img src="images/s_12.png" alt="foto" style="float:left; border: 1px solid #000000; margin: 1.5%; width:30%;">
Основные атрибуты тега <img...>
src="..." - путь к файлу
alt="текст" - альтернативный текст (обязательный атрибут)
border="1" - показать с рамочкой толщиной в 1 пиксель
alt="текст" - альтернативный текст (обязательный атрибут)
Если в браузере отключен показ картинок, то увидим этот текст
align="left" - выравнивать по левому (правому -right) краю окнаborder="1" - показать с рамочкой толщиной в 1 пиксель
По умолчанию border="0", т.е. рамочка не отображается
width="120px" - ширина картинки в пикселяхЕсли этот атрибут не показывать, то картинка будет своего оригинального размера.
Но иногда нужно показать ее уменьшенный размер, тогда можем указать меньшую ширину.
В ряде случаев можно указывать ширину в процентах.
Я указал width="30%" чтобы красиво вместить три картинки в одну строку. Итого 3*30%=90%.
Т.е. до 100% у меня еще осталось 10%, которые я использовал в margin: 1.5%;
Тут на каждой картинке отступ в 1.5% (слева и справа т.е. 1.5% * 2 * 3_картинки = 9%, вмещаюсь в остаток 10%).
Описание style= мы будем изучать в разделе "Стили".
Примеры работы с изображениями
Изображение выровнено по левому краю без рамкиДля того, чтобы попробовать это на нашей заготовке сайта скопируйте выделенный (темно-серый) фрагмент кода и вставьте в файл index.htm.
Для того, чтобы у вас появилась такая же картинка нужно скопировать мою
Подведем итоги
В этом разделе Вы научились изменять фон страницы, работать с цветом и размером шрифта.
Научились вставлять фотографии (картинки).
Если Вас путает и даже пугает строгий стиль, то можно перейти на переходной
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Этот урок закончен, можете переходить в раздел Стили
Мысли вслух
- Программист - это не тот, кто пишет программы, а тот, чьи программы работают
- Для программиста монитор - это реальный рабочий стол, системный блок - журнальный, а клавиатура - обеденный
- Конфеты программиста: 'Мишка на сервере'
- А знаете ли Вы, что в 1 килобайте не 1000 байт, а 1024 (2 в степени 10)
Любая система называется по количеству используемых символов для описания числа. Так, в двоичной системе только 0 и 1 (2 символа. Для написания числа 4 нужно 3 разряда - 100. Число 5 = 101, число 6=110 ), в десятичной - 10 символов (0-9), а шестнадцатиричная система это символы 0,1,2,3... до 9, а далее идут латинские буквы ABCDEF. В сумме 10 цифр и шесть букв и составляют значение 16 (16-ричная). Здесь символ 9 - это число 9, а символ А - это уже число 10, В=11... F=15. Если показать число 15 в двух разрядах, то это 0F (=15), а если добавить +1, то т.к. выше символа F у нас нет, то F обнуляется, а к 0 добавляется 1. Поэтому 0F+1=10 (в 16-й системе).
Значение цвета состоит из шести цифр-символов. Первая пара отвечает за красную краску, вторая пара - за зеленую и третья - за синюю (#3DA9EB) это цвет-Причем, первая цифра в каждой паре имеет больший вес. Минимальное значение = 00, а максимальное значение = FF. Буквы можно писать как заглавные так и маленькие (#6affce).
Значение FF - это 255 в десятичной системе. Для проверки войдите в ваш компьютерный калькулятор, войдите в меню ВИД, выставьте ИНЖЕНЕРНЫЙ и наберите число 255. Теперь клацните на кружочек Hex и увидите что 255 сменилось на FF.
Если значение цвета дать #000000 - это будет черный цвет, т.к. всем трем краскам мы задали минимальное значение. Значение #FFFFFF - это белый цвет. Значение #FFFF00 - это желтый цвет.Я же задал светло-бежевый цвет #E9DBAF
Как же подобрать нужный цвет с минимальными затратами. Ну не подбирать же эти цифры-буквы.
В этих случаях я пользуюсь графическим редактором ФОТОШОП.
Если у Вас есть такой редактор, то откройте его, нажмите на краску (красная стрелка). В открывшемся окне
выберите нужный цвет водя мышкой по вертикальной шкале окошечка и по основному окну.
Взять выбранный цвет в 16-ричной системе можно в окошке (см. синяя стрелка).
Если такого редактора нет, то можно зайти на онлайн сервис выбора цвета getcolor.ru
Кстати, если Вы серьезно собираетесь работать с графикой, то без этого редактора не обойтись. Т.к. периодически придется редактировать фотографии, создавать картинки с прозрачным фоном (формат png) создавать анимационные картинки (формат gif) и еще много чего.