Microsoft FrontPage для Windows 10 дозволяє створювати веб-сайти без вивчення HTML-мови. Досить тільки помістити потрібний текст на сторінку проекту, розмістивши в місцях картинки. Доступна розробка плагінів, ефектів, без використання складних утиліт, спеціальних скриптів.
Додаток має набір інструментів для взаємодії з сайтом. Використовуються вбудовані шаблони, що дозволяють створити ключові веб-сторінки, або контент загалом. Можливе застосування професійних дизайнерських прийомів, текстових стилів. Є комплекс опцій реалізації індивідуального стилю. Рекомендуємо завантажити Microsoft FrontPage для Windows 10 російською мовою без реєстрації та смс із офіційного сайту.
Інформація про програму- Ліцензія: Безкоштовна
- Розробник: Microsoft
- Мови: російська, українська, англійська
- Пристрої: пк, ноутбук, ноутбук (Acer, ASUS, DELL, Lenovo, Samsung, Toshiba, HP, MSI)
- ОС: Windows 10 Домашня, Професійна, Корпоративна, PRO, Enterprise, Education, Home Edition(оновлення 1507, 1511, 1607, 1703, 170
FrontPage 2007 - SharePoint Designer 2007
Отже, як я встиг помітити, багато користувачів мережі Інтернет намагаються завантажити російську версію FrontPage 2007. Увага, програма FrontPage тепер називається SharePoint Designer.Тобто. якщо ви хотіли завантажити FrontPage 2007, то вам потрібно завантажити SharePoint Designer 2007. Більше того, з квітня 2010 року програма SharePoint Designer 2007 стала абсолютно
безкоштовною!
Програму можна завантажити з сайту Майкрософт, а тим, кому ліньки шукати, то з депозитфайлс пройшовши за посиланням SharePoint Designer 2007. Отже, що нового?
Особливих труднощів при роботі з програмою SharePoint, у тих, хто працював з FrontPage 2003, виникнути не повинно, т.к. інтерфейс програми мало змінився.
Інтерфейс програми SharePoint Designer 2007
Отже, чи варто переходити на SharePoint Designer 2007 чи краще продовжувати користуватися FrontPage? Впевнений, що вартує. Справа в тому, що після появи програми FrontPage 2003 товариші з Microsoft не спали і внесли багато корисностей в SharePoint Designer 2007.
Наприклад, багаторазово посилено можливість створення каскадних таблиць стилів (CSS). Скажу більше – тепер є можливість створення CSS у візуальному режимі! Тобто. можна бути повним нулем в HTML (мова розмітки гіпертексту) і створювати таблиці стилів для свого сайту.
Завдяки нововведенням код, створюваний SharePoint став набагато чистішим, ніж код FrontPage. Взагалі рекомендую подивитися на один приклад із цього приводу Користувачам FrontPage 2003.
Насамкінець хочу сказати, що вже з'явилася Нова версіяпрограми SharePoint Designer 2010 (можете її називати FrontPage 2010 🙂 Але з нею все не так просто, як із SharePoint 2007, справа в тому, що нова версія програми максимально зав'язана на спільну роботу великої кількостілюдей над одним проектом. Для роботи з SharePoint Designer 2010 необхідно, щоб на сервері було інстальовано відповідне програмне забезпечення. Можна попросити хостера його встановити, але ж за це доведеться платити.
Тому на даний момент для не дуже вимогливих користувачів підійде саме SharePoint Designer 2007.
До складу комплексу програм Microsoft Office входить кілька програм, які дозволяють створювати, редагувати та розміщувати на сервері Web-сторінки. Однією з них є порівняно проста програма FrontPage . З її допомогою можна створювати складні сторінки, які задовольнять запити навіть професійного Web-дизайнера.
При створенні Web-сторінки слід прагнути до надання їй привабливого зовнішнього вигляду, Бо приваблива сторінка частіше відвідується. При цьому у сторінці слід поєднати дві суперечливі властивості – привабливість та мінімум пам'яті. Можна обмеженою кількістю малоємних засобів, наприклад квітами замість малюнків, створити небагату, але дуже привабливу сторінку і, навпаки, можна оснастити її безліччю малюнків, кольорів, форматів та інших елементів розмітки, набір та розміщення яких дадуть сторінку, яка може розглядатися як зразок багатої несмаку. . Процес створення Web-сторінки є творчим, тому його називають Web-дизайном. Відомо, що деякі Web-дизайнери витрачають на створення не найскладнішої сторінки по кілька місяців, повертаючись до неї багато разів, у пошуках найбільш виразного способу її втілення, у той час як сторінку з тим же змістом можна було б створити не більше ніж за годину роботи. Якщо одного разу пошитий костюм важко перешити кілька разів, то Web-сторінку можна "перешивати" і покращувати стільки, скільки потрібно точно відповідно до того, як поет покращує свій твір, доводячи його до вершини досконалості.
Втім, не всі дотримуються такої думки, резонно помічаючи, що Web-сторінка – це інформація для поширення, і для цього зовсім не обов'язково перетворювати її на витвір мистецтва, тим більше, що це вимагає багато часу.
Звідси випливає практичний висновок - головні, титульні, рекламні сторінкислід виконувати привабливими, а сторінки, призначені для поширення "сухої" інформації, наприклад, текстів наказів, посадових інструкцій, будь-яких планів та іншого – з мінімумом розмітки.
1. Інтерфейс FP
Програма створення та редагування Web-сторінок Front Page знаходиться у папці офісних програм Microsoft Office.
Після запуску FP на екрані з'являється вікно, вигляд якого показано на мал. 1. Для цього прикладу у вікні програми відкрито для редагування дане методичний посібник, Яке написано за допомогою FP.
|
|
| Рис. 1. Вікно програми Front Page |
Програма містить меню та кілька панелей інструментів. На той час, коли користувач FP вирішує взятися за Web-дизайн, він, як правило, добре володіє навичками роботи з програмою Word із сімейства Microsoft Office, тому інтерфейс FP, складений у стилі Microsoft-дизайну і дуже схожий на інтерфейс програми Word, не створить особливих труднощів у роботі.
Інтерфейс програми – меню, панелі, кнопки та інші елементи – зручніше пояснювати в міру потреби у його елементах у ході створення або редагування Web-сторінок, приклади яких будуть розглянуті у цьому розділі.
При розробці сторінки програма автоматично створює файл розмітки, текст якого FP пише мовою HTML (мова гіпертекстової розмітки). У цей файл можна вносити зміни вручну (більше того, текст програми можна скласти у звичайному текстовому редакторі, навіть найпростішому, наприклад, як Notepad, однак це занадто обтяжливо). Для переходу до вбудованого текстового редактора FP потрібно клацнути в нижній частині вікна по ярлику Код, а потім в редакторі тексту внести зміни. Якщо розробник не впевнений у своєму професіоналізмі, то краще змін HTML-текст не вносити, тому що помилки редагування буде важко виправити. Для повернення на сторінку слід клацнути по ярлику Конструктор.
Для того, щоб подивитися як сторінка буде виглядати в браузері, слід клацнути на ярлику. Перегляд. Слід зазначити, що коректно в цьому режимі відображаються лише дуже прості сторінки. Тому краще сторінку переглядати у професійному браузері, наприклад Firefox. Для цього слід знайти файл сторінки в папці та відкрити його у браузері (зазвичай усі Web-сторінки відкриваються у браузері).
2. Створення нової Web-сторінки
Для створення нової Web-сторінки слід натиснути на кнопку Створення нової звичайної сторінки, розташованої на панелі Стандартна. Деякі кнопки цієї панелі з відповідними коментарями показано на мал. 2.
Можна створити нову сторінкупо іншому. У меню Файлклацніть на рядку Створити. Програма справа видасть вікно із шаблонами стандартних сторінок. З нього можна вибрати якийсь шаблон і використовувати його як основу майбутньої сторінки. Якщо потрібна чиста сторінка, потрібно клацнути на шаблоні Порожня сторінка.
У FP можна також створювати кадри, які дозволяють бачити одночасно кілька веб-сторінок на екрані монітора. Фрейми – це багатовіконні веб-сторінки. Web-дизайнеру-початківцю від використання фреймів слід утриматися.
Тепер можна зберегти сторінку. Для цього слід натиснути на кнопку Зберегтипотім зберегти сторінку як файл на диску свого комп'ютера. При збереженні сторінки краще одразу створити під неї окрему папку з тим ім'ям, яке Ви збираєтеся давати файлу. Web-сторінки зазвичай зберігають у файлах із розширенням .htmабо .html(від назви мови HyperText Markup Language – мова гіпертекстової розмітки). Наприклад, якщо Ви маєте намір зберегти файл під ім'ям about.htm, слід створити папку з ім'ям about, в області диска, в якій будуть розміщуватися Ваші Web-сторінки. Перед збереженням першої сторінки краще створити таку область у вигляді папки, наприклад, папки з ім'ям Web-сторінки Федорової. Тепер у ній слід створити згадану папку about, а в ній – зберегти сторінку about.htm.
3. Властивості Web-сторінки
Далі необхідно заповнити значеннями деякі важливі властивості сторінки. Для цього слід клацнути правою клавішею миші у зоні сторінки, потім у контекстному меню – на рядку Властивості сторінки. Відобразиться діалогове вікно для введення властивостей сторінки (рис. 3). Вікно має 5 закладок
Загальні, Форматування, Додатково, Інші, Мова .На рис. 3 у вікні активізована закладка
Загальні. У рядкуНазва необхідно внести заголовок сторінки.Тут можна підключити звуковий файл у зоні
Фоновий звук. Звук супроводжуватиме перегляд цієї сторінки на комп'ютері, який її відкрив. Зрозуміло, щоб прослуховувати фоновий звук на комп'ютері користувача має бути встановлений динамік. Зазвичай фоновий звук відтворюється прокручуванням звукового файлу з розширенням .wav. Для підключення файлу потрібно натиснути кнопку Оглядта за допомогою діалогового вікна підключити такий файл. Для звичайної сторінки не потрібно підключати звуковий файл.для створення підкладки сторінки. Підкладкою називається основне тло сторінки. Фоном може бути колірабо малюнок. Вигляд вікна властивостей сторінки на закладці Background показано на рис. 4.Якщо потрібно вибрати фон у вигляді кольору, то потрібно натиснути на кнопку списку Фон
та вибрати колір зі стандартного набору кольорів. У початковому стані встановлено колір за промовчанням. Зазвичай кольором за промовчанням є білий колір.Якщо пропоновані кольори Вас не влаштовують, слід клацнути на кольорі
Custom(Користувачський). У діалоговому вікні можна вибрати колір будь-якого з 16 "777" 216 відтінків. Вигляд вікна вибору кольору користувача показана на рис. 5.Для вибору кольору користувача слід спочатку призначити базовий колір з основної палітри, потім праворуч у квадраті палітри клацнути на приблизному кольорі (ця точка відзначена хрестом), потім у стовпці праворуч вибрати бажаний відтінок (він позначений трикутником поряд з курсором миші). У квадратику "Колір/Заливка" можна оцінити вибраний колір візуально. Справа від нього показані спектральні характеристики вибраного кольору. Ці параметри можна змінювати вручну.
Якщо вибраний колір є нестандартним (відтінок) і його необхідно в сеансі редагування використовувати кілька разів, можна його помістити в список "Додаткові кольори", розташований під основною палітрою. Для цього потрібно перед вибором клацнути на вікні додаткового кольору, вибрати відтінок і натиснути на кнопку "Додати в набір". Для виходу з вікна потрібно натиснути кнопку ОК.
Якщо фоном сторінки повинен бути малюнок, слід на цій закладці відкрити потрібний малюнок.
. Бажано, щоб цей файл знаходився в тій папці, де зберігається файл сторінки. На рис. 6. показаний приклад фону як малюнка, що зберігається у файлі butterfly.gif.Як видно із рис. 6, фоном є багаторазово повторений малюнок із зображенням метелика ( butterfly).
Для порівняння на рис. 7 окремо показано сам малюнок.
Відразу зазначимо, що наведений приклад – це приклад поганого вибору підкладки, тому що зображення затуляє поле сторінки і від нього, що називається "рябить в очах". Перевага його лише в тому, що він показує як малюнок створює тло на сторінці.
Якщо необхідно, щоб фон був статичним, тобто щоб при прокручуванні довгої сторінки в браузері фон залишався нерухомим, потрібно встановити опцію Зробити підкладкою.
На практиці як фон зазвичай вибирають слабонасичені малюнки для того, щоб створити бажаний фон, але не фокусувати на ньому увагу переглядає сторінку. Втім, вибір фону – справа смаку
Web- дизайнера.Зазвичай фонові малюнкимають формати
bmp, gif, jpg , png .Слід пам'ятати, що малюнок – зазвичай найємніший по пам'яті елемент Web-сторінки. Тому його завантаження браузером із сервера займає найбільш тривалий час. Якщо швидкість з'єднання невелика, а сторінка, що завантажується, містить кілька об'ємних малюнків, то завантаження цієї сторінки може затягнутися. Той, хто переглядає таку сторінку, може втомитися від очікування кінця завантаження та скасувати його. Тому слід прагнути максимально мінімізувати обсяг малюнків та їх кількість на сторінці.
Вважається, що фон має прийнятні розміри, якщо об'єм малюнка не перевищує 1-5 кілобайт (К). Краще, якщо він менший за кілобайт. Для порівняння скажемо, що обсяг самої Web-сторінки зазвичай не перевищує 10–20 К. Лише сторінки з великою кількістю тексту мають великі розміри. Причина в тому, що Web-сторінка – це програма (інструкція) про те, як і що розміщувати на екрані браузера користувача. Наприклад, якщо в такому місці екрана потрібно помістити малюнок розміром 150 К, то в Web-сторінці інструкція з цього приводу може займати всього 50 байт, тобто в 3000 разів менше самого малюнка, який передається в комп'ютер переглядає окремо від Web -Сторінки. Оскільки кількість таких інструкцій невелика, то розмір самої сторінки також порівняно невеликий.
На закладці
Форматуваннятакож можна встановити колір тексту. Тут же можна встановити кольори текстових гіперпосилань, які відображатимуться в браузері сторінки, що переглядає: колір всіх текстових гіперпосилань, колір гіперпосилань, до яких користувач вже звертався, колір гіперпосилання, на яку наведено курсор миші.На закладці Додатковоможна встановити відступи сторінки від верхнього лівого кута вікна перегляду в браузері. За замовчуванням встановлено відступи по 8 пікселів.
На закладці
Моваможна встановити спеціальні мови кодування тексту для збереження та завантаження сторінки.4. Використання таблиць
Таблиці є, мабуть, найефективнішим та незамінним засобом розмітки Web-сторінок. Якщо без фону можна обійтися, то без таблиці це зробити практично неможливо.
Кожна таблиця складається з осередків, які розташовуються по рядках та стовпцях. Окремі осередки можна об'єднувати, встановлювати відступи внутрішнього вмісту від її меж, задавати відстань між осередками, встановлювати положення елементів, що розміщуються всередині них, створювати окремі від інших осередків підкладки, створювати контури, вставляти всередину осередків інші таблиці і багато іншого.
Вставка таблиці
Щоб вставити таблицю на сторінку, потрібно виконати команду меню
Табліця/Вставити/Таблиця. У вікні, яке показано на рис. 8, слід встановити кількість рядківта стовпців. Також можна встановити положення таблиці на сторінці. Зазвичай положення за умовчанням є лівим. Однак, якщо необхідно, щоб у вікні браузера при перегляді таблиця завжди орієнтувалася посередині в горизонтальному напрямку, потрібно встановити опціювирівнювання по центру.Опція розміру межі призначена для завдання товщини ліній, що обмежують таблицю та комірки. Якщо вона встановлена в нуль і стоїть галочка Згорнути межу таблиці, то в браузері кордону не буде видно. Це дозволяє використовувати невидиму таблицю для розмітки сторінки.
Властивість
Поле осередківпризначений для вказівки відступів у пікселах від внутрішнього вмісту для всіх осередків таблиці. Властивість Інтервал осередківдозволяє встановити відстань у пікселах між усіма суміжними осередками таблиці. Задати ширинупризначена для завдання ширини таблиці у пікселах або у відсотках по відношенню до ширини вікна перегляду незалежно від розмірів вмісту. За замовчуванням вона вимкнена. Це означає, що розмір таблиці визначається розмірами її вмісту.Якщо необхідно встановити стильову та фонову розмітку таблиці, це можна зробити в цьому ж вікні.
Після закінчення розмітки таблиці необхідно натиснути кнопку ОК.Розмітка осередків таблиці
Операції над окремими осередками чи всією таблицею слід розпочати з виділення осередків. Виділити можна мишею, з клавіатури або за допомогою інструментарію
FP. Для виділення мишею потрібно встановити курсор миші на якийсь осередок виділеної області, натиснути ліву клавішумиші та при натиснутій клавіші плавно провести нею по осередках. Щоб виділити клавіатурою потрібно встановити клавіатурний курсор в комірку, натиснути клавішу Shift і при натиснутій клавіші натискати потрібні клавіші руху клавіатурного курсору (вгору, вниз, ліворуч, праворуч) доти, доки бажана область комірок не буде виділена. Можна виділити окремий стовпець або рядок, а також всю таблицю.Для об'єднаннявиділених осередків потрібно навести курсор будь-яку їх, натиснути праву клавішу миші. У спливаючому контекстному меню потрібно клацнути по рядку Об'єднати комірки. Аналогічно можна видаляти комірки.
Якщо необхідно розбитиодин або кілька осередків на кілька рядків або стовпців, потрібно їх виділити (при розбитті одного осередку виділення не потрібно), виконати команду Розбити осередки. У вікні розбивки потрібно вказати як робити розбивку - на стовпці або на рядки. Потім слід вказати кількість стовпців або рядків. Це вікно показано на мал. 9.
Тут можна встановити положення вмісту по горизонталі або по вертикалі. Для цього слід вибрати бажане горизонтальне положення (по центру, ліворуч, праворуч) або вертикальне положення(Вгорі, по середині, в самому низу, щодо осі). На рис. 10 вертикальне положення осередку – зверху(при розміщенні внутрішні елементи будуть притиснуті до верхнього краю комірки), горизонтальне – по центру(Вміст буде центруватися).
Можна встановити ширину висоту осередку в пікселах або відсотках.У секції фону можна встановити фон комірки у вигляді кольору або малюнка так само, як програмують фон сторінки.
Якщо потрібно призначити однакові атрибути кільком осередкам, наприклад, встановити їм однаковий фон, це можна зробити за один прийом. Слід виділити такі осередки, потім розмітити їх описаним способом. Якщо потрібно призначити деякі атрибути всім осередкам, краще призначити їх самої таблиці. Для цього потрібно клацнути на будь-якому осередку, виконати ту саму команду.
5. Вставка та форматування тексту
Для вставлення тексту на сторінку потрібно клацнути мишу, щоб встановити клавіатурний курсор у потрібне місце і внести туди текст з клавіатури або скопіювати його з іншого документа за допомогою буфера обміну Windows. У такий спосіб можна вносити текст безпосередньо на сторінку або в комірки таблиць.
Під форматуванням розуміється призначення шрифту, його розмірів, розмітка кольором, жирністю, курсивом, підкресленням, орієнтація тексту по горизонталі та інших дій. Ці операції виконуються відповідно до стандартів, прийнятих у редакторі Word: спочатку потрібно виділити ділянку тексту, потім застосувати до неї операцію форматування.
На відміну від редактора Word полягає лише в тому, що при натисканні клавіші Enter (з метою вставлення нового абзацу) між абзацами утворюється занадто великий інтервал. Якщо потрібно, щоб інтервал між абзацами був таким самим, як між рядками одного абзацу, слід натиснути клавішу Shift і, не відпускаючи її, клавішу Enter.
6. Вставка гіперпосилань
Гіперпосиланнямназивається будь-який елемент Web-сторінки, за яким може бути закріплене посилання на іншу Web-сторінку, адресу електронної пошти, малюнок і взагалі будь-який файл або закладку на цій же сторінці. Їхня активізація проводиться клацанням миші за посиланням. Визначити гіперпосилання на Web-сторінці при перегляді її в браузері можна за видом курсору миші: якщо елемент є гіперпосиланням, то при наведенні на нього курсор набуває форми значка .
Для створення гіперпосилання спочатку слід виділити елемент сторінки, який стане майбутнім гіперпосиланням. Якщо гіперпосиланням буде текст, то для виділення слід плавно провести по ньому мишею з лівою натиснутою клавішею або клавішами переміщення клавіатурного курсору з натиснутою клавішею
Shift. Якщо гіперпосиланням буде малюнок, то для виділення досить просто натиснути на нього., Вигляд якого показаний на рис. 12.Якщо гіперпосиланням має стати вказівник на іншу сторінку, яка знаходиться на диску Вашого комп'ютера, потрібно клацнути у вікні рис. 12 по кнопці із зображенням папки та вибрати на диску Web-сторінку (зазвичай це файл із розширенням htmlабо
htm ). При цьому у рядку адреси з'явиться відносна адресафайлу з Web-сторінкою. Відносною адресою сторінки, яка знаходиться в тій же папці, що й створювана сторінка є просто ім'я файлу, наприклад "photo2.htm". Якщо посилання вказує на файл за межами цієї папки, то гіперпосилання може набути вигляду рядка "../../HomePage.htm", тобто посилання на сторінку HomePage.htm у тому ж комп'ютері, але в іншій папці, яка знаходиться на два рівні вище поточної папки. Відносні адреси дуже зручні при створенні групи Web-сторінок, які знаходяться на одному сервері, але в різних папках і пов'язані гіперпосиланнями. Після підготовки сторінок на звичайному комп'ютері можна відправити їх на Web-сервер, не побоюючись, що буде порушено зв'язок між сторінками та гіперпосиланнями, тому що на сервері відносна структура їх розміщення залишиться колишньою і, отже, гіперпосилання "працюватимуть".Для створення абсолютного
адреси слід ввести повну адресу сторінки. Наприклад, якщо необхідно створити посилання на адресу сайту Московського державного університету, то в рядку URL потрібно внести текст доменного імені http://www.msu.ru. Можна внести текст із зазначенням IP-адреси, наприклад http://192.206.228.46.Для створення такого гіперпосилання слід у рядку адреси внести текст виду mailto:адреса. Наприклад, якщо необхідно, щоб після клацання по гіперпосиланню було запущено поштовий клієнтдля надсилання листа на адресу o [email protected].ru, то в рядку введення адреси потрібно внести текст mailto:o [email protected].ru . Можна також клацнути по кнопці із зображенням конверта і у вікні, що відкрилося, внести цю ж адресу без вказівки префікса mailto:.
Іноді необхідно створити посилання на сторінку, яка вже знаходиться у браузері. Наприклад, потрібно швидко повернутися до початку сторінки, до будь-якого її абзацу і т. д. Зазвичай потреба в таких посиланнях виникає на тих сторінках, які містять велику кількість інформації. Адреса такого гіперпосилання називається закладкою.
Перед створенням гіперпосилання на закладку, останню необхідно заздалегідь створити. Для цього потрібно виділити майбутню закладку (фрагмент тексту, малюнок і т. д.) та виконати команду Вставка/Закладка. У вікні, вид якого показаний на рис. 13, слід у рядку введення внести ім'я закладки та клацнути на кнопці ОК. У наведеному прикладі рис. 13 сторінка вже має одну раніше створену закладку Закладка 1, а у вікні введення підготовлений текст Закладка 2іншої закладки. Далі слід вийти з вікна створення закладки, виділити у вікні створення сторінки елемент гіперпосилання на закладку, кнопкою Закладка(Рис. 12) вибрати зі списку потрібну закладку. Її текст буде розміщено в рядку адреси. Наприклад, якщо вибрано закладку Закладка 2, то гіперпосилання в рядку адреси набуде вигляду рядка #Закладка 2. Після натискання кнопки ОК гіперпосилання на закладку буде створено.
Програмування вікна відображення
Після клацання по гіперпосиланню на Web-сторінкупочинається її завантаження до браузера. Зазвичай вона завантажується в те саме вікно, в якому знаходиться сторінка, що викликає. Якщо потрібно, щоб сторінка завантажилася у нове вікно, слід у вікні мал. 12 клацнути по кнопці праворуч від напису введення Вибір рамки. У вікні слід вибрати рядок Нове вікно. Тепер після клацання за таким гіперпосиланням в браузері буде запущено одне вікно і в ньому з'явиться вміст, що завантажується.
Крім розглянутого існує кілька інших варіантів представлення сторінки, що викликається в браузері. Вони відносяться до більш складних - фреймових сторінок, які мають значно більші можливості для Web-дизайну. Особливості конструювання кадрових сторінок будуть розглянуті нижче.
7. Вставка нетекстових елементів
Для вставляння нетекстових елементів на сторінку слід використовувати позицію меню Вставка. Ця ж операція частини елементів може бути продубльована з панелей FP.
Список меню показано на рис. 14. Рядки, що містять підменю, позначені праворуч покажчиком у вигляді трикутника. Операції, які можна продублювати "гарячими" клавішами, позначені назвою комбінації клавіш.
 |
