Фронт пейдж как создать титульный лист. Создание Web-страниц при помощи программы FrontPage. Коротко о программе Microsoft FrontPage

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

На Ютубе Вы всегда можете найти множество роликов в свободном доступе на любую тематику и затем добавить их на страницы своего сайта.

Или можете записать свой ролик самостоятельно. Загрузить его на видеохостинг, а потом также вставить с Ютуба на свой сайт. Для этого потребуется лишь предварительно зарегистрироваться на сервисе и создать свой аккаунт.

Для чего вставляют видео на сайт?

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

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

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

Или какой-нибудь другой тематический сайт. Например, как правильно подготовить снасти к рыбалке или как правильно накачать пресс. Как же здесь без видео обойтись?

Как вставить на сайт видео с Ютуба

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

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

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

Итак, поехали:

1. Заходим на сайт www.youtube.com и в строке поиска набираем фразу " подарочный набор чай Гринфилд " . Ниже появится список видео-роликов, отвечающих нашему запросу. Я выбрал четвертый по счету сверху (спасибо автору за его создание). Вот на всякий случай прямая ссылка не него: http://www.youtube.com/watch?v=hNFpu3EOPAM

3. Затем нажимаем "HTML -код"

4. Копируем код

5. Открываем в программе Frontpage наш сайт о чае. Напомню, что сейчас он выглядит у нас вот так (нажмите ссылку) и ставим букву "O " над словом " Доставка "

6. Далее выделяем левой кнопкой мышки букву "O " , переходим в режим " С разделением" , находим в верху в коде букву " О " и тоже выделяем ее

7. В коде вместо буквы " О " вставляем код видео, который мы скопировали (см. п.4), нажимаем на кнопку " Конструктор" и жмем сохранить

8. В итоге всех наших манипуляций на страницу сайта вставился прямоугольник серого цвета. На нем написано: " Не удается открыть страницу" и далее идет ссылка на видео с Ютуба.

10. Вот и все . Мы вставили видео на наш сайт . Теперь на сайте кроме текста и картинок присутствует еще и визуализация.

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

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

Поэтому видео не только можно, но и нужно использовать у себя на сайте. Главное не переусердствовать. О том, как НЕ наделать ошибок при создании сайта и прочих фишках очень подробно рассказывается в видео-курсе №3, который называется " Как создать сайт, который нравится людям " . Очень рекомендую.

А для релакса предлагаю посмотреть красивое видео.

Вопросы и ответы

Дорогие друзья! Если у Вас имеются вопросы, предложения или вдруг что-то стало непонятным, то Вы всегда можете написать мне об этом. Напоминаю, что для этого на сайте создана специальная форма . Я обязательно отвечаю всем на письма.

Тема 3.4: Применение Интернет в экономике и защита информации

Программы для создания сайтов

3.3. Прикладные программы для создания Веб - сайтов

3.3.4. Создание сайта и веб-страниц в FrontPage

Планирование сайта

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

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

Допустим, что мы решили разработать сайт, на котором будет представлена информация о компании EN101, эту имеющуюся у нас информацию мы можем изложить на четырех страницах:

Главная
О компании
Бизнес-обзор проекта
Способы оплаты

Выбираем имя сайта исходя из вида деятельности, например: lessons-en101.

Назначаем имена страницам:

index – Главная;
info - О компании;
business- Бизнес-обзор проекта;
pay - Способы оплаты.

В качестве главной страницы используем созданную ранее веб-страницу Главная (index). Создаем структуру сайта, которая представлена на рисунке.

Рис. 1.

Подготовим текст в редакторе Word для каждой страницы и рисунки в Adobe Photoshop в форматах GIF, JPEG или PNG с разрешением 72 пикс/дюйм, кроме того, можно использовать скрипты.

Далее можно зарегистрировать домен второго уровня в одной из зон (ua, ru, com, net, info и т.д.) и после разработки сайта выбрать платный хостинг, который устраивает по скорости доступа и предоставляет необходимые услуги для эффективной работы сайта. Если мы будем располагать сайт на бесплатном хостинге, то можно выбрать, например, хостинг на сервере narod.ru. Для этого необходимо будет зарегистрироваться на сервере и получить бесплатный хостинг. В этом случае у Вас будет домен третьего уровня, например: lessons-en101.narod.ru.

Создание сайта с помощью приложения FrontPage

1. Для создания сайта с помощью приложения FrontPage необходимо открыть окно приложения одним из способов. После чего на экране будет отображаться окно приложения или графический интерфейс FrontPage, в котором будет отображаться предыдущий сайт или страница. Для выхода из предыдущего сайта или страницы в FrontPage надо выполнить команду «Файл/Закрыть» или «Файл/Закрыть узел», либо то и другое, если были открыты узел и страница.

