Искусство оформления сайта. Практическое пособие

Вы пока неопытный пользователь ПК, но время от времени заходите в Интернет. Смотрите на чужие сайты и думаете: вот бы и мне так научиться, чтобы потом зарабатывать на этом неплохие деньги или же просто продвигать свой бизнес, не обращаясь в агентство, а выполняя все работы по «сайтостроению» самостоятельно. И тогда вы просите знакомых подсказать, какие учебники по веб-дизайну нужно прочитать. Сейчас перед вами книга как раз для абсолютных новичков. Хотя кое-что в ней будет познавательно и для профессионалов, а именно – технологии ваби-саби и аналогичные им, пришедшие в западное веб-искусство сравнительно недавно с Востока.

Еще до того, как мы приступим к чтению первой главы, вы научитесь верстать веб-странички. А когда книга закончится, то вы сможете создавать такие сайты, глядя на которые только профи поймет, что вы пока еще новичок и что вам еще предстоит освоить некоторые хитрости, которые в объем этого пособия просто не поместились.

Готовы к работе? Тогда отложите в сторону книгу, идите в магазин по продаже программного обеспечения («софта») и отыщите там диск со стандартным набором программ для веб-дизайна, но чтобы при этом в комплект обязательно входила великолепная программка для новичков (и не только!) под названием Web Page Maker, что означает «Конструктор веб-страниц». Установим эту программу на ваш компьютер, что совсем нетрудно сделать, так как все указания есть в прилагаемом файле Readme.txt. Вы спросите, пригоден ли ваш «комп» для профессионального, коммерческого веб-дизайна. Уместный вопрос, и ответ на него можно найти в дальнейшем. А пока не станем бежать впереди паровоза, потому что ученическую страничку сделать можно на всяком ПК, где установлена Windows XP, Windows Vista или Windows 2000. Скорее всего, у вас какая-то из этих операционных систем.

Откройте программку Web Page Maker («Веб Пейдж Мейкер»), кликнув пару раз на ярлычок, затерявшийся на рабочем столе. Перед вами выпрыгнет диалоговое окошечко Welcome (добро пожаловать), которое предложит – Create a web page through templates, то есть создайте веб-страничку с помощью шаблона (рис. 1). Как видите, в этой программке есть небольшой, но оригинальный набор шаблонов. Выберем предлагаемую нам опцию: ставьте флажок и жмите ОК. Теперь компьютер предлагает выбрать шаблоны деловые или личные. Остановимся на личных, поскольку для деловых сайтов мы еще не доросли; подберем наиболее милый шаблончик: выделим его щелчком мыши и нажмем ОК.

Допустим вам приглянулся красивый пейзаж или большая фотография с изображением котят. Сохраним ученическую веб-страничку на своем ПК через меню File › Save, придумав для нее название index. Почему именно такое? Потому что именно так обычно называется главная страничка сайта.

Страничка перед вашими глазами имеет какой-то английский текст. Это перечисление достоинств программы Web Page Maker. Этот текст нам совершенно не нужен, поэтому мы заменяем его собственным. Во-первых, разместим на главной страничке (она называется еще домашней, Home [page]) заголовок сайта, его русскоязычное название. Поскольку это ученический ресурс, то и назовем его «Образованные котята». Для этого кликнем дважды левой кнопкой мышки, наведя курсор на буквы заголовка. Откроется окошечко Text Editor – текстовый редактор. В этом окошечке удалите исходную надпись как обычно клавишами Delete или «забой» (Back Space) и сделайте свою: «Образованные котята».

Выделите ее курсором прямо в текстовом редакторе, а потом измените буквам цвет, начертание или даже шрифт по вкусу (см. рис. 2). На вашем компьютере должны быть установлены популярные текстовые редакторы Word и Блокнот или, по крайней мере, один из них. Откройте любой из них и наберите в чистом окошке следующее: «Дорогие друзья! Образованные котята приветствуют вас!» и еще какой-нибудь текст, возможно, даже абракадабру. Теперь дважды кликните мышкой на средний текстовый блок и через редактор осуществите вставку Ctrl + V вашего текста вместо рекламы. Для красоты слова «Дорогие друзья!» отбили Enter’ом и сделали полужирными, выделив их с этой целью курсором и нажав на букву В (bold – полужирное начертание) на панели инструментов Text Editor.

Аналогично меняем надписи сбоку на слова: «О сайте», «Фото», «Видео», «Контакты». Это будут рубрики нашего сайта. В завершение из озорства можете вставить где-нибудь сбоку милую картинку. Для этого кликните один раз на значок Image или воспользуйтесь панелью управления, проделав путь Insert › Image (Вставка › Изображение). Найдите на своем ПК оригинальную картинку и нажмите ОК. Вот только картинка эта разместилась как-то неудачно. Но это не проблема: наводим на нее курсор, захватим рисунок левой кнопкой мыши и перетащим в более подходящее на наш взгляд место.

Что получилось у меня, вы можете увидеть, когда подключитесь к Интернету и забьете в строку поиска URL-адрес http://obrazcats.narod.ru. Советую, во что бы то ни стало посетить этот ресурс, поскольку он является электронным приложением к настоящему пособию. Сайт «Образованные котята» содержит массу полезных советов, интересных статей, ученических страничек, галерею скриншотов и видео с изображением основных этапов работы по созданию сайта, а также большую коллекцию расходных материалов, которые вы можете совершенно бесплатно скачать и использовать при создании собственного веб-узла.