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

 

 

      Комбинирование стилей позволяет  вам отображать в одной строке несколько элементов различными стилями, например:

      <b>Жизнь</b> - <i>это <b>песня!</b></i>

     Жизнь - это песня!

     Внимание! Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста!

     Дополнительные  стили:

• big (большой)
• small (маленький)
• sub (подстрочник)
• sup (надстрочник)

 
     

• Таблица №3: Дополнительные стили текста

 

     Размер  шрифта <FONT SIZE>. Вы можете изменять размер шрифта при помощи тэга:

     <FONT SIZE=+|- n>

     Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в  положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга:

     <BASEFONT SIZE=n>

     Например:

      <p>и <font SIZE=+1>з</font><font SIZE=+2>м</font> <font SIZE=+3>е</font><font SIZE=+4>н</font> <font SIZE=+3>е</font><font SIZE=+2>н</font> <font SIZE=+1>и</font> е</p>

     изменение

     Цвет  шрифта <FONT SIZE>. Вы можете изменить цвет шрифта при помощи тэга:

     <FONT COLOR="#xxxxxx>

     Цвет  указывается в RGB-формате (Red-Green-Blue) посредством  указания размерности каждой компоненты цвета в шестнадцатиричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

      <FONT COLOR="#FF0000"> Красный </FONT> <FONT COLOR="#00FF00"> Зеленый </FONT> <FONT COLOR="#0000FF"> Синий </FONT>

     Красный Зеленый Синий

3.Описание создания сайта

 

     3.1 Подготовка 

     Итак, в самом начале мне были нужны 2 главные вещи – хороший учебник  по HTML и не менее хороший HTML-редактор. Учебник мне был необходим, так как знаний, почерпнутых на уроках, было недостаточно, а редактор намного упрощает создание Web-страниц. Использовать для этого стандартный блокнот Windows очень неудобно, главные его неудобства – это короткая история отмены (отменить можно не более одного действия) и необходимость постоянно сохранять документ, переходить в браузер, обновлять страницу для просмотра изменений. А HTML-редактор позволяет просмотреть изменения, внесённые в Web-страницу в своём внутреннем браузере одним нажатием кнопки. Конечно же, в нём неограниченна история отмены, а также имеется множество других плюсов по сравнению с блокнотом.

     Немного побродив по просторам Интернета, я нашла несколько электронных учебников по HTML, лучшим из которых оказался самоучитель Алленовой Натальи, так как написан очень доступно даже для “чайников” в создании Web-страниц, каким я, по сути, и была. Там нашлось всё, что я хотела узнать.

     Затем я занялась поиском простого, удобного, а главное, бесплатного редактора Web-страниц. Прочтя описания программ, я выбрала несколько редакторов, лучшим из которых оказался редактор Arachnophilia. В этой программе есть практически всё для создания сайта. Например, создать таблицу так же просто, как программе Microsoft Word – просто указать количество строк и столбцов. После нажатия кнопки “Ok” все соответствующие теги будут внесены в HTML-код создаваемой страницы. Так же легко осуществить и другие действия, одним словом, огромное спасибо создателю!

 

