Konfiguracja sprzętu i oprogramowania

Opis programu na pierwszej stronie. Opis strony głównej Microsoft Office

Microsoft FrontPage - program jest edytorem pozwalającym na wykorzystanie układu HTML. Oprogramowanie działa na zasadzie „Dostajesz to, co robisz”. Silnik narzędzia jest oparty na technologii używanej również w znanej przeglądarce IE. Deweloper zauważa, że ​​w przypadku pracy z przeglądarkami korzystającymi z silników firm trzecich, wyświetlacz będzie wyglądał inaczej.

Program jest w stanie automatycznie implementować zmiany, które są wprowadzane przez programistów w czasie rzeczywistym.

Edytor polecany jest do użytku dla początkujących, którzy chcą opanować podstawowe operacje tworzenia stron internetowych. W przeciwieństwie do bardziej złożonych i złożonych analogów o dużej liczbie możliwości, ten program można nazwać trywialnym. Jednak podstawowa funkcjonalność pozwoli Ci szybko poznać podstawy budowania strony.

Pobierz za darmo pełną wersję rosyjską Wersja Microsoft FrontPage z oficjalnej strony bez rejestracji i SMS-ów.

Wymagania systemowe

  • Obsługiwane systemy operacyjne: Windows 7, 10, 8, 8.1, Vista, XP
  • Głębia bitowa: 32 bity, 64 bity, x86

FrontPage to program do tworzenia stron HTML, a następnie ich „publikowania”. Jest dość stary rozwiązanie programowe, który od dawna nie jest obsługiwany. Program go zastąpił.

Funkcjonalny

FrontPage stanie się przydatnym asystentem dla webmasterów, którzy chcą uprościć proces tworzenia stron internetowych i uczynić go bardziej komfortowym. Program udostępnia duży zestaw narzędzi, za pomocą których można nie tylko tworzyć strony, ale także układać je zgodnie z własnymi życzeniami lub wymaganiami klienta. Dogodnie program jest w stanie kontrolować błędy użytkownika. Wszystkie błędy w tagach zostaną znalezione i wyświetlone do dalszej korekty.

Oprogramowanie zawiera wbudowany zestaw szablonów, których możesz użyć do tworzenia swoich stron, oszczędzając czas i nie wymyślając koła na nowo. Z pomocą specjalnego menedżera możesz bardzo szybko opublikować gotową pracę. A w przypadku trudności i pytań radzimy otworzyć sekcję pomocy - lepiej niż Google podpowie Ci, jak znaleźć wyjście z impasu.

Tryby pracy

Oprogramowanie udostępnia kilka trybów działania - konstruktor, kod, przeglądanie wyników, a także tryb "łączony", w którym to przypadku okno robocze zostanie podzielone na dwa obszary - tworzenie kodu i przeglądanie. Podczas pracy z projektantem zostaną pokazane wszystkie popełnione błędy - tam również możesz pracować z obrazami wstawionymi między tekst, linki, ramki i wiele innych elementów. Tryb kodu jest bardziej racjonalny w użyciu nie do przeglądania, ale do edycji.

Kluczowe cechy

  • tworzenie stron internetowych, ich projektowanie i zawartość;
  • wizualny przegląd kodu w trybie projektowania (WYSIWYG);
  • zintegrowana biblioteka szablonów;
  • wbudowany menedżer do szybkiej i łatwej publikacji końcowego wyniku;
  • możliwość odwołania się do katalogu;
  • automatyczne wyszukiwanie i poprawki błędów;
  • obecność rosyjskiej wersji powłoki graficznej.

Program, za pomocą którego można w prosty sposób zrozumieć podstawowe zasady projektowania stron internetowych, który posiada szeroką gamę dodatkowych narzędzi do tworzenia rozbudowanych witryn internetowych, portali.

Krótko o Microsoft FrontPage

Jest to łatwy do nauczenia i przyjazny dla użytkownika edytor sieci Web do projektowania, przygotowywania i publikowania witryn sieci Web. Dzięki integracji z rodziną produktów MS Office, znajomemu interfejsowi i obfitości szablonów, program pozwala na szybkie opanowanie pracy nawet początkującym użytkownikom, którzy znają podstawy pracy w MS Word. Jednocześnie FrontPage nie może być nazwany rozwiązaniem dla „głupców”: program zapewnia szeroki funkcjonalność i różne sposoby optymalizacji stron internetowych.

Należy zauważyć, że nazwa Microsoft FrontPage istniała do 2003 roku, po czym została uzupełniona o nowe funkcje, a sama nazwa uległa zmianie. oprogramowanie. W 2007 roku FrontPage został przemianowany na Microsoft Expression Web, aw 2010 roku na Microsoft Office SharePoint Designer. W rzeczywistości do nowych wersji dodano kilka dodatków, ale zachowano główny widok programu.

Główne narzędzia programu

Widok ogólny programu Microsoft FrontPage

Microsoft FrontPage ma wiele wspólnego z narzędziami MS Word, więc wiele przycisków i zakładek menu jest również intuicyjnych, co ułatwia proces tworzenia strony. Wielu już wie, jak pisać i formatować zwykły tekst, tworzyć tabele w Microsoft Word, strona jest edytowana w ten sam sposób w programie FrontPage.

Rysunek po prawej pokazuje ogólna forma programy ze standardowym zestawem narzędzi, za pomocą których można wykonać szablon strony z tekstem, linkami i obrazkami. Przejdź do zakładki „Widok”, a następnie „Pasek narzędzi” i upewnij się, że „ Standard", "Formatowanie" I " stoły”, te narzędzia wystarczą do stworzenia prostej strony. Od dołu zwróć uwagę na zakładki „Konstruktor”, „Kod” i „Widok” - są to trzy różne tryby w którym zawsze możesz zobaczyć jak wygląda tworzona strona.

  • W Projektancie wszystkie edycje są wprowadzane, tekst jest wpisywany i formatowany, wstawiane są zdjęcia, tworzone są linki, kolory tła i czcionki są zmieniane w taki sam sposób jak w Microsoft Word.
  • W zakładce „Kod” możesz wyświetlić tzw. kod HTML. HTML to standardowy język znaczników dla dokumentów ogólnoświatowa sieć. Większość stron internetowych jest tworzona przy użyciu języka HTML. W tej zakładce możesz również edytować stronę, ale musisz znać ten język znaczników. Jednak początkujący powinni wprowadzić wszystkie zmiany w konstruktorze, a wszystkie zmiany w HTML zajdą automatycznie.
  • W zakładce „Widok” możesz zobaczyć, jak strona wygląda bezpośrednio w przeglądarce (np. Internet Explorer)

Szczegółowy opis innych menu, przycisków i Funkcje Microsoft FrontPage są prezentowane w pomocy programu. Aby to zrobić, naciśnij klawisz „F1”.

Tworzenie szablonu strony w programie FrontPage

Wstawianie głównej tabeli do edytora

I tak, aby stworzyć prosty szablon, musisz wstawić tabelę z trzema blokami. Trzy bloki to prosty standard: górny blok to nazwa witryny, drugi blok to linki nawigacyjne witryny, a trzeci blok to tekst, obrazy i inne informacje na stronie. Dla wygody można wstawić więcej bloków stołowych, ale to już kwestia gustu, ile i jakich rozmiarów wykonać te bloki. Istnieje inny sposób tworzenia bloków nie poprzez tworzenie tabel, ale poprzez wstawianie tak zwanych elementów „div” do stron i przypisywanie im określonych stylów, ale ta metoda nie jest przeznaczona dla nowych webmasterów i można na ten temat napisać osobny artykuł.

  1. Aby wstawić tabelę, przejdź do zakładki „Tabela” > „Wstaw” > „Tabela” i wypełnij pola, jak pokazano na rysunku po prawej stronie. Właściwie możesz wprowadzić własne parametry, ale podana tabela ma stałą szerokość i rozciąga się do 100% obszaru ekranu. W ten sposób tabela zostanie zwarta w przeglądarce.
  2. Następnie musisz dostosować wszystkie trzy komórki, ponieważ po wstawieniu mają taką samą wysokość. Kliknij kliknij prawym przyciskiem myszy najedź myszką na najwyższą komórkę i przejdź do "Właściwości komórki" w polu wysokości, wpisz warunkowo "150" i zaznacz pole "w punktach", czyli rozmiar komórki wyniesie 150 pikseli. W tym samym menu możemy wybrać kolor tła komórki, a klikając menu "styl ..." możesz dokonać innych ustawień komórki, na przykład wybrać kolor i rozmiar obramowania komórki, możesz poeksperymentuj z tym i zobacz wynik. W samej komórce możesz wpisać nazwę witryny.
  3. Następnie edytuj drugą komórkę, która jest przeznaczona na łącza nawigacji witryny. Robimy szerokość około 40 pikseli, to wystarczy, a inne ustawienia, takie jak kolor tła i marginesy, można dostosować do własnych upodobań. Następnie piszemy same nazwy linków, oddzielając je znakami pionowej linii lub innym znakiem (możesz go zobaczyć poniżej, pobierając pełny szablon). Wybierz test i naciśnij środkowy przycisk wyrównania, tak jak w MSWord. W ten sam sposób możesz zmienić czcionkę, rozmiar czcionki i inne ustawienia tekstu.
  4. Dostosuj także ostatnią komórkę. Przeznaczony jest do tekstu głównego, w którym można wpisać tekst powitania.
  5. Na koniec możesz przejść do zakładki "Plik"> "Właściwości", gdzie możesz wpisać nazwę strony i zmienić ogólne tło strony i inne ogólne ustawienia

