SNK Software
Web Studio Монополия Metaproducts Утилиты Игры
Монополию Web Studio Библиотека
Вебмастер Дельфи Работа на ПК Самоучитель
Для PHP Для Delphi
Веб-дизайн Программирование Компьютеры Девайсы Заметки
SNK Software Индустрия hardware Индустрия software
О студии Портфолио Сопровождение сайтов

Новые материалы

Девайсы:
Сравнительный обзор Nokia Lumia 920 и HTC 8X
Девайсы:
Обзор Nokia Lumia 820 – смартфона на WP8
Вебмастеру:
Настройка Apache, PHP и MySQL для Linux-VPS
Вебмастеру:
VPS на домашнем ПК: настройка сети в VM VirtualBox и Debian
Вебмастеру:
VPS на домашнем ПК: устанавливаем Linux Debian 6
Вебмастеру:
VPS на домашнем ПК: установка VM VirtualBox
Работа на компьютере:
Иные возможности текстового процессора Word
Работа на компьютере:
Вставка объектов
Работа на компьютере:
Таблицы в Word
Работа на компьютере:
Печать и сохранение документов
Работа на компьютере:
Сноски, колонтитулы, оглавление и указатели в Word

Первые итоги изучения верстки

Приведенной выше информации достаточно для того, чтобы получить общее представление о применяемых при верстке web-страниц технологиях (а если брать шире - то при создании сайтов вообще). Однако прежде, чем приступить к их детальному изучению, следует остановиться на таких аспектах, как правила оформления документов, использование графики и средств, служащих для размещения готовых страниц в интернете.

Как правильно оформить документ

Создание HTML-документов требует от автора предельной внимательности и богатого воображения. Дело в том, что иногда даже трудно представить, в какой конфигурации окажется компьютер посетителя. Это относится как к аппаратному обеспечению, так и к программному. Например, можно предположить, что наиболее распространенное разрешение экрана - 1280х1024 точек, глубина цвета - 32 бит, операционная система - Windows, а браузер - MSIE 8.0. Однако много ли посетителей вашего сайта имеют именно такой набор? Не более 10-15%, могу вас уверить! Так что, если вы "оптимизируете" свой сайт для вроде как самой распространенной конфигурации, подавляющее большинство посетителей останутся недовольны, а вернее, не увидят того, что вы ожидали.

Для фиксированного размещения объектов на веб-страницах многие дизайнеры используют таблицы, указывая размеры (в частности, ширину) непосредственно в пикселях. Поскольку минимальное из встречающихся на практике разрешений экрана - 800х600 (или 800x480), то таблицу ограничивают по ширине примерно до 750-760 пикселей (не следует забывать, что существует еще и полоса прокрутки, а также обычно остается небольшой отступ от границы экрана до самой таблицы). Впрочем, более приемлемым на сегодня вариантом является все же лимит в 1024 пикселя по ширине (помним, что "эффективных" примерно на 30 меньше, т.е. фактический лимит составит 990-995px). При таком подходе все содержимое страницы помещается внутрь таблицы, и можно быть уверенным, что при изменении размеров окна дизайн не "рассыплется". Однако есть и недостатки: дело в том, что пока таблица не прогрузится до конца, большинство браузеров (в частности, MSIE) не сможет показать ее содержимое. Кроме того, структура страницы, созданная при помощи таблицы, если только последняя не представляет собой одну большую ячейку, трудна для восприятия в исходном виде.

В начале 1997 года Netscape для решения этой и ряда других проблем ввела элемент LAYER, при помощи которого можно не только указывать непосредственные размеры, но и управлять наложением одних частей страницы на другую. Фактически, если вы работали с мощным графическим редактором, то представляете себе, что такое слои. Сразу после выхода Communicator 4.0 на главной странице Netscape можно было видеть применение слоев в динамике, когда навигация по серверу была выполнена в стиле кнопки "Пуск" - с раскрывающимися подменю, и прочими атрибутами.

