| Главная » Статьи » Книги » Интернет Ваш выход! Евгений Финкель |
Интернет. Ваш выход! Евгений Финкель
| Создание и публикация Web-документов Часть IV. Создание и публикация Web-документов По мере освоения просторов Сети Интернет вам, почти наверняка, в очень скором времени, захочется создать собственную "страницу". Не одну страницу, конечно, а тьму тьмущую страниц, так или иначе связанных с именем творца. Эта задача вам вполне по силам. Создание простых Web-документов не требует ни глубокого знания языков программирования, ни особых навыков в области графического дизайна. Достаточно познакомиться с наиболее популярными программами для редактирования Web-страниц - Netscape Composer и Microsoft Front Page - и определиться с вопросом: "Где бы опубликовать плоды своего творчества?" Неплохо бы еще и позаботиться об оповещении потенциальной аудитории потребителей вашей информации. Здесь можно найти полный список литературы на русском языке о Web-дизайне. Microsoft FrontPage Editor Microsoft FrontPage Editor Еще одно общедоступное средство создания HTML-документов. Безусловно, более мощное, чем Netscape Composer, хотя и без особых изысков. Создаваемые во FrontPage гипертексты тяжеловаты, зато HTML-код не так пестрит ошибками. Врезультате творение, созданное во FrontPage, грузится помедленнее, хотя и оказывается более понятным с точки зрения любого браузера. [msfp1.GIF (13434 bytes)] На мой взгляд, основное удобство программы FrontPage заключается в абсолютном взаимопонимании с главным текстовым редактором от Microsoft, программой Word. FrontPage легко и безошибочно распознает тексты (не только TXT, но и RTF, DOC, и т.д.), картнки и таблицы. В отличие от Netscape Composer, он не требует отказа от стилей, перевода документа в формат TXT, а лишь затем открытия в HTML-редакторе. Достаточно просто открыть уже однажды созданный документ Word в редакторе FrontPage: File > Open > Тип файлов: Word 97 (*.doc) > найти нужный DOC-файл > OK. И все. Во вновь созданный HTML-файл перенесены (даже с частичным сохранением стилей) и текст, и картинки, и таблицы. Удобно, не правда ли? Но мы забежали немного вперед. Давайте сначала получше присмотримся к программе FrontPage. Интерфейс Внешне FrontPage напоминает привычный Word. Начнем, как обычно, с кнопочек. Их чуть больше двадцати. Перечислим их, слева направо. Внимание! Название кнопочки всплывает после подведения к ней маркера мыши. [msfp2.GIF (2624 bytes)] New - открывает новый документ (чистая страница). Open - позволяет открыть уже созданный документ (форматы htm, html, txt, rtf, doc и др.). Save - сохраняет созданный вами файл (форматы htm, html, htt, htx и asp). Print - распечатывает данный гипертекстовый документ. Preview in Browser - позволяет взглянуть на то, как будет выглядеть ваше произведение в окне браузера Microsoft Internet Explorer. Check Spelling - проверка орфографии (язык - английский, в русской версии - русский). Cut - вырезает выделенный кусок и помещает на временное хранение в буфер памяти. Copy - копирует выделенный кусок в буфер памяти. Paste - достает информацию, размещенную на временноле хранение в буфере памяти. Undo - отменяет последнее действие. Redo - возвращает к последнему действию (отмена отмены). Show FrontPage Explorer - запускает программу формирования топографии сайта. Insert FrontPage Component - устанавливает дополнительные компоненты (комментарии, счетчики и проч.) Insert Table - запускает генератор таблиц. Insert Image - прицепляет картинку к гипертексту (форматы gif, jpg, tif, bmp, eps и т.д.). Create or Edit Hyperlink - создает ссылку (линк) на выделенном фрагменте гипертекста. Back - позволяет вернуться к предыдущему документу. Forward - позволяет перейти к следующему документу. Refresh - перезагружает данный документ. Stop - останавливает загрузку документа. Show/Hide [msfp3.GIF (858 bytes)] - позволяет видеть разметку строк. Help - вызывает маркер подсказчика. В дальнейшем вы можете подвести этот маркер к любой из кнопок и по левому клику получить описание функций данной кнопки. Внимание! В нижней части экрана есть три дополнительные кнопки: Normal, HTML и Preview. При создании документа во FrontPage Editor по умолчанию вы работаете в режиме текстового редактора (Normal). Одним кликом на HTML можно просмотреть в удобном многоцветном режиме HTML-код создаваемого документа (в отличие от Netscape Composer в этом окне можно редактировать HTML-код). Preview позволяет увидеть, как выглядит созданный документ в реальном окне браузера Internet Explorer. Создание текста Работа с текстом во FrontPage - процедура ординарная, поэтому все детали продуманы разработчиками досконально. [msfp4.GIF (2270 bytes)] Все привычно: выбор стиля, шрифта, кегля, цвета, направления выравнивания и пр. Единственное неудобство: невозможность выбрать сразу размер кегля (приходится действовать методом "последовательных итераций", то есть изменять размер пошагово). Если уже после завершения набора текста у вас возникнет необходимость в более точном выборе шрифта и его размера, можно выделить мышью необходимый участок текста, сделать правый клик мышью, выбрать Font Properties (левый клик) и произвести необходимые изменения в окне настройки. FrontPage постарается подобрать шрифт, наиболее близкий к заказанному вами. И не обижайтесь, если вместо требуемого шрифта Comic Sans MS для русского текста будет предложен рядовой Arial, это означает только одно: для русских текстов выбранного вами шрифта просто не существует. [msfp5.GIF (9287 bytes)] Изменения кодировки во FrontPage просто не существует. По умолчанию, вы создаете русский текст в Windows-1251. Что же до перевода текста из традиционных форматов (doc, rtf, txt) в гипертекст (htm, html), то для FrontPage эта процедура настолько проста (см. выше), что отдельного комментария не требует. Создание текста с картинками [msfp6.GIF (9079 bytes)] Хотите добавить к тексту картинку? Кликните на кнопку Insert Image (или выберите Insert > Image в командном меню). Найдите файл с нужной картинкой, отметьте его и смело жмите на ОК. Для изменения размера картинки достаточно сделать на ней левый клик мышью и "потянуть" за любую из "пограничных точек". В полной версии FrontPage существует возможность редактирования картинок (проверьте, отмечена ли строка View > Image Toolbar). Для того, чтобы вызвать к жизни редактор картинок, достаточно отметить левым кликом нужную картинку. После этого в нижней части рабочего экрана станет активной панель с кнопками для работы с изображением. [msfp7.GIF (2413 bytes)] Давайте познакомимся с новыми кнопочками (как обычно, слева направо). Select - выделение всей картинки (опция, установленная по умолчанию). Rectangle - выделение прямоугольного участка картинки. Circle - выделение округлого участка картинки. Polygon - выделение произвольного участка картинки (отрезками от точки к точке). Highlight Hotspots - очерчивание зоны, внутри которой находится картинка. Text - позволяет впечатать произвольный текст поверх картинки. Make Transparent - делает прозрачными все элементы картинки указанного цвета. Crop - позволяет вырезать участок картинки. Washout - полное осветление картинки (наподобие водяного знака). Black and White - переход к "серым тонам" (все оттенки серого - не совсем черное и белое). Restore - возвращает к первоначальному состоянию. Rotate Left - повернуть на левый бок. Rotate Right - повернуть на правый бок. Reverse - зеркальный поворот. Flip - поворот с "ног на голову". More Contrast - делает изображение более контрастным. Less Contrast - менее контрастным. More Brihtness - делает изображение более светлым. Less Brihtness - менее светлым. Bevel - сажает картинку в рамку. Resample - восстановление первоначального размера картинки. Как правило, веб-мастера для работы с картинкой используют Photoshop или другие серьезные графические редакторы. Однако, для начала, встроенной во FrontPage графической программы вполне достаточно. Внимание! Не забывайте, что стандартные форматы в Web - jpg и gif, стандартная резолюция 72 dpi, для jpg желательно выбирать средний <4> уровень качества, а для gif строчность interlaced. Для раскрашивания "обоев" (background) во FrontPage необходимо сделать правый клик мышью в любой точке окна создаваемого документа, выбрать Page Properties, а затем Background. С помощью кнопки Browse можно выделить файл (обычно это gif-файл), который будет использован в качестве элемента "обоев" (Background Image). "Обои" можно сделать и "стандартными" (Get Background and Colors from Page). [msfp8.GIF (9154 bytes)] Создание линков Для того, чтобы поставить линк (ссылку) на элемент текста или картинку, достаточно выделить нужный объект и кликнуть на кнопку [msfp9.GIF (944 bytes)] (Create or Edit Hyperlink) или выбрать последовательность операций из командного меню Insert > Hyperlink. [msfp10.GIF (8057 bytes)] Далее, в строке URL необходимо указать адрес, на который будет осуществляться переход из данной точки документа (например, http://www.finkel.da.ru для Web или mailto:letaet@usa.net для электронной почты). Справа находятся четыре кнопки, призванные облегчить ваш труд по указанию адреса перехода: поиск адреса в Сети или на вашем компьютере с помощью Internet Explorer, поиск файла на вашем компьютере посредством Windows Explorer, создание ссылки на адрес электронной почты (можно не писать "mailto:") или указание ссылки на новый документ. Если вы желаете, чтобы страница, на которую делается ссылка, всегда открывалась в новом окне, кликните на кнопку [msfp11.GIF (914 bytes)] и выберите среди "общих целей" (Common Targets) "новое окно" (New Window), затем нажмите на OK. При необходимости указать ссылку на место внутри данного документа, во FrontPage удобнее всего перейти в HTML-редактор (внизу, кнопка HTML) и добавить в код два элемента: в месте, с которого делается переход, <a HREF = "#имя_метки">, в месте, на которое делается переход, <a NAME = "имя_метки">. Имя метки указывается латинскими буквами. Совет. Если вдруг, будет возникать сбой (предложение закрыть FrontPage из-за отсутствия некой DLL библиотеки) при попытке вписать новые элементы в существующий HTML-код, не волнуйтесь. Напишите новые элементы в любом текстовом редакторе, скопируйте их и добавьте в HTML-код данного документа. Ссылка на произвольную метку в любом Web-документе будет выглядеть так: http://адрес_страницы#имя_метки (например, http://www.geocities.com/Paris/Parc/9320/bookmark.htm#new). Таблицы Создавать таблицы во FrontPage можно, по крайней мере, тремя способами. 1) Кликнуть на кнопку [msfp12.GIF (898 bytes)] , выбрать количество столбцов и строк в таблиц. Изменять стили таблицы в дальнейшем можно будет по сценарию: правый клик на таблице > Table Properties. [msfp13.GIF (10341 bytes)] 2) Выбрать в командном меню Table > Insert Table. В этом случае основные стили таблицы определяются вами сразу. [msfp14.GIF (5982 bytes)] 3) Наиболее творческие личности предпочитают путь Table > Draw Table. В этом случае вы можете проривовывать элементы таблицы вручную, плюс в ваше распоряжение предоставляется весьма солидный арсенал средств (размещенный на отдельной панели). [msfp15.GIF (1865 bytes)] Эту панель можно вызвать к жизни и другим способом: View > Table Toolbar. Безусловно, работать с таблицами во FrontPage Editor значительно удобнее, чем в Netscape Composer. Да и не только с таблицами. Однако, если уж вы выбрали FrontPage Editor в качестве основного редактора для ваших Web-документов, не забывайте просматривать как выглядят создаваемые вами страницы не только в Microsoft Internet Explorer, но и в Netscape Navigator. Дополнительные рекомендации Если вы создаете страницу на русском языке, не забудьте установить по умолчанию русскую (Cyrillic) кодировку страницы: правый клик > Page Properties > Language. Тем, кому показалось, что информация о FrontPage, предоставленная выше, недостаточна, рекомендуем почитать дополнительную литературу на эту тему. Вы можете также обратиться к печатным изданиям: [6.1], [6.3], [6.8], [6.14], [6.17], [6.18], [6.20], [6.25], [6.26]. Netscape Composer Netscape Composer Простейшим средством конструирования для Web до последнего времени считалась программа Netscape Composer (многие по-старинке именуют ее Mozilla Editor). Программа редактирования Web-документов была впервые включена в общий пакет в версии Netscape 3 Gold (Microsoft тогда еще не задумывался над необходимостью предоставления в распоряжение пользователя удобного инструмента для самостоятельных опытов на поприще веб-мастеринга). Основное достоинства программы: простейший интерфейс, создание довольно легкого гипертекста. Количество кнопок и возможностей минимизировано до предела, хотя говорить об идеальной оптимизации программы не приходится. И это замечание человека, который в течение нескольких лет никакими другими программами для создания Web-документов не пользовался. Однако, если вы предполагаете создавать элементарные страницы (тексты плюс картинки), думаю, что Netscape Composer вас вполне устроит. [ncomp1.GIF (33752 bytes)] Интерфейс Перечислим все кнопочки панели управления последовательно слева направо, дав им краткую правдивую характеристику. [ncomp2.GIF (3160 bytes)] New - открывает новую "чистую" страницу для творческой деятельности. Open - позволяет открыть уже созданный документ (форматы htm, html, txt, exe и т.д.). Важно! Composer не дает возможности открыть документ Word в формате doc, предварительно его приходится сохранять в формате txt с потерей всех стилей. Save - сохраняет уже однажды созданный вами документ (в форматах htm, html, txt). Документ можно сохранять и по сценарию File > Save As (или просто Save). Publish - публикует созданный документ в Web (по замыслу создателей). Однако, большинство пользователей предпочитают в качестве "публикаторов" специальные программы типа CuteFTP, WS_FTP, Windows Commander и пр. Рекомендация. Следуйте и вы, до поры до времени, за большинством. Preview - просмотр созданного документа в реального окне браузера (Netscape Navigator). Внимание! Зачастую на этом этапе выявляются неизбежные ошибки. Пользуйтесь этой кнопкой почаще. Cut - если вы выделили какой-либо объект в создаваемом документе, то эта кнопка - для того, чтобы этот объект вырезать. После данной операции означенный объект попадает в камеру временного хранения (есть такой специальный буфер памяти) и может быть возрожден к жизни в любом другом месте посредством волшебной кнопки Paste. Copy - то же, что и Cut, только выделенный объект просто копируется в буфер памяти (это для тех, кто не любит резать по-живому). Paste - достает объект из буфера памяти и выкладывает на всеобщее обозрение. Print - позволяет распечатать все, что вы натворили. Рекомендация. Предварительно посмотрите, как будет выглядеть ваш документ на листе бумаги File > Print Preview. Find - искалка ключевых и прочих слов в создаваемом документе. Link - позволяет оперативно "посадить ссылку" (link) на выделенный объект. Этим объектом может быть слово, сочетание слов или картинка. Target - позволяет установить "цель" (target) (или "внутренний линк) на любой строке создаваемого документа. Это позволит в дальнейшем попадать на эту строку из произвольной точки данного или любого другого гипертекста. Image - публикация картинки (форматы gif, jpg, jpeg, bmp) H.Line - создание горизонтальной линии (весьма частно употребимого разделительного элемента) Table - создание таблицы (Composer не является идеальным средством для редактирования таблиц в гипертексте) Spelling - проверка орфографии набранного текста (увы, в Composer по умолчанию встроен только английский словарь) Создание текста [ncomp3.GIF (2098 bytes)] Набор текста в Composer весьма напоминает аналогичную процедуру во всех прочих текстовых редакторах. [ncomp4.GIF (1844 bytes)] [ncomp5.GIF (3486 bytes)] Можно выбрать стиль, шрифт, кегль, цвет; набрать текст полужирным, наклонным или подчеркнутым; придать ему вид официального документа и выровнять по ранжиру. Важно! Гипертекст, в отличие от текста, редактируемого обычным текстовым редактором, не может быть выровнен как слева, так и справа. При наборе используются стандартные клавиши для введения или удаления элементов текста. К сожалению, Composer не позволяет реально при наборе использовать все многообразие фонтов. Если вам не удается перейти у набору текста по-русски или однажды набранный текст выглядит полной абракадаброй, произведите следующую последовательность операций: View > Encoding > Cyrillic (Windows - 1251). [ncomp6.GIF (15603 bytes)] > [ncomp7.GIF (15535 bytes)] Если текст до того был набран в Word, рекомендую следовать сценарию, описанному ниже. В Word: File (Файл) > Save As (Сохранить как) > Text Only (*.txt) (Только текст) > дать имя файлу > Save (Сохранить). Внимание! Имя файла лучше сразу набирать маленькими буквами по-английски, желательно, чтобы имя файла было коротким (например, ncomp.txt). Далее, в Composer: File > Open Page > Choose File > выбрать Files Type (Тип файлов) - Text (*.txt) > найти нужный txt-файл, отметить его и нажать на кнопку Open (Открыть). Отметьте Composer как программу для открытия файла и нажмите еще раз клавишу Open. [ncomp8.GIF (3994 bytes)] Данный сценарий не является ни самым коротким, ни самым удобным. Единственный довод в пользу именно такого выбора - абсолютная очевидность каждого последующего шага. После "имплантации" txt-файла в Composer внешний вид текста вас может разочаровать. Я обычно произвожу всего четыре операции для придания ему нормального облика: 1) выделить весь текст (мышью или одновременным нажатием клавиш Ctrl и A), 2) декодировать текст View > Encoding > Cyrillic (Windows - 1251), 3) выбрать стиль Normal, 4) подвинуть текст от левого края кнопкой [ncomp12.GIF (874 bytes)] (Increase Indent) или комбинацией клавиш Ctrl и =. [ncomp10.GIF (10083 bytes)] > [ncomp11.GIF (8847 bytes)] В результате вы получите аккуратный русский текст, всякий раз масштабируемый при изменении размеров окна браузера. Создание текста с картинками В гипертекстовых документах, как правило используют два графических формата gif или jpg. Оба эти формата отличаются относительной легкостью и универсальностью. Добавить в текст картинку очень просто. Установите маркер мыши там, куда вы собираетесь поместить картинку, нажмите кнопку Image (или комбинацию Insert > Image), найдите нужный файл с помощью клавиши Choose File и можете жать на OK. Картинка появится в тексте. [ncomp9.GIF (12233 bytes)] Действительно просто. Однако, я бы рекомендовал присмотреться к окну Image Properties повнимательнее. В разделе Image обратите внимание на основной набор дополнительных возможностей: Use as background - использовать избранный графический файл под "обои" Web-документа, Text alignment and wrapping around images - позволит определить положение текста относительно картинки и выбрать размеры отступа, Dimensions - изменение размеров картинки (Photoshop предпочтительней, на мой взгляд), Space around image - создание рамки вокруг картинки. [ncomp13.GIF (8030 bytes)] Раздел Link позволяет установить линк на картинку (Link to) и подпись при загрузке (Link source). В разделе Paragraph можно поиграться со стилями, хотя на первых порах это может быть излишним. Создание текста с картинками и линками Именно наличие линков (ссылок) отличает гипертекст от обычного текста. Объектом, на который устанавливается линк могут быть любая буква или цифра, слово или число, фраза или картинка данного документа. Линки условно можно разделить на внешние (ссылки на адреса страниц) и внутренние (ссылки на конкретную строку документа). Внешний линк - выделите объект мышью, нажмите на кнопку Link, укажите в строке "Link to..." адрес страницы в виде "http://адрес_страницы" (например, http://www.geocities.com/Paris/Parc/9320/bookmark.htm) и нажмите на OK. Внутренний линк 1) из произвольной точки данного документа на любую строку данного документа; - выделите объект мышью, нажмите на кнопку Link, укажите в строке "Link to..." условное имя цели в виде "#имя" (в нашем случае это "#new") и нажмите на OK. [ncomp20.GIF (7861 bytes)] Установите маркер мыши в начале строки-мишени, на которую должен осуществляться переход с вашего линка и нажмите на кнопку Target. [ncomp21.GIF (2583 bytes)] Впишите имя цели без "решетки" (в нашем случае это "new") и нажмите на OK. Цель будет отмечена значком [ncomp22.GIF (916 bytes)] . При просмотре документа с помощью браузера этот значок станет невидимым. Вы можете в этом убедиться с помощью кнопки Preview. Рекомендация. Проверьте заодно точность срабатывания только что созданного линка. 2) из произвольной точки данного документа на любую строку другого документа; - отличается от описанного выше только содержанием строки "Link to...", в ней перед условным именем цели "#имя" указывается адрес страницы "http://адрес_страницы" (например, http://www.geocities.com/Paris/Parc/9320/bookmark.htm#new). Таблицы Composer позволяет создавать простейшие таблицы. Вы можете выбрать количество строк (Number of rows), количество столбцов (Number of columns); стиль выравнивания - влево (Left), по центру (Center) или вправо (Right); определить размер таблицы по отношению к размерам окна, выбрать толщину линий, применить цветную подложку и некоторые другие опции. [ncomp14.GIF (9321 bytes)] И, тем не менее, работать с таблицами в Composer неудобно. Основная проблема состоит в том, что вы не можете без применения специальных средств сделать незаполненные ячейки таблицы различными по ширине и высоте. [ncomp15.GIF (12529 bytes)] Если вы желаете добавить (удалить) строки (столбцы) таблицы в Composer, действуйте по указанному сценарию: правый клик в нужном месте таблицы > Insert (Delete) > Row (Column). Можно и добавить или удалить отдельную секцию (Cell). [ncomp16.GIF (2042 bytes)] Дополнительную информацию о программе можно найти в печатных изданиях: [2.4], [2.18], [2.24]. | |
| Категория: Интернет Ваш выход! Евгений Финкель | Добавил: svv (16.08.2008) | |
| Просмотров: 813 |