Самарский государственный университет Механико-математический факультет Кафедра высшей математики и информатики
Скачать 285.83 Kb.
|
Два комплекта шрифтов. При разработке Web-страницы средствами базового HTML есть два комплекта шрифтов; пропорциональный и шрифт фиксированной ширины. Проблема заключается лишь в том, что неизвестно, какой из них и какого размера будет использован при отображении. Пропорциональный шрифт – иначе "шрифт переменной ширины" для каждого символа выделяет разное количество места в зависимости от его начертания. Например, в пропорциональном шрифте заглавная "W" занимает больше места в строке по горизонтали, чем прописная "I". Такие гаринитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов. Web-браузеры для большинства текстов на Web-странице, включая основной текст, заголовки, списки, цитаты и т. д., используют пропорциональные шрифты. Как правило, большие отрывки основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на вашей странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer). Но это всего лишь общее правило. Шрифт с фиксированной шириной предоставляет одинаковое место для всех символов шрифта. Заглавная "W" занимает не больше места, чем прописная "I". Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco. В Web-браузерах шрифты фиксированной ширины используются для отображения любого текста внутри следующих HTML-тегов: , , , ,, . Поскольку многие люди не меняют настройку шрифтов, установленную по умолчанию, текст, находящийся в указанных тегах, будет выведен одним из шрифтов типа Courier. Текст в изображениях. Дизайнеры быстро поняли, что самый верный способ абсолютного контроля над шрифтами – поместить текст в изображение. Можно часто видеть заголовки, подзаголовки и объявления, выполненные в виде файлов GIF. Многие Web-страницы представлены исключительно в графике, которая содержит внутри себя весь текст страницы. Преимущества использования графики вместо HTML-текста абсолютно очевидны: – можно определять тип шрифта, размер, интерлиньяж, промежуток между буквами, цвет и выравнивание – все атрибуты, которые вызывают сложности только в HTML; – ваша страница будет одинакова при выводе во всех графических браузерах. Но у этого метода имеется ряд недостатков: – изображение загружается дольше, чем текст, т.к. графические файлы обычно на несколько порядков больше, чем HTML-тексты, имеющие то же содержание; – в неграфических браузерах содержание утрачивается. Пользователи, которые не могут (или не хотят) просматривать графику, не увидят и текста. Альтернативный текст (используется атрибут Alt) на месте графического изображения помогает, но его возможности ограничены и это не всегда надежный способ отождествления отсутствующей графической информации; – информацию, находящуюся в изображении, нельзя индексировать или организовать ее поиск. В результате исключаются из документа важные части информации. Размер шрифта. Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами. Отчасти это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями. Обычно Windows использует разрешение экрана 96 точек/дюйм, a MacOS – 72 точек/дюйм. Мониторы MultiScan допускай более высокое разрешение. Шрифт на экране дисплея Масintosh имеет точно такой же размер, как и при печати (например, 12 пт Times на экране выглядит так же, как 12 пт Times на бумаге). Для шрифтов Microsoft подобное соглашение не выполняется, и размер шрифта при выводе на экран больше, что облегчает чтение с дисплея. В результате шрифт размером 12 пт на Windows больше похож на печатный шрифт в 16 пунктов. Чтобы получить на Windows печатный размер 12 пт, вам нужно выбрать размер шрифта 9 пунктов (но тогда пользователи компьютеров Масintosh увидят текст почти неразборчивым, так как он будет отображен шрифтом размером всего 6,75 пт). 1.5. Представление графики на Web-страницах На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее – краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов. GIF. GIF – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web. Его свойства состоят в следующем: – поддерживает не более 256 цветов (меньше можно и часто нужно); – использует палитру цветов; – использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются); – поддерживает чересстрочную развертку; – является поточным форматом, т.е. показ картинки начинается во время перекачки; – позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов; – имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов; – поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах), осуществлять задержку между показами изображений и т.д. А теперь немножко разъяснений – к чему эти свойства могут привести. Как мы написали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод – если у взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже – оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов. JPEG. Вторым наиболее популярным графическим форматом в Web является JPEG – Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно. Фотографии или любые изображения с плавными градациями цветов лучше всего сохранять в JPEG-формате, потому что он предлагает более высокое качество изображений, умещающихся в файл меньшего объема. Тем не менее, JPEG не является лучшим решением для графических изображений с одноцветными областями, поскольку этот формат имеет тенденцию испещрять цвета крапинками и конечный файл, как правило, будет несколько больше, чем GIF-файл для того же изображения. PNG. Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG – Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени). Разрешение и размер файла изображений. Поскольку изображения Web существуют только на экране дисплея, будет технически правильно измерять их разрешение в пикселах на дюйм (ppi – pixels per inch). Другая единица измерения разрешения – количество точек на дюйм (dpi – dots per inch) относится к разрешению печатных изображений и зависит от разрешения печатающего устройства. Но, так как реальные размеры графики зависят от разрешения дисплея, измерение в дюймах становится для Web-окружения неприемлемым. Единственной значимой единицей измерения становится пиксел. Практично создавать изображения с разрешением 72 ppi (это лучший вариант для представления на экране), обращая внимание только на общие размеры в пикселах. В процессе создания графики на Web можно вообще не использовать дюймы. Важен размер изображения по сравнению с другими изображениями на странице и общего размера окна браузера. Например, многие пользователи по-прежнему используют 14-дюймо-вые дисплеи с разрешением 640x480 пикселов. Чтобы гарантировать заполнение графической заставкой всего пространства экрана, лучше сделать его шириной не более 600 пикселов (учитывая, что часть пикселов справа и слева будет использована для окна и для полосы прокрутки). Размер остальных кнопок и изображений на странице следует измерять в пикселах относительно банеpa, имеющего ширину 600 пикселов. Размер файла. Без сомнения, именно графика сделала Web таким, каким мы его видим сегодня, но как дизайнер вы должны знать, что многие пользователи испытывают к графике в Web чувство на грани любви и ненависти. Не стоит забывать, что графика увеличивает время, необходимое Web-странице для передачи по сети; большой объем графики означает существенное время загрузки, которое испытывает терпение читателя, особенно если он дозванивается с использованием стандартного модемного соединения. В этом отношении для Web-дизайнера существует единственное наиболее важное правило: размер файла графического изображения должен быть минимально возможным! Создание изображений, предназначенных для передачи по сети, возлагает ответственность на разработчиков серьезно относиться к проблеме времени загрузки. 1.6. Web-серверы В большинстве случаев невозможно избежать прямого контакта с сервером, даже если речь идет о простой загрузке файлов. По этой причине все дизайнеры должны обладать базовыми знаниями о серверах и их работе. По меньшей мере, это поможет более четко общаться с администратором сервера. Если есть разрешение для более широкого доступа к серверу, можно решать определенные задачи самостоятельно, без посторонней помощи. Сервер – это любое управляющее компьютером программное обеспечение, которое дает ему возможность выполнять запросы на документы или другие данные. Программы, которые запрашивают и отображают документы (такие как браузер), называются клиентами. Термины "на стороне сервера" и "на стороне клиента", используемые, например, при работе с картами-изображениями, относятся к той машине, которая руководит процессом. Функции на стороне клиента выполняются на машине пользователя, функции на стороне сервера – на удаленной машине. Web-серверы отвечают на запросы браузеров (клиентских программ), находят заданные файлы (или выполняют сценарий CGI) и возвращают документ или результаты сценария. Web-браузеры и серверы общаются по протоколу Hypertext Transfer Protocol (HTTP, протокол передачи гипертекста). Программное обеспечение серверов. Большинство серверов работают на платформе Unix. Именно поэтому в мире Web по-прежнему используется терминология системы Unix. В процессе работы понадобится выучить несколько Unix-команд. Однако процент серверов Windows NT, Windows 95 и даже MacOS постоянно увеличивается. Некоторые серверные пакеты предлагают графический интерфейс в качестве альтернативы управлению из командной строки Unix. Вот некоторые известные серверы: NCSA Server, Apache, CERN, Netscape Servers, Internet Information Server (IIS). Сегодня большинство серверов (приблизительно 70%) работают на Apache или его предшественнике NCSA. Конкретный тип сервера не влияет на большую часть того, что делает дизайнер, например, на создание графики или разработку базовых HTML-файлов. Конечно, он будет влиять на более совершенные методы создания Web-сайтов, такие как Server Side Includes (серверные включения), добавление типов MIME и Web-страницы, управляемые базами данных. Корневой каталог. Когда браузер запрашивает документ, сервер определяет местонахождение документа, начиная с корневого каталога документа. Это каталог, который был сконфигурирован для хранения всех документов, совместно используемых посредством Web. Он не обязательно появляется в URL, который указывает на документ, поэтому важно знать, какой каталог является корневым при загрузке файлов. Индексные файлы. Прямой слэш (/) в конце URL означает, что URL обращается к каталогу, а не к файлу. По умолчанию серверы отображают содержание каталога, указанного в URL. Большинство серверов, однако, сконфигурированы так, чтобы отображать особый файл вместо списка каталога, этот файл называется индексным. Индексные файлы обычно имеют имя index.html, но на некоторых серверах они могут называться welcome.html или default.html. Если сервер сконфигурирован на нахождение индексного файла и не обнаруживает его, вместо него может быть отображено содержание каталога, но это делает файлы уязвимыми для посторонних. По этой причине неплохо всегда называть одну из страниц (обычно главную) в каждом каталоге index.html (или другим условленным именем). Заголовки отклика HTTP. Как только сервер определяет месторасположение файла, он посылает содержимое этого файла обратно браузеру вместе с некоторыми заголовками отклика HTTP (response headers). Эти заголовки обеспечивают браузер информацией о прибывающем файле, включая его тип данных (также известный как "тип содержимого" или "тип MIME"). Обычно сервер определяет формат по расширению файла; например, файл с расширением .gif распознается как файл изображения. Браузер читает информацию в заголовке и определяет, что делать с файлом. Он может отобразить файл в окне либо запустить соответствующее вспомогательное или встраиваемое приложение (plug-ins). Сценарии CGI. Вместо того чтобы обращаться к файлам HTML, URL может потребовать запустить программу CGI. CGI расшифровывается как Common Gateway Interface (общий шлюзовой интерфейс). Он позволяет Web-серверу общаться с другими программами (сценариями CGI), которые работают на сервере. Сценарии CGI обычно пишут на языках Perl, С или C++. Сценарии CGI используют для выполнения разнообразных функций, таких как поиск, управление картами-изображениями на стороне сервера, игры. Однако наиболее типичное использование сценариев – обработка форм. Большинство администраторов серверов придерживаются правила хранить сценарии CGI в специальном каталоге, озаглавленном cgi-bin (сокращенно от CGI-binaries). Когда они хранятся в одном каталоге, администраторам проще управлять сервером и обеспечивать его безопасность. Если сценарий CGI запрашивается браузером, сервер исполняет функцию и возвращает браузеру динамическое содержимое. Использование SSI. SSI – Server Side Includes или, по-русски, – включения на стороне сервера. SSI – это директивы, вставляемые прямо в HTML- код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия. Например: вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа браузера) и другие не менее приятные вещи. Преимущества SSI проявляются, когда нам нужно поддерживать достаточно большой по объему сайт, имеющий определенную структуру и повторяющиеся элементы кода на всех страничках. При применении серверных включений сайт удобно рассматривать как состоящий из отдельных блоков, каждый из которых отвечает за свою часть странички. Эти блоки практически неизменны и повторяются от страницы к странице. В эти блоки можно вынести такие элементы странички как: главное меню, рекламные вставки, повторяющиеся элементы оформления страничек и т.д. Физически эти блоки представляют собой просто HTML-файлы, содержащие часть кода, нужную для выполнения их задачи. Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: *.shtml или *.shtm, наличие которого и заставляет Web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое – в зависимости от конфигурации Web-сервера, но в основном применяется именно *.shtml. Полная страничка формируется Web-сервером на лету, собирая код странички из таких вот блоков. Для того, чтобы указать серверу, какой блок нужно вставить и в каком месте странички, используется специальная форма записи в виде комментария. Например, вот такая: //g; $value =~ s/n/ /g; $FORM{$name} = $value; } open(OUTF,">>$logfile") or &dienice("Couldn't open guestbook.txt."); print OUTF "&name_$hits=$FORM{'name'}& email_$hits=$FORM{'email'}& comments_$hits=$FORM{'comments'}n"; close(OUTF); sub dienice { ($msg) = @_; print "Ошибкаn"; print $msg; exit;} ЛИСТИНГ ФАЙЛА INDEX.HTML PCBIT = 4); explorer = (navigator.appName == "Microsoft Internet Explorer"); ie4 = explorer && (parseInt(navigator.appVersion) >= 4); function shake(n) { if (n4 || ie4) { for (i = 12; i > 0; i--) { for (j = n; j > 0; j--) { self.moveBy(0,i); self.moveBy(i,0); self.moveBy(0,-i); self.moveBy(-i,0); } } } } // End –-> ЛИСТИНГ ФАЙЛА MYGUEST.HTML GuestBook |
Похожие:
 | Молдавский Государственный Университет Факультет Математики и Информатики.... За последние 9 лет (c 1993) в мире персональных компьютеров появился новый участник – персональный карманный компьютер (кпк). Большую... | | Московский Государственный Университет им. М. В. Ломоносова Механико-математический... Именно сейчас от того, насколько современным и интеллектуальным нам удастся сделать общее образование, зависит благосостояние наших... |