Затем выполняем команду Файл / Создать и в отрывшейся области задач «Создание» щелкаем мышью на «Другие шаблоны веб – узлов» в разделе «Создать Веб-узел». Откроется окно диалога «Шаблоны веб – узлов», в котором необходимо выделить «Пустой веб – узел», далее указать расположение нового веб-узла (например, D:\Documents and Settings\ТВА\Мои документы\Мои веб-узлы\lessons-en101) и щелкнуть ОК. На рисунке представлен фрагмент окна диалога «Шаблоны веб – узлов», в котором указан адрес нового сайта.

Рис. 2.

После сохранения сайта на экране в окне приложения FrontPage будет отображаться новый веб-узел в режиме папки.

Рис. 3.

2. Создание в FrontPage домашней страницы для нового сайта. Создание домашней страницы в FrontPage можно осуществлять по-разному. Например, можно щелкнуть на кнопке «Создать страницу» на панели «Содержимое», в результате в окне веб-узла добавится страница index.htm, которая показана на рисунке

Рис. 4.

3. Затем копируем содержимое ранее созданной папки EN101, в которой находятся папка images и страничка index (папка _vti_cnf формируется автоматически при создании веб-страницы). Содержимое папки EN101 представлено на рисунке.

Рис. 5.

Вставляем сохраненное содержание папки EN101 из буфера обмена во вновь созданную папку веб-узла lessons-en101, которая представлена на рисунке.

Рис. 6.

Рис. 7.

Таким образом, в качестве домашней страницы в новом сайте использована ранее созданная страница index.htm (Английский язык в Интернет). Можно создавать главную страницу и другими способами, изложенными в разделе 3.3.2. Знакомство с программой FrontPage.

5. Создаем в редакторе FrontPage структуру сайта, т.е. к главной странице добавим еще три страницы: info - О компании; business - Бизнес-обзор проекта; pay - Способы оплаты. Для этого надо перейти в режим Переходы, выполнив команду Вид/Переходы. Затем необходимо выделить домашнюю страницу и щелкнуть на кнопке Новая страница на панели Переходы или применить контекстное меню, добавится Новая страница 1. Аналогичным образом добавляем еще две новые страницы. Структура сайта представлена на рисунке.

Рис. 8.

6. Переименование Новых страниц в FrontPage. Переходим в режим папки и с помощью контекстного меню меняем имена Новая страница 1 на info , Новая страница 2 на business , Новая страница 3 на pay .

Рис. 9.

7. С целью единства дизайна страниц сайта копируем содержание главной страницы в созданные страницы info, business, pay. Для этого открываем главную страницу в режиме Страница и выполняем команду "Правка / Выделить все", и щелкаем на кнопке Копировать на панели инструментов. Переходим в режим Папки и щелкаем дважды на страничке info, она откроется в режиме Страница, затем щелкаем на кнопке Вставить. Содержимое главной страницы скопируется в страницу info, аналогично копируем содержимое главной страницы в остальные две страницы.

Главная;
О компании;
Бизнес-обзор проекта;
Способы оплаты.

Например, выделяем пункт навигации "Бизнес-обзор проекта" и с помощью контекстного меню открываем окно диалога Добавления гиперссылки, в котором выделяем business.htm и щелкаем ОК. Аналогично создаем гиперссылки для всех пунктов навигации на всех страницах. На рисунке представлен фрагмент окна диалога Добавления гиперссылки.

Рис. 10.

10. Добавляем и заполняем метатеги (между тегами и ) на страницах: "О компани"; "Бизнес-обзор проекта"; "Способы оплаты" в режиме Код.

Например, для страницы "О компании" теги заполнены следующим образом:

О компании En101

11. Переименование заголовков страниц в режиме Переходы. Выделить страницу и с помощью контекстного меню осуществить переименование:

новая страница 1 переименовать на "О компании".
новая страница 2 переименовать на "Бизнес-обзор проекта".
новая страница 3 переименовать на "Способы оплаты".

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

Для разработки собственного сайта в FrontPage скачайте.

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

При создании Web-страниц вы можете использовать графические изображения из библиотеки Clip Art, входящей в состав Microsoft Office, файлы, разработанные с использованием графических редакторов (например, CorelDraw, Adobe Photoshop), а также применять изображения, полученные со сканера. FrontPage позволяет импортировать файлы следующих форматов:

JPEG (JPG)
BMP (Windows или OS/2)
TIFF(TIF)
WMF (Метафайлы Windows)
SUN Raster (RAS)
EPS (Инкапсулированный Postscript)
PCX (Paintbrush)
TGA(Targa)
PCD (Kodak PhotoCD)

По умолчанию импортируемые форматы, за исключением форматов GIF и JPEG, преобразовываются FrontPage в формат GIF.

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

1. Откройте созданный сайт.

2. Откройте домашнюю страницу, дважды щелкнув мышью на панели Список папок (Folder List) на файле index.htm.

3. В меню Файл (File) выберите команду Свойства (Properties) или выберите команду контекстного меню страницы Свойства страницы .

