Создание Web-страниц при помощи программы FrontPage. Примеры предлагаемых шаблонов Создаём шаблон для страниц в FrontPage

Перед тем, как начать работать во FrontPage, рекомендую Вам создать папку специально для Вашего сайта. Ее можно назвать «сайт», «мой сайт», «мой супер-пупер сайт», или, если Вы предпочитаете английский, «my site», «site».

В Интернете файлы с русскими названиями, увы, не работают (но это не значит, что они не будут работать на Вашем компьютере), поэтому я, по давно выработанной привычке, буду использовать по умолчанию папку site . Вы тоже можете начать вырабатывать в себе эту привычку, но это уже только по Вашему желанию 🙂

Разместить созданную папку можно в любом месте, на диске C, в «Моих документах», на рабочем столе… в принципе, это не имеет значения, главное, чтобы Вам было удобно с ней работать .

Правда, не советую Вам создавать папку прямо на рабочем столе. Путь к ней (его можно посмотреть в свойствах папки, или в самой папке, он указан в строке «адрес»), в таком случае, будет очень длинный. Например: «C:Documents and SettingsUsersUser001рабочий столsite». Правда, он может быть и коротким, например: «C:WINDOWSРабочий столsite». Все зависит от настроек Вашего компьютера.

Если путь все же получается длинным, то Вы можете создать папку для сайта на диске C (или D), тогда ее путь будет значительно короче: «C:site». А для того, чтобы открывать папку можно было быстро и просто, к ней нужно создать ярлык и поместить его в любое удобное для Вас место, например, на тот же рабочий стол.

Зачем заботиться о размере пути к папке? На качество создания сайта это никак не повлияет, но я на собственном опыте убедилась, что работать с папками, путь к которым не очень длинный, значительно удобнее. В примере будет использован следующий путь к папке «C:Documents and Settingssite»

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

Средствами FrontPage создать сайт даже не очень опытному пользователю не должно составить труда. Например, можно выбрать уже готовый веб-узел, изменить стандартные данные на свои, что-то добавить, что-то удалить и все, сайт можно выкладывать в Интернет. Создать новый веб-узел, можно, выбрав Файл (File) | Создать (New). Справа от рабочего пространства откроется следующее окно:

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

Но я вообще-то не поддерживают такой способ создания сайта, так как FrontPage для готового веб-узла создает много ненужных папок. Да и вообще много всего ненужного.

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

И вот на этом пустом пространстве мы и начнем создавать первую страницу сайта, а точнее, ее шаблон.

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

Сейчас таблицы как средство создания каркаса понемногу устаревают, взамен им приходит верстка с помощью слоев . Но таблицы все еще остаются простым и эффективным способом форматирования страницы. Для начала это – в самый раз.

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

Итак, первый способ . В строке командного меню выберите команду Таблица (Table), а в выпадающем меню - пункт Вставить (Insert) со стрелкой. Подведите мышь к этой стрелке и перед вами откроется еще одно выпадающее меню. Выберите пункт Таблица (Table).

Первый способ создания таблицы во FrontPage- с помощью меню Таблица

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

Какие же параметры можно установить? В первой области Размер можно выбрать необходимое количество строк (rows) и колонок (columns).

В следующей области Положение (Layout) можно настроить:

• расположение таблицы на странице - для этого в поле Выравнивание (Aligment) нужно выбрать одно из следующих значений:

• По умолчанию (Default) - тогда таблица разместится по усмотрению браузера пользователя, скорее всего у левого края;
• Слева (Left);
• Справа (Right);
• По центру (Center);

• расстояние между границей ячейки и ее содержимым - для этого введите необходимое значение в поле Поля ячеек (Cell Padding);
• расстояние между ячейками таблицы - для этого достаточно ввести необходимое значение в поле Интервал ячеек (Cell Spasing);
• ширину таблицы - обратите внимание, если флажок Точная ширина (Specify width) снят, размер таблицы будет зависеть только от ее содержимого. Если же флажок стоит, то можно обозначить ширину в пикселах (in pixels) или в процентах (in percent). Скажу сразу, ширину для основной таблицы (которую мы сейчас и создаем), лучше делать в процентах, тогда она будет изменяться в зависимости от размеров окна пользователя.

В области Границы (Border) можно настроить:

• ширину границ таблицы - для этого нужно всего лишь ввести необходимое значение в поле Размер границ (Border size);
• цвет, светлую и темную стороны таблицы

В области Фон (Background) можно задать цвет для фона таблицы или выбрать фоновый рисунок.

Для примера возьмем настройки, которые я указала ранее. Выбираем ОК и смотрим на результат.

Отлично! Теперь давайте для сравнения попробуем использовать второй способ создания таблицы во FrontPage. На панели инструментов Стандартная (Standard) найдите значок Добавить таблицу (Insert Table) и нажмите на него. После этого откроется небольшой макет таблицы.

Быстрый способ создания таблицы - использование кнопки Добавить таблицу (Insert Table)

Удерживая нажатой левую кнопку мыши выделите нужное количество строк и колонок. Так, для примера, на рисунке выделены две строки и одна колонка. Если вы подведете мышку к правой или нижней границе макета, он расширится. После того, как вы отпустите кнопку мыши, моментально появится сама таблица.

Этот способ создания таблицы намного проще и быстрее, чем первый. Одно «но» — здесь нельзя предварительно указать параметры создаваемой таблицы. Поэтому, если вы соберетесь создать еще одну таблицу с помощью второго способа, менять ее параметры можно будет только после того, как вы ее создадите.

О том, как это сделать, я расскажу немного позже, а сейчас более наглядный, третий способ создания таблицы. Это - рисование таблицы мышью . Его мы использовать сейчас не будем, но если вам когда-нибудь понадобится создавать сложные таблицы, вы будете знать, как это делать.

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

Меню команды Таблица

На этот раз нам нужен пункт Нарисовать таблицу (Draw Table). Нажимаем. Откроется следующее небольшое окно.

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

Для начала убедитесь, что инструмент для рисования таблицы включен (при этом он должен отобразиться на более светлом фоне, чем остальные кнопки). Теперь, когда курсор попадет в область документа, он примет форму карандаша.

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

