|
p align="left">В этом стиле мы задали, что параграфы <P> на всех страничках, которые используют это описание, будут отображаться шрифтом Times New Roman или в случае, если этот шрифт на машине не установлен, другим шрифтом, но из этого семейства (serif). Цвет шрифта мы установили черный, выравнивание - полное (по обеим сторонам). Также мы установили для параграфа ряд значений отступов. Это было сделано со следующей целью: по умолчанию параграф в HTML отображается равным практически 95 % страницы и с интервалами между параграфами, равными 180 % межстрочного интервала. Читать такие параграфы не очень удобно, так как интервалы между ними слишком велики, а ширина параграфа слишком большая. Посмотрите на журнал, который вы сейчас держите в руках: текст сверстан в колонки для того, чтобы его было удобнее читать. В стиле параграфа, который мы создали, установлены боковые отступы в 15 % ширины окна и вертикальные отступы в 1 пункт - так текст статьи будет гораздо читабельнее. Давайте так же создадим стиль для заголовков статей: |
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). 3. Описание создания сайта3.1 ПодготовкаИтак, в самом начале мне были нужны 2 главные вещи - хороший учебник по HTML и не менее хороший HTML-редактор. Учебник мне был необходим, так как знаний, почерпнутых на уроках, было недостаточно, а редактор намного упрощает создание Web-страниц. Использовать для этого стандартный блокнот Windows очень неудобно, главные его неудобства - это короткая история отмены (отменить можно не более одного действия) и необходимость постоянно сохранять документ, переходить в броузер, обновлять страницу для просмотра изменений. А HTML-редактор позволяет просмотреть изменения, внесённые в Web-страницу в своём внутреннем броузере одним нажатием кнопки. Конечно же, в нём неограниченна история отмены, а также имеется множество других плюсов по сравнению с блокнотом.Немного побродив по просторам Интернета, я нашёл несколько электронных учебников по HTML, лучшим из которых оказался самоучитель Алленовой Натальи, так как написан очень доступно даже для “чайников” в создании Web-страниц, каким я, по сути, и был. Там нашлось всё, что я хотел узнать.Затем я занялся поиском простого, удобного, а главное, бесплатного редактора Web-страниц. Прочтя описания программ, я выбрал несколько редакторов, лучшим из которых оказался редактор Arachnophilia. В этой программе есть практически всё для создания сайта. Например, создать таблицу так же просто, как программе Microsoft Word - просто указать количество строк и столбцов. После нажатия кнопки “Ok” все соответствующие теги будут внесены в HTML-код создаваемой страницы. Так же легко осуществить и другие действия, одним словом, огромное спасибо создателю!3.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-редактор, и после нажатия нескольких кнопок рисунок расположился вверху страницы, с выравниванием по центру. Неплохо, но чего-то не хватает. Я решил, что было бы неплохо наложить на рисунок надписи, содержащие краткое описание моего сайта - например, название и то, что он содержит.Снова открыв рисунок в Фотошопе, я написал в верхнем левом углу рисунка “kostanay-city.kz”, а в правом нижнем краткое содержание сайта - “сведения, фото, программы”. С помощью таких эффектов, как внутренний свет, рельеф и др., я добился того, чтобы надписи красиво смотрелись на фотографии. Сохранив рисунок с тем же именем, я обновил страницу. Вот это уже лучше! На этом работа с шапкой была закончена.Текст. После изготовления шапки страницы, самое время было взяться за текст, выбрать размер, стиль шрифта и содержание страниц. Я решил, что всего на сайте будет 6 страниц. Первая страница будет приветственной, вторая будет содержать описание создания города, третья страница будет отображать сегодняшний Костанай, четвёртая будет содержать фотографии города, пятая - программы, имеющие отношение к Костанаю, а шестая - благодарности. После небольших раздумий я набросал приветственный текст следующего содержания: “ЗДРАВСТВУЙТЕ! Добро пожаловать на сайт о Костанае! Здесь Вы найдёте большое количество информации об этом городе, как о его создании, так и последние сведения о нём. Здесь Вы можете просмотреть и скачать фотографии города. Также на сайте доступны различные программы и файлы, имеющие отношение к Костанаю и Казахстану, например телефонный справочник города, подробные карты и т.д. Благодарим за посещение сайта и до встречи!”. Затем я долго выбирал подходящий шрифт. Мне нравился шрифт Georgia, но он присутствует не во всех операционных системах. Times New Roman, Courier и Verdana используются почти на всех сайтах. Поэтому я выбрал Comic Sans MS, немного напоминающий рукописный текст. Размер шрифта я оставил по умолчанию, потому что более крупный или мелкий не смотрится как основной текст. Затем я долго подбирал цвет текста, многие цвета неплохо смотрелись на зелёном фоне, но остановился я на красно-коричневом. Кнопки и таблицы. Итак, настало время взяться за кнопки. Простые прямоугольники смотрелись далеко не очень красиво, а создать кнопки с непрямыми углами проще всего было в Macromedia Flash. Так как я сам разбирался в этой программе очень слабо, пришлось прибегнуть к помощи студента из параллельной группы. За пару часов он изготовил 5 отличных кнопочек, загорающихся при наведении на них указателя мыши. Кнопкой, ведущей на первую страницу, я решил сделать шапку страницы, так как она не менялась во всех страницах моего сайта. На этом создание кнопок было завершено, осталось красиво расположить их относительно текста. Лучше всего смотрелась страница при расположении кнопок в столбик слева от текста приветствия. Очень долго я бился над выравниванием кнопок и текста, пока не расположил их в таблицы, кнопки в одну, а текст - в другую, а таблицы - рядом друг с другом. Всё сразу встало на свои места и стало выглядеть намного лучше. Конечно же, рамки таблиц пришлось убрать, так как с ними страница выглядела хуже. Всё было хорошо, но как же сделать, чтобы это всё не выглядело хуже при смене разрешения? И я решил поместить таблицу с кнопками и таблицу с текстом в одну большую таблицу с шириной 752 пикселя, под верхний рисунок, и расположить её по центру. Теперь ничего никуда не съезжало при смене разрешения. Эту же структуру я сохранил и при создании остальных страниц моего сайта. Баннеры и авторство. Чего же ещё не хватает, думал я, смотря на получившуюся страничку и вспоминая страницы, виденные мною в Интернете? Конечно же, баннеров. Зайдя на сайты о Костанае www.kostanay.net и www.kostanai.kz, а также на сайт костанайской газеты “Твой Шанс”, я скопировал их баннеры, уменьшил их в Фотошопе и поместил в таблицу, а таблицу расположил под основной с выравниванием по центру. Для более чёткого отделения баннеров от текста приветствия я расположил над ними горизонтальную черту. Осталось расположить в самом низу страницы имя автора и ссылку на почтовый ящик, как на большинстве сайтов. Маленьким шрифтом по центру я прописал своё имя и фамилию, а ещё ниже вставил рисунок почты, и сделал его ссылкой на свой почтовый ящик с помощью функции mailto:. На этом создание основной страницы было окончено, и такая структура сохранялась на всех страницах, менялся лишь текст содержания, но неизменно над ним был рисунок-шапка, слева от него - кнопки, а под ним баннеры и ссылка на почту автора. 3.3 Создание второй страницы При создании второй страницы, содержащей историю создания города, я просто скопировал HTML-код главной страницы, затем удалил текст приветствия и вставил на его место краткое описание страницы. Далее я вставил ещё одну горизонтальную черту. В итоге получилась копия первой страницы, только с другим текстом приветствия и двумя горизонтальными чертами над баннерами. А между этими чертами я расположил основной текст страницы, содержащий саму историю создания города. И, конечно же, я изменил заголовок страницы. После набора 17 страниц книги "КУСТАНАЙ: ВЧЕРА, СЕГОДНЯ, ЗАВТРА", содержащих нужный материал, страница с историей была готова. 3.4 Создание страницы с описанием городаРабота над третьей страницей заняла у меня больше времени, чем над всеми остальными, так как содержала больше всего материала. Набор десяти разделов по несколько страниц текста, в большом количестве содержащего кавычки, скобки, примеры и цифровые показатели - это дело не пары дней. К тому же, для лучшей навигации по странице я решил внедрить в неё якоря - ссылки внутри страницы. Под первой горизонтальной чертой я расположил в столбик названия всех разделов, сделав каждое ссылкой на начало соответствующего раздела. А в конце каждого раздела я расположил одинаковые ссылки, ведущие на начало списка якорей. Таким образом, просмотр страницы намного ускорялся. Также в конце каждого раздела, под ссылкой, я вставил горизонтальную черту, для более чёткого отделения разделов друг от друга. На этом и третья страница была готова. 3.5 Страница с фотографиямиВ четвёртой странице сохранилась та же структура, что и в первых трёх, просто вместо основного текста необходимо было выложить фотографии города. Объём каждой фотографии составлял, в среднем, 70 Кб. Если на одной странице выложить их все, то её загрузка заняла бы огромное время, а создавать несколько страниц было нельзя. Для решения проблемы я с помощью Фотошопа сделал уменьшённые копии каждой фотографии и вставил их в таблицу. Под каждой маленькой фотографией я сделал ссылку, ведущую на её увеличенную копию. Всего на странице представлено 39 фотографий, объём каждой уменьшенной фотографии составил не более 4 Кб, поэтому страница должна загружаться меньше, чем за минуту. А если пользователь захочет скачать все фотографии, то нет необходимости закачивать их по одной - имеется возможность скачки ZIP-архива, содержащего все фотографии.Таким образом, была завершена работа над четвёртой страницей моего сайта.3.6 Страница с программамиНа пятой странице должны были помещаться программы, имеющие отношение к Костанаю, статьи и гимн Казахстана. Припомнив структуру сайтов, содержащих софт, я решил сделать скриншоты каждой программы и дать краткие описания. Таким образом, страница выглядела так - под текстом, содержащим описание страницы, располагалась горизонтальная черта, ниже название программы, затем скриншот, описание и ссылка для закачивания. Позже я сделал и скриншоты статей. Каждую программу или статью разделяла горизонтальная черта, для четкого отделения их друг от друга. Также я выложил для скачки гимн Казахстана в формате mp3, и программу-архиватор WinRAR. На этом пятая страница была завершена.3.7 Страница с благодарностямиНад последней страницей я работал около 15 минут, так она содержала просто благодарности всем, кто помогал мне создать сайт. Благодарности представлены в виде маркированного списка. Заключение Надеюсь, после прочтения этой работы вы поняли её смысл - любой человек, имеющий терпение и старательность, сможет создать электронный сайт своими руками, в случае надобности не прибегая к помощи профессионалов. На создание своего сайта я потратил около полутора месяцев. Кое-что мне подсказывали, но большинство затруднений я разрешал сам, отыскивая ответ в самоучителе. Конечно, профессионал создал бы такой сайт за несколько дней, но сразу профессионалом ещё никто не становился. Заметив какие-то недочёты в устройстве сайта, прошу не забывать, что это моя первая серьёзная работа в HTML. Спасибо за прочтение! Список использованной литературы 1. Алленова Наталья - Самоучитель по html. 2. Статья в Интернете www.akdi.ru/INTERNet/html32/akdi.htm 3. Сайт www.ic.vrn.ru/ 4. Сайт www.arachnoid.com/arachnophilia 5. Сайт www.rzn62.narod.ru 6. Сайт www.mysite.hut.ru 7. Статья “Тезисы выступления акима Костанайской области” 8. Статья География Казахстана” 9. Статья “Казахстан 2030” 10. Личные конспекты
Страницы: 1, 2, 3, 4, 5, 6, 7, 8
|