Teraz szablon jest gotowy. Stanowi ramy dla wszystkich kolejnych stron serwisu. Oto jak wygląda strona w kodzie HTML:

Otrzymujemy szablon strony

< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "tekst/html; charset=windows-1251"> < title >Nazwa strony < 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" >Nazwa strony < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b >Dom | < b >Strona 2 | < b >Strona 3 | < b >Strona 4 | < b >Strona 5 | < b >Łączność < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" >Tekst strony głównej. Tutaj możesz wstawić tekst powitalny i krótko napisać o czym jest strona.

Ten kod HTML można od razu wstawić do edytora w zakładce "Kod" i od razu zobaczysz gotowy szablon. Można go zmieniać i edytować pod własne potrzeby. W tym miejscu warto wyjaśnić, że tam, gdzie jest wstawiony tekst główny i aby nie znajdował się blisko pól, został on obramowany w tagu „div”, z ustawieniem wcięcia, jak pokazano na przykładzie.

Dodatkowe szablony

  1. Musisz też wiedzieć, że w programie FrontPage i innych podobne programy Ach, istnieją standardowe szablony, których możesz użyć do tworzenia stron, są one łatwe do edycji i możesz dostosować dowolny szablon do swoich potrzeb. Aby wybrać standardowy szablon, przejdź do zakładki „Plik” > „Utwórz...” w oknie, które się otworzy, wybierz „Inne szablony stron”, gdzie możesz wybrać dowolny szablon.
  2. Jest druga opcja - pobierz kompletny szablon z Internetu. Istnieje wiele stron internetowych, które świadczą tę usługę. szablony mogą być zarówno płatne, jak i bezpłatne. Po pobraniu tego lub innego szablonu możesz go edytować w programie, wypełnić niezbędną treścią i zmienić styl tego lub innego elementu.

Korzystanie ze standardowych układów i motywów tabel

Microsoft FrontPage zapewnia dobre narzędzia do tworzenia gotowych układów tabel i motywów projektowych do tworzenia stron internetowych

Musisz wiedzieć, że program Microsoft FrontPage ma standardowy zestaw układów i motywów tabel, które mogą pomóc w nauce sztuki tworzenia zwykłych stron lub witryn z wizytówkami. I tak w prawym górnym rogu znajduje się rozwijane menu (patrz zdjęcie po prawej, które pokazuje również wynik użycia układów tabel i motywów projektowych), klikając menu, w którym należy wybrać „Tabele układu i komórki”, a następnie pojawi się wiele różnych układów tabel, możesz wybrać dowolny według własnego uznania i gustu. Dzięki temu możesz samodzielnie utworzyć tabelę.

I tak, wpisując lub wstawiając swój tekst, logo, linki do komórek tabeli, przechodząc do tego samego menu, możesz wybrać menu „Motyw”, w którym możesz wybrać różne motywy projektu strony, linki, tło strony i wiele więcej. Ta okazja jest dobra dla tych, którzy dopiero uczą się tworzenia stron internetowych i dość wyraźnie odzwierciedla proces tworzenia witryny. Innymi słowy, w programie Microsoft FrontPage możesz eksperymentować z różnymi ustawieniami i zobaczyć wizualnie, jak ta lub inna strona jest przekształcana. Tutaj możesz udzielić jednej porady, przestudiować wszystkie funkcje programu i nie bój się zarobić na określonym menu, ponieważ każde narzędzie ma swoją własną właściwość i cel tworzenia pełnoprawnej strony

Wstaw obraz i utwórz linki do stron

Dla początkujących webmasterów ważne jest, aby wiedzieć, jak wstawiać obrazy na stronę i tworzyć linki do innych stron. Na przykład zamiast tekstu nazwy witryny możesz wstawić obraz logo witryny. Aby to zrobić, najpierw kliknij w pole, w którym chcesz wstawić obraz, a następnie na samej górze kliknij zakładkę „Wstaw” > „Obraz” > „Z pliku”, wybierz żądany obraz i kliknij „Wstaw”, po który obraz pojawi się na stronie. Klikając na obrazek prawym przyciskiem myszy, możesz wyjść z menu za pomocą dodatkowe ustawienia Zdjęcia. Ważne jest, aby wszystkie zdjęcia znajdowały się w jednym, ściśle określonym folderze dla wszystkich zdjęć.

Aby przejść do innych stron witryny, musisz utworzyć linki, za pomocą których użytkownicy mogą odwiedzać wszystkie strony witryny. Aby to zrobić, musisz wybrać żądany tekst linku i przejść do zakładki „Wstaw” > „Hiperlink”, w menu, które się otworzy, musisz określić stronę, do której jest tworzony link, i kliknąć „ok ”. W tym samym oknie znajdują się inne ustawienia linków, takie jak otwieranie linku w nowym oknie lub nie. W zasadzie możesz sam to przestudiować.

Wniosek

W swej istocie te edytory są do siebie podobne, mają podobne funkcje i menu. Po opanowaniu podstawowych ustawień łatwo będzie tworzyć witryny w innych edytorach. Po opanowaniu tych zasad można przejść do bardziej złożonej metody projektowania stron internetowych – wykorzystującej tzw. CSS. O czym i jak edytować projekt strony możesz przeczytać w artykule o CSS.

Wadą tej metody „szablonowej” jest to, że każda strona musi być tworzona oddzielnie na podstawie utworzonego szablonu. Gdy, podobnie jak przy tworzeniu witryn za pomocą tzw. silników, nie jest wymagane oddzielne generowanie stron, są one tworzone automatycznie w miarę dodawania treści.

Jeśli masz jakiekolwiek pytania dotyczące artykułu, wykorzystania takich programów do tworzenia witryn, możesz je zadać w wątku dyskusyjnym na naszym forum.

Powiązane artykuły

W ramach kompleksu programowego Microsoft Office zawiera kilka aplikacji, które umożliwiają tworzenie, edytowanie i hostowanie stron internetowych. Jeden z nich jest stosunkowo prosty program pierwsza strona . Z jego pomocą można stworzyć bardzo rozbudowane strony, które zaspokoją potrzeby nawet profesjonalnego web designera.

Tworząc stronę internetową należy dążyć do nadania jej atrakcyjności wygląd, ponieważ atrakcyjna strona jest częściej odwiedzana. Jednocześnie na stronie należy połączyć dwie sprzeczne właściwości - atrakcyjność i minimum pamięci. Za pomocą ograniczonej liczby środków o małej pojemności, takich jak kolory zamiast obrazów, można stworzyć słabą, ale bardzo atrakcyjną stronę i odwrotnie, można ją wyposażyć w wiele obrazów, kolorów, formatów i innych elementów znaczników, zestaw i umieszczenie którego da stronie, którą można uznać za przykład bogatego złego gustu. Proces tworzenia strony internetowej jest twórczy, dlatego często określa się go mianem projektowania stron internetowych. Wiadomo, że niektórzy projektanci stron internetowych spędzili kilka miesięcy na tworzeniu mniej złożonej strony, wielokrotnie do niej wracając w poszukiwaniu najbardziej wyrazistego sposobu jej realizacji, podczas gdy stronę o tej samej treści można było stworzyć w nie więcej niż godzinę pracy. Jeśli jeden garnitur jest trudny do przerobienia kilka razy, to stronę internetową można „przerobić” i udoskonalić tak bardzo, jak to konieczne, dokładnie zgodnie z tym, jak poeta udoskonala swoją pracę, doprowadzając ją do szczytu doskonałości.

Jednak nie wszyscy są tego zdania, słusznie zauważając, że strona internetowa jest informacją do rozpowszechniania, a do tego wcale nie jest konieczne przekształcanie jej w dzieło sztuki, zwłaszcza że zajmuje to dużo czasu.

Z tego wynika praktyczny wniosek – nagłówek, tytuł, strony reklamowe powinny być atrakcyjne, a strony przeznaczone do rozpowszechniania „suchych” informacji, np. teksty zamówień, opisy stanowisk pracy, wszelkie plany i inne rzeczy - z minimalnym narzutem.