Теперь, при помощи того же карандаша, проведите линии, формирующие внутреннюю структуру таблицы.

Убрать лишние линии можно при помощи инструмента Ластик (Eraser). Воспользоваться им легко. На панели инструментов Таблица (Table) нажмите кнопку Ластик (Eraser). Затем подведите курсор мыши к линии, которую нужно стереть и проведите по ней. Стираемые линии окрасятся в красный цвет. Чтобы отключить режим ластика, нажмите на кнопку Ластик (Eraser) еще раз.

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

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

Но у нас только две строки! Неужели, придется начинать все заново? Нет, что Вы! Мы просто вставим еще одну строку. Сделать это можно несколькими способами.

Например, если у вас еще открыта панель инструментов Таблица (Table), новую строку можно добавить, нажав на кнопку Добавить строку (Insert row). Не забудьте перед этим поставить курсор на одну из строк таблицы. Новая строка появится перед строкой, на которой стоял курсор.

Следующий способ вставки строки тоже довольно прост. Для начала нужно всего лишь выделить одну из существующих строк, нажать на правую кнопку мыши и… Но, подождите, как же выделить строку? Здесь тоже нет ничего сложного. Просто подведите курсор мыши к строке, которую вы хотите выделить.

Затем дождитесь, когда он превратится в стрелочку и нажмите на нее.

Выделенная строка выглядит так:

И вот теперь, не снимая выделения, щелкните по выделенной строке правой кнопкой мыши. Перед вами откроется вложенное меню.

Из всех этих, несомненно полезных, пунктов, нам сейчас понадобится только один: Добавить строки (Insert row).

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

Следующий способ вставки новых строк в таблицу значительно удобнее. И сейчас вы сами поймете, почему. Установите курсор в строку над (под) которой вы собираетесь добавить новые строки. Затем обратитесь к нашему любимому пункту Таблица (Table), который находится в командной строке. В выпадающем меню выберете Вставка (Insert) | Строки или Колонки (Rows or Columns). Откроется следующее окно.

Видите, в нижней части окна можно выбрать расположение новой строки - над выделенной строкой (above) или под ней (below). Заметьте, при использовании первых двух способов такой выбор нам не был предоставлен. Определим количество строк, нажимаем на ОК и смотрим, что у нас получилось.

Теперь у нас три строки. Для всего нашлось место, осталось только определить, куда поместить структуру нашего сайта. Не забыли еще про нее? Сейчас мы рассмотрим самый простой способ поместить структуру на страницу - разместив ее во второй строке, рядом с «информационной» серединой.

Для этого создадим еще одну таблицу из двух колонок во второй строке. Как создавать новую таблицу, мы уже знаем. Причем мы знаем целых три способа, как сделать это! Какой будем использовать на этот раз?

Давайте сейчас используем первый, так как нам нужно с самого начала отрегулировать параметры таблицы. Путь к созданию таблицы: Таблица (Table) | Вставка (Insert) | Таблица (Table).

В открывшемся окне отмечаем одну строку, две колонки и ширину границ таблицы равной нулю. Саму ширину таблицы делаем 100% и нажимаем на ОК. Вся таблица теперь выглядит так:

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

Эта «невидимая» табличка нам нужна только для моделирования внешнего вида таблицы, поэтому мы и сделали ее «невидимой». Теперь в левую колонку нужно вставить еще одну таблицу. Количество строк должно быть равно количеству основных пунктов составленной вами структуры. Колонки делать не надо!

Листочек еще не потерялся? Тогда переносим названия всех основных страниц (разделов) в нашу табличку. Названия внутренних страниц (подразделов) туда включать не обязательно. Чтобы ввести названия страниц в таблицу, просто щелкните мышью в том месте, где будет располагаться текст и наберите его на клавиатуре.

Более подробно о вводе текста и изменения его внешнего вида, я расскажу тогда, когда мы будем наполнять сайт информацией.

А теперь, как и обещала, расскажу о том, как изменить параметры таблицы после ее создания. Помните, как мы выделяли строку таблицы? А теперь нам нужно выделить целую таблицу.

Если «вручную» выделить таблицу не получается, можно просто пройти путь Таблица (Table) | Выделить (Select) | Таблица (Table). Теперь, не снимая выделения, щелкните по таблице правой кнопкой мыши. Можно, кстати, вообще не выделять таблицу, но я уже писала, это очень полезный навык 🙂

Выскочит уже знакомое нам выпадающее меню. Только на этот раз нам понадобится пункт Свойства таблицы (Table Properties). При выборе этого пункта откроется окно, которое практически полностью повторяет окно вставки новой таблицы. В нем можно поменять существующие настройки на новые.

Кстати, в программе FrontPage рамку таблицы можно также сделать «двойной», состоящей из множества квадратиков, с тенью и т.д. Все это доступно в верхнем меню Формат (Format) | Границы и заливка (Borders and Shading)

В первой закладке - Рамки (Borders) можно поменять вид границ таблицы. Посмотрите на возможные результаты после изменения вида рамки таблицы.

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

Но, подождите, что же делать с нашим художеством, т.е. с созданными табличками? Все очень просто. Их нужно сохранить. Для этого в верхнем меню выберите Файл (File) | Сохранить как (Save as). Найдите на вашем компьютере папочку, в которую мы договорились складывать сайт и сохраните в ней ваш документ под именем index .

Почему именно index? Да просто потому что так всегда обозначают главную страницу сайта. А именно ее мы сейчас и делали. Если вы теперь, выйдя из программы FrontPage, откроете сохраненный вами документ, вы увидите, что он автоматически сохранился как index.htm . HTM - сокращенное от слова HTML, помните еще, что это такое?

Стоит запомнить, что форматы «htm» и «html» — это абсолютно разные вещи. Советую вам сразу же выбрать что-то одно, чтобы потом не возникало проблем. Если вы выбрали окончание «html», не забывайте прибавлять его к каждой сохраняемой странице, иначе она по умолчанию будет сохраняться как «htm»

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

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

Открытие сохраненного «index»