Свойства страницы (Page Properties) перейдите на вкладку Фон (Background).

5. Установите расположенный в верхней части диалогового окна флажок Фоновый рисунок (Background picture).

6. Установите также флажок Подложка (Watermark). Если он установлен, то при перемещении по Web-странице с помощью полосы прокрутки не происходит смещения рисунка фона относительно объектов, расположенных на странице.

7. Для указания имени и расположения графического файла, содержимое которого будет использовано в качестве фона, нажмите кнопку Обзор (Browse). На экране открывается диалоговое окно Выбрать фоновый рисунок (Select Background Picture) (рис. 15.5), в списке Папка (Look in) которого указано имя открытого Web-узла.

Рис. 15.5. Диалоговое окно для выбора графического изображения фона страницы.

8. Если вы поместили графический файл в папку images, откройте ее, выберите подготовленный для фона страницы файл и нажмите кнопку ОК .

9. В случае если вы заранее не позаботились о размещении файла в папках Web-узла, для его поиска воспользуйтесь кнопками, расположенными слева в диалоговом окне Выбрать фоновый рисунок. Кнопки Журнал (History), Мои документы (My Document), Рабочий стол (Desktop), Избранное (Favorites), Мое сетевое окружение (My Network Places) позволяют искать файл в папках Recent , Мои документы , Рабочий стол , Избранное и Мое сетевое окружение , соответственно. Кнопка Найти в Интернете (Search the Web) запускает обозреватель для поиска в Интернете файла, который может быть использован в качестве фона Web-страницы.

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

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

На рис. 15.6 показана Web-страница, для которой в качестве фонового изображения использован файл из библиотеки Windows.

Рис. 15.6. В качестве фона использовано графическое изображение

Вы можете использовать единое графическое изображение на нескольких страницах Web-узла в качестве фона, устанавливая в диалоговом окне Свойства страницы флажок Получить сведения о фоне с другой страницы (Get background information from another page). В этом случае, если вы решите изменить фон, нет необходимости менять его на всех страницах, использующих одинаковое изображение, - достаточно сделать это на одной единственной странице. Рассмотрим последовательность действий при использовании этого флажка:

1. Откройте сайт.

2. Откройте домашнюю страницу, дважды щелкнув на панели Список папок (Folder List) на имени файла index.htm.

3. В меню Формат (Format) выберите команду Фон (Background).

4. В открывшемся диалоговом окне Свойства страницы на вкладке Фон (Background) установите флажки Фоновый рисунок (Background picture) и Подложка (Watermark).

5. Нажмите кнопку Обзор , расположенную рядом с полем, в котором будет размещено имя графического файла.

6. В открывшемся диалоговом окне Выбрать фоновый рисунок (Select Background Picture) выберите графический файл, который хотите использовать в качестве фона страницы, и нажмите кнопку ОК .

7. Нажмите кнопку ОК для закрытия диалогового окна Свойства страницы .

8. Сохраните Web-страницу с размещенным фоновым изображением и исходный графический файл в папке images .

9. Откройте в режиме редактирования вторую страницу Web-узла.

10. Откройте для этой страницы диалоговое окно Свойства страницы .

11. На вкладке Фон (Background) установите флажок Получить сведения о фоне с другой страницы (Get background information from another page).

12. Нажмите расположенную рядом с флажком кнопку Обзор .

13. В открывшемся диалоговом окне Текущий веб-узел (Current Web) (рис. 15.7) выберите из папки images сохраненную Web-страницу с фоновым графическим изображением и нажмите кнопку ОК .

14. Нажмите кнопку ОК для закрытия диалогового окна Свойства страницы .

Рис. 15.7. Диалоговое окно "Текущий веб-узел"

Теперь, если вы захотите изменить фоновое изображение на всех страницах Web-узла, вам достаточно выполнить следующие действия:

1. Поместите новое графическое изображение в папку images Web-узла.

2. Откройте окно свойств страницы, размещенной в папке images , для которой вы установили графическое фоновое изображение.

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

4. Закройте окно свойств страницы.

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

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

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

1. Для того, чтобы добавить фон, открываем программу Frontpage и в меню " Формат" нажимаем " Фон"

3. Нажимаем " Другой. .."

4. Выставляем следующие значения:

Оттенок: 160, Контраст: 0, Яркость: 216,

Красный: 230, Зеленый: 230, Синий: 230

и жмем везде " Ок"

5. После всех наших манипуляций все закрасилось серым цветом, т.е. фон страницы и сама страница стали светло - серыми.

Как перекрасить ячейку в белый цвет

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

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

7. Далее: " Фон" - " Цвет" - " Белый цвет" - " Применить" - " Ок"

9. Таким образом, на странице сайта мы создали фон. Теперь сама страница белая, а фон светло - серый:

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

Перед тем, как начать работать во 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, главное, чтобы вы ее открыли 🙂 Поздравляю, еще один полезный навык приобретен!