| Образования Российской Федерации томский государственный университет... Алгоритм построения совокупной модели пересечения трехмерных объектов, 3ds формат, dll, плагин для 3ds max | | Программа по формированию навыков безопасного поведения на дорогах... Московский Государственный Университет Приборостроения и Информатики, Факультет "Технологическая информатика", кафедра "Компьютерный... |
| Министерство образования и науки РФ новосибирский государственный... Когда появляется изображение цепи ордена Андрея Первозванного на российском гербе | | Уральский государственный педагогический университет Математический факультет «пк-7 – Готов к обеспечению охраны жизни и здоровья обучающихся в учебно-воспитательном процессе и внеурочной деятельности» |
| Красноярский государственный педагогический университет факультет информатики Задание: Разработать требования к оборудованию и оснащению кабинета информатики с заданным количеством персональных эвт в учебном... | | Математический факультет Кафедра теории функции, функционального... В эпоху развития интернет технологий остро возник вопрос о создании сайтов со специфическим содержанием, то есть содержащим особую... |
| Юзгу-2011/12 Кафедра высшей математики Рубежный тест -1 системы линейных... Электронный справочник по школьной алгебре и геометрии, а также по некоторым разделам высшей математики. Определения и иллюстрированные... | | Российской Федерации Самарский государственный архитектурно-строительный... Иас – совокупности взаимоувязанных автоматизированных систем, объединенных общей целью функционирования |
| Факультет математики и информационных технологий Кафедра информатики и вычислительной техники Познакомить учащихся с планетами Солнечной системы, сформировать представление о них и о том, отчего на Земле сменяются день, ночь,... | | Уральский государственный педагогический университет Математический факультет «ок-3 – Способен понимать значение культуры как формы человеческого существования и руководствоваться в своей деятельности современными... |
| Министерство образования и науки российской федерации томский государственный... Целью дисциплины является ознакомление студентов с базовыми понятиями следующих разделов информатики: теория информации, технические... | | Российской Федерации Самарский государственный технический университет... Проектирование технологии сборки изделий: Метод посбие, курс и дипл проектир. / Самар гос техн универс. Сост. И. К. Рыльцев, Самара,... |
| Факультет политологии кафедра политической теории утверждаю Московский государственный институт международных отношений (университет) мид россии | | Московский государственный университет им. М. В. Ломоносова факультет... Этот материал размещен в блоге Деменевой Н. Н |