Сейчас мы будем открывать документ «index», который мы сохранили в папке для сайта в конце предыдущего дня. Способов сделать это существует несколько. Давайте рассмотрим каждый из них, чтобы потом Вы могли выбрать оптимальный для себя.

Итак, первый способ. Файл «index» по умолчанию является Интернет–файлом, так как имеет формат htm (html ). Поэтому если вы откроете его двойным щелчком, вы попадете в окно просмотра браузера.

Этот способ открытия «index» во FrontPage заключается в том, чтобы в верхней командной строке выбрать команду Файл (File), а в выпадающем меню — Править в Microsoft FrontPage (Edit with Microsoft FrontPage).

Если в меню Файл у Вас такого пункта нет, значит, FrontPage на компьютере не установлен в качестве редактора Интернет-страниц. Чтобы это исправить, нужно, во-первых, открыть саму программу FrontPage, и затем в командной строке выбрать Сервис | Параметры . Откроется следующее окно:

Чтобы нормально работать с сайтом, нам нужно, чтобы в области Редакторы находился FrontPage. Если его там нет, то нажмите на значок в верхнем правом углу и выберите там FrontPage (открыть как HTML) . Затем нажмите на кнопку Использовать по умолчанию .

Это был первый способ открытия файла во FrontPage, через окно браузера. Но логичнее будет этот путь сократить. Поэтому, чтобы не тратить время, можно, не открывая файл, нажать на него правой кнопкой мышки и в выпадающем меню выбрать Открыть с помощью… (Open with) и в предложенном списке найти программу FrontPage.

И последний, третий способ. Сначала нужно открыть саму программу FrontPage, а уже после этого открыть весь сайт, выбрав Файл (File) | Открыть веб-узел (Open web). Или, если Вы недавно уже открывали index , выбрать Последние файлы , а в выпадающем меню нужный файл.

Конечно, не так важно, каким именно способом вы откроете страницу «index» во FrontPage, главное, чтобы вы ее открыли 🙂 Поздравляю, еще один полезный навык приобретен!

С развитием Интернета появился протокол обмена информацией,протокол называется HTTP (HyperText Transfer Protocol – протокол передачи гипертекста).Вместе с этим протоколом появилась и служба World Wide Web (часто называемая WWW или просто Web ), которая подставляет собой обширную сеть серверов HTTP , передающих файлы через Интернет .

Основную часть этих файлов представляют собой Web-страницы – специальные файлы, написанные на языке HTML (HyperText Markup Language – язык разметки гипертекста). Web-страницы публикуются в Интернете путем размещения таких файлов на серверах HTTP (Web-узлах) . Содержание Web-страниц может быть разным и посвященным совершенно произвольным темам, но все они используют одну и тужу основу – язык HTML .
Большинство людей желающих создать свой собственный сайт или страничку, знакомы с языком HTML только понаслышке. Поэтому им на помощь может придти программа Microsoft FrontPage ,один из самых известных конструкторов сайтов.

FrontPage, входит в пакет приложений Microsoft Office , стал первым продуктом широкого использования для Internet , сочетающим в себе клиентскую и серверную части и обеспечивающим возможность разработки сайта в целом и установки его на большинство популярных серверов. FrontPage способен взять на себя всю необходимую работу по программированию. Однако FrontPage станет достаточно серьезным помощником и для профессиональных разработчиков, предпочитающих держать в руках полный контроль над творческим процессом.

Окно программы FrontPage 2003.

Программа FrontPage выпущена компанией Microsoft и выполнена в едином стиле продуктов, входящих в пакет Microsoft Office , поэтому внешний вид программы практически не отличается от текстового процессора Word .

В верхней части окна располагается строка меню и две панели инструментов: Стандартная и Форматирование . Включать или отключать отображение панелей инструментов позволяет меню Вид .
В левой части находится Панель представлений , при помощи которой можно переключать режимы документа.
Основную часть окна занимает рабочая область, в которой могут быть открыты одно или несколько окон, содержащих отдельные документы.
В нижней части окна располагается строка состояния , содержащая справочную информацию . Так же в нижней части окна находятся три кнопки просмотра документа.
Отображение панелей инструментов.
Для управления панелями инструментов во FrontPage можно воспользоваться теми же способами, как в Microsoft Word . А именно:
в меню Вид надо выбрать пункт Панели инструментов , а в открывшемся новом подменю - установить флажки напротив тех панелей инструментов, которые вам нужны; или щелкнуть правой кнопкой мыши по какой-либо панели управления (или по области рядом с ней) и точно так же воспользоваться контекстным меню.

FrontPage , как и другие приложения Microsoft Office , позволяет добавлять, удалять, менять местами пункты меню и кнопки на панелях инструментов. Также существует возможность создавать полностью свои панели.
Для этого надо:

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

Создание новой Web-страницы .

Если вы запустили FrontPage , значит, новая Web-страница у вас уже создана (при запуске FrontPage сразу открывается новая пустая Web-страница , готовая для размещения текста и любых других элементов).
Создать новую Web-страницу можно и другими способами:

С помощью кнопки Новая страница на Стандартной панели инструментов.
меню Файл выбрать подменю Создать , а затем – Страница или Web-узел ;
с помощью комбинаций Ctrl+N ;
с помощью контекстного меню (работает во всех режимах, кроме режимов Задачи и Отчеты ) - для этого внутри Списка папок данного Web ) надо щелкнуть правой кнопкой мыши и в появившемся контекстном меню выбрать пункт Создать  Страница .

Создание станиц при помощи мастера и шаблонов.

Как уже говорилось выше, если для создания новой страницы вы воспользовались меню Файл  Создать  Страница или Web-узел , то FrontPage предложит вам воспользоваться шаблоном для создания новой страницы.
Для этого он откроет диалоговое окно, внешний вид которого приведен ниже:

На вкладке Общие данного диалогового окна выводится перечень шаблонов FrontPage , доступных в настоящий момент. Выбрав любой из шаблонов, можно посмотреть его описание в поле Образец .
Создание FrontPage Web .
Microsoft FrontPage Web - это набор Web-страниц , файлов с изображениями и других компонентов, которые можно рассматривать как единое целое.
Если делать сайт во FrontPage , то для его хранения удобней всего использовать FrontPage Web .
самый главный плюс - это возможность переименовывать файлы, входящие в состав FrontPage Web .
Представьте себе, что перед публикацией вашего сайта в Интернет вы вдруг заметили, что пара файлов у вас названа русскими именами. - «Теперь по всем файлам придется лазить и ссылки ручками менять!» дуамете Вы.Вот тут-то и поможет FrontPage Web - вы можете покойно переименовать файлы, а FrontPage самостоятельно пройдется по всем другим файлам, входящим в FrontPage Web и переименует все ссылки на исправленный вами файл.
все остальные преимущества описывать не буду, но хочется сказать, что для использования всех возможностей FrontPage , то лучше использовать FrontPage Web .
Итак, чтобы создать новый FrontPage Web нажмите на стрелочку, расположенную слева от кнопки Новая страница на панели инструментов и в появившемся выпадающем меню выберите пункт Веб-узел…

Открытие Web-страниц.

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

Открыть уже существующую Web-страницу можно в любом из существующих режимов.

Из режима Page Views есть четыре способа открыть существующую страницу:

1 способ

Если вы работаете с FrontPage Web , то просто выберите нужный файл в Списке папок и дважды щелкните по нему мышью.

2 способ

В меню Файл выберите пункт Последние файлы . Из появившегося каскадного меню выберите нужный файл.

3 способ

С помощью диалогового окна Открытие файла: Файл  Открыть .

Предварительный просмотр.

Для того чтобы посмотреть, как ваша страница выглядит непосредственно в браузере можно воспользоваться вкладкой Просмотр в режиме редактирования Web-страницы . Но в данном случае может оказаться, что браузер FrontPage не вполне корректно отобразит некоторые элементы вашей страницы , поэтому лучше всего:
воспользоваться кнопочкой на панели инструментов
или в меню Файл выбрать пункт Предварительный просмот р в обозревателе.

Если вы воспользовались первым способом, то содержимое вашей страницы отобразиться во встроенном браузере FrontPage .
Если же вы воспользовались вторым способами, то FrontPage выведет диалоговое окно Просмотр в обозревателе…

Здесь можно:
Выбрать обозреватель, в котором вы хотите просмотреть свою Web-страницу . Как правило, первоначально здесь отображается браузер , который по умолчанию установлен на вашей машине.
Добавить любой другой обозреватель, для чего необходимо воспользоваться кнопкой Добавить .
Редактировать или удалить установленные обозреватели.
Установить размер экрана, на котором будет просматриваться ваша Web-страничка

Сохранение Web-страниц .

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

Удаление Web-страниц.

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

Существует три способа удаления Web-страницы .

1 способ

В панели Список папок выделите файл, который необходимо удалить и нажмите кнопку Delete на клавиатуре.

2 способ

В панели Список папок щелкните правой кнопкой мыши по файлу (или значку файла ), который необходимо удалить и в появившемся контекстном меню выберите пункт Удалить .

3 способ

В панели Список папок выделите файл , который необходимо удалить и затем выберите пункт Удалить в меню Правка .

Работа с текстом.

На первый взгляд, ввод текста во FrontPage ничем не отличается от ввода текста в любом текстовом редакторе (например, в Microsoft Word ).
Для того чтобы набрать текст, достаточно щелкнуть мышью в любом месте страницы, и курсор будет помещен в ближайшую точку, в которую можно ввести текст.
Набор прописных букв, редактирование текста (удаление символов, вставка текста и т.д.) производится точно также, как в Microsoft Word.
Есть только одно небольшое НО: при нажатии клавиши Enter во FrontPage осуществляется принудительный переход курсора на новую строку, при этом до и после абзаца ставятся фиксированные абзацные отступы.
Если вам не надо создавать абзацы, то для перехода на новую строку лучше всего использовать комбинацию клавиш Shift +Enter.

Работа с изображениями.

Графически форматы в Web .

Все компьютерные изображения, все форматы для их хранения (а, следовательно, и все программы для их обработки) делятся на два больших класса - векторные и растровые . Векторное изображение состоит из объектов - геометрических форм, составленных из прямых, дуг, окружностей и кривых Безье. Достоинств у векторной графики немало. С точки зрения дизайнера, самое главное ее достоинство состоит в том, что векторную графику можно «вертеть» как угодно, не боясь «протереть дырку» в изображении или потерять часть информации. Другое достоинство - небольшой объем файлов (в сравнении с растровыми изображениями) и независимость от разрешения устройств вывода (будь то принтер или экран монитора). Эти факторы сделали векторную графику вероятным кандидатом для использования в Internet . Правда стоит оговориться, что на сегодняшний момент векторная графика встречается не так уж часто, как хотелось бы.
Тем не менее, среди реально применяемых векторных форматов хотелось бы отметить формат Shockwave Flash фирмы Macromedia . Для просмотра этого формата в браузере нужен подключаемый модуль (plug-in ), бесплатно распространяемый фирмой Macromedia . На сегодняшний день существуют как сайты целиком и полностью созданные по этой технологии, так и сайты, используемые Flash-формат лишь частично.
Растровое представление графики базируется на понятии растра. Растр – это совокупность объектов (в данном случае пикселей), размещенных в одинаковые строки и столбцы. Т.е. растровый компьютерный файл можно рассматривать как набор маленьких цветных или серых квадратиков, образующих мозаику изображения. Т.к. размер этих квадратиков заведомо мал, то при просмотре растровой графики эти квадратики сливаются друг с другом, образуя непрерывную смену цветов.