2. Создание главной  страницы

 
 

     Итак, создание первой страницы, со стандартным  именем index.htm. При создании новой страницы Arachnophilia выдаёт окошко с предложением указать цвета фона, текста и ссылок, а также даёт возможность указать заголовок. Я указала только цвет фона – травянисто-зелёный, и заголовок, всё остальное осталось по умолчанию, так как цвет текста и ссылок необходимо было подбирать на уже имеющемся фоне, для хорошей смотрибельности.

     После нажатия “Ok”, в моей первой странице уже были прописаны необходимые теги. Первый просмотр! Передо мной предстало пустое зеленое поле с заголовком вверху. Ну что же, подумаем над шапкой. Сначала я хотела разместить там просто текст приветствия, но, подумав, решила поместить фото нашего города – всё-таки сайт решила сделать о городе.

     И тут я вовремя вспомнила о разрешениях. У половины пользователей стоит экранное разрешение 800*600, у второй половины 1024*768, другие разрешения используются очень редко. Сайт должен хорошо смотреться при обоих разрешениях. Я видела сайты, сделанные для просмотра при 1024*768, при разрешении 800*600 создаётся необходимость горизонтальной прокрутки, что очень мешает просмотру сайта. А если создать сайт при разрешении 800*600, и выровнять все объекты по центру, то при просмотре на 1024*768 он смотрится даже лучше. Так я и сделала.

     Итак, рисунок. Если сделать его шириной 800 пикселей, то при разрешении 800*600 он будет занимать по ширине весь экран  – не очень красиво. Значит, нужно сделать его немного поуже по ширине. Посмотрев фотографии, я нашёл подходящую, шириной 752 пикселя, с изображением акимата. Я уже собирался вставить её в страницу, и тут заметил её объём – 120 Кб. При обычном модеме, качающем не более 4 Кб в секунду, только рисунок открывался бы полминуты. Ни один пользователь, подумала я, не выдержит подобной пытки, и покинет сайт ещё до его загрузки. Нужно было как-то уменьшить объём рисунка. Имелось два способа – обрезать его по высоте и понизить качество. Я решила использовать оба, так как чем меньше объём, тем лучше. Для этого я выбрала лучшую программу для обработки изображений – всеми признанный Adobe Photoshop. После нескольких щелчков мышью, высота рисунка изменилась с 500 на 156 пикселей. Осталось понизить качество. При сильном понижении (1-3) объём очень сильно уменьшается, но смотрится рисунок так, что продолжать работу с моим сайтом не стал бы никто. При небольшом понижении (8-10) рисунок смотрится отлично, но объём слишком большой – ещё хуже. Выбор пал на середину (6), неплохое качество и объём 31 Кб, значит, загрузка рисунка осуществится менее чем за 8 секунд – это ещё можно вытерпеть. В итоге получилась фотография 752*156 пикселей объёмом 31 Кб.

     Поместив  её в папку с сайтом, я открыла HTML-редактор, и после нажатия нескольких кнопок рисунок расположился вверху страницы, с выравниванием по центру. Неплохо, но чего-то не хватает. Я решила, что было бы неплохо наложить на рисунок надписи, содержащие краткое описание моего сайта – например, название и то, что он содержит.

     Снова открыв рисунок в Фотошопе, я написала в верхнем левом углу рисунка “kinel-city.kn”, а в правом нижнем краткое содержание сайта – “сведения, фото, программы”. С помощью таких эффектов, как внутренний свет, рельеф и др., я добилась того, чтобы надписи красиво смотрелись на фотографии. Сохранив рисунок с тем же именем, я обновил страницу. Вот это уже лучше! На этом работа с шапкой была закончена.

     Текст. После изготовления шапки страницы, самое время было взяться за текст, выбрать размер, стиль шрифта и содержание страниц. Я решила, что всего на сайте будет 6 страниц. Первая страница будет приветственной, вторая будет содержать описание создания города, третья страница будет отображать сегодняшний Кинель, четвёртая будет содержать фотографии города, пятая – программы, имеющие отношение к Кинелю, а шестая – благодарности.

     После небольших раздумий я набросала приветственный текст следующего содержания: “ЗДРАВСТВУЙТЕ! Добро пожаловать на сайт о Кинеле! Здесь Вы найдёте большое количество информации об этом городе, как о его создании, так и последние сведения о нём. Здесь Вы можете просмотреть и скачать фотографии города. Также на сайте доступны различные программы и файлы, имеющие отношение к Кинелю и Самаре, например телефонный справочник города, подробные карты и т.д. Благодарим за посещение сайта и до встречи!”.

     Затем я долго выбирала подходящий шрифт. Мне нравился шрифт Georgia, но он присутствует не во всех операционных системах. Times New Roman, Courier и Verdana используются почти на всех сайтах. Поэтому я выбрала Comic Sans MS, немного напоминающий рукописный текст.

     Размер  шрифта я оставила по умолчанию, потому что более крупный или мелкий не смотрится как основной текст.

     Затем я долго подбирала цвет текста, многие цвета неплохо смотрелись на зелёном фоне, но остановился я на красно-коричневом.

     Кнопки  и таблицы. Итак, настало время  взяться за кнопки. Простые прямоугольники смотрелись далеко не очень красиво, а создать кнопки с непрямыми  углами проще всего было в Macromedia Flash. За пару часов я изготовила 5 отличных кнопочек, загорающихся при наведении на них указателя мыши. Кнопкой, ведущей на первую страницу, я решила сделать шапку страницы, так как она не менялась во всех страницах моего сайта.

     На  этом создание кнопок было завершено, осталось красиво расположить их относительно текста. Лучше всего смотрелась страница при расположении кнопок в столбик слева от текста приветствия. Очень долго я билась над выравниванием кнопок и текста, пока не расположила их в таблицы, кнопки в одну, а текст – в другую, а таблицы – рядом друг с другом. Всё сразу встало на свои места и стало выглядеть намного лучше. Конечно же, рамки таблиц пришлось убрать, так как с ними страница выглядела хуже.

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

     Баннеры и авторство. Чего же ещё не хватает, думала я, смотря на получившуюся страничку и вспоминая страницы, виденные мною в Интернете? Конечно же, баннеров. Зайдя на сайт о Кинеле - www.kinelgorod.ru, а также на сайт кинельской газеты “Кинельская жизнь”, я скопировала их баннеры, уменьшила их в Фотошопе и поместила в таблицу, а таблицу расположила под основной с выравниванием по центру. Для более чёткого отделения баннеров от текста приветствия я расположила над ними горизонтальную черту.

     Осталось  расположить в самом низу страницы имя автора и ссылку на почтовый ящик, как на большинстве сайтов. Маленьким шрифтом по центру я  прописала своё имя и фамилию, а ещё ниже вставила рисунок почты, и сделала его ссылкой на свой почтовый ящик с помощью функции mailto:.

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

     3.3 Создание второй страницы 

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

     После набора 17 страниц книги "КИНЕЛЬ: ВЧЕРА, СЕГОДНЯ, ЗАВТРА", содержащих нужный материал, страница с историей была готова.

     3.4 Создание страницы с рекламой города

 

     Работа  над третьей страницей заняла у меня больше времени, чем над  всеми остальными, так как содержала  больше всего материала. Набор десяти разделов по несколько страниц текста, в большом количестве содержащего  кавычки, скобки, примеры и цифровые показатели – это дело не пары дней. К тому же, для лучшей навигации по странице я решила внедрить в неё якоря – ссылки внутри страницы. Под первой горизонтальной чертой я расположила в столбик названия всех разделов, сделав каждое ссылкой на начало соответствующего раздела. А в конце каждого раздела я расположила одинаковые ссылки, ведущие на начало списка якорей. Таким образом, просмотр страницы намного ускорялся. Также в конце каждого раздела, под ссылкой, я вставила горизонтальную черту, для более чёткого отделения разделов друг от друга.