1. Interfejs FP

Program do tworzenia i edycji stron internetowych Front Page znajduje się w folderze programy biurowe Microsoft Office.

Po uruchomieniu DF na ekranie pojawia się okno, którego widok pokazano na rys. 1. W tym przykładzie niniejsza instrukcja, napisana przy użyciu FP, jest otwarta do edycji w oknie programu.


Ryż. 1. Okno programu pierwsza strona

Program zawiera menu i kilka pasków narzędzi. Zanim użytkownik FP zdecyduje się na projektowanie stron internetowych, zwykle jest dobrze zorientowany w Wordzie z rodziny Microsoft Office, więc interfejs FP, który jest w stylu Microsoft design i jest bardzo podobny do interfejsu Programy słowne, nie spowoduje szczególnych trudności w pracy.

Interfejs programu - menu, panele, przyciski i inne elementy - wygodniej jest wyjaśniać w razie potrzeby jego elementy podczas tworzenia lub edycji stron internetowych, których przykłady zostaną omówione w tym rozdziale.

Podczas tworzenia strony program automatycznie tworzy plik znaczników, którego tekst FP zapisuje w HTML (Hypertext Markup Language). Zmiany w tym pliku można dokonywać ręcznie (co więcej, tekst programu można napisać w zwykłym edytorze tekstu, nawet najprostszym, takim jak Notatnik, ale jest to zbyt uciążliwe). Aby przełączyć się na wbudowaną Edytor tekstu FP musisz kliknąć skrót na dole okna Kod, a następnie wprowadź zmiany w edytorze tekstu. Jeśli deweloper nie jest pewny swojego profesjonalizmu, to lepsza zmiana nie dodawaj do tekstu HTML, ponieważ błędy edycji będą trudne do poprawienia. Aby wrócić do oznaczanej strony, kliknij skrót Konstruktor.

Aby zobaczyć, jak strona będzie wyglądać w przeglądarce, kliknij etykietę Pogląd. Należy jednak zauważyć, że tylko bardzo proste strony. Dlatego lepiej jest przeglądać stronę na przykład w profesjonalnej przeglądarce Firefox. Aby to zrobić, znajdź plik strony w folderze i otwórz go w przeglądarce (zwykle wszystkie strony internetowe otwierają się w przeglądarce).

2. Utwórz nową stronę internetową

Aby utworzyć nową stronę internetową, kliknij przycisk Utwórz nową zwykłą stronę znajduje się na panelu Standard. Niektóre przyciski tego panelu z odpowiednimi komentarzami pokazano na ryc. 2.

Nową stronę możesz utworzyć w inny sposób. W menu Plik kliknij linię Tworzyć. Program po prawej wyświetli okno z szablonami standardowe strony. Z niego możesz wybrać dowolny szablon i użyć go jako podstawy dla przyszłej strony. Jeśli potrzebujesz pustej strony, musisz kliknąć szablon Pusta strona.

W FP można również tworzyć ramki, które pozwalają na jednoczesne oglądanie kilku stron WWW na ekranie monitora. Ramki to wielookienkowe strony internetowe. Początkujący projektant stron internetowych powinien powstrzymać się od używania ramek.

Teraz możesz zapisać stronę. Aby to zrobić, kliknij przycisk Zapisać, a następnie zapisz stronę jako plik na dysku komputera. Podczas zapisywania strony lepiej od razu utworzyć dla niej osobny folder o nazwie, którą zamierzasz nadać plikowi. Strony internetowe są zwykle zapisywane w plikach z rozszerzeniem .htm lub .html(od nazwy języka HyperText Markup Language - hipertekstowy język znaczników). Na przykład, jeśli zamierzasz zapisać plik jako o.htm, a następnie utwórz folder o nazwie o, w obszarze dysku, na którym będą znajdować się Twoje strony internetowe. Przed zapisaniem pierwszej strony lepiej od razu utworzyć taki obszar w postaci folderu, na przykład folderu o nazwie Strony internetowe Fedorowej. Teraz powinieneś utworzyć w nim wspomniany folder o, a w nim - zapisz stronę o.htm.

3. Właściwości strony internetowej

Następnie musisz wypełnić kilka ważnych właściwości strony wartościami. Aby to zrobić, kliknij prawym przyciskiem myszy w obszarze strony, a następnie w menu kontekstowe- online Właściwości strony. Pojawi się okno dialogowe do wpisania właściwości strony (rys. 3). Okno ma pięć zakładek

Ogólny, Formatowanie, do tego, Inny, Język .

Na ryc. 3 zakładka jest aktywowana w oknie

Ogólny. W kolejceImię musisz wpisać tytuł strony.

Tutaj możesz również podłączyć plik audio w strefie

Tło dźwięk. Dźwięk będzie towarzyszył przeglądaniu tej strony na komputerze, który ją otworzył. Oczywiście, aby słuchać dźwięku w tle, na komputerze użytkownika musi być zainstalowany głośnik. Zwykle dźwięk w tle jest odtwarzany przez przewijanie pliku dźwiękowego z rozszerzeniem .wav. Kliknij przycisk, aby połączyć plik. Przegląd i użyj okna dialogowego, aby połączyć taki plik. W przypadku zwykłej strony nie jest konieczne dołączanie pliku audio.aby utworzyć tło strony. Tło jest głównym tłem strony. Tło może być kolor lub zdjęcie. Widok okna właściwości strony na zakładce Tło pokazano na ryc. 4.

Jeśli chcesz wybrać tło jako kolor, następnie musisz kliknąć przycisk listy Tło

i wybierz kolor ze standardowego zestawu kolorów. W pierwotnego stanu ustawiony jest domyślny kolor. Zwykle domyślnym kolorem jest biały.

Jeśli oferowane kolory Ci nie odpowiadają, powinieneś kliknąć na kolor Zwyczaj(zwyczaj). W otwartym oknie dialogowym możesz wybrać kolor dowolnego z 16"777"216 odcieni. Widok okna wyboru koloru niestandardowego pokazano na rys.1. pięć.

Aby wybrać kolor niestandardowy należy najpierw przypisać kolor bazowy z głównej palety, następnie kliknąć przybliżony kolor w kwadracie palety po prawej stronie (ten punkt jest oznaczony krzyżykiem), a następnie wybrać żądany odcień w kolumnie na w prawo (jest oznaczony trójkątem obok kursora myszy). W polu „Kolor/Wypełnienie” możesz wizualnie ocenić wybrany kolor. Po prawej stronie pokazane są charakterystyki spektralne wybranego koloru. Te cechy można zmienić ręcznie.

Jeżeli wybrany kolor jest niestandardowy (odcień) i chcesz go użyć kilka razy w jednej sesji edycyjnej, możesz umieścić go na liście "Kolory dodatkowe" znajdującej się pod główną paletą. Aby to zrobić, przed wybraniem kliknij pole dodatkowego koloru, wybierz odcień i kliknij przycisk „Dodaj do zestawu”. Aby wyjść z okna, kliknij przycisk OK.

Jeśli obrazek ma służyć jako tło strony, to w tej zakładce należy otworzyć żądany obrazek

. Pożądane jest, aby ten plik znajdował się w folderze, w którym przechowywany jest plik strony. Na ryc. 6. pokazuje przykład tła w postaci obrazka zapisanego w pliku motyl.gif.

Jak widać na ryc. 6, tło to powtarzający się wzór przedstawiający motyla ( motyl).

Dla porównania na ryc. 7 przedstawia sam rysunek.

Od razu zauważamy, że podany przykład jest przykładem złego doboru podłoża, ponieważ obraz przesłania pole strony i od niego to, co nazywa się „olśnieniem w oczach”. Jego jedyną zaletą jest to, że wyraźnie pokazuje, jak rysunek tworzy tło na stronie.

Jeśli chcesz, aby tło było statyczne, tj. aby tło pozostawało nieruchome podczas przewijania długiej strony w przeglądarce, musisz ustawić opcję Utwórz tło.

W praktyce jako tło wybiera się zwykle lekko nasycone rysunki, aby stworzyć pożądane tło, ale nie skupiać na nim uwagi widza. Wybór tła to jednak kwestia gustu.

Sieć projektant.

Obrazy tła zwykle mają formaty

bmp, gif, jpg , png .

Należy pamiętać, że obraz jest zwykle najbardziej zapadającym w pamięć elementem na stronie internetowej. Dlatego załadowanie go z serwera przez przeglądarkę zajmuje najwięcej czasu. Jeśli prędkość połączenia jest niska, a ładowana strona zawiera kilka obszernych rysunków, ładowanie tej strony może być opóźnione. Widz takiej strony może zmęczyć się czekaniem na zakończenie pobierania i anulowaniem go. Dlatego należy dążyć do minimalizacji objętości rycin i ich ilości na stronie.