Растровый формат хранения изображения имеет как свои преимущества, так и недостатки. Одним из больших плюсов растровой графики является возможность работы с полутонами, т.е. возможность передавать изображение точно также, как оно выглядит в жизни. А вот среди недостатков основной проблемой является размер файла. Естественно, чем больше пикселей отведено для формирования изображения , тем выше качество передаваемого изображения , но, тем самым больше будет и размер файла.
Если мы теперь вернемся к браузерам, то можно сказать следующее, что большинство браузеров без проблем могут отображать графические файлы четырех форматов (*.gif, *.jpg, *.png, *.bmp ), использовать из которых на сегодняшний момент лучше всего два - *.gif и *.jpg . Да и то после предварительной оптимизации.
Вставка изображений на Web-страницу .
Вставлять изображение на вашу Web-страницу можно несколькими способами:
1. Перетащить изображение из Windows Explorer (то есть прямо из проводника).
2. Перетащить изображение из Internet Explorer .
3. Перетащить файл с изображением с панели Список папок , прямо на страницу.
4. С помощью буфера обмена - скопировать изображение в буфер обмена из любой другой программы, а затем на странице вставить его из буфера обмена.
5. С помощью кнопки Добавить рисунок из файла на панели инструментов Стандартная .
6. С помощью меню Вставка  Рисунок.
Рассмотрим эти способы более подробно:
Способ 1
Windows Explorer (то есть прямо из проводника) надо:
во FrontPage
открыть окно проводника;
в окне проводника выделить файл с картинкой, которую вы хотите вставить на свою страницу;
левой клавишей мыши перетащить файл-картинку на свою Web-страницу картинка вставиться в то место, где на странице находился курсор вставки.
Способ 2
Для того чтобы перетащить изображение из Internet Explorer надо:
во FrontPage открыть страницу, на которую вы хотите добавить изображение;
в браузере откройте то изображение, которое вы хотите поместить на своей Web-странице браузера название файла должно оканчиваться на jpg, jpeg, gif );
левой клавишей мыши перетащите выделенную картинку на свою Web-страницу ;
Способ 3
Для того чтобы перетащить файл с изображением с панели Список папок, прямо на страницу надо:
во FrontPage открыть страницу, на которую вы хотите добавить изображение ;
выбрать необходимый файл с картинкой на панели Список папок ;
левой клавишей мыши перетащите выделенную картинку на свою Web-страничку ;
выбранная картинка вставиться в то место, где на странице находился курсор вставки.
Способ 4
Для того чтобы вставить изображение на свою Web-страницу с помощью буфера обмена, надо:
в том приложении, из которого вы хотите скопировать картинку, выделить изображение и при помощи клавиш Ctrl + C скопировать рисунок в буфер обмена;
на своей Web-странице вставить это изображение из буфера обмена при помощи клавиш Ctrl + V
Способ 5
Web-страницу вы решили воспользоваться кнопкой Добавить изображение из файла на панели инструментов Стандартная , то FrontPage откроет диалоговое окно Рисунок .
В данном диалоговом окне укажите тот файл с картинкой, который вы хотели бы добавить на свою Web-страницу и нажмите кнопку Вставить.

Способ 6
Если для вставки изображения на свою Web-страницу вы решили воспользоваться меню Вставка  Рисунок , то FrontPage предложит сделать вам дальнейший выбор:

Картинки … – выбор того пункта меню предоставляет вам возможность воспользоваться готовой библиотекой картинок.
Из файла … – выбор данного пункта меню предоставляет вам возможность самостоятельно указать местонахождение файла с картинкой, который вы хотите добавить на свою Web-страницу (использование этого пункта приведет к открытию диалогового окна Рисунок , работа с которым была описана выше).
Создать фото коллекцию … - при помощи этого пункта меню можно создать коллекцию изображений в определенном стиле. Для это в открывшемся окне Свойства коллекции фотографий при помощи кнопки Добавить на вкладке Рисунки выбрать изображения, а на вкладке Макет выбрать формат оформления.
Добавление файлов мультимедиа.

Помимо простой графики, как – изображения в форматах *.gif, *.jpg, *.png и т.д. FrontPage позволяет размещать на ваших Web-страницах файлы мультимедиа. К ним относятся: видеоклипы, звуки…

Для вставки видеоклипа надо в меню Вставка выбрать пункт Рисунок , а затем Видеозапись.. .

Откроется диалоговое окно Видео , в нем будут отображаться видеоклипы в формате *.avi, *.asf, *.ram, *.ra .

Добавить звук на Web-страницу можно на вкладке Общие диалогового окна Свойства страницы .

Работа с таблицами.

Таблица - одно из наиболее мощных инструментов используемых при создании сайтов.
Изначально таблицы применялись только для представления структурированных данных. Однако постепенно они превратились в мощное универсальное средство для компоновки Web-страниц.

Создание таблиц

Самый простой способ создания таблицы – использовать кнопку Добавить таблицу , расположенную на панели инструментов Стандартная.
Еще один способ – при помощи пункта меню Таблица  Вставить  Таблица .
А так же таблицу можно нарисовать и вставить при помощи буфера обмена.

Ввод данных и навигация по таблице.

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

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

Однако более удобно для перемещения между ячейками использовать комбинации клавиш:
Сочетания клавиш: Действие:

Tab в любом месте таблицы,кроме конца последней строки перейти в соседнюю ячейку и выделить ее содержимое
Tab в конце последней строки добавить новую строку в низ таблицы
Shift +Tab перейти в предыдущую ячейку и выделить ее содержимое
Enter начать новый абзац
Enter в начале первой ячейки добавить текст перед таблицей в начале документа

Создание и применение форм.

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

Давай познакомимся с тобой - пожалуйста, заполни следующие поля:
Твое имя:

Твоя фамилия:

Дата твоего рождения: год месяц число

Спасибо! А теперь - в путь!
1. Мала, а проворна.
Где бывает, там повелевает.
В шатер зайдет -
Богатыря перевернет.
Кто это?
Муха Блоха Капризный ребенок
2. Выпуча глаза сидит,
По-французски говорит,
По-блошьи прыгает,
По-человечьи плавает.
О ком идет речь?
Кот Лягушка Попугай

3. Чем дышит тюлень, нырнув под лед?

4. Почему плачут большие черепахи?

5. Какую одежду может и селедка носить?
Шубу Пальто Тельняшку
6. Кого называют «речной лошадью»?
Выдру Бегемота Крокодила

7. Какие птицы не высиживают птенцов?

8. Какие птицы не умеют летать?

