Давайте так же создадим стиль для заголовков статей:
| H2 {font-family: Verdana, Arial Cyr, Arial;font-weight: bold;font-size: 14pt;color: black;margin-left: 20%;margin-top: 1cm;text-align: left;} |
Все заголовки наших страниц, оформленные тегом <H2>, будут отображаться жирным шрифтом Verdana или, если этот шрифт не установлен, шрифтом Arial. Размер заголовка мы установим равным 14 пунктам, цвет черный, отступ слева равен 20 % ширины страницы, а отступ сверху – 1 см. Заголовок будет выравниваться относительно левого края страницы.
Благодаря тому, что боковые отступы заголовка и параграфа установлены нами в процентах от ширины окна броузера, при просмотре наших страничек на компьютерах с разным разрешением дисплея пропорции и расположение заголовка, основного текста и отступов будут сохранены.
Для того чтобы «привязать» созданные нами стили к нашим страничкам, во все html-файлы в разделе <HEAD> мы должны поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:
| <LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css"> |
Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички, параметр HREF="URL" в нашем случае будет просто именем нашего файла стилей (styles.css).
Итак, в самом начале мне были нужны 2 главные вещи – хороший учебник по HTMLи не менее хороший HTML-редактор. Учебник мне был необходим, так как знаний, почерпнутых на уроках, было недостаточно, а редактор намного упрощает создание Web-страниц. Использовать для этого стандартный блокнот Windowsочень неудобно, главные его неудобства – это короткая история отмены (отменить можно не более одного действия) и необходимость постоянно сохранять документ, переходить в броузер, обновлять страницу для просмотра изменений. А HTML-редактор позволяет просмотреть изменения, внесённые в Web-страницу в своём внутреннем броузере одним нажатием кнопки. Конечно же, в нём неограниченна история отмены, а также имеется множество других плюсов по сравнению с блокнотом.
Немного побродив по просторам Интернета, я нашёл несколько электронных учебников по HTML, лучшим из которых оказался самоучитель Алленовой Натальи, так как написан очень доступно даже для “чайников” в создании Web-страниц, каким я, по сути, и был. Там нашлось всё, что я хотел узнать.
Затем я занялся поиском простого, удобного, а главное, бесплатного редактора Web-страниц. Прочтя описания программ, я выбрал несколько редакторов, лучшим из которых оказался редактор Arachnophilia. В этой программе есть практически всё для создания сайта. Например, создать таблицу так же просто, как программе MicrosoftWord– просто указать количество строк и столбцов. После нажатия кнопки “Ok” все соответствующие теги будут внесены в HTML-код создаваемой страницы. Так же легко осуществить и другие действия, одним словом, огромное спасибо создателю!
Итак, создание первой страницы, со стандартным именем index.htm. При создании новой страницы Arachnophiliaвыдаёт окошко с предложением указать цвета фона, текста и ссылок, а также даёт возможность указать заголовок. Я указал только цвет фона – травянисто-зелёный, и заголовок, всё остальное осталось по умолчанию, так как цвет текста и ссылок необходимо было подбирать на уже имеющемся фоне, для хорошей смотрибельности.
После нажатия “Ok”, в моей первой странице уже были прописаны необходимые теги. Первый просмотр! Передо мной предстало пустое зеленое поле с заголовком вверху. Ну что же, подумаем над шапкой. Сначала я хотел разместить там просто текст приветствия, но, подумав, решил поместить фото нашего города – всё-таки сайт о городе.
И тут я вовремя вспомнил о разрешениях. У половины пользователей стоит экранное разрешение 800*600, у второй половины 1024*768, другие разрешения используются очень редко. Сайт должен хорошо смотреться при обоих разрешениях. Я видел сайты, сделанные для просмотра при 1024*768, при разрешении 800*600 создаётся необходимость горизонтальной прокрутки, что очень мешает просмотру сайта. А если создать сайт при разрешении 800*600, и выровнять все объекты по центру, то при просмотре на 1024*768 он смотрится даже лучше. Так я и сделал.
Итак, рисунок. Если сделать его шириной 800 пикселей, то при разрешении 800*600 он будет занимать по ширине весь экран – не очень красиво. Значит, нужно сделать его немного поуже по ширине. Посмотрев фотографии, я нашёл подходящую, шириной 752 пикселя, с изображением акимата. Я уже собирался вставить её в страницу, и тут заметил её объём – 120 Кб. При обычном модеме, качающем не более 4 Кб в секунду, только рисунок открывался бы полминуты. Ни один пользователь, подумал я, не выдержит подобной пытки, и покинет сайт ещё до его загрузки. Нужно было как-то уменьшить объём рисунка. Имелось два способа – обрезать его по высоте и понизить качество. Я решил использовать оба, так как чем меньше объём, тем лучше. Для этого я выбрал лучшую программу для обработки изображений – всеми признанный AdobePhotoshop. После нескольких щелчков мышью, высота рисунка изменилась с 500 на 156 пикселей. Осталось понизить качество. При сильном понижении (1-3) объём очень сильно уменьшается, но смотрится рисунок так, что продолжать работу с моим сайтом не стал бы никто. При небольшом понижении (8-10) рисунок смотрится отлично, но объём слишком большой – ещё хуже. Выбор пал на середину (6), неплохое качество и объём 31 Кб, значит, загрузка рисунка осуществится менее чем за 8 секунд – это ещё можно вытерпеть. В итоге получилась фотография 752*156 пикселей объёмом 31 Кб.
Поместив её в папку с сайтом, я открыл HTML-редактор, и после нажатия нескольких кнопок рисунок расположился вверху страницы, с выравниванием по центру. Неплохо, но чего-то не хватает. Я решил, что было бы неплохо наложить на рисунок надписи, содержащие краткое описание моего сайта – например, название и то, что он содержит.
Снова открыв рисунок в Фотошопе, я написал в верхнем левом углу рисунка “kostanay-city.kz”, а в правом нижнем краткое содержание сайта – “сведения, фото, программы”. С помощью таких эффектов, как внутренний свет, рельеф и др., я добился того, чтобы надписи красиво смотрелись на фотографии. Сохранив рисунок с тем же именем, я обновил страницу. Вот это уже лучше! На этом работа с шапкой была закончена.
Текст. После изготовления шапки страницы, самое время было взяться за текст, выбрать размер, стиль шрифта и содержание страниц. Я решил, что всего на сайте будет 6 страниц. Первая страница будет приветственной, вторая будет содержать описание создания города, третья страница будет отображать сегодняшний Костанай, четвёртая будет содержать фотографии города, пятая – программы, имеющие отношение к Костанаю, а шестая – благодарности.
После небольших раздумий я набросал приветственный текст следующего содержания: “ЗДРАВСТВУЙТЕ! Добро пожаловать на сайт о Костанае! Здесь Вы найдёте большое количество информации об этом городе, как о его создании, так и последние сведения о нём. Здесь Вы можете просмотреть и скачать фотографии города. Также на сайте доступны различные программы и файлы, имеющие отношение к Костанаю и Казахстану, например телефонный справочник города, подробные карты и т.д. Благодарим за посещение сайта и до встречи!”.
Затем я долго выбирал подходящий шрифт. Мне нравился шрифт Georgia, но он присутствует не во всех операционных системах. TimesNewRoman, Courierи Verdanaиспользуются почти на всех сайтах. Поэтому я выбрал Comic Sans MS, немного напоминающий рукописный текст.
Размер шрифта я оставил по умолчанию, потому что более крупный или мелкий не смотрится как основной текст.
Затем я долго подбирал цвет текста, многие цвета неплохо смотрелись на зелёном фоне, но остановился я на красно-коричневом.
Кнопки и таблицы. Итак, настало время взяться за кнопки. Простые прямоугольники смотрелись далеко не очень красиво, а создать кнопки с непрямыми углами проще всего было в MacromediaFlash. Так как я сам разбирался в этой программе очень слабо, пришлось прибегнуть к помощи студента из параллельной группы. За пару часов он изготовил 5 отличных кнопочек, загорающихся при наведении на них указателя мыши. Кнопкой, ведущей на первую страницу, я решил сделать шапку страницы, так как она не менялась во всех страницах моего сайта.
На этом создание кнопок было завершено, осталось красиво расположить их относительно текста. Лучше всего смотрелась страница при расположении кнопок в столбик слева от текста приветствия. Очень долго я бился над выравниванием кнопок и текста, пока не расположил их в таблицы, кнопки в одну, а текст – в другую, а таблицы – рядом друг с другом. Всё сразу встало на свои места и стало выглядеть намного лучше. Конечно же, рамки таблиц пришлось убрать, так как с ними страница выглядела хуже.
Всё было хорошо, но как же сделать, чтобы это всё не выглядело хуже при смене разрешения? И я решил поместить таблицу с кнопками и таблицу с текстом в одну большую таблицу с шириной 752 пикселя, под верхний рисунок, и расположить её по центру. Теперь ничего никуда не съезжало при смене разрешения. Эту же структуру я сохранил и при создании остальных страниц моего сайта.
Баннеры и авторство. Чего же ещё не хватает, думал я, смотря на получившуюся страничку и вспоминая страницы, виденные мною в Интернете? Конечно же, баннеров. Зайдя на сайты о Костанае www.kostanay.netи www.kostanai.kz, а также на сайт костанайской газеты “Твой Шанс”, я скопировал их баннеры, уменьшил их в Фотошопе и поместил в таблицу, а таблицу расположил под основной с выравниванием по центру. Для более чёткого отделения баннеров от текста приветствия я расположил над ними горизонтальную черту.