Uznaje się, że tło ma akceptowalny rozmiar, jeśli rozmiar obrazu nie przekracza 1-5 kilobajtów (K). Lepiej, jeśli ma mniej niż kilobajt. Dla porównania załóżmy, że objętość samej strony WWW zwykle nie przekracza 10–20 tys. Tylko strony z dużą ilością tekstu są duże. Powodem jest to, że strona internetowa to program (instrukcja), jak i co umieścić na ekranie przeglądarki użytkownika. Na przykład, jeśli w takim a takim miejscu na ekranie trzeba umieścić obrazek o rozmiarze 150 K, to na stronie WWW instrukcja tego efektu może zająć tylko 50 bajtów, czyli 3000 razy mniej niż sam obrazek. , który jest przesyłany do komputera widza niezależnie od stron internetowych. Ponieważ liczba takich instrukcji jest niewielka, rozmiar samej strony jest również stosunkowo niewielki.

Zakładka

Formatowanie możesz także ustawić kolor tekstu. Tutaj możesz również ustawić kolory hiperłączy tekstowych, które będą wyświetlane w przeglądarce przeglądającej stronę: kolor wszystkich hiperłączy tekstowych, kolor hiperłączy, do których użytkownik już uzyskał dostęp, kolor hiperłącza, na które znajduje się kursor myszy koniec.

Zakładka do tego możesz ustawić wcięcia strony w lewym górnym rogu okna przeglądarki. Domyślne wypełnienie to 8 pikseli.

Zakładka

Językmożesz ustawić specjalne języki kodowania tekstu do zapisywania strony i ładowania strony.

4. Korzystanie z tabel

Tabele są prawdopodobnie najbardziej skutecznym i niezbędnym narzędziem do oznaczania stron internetowych. Jeśli możesz całkowicie obejść się bez tła, jest to prawie niemożliwe bez stołu.

Każda tabela składa się z komórek ułożonych w rzędy i kolumny. Poszczególne komórki można łączyć, ustawiać wcięcia zawartości wewnętrznej od jej granic, ustawiać odległość między komórkami, ustawiać położenie elementów umieszczonych w nich, tworzyć podłoża oddzielone od innych komórek, tworzyć kontury, wstawiać inne tabele do komórek i wiele więcej.

Wstawianie tabeli

Aby wstawić tabelę na stronę, musisz wykonać polecenie menu

Ttabela/Wstaw/Tabela. W otwartym oknie, które pokazano na ryc. 8, należy ustawić liczbę rzędów i kolumny. Możesz także ustawić pozycję tabeli na stronie.. Zwykle pozostawia się domyślną pozycję. Jeśli jednak chcesz, aby podczas przeglądania tabela zawsze była zorientowana pośrodku w kierunku poziomym w oknie przeglądarki, musisz ustawić opcję wyrównanie do środka.

Opcja rozmiaru obramowania służy do ustawiania grubości linii, które łączą tabelę i komórki. Jeśli jest ustawiony na zero i jest znacznik wyboru Zwiń obramowanie tabeli, obramowania nie będą widoczne w przeglądarce. Pozwala to na użycie niewidocznej tabeli do układu strony.

Nieruchomość

Pole komórki służy do określania wcięć w pikselach z zawartości wewnętrznej dla wszystkich komórek tabeli. Nieruchomość Odstęp między komórkami umożliwia ustawienie odległości w pikselach między wszystkimi sąsiednimi komórkami tabeli. Ustaw szerokość służy do ustawiania szerokości tabeli w pikselach lub jako procent szerokości widocznego obszaru, niezależnie od rozmiaru jego zawartości. Domyślnie jest wyłączona. Oznacza to, że rozmiar tabeli będzie zależał od rozmiaru jej zawartości.

Jeśli chcesz ustawić styl i znaczniki tła tabeli, możesz to zrobić w tym samym oknie.

Po zakończeniu zaznaczania tabeli kliknij OK.

Układ komórek tabeli

Operacje na pojedynczych komórkach lub całej tabeli należy rozpocząć od zaznaczenia komórek. Możesz wybierać za pomocą myszy, klawiatury lub za pomocą zestawu narzędzi

FP. Aby wybrać myszką, należy umieścić kursor myszy na jakiejś komórce zaznaczonego obszaru, nacisnąć lewy przycisk myszy i trzymając wciśnięty klawisz płynnie przesuwać go po komórkach. Aby wybrać za pomocą klawiatury, należy umieścić kursor klawiatury w komórce, nacisnąć klawisz Shift i trzymając wciśnięty klawisz, nacisnąć żądane klawisze, aby przesunąć kursor klawiatury (w górę, w dół, w lewo, w prawo) do żądanego zaznaczono obszar komórek. Możesz wybrać pojedynczą kolumnę lub wiersz, a także całą tabelę.

Do wspomnienia zaznaczone komórki, musisz najechać kursorem na którąkolwiek z nich, naciśnij prawy przycisk myszy. W wyskakującym menu kontekstowym kliknij linię Połącz komórki. Komórki można usuwać w ten sam sposób.

Jeśli to konieczne rozbić jedną lub więcej komórek na kilka wierszy lub kolumn, musisz je zaznaczyć (przy dzieleniu jednej komórki zaznaczenie nie jest wymagane), uruchom polecenie Podział komórki. W wyświetlonym oknie podziału musisz określić sposób podziału - na kolumny lub wiersze. Następnie należy określić liczbę kolumn lub wierszy. To okno pokazano na ryc. dziewięć.

Tutaj możesz ustawić położenie jego zawartości w poziomie lub w pionie. Aby to zrobić, wybierz żądaną pozycję poziomą (środek, lewo, prawo) lub pozycja pionowa(powyżej, pośrodku, na samym dole, w stosunku do osi). Na ryc. 10-komorowa pozycja pionowa - nad(podczas umieszczania elementy wewnętrzne zostanie dociśnięty do górnej krawędzi komórki), poziomo - w centrum(treść zostanie wyśrodkowana).

Możesz ustawić szerokość i wysokość komórki w pikselach lub procentach.

W sekcji tła możesz ustawić tło komórki na kolor lub wzór, tak jak programujesz tło strony.

Jeśli musisz przypisać te same atrybuty do kilku komórek, na przykład ustawić je na tym samym tle, możesz to zrobić za jednym razem. Należy zaznaczyć takie komórki, a następnie zaznaczyć je w opisany sposób. Jeśli musisz przypisać jakieś atrybuty do wszystkich komórek, lepiej przypisać je do samej tabeli. Aby to zrobić, kliknij dowolną komórkę, wykonaj to samo polecenie.

5. Wstaw i sformatuj tekst

Aby wstawić tekst na stronie, musisz kliknąć kursorem klawiatury w żądane miejsce i wprowadzić tam tekst z klawiatury lub skopiować go z dowolnego innego dokumentu za pomocą schowka Windows. W ten sposób możesz wprowadzać tekst bezpośrednio na stronie lub w komórkach tabeli.

Formatowanie odnosi się do przeznaczenia czcionki, jej rozmiaru, oznaczenia kolorem, pogrubienia, kursywy, podkreślenia, orientacji tekstu w poziomie i szeregu innych czynności. Operacje te wykonywane są zgodnie ze standardami przyjętymi w edytorze Word: najpierw należy zaznaczyć fragment tekstu, a następnie zastosować do niego operację formatowania.

Różnica w stosunku do edytora Word jest tylko to, gdy naciśniesz klawisz Wchodzić (aby wstawić nowy akapit) między akapitami jest zbyt duży odstęp. Jeśli chcesz, aby odstępy między akapitami były takie same jak między wierszami jednego akapitu, naciśnij klawisz Zmiana i bez puszczania klawisza Wchodzić.

6. Wstawianie hiperłączy

Hiperłącze to dowolny element strony internetowej, do którego można przypisać łącze do innej strony internetowej. E-mail, obraz i ogólnie dowolny plik lub zakładkę na tej samej stronie. Są one aktywowane poprzez kliknięcie hiperłącza. Hiperłącze na stronie internetowej można zidentyfikować podczas przeglądania jej w przeglądarce po wyglądzie kursora myszy: jeśli element jest hiperłączem, to po najechaniu na niego kursor przyjmuje postać ikony.

Aby utworzyć hiperłącze, najpierw wybierz element strony, który w przyszłości stanie się hiperłączem. Jeśli hiperłącze jest tekstem, to aby go zaznaczyć należy płynnie przesuwać nad nim myszkę z wciśniętym lewym klawiszem lub klawiszami przesuwania kursora klawiatury z wciśniętym klawiszem

Zmiana. Jeśli hiperłącze to obraz, po prostu kliknij go, aby go zaznaczyć., którego widok pokazano na ryc. 12.