К сожалению, технология слоев в таком виде не нашла поддержки у других производителей, в частности, у Microsoft. Но не следует сильно огорчаться: решение и, причем, универсальное, все же есть. И сводится оно к использованию каскадных таблиц стилей. Вы можете указывать фиксированные размеры и расположение для любого блочного элемента. Как правило, для этих целей используют элемент DIV:

div { margin-left: 10%; width: 550px; }

В этом примере мы задали ширину блока в 550 пикселей с отступом слева величиной в 10% от ширины экрана. Таким образом, все, размещенное внутри блока, охваченного тегом DIV, будет усечено по ширине в 550 пикселей и иметь отступ в 64 или более пикселей от левой границы окна браузера, в зависимости от разрешения (вплоть до 192, если установлен режим 1920х1080).

Теперь несколько слов о цвете. Прежде всего, если возможно, старайтесь не использовать светлый шрифт на темном фоне. Если текста на странице много, то читать его будет тяжело. В крайнем случае, указывайте достаточно крупный размер шрифта. Кроме того, следует следить за контрастностью между фоном и цветом текста: чем она выше, тем лучше. Чтобы это проверить, снимите копию экрана, нажав "Print Screen", вставьте полученное изображение из буфера обмена в графический редактор и конвертируйте его в полутоновое (grayscale) изображение. Если текст останется легко читаемым, значит, палитра имеет достаточную контрастность, если нет - попробуйте подобрать другое сочетание цветов. Впрочем, этот способ не является универсальным: в одном случае с контрастностью вроде все в порядке, но видно все равно плохо, а в другом, наоборот, практически слившееся серое изображение неплохо видно в цвете, так что проверяйте результат не только на своих, но и на чужих глазах.

Отдельно следует рассмотреть использование рисунка в качестве фонового изображения. Прежде всего, рисунок (также, как и фон вообще) не должен быть ярким и контрастным, иначе он будет "забивать" само содержимое страницы. Для фона хорошо подходят неяркие, немного расплывчатые изображения. Они могут быть как темными, так и светлыми. Гигантские, иногда на десятках компакт-дисков, коллекции текстур и фоновых изображений предлагают некоторые крупные фирмы, разрабатывающие графические пакеты. Объемностью своих коллекций славится канадская корпорация Corel; есть из чего выбрать и у других поставщиков. Как правило, такие коллекции стоят недорого - в пределах 10 долларов за диск, хотя найти в них что-нибудь подходящее бывает довольно трудно. Разумеется, множество архивов с коллекциями графических файлов можно найти в самом интернете.

Выбрав фоновое изображение, не забудьте подобрать близкий по тону цвет фона страницы. Это делается для случая, когда загрузка графики у пользователя отключена. Кроме того, фон может прогрузиться не сразу, и если вы используете белый текст на темном фоне, то до тех пор, пока фон не прогрузится (если вообще прогрузится!), посетитель вашей странички ничего не сможет прочитать, поскольку в большинстве систем по умолчанию используется белый или светло-серый фон.

Разобравшись с цветом, выберите подходящий шрифт. На самом деле, выбор невелик: до недавних пор было возможно использовать только две гарнитуры: с фиксированным и с пропорциональным шагом. Для большинства систем это, соответственно, Courier и Times.

Использование таблиц стилей позволяет указывать любой шрифт, однако следует учесть, что применение экзотических гарнитур приведет к тому, что большинство пользователей не увидят того, что вы ожидали показать. Это связано с тем, что на разных компьютерах установлены разные шрифты. Единственный распространенный шрифт (помимо двух указанных выше) - это Arial (или Helvetica). Только его можно использовать без риска.

Выход, однако, имеется и в этом случае. Спецификация CSS2 явно определяет возможность использования "загружаемых" шрифтов. Иными словами, вместе со страницей на компьютер посетителя будет загружен и файл с требуемым шрифтом. Следует, правда, оговориться, что формат подобных файлов отличается от применяемых в операционных системах типа Windows, в связи с чем разработчики браузеров создают такие шрифты сами. На страницах сервера Microsoft (www.microsoft.com) можно найти несколько подобных гарнитур. К сожалению, символы кириллицы в них пока что отсутствуют.

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

