Школа Web-дизайна
Сделать"Klondike" стартовой страницей       










Школа Web-дизайна для начинающих.


СМОТРИТЕ!!
В КАТАЛОГЕ РЕСУРСА
"Klondike"
ЕСТЬ МНОГО МАТЕРИАЛОВ ПРОСТЫХ, НО ОЧЕНЬ УДОБНЫХ, ДЛЯ СОЗДАНИЯ САЙТА. ПРОГРАММКИ, ШРИФТЫ, СКРИПТЫ, АНИМАЦИОННЫЕ КАРТИНКИ, ФОТОГРАФИИ, ВАРИАНТ HTML-ДОКУМЕНТА, ЕГО ПОДРОБНОЕ ОПИСАНИЕ ДИЗАЙНА И СТРУКТУРЫ.
МНОГОЕ ДРУГОЕ.



Реклама

Друзья!
если "Klondike" Вам помог, скопируйте код  баннера из формы и разместите его на вашем сайте.

Мой баннер
размер баннера:88 х 31.

Баннеры

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

Пособие по HTML и CSS для начинающих



Рейтинг@Mail.ru
Яндекс цитирования
Инструменты

Дорогой друг!

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


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



Начнём с программы захвата изображения "Snagit".
Из папки,в которую вы загрузили материалы сайта "Klondike", скопируйте папку "SNAGIT-32" и вставьте её в папку "Program Files". Из папки "SNAGIT-32",(которую вы сейчас разместили в папке "Program Files"), отправьте ярлык запуска программы и ярлык папки - Catalog -, на рабочий стол.
Теперь с рабочего стала откройте программу "Snagit". Появится программка с визуально, очень, понятным внешним видом. Обратите внимание на зоны, отмеченные цифрами, строку меню и ряд дополнительных кнопок, в верхней части интерфейса.

Зона №1 - кнопка устанавливающая режим захвата изображения.
Зона №2 - кнопка устанавливающая режим захвата текста.
Зона №3 - кнопка устанавливающая режим захвата экранного видео.
Зона №4 - отображение настроек меню - Input.
Зона №5 - отображение настроек меню - Output.
Зона №6 - отображение настроек меню - Format.
Зона №7 - отображает настройку просмотра, перед загрузкой в каталог.
Зона №8 - отображение настройки горячих клавиш программы "Snagit".