Jeśli hiperłącze powinno być wskaźnikiem do innej strony znajdującej się na dysku komputera, należy kliknąć w oknie z ryc. 12 Kliknij przycisk z obrazem folderu i wybierz stronę WWW na dysku (zazwyczaj jest to plik z rozszerzeniem html lub

htm ) . W takim przypadku pojawi się pasek adresu adres względny plik strony internetowej. Względny adres strony, która znajduje się w tym samym folderze, co tworzona strona, to po prostu Nazwa pliku, na przykład "photo2.htm". Jeśli łącze wskazuje na plik spoza tego folderu, hiperłącze może mieć postać ciągu „../../HomePage.htm”, tj. łączy do strony HomePage.htm na tym samym komputerze, ale w inny folder, który znajduje się dwa poziomy powyżej bieżącego folderu. Względne adresy URL są bardzo przydatne podczas tworzenia grupy stron sieci Web, które znajdują się na tym samym serwerze, ale w różnych folderach i są połączone hiperłączami. Po przygotowaniu stron do zwykły komputer możesz wysłać je na serwer WWW bez obawy, że połączenie między stronami i hiperłączami zostanie zerwane, ponieważ na serwerze względna struktura ich rozmieszczenia pozostanie taka sama, a zatem hiperłącza będą "działać".

Do tworzenia absolutny

adres, musisz podać pełny adres strony. Na przykład, jeśli chcesz utworzyć hiperłącze do adresu strony internetowej Moskwy Uniwersytet stanowy, następnie w wierszu adresu URL musisz wpisać tekst nazwy domeny http://www.msu.ru. Możesz wprowadzić tekst wskazujący adres IP, na przykład http://192.206.228.46.

Aby utworzyć takie hiperłącze, wprowadź następujący tekst w pasku adresu: mailto:adres. Na przykład, jeśli chcesz uruchomić po kliknięciu hiperłącza klient poczty wysłać list do o [e-mail chroniony].ru, następnie w wierszu wprowadzania adresu musisz wpisać tekst poczta:o [e-mail chroniony].ru . Możesz także kliknąć przycisk z obrazem koperty i w oknie, które się otworzy, wpisać ten sam adres bez określania prefiksu mailto:.

Czasami konieczne jest utworzenie linku do strony, która jest już w przeglądarce. Na przykład musisz szybko wrócić na górę strony, do dowolnego z jej akapitów itp. Zazwyczaj potrzeba takich linków pojawia się na tych stronach, które zawierają duża liczba Informacja. Adres takiego hiperłącza nazywa się zakładka.

Przed utworzeniem hiperłącza do zakładki należy najpierw utworzyć tę ostatnią. Aby to zrobić, musisz wybrać przyszłą zakładkę (fragment tekstu, obraz itp.) i wykonać polecenie Wstaw/Zakładka. W otwartym oknie, które pokazano na ryc. 13 należy wpisać nazwę zakładki w wierszu wprowadzania i kliknąć przycisk OK. W przykładzie pokazanym na ryc. Strona 13 ma już jedną wcześniej utworzoną zakładkę Zakładka 1, a tekst jest przygotowywany w oknie wprowadzania Zakładka 2 kolejna zakładka. Następnie należy wyjść z okna tworzenia zakładek, wybrać element hiperłącza do zakładki w oknie tworzenia strony za pomocą przycisku Zakładka(rys. 12) wybierz żądaną zakładkę z listy. Jego tekst zostanie umieszczony w pasku adresu. Na przykład, jeśli wybrana jest zakładka Zakładka 2, hiperłącze w pasku adresu przyjmie postać ciągu #Zakładka 2. Po kliknięciu OK zostanie utworzone hiperłącze do zakładki.

Programowanie okna wyświetlacza

Po kliknięciu hiperłącza do Strona internetowa zaczyna się pobieranie do przeglądarki. Zwykle ładuje się w tym samym oknie, co strona wywołująca. Jeśli chcesz, aby strona wczytała się do nowego okna, powinieneś w oknie z ryc. 12 kliknij przycisk po prawej stronie etykiety wpisu Wybór ramki. W oknie, które się otworzy, wybierz linię Nowe okno. Teraz po kliknięciu w takie hiperłącze w przeglądarce zostanie uruchomione pojedyncze okno i pojawi się w nim zawartość do pobrania.

Oprócz powyższego istnieje kilka innych opcji prezentowania wywoływanej strony w przeglądarce. Odnoszą się one do bardziej złożonych - stron ramek, które mają znacznie większe możliwości projektowania stron internetowych. Funkcje konstruowania stron ramek zostaną omówione poniżej.

7. Wstawianie elementów nietekstowych

Aby wstawić na stronie elementy nietekstowe, użyj pozycji menu Wstawić. Ta sama operacja dla niektórych elementów może zostać zduplikowana z paneli FP.

Lista menu jest pokazana na ryc. 14. Linie zawierające podmenu są oznaczone po prawej stronie wskaźnikiem w postaci trójkąta. Operacje, które można zduplikować za pomocą klawiszy skrótu, są oznaczone nazwą kombinacji klawiszy.

Ryż. 14. Podstawowe
lista menu Wstawić