Чего надо стараться избегать

Прежде чем заняться творчеством для WWW, следует раз и навсегда запомнить, что максимальный размер типичной Web-страницы не должен превышать пары сотен килобайт, включая как сам HTML-файл, так и все внедренные в него графические и иные объекты. Некоторые редакторы, например, Visual Workshop, имеют в своем распоряжении специальную функцию, вычисляющую суммарный размер и предполагаемое время загрузки документа. Дело в том, что скорость загрузки страницы в браузер из интернета при помощи, скажем, GPRS-модема на несколько порядков ниже, чем с жесткого диска. И поэтому не следует принимать во внимание тот факт, что при загрузке с винчестера документ загружается быстро - с такой скоростью никто, кроме вас, загрузить ее не сможет. Кроме того, если страница будет действительно огромной, то ее вообще мало кто увидит, поскольку время соединения стоит денег и маловероятно, что найдется человек, готовый ждать 5, а то и 15 минут, пока прогрузится ваше многомегабайтное творение, не зная даже наверняка, что он увидит в результате!

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

Из всего этого следует сделать следующие выводы:

Если вы нарисовали в 3D MAX что-нибудь замечательное, и меньше, чем на весь экран в 24-бит цвете это смотреть неинтересно, ни в коем случае не помещайте такой рисунок на главную страницу. Лучше создайте ссылку на этот файл, не забыв указать его размер. Можете не сомневаться: кому интересно, тот обязательно посмотрит. Кроме того, часто создают миниатюрные, размером в 3-5 килобайт копии для того, чтобы посетитель мог разобраться, стоит ли ему щелкать по ссылке и дожидаться загрузки полноразмерной картинки.

Еще одно ограничение - это неумеренное использование спецэффектов Flash, апплетов Java, анимированных рисунков, и прочих двигающихся и мигающих объектов. Конечно, автора, впервые создавшего какой-нибудь "потрясающий" апплет, или нарисовавшего весь мигающий и переливающийся GIF, понять можно. Только вот посетители страницы могут не разделять таких восторгов. Кроме того, подобные творения, как правило, довольно долго грузятся. А когда их много, то восприятие страницы вообще становится проблематичным. Поэтому, прежде чем наполнять страницу столь специфическим содержанием, подумайте, действительно ли оно того стоит?

Помимо оформления, не следует забывать о главном, то есть о содержании, поскольку именно содержание определяет суть сайта. О чем именно рассказать на сайте - дело автора, надо лишь учесть что то, о чем вы рассказываете, должно быть интересно не только вам. Когда речь идет о корпоративном (или любом ином коммерческом) сервере, повышенное внимание следует уделять стилю изложения информации. Если текст будет трудным для восприятия, то не много найдется желающих его прочитать. А если будут встречаться еще и орфографические ошибки, то ваша репутация может пострадать.

В любом случае, плохо сделанный, да еще не дай бог, содержащий ошибки корпоративный сайт, вместо того, чтобы привлечь клиентов, с большой долей вероятности будет их отпугивать.

Персональные странички, конечно, не предъявляют столь жестких требований к стилю изложения, поскольку ясно, что никакой PR-менеджер над содержимым не трудился. Тем не менее, требования к русскому языку остаются в силе. Если вы не уверены, что можете свободно писать без ошибок, установите резидентную программу для проверки орфографии, например, "ОРФО", либо прогоняйте весь текст через текстовый процессор (например, Microsoft Word), или же сразу используйте HTML-редактор, поддерживающий проверку орфографии.

Иногда можно встретить странички, русское содержимое которых продублировано на английском языке. Во многих случаях английский дубль содержит столь чудовищное количество ошибок, что его полное отсутствие было бы лучшим вариантом. Доходит до того, что иногда встречается неправильно написанное само слово English: варианты бывают разными, например, Inglish или Englesh. Поэтому, если вы не владеете свободно английским, то без крайней надобности не делайте английскую копию: сэкономленную энергию можно направить и на более полезные занятия.

