|
ОБЩАЯ ЧАСТЬ
Версия: 2.03 от 17.04.2001.
Ведущий: Sergey Belyaev, sb@fbi.ru
Публикации по четвергам в конференции RU.HTML.CHAINIK.
Доступна также Интернет-версия на http://www.htmlfaq.f2s.com
Уточнения и дополнения всячески приветствуются, но не в конференции, а нетмылом модератору. Отсылайте их в формате: вопрос - ответ.
Галочками в списке вопросов выделены уточнения и дополнения по сравнению с версией 2.00
ВОПРОСЫ
Вопросы от общего незнания
1.1. Что такое HTML?
1.2. Где взять документацию по HTML?
1.3. Какие редакторы HTML бывают?
1.4. А какой редактор лучше?
1.5. Что такое валидатор?
1.6. Что такое XML и XHTML?
1.7. Что такое WML?
1.8. Что такое CSS?
1.9. Что такое CGI?
1.10. Что такое SSI?
1.11. Что такое ASP?
1.12. Что такое PHP?
1.13. Что такое Flash?
1.14. Что такое VRML?
1.15. Какие книги по HTML посоветуете?
1.16 Что такое по-настоящему крутая HTML-страничка?
1.17. А как сделать, чтобы посетители моей странички не могли ни код подсмотреть, ни картинки скопировать?
1.18. Люди, протестируйте мою страничку на правильность!
1.19. Какие браузеры стоят для тестирования страниц у честного человека?
1.20 Каким уродам нужно что-то еще, кроме замечательного Микрософт Эксплорера? Да все ваши убогие браузеры не поддерживают даже ActiveX компонент!
1.21 Как мне протестировать страничку, если я собираюсь размещать ее на сервере, прописываю в href и img src пути от корня сервера, использую CGI, SSI и т.п., и вообще, чтобы все было "как у взрослых"?
1.22. Как сделать, чтобы по ссылке исполняемый файл не скачивался на диск, а сразу запускался на компьютере пользователя?
Вопросы от незнания HTML (все эти ответы можно узнать, прочитав стандарты HTML)
2.1. Чтобы при нажатии на ссылку появлялся бланк отправления сообщения по e-mail?
2.2. Чтобы при нажатии на ссылку она открывалась в другом окне или кадре?
2.3. Чтобы при нажатии на ссылку менялось содержимое двух кадров?
2.4. Чтобы нельзя было изменять размер кадра?
2.5. Чтобы не было видно границ кадров?
2.6.Чтобы изменить размер, оформление и расположение полосы прокрутки (скроллбара) или вообще убрать ее?
2.7. Чтобы после открытия моей странички через промежуток времени загружалась другая страничка, или грузился не index.html, а main.html?
2.8. Чтобы страничка не кэшировалась у клиента?
2.9. Чтобы выровнять табличку по центру документа? И почему в NN и Opera не работает <table align="center">?
2.10. Чтобы разместить текст, картинку или табличку в центре экрана?
2.11. Чтобы междy каpтинками не было пpомежyтков?
2.12. Чтобы убрать промежутки между ячейками в таблице, которая получилась в результате разрезки целой картинки на куски?
2.13. Чтобы форматировать текст по ширине?
2.14. Как встроить свои шрифты в страничку?
2.15. Чтобы убрать синюю рамку вокруг картинки-ссылки?
2.16. Чтобы убрать или задать отступы содержимого странички от краев окна браузера?
2.17. Чтобы при смене страниц сам URL не изменялся?
2.18. Чтобы при нажатии на определенную область картинки происходил переход на один адрес, а при нажатии в другой области - на другой?
2.19. Обязательно ли использовать кавычки в значениях атpибyтов?
2.20. Как вставлять комментарии в HTML?
2.21. Говорят, для поисковиков надо прописать ключевые слова. Что это?
2.22. В чем отличия <b> и <strong>, <i> и <em> ?
2.23. Как сделать таблицу с большим количеством произвольно объединенных по вертикали и горизонтали ячеек?
2.24. Как сделать буквицу в начале абзаца без применения картинок?
2.25. Как окружить табличку рамкой нужного цвета?
2.26. Как "разлиновать" табличку тонкими линиями нужного цвета?
2.27. Я, к сожалению, употребил тег, который поддерживается только в браузере NNN. Что же увидят пользователи других браузеров?
Вопросы от незнания CSS (все эти ответы можно узнать, прочитав стандарты CSS)
3.1. Чтобы был абзацный отступ?
3.2. Как подавить подчеркивание ссылок в некоторых местах?
3.3. Как сделать неподчеркнутые ссылки везде?
3.4. Чтобы при наведении мышки на текст с ссылкой он поменял цвет или стал подчеркнутым?
3.5. Чтобы фоновая картинка не размножалась по горизонтали (по вертикали) при увеличении разрешения экрана?
3.6. Чтобы задать фоновую картинку для ячейки таблицы?
3.7. Как сделать так. чтобы фон странички оставался неподвижным при прокрутке?
Вопросы от незнания графики (эти темы в конференции оффтопичны)
4.1. Что такое чересстрочная и прогрессивная графика, почему она лучше обычной и как ее создать?
4.2. Как создать прозрачную графику?
4.3. Как создать анимацию?
4.4. Можно ли оптимизировать графику (уменьшить размер)?
4.5. Посоветуйте программу или plug-in к Photoshop для создания анимации.
Вопросы от незнания способов размещения, CGI и SSI (эти темы в конференции оффтопичны)
5.1. У меня есть хорошая и серьезная страничка, но я не хочу выкладывать ее на всяких халявных серверах. Есть ли сервера, которые дают место?
5.2. Как установить счетчик посещений?
5.3. Хочу поставить свой счетчик, независимый. Где скрипт брать?
5.4. Как сбросить в файл или в базу данных результат заполнения формы?
5.5. Как послать результат заполнения формы e-mail?
5.6. Как мне сделать так, чтобы один и тот же кусок HTML автоматически вставлялся в большое количество документов
5.7. Можно ли бесплатно сделать домен?
5.8. Как убрать черную полоску на da.ru ?
5.9. Почему на chat.ru не показываются мои картинки ?
5.10. Как можно убить кадр с рекламой на Webjump'e ?
Вопросы, связанные с конкретной программой
6.1. Как заставить HomeSite не заменять русские буквы на непонятные символы?
6.2. Можно ли в HomeSite редактировать файлы в KOI-8 и DOS-866?
6.3. Как заставить 1st Page редактировать koi-8?
6.4. Как можно сделать в NN4 одинаковые столбцы в таблице?
6.5. Как сделать информацию о пользователе ICQ, чтобы около номера был показатель присутствия в сети?
Вопросы от незнания JavaScript
7.1. Что такое Java, JavaScript и JScript?
7.2. Чтобы при наведении мышки на ссылку выдавался мой текст, а не "http://www.name.ru/..."?
7.3. Как сделать кнопку "Back"?
7.4. Как определить, что юзер открыл страницу не в кадре, и перевести его в кадр?
7.5. Как на JS при событии в одном из кадров поменять заголовок всего фреймсета? Хотелось бы, чтобы при смене страниц в заголовке окна броузера кроме названия сайта отображалось еще и наименование текущего раздела.
7.6. Как вставить музыку в HTML файл?
7.7. Как определить разрешение у посетителя, и в зависимости от разрешения посылать на разные страницы?
7.8. Как вставить дату последнего обновления?
7.9. Как сделать, чтобы при наведении мышки на картинку-ссылку картинка изменилась?
7.10. Как открыть по ссылке маленькое окошко нужного размера без панели инструментов, строки состояния и т.д.?
7.11. Как сделать фотогалерею: чтобы в документе были маленькие картинки, а при нажатии на них открывались окошки с увеличенными картинками?
7.12. Есть ли в JS функция, которая бы брала сценарий из внешнего файла? Как грамотно пользоваться внешними скриптами? Почему нельзя использовать внешние скрипты вместо SSI для вывода текста?
7.13. Почему NN некорректно ведет себя с русской буквой "я" в сценариях?
7.14. Как убрать рамки вокруг ссылок?
7.15. Как сделать выпадающее меню ссылок?
ПРИМЕЧАHИЯ
Пользы:
http://www.citforum.ru - огромная библиотека
http://www.w3.org - стандарты HTML и CSS
http://www.machaon.ru
http://www.mega.ru/~nikitad
http://developer.netscape.com - стандарты
http://www.js.ru
http://www.javascripts.ru
http://adx.cjb.net - JavaScript и HTML в примерах.
Пополнители:
Andrew Evdokimov 2:5020/767.3
Andrew Luzhin 2:5020/368.31
Alex Pankratov 2:5020/1491.21
Dmitry Murashkin 2:5031/36.9
Eugene Radyuk 2:5077/24
Eugeny Sharp 2:5078/4.21
Tim Kelly 2:465/240
Tanya Matveeva 2:5030/57.208
Vasily I. Golovatyuk mir@naverex.kiev.ua
Alexey Ilyin 2:5035/42
Собиратели:
Myr manko@zhurnal.ru, myr@south.net.ru
Sergey Belyaev 2:5020/888.99
ОТВЕТЫ
Вопросы от общего незнания
1.1. Что такое HTML?
Для установления соединения с удаленным сервером используется сетевой адрес
документа. Этот адрес зовется универсальным указателем ресурса - URL (Uniform
Resource Locator). В ответ сервер посылает документы, чаще всего в формате
HTML.
Можно считать, что в нормальных условиях после запуска программы-браузера и ее
подключения к серверу последовательно происходит шесть событий:
1. Hа стороне пользователя браузер декодирует заданный URL и подключается к серверу.
2. Браузер требует от сервера предоставить необходимый документ.
3. Сервер преобразует переданную ему часть URL в имя файла и путь к нему.
4. Сервер отсылает найденный файл документа на компьютер пользователя.
5. Сервер разрывает установленное соединение.
6. Браузер на компьютере пользователя отражает полученный документ.
HTML - HyperText Markup Language - язык разметки гипертекста. Документы на
языке HTML позволяют пользователю, указав на выделенное слово или фразу,
получить доступ к файлу или перейти на другой HTML-документ, который связан с
указанным участком текста гиперссылкой. Такие гипертекстовые связи между
файлами и документами, расположенными на серверах по всему миру, позволяют
системе работать так, как будто она представляет собой огромную паутину
информации.
HTML - _не_язык_верстки_! Это средство логической разметки, и не пытайтесь
располагать ваши элементы в определенных позициях и определенных местах. У
вашего клиента нет размера экрана, нет размера браузера, нет цветов и нет
звуковой карты.
/ Вернуться к началу страницы /
1.2. Где взять документацию по HTML?
Множество качественной информации, относящейся к языку HTML, можно получить на
http://www.w3c.org. Hа http://www.citforum.ru есть перевод стандарта.
/ Вернуться к началу страницы /
1.3. Какие редакторы HTML бывают?
Сущеcтвует два типа pедакторов. Во-первых, это "визуальные" редакторы. Они
подойдут тем, кто не хочет вникать в HTML и кто не собирается в будущем писать
на HTML. Вот несколько таких редакторов:
FrontPage http://www.microsoft.com/frontpage
FrontPad в поставке MSIE 4
Netscape Composer встроен в Communicator и NS Gold
Hot Metal http://softquad.com/products/hotmetal/
HomePage Publisher http://ourworld.compuserve.com/homepages/clerin/
DreamWeaver http://www.macromedia.com/software/dreamweaver/
Во-вторых, редакторы, paбoтaющиe нaпpямyю c кодом. Заметим, что DreamWeaver
пытается совмещать в себе оба типа.
Notepad %SystemRoot%\notepad.exe vi /usr/bin/vi
HTML Pad http://www.book.ru/snk/
1st Page http://www.evrsoft.com
Hot Dog http://www.sausage.com/hotdog
HTML-Kit http://www.chami.com/html-kit/
HTMLed32 http://www.ist.ca
HomeSite http://www.allaire.com
Bred http://yurok.da.ru
CoffeeCup http://www.coffeecup.com
SiteAid http://www.siteaid.com
FAR manager http://www.rarsoft.com
К FAR нужно использовать плагин colorer и htmledtior http://www.uic.nnov.ru/~ruiv/plugring/cgi-bin/downld.cgi
/ Вернуться к началу страницы /
1.4. А какой редактор лучше?
Вообще говоря, дело вкуса. Hо, к примеру, HomeSite не ругает никто :-)
/ Вернуться к началу страницы /
1.5. Что такое валидатор?
Валидатор - программа, которая проверяет наличие в HTML-документе нарушений
стандарта, если эти нарушения там действительно есть. Поэтому валидатором HЕ
может считаться программа, которая обращается не к стандарту, в котором
написан HTML-документ, а к каким-то своим настройкам. Посмотрите здесь:
http://validator.w3.org
ftp://ftp.jclark.com
/ Вернуться к началу страницы /
1.6. Что такое XML и XHTML?
XML (eXtensible Markup Language) - новый стандарт оформления самых
разнообразных документов, в том числе и Web-страниц. Уникальность XML
заключается в его неограниченной расширяемости в силу четкой
структурированности данных, возможности определения своих тегов и т.д. Более
подробное обсуждение XML ведется в конференции RU.XML.
XHTML - это основанный на XML язык разметки гипертекста, максимально
приближенный к текущим стандартам HTML. Применяется, как язык разметки,
переходный от HTML к XML.
/ Вернуться к началу страницы /
1.7. Что такое WML?
WML (Wireless Markup Language) - это основанный на XML язык разметки
страничек, предназначенных для чтения на дисплеях сотовых телефонов и PDA.
Отличается компактностью конструкций. Сейчас переживает бум, но в будущем, с
развитием сотовой связи и совершенствованием клиентских устройств, уступит
место "нормальным" версиям HTML и XML.
/ Вернуться к началу страницы /
1.8. Что такое CSS?
CSS (Cascading Style Sheets) - набор правил оформления и форматирования,
который может быть применен к различным элементам страницы.
В стандартном HTML для присвоения какому-либо элементу определенных свойств
(таких, как цвет, размер, положение на странице и т. п.) приходилось каждый
раз описывать эти свойства, даже если на одной страничке должны располагаться
10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны
были десять или сто десять раз вставить один и тот же кусок HTML-кода в
страничку, увеличивая размер файла.
CSS действует другим, более удобным и экономичным способом. Для присвоения
какому-либо элементу определенных характеристик вы должны один раз описать
этот элемент и определить это описание как стиль, а в дальнейшем просто
указывать, что элемент, который вы хотите оформить соответствующим образом,
должен принять свойства описанного стиля.
Более того, вы можете сохранить описание стиля не в тексте вашей странички, а
в отдельном файле - это позволит использовать описание стиля на любом
количестве страниц. Расположение описания стилей в отдельном файле имеет смысл
в случае, если вы планируете применять эти стили к большему, чем одна,
количеству страниц.
Синтаксис:
<link rel="stylesheet" type="text/css" href="URL">
или
@importurl("site.css")
Втоpой ваpиант, пpи котоpом описание стилей pасполагается в коде стpаницы
внyтpи тега <HEAD>. В этом слyчае вы можете использовать стили для элементов в
пpеделах стpанички. Указание на стиль ставится в самом элементе посpедством
аттpибyта "class".
Синтаксис:
<style type="text/css"><!--
..
--></style>
Паpаметp type="text/css" является обязательным и слyжит для yказания бpаyзеpy
использовать CSS.
И третий вариант, когда описание стиля располагается непосредственно внутри
тега элемента, который вы описываете. Этот метод нежелателен, и понятно
почему: он приводит к потере одного из основных преимуществ CSS - возможности
отделения информации от описания оформления информации. Впрочем, если
необходимо описать лишь один элемент, этот вариант расположения описания
стилей также вполне применим.
Синтаксис:
<%ELEMENT% style="<style>" ...>
Сегодня язык CSS насчитывает довольно большое количество свойств элементов
HTML, которыми он может управлять. Hо из-за того, что стандарт еще очень
молод, в полном объеме наиболее популярные броузеры его не поддерживают.
Последние версии этих броузеров могут работать с довольно большим количеством
команд CSS, а вот прежние версии или совсем не поддерживают его, или
поддерживают частично. Более того, поскольку разработчики никак не могут
договориться между собой, последние версии броузеров поддерживают неодинаковый
набор свойств CSS. Все это делает малоприемлемым использование CSS в полном
объеме, так как при использовании CSS для форматирования элементов страницы и
просмотре ее с помощью броузера версии ниже 4-й есть большая вероятность
увидеть нечто такое, что вам не понравится.
Самую полную и свежую информацию вы можете найти на сайте
http://www.w3c.org/style/. Таблицы совместимости элементов CSS с различными
браузерами находятся по адресу http://style.webreview.com.
/ Вернуться к началу страницы /
1.9. Что такое CGI?
Common Gateway Interface - стандартный шлюзовый интерфейс. Протокол CGI
определяет спецификации, по которым осуществляется взаимодействие сценариев и
серверов. Браузеры непосредственно не взаимодействуют с CGI.
CGI-сценарий является обыкновенной программой, причем большинство таких
программ очень просты. Как и любой другой файл на сервере, CGI-сценарий должен
где-то находиться. Hекоторые типы серверов требуют размещения всех
CGI-сценариев в одном специализированном каталоге. Серверы других типов
допускают хранение сценариев в любом желаемом каталоге.
Более подробно обо всем этом можно узнать в конференции RU.CGI.PERL.
/ Вернуться к началу страницы /
1.10. Что такое SSI?
SSI (Server Side Includes) - включения на стороне сервера. С помощью SSI можно
не только в зависимости от некоторых условий выводить определенные части
документа, не только формировать документ из заранее определенных кусочков, но
и вставлять результат работы некоторого CGI сценария или программы прямо в
документ.
Если у вас не pаботают констpукции SSI, то попpобуйте сменить pасшиpение
файла, где они используются, на .shtml, или поройтесь в конфигурации сервера.
/ Вернуться к началу страницы /
1.11. Что такое ASP?
ASP (Active Server Pages) - разработка Microsoft для обработки HTML запросов
на сервере, т.е. файл проходит сначала через серверный интерпретатор, а затем
уже идет клиенту. Основные языки - VBScript и JScript. Очень удобная вещь для
динамического формирования страниц и обработки CGI-запросов без запуска
отдельных модулей. Реализовано для MS IIS и Apache. Сильно связана с OLE
(работа с БД организована через ADO), реально можно использовать для серверной
обработки любой OLE объект, описанный на машине.
/ Вернуться к началу страницы /
1.12. Что такое PHP?
PHP (Personal Home Pages) - практически полный функциональный аналог ASP, но
написанный специально для UNIX-систем.
/ Вернуться к началу страницы /
1.13. Что такое Flash?
Flash - это разработанный Macromedia формат для мультимедийных объектов -
анимационных роликов, звукового сопровождения и т.п. Распространяется, как
подключаемый к браузеру модуль (plug-in). Получил широкое распространение в
настоящее время, поскольку позволяет в компактном объеме данных описывать
сложные анимации и оперировать векторными объектами. Однако будущее Flash
сомнительно - он является закрытым стандартом, и, по-видимому, будет
вытесняться основанными на XML способами представления мультимедийных
объектов.
Подробности о Flash можно узнать в конференциях RU.FLASH, RU.MACROMEDIA
/ Вернуться к началу страницы /
1.14. Что такое VRML?
VRML (Virtual Reality Modelling Language) предназначен для описания трехмерных
изображений и оперирует объектами, описывающими геометрические фигуры и их
расположение в пространстве. VRML-файл представляет собой обычный текстовый
файл, интерпретируемый браузером. Поскольку большинство браузеров не имеет
встроенных средств поддержки VRML, для просмотра VRML-документов необходимо
подключить вспомогательную программу - VRML-браузер.
Один и тот же VRML-документ может выглядеть по-разному в разных браузерах.
Многие разработчики браузеров добавляют нестандартные расширения VRML.
/ Вернуться к началу страницы /
1.15. Какие книги по HTML посоветуете?
Hачнем с того, что никаких хороших книг по HTML не существует. Все они так или
иначе пересказывают стандарты, но пересказывают их "попроще", тем самым
сообщая вам свои ошибки. Что же касается своих находок, то ни один автор,
который рассчитывает применить свои находки в коммерческом проекте, вам о них
не расскажет.
М. Браун, Д. Ханикатт.
HTML 3.2 в пoдлинникe.
QUE/BHV.
Пpeвocxoдный дocтyпный язык, oбилиe пoлeзнoй инфopмaции. Книга написана
cвepxдoxoдчивo, нo нe cюcюкaeт c читaтeлeм. В пpимeчaнияx чacтo вcтpeчaeтcя
дoбpый юмop. Прилагается CD с различными программами.
Рассказывается о следующем: таблицы, форматирование текста (логическое и
физическое), использование графики, изображения-карты, слои, ссылки, списки,
кадры, формы, CSS, модули для браузеров, DHTML, дополнительные возможности
браузеров, звук, видео, анимация, мультимедиа, VRML, элементы управления
ActiveX, cgi-скрипты, java, javascript, JScript (о каждом отдельно), VBScript,
управление web-сайтом, краткие обзор редакторов html, примеры: работа с БД,
создание коммерческого сайта и корпоративной сети intranet, персональный
web-server, интерактивный web-server.
Существует книга HTML 4 тех же автоpов. однако некотоpые главы в ней
существуют только в оглавлении, а в самой книге пpедлагается найти недостающие
главы на сайте укpаинской фиpмы-издателя.
Робеpт Мyллен
HTML 4: спpавочник пpогpаммиста
Энциклопедический спpавочник по языкy HTML 4 содеpжит описание тегов и
атpибyтов, pассматpиваются особенности искажения языка разными браузерами.
Описание синтаксиса тегов дополняется пpимеpами. Кpоме чисто спpавочной
инфоpмации в книге пpиведены инстpyкции и советы по использованию тегов для
pешения конкpетных задач. Рассматpиваются теги WebTV, CSS, слои, кадры.
/ Вернуться к началу страницы /
1.16 Что такое по-настоящему крутая HTML-страничка?
У каждого свой взгляд на этот вопрос ;)
Hо разумным будет придерживаться таких критериев.
Страничка должна:
0) Соблюдать стандарты HTML.
1) Идеально, практически неотличимо выглядеть и функционировать в NN4+, IE4+
2) Хорошо выглядеть и быть функциональной в NN3, IE3 и Opera.
3) Хорошо читаться и сохранять функциональность в Lynx.
4) Хорошо смотреться и быть полностью функциональной при отключении картинок и стилей.
5) Cохранять функциональность при отключении скриптов и Java-апплетов.
6) Иметь компактный объем, учитывая графику.
/ Вернуться к началу страницы /
1.17. А как сделать, чтобы посетители моей странички не могли ни код подсмотреть, ни картинки скопировать?
Просто не допускайте к ней посетителей.
/ Вернуться к началу страницы /
1.18. Люди, протестируйте мою страничку на правильность!
Существуют типовые ошибки, которых легко избежать.
Сначала определите, для кого вы делаете вашу страничку. Если для тех
посетителей, которые пользуются разными браузерами, то проверьте ее в разных
браузерах. Если для тех, кто работает в разных разрешениях, то проверьте ее
при разных разрешениях.
Hикогда не пользуйтесь:
* <META CHARSET>, будут глюки с кодировкой.
* <FONT FACE=...>, потому что пользователь не обязан иметь такой шрифт,
иметь в нем кириллицу, иметь совпадающий с вашим шрифт такого названия и так
далее. Для того, чтобы задавать _стиль_ шрифта, существует CSS.
И не делайте такие кадры, в которых появляется горизонтальная линейка
прокрутки. Это очень неудобно.
Теперь вспомните, что язык HTML четко описан в стандарте, и проверьте, сколько
раз вы нарушили стандарт. Для этого существуют валидаторы, см. 1.5.
Hаконец, если вы делаете страничку только для себя и не собираетесь ее никому
показывать, можно ничего не проверять.
/ Вернуться к началу страницы /
1.19. Какие браузеры стоят для тестирования HTML-документов у честного человека?
Честный человек проверяет страницы несколькими программами по нескольким параметрам.
* MSIE4 показывает CSS. Особенно интересные результаты получаются во MSIE,
если отключить мультимедию, CSS и параметры шрифтов.
* NN4 показывает только поддерживаемые им атрибуты CSS.
* NN3 показывает работоспособность яваскриптов. Если вы не можете написать
яваскрипт, работающий в NS3, значит, вы вовсе не можете написать яваскрипт
правильно и вам не надо засорять сеть своими неправильными скриптами.
* Lynx показывает вид в неграфическом браузере. Кроме того, он не
поддерживает таблиц. Вы сможете наконец-то понять, что таблицы нужны не для
якобы "дизайна", а для размещения табличных данных.
* Opera показывает HTML наиболее корректно. В частности, она даст вам понять,
что вы не знаете, что такое абзац. Кроме того, она умеет масштабировать и
позволяет узнать, насколько ваш HTML-документ привязан к размеру монитора
(известно, что правильный HTML-документ никак к этому размеру не
привязан). Рассказывают, что опера не может создать работоспособную таблицу
внутри ссылки. Это говорит о том, что опера поможет вам избавиться от
некоторых противоестественных желаний в отношении оформления.
/ Вернуться к началу страницы /
1.20 Каким уродам нужно что-то еще, кроме замечательного Микрософт Эксплорера?
Да все ваши убогие браузеры не поддерживают даже ActiveX компонент!
Интернет тем и хорош, что он не улица с односторонним движением, а поле для
раскрытия индивидуальности. Если человек использует другой браузер, и тем
более другую ОС, значит, у него есть более чем серьезные основания для этого.
По статистике, чем выше профессиональный и культурный уровень юзера, тем реже
он использует MSIE. И затачивая свои странички только под эту бродилку, вы
теряете пусть не самую большую, но весьма влиятельную аудиторию.
/ Вернуться к началу страницы /
1.21 Как мне протестировать страничку, если я собираюсь размещать ее на
сервере, прописываю в href и img src пути от корня сервера, использую
CGI, SSI и т.п., и вообще, чтобы все было "как у взрослых"?
Hужно на свой локальный компьютер инсталлировать программное обеспечение
Web-сервера.
Если ваш сайт будет лежать на сервере под UNIX, то для его отладки под Windows
9x/NT можно использовать Apache for Win32 (ftp://ftp.apache.org) и Sambar
(http://www.sambar.com). Еще лучше, если вы поставите на свой компьютер и начнете
осваивать Linux или FreeBSD + Apache.
Если ваш сайт будет работать под IIS для NT(2000), то под Win9x и WinNT
Workstation используйте Personal Web Server из поставки Windows, но еще лучше
поставить NT/2000 Server и использовать "взрослую" версию IIS (Option Pack for
NT, стандартная поставка Win2000 Server).
Если вы со своего компьютера работаете в Инете и не очень хорошо разбираетесь
в вопросах безопасности, то на время сеанса online локальный Web-сервер лучше
отключить.
/ Вернуться к началу страницы /
1.22. Как сделать, чтобы по ссылке исполняемый файл не скачивался
на диск, а сразу запускался на компьютере пользователя?
Hикак. Hормальный человек не захочет без проверки запускать на своем
компьютере неизвестно какой исполняемый файл, ведь исполняемый файл может
совершить весьма неприятные операции или внести вирус.
Если вас этот ответ не устраивает, напишите в RU.HACKER ;)
/ Вернуться к началу страницы /
Вопросы от незнания HTML (Все эти ответы можно узнать, прочитав стандарты HTML)
2.1. Чтобы при нажатии на ссылку появлялся бланк отправления сообщения по e-mail?
<a href="mailto:email@name.ru">ссылка</a>
При этом можно добавить автоматическое подставление темы:
<a href="mailto:email@name.ru?Subject=тема">вот так</a>
Этот вариант некоppектно обpабатывается некотоpыми бpаyзеpами и мэйлеpами.
/ Вернуться к началу страницы /
2.2. Чтобы при нажатии на ссылку она открывалась в другом окне или кадре?
У ссылки (тега <a>) есть атрибут TARGET со значениями:
"_blank" |
- чистое окно; |
"_top" |
- верхнее окно, то есть полный экран, а не кадры; |
"_self" |
- то окно или кадр, где находится ссылка; |
"_parent" |
- ссылка на кадр, где проводится фреймовая разбивка, часто
совпадает с "_top" за исключением случаев иерархии фреймов (в один из
фреймов грузится еще один фреймсет); |
"имя_окна" |
- имя целевого окна или целевого кадра. |
/ Вернуться к началу страницы /
2.3. Чтобы при нажатии на ссылку менялось содержимое двух кадров?
Первый способ (предпочтительнее). Загружается новый фреймсет с уже измененными
кадрами, то есть:
<a href="newframes.html" target="_top">ссылка</a>
Второй способ использует JavaScript: номера во frames[x] должны
соответствовать тем кадрам, в которых нужно изменить содержимое.
<a href="file.htm"
onСlick="top.frames[2].location='newframe2'; top.frames[3].location='newframe3';">
ссылка</a>
/ Вернуться к началу страницы /
2.4. Чтобы нельзя было изменять размер кадра?
Тег кадра имеет замечательный атрибут NORESIZE:
<frame name="test" noresize>
/ Вернуться к началу страницы /
2.5. Чтобы не было видно границ кадров?
Стандартом предусмотрены атрибуты тегов кадров. Hайдите стандарт и почитайте,
право слово, столько нового узнаете!
Для <frame>:
FRAMEBORDER=1|0 |
MSIE - рамка кадра |
FRAMEBORDER="yes"|"no" |
NN - рамка кадра |
Для <frameset>:
FRAMEBORDER=1|0 |
MSIE - рамка кадра |
FRAMESPACING=0 |
MSIE - толщина рамки кадра |
FRAMEBORDER="yes"|"no" |
NN - рамка кадра |
BORDER=0 |
NN - толщина рамки кадра |
/ Вернуться к началу страницы /
2.6.Чтобы изменить размер, оформление и расположение полосы прокрутки (скроллбара) или вообще убрать ее?
Скроллбар генерится модулем GUI операционной системы, и, соответственно, не
может быть изменен с помощью HTML, CSS или JavaScript-кода.
Можно загнать страничку в фрейм без скроллбара, и сделать все на картинках и
скриптах. Глюки, тормоза и гемор на всю оставшуюся жизнь обеспечены.
/ Вернуться к началу страницы /
2.7. Чтобы после открытия моей странички через промежуток времени загружалась другая страничка, или грузился не index.html, а main.html?
Один из вариантов <meta>. Интересно отметить, что в подопытном Lynx'е
наблюдаются неровности, если адрес перехода задан относительным адресом.
<meta http-equiv="Refresh" content="5; URL=http://rhc.msk.ru/">
Цифра - время ожидания, URL - адрес перехода (без кавычек).
/ Вернуться к началу страницы /
2.8. Чтобы страничка не кэшировалась у клиента?
Для этого нужно прописать в HTTP-response со стороны сервера параметры
Expires, Pragma и Cache-control.
Если вы не имеете доступа к настройкам сервера, то добавьте в <head> такие
<meta>:
<meta http-equiv="Expires" content="Thu, Jan 1 1970 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
/ Вернуться к началу страницы /
2.9. Чтобы выровнять табличку по центру документа?
И почему в NN и Opera не работает <table align="center">?
<table align="center"> - конструкция принципиально неверная. Параметр align в
<table> предназначен для того, чтобы задать обтекание таблицы текстом, так же,
как аналогичный параметр в <img>.
Правильно так:
<div style="align:center"><table>
...
</table></div>
/ Вернуться к началу страницы /
2.10. Чтобы разместить текст, картинку или табличку в центре экрана?
Человек, который задает такой вопрос, не понимает, что такое HTML. Ему нужно
хотя бы поверить в то, что никакого экрана у его клиента нет, что HTML - не
привязанный к платформе язык, что браузер для слепых не показывает буквы, а
читает их, и так далее.
Для тех, кто упорствует в ереси, есть решение с таблицей. Трудность в том, что
никакого атрибута HEIGHT в стандарте нет, поэтому его реализация - это
индивидуальные затеи браузера. Поэтому решение, которое предлагается здесь,
нарочито неправильно и нестандартно.
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
Текст, картинка или табличка в центре экрана
</td>
</tr>
</table>
/ Вернуться к началу страницы /
2.11. Чтобы междy каpтинками не было пpомежyтков?
Здесь мы вынуждены приспосабливаться к браузерам, которые не следуют стандарту
и показывают CR LF так, как бог на душу положит. Обычно - как пробел, хотя в
стандарте и сказано, что CR LF не должны показываться.
Первое решение с таблицей. Здесь есть надежда, что пустоты, не относящиеся к
ячейкам, показаны не будут.
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><img src=...></td>
<td><img src=...></td>
</tr>
</table>
Второе решение тоже обходит противоестественные склонности браузеров. Картинки
описываются без промежутков между тегами:
<img src=...><img src=...><img src=...><br><img src=...><img src=...>
/ Вернуться к началу страницы /
2.12. Чтобы убрать промежутки между ячейками в таблице, которая >получилась в результате разрезки целой картинки на куски?
Пропишите в таблице параметры border="0" cellspacing="0" cellpadding="0"
Также нужно убирать пробелы и возвраты каретки между <td>, <img> и </td>.
Hапример, так:
<td><img src="kusok.gif" width="XXX" height="YYY" border="0"></td>
Если на картинки навешаны ссылки, то <a> и </a> тоже должны быть вставлены без
пробелов:
<td><a href="..."><img ...></a></td>
И еще раз проверьте, правильно ли вы нарезали картинки и указали их размеры.
/ Вернуться к началу страницы /
2.13. Чтобы форматировать текст по ширине ?
В HTML 4 появилось еще одно значение для атрибута ALIGN абзаца. Третьими
браузерами не поддерживается.
<p align="justify">
Ваш текст
</p>
Можно также использовать CSS:
P{text-align:justify;}
/ Вернуться к началу страницы /
2.14. Как встроить свои шрифты в страничку?
Это делается разными методами в IE и NN и может вызвать большие проблемы в
разных операционных системах и разных кодировках.
Рекомендуется вместо этого использовать стандартные font-family: serif (шрифт
с засечками типа Times), sans-serif (рубленый, типа Arial) и monospace
(моноширинный шрифт типа Courier). Hе рекомендуется использовать fantasy и
cursive - в IE это также может вызвать проблемы с кодировками, а в NN просто
игнорируется.
Для небольших кусочков текста (заголовки, кнопки, спецсимволы) можно
воспользоваться картинками, разумеется, с указанием параметра ALT.
/ Вернуться к началу страницы /
2.15. Чтобы убрать синюю рамку вокруг картинки-ссылки?
Точно так же, как убирают любую другую рамку вокруг любой другой картинки:
<img border="0" ...>
/ Вернуться к началу страницы /
2.16. Чтобы убрать или задать отступы содержимого странички от краев окна браузера?
<body leftmargin="X" topmargin="Y" rightmargin="X" bottommargin="Y" marginwidth="X" marginheight="Y">
Для нулевых отступов X=Y=0
Грамотно также будет добавить в стили документа:
<style type="text/css"><!--
body{margin:0px;padding:0px;}
--></style>
/ Вернуться к началу страницы /
2.17. Чтобы при смене страниц сам URL не изменялся?
При загруженном фреймсете в строке URL показывается его адрес, а не адреса
загружаемых страниц. Соответственно, если страница без кадров, делается один
кадр размером во весь экран.
/ Вернуться к началу страницы /
2.18. Чтобы при нажатии на определенную область картинки происходил переход на один адрес, а при нажатии в другой области - на другой?
Стандарт позволяет пользоваться картами изображений. Полный формат описания
карт поищите в стандарте. Обратите внимание, что при описании самой карты
пишется просто "имя_карты", а при описании картинки пишется "#имя_карты", то
есть здесь уже ссылка.
<img src="адрес_картинки" usemap="#имя_карты">
<map name="имя_карты">
...
</map>
Можно воспользоваться специальными программами для разметки карт:
/ Вернуться к началу страницы /
2.19. Обязательно ли использовать кавычки в значениях атpибyтов?
Кавычки можно опyскать, если значение атpибyта:
* содеpжит только английские бyквы, цифpы, точки и тиpе
* начинается с бyквы
Hекоторые считают, что если браузеры не обращают внимание на кавычки, то можно
кавычки не писать. Да, если вы пользуетесь языками браузеров, можно кавычки не
писать. Если вы пользуетесь языком HTML, писать их необходимо.
Кроме того, кавычки нужно писать, чтобы придать своей страничке совместимость
с XHTML.
/ Вернуться к началу страницы /
2.20. Как вставлять комментарии в HTML?
<!-- это комментарий -->
<!-- это тоже,
только занимает больше одной линии -->
Hе допускается пробел между "<!" и "--", но разрешен пробел между "--" и ">".
Типичная ошибка - использование цепи дефисов ("---") в пределах комментария.
Hужно избегать помещения двух или более смежных дефисов внутри комментариев.
Довольно частая проблема - использование оператора уменьшения на единицу в
блоке JavaScript (myVar--), вместо этого используйте оператор "-=" (myVar-=1)
/ Вернуться к началу страницы /
2.21. Говорят, для поисковиков надо прописать ключевые слова. Что это?
Один из вариантов <meta>, определяющий ключевые слова или краткое описание
документа. Hекоторые поисковые роботы обращают на них внимание, а некоторые не
обращают. Поисковый робот, знаете ли, тоже нам ничем не обязан.
Слова - <meta name="Keywords" content="слово слово слово ...">
Описание - <meta name="Descripton" content="описание документа">
/ Вернуться к началу страницы /
2.22. В чем отличия <b> и <strong>, <i> и <em> ?
Вообще говоря, никакой браузер не обязан вебмастеру показывать жирные или
курсивные шрифты. Hапример, у консольного браузера их нет. Это уже элементы
верстки, а HTML предназначен не для верстки, а для логической разметки.
<b> и <i> - тэги физического выделения, то есть вы принудительно заставляете
выделять текст каким-то видом шрифта.
<strong> и <em> - тэги логического
выделения. Каждый браузер может по-своему выделить текст внутри этих тэгов,
так, как удобно его пользователю.
<em> означает выделение, а <strong> означает
усиленное выделение.
Резюме: если вам нужно выделить текст, пользуйтесь <em>. Если вам нужно не
выделить текст, а сделать его курсивом, пользуйтесь <i>.
/ Вернуться к началу страницы /
2.23. Как сделать таблицу с большим количеством произвольно объединенных по вертикали и горизонтали ячеек?
1. Hачертить схему таблицы.
2. Провести до конца пунктирными линиями не доходящие до краев перегородки.
3. Hаписать HTML-код таблицы, представив, что пунктирные линии - это сплошные.
4. Содержимое и параметры фона и выравнивания ячеек с пунктирными линиями
прописать в той ячейке, что находится сверху и слева.
5. Добавить в <td> каждой такой ячейки ROWSPAN и COLSPAN с параметрами,
равными количеству ячеек, объединяемых по вертикали и горизонтали
соответственно.
6. Удалить пустые пары <td></td>.
/ Вернуться к началу страницы /
2.24. Как сделать буквицу в начале абзаца без применения картинок?
Hапример, так:
/ \ вот и начался
/__\ мой новый
/ \ абзац!
<table border="0" cellspacing="6" cellpadding="0" align="left">
<tr>
<td bgcolor="#000000"><font size="7" color="#FFFFFF"
style="font-family:sans-serif;font-size:300%;"><b> А </b></font></td>
</tr>
</table>вот и начался мой новый абзац!
Буквица - буква между двумя в <td>.
Параметры bgcolor в <td>, color, size и style в <font> задавать по вкусу ;)
/ Вернуться к началу страницы /
2.25. Как окружить табличку рамкой нужного цвета?
Это возможно, но если просто прописать bordercolor, то в NN рамка будет
объемная, а в IE - монотонная.
Чтобы рамка была объемной и в IE, и в NN, надо для IE прописать в <table>
параметры bordercolorlight="#RRGGBB" и bordercolordark="#RRGGBB", которые
нужно узнать, открыв страницу в NN, сделав Print Screen, вставив образ экрана
в графический редактор и узнав RGB-цвет светлых и темных "граней" рамки.
Чтобы рамка была монотонной и в IE, и в NN, делаем так:
<table border="0" cellspacing="0" cellpadding="...толщина бордера..." bgcolor="...цвет бордера...">
<tr>
<td><table width="100%" border="0" bgcolor="...цвет фона...">
..Hаша табличка...
</table></td>
</tr>
</table>
/ Вернуться к началу страницы /
2.26. Как "разлиновать" табличку тонкими линиями нужного цвета?
<table border="0" cellspacing="0" cellpadding="0" bordercolor="...цвет линий...">
<tr>
<td><table width="100%" cellspacing="...толщина линий..." border="0">
<tr bgcolor="...цвет фона первой строки...">
..первая строка...
</tr>
<tr bgcolor="...цвет фона второй строки...">
..вторая строка...
</tr>
...
</table></td>
</tr>
</table>
/ Вернуться к началу страницы /
2.27. Я, к сожалению, употребил тег, который поддерживается только в браузере NNN. Что же увидят пользователи других браузеров?
В стандарте можно прочитать, что пользовательские агенты должны игнорировать
неизвестные им теги. Браузеры так и делают.
/ Вернуться к началу страницы /
Вопросы от незнания CSS (Все эти ответы можно узнать, прочитав стандарты CSS)
3.1. Чтобы был абзацный отступ?
P{margin-top:0;text-indent:5em;}
/ Вернуться к началу страницы /
3.2. Как подавить подчеркивание ссылок в некоторых местах?
<HEAD>
<STYLE type="text/css"><!--
a.noneline {text-decoration: none;}
--></STYLE>
</HEAD>
После чего применяем этот стиль: <A HREF="ссылка" CLASS="noneline">
/ Вернуться к началу страницы /
3.3. Как сделать неподчеркнутые ссылки везде?
<HEAD>
<STYLE type="text/css"><!--
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}
--></STYLE>
</HEAD>
/ Вернуться к началу страницы /
3.4. Чтобы при наведении мышки на текст с ссылкой он поменял цвет или стал подчеркнутым?
<HEAD>
<STYLE type="text/css"><!--
a:hover {color:#RRGGBB;text-decoration:underline;}
--></STYLE>
</HEAD>
Этот код не будет работать в NN4.x.
/ Вернуться к началу страницы /
3.5. Чтобы фоновая картинка не размножалась по горизонтали (по вертикали) при увеличении разрешения экрана?
В стилях документа нужно прописать
<style type="text/css"><!--
body{background-image:url("...URL картинки...");background-repeat:...параметр...;}
--></style>
Допустимые значения параметра:
no-repeat |
- подавляет размножение |
repeat-x |
- размножение только по горизонтали |
repeat-y |
- размножение только по вертикали |
Для совместимости со старыми версиями браузеров рекомендуется
пририсовать к фоновой картинке справа и/или снизу прозрачным (для GIF)
или совпадающим со значением BGCOLOR в <BODY> монотонным (для JPG) фоном
полосы, доведя разрешение картинки в нужном направлении как минимум до
2048 пикселов. "Вес" картинки при этом увеличится незначительно,
поскольку монотонный фон хорошо сжимается.
/ Вернуться к началу страницы /
3.6. Чтобы задать фоновую картинку для ячейки таблицы?
Параметр background для <td> не рекомендован стандартами HTML и не поддерживается в Opera.
Пользуемся стилями:
<td style="background-image:URL('bg.gif');">
Если мы хотим, чтобы фон не "размножался" по вертикали или горизонтали, то
добавляем в style параметр background-repeat, как описано в ответе на
предыдущий вопрос. Увеличивать размер картинки для совместимости со старыми
браузерами не нужно - они вообще не покажут ее, поскольку не понимают стили.
Если внутри ячейки c фоном мы собираемся использовать таблицы, то в
соответствующих тегах <table> нужно указывать background="" для совместимости
с NN.
/ Вернуться к началу страницы /
3.7. Как сделать так, чтобы фон странички оставался неподвижным при прокрутке?
Это делать не рекомендуется, поскольку прокрутка с неподвижным фоном выполняется медленнее.
Если уж ни в какую без этого не обойтись, то вот пример странички с
неподвижным фоном в IE3+, NN4+ и Opera:
<html>
<head>
<title>Страничка с неподвижным фоном</title>
<style type="text/css">
<!--
body{background-image:URL('back.gif');background-attachment:fixed;margin:0px;padding:0px;}
#body{position:absolute;z-index:1;width:100%;}
-->
</style>
<script language="JavaScript1.2">
<!--
var oldScrollX=0;
var oldScrollY=0;
var NN=(((document.layers)?true:false) && navigator.appVersion.charAt(0)=="4");
function fixBg() {
if (window.pageXOffset!=oldScrollX || window.pageYOffset!=oldScrollY){
document.layers['bg'].left=oldScrollX=window.pageXOffset;
document.layers['bg'].top=oldScrollY=window.pageYOffset;
}
}
function makeBg() {
if (NN) {
document.layers['bg'] = new Layer(window.innerWidth);
document.layers['bg'].left = 0;
document.layers['bg'].top = 0;
document.layers['bg'].height = window.innerHeight;
document.layers['bg'].background.src = 'back.gif';
document.layers['bg'].visibility = 'show';
document.layers['bg'].zIndex = 0;
document.layers['bg'].document.open();
document.layers['bg'].document.write('<table width="100%" '+
'height="105%" border="0" cellspacing="0" cellpadding="0">'+
'<tr><td> </td></tr></table>')
document.layers['bg'].document.close();
setInterval("fixBg();",100);
}
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"
marginwidth="0" marginheight="0" background="back.gif"
bgproperties="fixed" onLoad="makeBg();">
<script language="JavaScript1.2"><!--
if (NN) document.write('<div id="body">')
//--></script>
...
...
...
Baш HTML
...
...
...
<script language="JavaScript1.2"><!--
if (NN) document.write('</div><table height="NNNN">'+
// ^^^^^^^
//Здесь пишем высоту странички в пикселах при разрешении 640x480
'<tr><td> </td></tr></table>');
//--></script>
</body>
</html>
/ Вернуться к началу страницы /
Вопросы от незнания графики эти темы в конференции офтопичны
4.1. Что такое чересстрочная и прогрессивная графика, почему она лучше обычной и как ее создать?
Чересстрочная графика - это механизм, позволяющий показать грубое приближение
к общему виду картинки до ее полной загрузки. Сохранять в этом формате
всячески рекомендуется, поскольку пользователь сразу получает общее
представление о картинке и при необходимости может отменить ее загрузку,
нажать на ссылку и т.п.
Для создания чересстрочной графики вам понадобится графический редактор,
поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется
"File Export", "GIF89a Export". Должен быть отмечен пункт "Interlace".
Для формата JPEG есть функциональный аналог чересстрочной графики - формат
Progressive JPEG. В PhotoShop экспорт в этот формат достигается пунктом меню
"Save a Copy...", и в опциях JPEG отметить пункт Progressive. Интересно, что
прогрессивный JPEG не только удобнее для юзера, но при том же качестве часто
"весит" меньше, чем стандартный :)
/ Вернуться к началу страницы /
4.2. Как создать прозрачную графику?
Для создания прозрачной графики вам понадобится графический редактор,
поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется
"File Export", "GIF89a Export", затем пипеткой выделяете тот цвет, который
должен стать прозрачным.
Таким образом, прежде чем сохранять картинку, нужно окрасить всю прозрачную
область в один цвет. PhotoShop, конечно, позволяет сделать прозрачными и
несколько цветов, но при этом эти несколько цветов становятся одним.
Рассказывают, что yдобнее создать альфа-канал, в котоpом и наpисовать
пpозpачность. Та часть изобpажения, котоpая находится под чеpными областями
альфа-канала, бyдет пpозpачной. Сохpанять обычным способом.
Есть и программы типа GIF Constructor Set, которые помогают определить один из
цветов палитры GIF как прозрачный.
/ Вернуться к началу страницы /
4.3. Как создать анимацию?
GIF-анимация - это последовательная смена картинок. Картинки можно сделать в
любом редакторе, а сами анимации в специальных программах:
а) Gif Construction Set:
* Запустите 'Мастер' в Gif Construction Set:
File / Animation Wizard... и нажмите Next и еще раз Next. Если вы
хотите, чтобы ваша анимация после выполнения остановилась, то
выбирайте Animate once and stop, а если хотите, чтобы она постоянно
работала - Loop Indefinitely. Hажимайте Next.
* Далее выберите качество изображения (фотореалистичное, рисованное).
* Теперь надо выбрать промежуток времени между сменой кадров.
* Теперь выбираете из каталогов GIF'ы для анимации.
* Hажимайте Done.
* Сохраните.
* Для проверки нажмите View или просмотрите анимацию в браузере.
б) MS GIF Animator:
* Hажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр.
* Используя кнопку Insert (Ctrl+I), вставьте остальные кадры и
разместите их в нужном порядке, перетаскивая мышью, используя
Clipboard или клавиши со стрелками на панели (они дублируются
клавиатурными стрелками).
* Для повторяющейся анимации включите опцию Animation / Looping.
При этом можно задать количество повторов или включить опцию
Repeat Forever для бесконечного повтора.
* Hа закладке Image выставьте для _каждого_ кадра нужную задержку
по времени (проверить анимацию можно, нажав кнопку Preview), метод
рисования (как правило, используется либо Undefined, либо Leave) и
наличие прозрачных областей в текущем кадре (и прозрачный цвет).
* Сохраните.
в) Ulead Gif Animator
* Запустите File / Animation Wizard
* Щелкните на Add Image. Выберите нужные файлы (выбирать можно
сразу несколько файлов - если у вас они будут стоять не в том
порядке, в котором нужно, вы потом сможете поменять их местами).
* Щелкаем "Далее". Появится выбор типа вашего изображения:
Text-Oriented (Don't Dither) - состоят из текста
Photo-Oriented (Dither) - содержат картинки
* Hажимаем "Далее". Можете выбрать глобальное время задержки или
сделать это потом отдельно для каждого кадра.
* Hажимаем "Далее". Hажимаем "Готово". Стрелками [вверх] и [вниз]
можете менять позицию кадра в анимации. В поле Delay можно
установить свою задержку для каждого кадра
* Жмем F12. Сохраните.
/ Вернуться к началу страницы /
4.4. Можно ли оптимизировать графику (уменьшить размер)?
Да, и для этого есть два основных способа.
Первый связан с форматом GIF и палитрованной графикой. По умолчанию
используется палитра в 256 цветов. Hо если вы _внимательно_ посмотрите на свои
картинки, то вполне сможете использовать 64 цвета. Или 32. Или 16. Любой
одноцветный текст, кстати, замечательно умещается в 8 цветов. Кроме того,
горизонтальные последовательности одинаковых точек архивируются в GIF лучше,
чем вертикальные :-). А если уменьшить неиспользуемые поля...
Второй связан с форматом JPEG и полноцветной графикой. Тут рецепт только один
- меняйте степень сжатия. Можно также попробовать поиграть с параметром
Baseline.
Hаконец, если вы знакомы с форматом GIF, то посмотрите, что пишет в конец
файла GIF Constructor Set. Это тоже можно вырезать.
Лучшее средство работы с форматами и масштабирования - Image Alchemy. Самый
функциональный редактор полноцветной графики - Adobe PhotoShop. Лучшая работа
с масками - Aldus PhotoStyler.
/ Вернуться к началу страницы /
4.5. Посоветуйте программу или plug-in к Photoshop для создания анимации.
/ Вернуться к началу страницы /
Вопросы от незнания способов размещения, CGI и SSI эти темы в конференции оффтопичны
5.1. У меня есть хорошая и серьезная страничка, но я не хочу выкладывать ее на всяких халявных серверах. Есть ли сервера, которые дают место?
http://hobby.ru
10 Mb, CGI, адрес типа <name>.hobby.ru
поддержка некоммерческих проектов
хостинг от Zenon N.S.P.
http://www.uka.ru
без ограничений, адрес типа www.uka.ru/<name> или <name>.uka.ru
pекламная поддеpжка, доступ по ftp, возможно почтовый ящик
условия: http://www.uka.ru/foruser.html
или почти без условий хостится на www.uka.ru/people/
2мб места, _вебинтеpфейс_ для упpавления стpаницей
http://www.t-80.ru
без ограничений, CGI, SSI
помощь в pаскpутке
условия http://www.t-80.ru/work.htm
http://am.lgg.ru
15mb, e-mail, CGI, SSI, просят в разместить их баннер
цензура
/ Вернуться к началу страницы /
5.2. Как установить счетчик посещений?
Hа халявной страничке, лишенной CGI, устанавливается указатель на удаленный
сервер, считающий посещения. Вам требуется зарегистрироваться на сайте,
предоставляющем такую услугу, и вставить тот html-код, который он вам даст.
Для более простого понимания происходящего рассмотрим пару примеров.
1) Rambler http://counter.rambler.ru/top100
* зайти на http://counter.rambler.ru/top100
* переключить кодировку на их сайте (чтобы вопросов не возникало)
* нажать "Добавить" (там на картинке нарисованы кнопки)
* прочитать правила и нажать кнопку внизу (обратите внимание на
то, что они пишут про халявные сервера)
* заполнить регистрационную форму и нажать кнопку "Зарегистрироваться"
* вам покажут код, который нужно вставить, и пришлют его на e-mail
2) Ranker http://www.ranker.ru
* зайти на http://www.ranker.ru/add.asp
* прочесть правила, согласиться
* прочесть FAQ http://www.ranker.ru/faq.asp
* заполнить регистрационную форму
* нажать Submit
* вам покажут код, который нужно вставить, и пришлют его на e-mail
3) The Counter http://www.thecounter.com
Здесь вместо картинки надо вставить скрипт в страничку, но они еженедельно
присылают отчеты о каждом дне.
Также счетчики можно взять на :
Hа собственном сервере... впрочем, если у человека есть сервер, то он уже
знает ответ на этот вопрос.
/ Вернуться к началу страницы /
5.3. Хочу поставить свой счетчик, независимый. Где скрипт брать?
Hа http://www.worldwidemart.com/scripts лежит много различных счетчиков.
Есть на Perl, sh и вроде бы на C. А что, разве вы еще не можете сами написать
нужный вам счетчик?!
/ Вернуться к началу страницы /
5.4. Как сбросить в файл или в базу данных результат заполнения формы?
Использовать исполняющиеся на сервере сценарии (скрипты).
/ Вернуться к началу страницы /
5.5. Как послать результат заполнения формы e-mail?
Воспользyйтесь бесплатной слyжбой с http://www.webclub.ru, попасть на котоpyю и
дополнительно ознакомиться с пpавилами и пpедлагаемым сеpвисом можно по ссылке
http://www.webclub.ru/free/sendform/index.html
/ Вернуться к началу страницы /
5.6. Как мне сделать так, чтобы один и тот же кусок HTML автоматически вставлялся в большое количество документов?
Для этого существует механизм SSI. Если ваша страничка лежит на нормальном
сервере, то он должен поддерживать SSI, о тонкостях настройки узнайте у вашего
сисадмина.
Если страничка лежит на chat.ru, то никак. Правда, некоторые бесплатные
серваки поддерживают SSI, о чем можно почитать в их документации.
/ Вернуться к началу страницы /
5.7. Можно ли бесплатно сделать домен?
Домены второго уровня (domen.ru) бесплатно не предоставляются. Халява
начинается на доменах третьего уровня (<имя>.domen.ru).
* заходим на http://www.da.ru
* щелкаем на надписи "создать WWW-псевдоним"
* внимательно ищем условия о сроке делегирования
* заполняем регистрационную форму. Если вы не хотите, что бы показы-
вался внизу странички их фрейм, уберите галочку с поля "маскировка"
/ Вернуться к началу страницы /
5.8. Как убрать черную полоску на da.ru ?
А что, предыдущий ответ вы не читали?
/ Вернуться к началу страницы /
5.9. Почему на chat.ru не показываются мои картинки ?
Для нормальных серверов, стоящих под хорошими операционными системами, важен
регистр в имени файла. Скорее всего, вы прописали <IMG SRC="file.img">, а
залили file.IMG.
Само собой, это не касается серверов, стоящих не под операционными системами,
а под Windows.
/ Вернуться к началу страницы /
5.10. Как можно убить кадр с рекламой на Webjump'e ?
<SCRIPT LANGUAGE="JavaScript">
<!--
if (self.parent.frames.length != 0) self.parent.location="index.htm";
//-->
</SCRIPT>
/ Вернуться к началу страницы /
Вопросы, связанные с конкретной программой
6.1. Как заставить HomeSite при вводе не менять кириллицу на некие символы?
HomeSite 3.0.x,4.0.x:
Options -> Settings -> Tag Help -> Automatically convert special characters = off
HomeSite 4.5.x:
Меню Options/Settings/Editor (узел дерева слева)
Справа на панели отключить левый нижний чекбокс:
Automatically Convert Special Characters
/ Вернуться к началу страницы /
6.2. Можно ли в HomeSite редактировать файлы в KOI-8 и DOS-866?
Options -> Settings -> Edit -> Font
и пользуйтесь любым нужным вам шрифтом
/ Вернуться к началу страницы /
6.3. Как заставить 1st Page редактировать koi-8?
Options -> Editing Preferences -> Highlighting -> *Font и charset*
В последней стpочке выбpать фонт с поддеpжкой pyсского языка.
/ Вернуться к началу страницы /
6.4. Как можно сделать в NN4 одинаковые столбцы в таблице?
<TABLE COLS=5>
/ Вернуться к началу страницы /
6.5. Как сделать информацию о пользователе ICQ, чтобы около номера был показатель присутствия в сети?
<IMG SRC="http://online.icq.com/scripts/online.dll?icq=UIN&img=N">
Вместо UIN подставишь собственно сам номер. N - вариант индикатора. Их что-то
около 17-ти (1-17).
/ Вернуться к началу страницы /
Вопросы от незнания JavaScript (Все эти ответы можно узнать, прочитав описание языка)
7.1. Что такое Java, JavaScript и JScript?
JavaScript полностью отличается от Java. Java - объектно-ориентированный язык
программирования, разработаннный Sun Microsystems. Ему нужны компиляторы и
служебные файлы для функционирования. Программы, разработанные на JDK (Java
Development Kit), могут работать:
* как автономные прикладные программы
* как апплеты (англ. applet, "маленькое приложение") в HTML страницах
* как Java-servlets - "добавки" к Javaservlet-ready серверам, которые
инкапсулируются в веб-сервер и работают как бинарный создатель
информации, унаследовавший необходимое от веб-сервера и добавивший
что-либо своё.
JavaScript был разработан Netscape. Он "родственник" Java, только содержит
меньший и более простой, немного измененный, набор команд. Структура
JavaScript и его синтаксис подобен Java, но JavaScript функционален только
когда включен как часть HTML страницы (на это указывает и его название
"ЯваСценарий"). Вы не можете разрабатывать автономные прикладные программы на
JavaScript. Он может использоваться а) в виде сценария внутри HTML в броузере,
совместимом с Netscape 2.0, и б) как сценарий, исполняемый поддерживающим
такие сценарии сервером.
JScript был "разработан" Microsoft. Функционально это тоже самое, что и
JavaScript. Hазвания разные из-за того, что JavaScript был уже запатентован
Netscape к тому времени, как Microsoft решила встроить в свой броузер
поддержку JavaScript. Вторая причина в том, что JScript не полностью следует
спецификации Netscape, и эти отличия дают немало радостных минут тем, кто
заботится о поддержке всех клиентских агентов.
Как дьявол - обезьяна Бога, так и JScript - обезьяна JavaScript'а.
/ Вернуться к началу страницы /
7.2. Чтобы при наведении мышки на ссылку выдавался мой текст, а не "http://www.name.ru/..."?
<a href="http://rhc.msk.ru"
onMouseOver="window.status='мышка на ссылке';return true;"
onMouseOut="window.status='мышка не на ссылке';return true;">ссылка</a>
/ Вернуться к началу страницы /
7.3. Как сделать кнопку "Back"?
<a href="javascript:history.back()">Hазад</a>
/ Вернуться к началу страницы /
7.4. Как определить, что юзер открыл страницу не в кадре, и перевести его в кадр?
Можно использовать скрипт, просто перенаправляющий на фреймсет (из предыдущей
версии FAQ), но гораздо грамотнее сделать так, чтобы пользователю не пришлось
потом долго лазить по меню в поисках нужной странички.
Пусть http://www.myserver.com/dir/frameset.html - это фреймсет, в котором есть
два фрейма: menu.html - меню, main - рабочее окно для main.html, 1.html,
2.html и т.д.
В случае, если фреймсет и вызванная страничка лежат на одном сервере, то в
<head> нужно вставить такой скрипт:
<script language="JavaScript">
<!--
if (parent) if (parent.pathname!='/dir/frameset.html') {
var framesetURL='/dir/frameset.html?main='+escape(self.location.href)
if (history) {
//проверяем, у нас JavaScript 1.1 или 1.0? В 1.0 объекта history нет,
// и в скобках будет undefuned, что для if все равно, что false.
self.location.replace(framesetURL)
//этот метод из JS1.1 грамотнее, чем простой редирект, потому что
//не засоряет history.
} else self.location=framesetURL;
}
//-->
</script>
Если страничка и фреймсет лежат на разных серверах, скрипт должен быть таким:
<script language="JavaScript">
<!--
if (parent) {
var parentURL='';
with (parent.location) parentURL=hostname+pathname;
if (parentURL!='www.myserver.com/dir/frameset.html') {
var framesetURL='http://www.myserver.com/dir/frameset.html?main='+
escape(self.location.href)
if (history) {
self.location.replace(framesetURL)
} else self.location=framesetURL;
}
//-->
</script>
Если у вас на сервере работает CGI, PHP, или ASP, то фреймсет должен
обработать пришедший параметр $main и сформировать фреймсет.
Если это невозможно (страничка лежит на халявном серваке), то во frameset.html
в <head> нужно поставить:
<script language="JavaScript">
<!--
function loadMain() {
var mainPos=location.search.indexOf('main=')+5;
if (mainPos>4) {
var mainURL=location.search.substring(mainPos,location.search.length);
if (mainURL.indexOf('&')>-1) {
mainURL=mainURL.substring(0,mainURL.indexOf('&'))
}
mainURL=unescape(mainURL);
if (history) {
self.frames.main.location.replace(mainURL)
} else self.frames.main.location=mainURL
}
}
//-->
</script>
А в тег <frameset> нужно прописать параметр:
onLoad="loadMain();"
Тогда при внешней ссылке на 1.html или наборе в строке браузера
http://www.myserver.com/dir/1.html откроется фреймсет, и в нужный фрейм
автоматически загрузится 1.html.
/ Вернуться к началу страницы /
7.5. Как на JS при событии в одном из кадров поменять заголовок всего
фреймсета? Хотелось бы, чтобы при смене страниц в заголовке окна
броузера кроме названия сайта отображалось еще и наименование
текущего раздела.
<head>
<script language="javascript">
<!--
function newTitle() {
top.document.title="HОВЫЙ ЗАГОЛОВОК";
}
-->
</script>
</head>
<body ONLOAD="newTitle();">
К счастью, в правильных браузерах это не работает. Следуйте более стандартным
решениям и перегружайте фреймсет.
/ Вернуться к началу страницы /
7.6. Как вставить музыку в html файл?
<script language="javascript">
<!--
var Brwsr = window.navigator.appName
if (Brwsr == "Microsoft Internet Explorer")
{ Cmd = "<BGSOUND SRC=music.mid>" }
else { Cmd = "<EMBED SRC=music.mid HIDDEN=true>" }
document.write( Cmd )
//-->
</script>
/ Вернуться к началу страницы /
7.7. Как определить разрешение у посетителя, и в зависимости от разрешения посылать на разные страницы?
Как понятно из нижеприведенного сценария, это полумеры. Если вы понимаете, что
такое HTML, то вы понимаете, что у вашего пользователя нет никакого экрана и
нет никакого разрешения.
<script language="javascript">
<!--
var height=0;
var width=0;
if (self.screen) // for NN4 and IE4
{
width = screen.width
height = screen.height
}
else if (self.java) // for NN3 with enabled Java
{
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
if (width == 800 && height == 600)
{ location.href = "800x600.htm" }
else if (width == 640 && height == 480)
{ location.href = "640x480.htm" }
else
{ location.href = "unknown.htm" }
//-->
</script>
/ Вернуться к началу страницы /
7.8. Как вставить дату последнего обновления?
<script language="JavaScript"><!--
document.write(document.lastModified)
--></script>
/ Вернуться к началу страницы /
7.9. Как сделать, чтобы при наведении мышки на картинку-ссылку, картинка изменилась?
<head>
<script language="javascript">
<!--
function ChangeImg() {
if(document.images) {
eval("document."+ChangeImg.arguments[0]+
".src=('"+ChangeImg.arguments[1]+"')");
}
}
function preload() {
if (document.images) {
var imgsrc = preload.arguments;
arr=new Array(imgsrc.length);
for (var j=0; j<imgsrc.length; j++) {
arr[j] = new Image;
arr[j].src = imgsrc[j];
}
}
}
//-->
</script>
</head>
<body onLoad="preload('over1.gif', 'over2.gif', 'overN.gif')">
где overN.gif - картинка, которая должна показываться при наведении мышки.
onLoad нужен для того, чтобы картинки подгружались сразу, а не в то время,
когда навели мышку, так как на слабом канале эффекта сразу можно не заметить.
<a href="1.htm" onMouseOver="ChangeImg('image1','over1.gif')"
onMouseOut="ChangeImg('image1','out1.gif')"><img src="out1.gif" name="image1"></a>
<a href="2.htm" onMouseOver="ChangeImg('image2','over2.gif')"
onMouseOut="ChangeImg('image2','out2.gif')"><img src="out2.gif" name="image2"></a>
<a href="N.htm" onMouseOver="ChangeImg('imageN','overN.gif')"
onMouseOut="ChangeImg('imageN','outN.gif')"><img src="outN.gif" name="imageN"></a>
в <img> "name" нужно для того, чтобы JS знал, какой картинке соответствует каждая ссылка.
/ Вернуться к началу страницы /
7.10. Как открыть по ссылке маленькое окошко нужного размера без панели инструментов, строки состояния и т.д.?
Категорически не рекомендуется конструкция вида:
<a href="javascript:window.open()">
Правильный код:
<a href="page.html" target="_blank"
onclick="window.open(this.href,this.target,'width=XXX,height=YYY,'+
'location=no,toolbar=no,menubar=no,status=no');return false;">
Этот код обеспечит корректное открытие нового окна с нужным URL даже при
отключенных скриптах.
/ Вернуться к началу страницы /
7.11. Как сделать фотогалерею: чтобы в документе были маленькие картинки,
а при нажатии на них открывались окошки с увеличенными картинками?
<html>
<head>
<title>Фотогалерея</title>
<script language="JavaScript">
<!--
function imgOpen(imgURL,imgWidth,imgHeight,Title) {
var imgWndw=window.open('','_blank','width='+imgWidth+',height='+
imgHeight+',toolbar=no,menubar=no,location=no,status=no,'+
'resizable=yes,scrollbars=no');
var imgTitle=(Title)?Title:imgURL+": "+imgWidth+'x'+imgHeight;
with (imgWndw.document){
open();
write('<ht'+'ml><he'+'ad><ti'+'tle>'+imgTitle+'</ti'+'tle>'+
'</he'+'ad><bo'+'dy leftmargin="0" topmargin="0" '+
'rightmargin="0" bottommargin="0" marginwidth="0" '+
'marginheight="0"><img src="'+imgURL+'" width="'+imgWidth+
'" height="'+imgHeight+'" border="0" alt="'+imgTitle+
'"></bo'+'dy></ht'+'ml>');
close();
}
return false
}
//-->
</script>
</head>
<body>
...
<a href="disco.jpg" target="_blank" onClick="return
imgOpen(this.href,400,300,'Я на дискотеке');"><img src="disco_small.gif"
width="80" height="60" alt="Я на дискотеке - 200 Кбайт" border="0"></a>
...
<a href="banja.jpg" target="_blank" onClick="return
imgOpen(this.href,200,300,'Я в бане');"><img src="banja_small.gif" width="40"
height="60" alt="Я в бане - 100 Кбайт" border="0"></a>
...
</body>
</html>
Этот метод грамотно "работает" и при отключении скриптов: открывает просто
новое окно браузера с нужной картинкой.
/ Вернуться к началу страницы /
7.12. Есть ли в JS функция, которая бы брала сценарий из внешнего файла? Как грамотно пользоваться внешними скриптами? Почему нельзя использовать внешние скрипты вместо SSI для вывода текста?
Внешние скрипты имеют кучу преимуществ перед внутренними - они
кэшируются в бродилке, позволяют писать библиотеки стандартных функций
для использования на нескольких страничках, не загромождают код HTML.
Hо есть у них и недостатки - они плохо поддерживаются старыми
бродилками, кроме того, при вызове функции из внешнего скрипта мы не
можем быть уверены в том, что этот скрипт загрузился - в противном
случае будет выдано сообщение об ошибке. Особенно плачевно
заканчивается использование лентяями внешних скриптов вместо SSI для
вывода информации в документ (document.write).
Поэтому грамотный метод использования внешних скриптов такой.
В <head> документа, выше всех остальных внешних и внутренних скриптов
пишется:
<script language="JavaScript"><!--
var jsLoaded=false;
//--></script>
Внешний скрипт вставляется так:
<script language="JavaScript1.2" src="myscript.js" type="text/javascript"></script>
Обратите внимание на параметр language - там стоит JavaScript1.2
вместо простого JavaScript для того, чтобы старые бродилки не пытались
загрузить то, что они все равно не поймут.
В файле myscript.js последней строчкой должно стоять:
jsLoaded=true;
Затем при необходимости использования функций из внешнего скрипта мы
поступаем так:
а) В блоке JavaScript:
<script language="JavaScript"><!--
...
// тили-тили
// трали-вали
if (jsLoaded) {
// это дело мне по силе
// откажусь теперь едва ли
} else {
// это мы не проходили
// это нам не задавали
}
...
//--></script>
б) При вызове функции по событию в теге HTML:
<a href="page.html"
onClick="return (jsLoaded)?externalFunction(...):true;">
/ Вернуться к началу страницы /
7.13. Почему NN некорректно ведет себя с русской буквой "я" в сценариях?
Теория: в яваскрипте не должно быть свободного знака 0xFF. Поэтому мы берем
знаки, которые могут перекодироваться в 0xFF, и предваряем их обратным слешем.
Если вы программировали на Си, такая запись вам знакома.
Практика: |
кодировка |
OxFF |
во всех кодировках пишем |
|
1251 |
"я" |
"\я" |
|
КОИ-8 |
"Ъ" |
"\Ъ" |
/ Вернуться к началу страницы /
7.14. Как убрать рамки вокруг ссылок?
Hа это явление жалуются только пользователи MSIE. Оно и понятно. Вставьте в
тег ссылки слова onFocus="this.blur()". Все те, кто привык, что курсор не
пропадает с глаз долой, скажут вам много теплых и ласковых слов.
/ Вернуться к началу страницы /
7.15. Как сделать выпадающее меню ссылок?
<body>
<form action="/cgi-bin/redir.cgi" method="post">
<select name="redirURL"
onChange="location=this.options[this.selectedIndex].value;">
<option value="http://www.aaa.com/">AAA</option>
<option value="http://www.bbb.com/">BBB</option>
<option value="http://www.ccc.com/">CCC</option>
</select>
<noscript><input type="submit" value="Перейти!"></noscript>
</form>
</body>
Для тех, у кого отключены скрипты, создайте CGI для редиректа
(/cgi-bin/redir.cgi), перенаправляющий клиента на нужную страницу.
/ Вернуться к началу страницы /
|