Рис. 14. Основний |
Наведемо деякі найчастіше використовувані нетекстові елементи меню Insert:
- Розрив . Перехід до нового абзацу без спеціального інтервалу (те, що Shift + Enter);
Розглянемо деякі особливості вставки цих елементів.
Горизонтальна лінія
Для її вставки клацніть на потрібне місце сторінки, виберіть з меню рядок Вставка/Горизонтальна лініяі клацанням по ній вставте елемент. Якщо потрібно змінити атрибути лінії, наведіть на неї курсор миші, клацнувши правою клавішеювикличте контекстне меню і клацніть по рядку Звластивості горизонтальної лінії . З'явиться вікно з такою самою назвою, в якому можна змінити атрибути лінії: ширину, висоту, колір та інші атрибути.
Нерідко виникає потреба вставки лінії з призначеними атрибутами в різні місця сторінки. Для цього потрібно клацнути по лінії, потім по кнопці
копіювання на панелі Стандартнадля копіювання лінії у буфер обміну. Тепер потрібно натиснути на потрібне місце сторінки, потім по кнопці вставкищоб вставити вміст буфера у вибране місце. У такий спосіб можна вставляти лінію багаторазово в різні місця сторінки.П р і м е ч а н е. Описаний спосіб може бути використаний для копіювання будь-яких елементів Web-сторінки.
Малюнок є найважливішим елементом веб-сторінки. Рідко можна знайти сторінку, де б не було малюнка. Крім основної ролі – нести зображення, малюнки використовують для стилізації написів, створення різноманітних ліній, рамок, зображення графіків, тобто усюди, де необхідно подати інформацію у вигляді графічного образу.
Для вставки потрібно клацнути в місце сторінки, де повинен бути розташований малюнок, виконати команду Вставка
/Малюнок/З файлуабо натиснути на кнопку Вставити малюнок із файлуна панелі Стандартна(Рис. 5.2). У вікні слід вибрати на диску файл з малюнком і натиснути кнопку ОК.Після вставки можна виконати розмітку або залишити його без змін. Для розмітки потрібно клацнути правою кнопкою миші на малюнку, потім у контекстному меню по рядку
Властивості малюнка. У діалоговому вікні, вид якого показано на рис. 15 можна виконати розмітку малюнка.На закладці Загальнівказано ім'я файлу, який представляє малюнок. Можна змінити малюнок, вибравши інший файл.
У рядку Текстможна ввести текст, який представлятиме спливаючу підказку. Коли користувач у браузері наведе курсор на малюнок, вона спливе під курсором на короткий час.
Якщо малюнок повинен виконувати роль гіперпосилання, на тій самій закладці можна вибрати адресу гіперпосилання.
Якщо необхідно створити відступи малюнка від суміжних елементів сторінки, можна використовувати властивості інтервалівдля горизонтальних відступів ліворуч та праворуч і для вертикальних відступів зверху та знизу. У секції Розмірможна змінити розміри малюнка, його пропорції. Малюнок можна розтягнути, стиснути у потрібному напрямку, використовуючи властивості ширини та висоти. Розміри можна задавати в абсолютних одиницях - пікселах або у відносних - відсотках по відношенню до дійсних розмірів малюнка. Якщо необхідно, щоб при деформації зберігалися пропорції малюнка, слід встановити опцію Зберігати пропорції.
Формати малюнків
Розрізняють малюнки, виконані у форматі растрової графікита у форматі векторної графіки.
У растрової графіці файл записується інформація про всіх пікселах малюнка, а кожен піксел представляється у вигляді послідовності бітів, що зберігають характеристики пікселя - колір, яскравість, контрастність, координати та інші характеристики. Растрові формати можна назвати природними, тому що інформація про малюнок зберігається в тому вигляді, в якому вона представляється на екрані монітора, тому для виконання операцій виведення потрібно мінімум часу. Однак, растрові малюнки зазвичай вимагають багато пам'яті для свого зберігання, тому виправдане розміщення на сторінці тільки невеликих малюнків. Для зменшення обсягу файлу растрових малюнків використовують методи стиснення. У порівнянні з оригіналом стислий малюнок зазвичай займає в десятки разів меншу пам'ять. Стислі растрові малюнки завантажуються швидше, але вимагають деякого часу на розпакування малюнка.
Векторна графіка використовується переважно для зображення геометричних фігур за допомогою математичних формул. Такий спосіб представлення малюнка дуже ефективний, тому що не вимагає зберігання даних про кожен піксел, а уявлення малюнка зводиться до математичних обчислень та виконання інструкції з формування графічного об'єкта. Зазвичай такі малюнки використовуються у конструкторських програмах, наприклад
CAD.Існує також формат метафайлу, який поєднує обидва види графіки. Прикладом є файли із розширенням .wmf. Такі файли використовуються, наприклад, для представлення малюнків у популярному редактору Word, коли для додання текстовим документамнеобхідного виду розміри малюнків доводиться часто міняти.
В даний час серед розробників Web-сторінок використовуються два широко популярні растрового формату – GIF(Graphics Interchange Format – формат обміну графікою), розроблений у 1987 р. та вдосконалений у 1989 р. фірмою CompuServe, та JPEG, який отримав скорочену назву групи розробників Joint Picture Experts Group
У GIF-форматі (файли з розширенням
.gif) зображення кодується блоковим способом. Після отримання на комп'ютер воно декодується та відтворюється на екрані монітора. GIF-формат дає найменші обсяги пам'яті файлів для малюнків, що мають обмежену кількість кольорів.Застосування формату GIF дозволяє створювати багато ефектів, включаючи прозорість
(Transparency). Цей ефект широко використовується, коли малюнок потрібно подати у вигляді, відмінному від прямокутного. У цих випадках частина прямокутного зображення зафарбовується спеціальним кольором прозорості, а інша – звичайними кольорами. Після розміщення на сторінці малюнок у тих пікселах, які зафарбовані кольором прозорості, замінюється пікселами кольору підкладки, а інші пікселі відтворюються звичайним способом, створюючи таким чином ефект прозорості. Тепер той самий малюнок можна класти на підкладки різних кольорів, не побоюючись, що при розбіжності кольорів будуть відтворені небажані прямокутні контури малюнка. Для створення прозорих GIF-малюнок можна використовувати безліч графічних редакторів, наприклад Photo Shop.Інший ефект полягає в способі відтворення завантажуваного GIF-малюнку в броузері. Якщо малюнок збережено у форматі interlaced(що чергується), то при передачі на браузер він завантажується з різних частин зображення. При низькій швидкості з'єднання створюється ефект поступового прояву малюнка від розмитого початку завантаження до чіткого після закінчення. Переваги малюнків з форматом, що чергується, очевидні, тому що часто задовго до закінчення завантаження сторінки з небажаним малюнком користувач може припинити її, заощадивши тим самим на часі, яке йому довелося б витратити, чекаючи в невіданні передачі всього малюнка звичайного формату. Програма FP дозволяє створювати ефект чергування для будь-яких малюнків GIF.
GIF-малюнки можна використовувати для створення примітивної мультиплікації, яка використовується на Web-сторінках для анімації ("жвавлення") її вмісту. Анімаційні ефекти, безсумнівно, прикрашають сторінку, часто служать засобом залучення уваги до окремих її фрагментів. Зворотною стороною є підвищені обсяги файлів, що містять анімовані малюнки. Для створення анімаційних GIF-малюнок можна використовувати багато програм - від простих до дуже складних, що дозволяють створювати в одному файлі цілі мультиплікаційні фільми. Приклад простої програми анімації є MP Gif Animator (автор В. Фам). Потужною програмоюАнімація є Ulead GIF Animator Lite (продукт компанії Ulead Systems).
У форматі JPEG (файли з розширеннями) .jpg, рідше .jpeабо jpeg) переважно зберігати в стислому вигляді багатобарвні малюнки, наприклад фотографії природи, високоякісні зображення багатої палітри кольорів. При збереженні зображення в графічних редакторах (наприклад, Photo Shop) можна керувати обсягом файлу та якістю зображення, які знаходяться у зворотній залежності один до одного. Цією властивістю часто користуються розробники Web-сторінок для того, щоб гранично мінімізувати файли з малюнками, дещо втративши їх якість. Нерідко такі зображення практично не відрізняються візуально, але можуть у 1,5-3 рази відрізнятися за обсягом відповідних файлів.
Не можна залишити без уваги файли з малюнками BMP-формату (файли з розширенням .bmp). Цей один із перших графічних форматів. Малюнки в цьому форматі займають дуже багато пам'яті, однак він використовується, але тільки для представлення дуже маленьких зображень.
Нещодавно спеціально для Web розроблено новий PNG-формат малюнків, який має замінити GIF-формат.
Серйозним ресурсом зменшення розмірів графічних файлівє спеціальна обробка зображень у графічних редакторах. Дуже часто вдається практично без погіршення якості малюнку зменшити файл у кілька разів. На рис. 5.16 показаний приклад редагування зображення за допомогою графічного редактора Photo Shop.
При перетворенні фотографії за допомогою сканера у файл у ньому навіть на такій невеликій ділянці зображення, як комірець білої сорочки, утворилося безліч пікселів з різними колірними характеристиками. Збереження цих особливостей при стисканні зображення вимагає "індивідуального" підходу до кожного з них, наслідком є невиправдано великий обсяг файлу.
Ліворуч на рис. 16 показана панель інструментів графічного редактора, у середині знизу – фотографія, зверху – збільшений фрагмент фотографії (права частина комірця), праворуч – збільшений вид відретушованого фрагмента. Ретуш полягала в тому, щоб зробити однотонним комірець сорочки. Зрозуміло, що якщо зробити одноколірними пікселі, що відображають названий фрагмент, то якість фотографії не погіршиться, проте при збереженні шляхом стиснення інформація про всі одноколірні пікселі буде зафіксована один раз, внаслідок чого обсяг файлу став меншим. Подібна операція була застосована до різних фрагментів фотографії, що дозволило зменшити обсяг файлу у 2,5 рази. Ретуш виконана за допомогою різних інструментів панелі, зокрема інструменту
Pencil Tool (олівець), який на панелі виділено активним кольором.Для мінімізації розмірів малюнкових файлів також можна використовувати спеціальні програми, які прибирають із них неграфічну інформацію, що розміщується графічними редакторами при розробці та збереженні малюнка. Наприклад, автор цих рядків користується програмою Advanced GIF Optimizer фірми Gold Software. Використання оптимізаторів часто дає змогу зменшити обсяг GIF-файлу ще на 10-60 %.
Для прискорення завантаження малюнку його можна розрізати на окремі частини та потім розмістити ці частини на сторінках у різних осередках таблиці. При перегляді в браузері малюнок, що складається з частин, виглядає також як не фрагментований малюнок. Перевага фрагментації у тому, що малюнки, як та інші елементи сторінки, завантажуються у браузер паралельно, що сприяє прискоренню завантаження сторінки. Крім того, повністю завантажений фрагмент відразу з'являється у браузері, що дозволяє створити ілюзію швидкого завантаження малюнка. Разом з можливостями передачі GIF- і JPEG-малюнків та ресурсами редагування можна досягти помітного прискорення завантаження малюнків на сторінках.
8. Сторінки з кадрами
Ці сторінки вперше використані для браузера Netscape Navigator. Одна така сторінка представляє в браузері набір незалежних вікон-фреймів, що дозволяє розширити можливості одночасного відображення окремих сторінок або різних частин сторінки, зокрема виконувати їх незалежне прокручування. Кожен кадр представляється окремим файлом, а для опису способу відображення кадрів у браузері служить ще один файл, який і є кадровим файлом. Кожен кадр є Web- сторінкою та її можна переглядати як окрему сторінку в одному вікні.
На рис. 17 показано Web-сторінку, за допомогою якої виконується навігація сторінками, що відображають електронні методичні матеріали кафедри.
|
| Рис. 17. Приклад фреймової Web-сторінки |
Сторінка організована у формі меню та складається з трьох фреймів
: один розташований у верхній частині, два інших під ним – ліворуч та праворуч. Верхній кадр представляє заголовок сторінки. Нижні кадри складені так, щоб можна було відтворити та використовувати дворівневе меню. Перший рівень меню організований у лівому кадрі. У ньому користувач може вибрати бажану спеціальність, дисципліну або перейти з цієї сторінки на головну сторінку кафедри, клацнувши по одному з гіперпосилань. На рис. 17 у лівому фреймі клацання зроблено за гіперпосиланням з написом Інформатика, про що можна судити за пунктирною рамкою, що обмежує гіперпосилання Після цього клацання у правому кадрі завантажена і відтворена сторінка, що містить заголовки наявних методичних матеріалів з цієї дисципліни. У правому кадрі курсор миші наведено на рядок Відкритив одному із заголовків. Таким чином, правий кадр виконує роль контейнера підменю, тобто активного меню другого рівня.Описаний спосіб організації дозволяє в зручній для користувача формі створювати скільки завгодно довгий список дисциплін і спеціальностей у лівому фреймі і скільки завгодно довгий список матеріалів по кожній спеціальності або дисципліни для відображення у правому кадрі. При цьому у списку правого кадру завжди можна бачити вміст вибраної позиції зі списку лівого кадру.
При розробці кадрової сторінки спочатку окремо створено такі сторінки:
- header.htm – сторінка, яка представлятиме заголовок фреймової сторінки;
- menu.htm – сторінка для відображення меню у лівому фреймі;
- informatique.htm – сторінка для відображення списку методичних матеріалів з дисципліни Інформатика;
- certificate.htm – сторінка для відображення списку методичних матеріалів за фахом Сертифікація;
- tms_metod.htm – власне кадрова сторінка.
Для створення останньої сторінки організовано новий файл за допомогою меню Файл /
Створитита вибрати команду Інші шаблони сторінок… з галузі завдань створіння.У діалоговому вікні, що відкрилосяШаблони сторінок, вибрати вкладку Сторінкарамок , на якій показані шаблони W eb-сторінок з фреймовою структурою, що входять до складу FP (рис. 18).
Вікно нової web-сторінки кадрів (мал.19) буде розбите на частини відповідно до обраної структури.
Клацанням правої клавіші миші викликаємо контекстне меню, вікно властивостей сторінки та вводимо в титульний рядок текст
Методичні матеріаликафедри, яка зазвичай відображається у верхній частині браузера, та зберігаємо сторінку tms_metod.htm.Далі послідовно клацніть на кнопці Задати початкову сторінкуу верхньому та лівому фреймах та встановлюємо зв'язок відповідного фрейму зі своєю сторінкою за допомогою стандартного вікна створення гіперпосилання, представленого на рис. 12. Після клацання по кнопці верхнього кадру призначена адреса header.htm, лівого – menu.htm, правого – порожня сторінка (кнопкою Створити сторінкуна рис. 19).
Щоб файли informatique.htm і certificate.htm після виклику їх гіперпосиланнями відображалися у правому кадрі, у файлі menu.htm гіперпосиланням на ці Web-сторінки присвоєно значення за замовчуванням – головна.
9. Приклад розробки Web-сторінки
На рис. 20 представлена
Web-сторінка history.htm , що відображає коротку історію кафедри ТМС КДТУ
Рис. 20. Вид Web-сторінки у браузері
Вигляд розміченої сторінки у редакторі FP показаний на рис. 21. Спочатку створено нову сторінку. Далі клацанням правої клавіші миші викликане контекстне меню, в якому зроблено клацання по рядку Властивості сторінки. У вікні властивостей сторінки (мал. 3) введено її заголовок Історія кафедри ТМС. На закладці Іншіпроти кожної з опцій відступу меж сторінки поставлена галочка, які значення встановлені в нуль. Це означає, що при зчитуванні в браузер сторінку слід відображати без відступів від верхньої та лівої меж вікна перегляду. Клацніть по кнопці Зберегтисторінку збережено на диску під ім'ям history.htm.
Далі командою вставки таблиці на сторінку покладено таблицю з чотирьох стовпців та чотирьох рядків. У комірки верхнього рядка послідовно зліва направо покладено три малюнки h1.gif, h2.gif, h3.gif (малюнки попередньо розроблені у графічному редакторі Photo Shop). Перший малюнок (КДТУ) має розмір 4 К, другий (ТМС) – 3,6 К, останній – 1,4 К. Всі малюнки є написами, виконаними на бордовому фоні. Останній малюнок (він з написом ІСТОРІЯ КАФЕДРИ ТЕХНОЛОГІЯ МАШИНОБУДУВАННЯ) з метою скорочення пам'яті виконаний меншою шириною.
Рис. 21. Вид розміченої Web-сторінки у редакторі FP
Далі клацанням в осередок першого рядка та командою Таблиця/Виділити рядокперший рядок осередків було виділено. Потім на неї був наведений курсор і виконано клацання правої клавіші миші. У контекстному меню вибрано команду Властивості осередкуі в вікні (рис. 10) всім виділеним осередкам призначена підкладка у вигляді малюнка bg.gif (він також підготовлений в редакторі Photo Shop). Цей малюнок є однотонним зображенням розміром 8x8 пікселів з однаковими характеристиками. Розмір файлу підкладки становить лише 46 байтів. Підкладка необхідна, щоб весь перший рядок таблиці зафарбувався однаковим кольором (малюнки виконані на тлі цього кольору).
Для того, щоб більш вузький малюнок h3.gif розмістився у вертикальному напрямку по середині осередку, її властивості Вертикальне становищеприсвоєно значення По центру. Горизонтальне положення залишено за замовчуванням, тобто притиснути до лівого краю комірки. Для останнього осередку першого рядка таблиці (вона порожня) властивість Ширинаприсвоєно значення 600. Це необхідно для того, щоб весь перший рядок таблиці гарантовано розміщувався на всю ширину вікна (і навіть забезпечував деякий запас), що при перегляді сторінки створить ефект однотонного кольорового забарвлення заголовка (банера) у браузері (мал. 20).
Далі було призначено два гіперпосилання – на сайт КДТУ та сайт кафедри ТМС. Вони необхідні для того, щоб переглядаючий сторінку міг за бажання перейти до перегляду цих сторінок. Першому малюнку (h1.gif) було призначено гіперпосилання http://www.kgtu.runnet.ruна сайт КДТУ (рис. 5.12). Другому (h2.gif) – гіперпосилання на сайт кафедри ТМС http://tms.kgtu.runnet.ru. У рядку Text властивостей малюнків першому призначено текст До сайту КДТУ, другому – До сайту кафедри ТМС. Ці рядки необхідні для того, щоб переглядаючи сторінку при наведенні курсору на малюнок зміг прочитати на спливаючих підказках призначення гіперпосилань. Щоб у браузері не були видні контури малюнків-гіперпосилань, їх властивості товщини кордонів присвоєно значення нуль і межа згорнута (рис. 15). На цьому розмітка першого рядка таблиці закінчено.
У другому рядку таблиці в перші два осередки покладено один і той же малюнок із файлу arrow.gif. Малюнок представляє спрямовану вістрям вгору стрілку. Розмір файлу складає всього 324 байти. Малюнки призначені для того, щоб підказати сторінці, що переглядає, що над ними знаходяться гіперпосилання, якими він може скористатися. Щоб стрілки були розташовані точно під відповідними малюнками, властивістю горизонтального становищаосередків присвоєно значення по центру.
Текст сторінки розташований у третьому ряду таблиці. Перед вставкою тексту другий і третій осередки цього рядка були об'єднані. Перед об'єднанням осередки було виділено, потім було виконано команду меню Таблиця/Об'єднати осередки. Далі курсор був поставлений в комірку і натиснута кілька разів клавіша Enter для вставки порожніх абзаців.
У перший абзац осередку набрано з клавіатури верхня частинатексту (вона передує списку співробітників, які у різний час обіймали посаду завідувачів кафедри ТМС).
Нижче вставлено таблицю з одного рядка та двох стовпців. У лівий стовпець запроваджено прізвища співробітників, у правий – роки їхнього завідування кафедрою. Осередки таблиці відформатовані так, що властивість вертикального положеннямає значення вгорі, властивість горизонтальне становище – по лівому краю. Така організація дозволить позиціонувати у браузері прізвища та періоди у двох сусідніх колонках точно один під одним.
Нижче таблиці набрано текст, який завершує опис історії.
Весь текст набраний шрифтом Arialдеякі його фрагменти виконані напівжирним накресленням. До них належать дати, прізвища, шифри спеціальностей та інші елементи, на які потрібно звернути увагу переглядає сторінку.
Не втрачено можливість підкреслити цікаву особливість одного з фрагментів тексту: якщо з перших літер найменувань спеціальностей, яким навчають на кафедрі ТМС, скласти абревіатуру, то вона повторить абревіатуру, складену з перших літер найменування кафедри, тобто знову вийде "ТМС" (на 20 і 21 ця частина тексту не видно, ця особливість підкреслена тим, що перші літери в найменуванні спеціальностей виділені напівжирним накресленням і червоним кольором.
Нарешті, всі осередки нижнього рядка великої таблиці об'єднані і в осередок, що вийшов, дрібнішим шрифтом внесені вихідні дані кафедри - адреса, телефони, адреса e-mail.
Програма, за допомогою якої досить просто можна зрозуміти базові принципи конструювання інтернет-сторінок, що володіє широким вибором додаткових інструментів для створення складних інтернет-сайтів, порталів.
Коротко про програму Microsoft FrontPage
Це простий у освоєнні та зручний Web-редактор для проектування, підготовки та публікації Web-сайтів. Завдяки інтеграції з сімейством продуктів MS Office, звичному інтерфейсу та різноманітності шаблонів програма дозволяє швидко освоїти роботу навіть початківцям, знайомим з основами роботи в MS Word. При цьому FrontPage не можна назвати рішенням для чайників: програма надає широкі функціональні можливостіта різноманітні засоби оптимізації інтернет сторінок.
Слід зазначити, що назва Microsoft FrontPage існувала до 2003 року, а далі доповнювалася новими функціями та змінювалася сама назва програмного забезпечення. У 2007 програма FrontPage була перейменована на Microsoft Expression Web, а в 2010 - Microsoft Office SharePoint Designer. Фактичний до нових версій було додано деякі доповнення, але основний вид програми зберігався.
Основні інструменти програми
Загальний вигляд програми Microsoft FrontPage
Програма Microsoft FrontPage має багато спільного з інструментами MS Word, тому багато кнопок та вкладок меню також інтуїтивно зрозумілі і це полегшує процес створення сторінки. Багато хто вже знає, як набирати і форматувати простий текст, створювати таблиці Microsoft WordЗа таким же принципом редагується сторінка і в FrontPage.
Справа на малюнку показано загальний вигляд програми зі стандартним набором інструментів, за допомогою яких можна зробити шаблон сторінки з текстом, посиланнями та картинками. Зайдіть у вкладку "Вигляд" далі "Панель інструментів" і переконайтеся, що включено " Стандартна", "Форматування"і" Таблиці", цих інструментів буде достатньо для створення просто сторінки. Знизу зверніть увагу на вкладки "Конструктор", "Код" і "Перегляд" - це три різні режими в яких можна весь час переглядати, як виглядає сторінка, що створюється.
- У Конструкторі вводяться всі правки, набирається і форматується текст, вставляються картинки, створюються посилання, змінюються кольори фону та шрифту так само, як і в Microsoft Word.
- У вкладці "Код" можна переглянути так званий HTML-код. HTML - це стандартна мова розмітки документів у Всесвітній павутині. Більшість веб-сторінок створюються за допомогою мови HTML. У цій вкладці також можна редагувати сторінку, але потрібно знати цю мову розмітки. Однак усі зміни початківцям слід робити в конструкторі і всі зміни HTML будуть відбуватися автоматичний.
- У вкладці "Перегляд" можна побачити, як виглядає сторінка безпосередньо в браузері (у такому, як Internet Explorer)
Детальний опис інших меню, кнопок та функцій Microsoft FrontPage наведено у довідці програми. Для цього потрібно натиснути клавішу F1.
Створюємо шаблон для сторінок у FrontPage
Вставляємо основну таблицю у редакторі
І так для того, щоб створити нескладний шаблон, необхідно вставити таблицю з трьома блоками. Три блоки - це простий стандарт: верхній блок призначений для назви сайту, другий блок для навігаційних посилань по сайту, третій блок для тексту, картинок та іншої інформації на сторінці. Можна вставити більше блоків таблиць для зручності, але це вже справа смаку, як, скільки і якими розмірами робити ці блоки. Існують і інший спосіб створення блоків не через створення таблиць, а вставкою в сторінок, так званих, "div" елементів та призначення ним певних стилів, але цей спосіб не для нових веб-майстрів, і про це можна написати окрему статтю.
- Щоб вставити таблицю, заходимо у вкладку "Таблиця" > "Вставити" > "Таблиця" і заповнюємо поля, як це показано на малюнку праворуч. Фактичний можна ввести свої параметри, але дана таблиця має фіксовану ширину та витягнута на 100% площі екрана. Таким чином, таблиця компактно буде відображатися в браузері.
- Потім необхідно налаштувати всі три осередки, тому що вони після вставки мають однакову висоту. Натискаємо правою кнопкою мишки на верхній комірки і заходимо в "Властивості комірки" в поле висота вписуємо умовно "150" і ставимо галочку "у крапках", тобто. розмір комірки становитиме 150 пікселів. У цьому ж меню ми можемо вибрати колір фону комірки, а натиснувши в меню "стиль..." можна внести інші налаштування комірки, наприклад, вибрати колір і розмір межі комірки, з цим можете поекспериментувати і подивитися результат. У самому осередку можна вписати назву сайту.
- Далі редагуємо другий осередок, який призначений для посилань навігації по сайту. Ширину робимо близько 40 пікселів, цього буде достатньо, та й інші налаштування, як колір фону та полів налаштовуємо на свій смак. Далі пишемо назви самих посилань розділяючи знаками вертикальної лінії або іншим знаком (переглянути можете нижче завантаживши шаблон). Виділяємо тест і тиснемо кнопку вирівнювання по центру, як і в MSWord. Так само можна змінювати шрифт, розмір шрифту та інші параметри тексту.
- Також налаштовуємо останній осередок. Вона призначена для основного тексту, в якому можна внести текст привітання.
- Насамкінець можна зайти у вкладку "Файл" > "Властивості", де можна внести назву сайту та змінити загальний фон сторінки та інші загальні налаштування
Тепер шаблон готовий. Це каркас для всіх наступних сторінок сайту. Ось як сайт виглядає у HTML коді:
Такий отримуємо шаблон для сайту
< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251"> < title >Назва сайту < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" >Назва сайту < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b >Головна | < b >Сторінка 2 | < b >Сторінка 3 | < b >Сторінка 4 | < b >Сторінка 5 | < b >Контакти < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" >Текст на головній сторінці. Тут можна вставити текст вітання і коротко написати чомусь присвячений сайт.
Цей HTML-код можна відразу вставити в редактор у вкладці "Код" і відразу побачите готовий шаблон. Його можна змінювати та редагувати під власні потреби. Тут варто пояснити, що там, де вставляється основний текст і щоб він не розташовувався впритул до полів, він був обрамлений в тег "div", з налаштуванням відступу, як це показано в прикладі.
Додаткові шаблони
- Потрібно також знати, що у програмі FrontPage та й інших подібних програмах існують стандартні шаблони, за якими можна використовувати для створення сторінок, вони легко редагуються і можна підігнати будь-який шаблон під свої потреби. Для того, щоб вибрати стандартний шаблон перейдіть у вкладку "Файл" > "Створити..." у вікні вибрати "Інші шаблони сторінок", де можна вибрати будь-який шаблон, що сподобався.
- Є другий варіант – скачати повністю шаблон з інтернету. Сайтів, що надають такий сервіс, дуже багато. шаблони можуть бути як платними, і безкоштовними. Завантаживши той чи інший шаблон, його можна редагувати у програмі, заповнювати потрібним змістом та змінювати стиль того чи іншого елемента.
Використання стандартних макетів таблиць та тем
Microsoft FrontPage дає хороші інструменти готових макетів таблиць і тем оформлення для сайтобудування.
Потрібно знати, що в Microsoft FrontPage є стандартний набір макетів таблиць і тим, за допомогою яких можна добре навчитися мистецтвом створення звичайних сторінок або сайтів візиток. І так праворуч вгорі є меню, що випадає (дивіться картинку праворуч, де також відображено результат використання матектів таблиць та теми оформлення), натиснувши з'явиться меню, в якому потрібно вибрати "Макетні таблиці та комірки" і далі нижче з'явиться багато різних макетів таблиць, можна вибрати будь-який на свій розсуд і смак. Таким чином, це звільняє створювати самому таблицю вручну.
І так набравши або вставивши свій текст, логотип, посилання в комірки таблиці, зайшовши до того ж меню можна вибрати меню "Тема", де можна вибрати різні темидля оформлення сторінки, посилань, фону сторінки та багато іншого. Така можливість хороша для тих, хто тільки вчиться створювати інтернет-сторінки і цілком наочно відображає сам процес створення сайту. Іншими словами, Microsoft FrontPage можна експериментувати з різними налаштуваннями і бачити наочно, як змінюється та чи інша сторінка. Тут можна дати одну пораду, вивчайте всі функції програми і не бійтеся наживати на те чи інше меню, тому що кожен інструмент має свою властивість і призначення для формування повноцінної сторінки
Вставляємо картинку та створюємо посилання на сторінки
Важливо початківцям веб-майстрам знати, як вставляти картинки в сторінку і робити посилання на інші сторінки. Наприклад, замість тексту назви сайту можна вставити малюнок логотипу сайту. Для цього спочатку натисніть у полі, куди необхідно вставити зображення, потім у верхній частині натисніть на вкладку "Вставка" > "Малюнок" > "З файлу", виберіть потрібний малюнок і натисніть "Вставити", після чого малюнок з'явиться на сторінці. Натиснувши на малюнку правою кнопкою мишки, можна вийти в меню з додатковими налаштуваннями зображення. Важливо, щоб усі зображення знаходилися в одній строго визначеній папці для всіх зображень.
Для переходу на інші сторінки сайту необхідно створити посилання, за якими користувачі можуть відвідати всі сторінки сайту. Для цього потрібно виділити потрібний текст для посилання і перейти у вкладку "Вставка" > "Гіперпосилання", в меню потрібно вказати сторінку, на яку створюється посилання, і натиснути "ок". У цьому ж вікні є інші параметри для посилань, такі як відкривати посилання в новому вікні чи ні. У принципі, це можна вивчити самостійно.
Висновок
У своїй основі подібні редактори між собою схожі, мають схожі функції та меню. Освоївши базові налаштування, з легкістю можна буде створювати сайти та в інших редакторах. Освоївши ці принципи, можна перейти до складнішого методу оформлення сайтів - за допомогою так званого CSS. Про те, що це таке і як редагувати дизайн сайту, можна прочитати у статті про CSS.
Недоліком даного "шаблонного" методу у тому, що кожну сторінку доводиться створювати окремо з урахуванням створеного шаблона. Коли як при створенні сайтів за допомогою так званих движків не потрібно окреме формування сторінок, вони формуються автоматично в міру додавання контенту
Якщо у Вас виникли питання щодо статті, використання подібних програм для створення сайтів, то їх можна поставити в темі обговорення нашого форуму .
Статті за схожою тематикою
Office System Professional 2003, тому її можна встановити разом з іншими програмами Microsoft Office або окремо. Ми не будемо описувати процес установки і вважатимемо, що ви вже встановили FrontPage на ваш комп'ютер.
Щоб запустити програму FrontPage, натисніть кнопку Запуск (Start) на Панелі завдань (Taskbar) Windows і виберіть у меню меню Програми - Microsoft Office - Microsoft Office FrontPage 2003 (Programs - Microsoft Office - Microsoft Office FrontPage 2003).
При першому запуску програми на екрані з'явиться діалог, в якому повідомляється, що програма FrontPage не є редактором WEB сторінок за замовчуванням і пропонується зробити її такою.
Натисніть кнопку Так (Yes). На екрані залишається тільки робоче вікно програми.
Опис меню FrontPage
У заголовку вікна розміщено значок системного меню, назва програми з ім'ям редагованого на даний момент документа і стандартні кнопки для згортання та закриття вікна програми. Нижче знаходиться меню, що містить команди управління програмою. Під час роботи зрідка пункти меню можуть бути приховані, і, щоб їх обрати, необхідно додатково клацнути на стрілці в нижній частині меню другого рівня.
Під меню розміщені дві панелі інструментів: Стандартна (Standard) для швидкого виклику найчастіше використовуваних команд і Форматування (Formatting) для форматування тексту. Як і інші програми з пакета Microsoft Office, редактор FrontPage дозволяє відображати або приховувати певні панелі інструментів, а також змінити набір клавіш на панелях.
Основну частину робочого вікна займають вкладки редагованих документів. Поточний документ – new_page_1.html.
У правій частині робочого вікна розташована область завдань, у якій можна знайти довідку про різні можливості програми, виконувати різні дії - пошук, роботу з буфером обміну тощо Область завдань можна приховати, звільнивши місце для проектування сторінок.
Закрийте область завдань, натиснувши комбінацію клавіш Ctrl+F1.
Щоб знову показати область завдань, необхідно знову натиснути на комбінацію кнопок Ctrl+F1.
У нижній частині робочого вікна програми знаходиться рядок стану, де виводиться про хід виконання різних команд.
Як працювати з WEB сторінками.
У Microsoft FrontPage існує кілька методів перегляду вмісту WEB вузла, які полегшують розробку, публікацію та керування ним. Працювати з WEB сторінками можна, використовуючи одне з наступних уявлень:
Сторінка (page).
Папки (Folders).
Віддалений WEB вузол (Remote WEB Site).
Звіти (Reports).
Завдання (Tasks).
У Представленні Сторінка (Page) можна використовувати один із чотирьох режимів представлення сторінки:
Конструктор (Design) – режим за замовчуванням. У цьому режимі можна розробляти і редагувати WEB сторінки, використовуючи практично всі можливості концепції WYSIWIG.
Код (Code) Дозволяє самостійно переглядати, записувати та редагувати теги HTML . Використовуючи засоби оптимізації коду в Microsoft FrontPage, можна створити чистий код HTML; також спрощується процедура видалення непотрібного коду.
З розподілом (Split). У цьому режимі можна перевіряти та редагувати вміст WEB сторінки у форматі з розділенням екрана, що надає одночасний доступ до режимів Код (Code) та Конструктор (Design).
Перегляд. Дозволяє переглядати зовнішній вигляд сторінки в WEB браузері, не зберігаючи її. Цей режим використовується для перевірки сторінки перед збереженням після внесення невеликих викликають сумніви змін.
У поданні Сторінка (Page) режим її вистави вибирається в лівій нижній частині робочого вікна програми FrontPage.
У папці (Folders) можна використовувати папки для конкретної роботи з файлами та папками, а також для організації вмісту WEB вузла. У цьому поданні папки можна створювати, видаляти, копіювати та переміщувати, як і у Провіднику (Explorer) Microsoft Windows.
Видалення WEB вузол (Remote WEB Site) можна використовувати для публікації всього WEB вузла або вибіркової публікації окремих файлів. Також можна синхронізувати файли у двох або кількох розташуваннях, щоб забезпечити своєчасне оновлення вузлів зі схожим вмістом. У поданні можна виконати відбір для відображення вмісту папки, файлів для публікації, файлів для публікації і конфліктуючих файлів.
Подання Звіти (Reports) дозволяє розглядати вміст WEB вузла після виконання запиту на звіт. Можна розраховувати повний обсяг пам'яті, займаної файлами на вузлі, показувати файли, які пов'язані коїться з іншими файлами, виявляти повільні і застарілі сторінки, групувати файли за завданням чи з особі, якому вони передбачені, виконувати інші завдання.
За допомогою подання Переходи (Navigation) можна показувати ієрархічну структуру WEB сторінок. Це уявлення дозволяє змінювати розміщення сторінок на вузлі з допомогою простих переміщень мишею.
У поданні Гіперпосилання (Hyperlinks) відображається стан гіперпосилань WEB вузла у вигляді списку. Цей перелік включає внутрішні та зовнішні гіперпосилання та використовує значки для позначення випробуваних або непрацюючих гіперпосилань.
Подання Завдання (Tasks) показує всі завдання WEB вузла у форматі стовпця і містить поточні відомості про кожну задачу під відповідними заголовками.
Як завантажити до редактора FrontPage готовий WEB сайт
Будь-яке з перерахованих уявлень можна включити з допомогою команд меню Вид (View). Щоб краще усвідомити призначення різних уявлень, ми завантажимо в редактор FrontPage готовий WEB-сайт, скориставшись операцією імпорту.
Виберіть у меню команду Файл-Імпорт (File-Import). На дисплеї з'явиться діалог Майстер імпорту WEB вузлів: початок (Import WEB Site Wizard - Welcome), в якому потрібно визначити спосіб отримання файлів та їх розташування.
Ви зможете імпортувати WEB сайт, що знаходиться на локальному диску. Для цього необхідно встановити перемикач Файлова система(File System) у групі перемикачів Метод отримання файлів (How do you want to get the files?) та вказати папку з файлами WEB сайту у полі введення Розміщення WEB вузла (WEB Site Location).
При встановленому за замовчуванням перемикачі Протокол HTTP(HTTP) ви зможете імпортувати готовий WEB сайт прямо із мережі Веб.
Щоб імпортувати WEB сайт з Інтернету, у полі введення Розміщення WEB вузла (WEB Site Location) вкажіть адресу WEB сайту, наприклад gov.ru.
У полі Розміщення локальної копії (Local copy location) можна вказати папку на жорсткому диску, в яку будуть скопійовані імпортовані файли. Залишимо в цьому полі ім'я папки за промовчанням.
Встановіть прапорець Імпортувати доменну сторінку (Import the home page plus linked pages) та введіть 5 в поле введення з лічильником праворуч від цього прапора, щоб обмежити вкладеність у структурі папок та файлів WEB сайту п'ятьма рівнями.
Встановіть прапорець Імпортувати менше (Import a maximum of) і введіть 1000 у поле введення праворуч від цього прапорця, щоб обмежити загальний обсяг імпортованих файлів у 1000 кб.
Встановіть прапорець Імпортувати тільки файли HTMLта зображень (Import only HTML and image files).
Для ознайомлювальних цілей нам не потрібно завантажувати WEB-сайт повністю. Тому, якщо ви використовуєте слабке з'єднання з Інтернет, то можна зменшити обсяг файлів, що завантажуються, і кількість рівнів у структурі WEB сайту.
Натисніть кнопку Готово (Finish) у заключному діалозі майстра. Буде встановлено з'єднання з Інтернет, і на дисплеї з'явиться діалог "Ход імпорту WEB вузла" (Import WEB Site Progress), в якому буде відображатися процес завантаження файлів WEB сайту.
Під час завантаження файлів WEB сайту може з'явитися діалог Підтвердіть заміну файлу (Confirm File Replace).
У разі виникнення діалогового вікна Підтвердіть заміну файлу (Confirm File Replace) натисніть кнопку Ні (No), щоб не замінювати вже скопійований файл.
Імпорт буде завершено після завантаження всіх файлів або при досягненні встановленої межі розміру WEB сайту.
У процесі імпорту програма FrontPage копіює файли WEB сайту з віддаленого сервера на локальний диск і розташовує їх у окремій папці. Практично WEB сайт є набором файлів, що містяться в певній папці і вкладених папках. Зазвичай FrontPage має в своєму розпорядженні WEB сайти в папці Мої WEB вузли (My WEB Sites), яка створюється в папці Мої документи (My Documents). Якщо для WEB сайту не позначено ім'я, йому за промовчанням надається ім'я мой_узел (myweb1) або подібне.
Після закінчення імпорту WEB сайт буде завантажений у редактор FrontPage, і в заголовку вікна програми поруч із назвою програми з'явиться шлях до папки WEB сайту на локальному диску. Програма переключиться на представлення Папки (Folders). У лівій частині робочого вікна програми буде показано дерево папок, а в правій частині з'явиться нова вкладка зі списком папок і файлів WEB сайту.
Клацніть правою кнопкою миші на вкладці нов_стр_1.htm (new_page_l.htm) і в контекстному меню виберіть команду меню Закрити (Close), щоб закрити порожню сторінку, зроблену при запуску програми.
У поданні Папки (Folders) всі сторінки, малюнки та інші файли, що становлять WEB сайт, представлені так само, як і в програмі Провідник (Explorer) операційної системи Windows. Ліворуч виводиться дерево папок, праворуч - вміст обраної папки. У цьому режимі ви можете переміщати, видаляти або перейменовувати файли в процесі роботи над веб-сайтом. Подвійне клацанняна назві файлу сторінки відкриває її для редагування. Як правило, файл головної сторінки WEB сайту називається index.htm або default.htm.
Знайдіть файл з такою назвою в списку файлів і двічі клацніть на ньому мишею. У правій частині робочого вікна з'явиться нова вкладка index.htm, і на ній буде показана обрана сторінка в режимі Конструктор (Design) уявлення Сторінка (Page).
У меню Вигляд (View) представлення Сторінка (Page) виділено, а режим Конструктор (Design) цього представлення виділено у нижній частині вкладки index.htm.
Режим Конструктор (Design) представлення Сторінка (Page) призначений для редагування та перегляду поточної сторінки WEB сайту. Це головний робочий режим, в якому доступні команди вставки елементів, форматування тексту, роботи з таблицями та інші засоби FrontPage для редагування сторінок. У нижній частині вкладки розміщені кнопки для вибору інших режимів представлення сторінки.
У режимі С поділом (Split) подання Сторінка (Page) можна перевіряти та редагувати вміст WEB сторінки у форматі з розділенням екрана, що надає одночасний доступ до режимів Код (Code) та Конструктор (Design).
Режим Код (Code) представлення Сторінка (Page) дозволяє самостійно переглядати, записувати і редагувати теги HTML.
У цьому та двох попередніх режимах у верхній частині вкладки index.htm розміщена панель для швидкого вибору тега, яку можна приховати або показати за допомогою команди меню Вигляд - Швидкий вибір тега (Quick Tag Selector).
Режим Перегляд (Preview) уявлення Сторінка (Page) дозволяє переглядати зовнішній вигляд сторінки в WEB браузері, не зберігаючи її.
Закрийте сторінку index.htm, натиснувши комбінацію клавіш Ctrl+F4. Ми знову повернемося на вкладку WEB вузол (WEB Site) у поданні Папки (Folders).
Натисніть кнопку Звіти (Reports) у нижній частині вкладки WEB вузол (WEB Site). У правій частині вікна буде відображено звіт Зведення по вузлу (Site Summary), що містить загальні відомості про структуру WEB сайту: кількість файлів, малюнків, посилань та іншу інформацію.
Подання Звіти (Reports) дозволяє отримувати та переглядати статистичну інформацію про WEB сайт та проводити аналіз з метою виявлення можливих проблем та помилок, допущених при розробці. Редактор FrontPage пропонує різні звіти, що збирають інформацію про розмір WEB сайту, кількість сторінок і малюнків, важкодоступні сторінки, розірвані посилання, «повільні» сторінки та інші відомості. Ці звіти можна обрати з переліку, що відкривається, у верхній частині вкладки WEB вузол (WEB Site).
Виберіть пункт меню Вид - Переходи (View - Navigation).
Уявлення Переходи (Navigation) створено до створення структурної схеми, що визначає зв'язку і можливі шляхи переходів між сторінками WEB сайту. Така схема потрібна, наприклад, для створення та автоматичного оновлення навігаційних меню на сторінках та змісту WEB сайту. Схема навігації використовується тільки на етапі проектування і не зберігається на WEB сервері, тому у імпортованого WEB сайту вона відсутня. Докладніше про структуру навігації ми поговоримо в окремому досвіді.
У цьому режимі у правій частині робочого вікна відображається схема гіпертекстових зв'язків між сторінками WEB сайту, документами та малюнками. За допомогою цієї схеми можна простежити за вхідними та вихідними посиланнями для кожної сторінки. Про посилання ми поговоримо докладніше у окремому досвіді.
Подання Завдання (Tasks) призначене головним чином для планування колективної роботи над проектом WEB сайту. У цьому режимі можна запланувати завдання, закріпити їх за окремими розробниками і ознайомитися з ходом їх виконання.
Не працює