Oto niektóre z najczęściej używanych nietekstowych elementów menu Wstaw:

  • Luka
  • . Przejdź do nowego akapitu bez specjalnych odstępów (tak samo jak Shift + Enter);
  • linia pozioma. Wstaw linię poziomą;
  • Symbol.
  • Wstawienie niestandardowego znaku, tj. znaku, którego nie ma na klawiaturze;
  • Data i godzina. Standardowy stempel do wyświetlania daty i godziny aktualizacji edytowanej strony. Deweloper może ustawić tryb wyświetlania tylko na datę lub datę i godzinę. Do wyboru jest kilka opcji pieczątek. Na przykład „14 lutego 2001 r., 25.02.200”. Jeżeli taka pieczęć jest umieszczona na stronie, oznacza to, że była ostatnio edytowana 14 lutego 2001 roku o godzinie 12.00. 2 minuty. 25 sek. przez zegar komputerowy;
  • Plik. Wstawia całą zawartość pliku wybranego z dysku. Treść jest wstawiana w miejscu, w którym znajduje się kursor klawiatury. W ten sposób możesz wstawić np. tekst dokumentu;
  • Zdjęcie
  • . Wstawianie obrazu z pliku;

    Rozważmy kilka cech wstawiania tych elementów.

    Linia pozioma

    Aby go wstawić, kliknij żądane miejsce na stronie, wybierz linię z menu Wstaw/linia pozioma i kliknij go, aby wstawić element. Jeśli chcesz zmienić atrybuty linii, przesuń nad nią kursor myszy, kliknij prawym przyciskiem myszy, aby otworzyć menu kontekstowe i kliknij linię ODwłaściwości linii poziomej . Pojawi się okno o tej samej nazwie, w którym możesz zmienić atrybuty linii: szerokość, wysokość, kolor i inne atrybuty.

    Często istnieje potrzeba wstawienia wiersza z atrybutami już przypisanymi do różnych miejsc na stronie. Aby to zrobić, kliknij linię, a następnie przycisk

    biurowy na panelu Standard aby skopiować linię do schowka. Teraz musisz kliknąć w odpowiednim miejscu na stronie, a następnie w przycisk wstawiania aby wkleić zawartość schowka w wybranym miejscu. W ten sposób możesz wielokrotnie wstawiać linię w różnych miejscach na stronie.

    Uwaga: Opisaną metodę można wykorzystać do skopiowania dowolnych elementów strony internetowej.

    Obraz jest najważniejszym elementem strony internetowej. Rzadko zdarza się znaleźć stronę bez zdjęcia. Oprócz głównej roli – do przenoszenia obrazu, rysunki służą do stylizacji napisów, tworzenia różnych linii, ramek, obrazów graficznych, czyli wszędzie tam, gdzie konieczne jest przedstawienie informacji w postaci obrazu graficznego.

    Aby wstawić, musisz kliknąć miejsce na stronie, w którym powinno znajdować się zdjęcie, wykonać polecenie Wstawić

    /Obraz/Z pliku lub kliknij przycisk Wstaw zdjęcie z pliku na panelu Standard(Rys. 5.2). W wyświetlonym oknie wybierz plik ze zdjęciem na dysku i kliknij OK.

    Po wstawieniu możesz oznaczyć zdjęcie lub pozostawić je bez zmian. Aby dodać znaczniki, kliknij prawym przyciskiem myszy na figurę, a następnie w menu kontekstowym na linii

    Właściwości obrazu. W oknie dialogowym, które pokazano na ryc. 15, możesz zaznaczyć wzór.

    Zakładka Ogólny określona jest nazwa pliku reprezentującego rysunek. Możesz zmienić obraz, wybierając inny plik.

    W kolejce Tekst możesz wprowadzić tekst reprezentujący podpowiedź. Gdy użytkownik w przeglądarce najedzie kursorem myszy na obraz, będzie on przez krótki czas unosił się pod kursorem.

    Jeśli obraz ma pełnić funkcję hiperłącza, możesz wybrać adres hiperłącza na tej samej karcie.

    Jeśli potrzebujesz wcięcia obrazu z sąsiednich elementów strony, możesz użyć właściwości interwały dla lewego i prawego marginesu poziomego oraz dla górnego i dolnego marginesu pionowego. W sekcji Rozmiar Możesz zmienić rozmiar obrazu, jego proporcje. Obraz można rozciągać, zmniejszać w żądanym kierunku, korzystając z właściwości szerokości i wysokości. Rozmiary można ustawić w jednostkach bezwzględnych - pikselach lub względnych - procentach w stosunku do rzeczywistego rozmiaru obrazu. Jeśli konieczne jest zachowanie proporcji obrazu podczas deformacji, ustaw opcję zachowaj proporcje.

    Formaty obrazu

    Istnieją rysunki wykonane w formacie grafika rastrowa i w formacie Grafika wektorowa.

    W grafika rastrowa informacja o wszystkich pikselach obrazu jest zapisywana w pliku, a każdy piksel jest reprezentowany jako sekwencja bitów, które przechowują cechy piksela - kolor, jasność, kontrast, współrzędne i inne cechy. Formaty rastrowe można nazwać naturalnymi, ponieważ informacje o obrazie są przechowywane w postaci, w jakiej są prezentowane na ekranie monitora, więc wykonanie operacji wyjściowych zajmuje minimum czasu. Jednak obrazy rastrowe zwykle wymagają dużej ilości pamięci do ich przechowywania, więc umieszczanie na stronie tylko małych obrazów jest uzasadnione. W celu zmniejszenia rozmiaru pliku rysunków rastrowych stosuje się metody kompresji. W porównaniu z oryginałem skompresowany rysunek zajmuje zwykle dziesięć razy mniej pamięci. Skompresowane obrazy bitmapowe ładują się szybciej, ale dekompresacja obrazu zajmuje trochę czasu.

    Grafika wektorowa jest używana głównie do tworzenia obrazów figury geometryczne za pomocą wzorów matematycznych. Ten sposób prezentacji obrazu jest bardzo efektywny, ponieważ nie wymaga przechowywania danych o każdym pikselu, a prezentacja obrazu sprowadza się do obliczeń matematycznych i wykonania instrukcji formowania obiekt graficzny. Zazwyczaj takie rysunki są używane w programach do projektowania, na przykład

    CHAM.

    Jest również format metapliku, który łączy oba rodzaje grafiki. Przykładem są pliki z rozszerzeniem .wmf. Taki pliki są w użyciu, na przykład do reprezentowania rysunków w popularnym Edytor słów kiedy dać? dokumenty tekstowe wymagany typ, wymiary rysunków często muszą zostać zmienione.

    Obecnie wśród twórców stron internetowych istnieją dwa powszechnie używane formaty bitmapowe − gif(Graphics Interchange Format - format wymiany grafiki), opracowany w 1987 roku i ulepszony w 1989 roku przez CompuServe, oraz JPEG, w skrócie Joint Picture Experts Group.

    Format GIF (pliki z rozszerzeniem

    .gif) obraz jest kodowany metodą blokową. Po odebraniu na komputerze jest dekodowany i odtwarzany na ekranie monitora. Format GIF zapewnia najmniejszą przestrzeń do przechowywania plików dla rysunków, które mają ograniczoną liczbę kolorów.

    Korzystanie z formatu GIF pozwala na tworzenie wielu efektów, w tym przezroczystość

    (przezroczystość). Efekt ten jest szeroko stosowany, gdy rysunek wymaga przedstawienia w formie innej niż prostokątna. W takich przypadkach część prostokątnego obrazu jest wypełniona specjalnym kolorem przezroczystości, a druga normalnymi kolorami. Po umieszczeniu na stronie obraz w tych pikselach, które są wypełnione kolorem przezroczystości jest zastępowany pikselami koloru tła, a pozostałe piksele są odtwarzane w zwykły sposób, tworząc w ten sposób przezroczysty efekt. Teraz ten sam wzór można umieścić na podłożach o różnych kolorach bez obawy, że jeśli kolory nie będą pasować, odwzorują się niechciane prostokątne kontury wzoru. Do tworzenia przezroczystych GIF-ów możesz użyć wielu edytorów graficznych, takich jak Photo Shop.

    Innym efektem jest sposób, w jaki pobrany plik GIF jest odtwarzany w przeglądarce. Jeśli rysunek jest zapisany w z przeplotem(z przeplotem), a następnie po przekazaniu do przeglądarki jest ładowany z różnych części obrazu. Przy niskiej prędkości połączenia powstaje efekt stopniowego rozwoju obrazu, od rozmytego na początku pobierania do wyraźnego na końcu. Zalety obrazków z przeplotem są oczywiste, ponieważ często na długo przed zakończeniem ładowania strony z niechcianym obrazkiem, użytkownik może ją zatrzymać, oszczędzając w ten sposób czas, który musiałby nieświadomie spędzić czekając na cały obraz w zwykłym formacie. być przesyłane. Program FP umożliwia tworzenie efektu przeplotu dla dowolnych rysunków GIF.

    GIF-y mogą być używane do tworzenia prymitywnych animacji, które są używane na stronach sieci Web do animowania („animowania”) ich zawartości. Efekty animacji niewątpliwie zdobią stronę, często służą zwróceniu uwagi na poszczególne jej fragmenty. tylna strona to zwiększone ilości plików zawierających animowane rysunki. Do tworzenia animowanych rysunków GIF możesz użyć wielu programów - od prostych do bardzo złożonych, pozwalających na tworzenie całych filmów animowanych w jednym pliku. Przykładem prostego programu do animacji jest MP Gif Animator (autorstwa V. Pham). potężny program animacja to Ulead GIF Animator Lite (produkt firmy Ulead Systems).

    W Format JPEG(pliki z rozszerzeniami .jpg, rzadziej .jpe lub JPEG) preferuje się przechowywanie wielokolorowych rysunków w skompresowanej formie, takich jak zdjęcia przyrodnicze, wysokiej jakości obrazy bogate paleta kolorów. Zapisując zdjęcie w edytorach graficznych (np. Photo Shop), możesz kontrolować wielkość pliku i jakość zdjęcia, które są ze sobą odwrotnie powiązane. Ta właściwość jest często używana przez twórców stron internetowych w celu maksymalnego zminimalizowania plików ze zdjęciami, tracąc część ich jakości. Często takie obrazy są praktycznie nie do odróżnienia wizualnie, ale mogą różnić się od 1,5 do 3 razy pod względem rozmiaru odpowiednich plików.

    Nie można ignorować plików ze zdjęciami w formacie BMP (pliki z rozszerzeniem .bmp). To jeden z pierwszych formatów graficznych. Rysunki w tym formacie zajmują dużo pamięci, jednak nadal jest używany, ale tylko do przedstawiania bardzo małych obrazów.

    Niedawno opracowano nowy format obrazu PNG specjalnie dla Internetu, który powinien zastąpić format GIF.

    Poważny zasób redukcyjny pliki graficzne to specjalna obróbka obrazów w edytorach graficznych. Dość często można kilkakrotnie zmniejszyć plik, prawie bez pogorszenia jakości obrazu. Na ryc. Rysunek 5.16 przedstawia przykład edycji obrazu za pomocą edytora graficznego Photo Shop.

    Kiedy zdjęcie zostało przekonwertowane do pliku za pomocą skanera, nawet na tak małym obszarze obrazu, jak kołnierz białej koszuli, powstało w nim wiele pikseli o różnej charakterystyce kolorystycznej. Zachowanie tych cech podczas kompresji obrazu wymaga „indywidualnego” podejścia do każdego z nich, co skutkuje nieracjonalnie dużym rozmiarem pliku.

    Po lewej na ryc. 16 przedstawia pasek narzędzi edytora graficznego, pośrodku poniżej zdjęcie, u góry powiększony fragment zdjęcia (prawa część kołnierza), po prawej powiększony widok wyretuszowanego fragmentu. Retusz polegał na ujednoliceniu kołnierzyka koszuli. Oczywiste jest, że jeśli piksele wyświetlające nazwany fragment zostaną ustawione jako jednokolorowe, to jakość zdjęcia nie ulegnie pogorszeniu, jednak podczas zapisywania przez kompresję informacje o wszystkich pikselach jednokolorowych zostaną zapisane raz, w efekcie z czego rozmiar pliku zmniejszył się. Podobną operację zastosowano na różnych fragmentach zdjęcia, co pozwoliło na 2,5-krotne zmniejszenie rozmiaru pliku. Retusz wykonano przy użyciu różnych narzędzi panelu, w tym narzędzia

    Narzędzie Ołówek (ołówek), który jest podświetlony aktywnym kolorem na panelu.

    Aby zminimalizować rozmiar plików graficznych, możesz również użyć programy specjalne, które usuwają z nich informacje niegraficzne umieszczane przez edytorów graficznych podczas opracowywania i zapisywania rysunku. Na przykład autor tych wierszy używa Advanced GIF Optimizer firmy Gold Software. Korzystanie z optymalizatorów może często zmniejszyć objętość pliku GIF o kolejne 10-60%.

    Aby przyspieszyć ładowanie obrazka, możesz pociąć go na osobne części, a następnie umieścić te części na stronach w różnych komórkach tabeli. Podczas przeglądania w przeglądarce rysunek złożony z części wygląda tak samo, jak rysunek bez fragmentów. Zaletą fragmentacji jest to, że obrazy, podobnie jak inne elementy strony, są ładowane do przeglądarki równolegle, co pomaga przyspieszyć ładowanie strony. Ponadto w przeglądarce natychmiast pojawia się w pełni załadowany fragment, co pozwala stworzyć iluzję rychłego ładowania obrazu. Wraz z możliwością przesyłania obrazów GIF i JPEG oraz edycji zasobów można osiągnąć zauważalne przyspieszenie ładowania obrazów na stronach.

    8. Strony z ramkami

    Te strony zostały po raz pierwszy użyte w przeglądarce Netscape Navigator. Jedna z takich stron prezentuje zestaw niezależnych okien ramek w przeglądarce, co daje możliwość rozszerzenia możliwości jednoczesnego wyświetlania poszczególnych stron lub różnych części strony, w szczególności wykonywania ich samodzielnego przewijania. Każda ramka jest reprezentowana oddzielny plik, a do opisania sposobu wyświetlania ramek w przeglądarce używany jest inny plik, który jest plikiem ramki. Każda ramka to sieć strona i może być oglądana jako oddzielna strona w jednym oknie.

    Na ryc. 17 przedstawia stronę internetową, która służy do poruszania się po stronach, na których wyświetlane są elektroniczne materiały metodyczne wydziału.


    Ryż. 17. Przykładowa strona internetowa z ramkami

    Strona zorganizowana jest w formie menu i składa się z trzech ramek

    : jedna znajduje się na górze, dwie pozostałe znajdują się pod nią - po lewej i prawej stronie. Górna ramka reprezentuje tytuł strony. Dolne ramki są rozmieszczone tak, aby można było odtworzyć i wykorzystać dwupoziomowe menu. Pierwszy poziom menu jest zorganizowany w lewej ramce. W nim użytkownik może wybrać żądaną specjalizację, dyscyplinę lub przejść z tej strony do strony głównej wydziału, klikając jeden z hiperłączy. Na ryc. 17 w lewej ramce nastąpiło kliknięcie na hiperłącze z napisem Informatyka, co można ocenić po wykropkowanej ramce, która ogranicza hiperłącze. Po kliknięciu w odpowiednią ramkę, wczytywana i odtwarzana jest strona zawierająca tytuły dostępnych materiałów metodycznych w tej dyscyplinie. W prawej ramce kursor myszy znajduje się nad linią otwarty w jednym z nagłówków. W ten sposób prawa ramka działa jak kontener podmenu, czyli aktywne menu drugiego poziomu.

    Opisana metoda organizacji pozwala na stworzenie dowolnie długiej listy dyscyplin i specjalności w lewej ramce w przyjaznej dla użytkownika formie oraz dowolnie długiej listy materiałów dla każdej specjalności lub dyscypliny do wyświetlenia w prawej ramce. W takim przypadku na liście prawej ramki zawsze możesz zobaczyć zawartość wybranej pozycji z listy lewej ramki.

    Podczas projektowania strony ramkowej najpierw tworzone są indywidualnie następujące strony:

    • header.htm - strona, która będzie reprezentować tytuł strony ramki;
    • menu.htm - strona do wyświetlania menu w lewej ramce;
    • informatique.htm - strona do wyświetlania listy materiałów metodycznych dla dyscypliny Informatyka;
    • certificate.htm - strona do wyświetlania listy materiałów metodycznych w specjalności Orzecznictwo;
    • tms_method.htm to rzeczywista strona ramki.

    Aby utworzyć ostatnią zorganizowaną stronę nowy plik za pomocą menu Plik /

    Tworzyći wybierz drużynę Inny szablony strony... z okienka zadań kreacja.
    W otwartym oknie dialogowymSzablony strony, wybierz zakładkę Strona struktura , który pokazuje szablony stron internetowych ze strukturą ramek, które są częścią FP (rys. 18).

    Okno nowej strony internetowej ramki (rys. 19) zostanie podzielone na części zgodnie z wybraną strukturą.

    Klikając prawym przyciskiem myszy, wywołujemy menu kontekstowe, okno właściwości strony i wpisujemy tekst w wierszu tytułu

    Materiały metodyczne wydziału, który jest zwykle wyświetlany u góry przeglądarki, i zapisz stronę tms_method.htm.

    Następnie kolejno kliknij przycisk Ustaw stronę startową w górnej i lewej ramce i połącz odpowiednią ramkę z naszą stroną za pomocą standardowego okna tworzenia hiperłącza pokazanego na ryc. 12. Po kliknięciu na przycisk górnej ramki zostaje przypisany adres header.htm, lewy to menu.htm, prawy to pusta strona (za pomocą przycisku Stwórz stronę na ryc. 19).

    Aby pliki informatique.htm i certificate.htm były wyświetlane w prawej ramce po wywołaniu przez hiperłącza, hiperłącza do tych stron WWW w pliku menu.htm mają przypisaną wartość domyślną - main.

    9. Przykład tworzenia strony internetowej

    Na ryc. 20 prezentowanych

    Strona internetowa history.htm , wyświetlanie krótka historia Zakład TMS KSTU.

    Ryż. 20. Widok strony internetowej w przeglądarce

    Widok zaznaczonej strony w edytorze FP pokazano na ryc. 21. Najpierw tworzona jest nowa strona. Ponadto, kliknięcie prawym przyciskiem myszy powoduje wywołanie menu kontekstowego, w którym następuje kliknięcie na linii Właściwości strony. W wyświetlonym oknie właściwości strony (rys. 3) należy wprowadzić jej tytuł Historia Zakładu TMS. Zakładka Inny każda z opcji wcięcia obramowania strony jest sprawdzana, a ich wartości są ustawione na zero. Oznacza to, że po wczytaniu do przeglądarki strona powinna być wyświetlana bez dopełnienia od górnej i lewej krawędzi obszaru roboczego. Kliknięcie przycisku Zapisać strona jest zapisywana na dysku jako history.htm.

    Następnie polecenie wstawienia tabeli na stronę umieszcza tabelę z czterema kolumnami i czterema wierszami. Trzy cyfry h1.gif, h2.gif, h3.gif są kolejno umieszczane w komórkach górnej linii od lewej do prawej (figury zostały wcześniej opracowane w edytorze graficznym Photo Shop). Pierwszy rysunek (KSTU) ma rozmiar 4 K, drugi (TMS) - 3,6 K, ostatni - 1,4 K. Wszystkie rysunki to napisy wykonane na bordowym tle. Ostatnia figura (jest z napisem HISTORIA WYDZIAŁU TECHNIKI INŻYNIERSKIEJ) jest pomniejszona w celu zmniejszenia pamięci.

    Ryż. 21. Widok zaznaczonej strony internetowej w edytorze FP

    Następnie kliknij komórkę pierwszego wiersza i wydaj polecenie Tabela/Wybierz wiersz podświetlony został pierwszy rząd komórek. Następnie najechano na niego kursorem i kliknięto prawym przyciskiem myszy. Polecenie wybrane z menu kontekstowego Właściwości komórki a w oknie, które się pojawi (rys. 10), wszystkim zaznaczonym komórkom zostanie przypisane tło w postaci obrazka bg.gif (zostało ono również przygotowane w edytorze Photo Shop). Ten rysunek jest monochromatycznym obrazem 8x8 pikseli o tych samych właściwościach. Rozmiar pliku podkładania to tylko 46 bajtów. Tło jest konieczne, aby cały pierwszy rząd stołu był pomalowany tym samym kolorem (rysunki są wykonane na tle tego samego koloru).

    Aby węższy obraz h3.gif został umieszczony w kierunku pionowym na środku komórki, jego właściwość Pozycja pionowa przypisano wartość Wyśrodkowany. Pozycja pozioma jest domyślnie pozostawiona, tj. dociśnięta do lewej krawędzi komórki. Dla ostatniej komórki pierwszego wiersza tabeli (jest pusta) do właściwości Szerokość ustawiony na 600. Jest to konieczne, aby mieć pewność, że cały pierwszy wiersz tabeli zmieści się na całej szerokości okna (a nawet zapewni pewien margines), co podczas przeglądania strony stworzy efekt monochromatycznego koloru cieniowanie nagłówka (banera) w przeglądarce (ryc. 20).

    Następnie przypisano dwa hiperłącza - do strony KSTU i strony Zakładu TMS. Są one niezbędne, aby widz strony mógł w razie potrzeby przejść do przeglądania tych stron. Pierwszemu obrazkowi (h1.gif) przypisano hiperłącze http://www.kgtu.runnet.ru na stronie KSTU (ryc. 5.12). Drugi (h2.gif) - hiperłącze do strony internetowej Zakładu TMS http://tms.kgtu.runnet.ru. W wierszu Tekst właściwości obrazu tekst jest przypisywany jako pierwszy Do strony KSTU, drugi - Do strony Zakładu TMS. Te wiersze są niezbędne, aby osoba przeglądająca stronę po najechaniu kursorem na obraz mogła odczytać przeznaczenie hiperłączy w podpowiedziach. Aby kontury obrazów hiperłączy nie były widoczne w przeglądarce, ich właściwość grubości obramowania jest ustawiona na zero, a obramowanie jest zwinięte (rys. 15). To kończy układ pierwszego rzędu tabeli.

    W drugim wierszu tabeli pierwsze dwie komórki zawierają tę samą figurę z pliku arrow.gif. Rysunek przedstawia strzałkę skierowaną w górę. Rozmiar pliku to tylko 324 bajty. Zdjęcia mają sugerować widzowi, że nad nimi znajdują się hiperłącza, z których może skorzystać. Aby upewnić się, że strzałki znajdują się dokładnie pod odpowiednimi cyframi, właściwość pozycja pozioma komórki mają przypisaną wartość w centrum.

    Tekst strony znajduje się w trzecim wierszu tabeli. Przed wstawieniem tekstu połączono drugą i trzecią komórkę tego wiersza. Przed scaleniem komórki zostały wybrane, a następnie wykonane zostało polecenie menu Tabela/Scal komórki. Następnie kursor został umieszczony w komórce i kilkakrotnie wciśnięto klawisz Enter, aby wstawić puste akapity.

    Pierwszy akapit komórki jest wpisywany z klawiatury Górna część tekst (poprzedza listę pracowników, którzy w różnych okresach pełnili funkcję kierownika działu TMS).

    Poniżej znajduje się tabela z jednym wierszem i dwiema kolumnami. W lewej kolumnie wpisuje się nazwiska pracowników, w prawej lata kierowania działem. Komórki tabeli są sformatowane tak, aby właściwość pionowy zaprowiantowanie ma znaczenie w górę, własność poziomy pozycjalewa strona. Taka organizacja pozwoli na umieszczenie w przeglądarce nazwisk i kropek w dwóch sąsiednich kolumnach dokładnie jedna pod drugą.

    Pod tabelą wpisany jest tekst, który uzupełnia opis historii.

    Cały tekst jest wpisany Arial, niektóre jego fragmenty są pogrubione. Są to między innymi daty, nazwiska, kody specjalności i inne elementy, na które należy zwrócić uwagę podczas przeglądania strony.

    Nie zabrakło okazji, aby podkreślić ciekawą cechę jednego z fragmentów tekstu: jeśli skrót zostanie utworzony z pierwszych liter nazw specjalności, które są nauczane na wydziale TMS, to powtórzy on wymyślony skrót z pierwszych liter nazwy wydziału, czyli znowu okaże się „TMS” (w tej części tekstu nie widać na rys. 20 i 21. Cechę tę podkreśla fakt, że pierwsze litery w nazwy specjalności wyróżniono pogrubieniem i kolorem czerwonym.

    Na koniec wszystkie komórki dolnej linii dużej tabeli są łączone, a dane wyjściowe działu - adres, numery telefonów, adres e-mail - są wprowadzane do wynikowej komórki mniejszą czcionką.

    FrontPage 2003 to profesjonalne narzędzie do projektowania, tworzenia, manipulowania danymi i publikowania stron internetowych, którego potrzebujesz do tworzenia złożonych, dynamicznych witryn internetowych. FrontPage 2003 usprawnia proces tworzenia stron internetowych w następujących trzech kluczowych obszarach.

    Projekt. Udoskonalone narzędzia do projektowania umożliwiają ulepszanie projektowania witryn internetowych. Nowe narzędzia do oznaczania i grafiki ułatwiają tworzenie witryn sieci Web, które w pełni odpowiadają intencji użytkownika.

    Pisanie kodu. Narzędzia projektowe pomagają poprawić jakość kodu i poprawić umiejętności programowania. Wbudowane narzędzia skryptowe zapewnią wsparcie dla interaktywności w tworzonych produktach. Dzięki profesjonalnym narzędziom do kodowania możesz pracować szybciej, wydajniej i dokładniej.

    Wzmocnienie. Możesz komunikować się i udostępniać dane na nowe sposoby, tworząc oparte na danych, wysoce interaktywne witryny sieci Web w edytorze, który działa zgodnie z zasadą, że to, co widzisz na ekranie, otrzymujesz podczas drukowania. Rozszerzona funkcjonalność publikowania przyspieszy umieszczanie tworzonych stron internetowych w Internecie.

    Strona tytułowa 2003 zawiera różnorodne narzędzia, opcje znaczników i funkcje graficzne, które przyspieszają pracę i umożliwiają tworzenie profesjonalnie wyglądających witryn sieci Web.

    • Podczas pracy z grafiką z innych aplikacji są dodatkowe funkcje do kontrolowania sposobu wyświetlania i zapisywania zdjęć.
    • Korzystanie z dynamicznych szablonów internetowych umożliwia edycję całych sekcji witryny internetowej. Po zaktualizowaniu głównego szablonu zmiany są automatycznie wprowadzane na wszystkich stronach zawierających łącze do tego szablonu.
    • Kieruj się na konkretną przeglądarkę internetową lub rozdzielczość ekranu za pomocą przeglądarki internetowej i funkcji rozpoznawania rozdzielczości. Możesz także zobaczyć, jak będzie wyglądać witryna z różnymi kombinacjami przeglądarek internetowych i uprawnień.
    • Twórz i pracuj z tabelami używanymi do układu oraz kontroluj układ z dokładnością do pikseli.
    • Elementy sterujące ułatwiają pracę z wieloma sąsiadującymi ze sobą obrazami i plasterkami oraz umożliwiają tworzenie efektów wyświetlania, takich jak wyskakujące menu.
    Przyspiesz i uprość generowanie kodu:

    Narzędzia projektowe oferowane przez FrontPage 2003 umożliwiają tworzenie potężnych, czystych plików HTML i mogą być używane zarówno przez profesjonalistów, jak i początkujących w dziedzinie tworzenia stron internetowych. Korzystając z kodu referencyjnego wygenerowanego przez program FrontPage 2003, profesjonaliści mogą korzystać z zaawansowanych narzędzi do kodowania i tworzenia skryptów, aby zapewnić interaktywną obsługę sieci Web. Prostota narzędzi do kodowania ułatwia rozpoczęcie pracy z HTML.

    Narzędzia do pisania kodu:

    • Widok podzielony pozwala zobaczyć, jak zmiany wprowadzane w widoku projektu aktualizują widok kodu.
    • Łatwo wybieraj, edytuj i zarządzaj tagami dzięki szybkiemu wyborowi tagów i szybki edytor Tagi.
    • Technologia Microsoft IntelliSense® upraszcza kodowanie i zmniejsza ryzyko błędów. Ta technologia jest dostępna dla HTML (Hypertext Markup Language), Cascading Style Sheets, XSLT (Extensible Stylesheet Language), Microsoft JScript® i Microsoft ASP.NET.
    • Usuń zbędny kod wygenerowany przez program Word 2003 lub inne programy do tworzenia stron internetowych.
    Narzędzia skryptowe:
    • Zwiększ interaktywność swojej witryny internetowej bez pisania kodu, korzystając z narzędzi skryptowych JScript.
    • Obsługa technologii Microsoft IntelliSense Visual Basic® Scripting Edition (VBScript) i narzędzia do tworzenia skryptów JScript.
    Podobał Ci się artykuł? Podziel się z przyjaciółmi!
    Czy ten artykuł był pomocny?
    TAk
    Nie
    Dziękuję za opinię!
    Coś poszło nie tak i Twój głos nie został policzony.
    Dzięki. Twoja wiadomość została wysłana
    Znalazłeś błąd w tekście?
    Wybierz, kliknij Ctrl+Enter a my to naprawimy!