Захват изображения.
Вы решили сфотографировать какоето изображение или какуюто его часть, (произвести захват). Жмём на - Image Capture -, жмём одновременно горячие кнопки вписанные в самом низу программки (зона №8). Указатель мыши из стрелки превращается в руку с крестиком. Подводим указатель мыши к углу изображения, описываем нужное вам изображение или его часть, отпускаем левую кнопку мыши. На вашем экране появится окно просмотра с изображением. (Оно будет появляться лишь в том случае, есле задействовать кнопку "просмотр".В окне просмотра, вверху слева, есть кнопка - зелёный треугольник. Жмём эту кнопку, захваченное изображение перемещается в папку - Catalog -.

Захват текста.
Захват текста методом описанным выше, приведёт к получению скриншота - фотографии этого текста. Следовательно, чтобы получить текст с которым можно работать, что-то дописывать, изменять, править, нужно поступить иначе.
Вызываем программу, жмём кнопку - Text Capture -, выделяем нужный текст, копируем его, запускаем горячие клавиши и получаем окно с захваченным текстом. Жмём зелёный треугольник. Открывается окно для указания, куда следует сохранить текст.

Захват видео.
Захват видео сюжетов очень прост. Вызываем программу, жмём кнопку - Video Capture -, жмём горячие клавиши. Программа автоматически определяет размер активного окна с видео изображением и записывает его. Сообщаем компьютеру куда сохранить запись, и всё.



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

Запустите программу "HTML Col". Перед вами появится простенький интерфейс. Обратите внимание, что он состоит из двух окон: - самой программы и цветового табло. Кликните по любому квадратику на табло и этот цвет тут же отразится в квадратике основного окна программы. Слева от квадратика появляется HTML код данного цвета, а внизу его имя. Над квадратиком с цветом кнопка - Copy -. Кликнув её вы копируете в буфер обмена, код данного цвета. Теперь легко его можно вставить в нужное место кода.
Под цветным квадратом находится кнопка - Less -. Она просто демонстрирует или скрывает цветовое табло.
В левой части окна программы находятся три ползунка. Перемещая их, можно произвести тонкую подгонку цвета или получить цвет, и HTML код, которого нет в цветовом табло.
Нижняя кнопка под цветным квадратом - Screen -, это захват цвета. Нажмите кнопку - Screen - и в левом верхнем углу экрана появится маленькое окошко. наведите указатель мыши на любой цвет присутствующий на вашем экране и он отобразится в окошке вместе с кодом этого цвета.
Предположим вам нужно написать заголовок. Цвет должен быть таким как, скажем, цвет надписи на присутствующей картинке. Делаем так: жмём кнопку - Screen -, указатель мыши устанавливаем на цветной букве картинки, производим клик левой кнопкой мыши. Окно программы "HTML Col" демонстрирует нужный цвет и HTML код данного цвета. Затем копируем код, окрашиваем заголовок.
Теперь запустите "RGBPick" и убедитесь в том, что вам всё ясно и в этой программке. Разумеется есть отличия. Однако, без малого, одно и тоже.




Программа так проста, что описывать методику её использования просто нет смысла.
Каждая функция имеет подсказку. У вас есть возможность добавлять или удалять цвет, перемещать и изменять его, выбрать шрифт и его размер. В строку, введите текст который вам необходим и нажмите кнопку - Получить градиент - (четыре переплетённых цветных кружка). В строке, (чуть ниже), виден результат. Если он вас не устраивает, поиграйте с цветом, что-то поменяйте, добавьте, удалите, переместите.
В нижнем окне, HTML- код вашего текста. Этот код программа создала автоматически. Скопируйте его и поместите в нужное место в кодинге страницы вашего сайта.
А теперь задайте вопрос: - Зачем мне нужен цветной текст?? Ответ прост. Это один из дизайнерских приёмов. Такой текст выглядит весьма эффектно на страницах для детей. И если есть желание и необходимость, этот приём с успехом можно использовать в вашей работе.  Обратите внимание на текст в заглавном блоке сайта.
(Использовано два цвета. Применить только белый или только краный нельзя, так как в обоих случаях в определённых местах текст не читаем.)



Давайте поговорим о микроскопическом графическом редакторе, стандартно присутствующем на вашем компьютере.
Почему микроскопическом?, да лишь потому, что он не обладает полным набором функций и инструментов, которыми оснащён, скажем, "Фотошоп". Разумеется, что в этом его большой недостаток. Но я вас уверяю, возможностей редактора - "Paint" - вполне хватит удовлетворить желания и потребность начинающего Web-мастера.
Откройте графический редактор . Кроме строки меню находящейся в верхней части браузера, редактор обладает панелью инструментов, изображение её видно слева.
Поочерёдно наводите указатель мыши на изображения инструментов и читайте подсказки которые появляются возле указателя.
Хочу сообщить вам две новости: одна, как вы догадались - хорошая, а вторая - отличная! Начнём с плохой, т.е. с хорошей. Рассказывать как пользоваться программой "Paint" я НЕ БУДУ. Теперь отличная новость: Никто лучше чем автор, не обучит вас пользованию программой!
Кликните \справка\ из меню браузера программы "Paint". В контексте выберите \вызов справки\. Откроется справочное окно. Жмём закладку  указатель, выбираем нужное действие, читаем информацию, работаем.

И всё же я опишу для вас один пример, как подготовить изображение для шапки вашего сайта.
Давайте займёмся изготовлением заглавного блока.
Очень важно знать, что изображение размещённое на странице, блокирует участок на котором оно находится. Это значит, что поверх изображения уже нет возможности разместить ещё что-то, (текст или какой-либо иной объект). Другое дело если изображение вставлено как фон, (чувствуете разницу?). Тогда место занятое изображением остаётся свободным для дальнейшего использования. Качество картинки, в этом случае, никак не хуже изображения вставленного обычным образом. Теперь на фоне изображения можно разместить какой-то текст или анимационную картинку.
Когда определено место для заглавного блока, создана таблица (рамка), переходим к изготовлению изображения которое должно стать фоном в пределах этой рамки. Запишите себе размер рамки (в пикселях), скажем этот размер  800 х 120 пикс. Теперь откройте фотографию, которая станет основой вашего фонового изображения. Запустите "SNAGIT". Очертите участок вашей фотографии, контролируя,
(в квадратике возле указателя мыши), размер очерченного участка. Размер должен соответствовать   800 х 120 пикс, согласно размеру рамки. Если с первого раза у вас что-то не получилось, или был не верно выбран участок очерчивания, повторите попытку, у вас получится.
Таким образом вы изготовили изображение которое автоматически сохранилось в папке "Catalog". Фоновый рисунок можно снабдить нужным текстом. Это: - заглавие сайта или краткая информация. Делаем так: Из папки"Catalog", откройте ваш фоновый рисунок, в программе "Paint". На панеле инструментов кликните кнопку с буквой "А". Мышью, в нужном месте, очертите рамку для ввода текста. Выберите шрифт и его размер. В нижней части браузера выберите цвет. Установите прозрачность. Введите ваш текст. Текст можно передвигать, ухватив рамку указателем мыши. Когда всё напишите, через меню файл, сохраните вашу работу в папке - "Корневой каталог". Должно выглядеть примерно так. Переименуйте изображение согласно правила. Изображение готово для установки на страницу в заглавный блок.
Картинки, фотографии которые имеются в вашем хранилище, в папке "Изображения", могут стать исходным материалом для подготовки фонового рисунка. Если их содержание вас не устраивает, скачайте фото с нужной вам тематикой из Интернета. Там этих фоток - хоть пруд пруди. На любой вкус.



В этой заметке я расскажу Вам, что такое редактор Html.
Это программа с помощью которой легко и просто создать документ Html.
Скачайте, распакуйте и установите редактор на свой компьютер. Это лучший на мой взгляд редактор из тех, что я знаю, тем более, что он на русском языке. Эта программа на 100% удовлетворит потребность начинающего Web-мастера, это точно! При запуске редактора сразу появляются все теги, необходимые для создания вашей странички сайта. Все кнопки с символами тегов, при наведении курсора отображают их функцию. Редактор снабжён большим количеством т.н. мастеров, которые сами, лишь с вашей помощью, создадут многое из того, что вам необходимо: таблицы, ссылки, вставят в страничку картинку или фото и многое другое.
В конце нижнего ряда инструментов редактора есть кнопка
Кликните по ней и откроется окно - "Справочная система CatsHtml".Это прекрасное пособие по работе с редактором.




Это отличное дополнение к Редактору Html. В нём даётся описание тегов и их атрибутов, приведено множество примеров того, как они вставляются и образуют код документа.




Hosted by uCoz