Если вам необходимо выберать несколько ответов - нажмите и не отпускайте клавишу Ctrl и щелкайте левой клавишей мыши по нужному ответу

Но создание форм на самой страничке это только половина работы. Так как обязательно должна существовать программа, которая сможет обработать данные, введенные пользователем с помощью форм.
Такая программа может быть расположена на сервере; она может находиться в вашем Web-сайте в виде отдельного файла, а может быть просто прописана в коде html на вашей Web-страничке .
Именно она определяет - что же произойдет с той информацией, которую ввел пользователь:

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

В отношении форм существует несколько основных правил:

1. Каждая форма занимает определенный участок Web-страницы . На одной Web-страничке может быть расположена одна или несколько форм.
2. Внутри каждой формы должен размещаться, по крайней мере, один из элементов форм (хотя, как правило, их несколько).
3.Каждый элемент формы имеет имя и значение. Имя идентифицирует поле для ввода информации, а значение приравнивается к значению, выбранному пользователем.
4. Один из элементов формы (им может быть обычная кнопка или любой рисунок) должен выполнять функцию кнопки Отправить.

Создание форм во FrontPage .
Чтобы добавить форму на Web-страницу , надо:

Установить курсор в то место, где вы хотите вставить форму.
В меню Вставка выбрать пункт Форма , в открывшемся меню снова выбрать пункт Форма . Форма будет помещена на вашу Web-страницу - появиться область, помеченная пунктирной рамочкой, с двумя кнопками: Отправить и Сброс .
Пользуясь все тем же пунктом меню Вставка  Форма последовательно вставить необходимые вам элементы форм , выбирая их из раскрывающегося каскадного меню (при этом необходимо помнить, что все элементы формы вставляются внутри области формы, помеченной пунктирной рамочкой).
После того, как форма создана, остается только наполнить ее содержанием - элементами форм , текстом, изображениями, таблицами… (при этом размеры формы будут меняться автоматически).
Добавлять содержание форм можно обычным образом. Например, текст можно набирать, а можно вставлять из буфера обмена… Все действия с добавленными объектами аналогичны.
Однако создание формы - это только начало работы. После ее создания необходимо настроить свойства, как самой формы , так и ее элементов.

Настройка свойств формы.

Для обработки или сохранения данных, вводимых посетителями Web-странички , необходимо либо воспользоваться возможностями, предоставляемыми FrontPage Server Extensions , либо какой-нибудь другой программой, работающей на Web-сервере .
Но какую бы программу вы не выбрали, вам все равно придется настроить свойства формы и элементов в ней.
Чтобы открыть окно свойств формы, надо:
в меню Вставка выбрать пункт Форма , а затем -
или
вызвать контекстное меню к форме и в открывшемся контекстном меню выбрать пункт Свойства формы .
В результате откроется диалоговое окно Свойства формы .

1. В поле Сохранение результатов необходимо указать, что надо будет сделать с данными, введенными в форму . Вы можете выбрать следующие варианты:
o Отправка Имя файла - данные будут помещены в указанный файл на Web-сервере . Этот файл может быть Web-страницей , которая со временем будет становиться все длиннее и длиннее, или файлом данных, который потом можно будет обработать в Excel, Access или любой другой программой;
o Отправка Адрес почты - в этом случае каждый раз при нажатии посетителем Web-странички кнопки Отправить на форме будет генерироваться электронное сообщение, которое будет отправляться по указанному вами адресу. В этом сообщении будут содержаться все данные, которые были введены пользователем на Web-страничке.
o В базе данных - в этом случае данные формы будут отправлены в базу данных. База должна находиться на Web-сервере (или быть доступной для него).
2. В поле Свойства формы необходимо указать имя формы
Режимы просмотра во FrontPage .
FrontPage предлагает шесть различных режимов для просмотра содержимого Web-сайта:

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

Страница
В этом режиме осуществляется создание и редактирование Web-страниц. Здесь можно создавать пустые Web-страницы и страницы, базирующиеся на шаблонах, назначать страницам темы (набор стилей представления страницы на экране). В этом режимы можно добавлять и форматировать текст, оформлять страницы с использованием графических и видеоизображений (поддерживается преобразование ряда графических форматов в форматы *.gif, *.jpg и *.png ), добавлять к странице звуковое сопровождение, представлять информацию в таблицах, кадрах и формах и, наконец, создавать гиперссылки. Таков далеко не полный перечень возможностей FrontPage по редактированию содержимого Web-страниц .
Папки
В этом режиме можно просматривать структуру Web-узла (файлы и папки) и управлять ею аналогично тому, как вы это делаете в Windows , данный режим дает возможность получить более подробные сведения о файлах и папках, чем это предусмотрено в режиме просмотра Страница.
Отчеты
Предоставляет вашему вниманию более десятка отчетов, содержащих разнообразную информацию о Web-узле , открытом во FrontPage.
Переходы
Предназначен для просмотра иерархии сайта. В этом режиме можно управлять иерархией, перетаскивая прямоугольники (каждый из которых представляет определенную Web-страницу ).
Гиперссылки
Демонстрирует систему гиперссылок, которыми связаны между собой страницы Web-узла (а также систему гиперссылок на другие узлы), обеспечивает проверку их целостности и возможность изменения.
Задачи
Этот режим предназначен для управления задачами Web-узла (добавления, удаления, выполнения, установления приоритета выполнения, а также отслеживания состояния задач).

Скачать БЕСПЛАТНО FrontPage можно по следующей ссылке:

http://letitbit.net/download/28576.28615a37d4f2a575882748541adf3bf00/Microsoft_Office_FrontPage_2003.rar.html

Microsoft FrontPage 2003 включает средства для профессионального проектирования, разработки, работы с данными и публикации, необходимые для создания динамических веб-узлов.

FrontPage позволяет как разрабатывать web-сайты в режиме визуального конструктора, без редактирования HTML-кода, так и получать доступ к соответствующему коду, создаваемому во время работы.

Для FrontPage существует большое количество платных и бесплатных дополнительных модулей ( plug - ins ), расширяющих его возможности. Например, оптимизаторы графики Ulead SmartSaver и Ulead SmartSaver Pro встраиваются не только в Photoshop, но и в FrontPage .

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

