Перед тем, как начать работать во 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, главное, чтобы вы ее открыли 🙂 Поздравляю, еще один полезный навык приобретен!
. Метка
может включать следующие аттрибуты:
· WIDTH="n"
- определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;
· ALIGN=LEFT
- определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа);
· BORDER="n"
- устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки;
· BORDERCOLOR="#hhhhhh"
- устанавливает цвет рамки, где #hhhhhh - шестнадцатиричное значение цвета;
· CELLSPACING="n"
- определяет расстояние между рамками ячеек таблицы в пикселах;
· CELLPADDING="n"
- определяет расстояние в пикселах между рамкой ячейки и текстом;
· BGCOLOR="#hhhhhh"
- устанавливает цвет фона для всей таблицы, где #hhhhhh - шестнадцатиричное число.
· BACKGROUND="picture.gif"
- заполняет фон таблицы изображением;
· FRAME="значение"
- управляет внешней рамкой таблицы, может принимать следующие значения:
§ VOID - рамки нет (значение по умолчанию);
§ ABOVE - рисуется только граница сверху;
§ BELOW - только граница снизу;
§ HSIDES - границы сверху и снизу;
§ VSIDES - только границы слева и справа;
§ LHS - только левая граница;
§ RHS - только правая граница;
§ BOX - рисуются все четыре стороны;
§ BORDER - также все четыре стороны.
· RULES="значение"
- управляет линиями, разделяющими ячейки таблицы. Возможные значения:
§ NONE - нет линий (значение по умолчанию);
§ GROUPS - линии будут только между группами рядов (THEAD, TFOOT, TBODY) и группами колонок (COLGROUP, COL) - о группах рассказано ниже;
§ ROWS - только между рядами;
§ COLS - только между колонками;
§ ALL - между всеми рядами и колонками.
Таблица может иметь заголовок - метки
и . Располагаться он должен непосредственно после метки . Заголовок может иметь аттрибут ALIGN, определяющий положение заголовка относительно таблицы:</p> <br><br><p>Строки таблицы начинаются тэгом <TR> и заканчиваются </TR>. Могут иметь аттрибуты:</p>
<p>· <b>ALIGN=LEFT
</b> - устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо);</p>
<p>· <b>VALIGN=CENTER
</b> - устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);</p>
<p>· <b>BGCOLOR="#hhhhhh"
</b> - устанавливает цвет фона для строки.</p>
<p>· <b>BACKGROUND="picture.gif"
</b> - заполняет фон строки изображением.</p>
<p>Каждая ячейка таблицы начинается меткой <TD> и заканчивается </TD>. Может иметь следующие ттрибуты:</p>
<p>· <b>ALIGN=LEFT
</b> - устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо);</p>
<p>· <b>VALIGN=CENTER
</b> - устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю);</p>
<p>· <b>WIDTH="n"
</b> - определяет ширину ячейки в n пикселов;</p>
<p>· <b>HEIGHT="n"
</b> - определяет высоту ячейки в n пикселов;</p>
<p>· <b>COLSPAN="n"
</b> - устанавливает "размах" ячейки по горизонтали. Т.е. COLSPAN="3", например, означает, что ячейка будет простираться на 3 колонки;</p>
<p>· <b>ROWSPAN="n"
</b> - устанавливает "размах" ячейки по вертикали. ROWSPAN= "2" означает, что ячейка занимает две строки таблицы;</p>
<p>· <b>NOWRAP
</b> - присутствие этого аттрибута показывает, что текст должен размещаться в одну строку;</p>
<p>· <b>BGCOLOR="#hhhhhh"
</b> - устанавливает цвет фона ячейки;</p>
<p>· <b>BACKGROUND="picture.gif"
</b> - заполняет фон ячейки изображением.</p>
<p>Кроме того любая ячейка таблицы может быть определена не метками <TD></TD>, а метками <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри выделен полужирным шрифтом и отцентрирован.</p>
<p>Ряды таблицы могут быть объединены в группы. Для этого служат следующие метки:<br> <THEAD>...</THEAD> - здесь объединяются ячейки верхнего заголовка таблицы;</p>
<p><TFOOT>...</TFOOT> - ячейки нижнего заголовка таблицы;</p>
<p><TBODY>...</TBODY> - а здесь объединяются ряды собственно содержимого таблицы (может быть несколько групп TBODY).</p>
<p>Каждая группа должна содержать хотя бы один ряд TR. Группа TFOOT должна находиться до TBODY, хотя на экране она будет располагаться внизу таблицы (Netscape не поддерживает это). Все гуппы должны содержать одинаковое количество столбцов. Использование групп рядов: в идеале они предназначены для просмотра (скроллинга) больших таблиц независимо от заголовков.</p>
<p>Столбцы таблицы также могут быть объединены в группы при помощи меток <COLGROUP> и <COL>. Метка COLGROUP позволяет объединить столбцы в группы, которые могут выделяться, например, использованием аттрибута RULES элемента TABLES. Метка COL позволяет применить какие-либо аттрибуты (выравнивание и т.п.) к нескольким столбцам не объединяя их в структурную группу.</p>
<p><COLGROUP> может содержать следующие аттрибуты:</p>
<p>· <b>SPAN=n
</b> - в группе n столбцов (по умолчанию n=1). Браузер проигнорирует это значение, если между <COLGROUP> и <COL> есть хотя бы один элемент <COL>;</p>
<p>· <b>WIDTH=n
</b> - ширина столбцов в группе. Значение n может задаваться в пикселах, процентах. Может быть задано относительным значением, а также иметь значение "0*", т.е. столбцы будут минимальной ширины, исходя из размеров содержимого ячеек;</p>
<p>· <b>ALIGN, VALIGN
</b> - выравнивание содержимого ячеек.</p>
<p><COL> содержит те же аттрибуты, что и <COLGROUP>. Если ширина столбцов задана и в COL, и в COLGROUP, то выбирается значение метки COL. Метка <COL> непарная, т.е. закрывающего тэга у нее нет.</p>
<p>Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (- обязательно должен набираться строчными буквами и закрываться точкой с запятой).</p>
<p>Любая ячейка таблицы может содержать в себе еще одну таблицу.</p>
<p>Возможные ошибки в таблицах:</p>
<p>· Метки, устанавливающие шрифт (<B>, <I>, даже <FONT SIZE="n", FONT COLOR="#hhhhhh"), необходимо повторять для каждой ячейки. Нельзя установить шрифт сразу для всей таблицы.</p>
<p>· Таблица - конструкция нежная. При потере только одной метки <TR> она может повести себя напредсказуемо. Отсутствие метки </TABLE> может привести к тому, что вся таблица вообще исчезнет с экрана.</p>
<p><b>Вставка таблицы в редакторе FrontPage
</b></p>
<p>С помощью таблиц можно выполнять верстку в несколько колонок, применять эффекты состыковки картинки и фона, размещать тонкие линии на всю ширину или высоту странички и т.д.</p>
<p>Для вставки таблицы можно воспользоваться стандартной панелью инструментов, однако наиболее полно команды работы с таблицами представлены в меню <b>Таблица.
</b></p>
<p>Создать таблицу следующего вида:</p>
<p>1. Диалоговом окне <b>Вставка таблицы
</b> можно указать не только количество строк и столбцов таблицы, но и способ выравнивания, цвет фона ячеек, цвет и толщину границ, интервал между ячейками и другие параметры. Сделаем требуемые установки в соответствии с примером.</p>
<p>2. После создания таблицы из 4-ех строк и 3-ех столбцов необходимо выделить нужные ячейки для их объединения, например все ячейки первого столбца и выполнить цепочку действий: <b>Таблица® Объединить ячейки.
</b></p>
<p><b>Практическая часть.
</b></p>
<p>Учащиеся выполняют задание Практическая работа 6-7.doc</p>
<p><b>Цель работы
</b>: изучение основ работы с редактором <b><i>MS Front Page.
</i>
</b></p>
<p>Ниже на рис. 18 приведена структура <i>Web
</i>-сайта</p>
<p>Рис. 18 - Макет личного веб_сайта</p>
<p>Шаг 1 - Создание нового сайта.</p>
<p>1 Запустить <i>Front Page
</i> и выбрать пункт меню <b><i>Файл –Создать – Веб-узел
</i>
</b>, а затем шаблон сайта – <b><i>Одностраничный сайт.
</i>
</b> В поле <b><i>Укажите расположение нового сайта
</i>
</b> указать папку, в которой будет располагаться сайт, например <i>D:\students\545\web
</i>. Затем следует нажать кнопку «<i>Ok
</i>». Крайняя <b><i>левая
</i>
</b> панель <b><i>Папки
</i>
</b> показывает входящие в сайт папки и файлы: <i>htlm
</i>-страницы, рисунки и т.п. В настоящий момент, сайт содержит лишь одну страницу – <i>index.htm
</i>. Если в этой панели выбрать «мышью» одну из страниц, то она будет открыта для редактирования.</p>
<p>2 Работа со страницей возможна в одном из четырех режимов:</p>
<p>-<b>конструктор
</b> - производится редактирование страницы;</p>
<p>- <b>с разделением
</b>– окно делится на две части: в одной – отображается код HTML, который можно редактировать, в другой можно работать в режиме конструктора;</p>
<p>- <b>код
</b>- (<i>HTML
</i>) - можно проконтролировать создаваемый код страницы и внести изменения;</p>
<p>- <b>просмотр<i> -
</i>
</b>страница показана так, как она будет отражена браузером.</p>
<p>3 Переключение на режим осуществляются с помощью вкладок внизу панели. Для выполнения работы будем пользоваться, в основном, режимом Конструктор.</p>
<p>Шаг 2 – Ввести текст основной страницы (структура страницы приведена на рис. 12. Текст страницы разрабатываются самостоятельно).
</p>
<p>1 Для ввода данных создайте таблицу, выбрав пункт меню <b><i>Таблица > Вставка
</i>,
</b> или используя соответствующую пиктограмму на панели инструментов. Наберите текст страницы. Для заголовка страницы в поле <b><i>Стиль
</i>
</b> в левой верхней части экрана <i>Front Page
</i> выберите стиль <b><i>Заголовок 1
</i>
</b>. На рис 19 представлен вид Главной станицы веб-сайта.</p>
<p>Рис. 19 - Макет Главной страницы веб-сайта</p>
<p>2 После того, как в таблицу введен текст, определите свойства таблицы. Установите курсор «мыши» внутри таблицы, нажмите правую кнопку и в пункте <b><i>Свойства таблицы
</i>
</b> определите для поля <b><i>Выравнивание
</i>
</b> значение <b><i>Центр
</i>
</b>. Установите <i>флажок
</i> в поле <b>Задать ширину
</b> и <i>переключатель
</i> на параметр - <b><i>В процентах,
</i>
</b> и задайте значение - «<i>80
</i>». Это значит, что таблица будет располагаться по центру окна браузера и занимать 80% ширины окна.</p>
<p>3 В группе <b><i>Границы
</i>
</b> можно определить размер и цвет рамки. Если необходимо, чтобы у таблицы не было видимой рамки, установить в поле значение - 0. Группа <b><i>Фон
</i>
</b> позволяет задать фон для таблицы.</p> <br><br><p>4 Для определения свойств страницы выберите из контекстного меню пункт <b><i>Свойствастраницы
</i>
</b> и на вкладке <b><i>Общие
</i>
</b> измените поле <b><i>Название
</i>
</b>– на текст «Главная страница». Теперь это значение будет отражаться в заголовке окна браузера при просмотре страницы. Обязательно необходимо исправить язык страницы, это делается с помощью вкладки <b><i>Язык
</i>
</b>. Установите кодировку (<i>Набор знаков
</i>) - Кириллица и язык <i><b>Русский
</b>.
</i></p>
<p>5 Перейдите на вкладку <b><i>Форматирование
</i>
</b><i>.
</i>Если установить флажок <b><i>Фоновый рисунок
</i>
</b>, то нажав на кнопку <b><i>Обзор
</i>
</b>, можно выбрать рисунок для фона страницы.</p>
<p>6 Группа <b><i>Цвета
</i>
</b> позволяет задать цвет шрифта по умолчанию, цвет фона по умолчанию, цвета ссылки, посещенной и активной. Измените эти параметры.</p>
<p><b>7
</b>Для оформления заголовка в виде <b><i>Бегущей строки
</i>
</b>выберите в меню <b><i>Вид
</i>
</b> представление <b><i>Страница
</i>
</b> и нажмите в нижней части окна документа кнопку <b><i>Конструктор.
</i>
</b> Щелкните место, куда следует вставить бегущую строку, а потом введите и выделите текст, который следует представить в виде бегущей строки. В меню <b><i>Вставка
</i>
</b> выберите команду <b><i>Веб
</i>-<i>компонент
</i>
</b>. В группе <b><i>Тип компонента
</i>
</b> нажмите кнопку <b><i>Динамические эффекты
</i>
</b>. В группе <b><i>Выбор эффекта
</i>
</b> дважды щелкните значок <b><i>Бегущая строка
</i>
</b>. Задайте параметры бегущей строки.<b><i>
</i>
</b></p>
<p><b>8
</b>Сохраните страницы. Если программа задаст вопрос о месте сохранения рисунков: сохраните рисунки в папке <b><i>Images
</i>
</b>. Для выбора папки используется кнопка <b><i>Изменить папку.
</i>
</b></p>
<p>1 Чтобы сделать ссылку на существующую страницу нужно выбрать ее из списка. Можно также определить место внутри страницы (закладку) на которое будет указывать ссылка. Если это место внутри текущей страницы, то заполнять поле <i>URL
</i> не нужно, следует выбрать закладку в поле <b><i>Закладка
</i>
</b>(закладка должна быть предварительно создана). Если следует создать ссылку на закладку на другой странице, то сначала нужно выбрать эту страницу, а затем – закладку.</p>
<p>2 Создайте ссылки на другие страницы сайта. Для этого выделите раздел в содержании и создайте ссылку, нажав на панели инструментов кнопку создания гиперссылки, либо выбрав пункт меню <b><i>Вставка > Гиперссылка
</i>
</b>.</p>
<p>4 Воспользовавшись панелью <b><i>Папки
</i>
</b>, вернитесь на главную страницу <i>index.htm
</i> и создайте ссылку на следующую страницу сайта. Сохраните ее<i>.
</i>В результате в <b><i>Списке файлов
</i>
</b> и папок будут отражены все входящие в сайт страницы.</p>
<p> «Технология создания Web-сайтов»
</p><p>«Создание домашней страницы в FrontPage 2003»
</p><p>ЛАБОРАТОРНАЯ РАБОТА № 1
</p><p>Запуск и настройка программы, знакомство с интерфейсом
</p><p>Выполнив задания этой темы, вы научитесь:
</p><ul><li><span>Запускать программу;
</span></li><li><span>Познакомитесь с содержимым
</span>Главного окна
.
</li>
</ul><p>ЗАДАНИЕ:
</p><p>Выполните запуск программы. Познакомьтесь с
</span>Главным окном
<span> программы. Создайте папку для хранения содержимого будущего сайта.
</p><p>ТЕХНОЛОГИЯ РАБОТЫ:
</p><ol><li><span>Запустите визуальный Web-редактор FrontPage (</span>Пуск
Программы
MS Office
FrontPage
).
</li><li>Главное окно
<span> программы содержит:
</span></li>
</ol><ul><li><span>Строку заголовка
</span><span>, в которой отражается название активной страницы;
</span></li><li>Главное меню
<span>, которое содержит команды
</span>Файл
,
Правка
, В
ид
, В
ставка
<span> и т.д., позволяющие выполнять операции как над самим документом, так и над объектами внутри документа, а также управлять всем Web-узлом;
</span></li><li><span>Панели инструментов
</span>Стандартная
и
Форматирование
<span>, которые содержат основной набор инструментов для создания, редактирования и форматирования (оформления) текстов, таблиц, графических объектов;
</span></li><li>Окно документа
<span>, в котором отображаются открытые Web-страницы;
</span></li><li><span>Панель режимов отображения документа:
</span></li>
</ul><ul><li>Конструктор
<span> служит непосредственно для создания документа в визуальном режиме;
</span></li><li>С разделением
<span>- позволяет отразить документ как в режиме создания документа, так и в режиме просмотра HTML-кода;
</span></li><li>Код
<span>предназначен для набора страницы на HTML-языке;
</span></li><li>Просмотр
<span>позволяет открыть документ в том виде, в котором он отобразится в программе-браузере.
</span></li>
</ul><ol><li><span>Создайте свою собственную папку для хранения ваших файлов на Рабочем столе. Название папки выберите самостоятельно.
</span><span>Помните! Для удобства и однозначности понимания ваших файлов программой-браузером все имена должны быть записаны латинскими буквами.
</span></li><li><span>Закройте Web-редактор FrontPage.
</span></li>
</ol><br><h2>По теме: методические разработки, презентации и конспекты</h2><p>Изучение движения тела по окружности. Цель работы:определение центростремительного ускорения шарика при его равномерном движении по окружности. Оборудование: штатив с муфтой и лапкой, ...</p><p>Лабораторная работа по теме"Расширенные возможности процессора электронных таблиц Microsoft Office Excel"...</p>
<p>Таблицы полезны для порядка информации. Особенно, они имеют преимущество в создании внешнего вида нескольких колонок текста.</p>
<p>Там нет никакого способа, использовать “tab” в HTML, и вы должны избегать использования «пробела», чтобы контролировать расстояние, где все будет видно уже на веб-странице, которая выглядит хорошо для вашего читателя, только если он или она имеют те же настройки компьютера, что и вы. В качестве альтернативы можно создать таблицу без полей. Простые таблицы создавать легко, однако, по опыту, создание или редактирование сложных таблиц может потребовать прямой тег HTML манипуляции.</p>
<p><b>Создание таблицы
</b></p><p><i>Чтобы вставить таблицу:
</i></p>
<p>1)Выберите инструмент «Вставить таблицу» <span><p>2)Нажмите и перетащите таблицу, размера всплывающего окна, чтобы выбрать число строк и столбцов, которые вы хотите видеть в своей таблице. Когда вы отпустите кнопку мышки, заданная таблица появится на вашем документе.</p>
<p><img src='https://i2.wp.com/bisquit-mag.ru/wp-content/uploads/2013/12/frontpage_table_grid.gif' height="131" width="105" loading=lazy></p>
<p>ПРИМЕЧАНИЕ: Лучше всего, если вы можете выставить заранее количество столбцов -это сэкономит вам время в процессе работы.</p>
<p>Таблица будет отображаться на веб-странице в процессе разработки с пунктирными линиями, так что вы можете легко работать с таблицей. Пунктирные линии указывают, что линии не будут отображаться на сайте.</p>
<p><b>Работа с таблицами
</b></p>
<p>ПРИМЕЧАНИЕ: Каждый раз, когда вы хотите работать с таблицей, сначала, вы должны кликнуть по таблице и поместить курсор внутри таблицы, в нужное вам место. В противном случае, вы увидите, что пункты меню «Таблица» – серые, что значит, они недоступны для вас.</p>
<p>Чтобы настроить ширину столбцов и высоту строк, наведите курсор мыши на границе, которую вы хотите настроить. Наведите указатель мыши очень медленно, пока не увидите изменение курсора на двустороннюю стрелку (она довольно чувствительна, делайте это медленно), а затем нажмите и перетащите к новым размерам.</p>
<p>Чтобы ввести данные в таблицу, наведите курсор мыши на клетку и начните печатать.</p>
<p>Для перемещения из ячейки в ячейку, нажимайте клавишу “tab” на клавиатуре или нажмите курсор мыши в клетке, на которую вы хотите переместиться.</p>
<p>Чтобы добавить дополнительную строку в таблице в конце, поместите курсор в правом нижнем углу ячейки и нажмите клавишу “tab” на клавиатуре.</p>
<p>Чтобы выбрать таблицу / столбец / строку / ячейку, щелкните в строке или столбце, который вы хотите выбрать, затем в меню найти и выбрать Таблица / колонки / строки / ячейка (в зависимости от того, которую вы хотите выбрать).</p>
<p>Чтобы вставить строку или столбец, щелкните в строке или столбце, рядом с которым вы хотите сделать вставку. Далее Меню /Таблица / Вставка: строки или столбцы. В диалоговом окне выберите либо строки или столбцы. В приведенном ниже примере выбраны столбцы, поэтому расположение указано слева или вправо от выбора вставки.</p>
<p><img src='https://i1.wp.com/bisquit-mag.ru/wp-content/uploads/2013/12/frontpage_table_insert.gif' height="194" width="223" loading=lazy></p>
<p>Чтобы удалить отдельные клетки, полные строки или столбцы, установите курсор в нужное место (в клетке, в строке или в столбце), а затем выберите элемент (как описано выше), который вы хотите удалить. После выбора элемента, из меню выберите Таблица / Удалить ячейки.</p>
<p>Чтобы объединить ячейки, выделите ячейки, как описано выше, в меню выберите Таблица / Объединить ячейки.</p>
<p>Чтобы разделить клетки, поместите курсор в ячейке, которую следует разделить. Тогда из меню выберите Таблица / Разбить ячейки. В диалоговом окне выберите разбить ячейку на столбцы или строки, и укажите количество столбцов или строк, как вы хотите.</p>
<p><img src='https://i1.wp.com/bisquit-mag.ru/wp-content/uploads/2013/12/frontpage_split_cells.gif' height="162" width="250" loading=lazy></p>
<p><b>Панель инструментов Таблицы
</b></p>
<p><br><img src='https://i0.wp.com/bisquit-mag.ru/wp-content/uploads/2013/12/frontpage_2003_table_toolbar.jpg' width="100%" loading=lazy></p>
<p>Панель инструментов таблицы предоставляет вам простой доступ ко многим из тех же функций, которые можно выполнять с помощью меню Таблица. В зависимости от того, как опции Главной страницы установлены на вашем компьютере, панель инструментов может отображаться в любое время, каждый раз как вы работаете с таблицами. Если у вас так не происходит, а вы хотите, то в меню выберите Вид / Панели / Таблица.</p>
<p>В дополнение к табличным функциям, которые вы можете получить в меню, вы можете:</p>
<p>*Добавить таблицу или дополнительные ячейки в таблице: нажмите на значок карандаша, экранное изображение / инструмент табличный карандаш. Нажмите и перетащите курсор (который будет выглядеть как карандаш) вертикально или горизонтально, чтобы нарисовать новую ячейку на вашей таблице.</p>
<p>*Удалить клеточную стенку из существующей таблицы: нажмите на значок ластика, экранное изображение / значок табличный ластик. Нажмите и перетащите курсор (который будет выглядеть как ластик) над границей ячейки (вы увидите линии, которые будут удалены, красного цвета), которую нужно удалить, а когда вы отпустите кнопку мыши, границы будут удалены.</p>
<p><i>Чтобы «выключить» либо карандаш либо ластик, нажмите клавишу <ESC> на клавиатуре.
</i></p>
<p>*Распределить столбцы или строки равномерно: после того как границы таблицы настроены, вы можете обнаружить, что вы просто хотите вернуть все обратно, тогда выберите снова “начать все сначала”. Выделите строки или столбцы, которые вы хотите равномерно распределить, затем выберите, соответственно, значок “равномерно распределить”, экранное изображение / распределить ячейки таблицы равномерно.</p>
<p>*Размер таблицы в соответствии с содержанием в ней. Таблицы всегда вставляются по полной ширине. Вместо того, чтобы пытаться угадать, насколько широкой таблица должна быть, чтобы разместить содержимое, щелкните значок Auto Fit .</p>
<p><b>Таблица & Свойства ячейки
</b></p>
<p>Вы можете установить такие свойства таблицы, как фон и границы цветов, интервал и выравнивание текста в виде таблицы. Убедитесь, что курсор находится на таблице. В меню выберите Таблица / Свойства.</p>
<p><img src='https://i0.wp.com/bisquit-mag.ru/wp-content/uploads/2013/12/frontpage_2003_table_properties.jpg' height="615" width="447" loading=lazy></p>
<p>В диалоговом окне «Свойства таблицы», вы можете выбрать много вариантов для таблицы, но вам нужны только некоторые, которые вам понадобятся, чтобы делать следующее:</p>
<p>*Инструменты компоновки. Инструменты компоновки позволяют создавать конкретные макеты для оформления страницы.</p>
<p>*Размер. Эта опция позволяет указать количество строк и столбцов, которые вы хотите, чтобы имела ваша страница. Добавьте свойства таблицы после уже установки таблицы, а затем сделайте выбор в списке «Размер», чтобы создать соответствующие размеры.</p>
<p>– Выравнивание, эта опция будет позиционировать таблицу на веб-странице.</p>
<p>– Ширина, этот параметр определяет ширину общей таблицы. Установка ширины таблицы в процентах является более гибким ходом, с точки зрения дизайна (таблицы с фиксированными размерами пикселей не отрегулировать с размерами окна браузера пользователя и это может потребовать горизонтальной прокрутки, если таблица шире, чем окно браузера).</p>
<p>ПРИМЕЧАНИЕ: главная страница имеет причуды, например, если нажать и тащить, чтобы изменить размер ячейки таблицы или полей, то он часто меняет разные настройки ширины процентов к определенному числу пикселей. Моя рекомендация состоит в том, что когда вы установили размер вашей таблицы и клетки внутри, то откройте диалоговое окно свойств таблицы и измените настройку пикселей в процентах (просто нажмите на другую кнопку).</p>
<p>– Размещение, этот параметр определяет положение таблицы по отношению к другим объектам на странице. Когда это положение ставится по умолчанию, другие объекты появляются либо ниже, либо только над таблицей.</p>
<p>– Высота. В целом, вы не должны указывать высоту для вашей таблицы. Пусть это настроится в соответствии с потребностями таблицы, как показано на мониторе. В противном случае, вы сможете «расправиться» с большим количеством “белого пространства”, которое вам не нужно.</p></p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
<div class="social-share">
<p class="title">Понравилась статья?</p>
<div class="share js-socials-share"></div>
</div>
<div class="related-posts"><div class="wp_rp_wrap wp_rp_plain" id="wp_rp_first"><div class="wp_rp_content"><div class="row js-advices-row">
<div class="col-sm-4">
<div class="post-announce" data-position="0" data-poid="in-6915" data-post-type="none"><a href="/notebooks-and-ultrabooks/kak-nastroit-internet-na-soni-iksperiya-sony-xperia-vernut-zavodskie-nastroiki/" class="wp_rp_thumbnail thumb"><img src="/uploads/cfe711e7d9051697c7fd02fc0a2f55f9.jpg" alt="Вернуть заводские настройки на сони иксперия с3 Как настроить сони иксперия z" / loading=lazy></a>
<div
class="announce-body">
<p class="title"><a href="/notebooks-and-ultrabooks/kak-nastroit-internet-na-soni-iksperiya-sony-xperia-vernut-zavodskie-nastroiki/" class="wp_rp_title">Вернуть заводские настройки на сони иксперия с3 Как настроить сони иксперия z</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="post-announce" data-position="0" data-poid="in-6915" data-post-type="none"><a href="/mobile/nastroit-vai-fai-androide-samsung-nastroika-wi-fi-podklyucheniya-na/" class="wp_rp_thumbnail thumb"><img src="/uploads/eccd1b2adbab6d3edafc0918222503b3.jpg" alt="Настройка Wi-Fi подключения на телефоне и планшете" / loading=lazy></a>
<div
class="announce-body">
<p class="title"><a href="/mobile/nastroit-vai-fai-androide-samsung-nastroika-wi-fi-podklyucheniya-na/" class="wp_rp_title">Настройка Wi-Fi подключения на телефоне и планшете</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="post-announce" data-position="0" data-poid="in-6915" data-post-type="none"><a href="/notebooks-and-ultrabooks/obzor-igry-votch-dogs-na-russkom-watch-dogs---chto-to-poseredine-ishchem-za-chto/" class="wp_rp_thumbnail thumb"><img src="/uploads/55c88bc610b19708598c44493b3215ea.jpg" alt="Watch Dogs - что-то посередине" / loading=lazy></a>
<div
class="announce-body">
<p class="title"><a href="/notebooks-and-ultrabooks/obzor-igry-votch-dogs-na-russkom-watch-dogs---chto-to-poseredine-ishchem-za-chto/" class="wp_rp_title">Watch Dogs - что-то посередине</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="post-announce" data-position="0" data-poid="in-6915" data-post-type="none"><a href="/computer-hardware/telefon-s-nfc-i-bolshoi-batareei-luchshie-telefony-s-nfc/" class="wp_rp_thumbnail thumb"><img src="/uploads/50c26f50f4beebfa342a0ecefa1928d7.jpg" alt="Лучшие телефоны с NFC технологией" / loading=lazy></a>
<div
class="announce-body">
<p class="title"><a href="/computer-hardware/telefon-s-nfc-i-bolshoi-batareei-luchshie-telefony-s-nfc/" class="wp_rp_title">Лучшие телефоны с NFC технологией</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="post-announce" data-position="0" data-poid="in-6915" data-post-type="none"><a href="/internet/skachat-mody-dlya-ksp-1-3-1-1891-luchshie-mody-dlya-kerbal-space-program-mody-s-novymi/" class="wp_rp_thumbnail thumb"><img src="/uploads/cdfd97ad9ecfdc35856b1e86b5121193.jpg" alt="Скачать моды для ksp 1.3 1.1891. Лучшие моды для Kerbal Space Program. Моды с новыми заданиями" / loading=lazy></a>
<div
class="announce-body">
<p class="title"><a href="/internet/skachat-mody-dlya-ksp-1-3-1-1891-luchshie-mody-dlya-kerbal-space-program-mody-s-novymi/" class="wp_rp_title">Скачать моды для ksp 1.3 1.1891. Лучшие моды для Kerbal Space Program. Моды с новыми заданиями</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="post-announce" data-position="0" data-poid="in-6915" data-post-type="none"><a href="/notebooks-and-ultrabooks/ultimate-general-civil-war-gaid-po-strategii-i-taktike-ultimate-general-civil-war/" class="wp_rp_thumbnail thumb"><img src="/uploads/687eede0eefd34a943c21fde47204065.jpg" alt="Ultimate General: Civil War — обзор игры Ultimate general civil war где лежат сохранения" / loading=lazy></a>
<div
class="announce-body">
<p class="title"><a href="/notebooks-and-ultrabooks/ultimate-general-civil-war-gaid-po-strategii-i-taktike-ultimate-general-civil-war/" class="wp_rp_title">Ultimate General: Civil War — обзор игры Ultimate general civil war где лежат сохранения</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="post-announce" data-position="0" data-poid="in-6915" data-post-type="none"><a href="/computer-hardware/path-of-exile-cvet-luta-path-of-exile-gaid-po-napisaniyu-lut-filtrov/" class="wp_rp_thumbnail thumb"><img src="/uploads/80525996bcbc8a8dcc27103a8cf74a47.jpg" alt="Path of Exile Гайд по написанию лут-фильтров" / loading=lazy></a>
<div
class="announce-body">
<p class="title"><a href="/computer-hardware/path-of-exile-cvet-luta-path-of-exile-gaid-po-napisaniyu-lut-filtrov/" class="wp_rp_title">Path of Exile Гайд по написанию лут-фильтров</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="post-announce" data-position="0" data-poid="in-6915" data-post-type="none"><a href="/mobile/kak-skryt-stenu-v-vk-kak-skryt-zapis-na-stene-vkontakte-ot-odnogo/" class="wp_rp_thumbnail thumb"><img src="/uploads/b882a3c2e6f5f4db5072eb1bd6e81f23.jpg" alt="Как скрыть запись на стене ВКонтакте от одного человека (без ЧС)?" / loading=lazy></a>
<div
class="announce-body">
<p class="title"><a href="/mobile/kak-skryt-stenu-v-vk-kak-skryt-zapis-na-stene-vkontakte-ot-odnogo/" class="wp_rp_title">Как скрыть запись на стене ВКонтакте от одного человека (без ЧС)?</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="post-announce" data-position="0" data-poid="in-6915" data-post-type="none"><a href="/accessories/samsung-core-2-instrukciya-po-polzovaniyu-komplekt-postavki-i-upakovka/" class="wp_rp_thumbnail thumb"><img src="/uploads/508134269672749cedcff09c56976bf5.jpg" alt="Комплект поставки и упаковка" / loading=lazy></a>
<div
class="announce-body">
<p class="title"><a href="/accessories/samsung-core-2-instrukciya-po-polzovaniyu-komplekt-postavki-i-upakovka/" class="wp_rp_title">Комплект поставки и упаковка</a></p>
</div>
</div>
</div>
</div></div></div></div>
</div>
<div class="g-sidebar site-sidebar">
<aside id="ratios_list_widget-2" class="sidebar-widget ">
<div class="widget-head have-icon">
<span class="icon icon-ratio"></span>
<span class="title">Популярное</span>
</div>
<div class="widget-body">
<ul class="ratios-list">
<li>
<span class="num">1</span>
<p class="title">Добавить свою цену в базу Комментарий
</p>
</li>
<li>
<span class="num">2</span>
<p class="title">Как проверить интернет-соединение на стабильность
</p>
</li>
<li>
<span class="num">3</span>
<p class="title">Не входит в гугл аккаунт на андроиде после сброса настроек
</p>
</li>
<li>
<span class="num">4</span>
<p class="title">Ошибка запуска Dead by Daylight, Launch Error и ошибки в игре Dead by daylight не запускается
</p>
</li>
<li>
<span class="num">5</span>
<p class="title">Лучшие легкие танки в World of Tanks Какой лт лучше в ворлд оф танк
</p>
</li>
<li>
<span class="num">6</span>
<p class="title">Wot в снайперском прицеле падает фпс
</p>
</li>
</ul>
</div>
</aside>
<aside id="new_posts_widget-2" class="sidebar-widget ">
<div class="widget-head have-icon">
<span class="icon icon-new"></span>
<span class="title">Новые статьи</span>
</div>
<div class="widget-body">
<ul class="posts-list delimited">
<li>
<a href="/notebooks-and-ultrabooks/vremya-raboty-ili-skolko-derzhit-zaryadku-iphone-kakaya-na-samom-dele/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/c4448d2c7660fb7182b49b8f7c5fd267.jpg" alt="Какая на самом деле батарея у шестого айфона?" / loading=lazy></span>
</span>
<span class="title">Какая на самом деле батарея у шестого айфона?</span>
</span>
</a>
</li>
<li>
<a href="/mobile/chto-takoe-chernyi-yashchik-samoleta-kakogo-cveta-chernyi-yashchik-samoleta-kak-ustroen/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/e1d5c12132c3d513a97d845a99eaa59d.jpg" alt="Какого цвета черный ящик самолета?" / loading=lazy></span>
</span>
<span class="title">Какого цвета черный ящик самолета?</span>
</span>
</a>
</li>
<li>
<a href="/mobile/routery-gpon-harakteristiki-podklyuchenie-nastroiki-opticheskii-modem/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/58c6abda525296145ce2a7a5f2b20ea8.jpg" alt="Оптический модем ONT Huawei HG8245: характеристики Что такое ont модем" / loading=lazy></span>
</span>
<span class="title">Оптический модем ONT Huawei HG8245: характеристики Что такое ont модем</span>
</span>
</a>
</li>
<li>
<a href="/computer-hardware/skachat-chit-nova-b7-na-mainkraft-skachat-chit-nova-b7-na-mainkraft-skachat-chit-nova-zip/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/6c7e6dfc55119e8f3c40581a8827da1b.jpg" alt="Скачать Чит NOVA b7 на Майнкрафт Скачать чит nova zip на майнкрафт" / loading=lazy></span>
</span>
<span class="title">Скачать Чит NOVA b7 на Майнкрафт Скачать чит nova zip на майнкрафт</span>
</span>
</a>
</li>
<li>
<a href="/notebooks-and-ultrabooks/vazhnye-rekomendacii-proverki-obektiva-pered-pokupkoi-kak-s-ruk-tak-i/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/ddcdf1b943b66147afbdeff62445ed16.jpg" alt="Важные рекомендации проверки объектива перед покупкой как с рук, так и в магазине" / loading=lazy></span>
</span>
<span class="title">Важные рекомендации проверки объектива перед покупкой как с рук, так и в магазине</span>
</span>
</a>
</li>
</ul>
</div>
</aside>
<aside id="new_posts_widget-2" class="sidebar-widget ">
<div class="widget-head have-icon">
<span class="icon icon-new"></span>
<span class="title">Новые статьи</span>
</div>
<div class="widget-body">
<ul class="posts-list delimited">
<li>
<a href="/notebooks-and-ultrabooks/kak-nastroit-internet-na-soni-iksperiya-sony-xperia-vernut-zavodskie-nastroiki/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/7ce372cc2df68ce22208279dba7cbe09.jpg" alt="Вернуть заводские настройки на сони иксперия с3 Как настроить сони иксперия z" / loading=lazy></span>
</span>
<span class="title">Вернуть заводские настройки на сони иксперия с3 Как настроить сони иксперия z</span>
</span>
</a>
</li>
<li>
<a href="/mobile/nastroit-vai-fai-androide-samsung-nastroika-wi-fi-podklyucheniya-na/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/c1d7c6f10b6a34f8129a7652fc68e096.jpg" alt="Настройка Wi-Fi подключения на телефоне и планшете" / loading=lazy></span>
</span>
<span class="title">Настройка Wi-Fi подключения на телефоне и планшете</span>
</span>
</a>
</li>
<li>
<a href="/notebooks-and-ultrabooks/obzor-igry-votch-dogs-na-russkom-watch-dogs---chto-to-poseredine-ishchem-za-chto/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/60a80a91263ead7436c1e0e8934fee1f.jpg" alt="Watch Dogs - что-то посередине" / loading=lazy></span>
</span>
<span class="title">Watch Dogs - что-то посередине</span>
</span>
</a>
</li>
<li>
<a href="/computer-hardware/telefon-s-nfc-i-bolshoi-batareei-luchshie-telefony-s-nfc/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/4c78660203247970027fa34c63c2c9e5.jpg" alt="Лучшие телефоны с NFC технологией" / loading=lazy></span>
</span>
<span class="title">Лучшие телефоны с NFC технологией</span>
</span>
</a>
</li>
<li>
<a href="/internet/skachat-mody-dlya-ksp-1-3-1-1891-luchshie-mody-dlya-kerbal-space-program-mody-s-novymi/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/d761eb87c4b237f3544c48b9bc92d387.jpg" alt="Скачать моды для ksp 1.3 1.1891. Лучшие моды для Kerbal Space Program. Моды с новыми заданиями" / loading=lazy></span>
</span>
<span class="title">Скачать моды для ksp 1.3 1.1891. Лучшие моды для Kerbal Space Program. Моды с новыми заданиями</span>
</span>
</a>
</li>
</ul>
</div>
</aside>
<aside id="top_posts_widget-2" class="sidebar-widget ">
<div class="widget-head have-icon">
<span class="icon icon-new"></span>
<span class="title">Популярное</span>
</div>
<div class="widget-body">
<ul class="posts-list delimited">
<li>
<a href="/notebooks-and-ultrabooks/ultimate-general-civil-war-gaid-po-strategii-i-taktike-ultimate-general-civil-war/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/231de2db578d44c5e316627cf17e8bd9.jpg" alt="Ultimate General: Civil War — обзор игры Ultimate general civil war где лежат сохранения" / loading=lazy></span>
</span>
<span class="title">Ultimate General: Civil War — обзор игры Ultimate general civil war где лежат сохранения</span>
</span>
</a>
</li>
<li>
<a href="/computer-hardware/path-of-exile-cvet-luta-path-of-exile-gaid-po-napisaniyu-lut-filtrov/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/8bd00402847e15b00da542386b813f22.jpg" alt="Path of Exile Гайд по написанию лут-фильтров" / loading=lazy></span>
</span>
<span class="title">Path of Exile Гайд по написанию лут-фильтров</span>
</span>
</a>
</li>
<li>
<a href="/mobile/kak-skryt-stenu-v-vk-kak-skryt-zapis-na-stene-vkontakte-ot-odnogo/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/a2410d1813279b52d85e14e61e6923ff.jpg" alt="Как скрыть запись на стене ВКонтакте от одного человека (без ЧС)?" / loading=lazy></span>
</span>
<span class="title">Как скрыть запись на стене ВКонтакте от одного человека (без ЧС)?</span>
</span>
</a>
</li>
<li>
<a href="/accessories/samsung-core-2-instrukciya-po-polzovaniyu-komplekt-postavki-i-upakovka/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/0f6ed105c5359644a2959824eceebda1.jpg" alt="Комплект поставки и упаковка" / loading=lazy></span>
</span>
<span class="title">Комплект поставки и упаковка</span>
</span>
</a>
</li>
<li>
<a href="/notebooks-and-ultrabooks/pochemu-zatonul-titanik-dobavit-svoyu-cenu-v-bazu-kommentarii/">
<span class="post">
<span class="image">
<span class="thumb"><img src="/uploads/c04bd5360f1e193be4a6bc585c0cd76f.jpg" alt="Добавить свою цену в базу Комментарий" / loading=lazy></span>
</span>
<span class="title">Добавить свою цену в базу Комментарий</span>
</span>
</a>
</li>
</ul>
</div>
</aside>
<aside id="text-3" class="sidebar-widget widget_text">
<div class="textwidget">
<div class="sticky-block">
</div>
</div>
</aside>
</div>
</div>
</div>
<footer class="site-footer">
<div class="footer-container">
<div class="logo-area">
<span class="logo1">
</span>
</div>
<div class="pane-right">
<ul id="menu-v-podvale" class="menu">
<li class="menu-item type-post_type object-page "><a href="">О проекте</a></li>
<li class="menu-item type-post_type object-page "><a href="/feedback/">Контактная информация</a></li>
<li class="menu-item type-post_type object-page "><a href="">Реклама на сайте</a></li>
</ul> <div class="credits">
<p class="copy">© 2024 jibiar.ru</p>
Компьютерные подсказки и полезные советы
</div>
</div>
</div>
</footer>
<div id="sendresult" style="display: none;">
<div class="popup-win">
<p class="win-title">Спасибо!</p>
<p class="win-message">Ваше сообщение отправлено.</p>
</div>
</div>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=cyrillic">
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<script src="https://jibiar.ru/wp-content/themes/domotmoem/js/bxslider/jquery.bxslider.min.js"></script>
<script src="https://jibiar.ru/wp-content/themes/domotmoem/js/fancybox/jquery.fancybox.pack.js"></script>
<script src="https://jibiar.ru/wp-content/themes/domotmoem/js/share/share.min.js"></script>
<script src="https://jibiar.ru/wp-content/themes/domotmoem/js/app/app.min.js"></script>
<style type="text/css">
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
.dwqa-questions-list .dwqa-question-item {
padding-left: 70px;
}
.dwqa-questions-list .dwqa-question-item .avatar {
position: static;
width: 12px;
height: 12px;
margin-right: 5px;
margin-top: 0;
display: inline-block;
}
.dwqa-question-item .dwqa-status {
position: absolute;
left: 15px;
top: 50%;
width: 36px;
height: 36px;
margin-top: -18px;
border-radius: 36px;
text-indent: -9999px;
padding: 0;
background: none;
box-shadow: 0 0 0 1px #e67e22 inset;
}
.dwqa-question-item .dwqa-status:after {
content: "\f128";
display: block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #e67e22;
text-indent: 0;
font-size: 18px;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
top: 0;
position: absolute;
}
.dwqa-question-item .dwqa-status-closed {
box-shadow: 0 0 0 1px #666 inset;
}
.dwqa-question-item .dwqa-status-closed:after {
color: #666;
content: "\f023";
}
.dwqa-question-item .dwqa-status-resolved {
box-shadow: 0 0 0 1px #578824 inset;
}
.dwqa-question-item .dwqa-status-resolved:after {
color: #578824;
content: "\f00c";
}
.dwqa-question-item .dwqa-status-answered {
box-shadow: 0 0 0 1px #1ba1e2 inset;
}
.dwqa-question-item .dwqa-status-answered:after {
color: #1ba1e2;
content: "\f112";
font-size: 14px;
}
</style>
<script type='text/javascript' src='https://jibiar.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.2'></script>
<link rel='stylesheet' id='in_posts_adv-css' href='/wp-content/plugins/in-posts-adv/css/ipa.min.css?ver=8e8e885e5afaeff2f05325ad207caad6' type='text/css' media='all' />
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.8'></script>
<script type='text/javascript' src='https://jibiar.ru/wp-content/plugins/in-posts-adv/js/ipa.min.js?ver=8e8e885e5afaeff2f05325ad207caad6'></script>
<script>
(function(){
var a = document.querySelector('.sticky-block'), b = null, P = 20;
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
if (b == null) {
var Sa = getComputedStyle(a, ''), s = '';
for (var i = 0; i < Sa.length; i++) {
if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div');
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild);
var l = a.childNodes.length;
for (var i = 1; i < l; i++) {
b.appendChild(a.childNodes[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px';
a.style.padding = '0';
a.style.border = '0';
}
var Ra = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('.footer-container').getBoundingClientRect().top + 0);
if ((Ra.top - P) <= 0) {
if ((Ra.top - P) <= R) {
b.className = 'stop';
b.style.top = - R +'px';
} else {
b.className = 'sticky';
b.style.top = P + 'px';
}
} else {
b.className = '';
b.style.top = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
} , false);
}
} )()
</script>
</body>
</html>
