|
|||||||||||||||||||
|
Web-дизайн: тонкости, хитрости и секретыWeb-страницы можно создавать несколькими способами - с нуля или на основе существующего шаблона. В последнем случае, впрочем как и в первом, у вас могут быть проблемы при тестировании созданного документа, так как сгенерированным ссылкам свойственно ошибаться. Решить эту проблему может уже не редактор, а обыкновенный обозреватель WWW. Eсли у вас имеется коллекция картинок, фонов, маркеров и разделителей, то создание Web-страниц -- весьма увлекательное занятие. Кроме всего этого, помните, что вам обязательно понадобится софт для преобразования обычных текстовых файлов в файлы формата HyperText Markup Language. Хороший редактор Web-страниц должен, с одной стороны, позволять редактировать код HTML, а с другой - просматривать произведенные таким образом изменения в режиме непосредственного просмотра. Если вы начинаете с нуля, то вы должны ввести или импортировать текст в документ, отформатировать абзацы, разместить картинки. Все картинки и текстовые файлы сохраняются в одном каталоге. Затем все это хозяйство отправляется к вашему поставщику Internet на его винчестер.
Гипертекстовый документПод гипертекстовым документом понимают документ, содержащий так называемые ссылки на другой документ. Реализовано все это через протокол передачи гипертекста HTTP (HyperText Transfer Protocol). Информация в документах Web может быть найдена по ключевым словам. Это означает, что каждый обозреватель Web содержит определенные ссылки, через которые образуются так называемые гиперсвязи, позволяющие миллионам пользователей Internet вести поиск информации по всему миру. Гипертекстовые документы создаются на базе языка HTML (HyperText Markup Language). Этот язык весьма прост, управляющие коды его, которые, собственно, и компилируются обозревателем для отображения на экране, состоят из текста ASCII. Ссылки, списки, заголовки, картинки и формы называются элементами языка HTML.
Универсальный локатор ресурсаWeb может открывать доступ к другим ресурсам Internet, например к электронной почте, FTP, Gopher, WAIS или конференциям Usenet. Одно из таких средств серфинга по Web обеспечивает встроенный в Windows 98 обозреватель Microsoft Internet Explorer 4.0. Документ в Internet ищется по так называемому адресу URL (Uniform Resource Locator), синтаксис которого следующий: protocol://hostport/path hostport -- адрес сервера с соответствующим номером порта. Этот параметр отображает так называемую машинную адресацию. Машинная адресация может быть числовой или буквенной. path -- путь. Вместо аргумента protocol может стоять: http -- любая гипертекстовая информация. ftp -- протокол передачи файлов. telnet -- терминальный доступ. gopher -- "предшественник" WWW. afs -- файловая система Internet. news -- конференции Usenet. wais -- система баз данных Internet. Домены Internet Все узлы Web классифицированы Международным центром сетевой информации (NIC) на шесть доменов: com -- коммерческие предприятия, например, провайдеры Internet edu -- образовательные учреждения, колледжи и университеты net -- действующие сети, например, Network Information Center org -- непрофессиональные организации mil -- военные сети gov -- правительственные учреждения, например, whitehouse.gov Кроме этого, все доменные имена имеют указатели на страну, в которой расположен данный узел. Например, доменные имена .uk, .jp и .us представляют соответственно Великобританию, Японию и США.
HTMLВ настоящее время существует масса редакторов Web-страниц, которые не требуют от вас знаний основ HTML. Но для того чтобы уметь профессионально подготавливать гипертекстовые документы, вы должны знать их внутреннее строение, то есть код документа HTML. HTML позволяет вам формировать различную гипертекстовую информацию на основе структурированных документов. Обозреватель определяет сформированные ссылки и, через протокол передачи гипертекста HTTP, открывает доступ к вашему документу другим пользователям Internet. Разумеется, для успешной реализации всего этого необходим софт, полностью совместимый с WWW и поддерживающий HTML.
Описание HTMLHTML-документ -- это обычный текстовой файл. Используя, например, обозреватель Netscape Navigator вы можете просмотреть результат вашей работы, просто загрузив в него созданный на основе синтаксиса HTML текстовой файл. Гипертекстовый язык предоставляет только информацию для чтения. Это означает, что редактировать Web-страницы может лишь тот, кто их создал, а не простой пользователь Сети сетей. Впрочем, если забежать немного вперед, можно сказать, что используя общий шлюзовой интерфейс (CGI) можно добавлять некоторые операторы HTML в сгенерированную страницу.
ТэгиСамый смак гипертекстового языка -- это ссылки. В мировой паутине вы просто нажимаете на ссылку и мгновенно оказываетесь в другой точке земного шара на выбранной вами страничке. По традиции всех классических руководств по HTML мы приводим самый простой гипертекстовый документ. <TITLE>Пример простого HTML документа</TITLE> <H1>Здесь размещен заголовок первого уровня</H1> Добро пожаловать в Internet! Первый и последний параграф.<P> В этом примере мы использовали следующие термины гипертекста (так называемые тэги): <TITLE> -- тэг, использующийся для определения заголовка. <H1> -- тэг заголовка. <P> -- тэг метки параграфа. В языке описания гипертекстовых документов все тэги парные. В конечном тэге присутствует слэш, который сообщает обозревателю о завершении. Но! Существует одно исключение из этого правила пар: В природе не существует тэга </P>. Не все тэги совместимы с обозревателями. Если обозреватель не понимает тэг, то он его просто пропускает. Итак, документ HTML это заголовок: <html> <head> Заголовок </head> <body> ... и текст ... </body> с названием: <head> <title> Название </title> </head> Название документа Это не правило, и даже не закон, это факт: Любой документ HTML имеет название. По названию вашего документа HTML другие обозреватели могут найти информацию. Место для названия всегда определено -- оно находится вверху экрана, и отдельно от содержимого документа. Максимальная длина названия - 40 символов.
ФорматированиеФорматирование может быть непосредственным или авторским. Если вы используете тэг <pre>, то форматирование считается авторским: <body> <pre> Следующие тэги присущи непосредственному форматированию: <p> -- параграф. <hr> -- горизонтальная линия. <br> -- обрыв строки. Заголовки и подзаголовки Язык HTML позволяет вам работать с шестью уровнями заголовков. Первый заголовок - самый главный. На него обращается особое внимание. Остальные заголовки могут быть оформлены, например, жирным шрифтом или прописными буквами. В HTML первый заголовок обозначается как <H1>: <Hn>Текст</Hn> Под n понимается уровень заголовка, то есть числа 1, 2, 3, 4, 5 или 6. В HTML первый заголовок может совпадать с названием документа.
СпискиСписки подразделяются на ненумерованные: <ul> <li> Элемент списка </ul> нумерованные: <ol> <li> Элемент списка </ol> c описаниями: <DL> <DT> Собака (элемент) <DD> Друг человека (описание элемента) </DL> и вложенные: <UL> <LI> Примус <OL> <LI> Другой примус ... </OL> <LI> ... </UL> Выделение текстаТекст в документе HTML может быть выделен одним из следующих способов: <cite> -- цитата </cite> <code> -- программный код </code> <dfn> -- определение </dfn> <em> -- логический акцент </em> <kbd> -- ввод с клавиатуры </kbd> <samp> -- сообщения компьютера </samp> <strong> -- сильный акцент </strong> <var> -- переменные </var>
Один большой параграфВ HTML разбиение на строки не принципиально. Это означает, что вы можете разбить строки вашего документа в любом его месте. Связано это с тем, что в гипертекстовом документе идущие подряд отбивки превращаются в одну. Но! Если отбивка сделана после тэга <P>, то она учитывается. Если какой-нибудь тэг <H> игнорируется, то отбивка также учитывается. В остальных случаях обозреватель будет пропускать отбивки.
СсылкиHTML позволяет вам связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Для этого используется тэг <A>. Помните, что после буквы A должен стоять пробел. Чтобы сформировать ссылку: n наберите <A n введите HREF="filename"> n наберите после > текст гипертекстовой ссылки n наберите тэг </A> Один из вариантов гипертекстовой ссылки может выглядеть так: <A HREF="BobAnapa.htm">Bob</A> Здесь слово Bob ссылается на документ BobAnapa.htm, образуя гипертекстовую ссылку. Если документ, формирующий ссылку, находится в другой директории, то подобная ссылка называется относительной: <A HREF="BobAnapa/ВobMoscow.htm">Bob</A> Если вы хотите указать полное имя файла, то вам необходимо использовать синтаксис UNIX. Ссылки можно формировать на основе так называемого универсального локатора ресурса, то есть используя следующий синтаксис: protocol: //hostport/path Предварительное форматирование текста Тэг <PRE> позволяет сформировать текст, оформленный моноширинным шрифтом. Используйте этот тэг для оформления листингов программ.
Расширенные цитатыТэг <BLOCKQUOTE> позволяет вам включить цитату в уединенный объект. Адрес Тэг <ADDRESS> позволяет сформировать информацию об авторе документа HTML.
Куча слов по поводу форматирования символовВ HTML слова и строки кодируются логическими и физическими стилями. Физические стили форматируют текст. Логические стили форматируют через определение в гипертекстовом документе некоторого значения. Это в частности означает, что тэг заголовка первого уровня не содержит информации о размере шрифта и гарнитуре. Поэтому, чтобы изменить символьное форматирование заголовка вы должны модифицировать заголовок первого уровня. Через логические (в том числе и символьные) тэги вы можете сформировать согласованный гипертекстовый документ, то есть определить заголовок первого уровня в качестве только <H1> (без информации о гарнитуре шрифта и его кегле).
Логические стилиНиже мы представляем примеры логических стилей документа HTML. <DFN> Определить слово. Как правило, курсив. <EM> Усилить акцент. Как правило, курсив. <CITE> Заголовок чего-то большого и хорошего. Курсив. <CODE> Компьютерный код. Моноширинный шрифт. <KBD> Текст, введенный с клавиатуры. Моноширинный жирный шрифт. <SAMP> Сообщение программы. Моноширинный шрифт. <STRONG> Ну очень важные участки. Жирный шрифт. <VAR> Замена переменной на число. Курсив. Физические стили Гипертекстовый документ может быть оформлен с использованием следующих стилей: <b>Полужирный <i>Курсив <TT> Моноширинный
Специальные символыСимволы, которые не могут быть введены в текст документа непосредственно через клавиатуру называются специальными символами. Для таких символов существуют особые тэги. Четыре символа -- знак меньше <, знак больше >, амперсанд & и двойные кавычки " имеют специальное значение внутри HTML и следовательно не могут быть использованы в тексте в своем обычном значении. Скобки используются для обозначения начала и конца HTML тэгов, а амперсанд используется для обозначения так называемой escape-последовательности. Для использования одного из этих символов введите одну из следующих escape-последовательностей: < Знак меньше. > Знак больше. & Амперсанд. " Кавычки.
Принудительный перевод строкиТэг <BR> переводит только одну строку, то есть без дополнительного пробела.
Горизонтальные разделителиТэг <HR> формирует горизонтальную линию по всей ширине окна.
Встроенные изображенияВы можете встраивать в ваш документ картинки. Синтаксис встроенной картинки следующий: <IMG SRC=image_URL> Здесь image_URL есть указатель на файл картинки, синтаксис которого совпадает с синтаксисом ссылки HTML.
ЗвуковоспроизведениеДля того, чтобы вставить в вашу страничку звуковой файл, например, midi-файл, используйте следующую конструкцию: <EMBED SRC="bob1.mid" WIDTH="140" HEIGHT="50" ALIGN="MIDDLE" BORDER="0" AUTOSTART=TRUE> Это одна строка. В этом тэге были использованы следующие параметры: WIDTH Параметр, определяющий ширину midi-плеера. HEIGHT Параметр, определяющий высоту midi-плеера. BORDER Ширина рамки midi-плеера. AUTOSTART Запустить midi-плеер сразу после того, как загрузится документ HTML.
Распределение ссылок по картинкеИспользуя технологию распределения ссылок по картинке, вы можете, например, создать графическое меню из одной большой картинки таким образом, чтобы каждый элемент системы меню содержал определенный URL. Распределение ссылок по картинке описывается в тэге IMG следующим параметром: <IMG SRC="url" USEMAP="url#map_name"> Здесь аргумент USEMAP задает расположение схемы распределения map_name в URL. Если URL не указан, то поиск схемы map_name ведется в текущем документе. Код схемы может выглядеть так: <MAP NAME="map_name"> <AREA [SHAPE=" shape "] COORDS="x,y,..." [HREF=" reference "] [NOHREF]> </MAP> Здесь были использованы следующие тэги: <AREA> Определить для данного URL область на картинке посредством параметров SHAPE и COORDS. SHAPE Форма области. Вы можете выделить область на картинке так: n default -- стандартная форма n rect -- прямоугольник n circle -- круг n poly -- многоугольник произвольной формы COORDS Координаты области. Задаются в пикселах. Отсчет начинается с нуля. Круг имеет три координаты, прямоугольник - четыре, а для многоугольника вы должны описать каждый его угол в двух координатах. Например, область, имеющая размеры 50 на 50 пикселов, описывается так: <AREA COORDS="0,0,54,54" ...> HREF="url" Определить ссылку на схеме, то есть вписать URL. NOHREF Указать, что в данной области картинки отсутствует ссылка. Этот параметр работает всегда, когда не определен параметр HREF. </MAP> Закончить описание схемы распределения ссылок по картинке. Общий шлюзовой интерфейс и формы HTML Общий шлюзовой интерфейс (Common Gateway Interface) позволяет работать с данными сервера Web в интерактивном режиме. Сервер Web через CGI запускает поисковую программу и пересылает обработанные данные назад. Сама программа CGI хранится в каталоге CGI-BIN. Это означает, что файл из каталога CGI-BIN всегда исполняемый файл. Если CGI- программа, например, взаимодействует с системой управления базой данных, то пользователь может получать некоторую интересующую его информацию в интерактивном режиме. Это тривиально, но факт: CGI-программы создаются посредством CGI. Код программы пишется, как правило, на языке описания сценариев Perl. Perl является интерпретируемым языком, интерпретатор которого соответствует операционной системе. Передача данных от сервера к программе CGI осуществляется сервером через командную строку и переменные окружения. Таким образом, сервер через общий шлюзовой интерфейс запускает программу CGI и пересылает ей вводимые пользователем данные. Сами данные вводятся через так называемые формы HTML. Форма представляет собой гипертекстовую страницу с одним или несколькими полями данных и специальной кнопкой для передачи введенной информации. Как и код любого гипертекстового документа, код формы начинается с тэга FORM ACTION = /SGI-BIN/EXAMPLE.PL и заканчивается тэгом /FORM. ACTION Аргумент ACTION -- это URL программы CGI, то есть /SGI-BIN/EXAMPLE.PL. METHOD Метод, используемый для запроса данных. Этот параметр задает режим передачи данных из формы в программу CGI. Основные режимы передачи - GET, HEAD и POST. Программа CGI должна поддерживать один из этих режимов, иначе обработки данных не произойдет. В режиме GET данные входят через URL в строку запроса. Например, если программа обработки данных BOB.PL лежит в каталоге CGI-BIN, то запрос HTML пойдет на сервер через ACTION следующим образом: FORM ACTION=/CGI-BIN/BOB.PL METHOD=GET Теперь сервер знает, где находится программа BOB.PL, поэтому он ее запустит в режиме GET. Программы CGI получают данные от переменных окружения и посылают выходные данные через общий шлюзовой интерфейс обратно пользователю. Например, после ввода тэга A HREF=BOB.htm на сервер пойдет запрос GET/BOB.htm. Заголовок GET определяет получение документа BOB.htm в корневом каталоге сервера. Относительно аргумента POST CGI реализован в программах, поддерживающих Unix и некоторые приложения Windows. CGI для Windows реализуется лишь в том случае, если сервер Web способен декодировать данные тех форм HTML, которые пересылаются в режиме POST. Это можно сделать двумя способами: URL-Encoded. Данные формы пересылаются на сервер в виде HTML. Multipart Form Data. Данные формы пересылаются на сервер в виде MIME-сообщения. INPUT TYPE=TEXT Поместить в форму текстовое поле данных. NAME=NAME Определить имя текстового поля данных NAME. MXLENGTH=NUMBER Размер текстового поля данных. Вместо NUMBER вы можете ввести целое число. RADIO Определить кнопку переключения. NAME=PRODTYPE Определить логическое поле PRODTYPE. INPUT TYPE=CHECKBOX Определить флажок для протокола передачи. ACCEPT Метод, используемый для интерпретации пересылаемых файлов. Файлы могут пересылаться в виде ASCII или HTML. Количество заголовков ACCEPT соответствует типам данных MIME (Multipurpose Internet Mail Extensions). Заголовок ACCEPT: TYPE/SUB-TYPE {parameters} пересылается как значение параметра ACCEPT. Каждый тип данных имеет собственный параметр ACCEPT.
ФреймыТехнология фреймирования в HTML позволяет просматривать в одном окне обозревателя несколько гипертекстовых документов. Один фрейм отображает только один гипертекстовый документ. Создание фреймаСоздание фрейма осуществляется через тэг <FRAMESET>. Тэг <BODY> в этом случае не используется. Тэг </FRAMESET> заканчивает выполнение кода после тэга <FRAMESET>. Далее идет стандартное применение HTML. Описание фреймаТэг <FRAME SRC="Name1"> позволяет описать первый фрейм, т.е. присвоить имя гипертекстовому документу. Второй фрейм описывается тэгом <FRAME SRC="Name2" NAME="Main">. Если обозреватель не поддерживает фреймыЕсли обозреватель того или иного пользователя не поддержавает фреймы, то между тэгом <NOFRAMES> и тэгом </NOFRAMES> заносится текст, который распознает обозреватель. Свойства фреймовТэг <FRAMESET COL="N1, N2,..> позволяет определить количество фреймов и задать размер фреймов в процентах от размера окна обозревателя или зафиксировать эти размеры в пикселах. Тэг с большими возможностямиТэг <FRAME>, имеющий самое большое количество атрибутов, позволяет настроить свойства фрейма. Ниже описываются эти атрибуты. NAME= Имя фрейма. MARGINWIDTH= Горизонтальный отступ (от 1 до 6) между фреймом и его границей. MARGINHEIGHT= Вертикальный отступ (от 1 до 6) между фреймом и его границей. SCROLLING= Прокрутка фрейма. Податрибут SCROLLING=YES позволяет создать полосы прокрутки, SCROLLING=NO -- указывает обозревателя, что полосы прокрутки отсутствуют в данном фрейме, а податрибут SCROLLING=AUTO позволяет отображать полосы прокрутки в зависимости от свойств обозревателя. NORESIZE Фиксированный размер фрейма. SRC= Задать гипертекстовый документ для этого фрейма. TARGET=Name Открыть ссылку во фрейме с именем Name.
Создание web-страниц в Microsoft FrontPage ExpressMicrosoft FrontPage Express один из тех редакторов Web-страниц, которые не требуют от вас знаний основ HTML. Забудьте о программировании! Просто размечайте и оформляйте! В законченной среде разработки Web в режиме непосредственного отображения вы можете профессионально создавать web-документы и даже организовывать небольшие web-сервера. В Microsoft FrontPage Express вы можете подготавливать к публикации в Internet web-страницы, используя JavaScript, VB Script, ActiveX и даже выборки к вашим базам данных. Кроме этого, в Microsoft FrontPage Express встроены весьма неплохие графические эффекты, которые оживят ваш дизайн. Вы можете управлять созданным в среде Microsoft FrontPage Express web-сервером из локальной сети или используя удаленный доступ к основному компьютеру. Забудьте о контроле за ложными ссылками! В Microsoft FrontPage Express встроено средство, позволяющее автоматически фиксировать подобные ссылки. Вы можете: * создавать и сохранять web-страницы * сохранять web-страницы непосредственно в Web * загружать из Internet и редактировать web-страницы * использовать в оформлении вашей web-страницы подложки * просматривать и администрировать web-страницы * создавать сложный дизайн web-страниц * использовать готовые тэги HTML * использовать готовые изображения из комплекта поставки программы * использовать компоненты WebBot для придания вашей web-страничке динамики * использовать в оформлении web-страниц элементы управления ActiveX Если вы хотите стать профессионалом в области дизайна web-страниц, вам необходимо освоить некоторые специальные HTML-редакторы с полной поддержкой тэгов HTML.
Интерфейс пользователяMicrosoft FrontPage Express считается одним из лучших средств подготовки документов для их публикации Web. Вы просто создаете web-страницу в том виде, в каком она будет выглядеть в окне обозревателя. Ниже приведено краткое описание набора средств, с помощью которого вы можете взаимодействовать с редактором web-страниц Microsoft FrontPage Express. С помощью стрелок полос прокрутки или посредством клавиш PgUp и PgDn вы можете перемещать текущую страницу в вертикальном или горизонтальном направлении. Вверху экрана находятся панели инструментов, с помощью которых вы можете быстро выполнить то или иное действие. Доступ к командам редактора осуществляется через щелчок мышью на соответвующем имени меню.
Команды менюВ редакторе гипертекстовых документов Microsoft FrontPage Express все наборы команд и опций, использующиеся в процессе работы с Internet содержатся в: * меню Файл * меню Правка * меню Вид * меню Переход * меню Вставка * меню Формат * меню Сервис * меню Таблица * меню Окно * меню Справка
Панели инструментовРедактор Microsoft FrontPage Express содержит три панели инструментов. Каждая кнопка той или иной панели соответствует команде меню. Панель форматированияС помощью Панели форматирования вы можете форматировать абзацы, определять параграфу тот или иной шрифтовой стиль, раскрашивать текст и выравнивать параграфы. Панель редактированияС помощью Панели редактирования вы можете: * создавать, открывать и сохранять web-страницы * выводить на печать и предварительно просматривать web-публикации перед выводом на печать * выполнять операции копирования и вставки * создавать или изменять ссылки * вставлять компоненты WebBot, изображения, горизонтальные строки и таблицы * показывать или скрывать метки параграфа * возвратиться на одну страницу назад * перейти на одну страницу вперед * вызвать справочную систему редактора Microsoft FrontPage Express * прервать загрузку текущей страницы Панель формС помощь Панели форм вы можете создать поле формы из: * однострочного текстового поля * прокручиваемого текстового поля * флажка * кнопки-переключателя * простой кнопки Всплывающее менюВсплывающее меню позволяет более удобно обратиться к той или иной команде. Просто поместите курсор на интересующий элемент вашего документа и нажмите правую кнопку мыши. С помощью элементов всплывающего меню вы можете выполнять следующие команды и функции: * Вырезать (выполнить операцию удаления элемента и помещения его в буфер промежуточного хранения) * Копировать (поместить элемент в буфер промежуточного хранения) * Вставить (вставить элемент из буфера промежуточного хранения) * Свойства страницы (обратиться к диалоговому окну свойств Свойства страницы) * Свойства таблицы (обратиться к диалоговому окну свойств Свойства таблицы) * Свойства ячейки (обратиться к диалоговому окну Свойства ячейки) * Свойства абзаца (обратиться к диалоговому окну Свойства абзаца) * Свойства шрифта (обратиться к диалоговому окну Шрифт) * Свойства изображения (обратиться к диалоговому окну свойств Свойства изображения) * Проверка достоверности поля формы (обратиться к диалоговому окну Проверка достоверности текстового поля) * Свойства поля формы (обратиться к диалоговому окну Свойства прокручиваемого текстового поля) * Свойства компонента WebBot (обратиться к диалоговому окну Свойства компонента WebBot)
БуксировкаВы можете перемещать один или несколько элементов вашего документа из одного окна программы в другое, или между элементами основного окна программы, или из Проводника. Просто выделите тот или иной элемент и отбуксируйте его в нужное место редактируемого документа. При буксировке файлов изображений Microsoft FrontPage Express автоматически преобразует файлы формата BMP в формат JPEG.
Создание новой web-страницыСоздание новой web-страницы осуществляется через выбор команды Создать в меню Файл (вы также можете выбрать эту команду через комбинацию клавиш Ctrl+N). В появившемся диалоговом окне Новая страница просто выберите из списка Шаблон или мастер параметр Нормальная страница. Вы можете также создать web-страницу с помощью Мастера личной основной страницы или Мастера страниц форм. Для этого выберите из списка Шаблон или мастер небходимый параметр и далее следуйте указаниям Мастера страниц.
Сохранение web-страницыСохранение web-страницы осуществляется через выбор команды Сохранить в меню Файл (вы также можете выбрать эту команду через комбинацию клавиш Ctrl+S). В появившемся диалоговом окне введите название страницы. Если же вы хотите сохранить страницу в виде файла, нажмите кнопку Как файл и в появившемся диалоговом окне укажите имя файла вашего документа HTML. Если вы хотите сохранить страницу прямо в Web, определите ее местоположение.
Открытие файлаВыбранная команда Файл к Открыть открывает доступ к диалоговому окну Открыть файл, с помощью которого можно загрузить в программу: * файлы HTML * файлы HTML после предварительной обработки * текстовые файлы * шаблоны гипертекста * документы Microsoft Word 6.0, Microsoft Word 95 и Microsoft Word 97 * документы текстового процессора Windows Write * документы текстового процессора Windows Write * документы WordPerfect 5.x и WordPerfect 6.x книги Microsoft Excel Чтобы открыть файл нужно выбрать его имя из списка и нажать кнопку Открыть.
Выход из программыВыйти из редактора Microsoft FrontPage Express можно, выбрав команду меню Файл к Выход. Если документ, находящийся на экране был изменен, то Microsoft FrontPage Express выведет запрос о том, сохранять ли внесенные изменения. В качестве ответа можно воспользоваться кнопкой Да, Нет или Отмена.
Редактирование текста web-страницыMicrosoft FrontPage Express позволяет редактировать также, как вы это делаете в текстовых процессорах Windows. Ввод текста осуществляется через щелчок левой клавишей мыши в том месте вашего документа, где вы хотите ввести текст. Помните, что четыре символа -- знак меньше (<), знак больше (>), амперсанд (&) и двойные кавычки (") имеют специальное значение внутри HTML и следовательно не могут быть использованы в тексте вашего документа в своем обычном значении. Отмена и восстановление выполненной командыОтмена выполненной команды осуществляется через выбор команды Отменить в меню Правка. Microsoft FrontPage Express позволяет отменить только последнее выполненное действие. Например, если удален текст, а затем набран новый, то нельзя отменить удаление текста. Выбранная команда Правка к Восстановить восстанавливает последнее отмененное действие. Выделение словаЕсли вы хотите выбрать слово, дважды щелкните по нему левой клавишей мыши. Выделение строкиВыделение строки осуществляется простым щелчком левой клавишей мыши при нажатой клавише Alt в любом месте строки. Выделение параграфаВыделение параграфа осуществляется простым щелчком левой клавишей мыши при нажатых клавишах Alt и Ctrl в любом месте параграфа. Выделение всех элементов вашего документаКоманда Правка к Выделить все используется для выделения текстовых и графических элементов на текущей странице. Отображение абзацных метокОтображение абзацных меток осуществляется через выбор команды Маркеры форматов в меню Вид. Операции вырезания, копирования и вставкиВыбранная команда Правка к Вырезать удаляет активный элемент из документа Microsoft FrontPage Express и помещает его в буфер промежуточного хранения. Вы можете удалить из документа и поместить в буфер обмена любой выбранный текстовой или графический элемент как Microsoft FrontPage Express, так и приложения Windows. Команда Файл к Скопировать используется для вставки активного элемента в буфер промежуточного хранения. Вы можете поместить в буфер обмена любой выбранный текстовой или графический элемент как Microsoft FrontPage Express так и приложения Windows. Выбранная команда Правка к Вставить помещает копию элемента из буфера промежуточного хранения в документ Microsoft FrontPage Express. Вы можете поместить в документ Microsoft FrontPage Express текстовой или графический элемент из любого приложения Windows. Поиск и замена текстаВыбранная команда Правка к Заменить открывает доступ к встроенному в Microsoft FrontPage Express инструменту редактирования, который используется для поиска и замены символов (включая прописные и строчные буквы), целых слов или частей слов. Поиск и замена спецсимволов осуществляется так же, как поиск и замена простого текста -- достаточно ввести в поля данных Образец или Заменить на ключевые комбинации для специальных символов или ANSI (ASCII) коды символов. Вывод на печатьВыбранная команда Файл к Напечатать открывает доступ к диалоговому окну Печать, с помощью которого можно выбрать принтер для печати текущего документа, установить параметры работы этого принтера и вывести на печать текущий документ. Оперирование открытыми окнамиС помощью команд меню Окно вы можете: Рядом Расположить все окна без взаимного перекрытия по горизонтали. Каскадом Упорядочить все окна с перекрытием так, чтобы название каждого окна было видимо. Упорядочить значки Упорядочить пиктограммы минимизированных окон. Установив курсор мыши на кнопке со стрелкой и буксируя мышью один из указателей прокрутки, можно перемещать страницу до тех пор, пока в документе не покажется нужное место. Вертикальный указатель предназначен для передвижения страницы по вертикали, горизонтальный -- по горизонтали.
Доступ к системе оперативной подсказкиС помощью команд меню Справка можно получить доступ к системе оперативной подсказки редактора web-страниц Microsoft FrontPage Express
Стили форматированияВ языке описания гипертекстовых документов слова и строки кодируются логическими и физическими стилями. Поэтому в редакторе web-страниц Microsoft FrontPage Express доступны только два стиля оформления параграфов: Стили оформления символов (физические стили) влияют на выравнивание параграфов, тип, размер, гарнитуру и цвет шрифта. Стили оформления параграфов (логические стили) влияют на все параграфы выделенного текста. Эти виды стиля позволяют вести форматирование через указания заголовков того или иного уровня и игнорировать информацию о размере шрифта и гарнитуре. Поэтому, чтобы изменить форматирование заголовка, вы должны модифицировать заголовок первого уровня. Через стили оформления вы можете сформировать согласованный гипертекстовый документ, то есть определить заголовок первого уровня в качестве только <H1> (без информации о гарнитуре шрифта и его кегле).
Физические стилиФизические стили или стили оформления параграфов доступны через Панель форматирования или через команду Абзац меню Формат. Вы можете оформить доступным физическим стилем не только выбранный абзац, но и несколько выделенных абзацев. К каждому из этих стилей вы можете применить выравнивание по центру, по левому или по правому краю. Для этого в меню Формат выберите команду Абзац и в появившемся диалоговом окне Свойства абзаца обратитесь к списку Выравнивание абзаца. Просто определите точку вставки и выберите необходимый стиль абзаца из списка следующих стилей: АдресПодпись автора web-страницы. Обычно располагается в конце документа. Заголовки с 1 по 6 уровеньРазделение текста документа на разделы, каждый из которых оформлен текстом определенного размера. Маркированый списокСписок, оформленный маркерами. ОбычныйСтиль абзаца по умолчанию. Список определенийОформление глоссариев или других списков. Нумерованный списокИерархия с использованием цифр. Список каталоговСпециальный стиль для оформления списков файлов или каталогов. Список менюСпециальный стиль для оформления небольших параграфов. ФорматированныйСпециальный стиль для оформления листингов программ и другой технической документации.
Логические стилиMicrosoft FrontPage Express поддерживает следующие типы логических стилей: * Полужирный * Курсивный * Полужирный курсив * Машинописный шрифт * Верхний индекс * Нижний индекс * Подчеркнутый * Зачеркнутый Вы можете оформить доступным логическим стилем не только выбранный символ, но и несколько выделенных символов. Просто выделите текст, обратитесь к диалоговому окну Шрифт (доступ: Формат к Шрифт) и выберите необходимый атрибут шрифта.
Раскрашивание текстаВы можете оформить цветом не только выбранный символ, но и несколько выделенных символов. Просто выделите текст, обратитесь к диалоговому окну Шрифт (доступ: Формат к Шрифт) и выберите из списка Цвет понравившийся вам цвет шрифта.
Многоплатформенные шрифтыВ принципе с помощью Microsoft FrontPage Express вы можете оформлять свои web-страницы всеми доступными шрифтами вашей системы. С другой стороны, если вы хотите, чтобы вашу страницу могли просмотривать пользователи других операционных систем, вы должны использовать в оформлении так называемые многоплатформенные шрифты. К ним относятся следующие шрифты: * Arial * Courier * Times
Горизонтальные линииВы можете украсить дизайн вашей web-страницы горизонтальной линией. Для этого определите место в вашем документе, в котором должна быть линия, и выберите из меню Вставка команду Горизонтальная линия.
Просмотр и правка исходного кода HTMLMicrosoft FrontPage Express позволяет вам просмотреть текст исходного кода HTML и, в случае необходимости, произвести редактирование. Для этого выберите из меню Вид команду HTML.
Вставка в документ тэгов HTMLВы можете вставить в ваш документ любой тэг HTML, включая Java Script. Для этого выберите из меню Вид команду Разметка HTML, обратитесь к диалоговому окну Разметка HTML и поместите ваш тэг в поле данных Вставляемая метка HTML. Одновременно вы можете вставить только один тэг.
Дизайн web-страниц с помощью таблицМощнейшее средство HTML - таблицы - позволяют создавать достаточно сложный дизайн web-страницы, например, вы можете расположить текст вашего документа в нескольких колонках. Для того, чтобы разместить в вашем документе таблицу, определите точку вставки и обратитесь к диалоговому окну Добавить таблицу через команду Вставить таблицу меню Таблица. Опции диалогового окна Добавить таблицу позволяют: Размер строкиУказать количество строк таблицы. Размер колонкиУказать количество колонок таблицы. ВыравниваниеОпределить тип выравнивания элементов таблицы. Размер рамкиОпределить размер линий границ ячеек в пикселах (до 100 пикселей). Если размер рамки будет иметь нулевое значение, то линия границы таблицы отобразится пунктирами, а при просмотре документа в обозревателе станет невидимой. Промежуток между столбцамиОпределить расстояние между столбцами в пикселах. ШиринаУказать ширину таблицы в пикселах или в процентах от ширины основного окна соответствующего обозревателя. Независимо от того или иного обозревателя, таблица, ширина которой определена в пикселах, будет иметь постоянный размер. Таблица, ширина которой определена в процентах, будет подстраиваться к тому или иному обозревателю. Дополнительно Обратиться к диалоговому окну Дополнительные атрибуты, с помощью которого можно вставить в таблицу тэг HTML или сценарий Java. Как добавить в таблицу строку или столбецВ созданную таблицу вы можете добавить строку или столбец. Для этого выберите в таблице место вставки и обратитесь к диалоговому окну Вставить строки или столбцы (доступ: Таблица к Вставить строки или столбцы). Совет: Ничто вам не мешает вставить таблицу в другую таблицу. Этим часто пользуются опытные дизайнеры web-страниц. Как добавить в таблицу ячейку В созданную таблицу вы можете добавить ячейку.
Для этого выберите в Как выделить таблицуС помощью меню Таблица вы можете выделить всю таблицу или только одну ячейку, строку или столбец, просто дав одну из следующих команд: Выделить таблицу, Выделить ячейку, Выделить строку, Выделить столбец. К выделенной таблице вы можете применить стандартные операции копирования и вставки. Как разбить ячейку на столбцы или строкиВы можете разбить ячейку на столбцы или строки с помощью диалогового окна Разбить ячейки (доступ: Таблица к Разбить ячейки). В поле данных Число колонок определите количество столбцов вашей новой ячейки, а в поле данных Число строк укажите количество строк. Свойства таблицыCозданной таблице вы можете назначить те или иные свойства (ширина линии границы, поля и отступы ячеек, ширина, цвет). Для этого в меню Таблица выберите команду Свойства таблицы и обратитесь к диалоговому окну Свойства таблицы. Опции диалогового окна Свойства таблицы позволяют: ВыравниваниеОпределить тип выравнивания элементов таблицы. Размер рамкиОпределить размер линий границ ячеек в пикселах (до 100 пикселей). Если размер рамки будет иметь нулевое значение, то линия границы таблицы отобразится пунктирами, а при просмотре документа в обозревателе станет невидимой. Заполнение ячеекОпределить максимальный размер заполнения ячейки в пикселах (до 100 пикселей). Промежуток между столбцамиОпределить расстояние между столбцами в пикселах. ШиринаУказать ширину таблицы в пикселах или в процентах от ширины основного окна соответствующего обозревателя. Независимо от того или иного обозревателя, таблица, ширина которой определена в пикселах будет иметь постоянный размер. Таблица, ширина которой определена в процентах, будет подстраиваться к тому или иному обозревателю. Специальный фонИспользовать в качестве фона таблицы картинку. Просто выберите флажок Использовать фоновое изображение и нажмите кнопку Обзор для поиска файла картинки в форматах GIF, JPG, BMP, TIF, WMF, RAS, EPS, PCX или TGA. Цвет фонаРаскрасить подложку таблицы. Дополнительные цветаВ этом разделе вы можете определить цвет для рамки вашей таблицы. Если вы выберите только параметр Граница, т.е. параметры Светлая и Темная рамка останутся используемыми по умолчанию, то через ниспадающий список цветов можно присвоить цвет всей рамке вашей таблице. Имеющие приоритет параметры Светлая и Темная рамка позволяют присвоить цвет верхней и нижней рамкам таблицы. Манипулирование ячейками таблицыВы можете назначить те или иные свойства не всей таблице, а только ее ячейкам. Для этого в меню Таблица выберите команду Свойства ячейки и обратитесь к диалоговому окну Свойства ячейки. Опции диалогового окна Свойства ячейки позволяют: Выравнивание по горизонталиОпределить горизонтальную выключку элементов таблицы (по горизонтали, влево и вправо). Вертикальное выравниваниеОпределить вертикальную выключку элементов таблицы (сверху, снизу и посередине). Ячейка с заголовкомПрисвоить выбранной ячейке таблицы заголовок. Без разбиенияНе допускать переноса текста ячейки на следующую строку. Минимальная ширинаУказать минимальную ширину ячейки в пикселах или в процентах от ширины таблицы. Ячейка, ширина которой определена в процентах, будет подстраиваться к тому или иному обозревателю. Специальный фонИспользовать в качестве фона ячейки картинку. Просто выберите флажок Использовать фоновое изображение и нажмите кнопку Обзор для поиска файла картинки в форматах GIF, JPG, BMP, TIF, WMF, RAS, EPS, PCX или TGA. Цвет фонаРаскрасить подложку ячейки. Дополнительные цветаВ этом разделе вы можете определить цвет для рамки ячейки. Если вы выберите только параметр Граница, т.е. параметры Светлая и Темная рамка останутся используемыми по умолчанию, то через ниспадающий список цветов можно присвоить цвет всей рамке ячейки. Имеющие приоритет параметры Светлая и Темная рамка позволяют присвоить цвет верхней и нижней рамкам ячейки.
Дизайн web-страниц с использованием графики Редактор web-страниц Microsoft FrontPage Express
поддерживает графические изображения двумя форматами GIF (CompuServe
Graphics Interchange Format Расширение .GIF) и JPEG (Joint Photographic
Experts Group Расширение .JPG). Это означает, что любой файл формата
BMP, TIF, WMF, RAS, EPS, PCX и TGA при вставке в рабочую среду Microsoft
FrontPage Express будет преобразован в GIF-картинку. Несколько слов
о форматах GIF и JPEG. GIF-формат хорош тем, что он маленький и имеет
всего 256 цветов. Формат JPEG используется только для картинок, имеющих
более 256 цветов. С другой стороны, вы можете создать JPEG-файл с потерей
качества, но без потери количества цветов, это может значительно уменьшить
размер файла. Поэтому, если вы хотите иметь хорошую картинку, просто
преобразуйте ее в формат JPG. Вы можете поместить в Microsoft FrontPage
Express изображение посредством выбора из меню Вставка команды Изображение.
Изображение Microsoft FrontPage Express может быть помещено в любое
место вашего документа, определенное точкой вставки. Просто поместите
точку вставки в нужное место, выберите через диалоговое окно Изображение
(доступ: Вставка к Изображение) имя графического файла и нажмите кнопку
OK. Вы можете помещать в документ Microsoft FrontPage Express только
растровые (двоичные отображения) картинки. Растровые картинки строятся
из отдельных точек и хранятся в виде групп точек, а экран представляется
в виде прямоугольного массива точек, компьютеру указывается цвет каждого
элемента изображения. Если документ с помещенной картинкой был сохранен,
а затем картинка подверглась редактированию в какой-либо программе,
то Microsoft FrontPage Express не внесет эти изменения в ваш документ.
Если вы переместите файл изображения в другую папку, то само изображение
не отобразится в вашем документе. Помните, что ваше изображение должно
храниться в том же каталоге, в каком находится файл исходного документа. Библиотека рисунков Microsoft FrontPage ExpressС помощью вкладки Картинки диалогового окна Изображение вы можете воспользоваться библиотекой рисунков Microsoft FrontPage Express. Альтернативное отображение картинок Microsoft FrontPage Express отображает изображения
посредством заменяющего текста и так называемой превью-картинки. Превью-картинка
имеет низкое разрешение (при загрузке исходного изображения сначало
проявится изображение с низким разрешением), а заменяющий текст используется
при просмотре web-страниц в текстовом режиме. Как присвоить изображению ссылкуВы можете присвоить помещенной в рабочую среду Microsoft FrontPage Express картинке любую ссылку. Для этого выберите картинку, обратитесь к вкладке Общие диалогового окна Свойства изображения (доступ: Правка к Свойства изображения) и с помощью кнопки Обзор раздела Ссылка по умолчанию выберите документ HTML, на который должен быть сделан переход. Позиционирование изображенийВы можете позиционировать изображениями, помещенными в рабочую среду Microsoft FrontPage Express. Для этого выберите изображение и обратитесь к вкладке Внешний вид диалогового окна Свойства изображения (доступ: Правка к Свойства изображения к Внешний вид). С помощью ниспадающего списка Выравнивание укажите тип позиционирования вашего изображения относительно страницы. С помощью опции Интервал по горизонтали вы можете сместить выбранное изображение относительно страницы по горизонтали. Параметр смещения одновременно воздействует на правую и левую части выбранного изображения. С помощью опции Интервал по вертикали вы можете сместить выбранное изображение относительно страницы по вертикали. Параметр смещения одновременно воздействует на верхнюю и нижнюю части выбранного изображения. Основные свойства web-страницыСвойства созданной страницы представлены диалоговым окном Свойства страницы (доступ: Файл к Свойства страницы). ПапкаУкажите путь к папке, в которой хранятся все файлы вашей web-страницы. ЗаголовокТекст, который вы впишите в это поле данных отобразится в заголовке окна обозревателя. Практически все поисковые машины Internet начинают сканирование web-страниц с заголовка.
Как озвучить web-страницуВы можете озвучить вашу web-страницу, просто поместив в нее файлы звуков WAV, AIFF, AU MIDI. Для этого определите точку вставки и обратитесь к разделу Фоновый звук вкладки Общие диалогового окна Свойства страницы (доступ: Файл к Свойства страницы). С помощью кнопки Обзор выберите звуковой файл на вашем диске. Если вы хотите, чтобы ваш звук все время играл в окне обозревателя, поставьте флажок Непрерывно. Если же вы хотите, чтобы ваш звук воспроизводился в течение определенного цикла, снимите флажок Непрерывно и укажите количество циклов воспроизведения с помощью счетчика Цикл. Кодирование web-страницС помощью Microsoft FrontPage Express вы можете изменить кодировку символов web-страницы. Для этого обратитесь к разделу Кодировка HTML вкладки Общие диалогового окна Свойства страницы (доступ: Файл к Свойства страницы). Отображение русских букв зависит от вашей кодировки. Поэтому для того, чтобы в обозревателе нормально отображались русские буквы, вам необходимо установить в систему многоязыковую поддержку и шрифты с соответствующей кодировкой, например KOI8. Как правило, при pаботе в Windows 98 для кириллизации используется кодиpовка CP1251, а на непонятных компьютерах с UNIX -- кодиpовка KOI-8. Стандарт KOI8 является кириллической кодовой таблицей, позволяющей вам обмениваться некоторыми сообщениями электронной почты и просматривать web-страницы. Для того, чтобы Windows 98 понимала KOI8, необходимо установить многоязыковую поддержку и шрифты с кодировкой KOI8. Помните, что российские серверы Web поддерживают русский язык либо через кодовую страницу 1251 (Windows 95), либо через таблицу КОИ-8 (Unix).
Как присвоить цвет или фон вашей web-странице
Следующая страница |
|
Web дизайн: Бурлаков Михаил
Web программирование: Бурлаков Михаил