FrontPage включает в себя шаблоны сайтов и шаблоны страниц. Инструмент Мастер сайтов на основе выбранного пользователем шаблона сайта формирует набор страниц с ссылками между ними. Пользователю остается заполнить страницы созданного шаблона сайта информацией. Шаблон страницы позволяет выбрать из базы шаблонов требуемый вид страницы и заполнить его информацией.

Главной особенностью FrontPage является то, что этот редактор работает в режиме WYSIWYG (What You See Is What You Get - что видишь – то и получишь), то есть позволяет создавать HTML-страницы в визуальном режиме. Для создания страниц пользователь использует те же приемы и навыки, что и при работе в Microsoft Word.. При этом необходимый код на языке HTML генерируется автоматически.

Веб-узел

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

Веб-обозреватель (browser, браузер) – программа, используемая для навигации и просмотра различных интернет-ресурсов. Веб-обозреватель считывает HTML-документ и форматирует его для представления пользователю. Наибольшее распространение получили браузеры Microsoft Internet Explorer, Netscape Navigator, Mozilla, Opera.

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

Веб-узел вначале разрабатывается на локальном компьютере, а затем публикуется в Интернет. Пользователь не сможет получить доступ ко многим функциям, пока узел не будет опубликован на сервере, где запущен пакет FrontPage Server Extensions.

Типы узлов

Рассмотрим типы узлов, которые можно подготавливать с помощью FrontPage 2003.

Имеется два вида узлов: дисковые узлы и серверные узлы. Дисковые узлы можно запускать на любом компьютере или даже с гибкого диска или компакт-диска. Дисковые узлы поддерживают только базовые функции HTML. Многие веб-компоненты, поддерживаемые программой FrontPage , не действуют на дисковом узле.

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

Большинство узлов обычно разрабатываются как дисковые узлы. Это означает, что они разрабатываются на локальном компьютере. Затем они публикуются на веб-сервере , либо внутри организации, либо на внешнем хостинге.

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

Для некоторых компонентов требуется, чтобы узел или веб-страница находились на веб-сервере , где запущен пакет Windows SharePoint Services компании Microsoft.

Другие общие веб-компоненты действуют только на серверном узле, размещенном на веб-сервере с комплектом серверных расширений FrontPage Server Extensions.

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

Возможности серверного администрирования доступны только для серверных узлов, размещенных на веб-серверах, где запущен пакет Windows SharePoint Services или FrontPage Server Extensions.

Чтобы отображать информацию баз данных, узел должен быть размещен на

Создание нового Веб-Узла во FrontPage.

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

Открывая FrontPage первый раз Мы видим примерно такое окно.

Итак. Переходим в "Файл"\"Создать"

После этого появляется панель с правой стороны на которой выбираем "Одностраничный Веб-Узел..."

В открывшемся окне необходимо выбрать тип создаваемого узла. Это делается во вкладке "Общие" . Так же необходимо ввести расположение и название узла. (название узла можно будет всегда изменить!)

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

После создания нового "Одностраничного Веб-Узла" у нас на экране появляется список файлов и папок, которые принадлежат этому веб-узлу.

Создание и сохранение страниц на Веб-Узле

Итак, Мы создали наш Веб-Узел и теперь будем его наполнять страницами.

Список страниц, которые мы создадим:

• Главная страница (Создаётся автоматически и имеет название index.htm)
• Об авторе
• Контакты (на этой странице будет форма отправки писем создателю сайта на его e-mail)
• Галерея (Создание галереи из изображений)
• Видео (страница с видео On-Line)
• Аудио (Страница с аудио On-Line)
• Поиск по сайту
• Дальнейшие пункты списка Вы можете добавлять сами при необходимости....

Создание новой страницы:

Нажмите кнопку "Создание новой обычной страницы"

Не наполняя её содержимым сохраняем её. Нажимаем "Файл"\"Сохранить как..."

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

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

В поле "Имя Файла" необходимо ввести название страницы, но на латинице, т.е. например "ob-avtore"

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

Таким же образом создаём все остальные страницы, которые мы запланировали.

Для изменения названия главной страницы, необходимо нажать на ней правой кнопкой мыши и выбрать "Свойства"

В открывшемся окне необходимо изменить параметр "Название" на то, что Вы хотите. Например - "Домашняя страница" или "Главная"

Теперь нам осталось создать динамический Веб-Шаблон, оформить визуально страницы, и наполнить их информацией.

Общая структура. Прикрепление шаблона к страницам.

Часть 1.

Для чего нужен динамический веб-шаблон. Если говорить коротко, то он предназначен для того, чтобы Вы, как администратор изменяли и дополняли одну страницу своего сайта, а при ваших действиях с этой страницей, изменялись и все остальные страницы, к которым прикреплена данная страница. Это коротко. Более подробно можно найти здесь . (сайт office.microsoft.com)

Переходим к созданию шаблона.

Для начала необходимо создать обычную страницу. Нажимаем на "Создание новой обычной страницы".

Теперь обратимся к общей структуре создания нашего сайта - как, и где будут располагаться элементы, и т.д.

Выбрав структуру, её необходимо где-то описать. Это можно сделать на обычном листе бумаги. Я же Вам передаю структуру в видео изображения ниже.

Итак, имея структуру нам необходимо перевести её в таблицы, чем и займемся.

Создаём таблицу - 1x1

На новой таблице нажимаем правой кнопкой мыши и выбираем "свойства таблицы."

В появившемся окне вводим параметры, как на рисунке:

· Выравнивание - по центру

· Задать ширину -100 процентов

· Поля ячеек - 0

· Интервал ячеек - 0

· Размер границы - 0

Нажимаем кнопку "ОК"

Эта таблица будет основой для нашей странице.

В этой таблице нам предстоит создание ещё нескольких таблиц.

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

Этой таблице задаем такие же параметры, как и предыдущей. Можно задать и другие, например ширина - 1024 точек, это надо делать, когда сайт пишется под определенное разрешение экрана.

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

Теперь необходимо задать точные размеры для ячейки с логотипом и для ячейки с поиском.