Если сайт представляет собой не одну, а несколько страничек (или несколько сотен или даже тысяч), то необходимо следить за единством стиля. Единство стиля подразумевает под собой общее шрифтовое и цветовое оформление, сходную компоновку страниц, выполненную в одном стиле графику и т.д. Конечно, не обязательно все страницы должны быть одного цвета, иногда разные разделы сайта имеют различное цветовое решение. Но в таком случае цвет выполняет как бы поясняющую роль, т.е. показывает, в каком разделе находится посетитель. И уж если вы используете градиентный фон для заголовка (скажем, переходящий из красного в белый) для какого-либо раздела, то потрудитесь сделать фон такого же типа для всех остальных страниц сайта. Пусть они будут желто-белыми, сине-голубыми или даже изумрудно-салатовыми, но выполненные в таком же стиле - с плавным переходом от темного к светлому.

СОВЕТ
Самый лучший цвет фона - белый. На нем без проблем можно разместить любые иллюстрации. Кроме того, данные, полученные из различных источников всегда без особых проблем можно перенести на белый фон, и быстро привести к единому стилю.

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

Публикация в Web (загрузка по FTP)

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

Прежде всего, не забывайте загружать в интернет все связанные файлы. Очень часто начинающие авторы, отправив сам HTML-документ, забывают загрузить связанные с ним картинки. При этом всегда помните о регистре! В интернете строчные и заглавные буквы различаются, так что abc20.gif и abc20.GIF - не одно и тоже. Ну и, наконец, всегда проверяйте результаты работы. То, что прекрасно работало, находясь у вас на компьютере, может перестать работать, оказавшись в сети. В первую очередь это касается рисунков и ссылок.

Большинство HTML-редакторов, в частности, уже упоминавшиеся Composer, Front Page, HomeSite и Visual Workshop, имеют собственные средства для загрузки страниц. Если вы используете программу, располагающую такими средствами, то лучше всего их и использовать, поскольку они выполнят загрузку не только новых и измененных HTML-страниц, но и связанных с ними файлов автоматически.

FAR - файловый менеджер и FTP-клиент по совместительству

Рис. 1.7. FAR - файловый менеджер и FTP-клиент по совместительству

Если же вы предпочитаете использовать отдельный FTP-клиент, то будьте внимательны. Рассмотрим работу широко распространенного в России файлового менеджера, имеющего также функции FTP-клиента - FAR (имеется на прилагаемом CD). Его важным достоинством является то, что он является бесплатным для жителей постсоветского пространства. Кроме того, внешне он очень похож на некогда стандартный для всех компьютеров Norton Commander (рис. 1.7).

Настройки FTP в FAR

Рис. 1.8. Настройки FTP в FAR

Для использования функций FTP запустите программу, нажмите Alt+F2, чтобы открыть список дисков для правой панели. В нижней части списка дисков имеется пункт FTP. Выберите этот пункт. Правая панель примет примерно такой вид, как показано на рис. 1-06. Для того, чтобы создать новое соединение с FTP-сервером, нажмите Shift+F4. В верхней части окна параметров FTP (рис. 1.8) имеется строка, в которую надо ввести строку следующего формата:

ftp://user:password@host:port/dir

Здесь user обозначает ваш логин для доступа к FTP-серверу, password - пароль, host - адрес FTP-сервера, порт - его порт (как правило, 21), а dir - опциональный параметр, указывающий на директорию, которая должна быть открыта в начале сеанса. Например, если ваш сайт находится на ftp.newmail.ru, ваше имя пользователя - user123, а пароль - qwerty, то настройки будут такими:

ftp://user123:qwerty@ftp.newmail.ru

После того, как введены настройки, можно подключиться к удаленному серверу (при этом, разумеется, должно быть установлено соединение с интернетом). Дополнительные настройки сеанса FTP могут быть такими:

Еще одна популярная подобная программа - Total Commander. Главное окно программы, в принципе, похоже на FAR с той лишь разницей, что используется типичное для Windows, а не для DOS оформление.

В самом верху расположена панель инструментов, на которую вынесены наиболее часто применяемые функции. Самой важной для нас на текущий момент является кнопка "FTP-соединение". Нажав на нее, вы попадете в окно со списком FTP-сайтов. В нем вы можете создавать новые подключения, редактировать имеющиеся, и собственно подключаться к FTP. Для создания нового подключения нажмите "Добавить", после чего появится окно настройки соединения (рис. 1.9). Поле Заголовок указывает на название сайта, Имя сервера - адрес ftp-сервера, Учетная запись и Пароль - ваши логин (имя пользователя) и пароль для этого сайта.

Настройка FTP-соединения в Total Commander

Рис. 1.9. Настройка FTP-соединения в Total Commander

Если подключение к серверу FTP производится через прокси-сервер, то следует отметить соответствующую опцию и определить его параметры. Так же для некоторых сетей требуется указывать пассивный режим работы. В целом, программа достаточно проста в использовании, и, при желании, вы без труда сможете с ней освоиться.

А вот о чем следует сказать отдельно - так это о формате передачи файлов. Как правило, лучше использовать двоичный режим передачи файлов. Он просто необходим при загрузке и выгрузке двоичных файлов, таких, как графика, архивы и программы. Он же подходит и для HTML-файлов. Однако если вы загружаете скажем, сценарий на языке Perl (cgi), то вам необходимо установить текстовый режим, поскольку в UNIX-системах используется иные правила для переноса строк. При загрузке в текстовом режиме, файлы приводятся к нужному виду автоматически, если же вы будете закачивать файлы сценариев в двоичном режиме, то вам придется сначала обработать концы строк при помощи какой-либо специальной утилиты. Как правило, вам надо самостоятельно устанавливать тип передачи файлов, но некоторые FTP-клиенты, например, SNK VF FTP, автоматически переходят в текстовый режим при передаче cgi- и pl-файлов.

Еще один важный момент для публикации программных файлов на UNIX-серверах - это права доступа к файлу. Как правило, требуется разрешить чтение и выполнение для всех групп, и, дополнительно, права на запись - для владельца (т.н. правило 755). Для изменения прав доступа может потребоваться подключиться к серверу через консоль (Telnet или SSH), однако многие программы, являющиеся FTP-клиентами не по совместительству, могут это делать сами. Так, если в том же VF FTP щелкнуть по файлу (или каталогу) правой кнопкой мышки, и выбрать пункт "UNIX-доступ", то появится диалоговое окно, в котором вы сможете изменить права доступа (рис. 1.10). Для этого можно либо отметить необходимые переключатели, либо ввести число, определяющее права доступа в окошке внизу диалога.

Определение прав доступа в VF FTP

Рис. 1.10. Определение прав доступа в VF FTP

В остальном работа с удаленным сервером через FTP практически ничем не отличается от работы с локальными папками и файлами.

Таким образом, мы завершили знакомство со всеми основными технологиями, применяемыми в процессе создания сайтов - от применяемых для структурирования и форматирования HTML/XHTML и CSS до основ оформления и особенностей публикации. Дальнейшие части книги познакомят вас со всеми тегами, атрибутами, свойствами CSS и тонкостями их применения.

2011-05-03 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !

Избранное

SNK GSCP
SNK GSCP - новая библиотека для PHP 5!
Web Studio
Web Studio и Visual Workshop
Библиотека:
Стандарты на web-технологии
Монополия
Монополия Android
Загрузки:
скачать программы
Продукция:
программы и книги
Техподдержка / Связаться с нами
Copyright © 1999-2020 SNK. Все права защищены.
При использовании материалов с сайта ссылка на источник обязательна.
Рейтинг@Mail.ru