У меня заранее сделан логотип, и он имеет размеры - ширина - 300, высота - 186 точек. Его необходимо поместить в папку "Images" на Вашем "Веб-Узле"

Нажимаем правой кнопкой на первой ячейке, где должен располагаться логотип и выбираем "Свойства Ячейки"

Задаём параметры ячейки:

· Выравнивание по горизонтали - "По центру"

· Ширина - 300 точек

· Высота - 186 точек.

Нажимаем кнопку "Вставка"\ "Рисунок" \ "Из Файла..." и выбираем логотип:

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

"Свойства ячейки"

"Задать высоту" - 186 в точках.

Задавать размеры ширины для ячейки с поиском пока не будем, это мы сделаем, когда установим форму для поиска.

Добавьте ещё одну таблицу ниже той, что мы сделали для шапки. Размер таблицы 1x3

Вот, что должно получиться:

Этой таблице задайте такие же параметры, как и предыдущей:

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

Ниже создайте ещё одну таблицу с такими же параметрами. Эта таблица для "Низа сайта", там будут располагаться счетчики.

Примечание! Нижнюю таблицу не обязательно делать с тремя ячейками. Достаточно и одной. Для счетчиков все равно надо будет делать свою таблицу.

Выделите все ячейки всех таблиц, перейдите в "Свойства Ячейки" и задайте параметр "Выровнять по вертикали:" - "По верхнему краю"

Если текст в ячейках не выровняться по верхнему краю , то задайте для каждой ячейки в ручную этот параметр.

Для ячеек с поиском и дополнительным меню произвольно можно поставить ширину - 200 точек. Это позволит таблице держать точные размеры при написании текста в ячейках.

Теперь у нас должно получиться следующее:

Создание динамического веб-шаблона.

Сделать сайт из шаблона это достаточно лёгкая задача, но одно дело редактировать шаблон вручную используя текстовый редактор типа Блокнот, и совсем другое дело взять в руки такую программу как Microsoft FrontPage. Объясню детали для тех, кто до этого ни когда не сталкивался с подобного рода задачами Microsoft FrontPage просто необходимость, а не каприз, поскольку только с ним вы сможете решить подобную задачу без углублённых знаний html, css и подобных вещей…

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

Скачать Microsoft FrontPage 2003 вы можете по этой ссылке: http://depositfiles.com/files/81cgnrowa

Итак общий вид программы следующий:

Очень похож на обычный текстовый редактор Word…

Для начала работы распакуем архив с шаблоном в ту папку в которой будет ваш будущий сайт. Теперь откроем главную страницу шаблона как правило она называется index.htm или index.html это не важно, для этого в программе заходите в закладку Файл->Открыть или сочетанием клавиш Ctrl+O и находим папку с распакованным шаблоном.

В данной программе можно использовать 3 режима работы с сайтом:

Конструктор – это режим когда ты просто чертишь таблицы, забиваешь текст и вставляешь графику, ни какого кода ты не видишь и не влезаешь в подробности…

С разделением – этот вариант больше всего приемлем поскольку ты находишься в режиме конструктора и при этом видишь все изменения в html коде страницы, а так же можешь поправить текст если он некорректно вводится через режим конструктора, здесь хотелось бы ещё отметить один явный плюс, этот режим будет особенно полезен новичкам, поскольку они не просто тупо вставляют графику и пишут текст, а при этом наглядно видят, как изменяется код, что добавляется и соответственно обучается html.

Код – это соответственно тот режим при котором ты видишь перед собой только html код и не чего больше… Этот режим естественно больше подойдёт опытным пользователям.

Просмотр – а здесь ты будешь видеть как твой сайт, твоя страница будет смотреться в интернете…

Теперь пора перейти к правке вашего шаблона и превращению его в полноценный сайт.

Итак начнём с редактирования текста, здесь всё просто в окне Конструктор находим текст шаблона, который вы хотели бы заменить и просто выделяем его и пишем свой текст, он сам добавит ваш новый текст в html код. Для редактирования текста нам понадобится стандартная панель. Здесь есть маленькая панель в которой все основные функции, просто как в Word:

Идем дальше, теперь нам необходимо научится вставлять изображения, здесь опять таки всё просто, нажимаете правой кнопкой мыши на то изображение которое вы хотите заменить, в появившемся меню нажимаем Вырезать, а теперь на место того изображения которое вы удалили, вставим новое, для этого жмем на закладку Вставка->Рисунок->Из файла и в появившемся окне находите то изображение которое вам необходимо вставить…

Теперь нам необходимо научиться делать ссылки , это один из наиболее важных моментов, поскольку на гипертекстовых ссылка построен весь интернет.

И перед вами появится следующее окно:

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

Следующий важный момент который вам необходимо усвоить это как делать другие страницы для вашего сайта… Здесь как говорится всё гениальное просто, вам просто необходимо убрать лишний текст который не будет присутствовать на других станицах, и зайти в закладку Файл-> Сохранить как.. и использовать как шаблон для новых страниц и каждый раз как вам будет нужна новая страница на сайте вы открываете её и сохраняете под другим названием которое вам необходимо, например news.html и т.д.

И последнее, что нам необходимо освоить это таблицы, для них в программе отведена целая закладка которая так и называется Таблица, заходим туда и выбираем второй пункт:

И перед вами появится маленькая панель создания и редактирования таблиц:

Здесь хотелось бы отметить несколько основных и интересных моментов, очень удобная и интересная кнопка «Показать параметры макета», с помощью ее вы можете узнать показатели длины и высоты таблицы в пикселях, очень удобно если вы используете шаблон сайта и не знаете какие параметры таблицы были заложены изначально… Далее основные инструменты создания и редактирования таблиц это «Нарисовать таблицу» и «Ластик» здесь все просто как в обычном текстовом редакторе Word, я думаю нет смысла разжёвывать это… Ну и последний основной элемент который вам может потребоваться это «Объединить и Разбить ячейки»… Остальные функции я думаю будут ясны без объяснений, ну а если что вам всегда поможет великий метод «Тыка»:)

Дата публикации:2009-05-08