Dynamiczne ustawienia menu. Przejścia CSS dla animacji menu

Nie wszystkie szablony oferują możliwość korzystania z wbudowanego menu dynamicznego, gdy najechanie kursorem myszy na element menu powoduje wyświetlenie ukrytych podmenu wraz z rozwijaną listą. Menu statyczne mogą oczywiście być samowystarczalne, pod warunkiem, że struktura Twojej witryny będzie składać się tylko z kilku sekcji. Jest to jednak typowe tylko dla witryn z wizytówkami. Z reguły szanująca się strona internetowa ma dość rozgałęzioną strukturę, co samo w sobie zmusza do uciekania się do rozwijanych menu, ponieważ szerokość lub wysokość strony internetowej nie jest nieskończona i nie będzie w stanie umieścić wszystkich elementów w jednej linii (przypadek pozycja pozioma menu) lub w jednej kolumnie (case menu pionowe). Ponadto zauważono, że użytkownicy nie respektują menu, które mają więcej niż 5-10 pozycji, czytanie niekończącej się listy pozycji menu na stronie staje się dla nich męczące, opuszczają ją nawet nie dochodząc do ostatniej pozycji, nawet, być może, razy to, czego szukali w Twojej witrynie. Dlatego potrzeba dynamicznego menu jest bardzo poważnie uzasadniona. Istnieje specjalne przedłużenie, który jest zainstalowany w Twojej Joomla i pozwala na tworzenie i projektowanie menu według własnego uznania w trybie projektowania. Ale nawet jeśli nie potrzebujesz menu dynamicznego, wystarczy Ci statyczne lub wybrany szablon witryny już je posiada, nie spiesz się z ignorowaniem tego tematu. W każdym razie pozwoli ci to lepiej zrozumieć specyfikę aplikacji internetowych, gdy sam będziesz pracować w programie Swmenufree.

Com_swmenufree5.2_J1.5

Jest to nazwa wtyczki, którą stąd pobieramy i instalujemy w sposób, który jest nam już znany na naszej stronie. Po instalacji wybierz „SwMenuFree” w menu „Komponenty” i przejdź do panelu sterowania tego programu. Mamy okno z wieloma ustawieniami i zakładkami „Opcje modułu”, „Wymiary i położenie”, „Kolor i tło”, „Czcionki i wcięcia”, „Obramowania i efekty”. Nie powinieneś szczególnie przestraszyć się mnóstwem konfigurowalnych parametrów, ale od razu dokonajmy rezerwacji: czeka nas twórcza praca.

W wierszu „Nazwa modułu” od razu wpisujemy nazwę menu, które będziemy tworzyć. Ta nazwa jest ważna dla systemu, a nie dla nas, ponieważ po utworzeniu menu o tej nazwie nadal nie będziesz widzieć menu swojej witryny na liście. Faktem jest, że nie tworzymy nowego menu jako takiego, ale konwertujemy zawartość któregokolwiek z już utworzonych na nową, dynamiczną wersję. Dla przejrzystości użyliśmy nazwy „Menu dynamiczne”.

W wierszu „Źródło menu” wybierz „Trans Menu”, ponieważ ta opcja ze wszystkich trzech możliwych jest najbardziej optymalna dla naszego szablonu. Ci, którzy nie wierzą, niech spróbują reszty, aby ostatecznie zgodzić się z naszą wersją.

Linia „Źródło menu” pozwala nam wybrać z listy to, co już jest istniejące menu witryna, w której chcemy się zaprezentować widok dynamiczny. Właściwie wybór nie jest duży, bo nadal mamy tylko jedno menu – Main, o nazwie systemowej mainmenu. Wybieramy go z tej listy.

W linii „Parent” pozostawiamy wartość TOP. Oznacza to, że nasze menu nie jest gałęzią podrzędną, ale samo w sobie pełni rolę rodzica, zdolną do „odradzania” innych gałęzi menu.

Przejdźmy do kolejnego bloku ustawień – „Opcje arkusza stylów”. W linii „Wczytaj tabelę” wybierz „Zaimplementuj styl bezpośrednio na stronę”, dzięki temu nasze menu będzie mogło używać dokładnie tych stylów projektowania, które sami dla niego ustawimy, ignorując style narzucone przez szablon witryny.

W wierszu „Przyrostek klasy modułu” nie piszemy nic.

Ignorujemy następny blok „Ustawienia buforowania”.

Blok " Wspólne parametry moduł". Umieść pola wyboru, jak pokazano na rysunku.

Zablokuj „Umieszczenie i dostęp”. W wierszu „Umieszczenie modułu” umieszczamy nagłówek1 (jest to pozycja menu poziome przewidziany tego szablonu. Nawiasem mówiąc, obecnie mamy tam moduł wyszukiwania w witrynie, więc najpierw będziesz musiał go przełączyć na inną pozycję - baner).

Innych ustawień w tej zakładce nie dotykamy, choć na stronie mamy tylko jedno menu, nie mają one żadnego znaczenia, a ustawione w nich domyślne wartości są dla nas w pełni zadowalające. Jeśli jednak chcesz, aby Twoje menu główne wyświetlało się nie na wszystkich stronach serwisu, a tylko na kilku, wybierz to, czego potrzebujesz w bloku „Wyświetl moduł menu na stronach”.

Przejdź do następnej zakładki - „Wymiary i położenie”. Tutaj możemy skonfigurować wysokość, szerokość elementów menu i podmenu, a także sposób ich rozmieszczenia na stronie.

Blok „Pozycja i orientacja menu”. W wierszu „Menu - Wyrównanie:” umieść w lewo, ponieważ Wyrównanie tekstu menu do lewej strony uważa się za optymalne. W wierszu „Menu / Podmenu - Orientacja:” wybierz poziom/dół/prawo (poziomo-dół-prawo). Nie zapomnij kliknąć przycisku „Wyświetl” po każdej zmianie ustawień. Po czym zobaczysz swoje menu w osobnym oknie, w którym funkcjonuje i wygląda tak, jak będzie wyglądać na stronie po zapisaniu wyników. Po podziwianiu możesz zamknąć to okno.

Zablokuj „Rozmiary elementów menu”. Tutaj wszystkie wartości wynoszą zero, co oznacza, że ​​elementy menu są dopasowywane do rozmiaru zawartego w nich tekstu. Jest to dla nas bardzo dobra opcja, ponieważ... tworzymy menu poziome i w nim, w przeciwieństwie do pionowego, wszystkie elementy nie powinny być tej samej wielkości.

W blokach „Menu Przesunięcia”. Najwyższy poziom" i "Przesunięcia podmenu" możesz ustawić wielkość przesunięcia pozycji menu względem siebie. Chociaż nie ma takiej szczególnej obiektywnej potrzeby.

Zakładka „Kolor i tło”. Tutaj zaczyna się zabawa. Tutaj musimy wykazać się maksymalną kreatywnością, projektując wszystkie elementy naszego menu w kolorach harmonizujących z tłem szablonu strony. Tło pozycji menu można wypełnić kolorem i obrazami (pomyśl o programie PowerPoint!). Co więcej, wypełnienie obrazem ma dominujące znaczenie nad wypełnieniem kolorem: jeśli wypełnisz obiema opcjami, wynikowym wypełnieniem będzie obraz. Ponieważ nie mamy żadnych obrazów, na razie pominiemy blok „Obrazy tła”. A w bloku „Kolor tła” zaczynamy pracować. Tuż poniżej znajduje się paleta wyboru kolorów oraz podpowiedź jak to zrobić: „Wybierz kolor z palety i kliknij przycisk Wybierz obok pola, do którego chcesz zastosować wybrany kolor.”

Nie zapomnij za każdym razem sprawdzić wyników. Przekonaj się sam, jakie kolory wybrać, ale mimo wszystko lepiej będzie, po obejrzeniu w osobnym oknie, kliknąć przycisk „Zapisz” i przejść do strona główna strona (jeśli pracujesz z witryną w dwóch zakładkach - stronie głównej i panelu administracyjnym - jak początkowo sugerowaliśmy, to przejście do sąsiedniej zakładki przeglądarki nie będzie trudne), aby na własne oczy zobaczyć, jak wybrany kolor pasuje tło szablonu witryny.

Ale nie możemy wykorzystać wszystkich możliwości.

Zmiana struktury menu

Najpierw wchodząc na stronę główną widzimy, że mamy dwa główne menu: jedno to nowe, nad którym obecnie pracujemy, drugie to stare, które znajduje się na swoim miejscu po prawej stronie strony. Nie zdziw się, jeśli menu się nie powielą, jedno z nich musi zostać wyłączone, czyli stare, a raczej moduł do jego wyświetlania musi zostać wyłączony. Przejdź do „Rozszerzenia” - „Moduły” i wyłącz moduł „Menu główne”, klikając zielony znacznik wyboru w jego linii, zamieniając go w czerwone kółko z białym krzyżykiem. Przechodzimy do zakładki, w której otwarta jest strona główna i widzimy, że zostało już tylko jedno menu.

Po drugie, nie możemy dostosować wyglądu podmenu, ponieważ jeszcze ich nie mamy. Dlatego musimy przebudować strukturę naszego menu tak, aby główne elementy stały się podpunktami.

Aby to zrobić, przejdź do menu ustawień: „Menu” - „Menu główne”. Oto lista pozycji menu głównego. Dwa z nich zostawmy jako główne, a resztę przenieśmy do podmenu. Będziemy musieli kolejno otwierać każdy z elementów menu głównego „skazani” na rolę podmenu i w wierszu „Pozycja menu nadrzędnego” kliknąć na element, którego podmenu tworzymy ten element. Rysunek pokazuje już wynik pięciu kolejnych selekcji dla każdego elementu (poprzednie główne elementy „Forum”, „Galeria”, „Pobierz”, „Blog kategorii”, „Demonstracja”, którego elementem nadrzędnym był wcześniej niewidoczny element „Top” , stały się „dziećmi” » pozycja główna „Możliwości”).

Aby lepiej zrozumieć mechanizm tych zmian, zalecam, aby po każdej zmianie statusu pozycji menu i zapisaniu jej przejść na stronę główną, nacisnąć klawisz F5 i przyjrzeć się wynikowi. Myślę, że dwa, trzy razy wystarczą. Można pójść jeszcze dalej i jeszcze bardziej skomplikować menu, na przykład czyniąc podpozycję „Ładowanie” rodzicem dwóch ostatnich elementów. Dzięki temu w naszym menu będziemy mieli trzystopniową hierarchię.

Liczba poziomów, które można w ten sposób utworzyć, nie jest ograniczona, ale nie zaleca się tworzenia więcej niż trzech poziomów.

Teraz wracamy do panelu sterowania SwMenuFree i dostosowujemy pozostałe elementy podmenu, a także kolor czcionki i kolor obramowania w odpowiednich blokach o tej samej nazwie w zakładce „Kolor i tło”. Należy doprecyzować, że kolor menu, podmenu oraz czcionkę ustala się dla dwóch opcji: poza kursorem oraz gdy kursor myszy najedzie na podpozycję (pozycję i jej zawartość). Te kolory oczywiście muszą być różne.

Zakładka „Czcionki i wcięcia”. Tutaj możesz wybrać rodzaj czcionki i wcięcia od krawędzi komórki menu do tekstu tej komórki. Polecam nie zmieniać tutaj niczego poza grubością czcionki, ponieważ zwykły styl czasami łączy się z tłem wypełnienia (w bloku „Gęstość czcionki” wybierz pogrubienie).

Karta Obramowania i efekty. Zdjęcie przedstawia nasze ustawienia.

Kliknij Zapisz. Menu jest gotowe. Nie musisz już przechodzić do panelu sterowania SwMenuFree, chyba że zdecydujesz się zmienić kolor projektu bieżącego szablonu lub podczas zmiany szablonu strony, ponieważ Jednak ustawienia wyglądu menu nie są zapisywane.

Ale nie rozważaliśmy jeszcze możliwości wypełnienia tła wzorem.

Wypełnienie tła menu wzorem

Ta metoda jest bardziej skomplikowana, ale możliwości projektowania są nieograniczone. Do tworzenia obrazków posłużymy się GIMP-em (pamiętam, że na lekcji 5 używaliśmy go do stworzenia logo strony internetowej, a raczej próbowaliśmy je stworzyć).

Musimy stworzyć przezroczysty obraz o wymiarach 200 × 200 pikseli. „Plik” - „Utwórz”.

Ustawienia okna dialogowego jak na obrazku. Teraz weź narzędzie „Zaznaczanie prostokątne” (naciśnij klawisz R) i narysuj na naszym przezroczystym obrazie ramkę zaznaczenia o szerokości 100 pikseli i wysokości 25 pikseli. Na pasku narzędzi w wierszu „Rozmiar” po poruszeniu myszą widoczne są zmieniające się liczby określające wysokość i szerokość utworzonego zaznaczenia; w zależności od tych wartości kierujemy myszką w tę lub inną stronę, aż wartości wynoszą odpowiednio 100 i 25 pikseli. Powstałe zaznaczenie powinniśmy wypełnić kolorem ciemnobrązowym, korzystając z narzędzia Wypełnienie płaskie (Shift+B) i zaznaczając żądany kolor w palecie. Paletę można wyświetlić na ekranie, klikając prostokąt koloru pierwszego planu na pasku narzędzi. (Ogólnie rzecz biorąc, wszystkie przyciski panelu mają podpowiedzi; wystarczy przytrzymać kursor na dowolnym istotnym elemencie panelu – natychmiast pojawi się podpowiedź).

W palecie należy kliknąć kursorem na odpowiedni kolor i zgodzić się z wyborem. Następnie kliknij wewnątrz zaznaczenia, a zostanie ono wypełnione wybranym kolorem.

Teraz musimy zaznaczyć pasek o grubości 3 pikseli wzdłuż dolnej krawędzi naszego wypełnienia. Robimy to tak jak właśnie zaznaczyliśmy pierwszy obszar, skupiając się na liczbach na pasku narzędzi (w linii „Rozmiar”). Jeśli zwolniłeś już kursor, a liczby nadal nie są takie same, powiedzmy mniej więcej niż potrzeba, przesuń kursor do granicy zaznaczenia. Gdy tylko zmieni kształt, naciśnij lewy przycisk myszy i przeciągnij kursor w dół lub w górę. Puszczając myszkę, widzimy, że w ten sposób zwiększyliśmy lub zmniejszyliśmy obszar zaznaczenia. Spróbujmy ponownie, dostosowując obszar zaznaczenia do potrzebnego rozmiaru. Wypełnij go pomarańczą.

Teraz uczyń warstwę częściowo przezroczystą: menu „Okna” - „Panele” - „Warstwy”. W panelu, który się pojawi, widzimy prostokąt aktualnej warstwy, zaznaczamy go klikając i przesuwając suwak w linii „Krycie” tak, aby wartość wyniosła 80. Nasze wypełnienie stało się trochę przezroczyste. Teraz z całego tego wypełnienia musimy wyciąć cienki pasek o wysokości 25 pikseli i szerokości 3 pikseli. Bierzemy narzędzie „Przytnij” i podobnie jak poprzednio w przypadku narzędzia do zaznaczania, pokrywamy pożądany prostokąt, ponownie skupiając się na wymiarach w panelu. Jeśli chybimy, poprawiamy błąd, tak jak przy selekcji; jeśli chodzi o poprawianie błędów, są to narzędzia identyczne. (Aby pracować z małymi obiektami, lepiej zwiększyć skalę obrazu do 200-400%. Rozwijana lista z możliwymi rozmiarami skali znajduje się na pasku stanu okna obrazu, trudno ją przeoczyć.) Po wymagane rozmiary osiągnięty, kliknij wewnątrz wybranego prostokąta i uzyskaj nasz pierwszy gotowy obraz przycisku menu. Nie zdziw się, że jest taki mały, przeglądarka powtórzy go tyle razy, ile będzie konieczne, aby wypełnić cały obszar przycisku. Zapisujemy go w formacie .png na Pulpicie pod nazwą a2.

Utwórz kolejny prostokątny obraz o wymiarach 25 na 3 piksele, wypełniony tylko jednolitym brązowym kolorem, takim samym jak pierwszy. Zapisz go pod nazwą a1.png.

Przejdź do panelu administracyjnego serwisu i uruchom SwMenuFree. Zakładka „Kolor i tło”. Zablokuj „Obrazy tła”. Linia „Menu – tło:”, przycisk „Wybierz”. Teraz musimy przesłać nasze zdjęcia na stronę. W wyświetlonym oknie kliknij przycisk „Przeglądaj”. Wskazujemy nasz obraz a1.png na Pulpicie i klikamy przycisk Prześlij. Jest pobierany do folderu na stronie. Aby wstawić go jako tło pozycji menu, kliknij bezpośrednio na obraz przesłany do serwisu i kliknij OK. Robimy to samo, ale tylko w wierszu „Menu - tło po najechaniu myszką:” z obrazem a2.png.

Jeśli wszystko zostało wykonane poprawnie, efektem było bardzo oryginalne menu: w stanie cichym menu jest monochromatyczne, a po najechaniu kursorem na dole pozycji menu pojawia się pomarańczowy pasek. Gdy szybko poruszasz myszą po menu, pasek ten szybko przebiega przez całe menu.

Pytania kontrolne:
  • Wymień zalety menu dynamicznego nad statycznym.
  • Co to jest „rodzic” w terminologii menu dynamicznego.
  • Jak mogę zmienić strukturę już utworzonego menu?
  • Jaka jest specyfika pracy w rozszerzeniach Joomla, czyli aplikacjach internetowych?
  • Co się stanie jeśli po skonfigurowaniu menu w aplikacji SwMenuFree połączysz witrynę z innym szablonem? Wypisz możliwe problemy.
  • Zadania testowe:
  • Zastanów się nad projektem obrazu swojego menu.
  • Utwórz cztery obrazy w GIMP: dwa dla menu, dwa dla podmenu.
  • Zainstaluj obrazy w swoim menu.
  • Wyślij link do swojej witryny w celu kontroli.
  • Prawdopodobnie widziałeś dynamiczne i animowane menu na niektórych stronach internetowych, które zmieniają się w miarę przewijania w dół. Minimalizując główne menu nawigacyjne, zostawiasz więcej miejsca na treść. W tym samouczku wyjaśnimy, jak samodzielnie stworzyć menu, korzystając z HTML5, CSS3 i odrobiny jQuery.

    Jeżeli zależy Ci na szczególnym skupieniu się na zawartości witryny, a także umożliwieniu stworzenia większej i bardziej efektownej nawigacji przy pierwszej wizycie użytkownika na stronie, to tego typu menu jest dla Ciebie idealne. Możesz doskonale zaprezentować swoją markę lub logo, a po pierwszym spojrzeniu na witrynę zredukować niektóre elementy, pozwalając użytkownikowi skupić się na Twoich treściach.

    Można to zrobić na kilka sposobów. W tym samouczku wyjaśnimy, jak tworzyć stałe menu całą szerokość strony, która zmienia wysokość wraz z logo, tworząc zminimalizowaną wersję oryginału. W razie potrzeby logo można także zastąpić inną opcją, np. inicjałami lub ikoną, jednak należy pamiętać, że tutaj bardzo ważna jest spójność, aby użytkownik zrozumiał, jak element się zmienił i jakie jest jego główny cel nadal jest nawigacją witryny.

    Tworzenie podstawowej struktury w HTML5

    Zaczniemy od stworzenia podstawowego kodu HTML, którego będziemy potrzebować. Na początek będziemy trzymać się bardzo prostej struktury HTML5.

    Teraz, gdy już napisano nasz początkowy kod HTML, dodamy kod menu, a także inne szczegóły nagłówka naszego pliku HTML.

    Jak stworzyć animowane menu | Magazyn WebDesign

    • dom
    • Artykuły
    • To bardzo fajna strona!

    Przewiń w dół i zobacz, jak zmienia się menu

    Wszystko! Przybyliśmy!

    W naszym: Dodaliśmy metatag dla autora, wskazujący twórcę dokumentu, po czym dodaliśmy słynny „reset CSS” Erica Meyera, który zresetuje prawie każdy element w pliku HTML, zapewniając czystszy i łatwiejszy w obsłudze dokument z. A ponieważ będziemy później używać JQuery, w ostatniej linii naszego głównego elementu zaimportujemy go poprzez CDN JQuery.

    W naszym tagu użyliśmy domyślnego elementu HTML5. Nasz będzie zajmował całą szerokość strony i będzie odpowiedzialny za zmiany pomiędzy dużą i małą wersją menu. Dajemy naszej klasę o nazwie „large”, abyśmy mogli zmienić pewne specyficzne właściwości w CSS, aby zmienić nasze menu w mniejszą wersję. To jest nasze menu kontenerowe, które zawiera obraz logo naszej witryny oraz prostą, nieuporządkowaną listę menu z trzema linkami.

    Ponieważ nie mamy tutaj żadnej treści, zostanie to użyte do rozciągnięcia strony i wymuszenia przewijania, aby zadziałało.

    I to wszystko, jeśli chodzi o część HTML. Teraz musimy wystylizować elementy za pomocą CSS i nadać menu dynamiczność.

    Stylizacja menu i stron

    /* Importuj czcionkę Amaranth */ @import url(//fonts.googleapis.com/css?family=Amaranth); /* Styl główny */ body( kolor tła: #ebebeb; ) ul( float: w prawo; ) li( display: inline; float: w lewo;) img.logo(float: w lewo;) /* Rozmiar i centrowanie menu * / nav(szerokość: 960px; margines: 0 auto;)

    Trochę tego CSS sprawi, że nasze menu będzie miało szerokość 960px pośrodku, jednocześnie organizując nasze menu po prawej stronie i logo po lewej stronie. Zaimportujemy także czcionkę Amaranth z czcionek internetowych Google, aby użyć jej w tekście na stronie.

    Sekcja.stretch( float: lewa; wysokość: 1500px; szerokość: 100%; )section.stretch p(rodzina czcionek: "Amaranth", bezszeryfowa; rozmiar czcionki: 30px; kolor: #969696; wyrównanie tekstu: środek; pozycja: względna; margines górny: 250px; ) sekcja.stretch p.bottom ( góra: 100%; )

    W tym przypadku po prostu rozciągamy stronę, aby zachęcić do przewijania i ustawiamy tekst tak, aby wskazywał początek i koniec treści.

    Nagłówek (tło: #C7C7C7; obramowanie dolne: 1px stałe #aaaaaa; pływak: lewy; szerokość: 100%; pozycja: stała; indeks Z: 10; ) nagłówek a(kolor: #969696; dekoracja tekstu: brak; rodzina czcionek: „Amaranth”, bezszeryfowa; transformacja tekstu: wielkie litery; rozmiar czcionki: 1em; ) nagłówek a.active, nagłówek a:hover( kolor: #3d3d3d; ) nagłówek li(margines-right: 30px; ) /* Wymiary większego menu */ header.large( wysokość: 120px; ) header.large img( szerokość: 489px; wysokość: 113px; ) header.large li(górny margines: 45px; )

    W tym miejscu kończymy podstawową stylizację naszego nagłówka. będzie służyć jako pojemnik na nasze menu. Będzie zawierał nasz element i będzie służył jako element, w którym definiujemy kolor tła, wysokość menu, styl menu linków i inne. Dostosuje się do szerokości ekranu z właściwościami szerokości: 100% i pozostanie niezmieniona w przypadku innych elementów witryny. Ważne jest, aby pamiętać o ustawieniu indeksu Z tak, aby element nachodził na resztę strony, a także pozycji:fixed, aby element div był zakotwiczony u góry i pozostawał w tej samej pozycji podczas przewijania strony przez użytkownika. strona internetowa. Jak widać, oprócz ustawiania stylów nagłówków, za pomocą pliku header.large ustawiamy także pewne specyficzne style dla klasy „large”. Początkowy stan naszego menu będzie duży, dlatego definiujemy tutaj tylko niezbędne style, aby wyglądało tak, jak chcemy, gdy użytkownik po raz pierwszy wejdzie na stronę.

    Dynamiczna zmiana rozmiaru menu

    Nasze menu jest gotowe i stylizowane, ale nadal chcemy popracować nad jego minimalizmem. Aby stworzyć ten „stan”, utworzymy nową klasę CSS o nazwie „small”, która będzie odpowiedzialna za zmianę właściwości, które musimy zmodyfikować. Zdefiniowaliśmy już duże menu, więc teraz musimy tylko skrócić nasze menu, proporcjonalnie zmniejszyć nasz obraz i (górny margines) użyć w naszych elementach

  • , które również należy zmniejszyć, aby pozostały wyśrodkowane w pionie przy nowej wysokości menu:

    /* Rozmiary mniejszego menu */ header.small( wysokość: 50px; ) header.small img( szerokość: 287px; wysokość: 69px; górny margines: -10px; ) header.small li(górny margines: 17px; )

    Jak więc widać, style te są prawie identyczne z tymi w większym menu, po prostu zmieniliśmy klasę „duży” na „mały” i zmieniliśmy używane wartości na mniejsze. Używamy ujemnych marginesów na obrazie, aby wycentrować go w pojemniku, ponieważ obraz ma cienki cień i jest wyższy niż napis, aby go pomieścić. Teraz mamy wszystkie niezbędne style, aby dostosować menu zmiany rozmiaru, a jeśli spróbujesz to zmienić w swoim , w przeglądarce zobaczysz, że menu zmniejszy się. Musimy jednak zachować dynamikę.

    Zmiana klasy menu za pomocą jQuery

    Po wprowadzeniu wszystkich naszych stylów wystarczy dodać trochę kodu JavaScript, aby przełączać się między „dużymi” i „małymi” klasami. Ponieważ chcemy to zmienić w oparciu o przewijanie użytkownika, użyjemy funkcji .ScrollTop() w jQuery. Ta funkcja pozwoli nam uzyskać lub ustawić pozycję przewijania w pikselach. Pozycja przewijania to liczba pikseli, które zostały już przewinięte w oknie przeglądarki. W tym przypadku musimy tylko wiedzieć, ile pikseli przewinął użytkownik, abyśmy mogli wywołać nasz kod i przełączać się między klasami:

    $(dokument).on("przewiń",funkcja())( if($(dokument).scrollTop()>100)( $("nagłówek").removeClass("duży").addClass("mały") ; ) else( $("nagłówek").removeClass("mały").addClass("duży"); ) ));

    Jeśli użytkownik przewinął więcej niż 100 pikseli, wówczas utworzona przez nas „duża” klasa zostanie usunięta i dodana zostanie nasza nowa „mała” klasa. W ten sposób rozmiar menu zmieni się tak, jak zdefiniowaliśmy wcześniej w CSS. Spróbuj, powinno już działać, ale być może zauważyłeś, że przejścia między klasami wydają się bardzo nagłe.

    Przejścia CSS dla animacji menu

    Aby płynnie przełączać się pomiędzy klasami w naszym menu, wykorzystamy przejścia CSS. Po prostu użyj tego fragmentu kodu obok reszty kodu CSS.

    Header,nav, a, img, li( przejście: wszystkie 1; -moz-przejście: wszystkie 1; /* Firefox 4 */ -webkit-transition: wszystkie 1; /* Safari i Chrome */ -o-transition: wszystkie 1s; /* Opera */ )

    Tutaj zdefiniowaliśmy przejścia dla wszystkich właściwości CSS dla. I

  • elementy, w zasadzie wszystkie elementy, które zmieniamy. Ten kod będzie animował zmiany między obiema klasami za pomocą przejść CSS w ciągu 1 sekundy. Sprawdź teraz, wynik powinien być bardzo gładki.

    Czy słyszałeś kiedyś stwierdzenie, że „nie można utworzyć dynamicznego menu rozwijanego przy użyciu samego CSS w IE”? Jestem pewien, że tak. Czy naprawdę w to wierzysz? To prawda, lepiej w to nie wierzyć.

    Cel, który chcemy osiągnąć w tym artykule

    Celem tego artykułu jest stworzenie menu rozwijanego dla IE wykonanego w całości w CSS. Zaczynając od tego ustawienia rozszerzyłem zadanie, aby takie menu działało w innych najbardziej znanych przeglądarkach (z komentarzy wynika, że ​​są to przeglądarki Opera 7.x i najnowsze wersje Firefoksa).

    Celem, który chcemy osiągnąć w tym artykule, jest w zasadzie mniej lub bardziej ogólny charakter edukacyjny, tj. dają ogólne pojęcie o niektórych „ukrytych” i rzadko używanych funkcjach przeglądarek.
    Również ci, którzy są szczególnie ciekawi, mogą znaleźć w tym artykule kilka sztuczek, dzięki którym można osiągnąć pewne niestandardowe rezultaty. Cóż, dla programistów ten artykuł może stać się powodem do przemyśleń lub źródłem nowych pomysłów.

    Jak wyobrażamy sobie poziom czytelnika?

    Właściwie myślałem o oznaczeniu tego artykułu jako „zaawansowany”. Ale jestem pewien, że nawet nie najbardziej doświadczeni programiści dobrze zrozumieją, co jest napisane w artykule. Krótko mówiąc, czytelnik musi po prostu znać podstawy CSS i
    HTML.

    Czym to menu różni się od wszystkich innych?

    Spędziłem dużo czasu szukając w Internecie menu stworzonych w CSS, ale nie znalazłem ani jednego rozwiązania, które działałoby bez błędów w IE. Znalazłem jednak wiele ciekawych pomysłów, które doprowadziły mnie do rezultatu, który zostanie tutaj opisany. Tak, mój kod też nie jest doskonały, ale po prostu nie mam czasu na naprawianie wszystkich błędów. Najciekawsze alternatywne rozwiązanie, jakie widziałem (wykorzystujące CSS), opiera się na użyciu pseudoklasy hover dla elementów LI. Ale nigdy nie myślałem, że jest to możliwe, ani nie myślałem, że w ogóle możliwe jest utworzenie menu rozwijanego dla IE bez skryptów…

    Główną różnicą między moim a innymi menu jest to, że moje działa w IE. Wszystkie rozwiązania, które widziałem, wykorzystują element LI jako główny element pseudoklasy :hover, jednak Microsoft zdecydował, że tej pseudoklasy można używać tylko do
    element A. Większość witryn zastrzega, że ​​ich menu działa tylko w przeglądarkach Opera 7.x lub Mozilla. Ale z tych przeglądarek korzysta tylko pięć procent użytkowników! Tak, takie menu są dobre w tych przeglądarkach, ale niestety nie są widoczne w większości najpopularniejszych przeglądarek. Teraz naprawimy to nieporozumienie.

    Co to jest menu utworzone za pomocą CSS?

    To dynamiczne menu utworzone przy użyciu wyłącznie CSS i żadnych skryptów (na przykład napisanych w JavaScript).

    Co, nie możesz w to uwierzyć?

    Spójrzmy na kod:

    < STYLE type = text / css id = "default" title = "domyślny" name = "default" >
    *::- moz - any - link br ,*:- moz - any - link br (
    /*obejście dla Mozilli*/
    Nie wyświetla się;
    }

    div #menu * (
    kursor: wskaźnik; /*ponieważ IE wyświetla kursor tekstowy
    jeśli link jest nieaktywny*/
    }

    Wyłączony (
    kolor czerwony ! ważny ;
    tło: żadne! ważny ;
    }

    Div #menu (
    tło: #F5F5DC;

    wysokość: 15px;
    biała spacja: nowrap;
    szerokość: 100%;
    }

    Dział #menu .a (
    tło: #F5F5DC;
    obramowanie: 1 piksel #F5F5DC;
    kolor: #000000;
    dekoracja tekstu: brak;
    }

    Div #menu .a tabela (
    Blok wyświetlacza;
    czcionka: 10px Verdana, bezszeryfowa;
    biała spacja: nowrap;
    }

    Div #tabela menu, div#tabela menu a (
    Nie wyświetla się;
    }

    Div #menu .a:hover, div#menu div.menuitem:hover (
    tło: #7DA6EE;
    obramowanie: 1 piksel #000080;
    kolor: #0000FF;
    margines - prawy :- 1px; /* rozwiązuje problem z Operą
    nie wyświetla prawej krawędzi*/
    }

    Div #menu .a:najedź tabelą, div#menu div.menuitem:najedź tabelą(
    tło: #FFFFFF;
    obramowanie: 1 piksel #708090;
    Blok wyświetlacza;
    pozycja: absolutna;
    biała spacja: nowrap;
    }

    Div #menu .a:najedź tabelą a, div#menu div.menuitem:najedź tabelą a (
    obramowanie - po lewej: 10 pikseli ciągłych #708090;
    obramowanie - prawe: 1px jednolity biały; /*rozwiązuje problem skoku*/
    kolor: #000000;
    Blok wyświetlacza;
    dopełnienie: 1px 12px;
    dekoracja tekstu: brak;
    biała spacja: nowrap;
    indeks Z: 1000;
    }

    Div #menu .a: najechanie tabelą a: najechanie kursorem, div#menu div.menuitem: najechanie tabelą a: najechanie (
    tło: #7DA6EE;
    obramowanie: 1 piksel #000000;
    obramowanie - po lewej: 10 pikseli ciągłych #000000;
    kolor: #000000;
    Blok wyświetlacza;
    dopełnienie: 0px 12px;
    dekoracja tekstu: brak;
    indeks Z: 1000;
    }

    Td(
    obramowanie - szerokość: 0px;
    dopełnienie: 0px 0px 0px 0px;
    }

    pozycja w menu (
    pływak: w lewo;
    margines: 1px 1px 1px 1px;
    dopełnienie: 1px 1px 1px 1px;
    }

    Pozycja w menu*(
    dopełnienie: 0px 0px 0px 0px;
    }

    #Inny (

    }

    #moz(

    }

    #moz::-moz-zawartość-komórki(
    wysokość: automatyczna; widoczność: widoczna;
    }

    #other::-moz-zawartość-komórki(
    wysokość: 1px; widoczność: ukryta;
    }

    #uchwyt (
    szerokość: 100%;
    }

    < TABLE id = holder >
    < TR >
    < TD id = "other" >
    < DIV id = "menu" >
    < DIV class= "menuitem" >
    < a class= "a" href = "#" >Plik< BR >
    < TABLE >
    < TR >
    < TD >< a href = #2>Kliknij

    < TR >
    < TD >< a href = #3>Ratować

    < TR >
    < TD >< a href = #4>Zamknąć



    < DIV class= "menuitem" >
    < A class= "a" href = "#11" >Pomoc< BR >
    < TABLE >
    < TR >
    < TD >< a class= "disabled" >..

    < TR >
    < TD >< a href = #13>Indeks

    < TR >
    < TD >< a href = "#14" >O






    < TR >
    < TD id = "moz" >Menu specyficzne dla Mozilli!
    < DIV id = "menu" >
    < DIV class= "menuitem" >
    < a class= "a" href = "#" >Filezilla
    < TABLE >
    < TR >
    < TD >< a href = #2>otwarty

    < TR >
    < TD >< a href = #3>Ratować

    < TR >
    < TD >< a href = #4>Zamknąć




    < DIV class= "menuitem" >
    < A class= "a" href = "#11" >Helpzilla
    < TABLE >
    < TR >
    < TD >< a class= "disabled" >..

    < TR >
    < TD >< a href = #13>Indeks

    < TR >
    < TD >< a href = "#14" >O







    < BR >

    Co się dzieje, dlaczego wszystko działa?

    Od razu zastrzegam, że w tym artykule nie będę uczył Cię obsługi CSS. Dlatego od razu przechodzimy do rozważenia zasady działania menu - do pseudoklasy „:hover”. Tak, to dokładnie ta klasa. Te. selektor może dziedziczyć inny selektor zawierający „:hover”. W naszym przypadku „A:hover TABLE” wybiera „

    V
    element , nad którym znajduje się wskaźnik myszy. Poniżej przedstawiono sztuczkę z tabelą, której właściwość „display” jest ustawiona na „none” (to znaczy jest niewidoczna). Tabela znajduje się pomiędzy znacznikami zakotwiczenia ( ,). Według Microsoftu może to spowodować niewłaściwą reakcję IE, ale ja nic takiego nie zauważyłem.

    Dlaczego używamy stołu? Ale ponieważ bardzo dobrze oddziela zagnieżdżone kotwice, które chcemy zastosować, od głównej kotwicy. To rozwiązanie nie działa w Mozilli 0.7 i nawet z JavaScriptem nie znalazłem jeszcze sposobu na jego wdrożenie. Bezpośrednie zagnieżdżanie kotwic nie jest dozwolone przez firmę Microsoft, więc element tabeli jest rodzajem hacka dla IE. I o ile wiem, tylko tabele pozwalają na „uruchamianie” IE w ten sposób.

    Więc co tu mamy? 2 stoły z kotwami wewnątrz kotew.

    < A class= "a" href = "#11" >Pomoc< BR >
    < TABLE cellpadding = "0" cellspacing = "0" border = "0" >
    < TR >
    < TD >< a href = "#12" >Jak

    < TR >
    < TD >< a href = "#13" >Indeks

    < TR >
    < TD >< a href = "#14" >O

    Które są ukryte.

    div #menu .a tabela (
    Nie wyświetla się;
    z - indeks :- 1;
    }

    Przeglądarka wyświetla zawartość kotwicy po najechaniu myszką i stosuje wtedy odpowiednią stylizację:

    div #menu .a:hover (
    tło: #7DA6EE;
    obramowanie: 1px jednolity czarny;
    czarny kolor; indeks z: 0;
    }

    W przypadku tabeli rozwijanej, której używamy w podmenu: jest to tabela kluczowa, która jest listą rozwijaną.

    div #menu .a:najedź tabelą(
    tło: Białe;
    Blok wyświetlacza;
    pozycja: absolutna;
    szerokość: 125px; indeks z: 0;
    obramowanie: 1 piksel #708090;
    }

    Linki w podmenu:

    div #menu .a: najedź na tabelę a (
    Blok wyświetlacza;
    czarny kolor;
    dekoracja tekstu: brak;

    }

    Jeśli najedziemy kursorem na jeden z linków w podmenu, przeglądarka zastosuje następujący styl:

    Linki w podmenu:

    div #menu .a:najedź tabelą a:najedź (
    Blok wyświetlacza;
    tło: #7DA6EE;
    czarny kolor;
    dekoracja tekstu: brak;
    dopełnienie: 0px 11px;
    obramowanie: 1px jednolity czarny; indeks Z: 1000;
    widoczność: widoczna;
    }

    Styl łącza menu rozwijanego:

    div #menu .a: najedź na tabelę a (
    Blok wyświetlacza;
    czarny kolor;
    dekoracja tekstu: brak;
    dopełnienie: 1px 12px; indeks Z: 1000;
    }

    Być może zauważyłeś, że w przypadku niektórych elementów użyłem wielu właściwości „indeks Z”. Są to hacki na niektóre problemy, które znalazłem podczas testowania menu.

    Ulepszenia

    Aby dodać podpoziomy do menu rozwijanego, wystarczy wstawić kolejny element div „.menuitem” (wraz z jego zawartością i podobną strukturą) zamiast łącza w tabeli nadrzędnej.
    Teraz, gdy masz już podpoziomy w menu, musisz usunąć tagi
    aby dać menu „normalne wymeldowanie”. Oprócz tego będziesz musiał utworzyć wiele kopii klas .menuitem i .a z tymi samymi właściwościami, ale różnymi nazwami dla każdego podmenu.
    Tak, wygląda na to, że wymaga to dużo pracy, ALE możesz po prostu dodać ich selektory do odpowiedniej sekcji arkusza stylów.

    Pełny opis Zrobię to następnym razem, jak to zrobić.
    Tymczasem powiem, że możesz zmieniać to menu tak, jak chcesz, dostosowywać je do siebie. A możliwości jest nieskończenie wiele – ogranicza je tylko Twoja wyobraźnia…

    Zmiana stylów (Skórki)

    Jeśli chcesz dodać skórki do swojego menu, które użytkownik może zmieniać, będziesz musiał dodać dodatkowe arkusze stylów i nazwać je id="jakaś_nazwa" (dla IE) i nazwą="jakaś_nazwa" (dla innych przeglądarek) . Aby zapobiec stosowaniu obu stylów, musisz wyłączyć wszystkie style oprócz domyślnych, dodając opcję „wyłączone” do stylu znacznika (niezależnie od tego, czy go łączysz, czy używasz składni liniowej). Mozilla i Opera umożliwiają przełączanie nazwanych stylów z poziomu przeglądarki. Zazwyczaj te przeglądarki nie stosują wszystkich stylów zdefiniowanych przez name="..." i ignorują id="...". Wiedzą także, jak używać nazwy="default" jako domyślnego arkusza stylów i nazwy="alternate" jako alternatywnego arkusza stylów. Możesz zdefiniować nazwę stylu, która będzie widoczna dla użytkownika jako właściwość title="...". Na przykład menu demonstracyjne na tej stronie zawiera następujące definicje:

    < STYLE type = text / css id = "alternate" title = "Niebieski" name = "alternate" disabled >
    ...< STYLE >
    < STYLE type = text / css id = "default" title = "Domyślny" name = "default" >
    ...< STYLE >

    Zwróć uwagę na kolejność nazewnictwa, zdecydowanie zalecam jej ścisłe przestrzeganie.

    IE nie ma wbudowanego przełączania stylów CSS, więc będziemy musieli to zrobić sami (nie bez użycia JavaScript):

    Wybierz jeden ze stylów, klikając odpowiedni i wróć do góry, aby zobaczyć
    zmiany:

    onclick = "document.styleSheets("domyślne").disabled=false;document.styleSheets("alternatywne").disabled=true;" > Styl
    domyślny

    Onclick = "document.styleSheets("alternatywny").disabled=false;document.styleSheets("domyślny").disabled=true;" > Niebieski

    Onclick = "document.styleSheets("alternatywny").disabled=true;document.styleSheets("domyślny").disabled=true;" > Bez
    style

    Odbywa się to w następujący sposób:

    < ul >
    < li onclick = "document.styleSheets("default").disabled=false;
    document.styleSheets("alternate").disabled=true;" >
    < a >Domyślny

    < li onclick = "document.styleSheets("alternate").disabled=false;
    >
    < a >Niebieski

    < li onclick = "document.styleSheets("alternate").disabled=true;
    document.styleSheets("default").disabled=true;" >
    < a >Brak arkusza stylów

    Ostrzeżenie! To tylko mały przykład!
    Ponowne załadowanie strony przywróci domyślne arkusze stylów. Dlatego do rzeczywistych celów konieczne jest wykorzystywanie plików cookies lub skryptów serwerowych w celu zapamiętania wyborów użytkownika, co znowu nie jest tematem tego artykułu.
    Dodam tylko, że powyższy kod zadziała tylko w
    TJ.

    Wniosek

    Radzę każdemu skorzystać z menu Oparty na CSS na Twoich stronach (i aplikacjach internetowych), ponieważ w ten sposób możesz uniknąć wielu problemów pojawiających się podczas korzystania z menu Oparty na JavaScript. Takie problemy zwykle pojawiają się, gdy niewłaściwe przetwarzanie zdarzenia w IE. Co więcej, niektóre przeglądarki mają możliwość wyłączenia skryptów, a co więcej, wiele przeglądarek nie obsługuje Microsoft JS.

    Jeśli przeglądarka nie obsługuje CSS, będzie to możliwe co najmniej wyświetli wszystkie linki.

    Znane błędy

    Domyślnie linki w podmenu nie działają w Mozilli. Ale znalazłem mniej więcej akceptowalne rozwiązanie tego błędu. Polega ona na wstawieniu specjalnego menu, znowu bez użycia skryptów. Przyjrzyj się uważnie miejscom w kodzie, w których wspomniano o Mozilli (lub „moz”). Zobaczysz, że sekcje HTML nie mają zagnieżdżonych kotwic (ostatni tag jest umieszczony tam, gdzie powinien). W pierwszej części CSS używam nieudokumentowanych selektorów - są to selektory specyficzne dla Mozilli i dodaję selektor:hover dla tych elementów div, które są obsługiwane przez Mozillę. Mimo to zachowanie nie pozostaje całkowicie prawidłowe.

    W komentarzach (od Nicka Younga) znajduje się uwaga, że ​​menu nie działa w Netscape. Jestem pewien, że problem jest taki sam jak w Mozilli. Muszę szukać Dodatkowe informacje o tym. Rozwiązanie może wymagać pewnych modyfikacji, ponieważ alternatywny kod powinien działać poprawnie w Netscape.

    Uwagi:

    Strona została przetestowana w wersjach IE 5, 5.5, 6, Opera 7.23 i Mozilla 0.71. Najprawdopodobniej menu będzie działać we wcześniejszych wersjach określonych przeglądarek.

    Odpowiedz na poniższe pytania i wyślij je jako dokument tekstowy w programie MS Word:

    Scharakteryzuj miejsce systemów operacyjnych wśród innych rodzajów oprogramowania.

    Jakie są funkcje system operacyjny?

    4. Opisz styl pracy z wykorzystaniem graficznych systemów operacyjnych z rodziny Windows.

    5. Wymień główne Obiekty Windowsa i opisz ich przeznaczenie.

    6. Jakie funkcje realizuje menu Start? Szukaj?

    7. Jak wywołać menu dynamiczne i jakie są jego możliwości?

    8. Opisz przeznaczenie elementów menu głównego systemu Windows.

    9. Jakie są zasady Plug and Play OLE i Drag? i Upuść?

    10. Opisz typowe okno systemu Windows.

    11. Opisz normę Aplikacje Windowsowe.

    12. Opisz rozwój systemów operacyjnych z rodziny Windows.

    1. Opisać miejsce systemów operacyjnych wśród innych rodzajów oprogramowania.

    Na komputerze działa jednocześnie wiele programów:
    jeden program wyświetla obraz na monitorze (sterownik wideo)
    inny program wysyła dane do drukarki (sterownik drukarki)
    po trzecie - współpracuje z myszą (sterownik myszy)
    czwarty - z klawiaturą
    piąty - z dyskiem twardym,
    itp.
    System operacyjny integruje pracę tych programów i zarządza nimi

    2. Jakie są funkcje systemu operacyjnego?

    Główne funkcje systemu operacyjnego:

    1. Wymiana danych pomiędzy komputerem a różnymi urządzeniami peryferyjnymi (terminalami, drukarkami, dyskietki, dyski twarde itp.). Ta wymiana danych nazywana jest „wprowadzaniem/wydawaniem danych”.

    2. Udostępnienie systemu porządkowania i przechowywania plików.

    4. Organizowanie dialogu z użytkownikiem.

    3. Opisz główne etapy ewolucji systemów operacyjnych.

    Pierwsza generacja.

    lata 40. Pierwsze komputery cyfrowe bez systemu operacyjnego. O organizacji procesu obliczeniowego decyduje programista z panelu sterowania.

    Drugie pokolenie.

    lata 50. Pojawienie się prototypu systemu operacyjnego - systemy monitorujące, które wdrażają system przetwarzania wsadowego zadań.

    Tryb wsadowy

    Konieczność optymalnego wykorzystania drogich zasoby obliczeniowe doprowadziło do pojawienia się koncepcji wykonywania programu w „trybie wsadowym”. Tryb wsadowy zakłada obecność kolejki programów do wykonania, a system operacyjny może zapewnić załadowanie programu media zewnętrzne danych do pamięci RAM bez oczekiwania na zakończenie wykonywania poprzedniego programu, co pozwala uniknąć przestojów procesora.

    Trzecia generacja.

    1965-1980 Przejście na układy scalone. IBM/360. Realizowane są prawie wszystkie podstawowe koncepcje właściwe współczesnym systemom operacyjnym: podział czasu i wielozadaniowość, rozdział uprawnień, skala czasu rzeczywistego, struktury plików i systemy plików. Wdrożenie wieloprogramowania wymagało wprowadzenia bardzo ważnych zmian w sprzęcie komputera: trybów uprzywilejowanego i użytkownika, sposobów ochrony obszarów pamięci oraz rozwiniętego systemu przerwań.

    Dzielenie czasu i wielozadaniowość

    Już tryb wsadowy w rozwiniętej wersji wymaga podziału czasu procesora pomiędzy wykonanie kilku programów. Potrzeba współdzielenia czasu (wielozadaniowość, wieloprogramowość) stała się jeszcze silniejsza wraz z rozpowszechnieniem się teletypów (a później terminali z wyświetlaczami katodowymi) jako urządzeń wejścia/wyjścia (lata 60. XX wieku). Ponieważ prędkość wejście klawiatury(a nawet odczytu z ekranu) danych przez operatora jest znacznie niższa od szybkości przetwarzania tych danych przez komputer, korzystanie z komputera w trybie „na wyłączność” (z jednym operatorem) mogłoby skutkować przestojami kosztownych zasobów obliczeniowych.

    Dzielenie czasu pozwoliło na stworzenie systemów „multi-user”, w których jeden (przeważnie) centralny procesor i blok pamięci RAM był podłączony do wielu terminali. W takim przypadku część zadań (np. wprowadzanie lub edycja danych przez operatora) może być wykonywana w trybie dialogowym, a inne (np. obliczenia masowe) w trybie wsadowym.

    Czwarta generacja.

    Późne lata 70-te. Utworzono działającą wersję stosu protokołów TCP/IP. Został on ujednolicony w 1983 roku. Niezależność producenta, elastyczność i sprawdzona wydajność udana praca Internet uczynił ten stos protokołów głównym stosem dla większości systemów operacyjnych.

    Wczesne lata 80-te. Pojawienie się komputerów osobistych. Szybki wzrost sieci lokalne. Stała się obsługa funkcji sieciowych warunek konieczny. lata 80-te. Przyjęto główne standardy technologii komunikacyjnych sieci lokalnych: Ethernet, Token Ring, FDDI. Umożliwiło to zapewnienie kompatybilności sieciowych systemów operacyjnych na niższych poziomach.

    Wczesne lata 90-te. Prawie wszystkie systemy operacyjne zostały połączone w sieć. Pojawiły się wyspecjalizowane sieciowe systemy operacyjne (na przykład IOS działający w routerach)

    Ostatnia dekada. Szczególną uwagę zwraca się na korporacyjne sieciowe systemy operacyjne, które charakteryzują się wysokim stopniem skalowalności, obsługą pracy sieci, zaawansowanymi narzędziami bezpieczeństwa, możliwością pracy w heterogenicznym środowisku oraz dostępnością scentralizowanych narzędzi administracyjnych.

    4. Opisz styl pracy z wykorzystaniem graficznych systemów operacyjnych z rodziny Windows.

    Wraz z przejściem na komputery osobiste z procesorem 80386 i zwiększoną pamięcią (co najmniej 4 MB) Norton Commander i styl DOS-owy do pracy w trybie tekstowym zastąpił Powłoka Windowsa oraz nowy styl pracy z interfejsem graficznym. Pomysł graficzny Interfejs Windowsa pożyczone od Microsoftu przez długi czas specjalizująca się w systemach operacyjnych dla komputerów osobistych IBM oraz systemach operacyjnych dla komputerów Apple. Czasami system Windows jest definiowany nie jako powłoka, ale jako coś więcej, używając terminu takiego jak „środowisko operacyjne”. W tym przypadku wychodzą z tego, że jeśli klasyczna powłoka (taka jak Norton Commander) tylko modyfikuje interfejs użytkownika, a następnie program Typ okna Oprócz tego przejmuje zarządzanie programami i zadaniami, tj. realizuje podstawowe funkcje systemu operacyjnego.

    Zasadniczo ważnymi cechami systemu Windows w porównaniu do MS DOS są wielozadaniowość (dopuszczalne jest jednoczesne wykonywanie kilku procesów) i możliwość wymiany danych pomiędzy uruchomionymi programami. Ważne jest również, aby system Windows korzystał z rozszerzonej pamięci RAM (znacznie ponad 640 KB) i implikował jeden interfejs dla wszystkich aplikacji. Nie bez powodu utrwaliło się pojęcie „programowania dla Windows”, tj. skoncentruj się na standardowym interfejsie graficznym.

    Nazwa Windows – „okna” – mówi sama za siebie. Ta powłoka systemu operacyjnego jest zbudowana w oparciu o okna graficzne odpowiadające oprogramowaniu i grupom oprogramowania, którymi użytkownik może sterować, zmieniać rozmiar, poruszać się po ekranie, otwierać i zamykać w dowolnym momencie.

    Powłoka systemu Windows została zaprojektowana do współpracy z myszą. Wszystkie operacje w tym środowisku są wysoce ujednolicone, całe oprogramowanie ma bardzo podobne interfejsy i zasady sterowania, co znacznie przyspiesza rozwój nowego oprogramowania.

    5.Nazwij główne obiekty Windows i opisz ich przeznaczenie

    Grupa plików połączona według jakiegoś kryterium (analogicznie do NC - katalog).

    Dokument

    Zwykle przedstawiany na pulpicie jako kawałki papieru z zagięte rogi. Dokument – ​​dowolny plik przetwarzany za pomocą aplikacji (programów). Dokument może zawierać informacje tekstowe, graficzne, dźwiękowe i wideo.

    Łatwo rozpoznać po zakrzywionej strzałce w lewym dolnym rogu ikony. Skróty są bardzo skutecznym sposobem przyspieszania dostępu do obiektów. Skrót można „dołączyć” do dowolnego obiektu – pliku, programu, folderu sieciowego, dysku, ikony i umieścić w dowolnym obszarze interfejsu użytkownika. Dwukrotne kliknięcie skrótu otwiera element, z którym jest powiązany.

    Programy

    W przeciwieństwie do innych obiektów, każdy ma swoją „twarz” (piktogram).

    Skuteczne narzędzie do integracji aplikacji. Można to traktować jako dynamiczną przestrzeń RAM do tymczasowego przechowywania wymienianych danych. Aby wprowadzić informacje do schowka i Ekstrakcja okien ma w swoich menu polecenia Kopiuj, Wytnij, Wklej.

    6.Jakie funkcje realizuje menu Start? Szukaj?

    Menu Start w HYPERLINKU „https://ru.wikipedia.org/wiki/Windows_XP” \o „Windows XP” Windows XP:

    Wyświetlana nazwa i HIPERLINK "https://ru.wikipedia.org/wiki/%D0%90%D0%B2%D0%B0%D1%82%D0%B0%D1%80_(%D0%BA%D0%B0 %D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0)" \o "Awatar (obrazek)" awatar użytkownika

    Dostęp do przeglądarki i klienta pocztowego

    Uzyskaj dostęp do często używanych programów

    Otwieranie specjalnych folderów

    Wyłączenie komputera

    Wyszukuje pliki i foldery, a także komputery w sieci

    7.Jak wywołać menu dynamiczne i jakie są jego możliwości?

    Dla szybki telefon często powtarzanych poleceń, można skorzystać z dynamicznego menu, które jest tzw kliknij prawym przyciskiem myszy myszy. Dynamiczne menu (rys.) zawiera często używane polecenia. Zestaw poleceń zależy od wybranego obiektu: ikony dysku, folderu lub pliku, wybranego tekstu, paska zadań lub wolna przestrzeń ekran.

    Jeśli klikniesz prawym przyciskiem myszy ikonę dysku w oknie programu Mój komputer, pojawią się następujące polecenia: Otwórz, Eksplorator, Znajdź, Partycjonowanie, Formatuj, Wklej, Utwórz skrót. Nieruchomości. Podobnie jak w przypadku dysku, polecenia menu dynamicznego dotyczące pliku zależą od typu pliku i duplikują menu Plik. Wygodnie jest używać prawego przycisku myszy do przenoszenia lub kopiowania pliku z jednego okna do drugiego w folderze Mój komputer lub Eksplorator. Po transpozycji ikony folderu/pliku przy naciśnięciu prawego przycisku myszy pojawia się dynamiczne menu, które pozwala określić cel transportu: przenieść lub skopiować obiekt, utworzyć ikonę skrótu.

    (menu dynamiczne)

    8. Opisz przeznaczenie elementów menu głównego systemu Windows.

    Główny menu systemowe zawiera następujące główne punkty.

    Menu często uruchamianych programów. Linie te zazwyczaj zawierają programy, na które jest największe zapotrzebowanie, tj. są uruchamiane częściej niż inne.

    Wszystkie programy.

    Moje dokumenty, Ostatnie dokumenty, Rysunki, Moja muzyka, Mój komputer. Druga pozycja wyświetla menu składające się z ostatnio otwieranych dokumentów.

    Panel sterowania. Zawiera z kolei podmenu duża liczba elementy odpowiadające narzędziom ustawień systemowych: Administracja, Data i godzina itp.

    Administracja, Połączenia sieciowe, Drukarki i faksy.

    Pomoc i wsparcie. Zapewnia dostęp do informacje referencyjne do pracy z Windowsem. Pomoc można uzyskać na trzy sposoby: według treści ogólnej, według indeksu tematycznego, za pomocą polecenia Szukaj (wyszukaj listę działów, w których pojawia się interesujące Cię hasło).

    Szukaj. Wyszukuje pliki i foldery, a także komputery w sieci.

    Wykonać. Umożliwia uruchamianie programów w określonej ścieżce.

    9. Jakie są zasady Plug and Play OLE oraz przeciągnij i upuść?

    Plug and Play (włącz i graj). Ta technologia koncentruje się na automatycznym rozpoznawaniu, instalacji i konfiguracji dowolnego typu urządzenia, w tym monitora, karty graficznej, drukarki, karty dźwiękowej, modemu, CD-ROM, różnych kontrolerów twardy dysk. Pozwala uprościć konfigurację i zarządzanie sprzętem oraz zapewnić niezawodną pracę bezawaryjną.

    OLE – Object Link and Embedding (łączenie i implementacja obiektów). Obiekt OLE to dowolny element utworzony przez aplikację Windows, który można umieścić (osadzić i/lub połączyć) w dokumencie w innej aplikacji Windows. Jednocześnie wprowadzając do dokumentu aplikacji obiekt utworzony w innej aplikacji, istnieje możliwość edycji tego obiektu za pomocą aplikacji „natywnej”.

    Istnieją dwa sposoby wdrożenia technologii OLE.

    Pierwszym sposobem jest skorzystanie ze schowka.

    Drugi sposób polega na użyciu polecenia aplikacji Wstaw/Obiekt...

    Należy dokonać rozróżnienia pomiędzy operacjami Osadź i Link.

    Po osadzeniu obiekt staje się częścią dokumentu docelowego i traci połączenie z plikiem źródłowym (jeśli taki istniał). Osadzony obiekt można edytować za pomocą „ojca” – źródła OLE, ale zmiany dokonane nie są odzwierciedlane w pliku źródłowym (i odwrotnie, zmiany wprowadzone w pliku źródłowym „offline” nie są odzwierciedlane w osadzonym obiekcie).

    Obiekt można skojarzyć tylko z odbiornikiem, który jest sformatowany jako plik dokumentu (czyli zarejestrowany w systemie plików pod dokładnym adresem). Podczas aktualizacji pliku dokumentu przy użyciu środków „ojca” (źródło OLE) zmiany są odzwierciedlane w dokumencie docelowym (automatycznie lub pod kierunkiem użytkownika).

    Przeciągnij i upuść to metoda służąca do kopiowania lub przenoszenia wybranej informacji, ikony, okna, obiektu w inne miejsce. Na przykład, jeśli po wybraniu nożyczkami fragmentu obrazu, wskaż go kursorem myszy, naciskając lewy lub prawy przycisk i przytrzymując, możesz „przeciągnąć” fragment w nowe miejsce. Jeśli podczas przeciągania przytrzymasz klawisz, fragment zostanie skopiowany do nowej lokalizacji. Ponadto za pomocą metody „przeciągnij i upuść” można zmieniać granice akapitów i stron dokumentu, szerokość i wysokość wierszy tabeli, tworzyć niestandardowe paski narzędzi i wykonywać wiele innych operacji. Przeciągnij i upuść jest stosowany w technologii OLE, w systemach informatycznych do fizycznego i logicznego przemieszczania dokumentów itp.

    10.Opisz typowe okno systemu Windows.

    Głównym obiektem interfejsu Windows jest okno – prostokątna część ekranu, która umożliwia przeglądanie wyświetlanych na nim informacji. Wyróżnia się trzy rodzaje okien:

    Okno programu (aplikacji);

    Okno dokumentu (okno obiektu przetwarzającego program);

    Okno dialogowe (narzędzie do przetwarzania). Elementy Okna okienne przedstawiono na rysunku

    Menu systemowe zawiera polecenia umożliwiające zmianę rozmiaru okna, przesuwanie go, minimalizowanie do rozmiaru ikony i zamykanie.

    Pasek stanu zawiera różne informacje pomocy w zależności od bieżącego trybu pracy.

    Poziomy pasek menu zawiera grupy poleceń, połączonych cechami funkcjonalnymi. Dostęp do informacji pomocy można uzyskać za pomocą przycisku

    Niektóre przyciski paska narzędzi okna (patrz rysunek) mają oczywiste znaczenie.

    Opiszmy kilka możliwych manipulacji rozmiarami okien.

    1. Korzystając z przycisków znajdujących się w pasku tytułowym okna:

    Przycisk Minimalizuj minimalizuje okno do postaci przycisku i umieszcza je na pasku zadań.

    Aby ponownie rozwinąć okno, należy kliknąć ten przycisk;

    Przycisk Maksymalizuj zwiększa rozmiar okna do maksymalnego możliwego;

    Przycisk Przywróć zmienia rozmiar okna z maksymalnego na średni i z powrotem.

    2. Korzystanie z myszy:

    Przesuń wskaźnik myszy na krawędź okna (pionową, poziomą, narożnikową), którą chcesz zmienić (wskaźnik będzie wyglądał jak podwójna strzałka);

    Przytrzymując lewy przycisk myszy, przesuń wskaźnik w żądanym kierunku.

    Możesz zamknąć okno w następujący sposób:

    Kombinacja klawiszy i ;

    Kliknięcie przycisku Zamknij pasek tytułowy okna;

    Aktywuj menu systemowe i wybierz polecenie Zamknij;

    Wykonaj polecenie Plik/Zamknij.

    11. Opisz standardowe aplikacje Windows.

    Istnieje grupa programów zintegrowanych z systemem Windows, zwana aplikacjami standardowymi. Są to programy o stosunkowo skromnych możliwościach (w porównaniu do programów specjalistycznych), ale wygodne do wykonywania prostych prac. Linki do standardowych aplikacji znajdują się w folderze Standard wśród wszystkich programów.

    W miarę rozwoju rodziny Norma okienna aplikacje są również udoskonalane. Edytor tekstu Notatnik umożliwia pracę z małymi, niesformatowanymi tekstami i nie tylko mocna wersja WordPad jest edytorem tekstu pośrednim pod względem możliwości pomiędzy Notatnikiem a zaawansowanym Edytor tekstu Słowo. Graficzny edytor farb– ulepszona wersja edytora PaintBrush – umożliwia tworzenie i edycję prostych obrazów, kolorowanie ich fragmentów, wymazywanie i dodawanie nowych; Dodatkowo Paint może przydać się jako środowisko pośrednie przy wymianie rysunków pomiędzy aplikacjami, gdy trzeba wyciąć fragment z rysunku itp. Program Imaging umożliwia: przeglądanie dokumentów graficznych i ich właściwości, skalowanie, pracę z fragmentami, uzyskiwanie dokumentu graficznego poprzez zeskanowanie obrazu na papierze, dodawanie komentarzy. Kalkulator może pracować w dwóch trybach: prostych obliczeń (tylko działania arytmetyczne) i obliczeń inżynierskich (wiele funkcji matematycznych, różne systemy liczbowe, użycie nawiasów itp.). W specjalnych folderach, wśród standardowych aplikacji, znajdują się gry, także te korzystające z Internetu, a także narzędzia rozrywkowe, które pozwalają na przeglądanie plików wideo, słuchanie płyt audio CD, a także tworzenie własnych filmów.

    12.Opisać rozwój systemów operacyjnych z rodziny Windows.

    System Windows 95 był sukcesywnie zastępowany przez:

    Windows 98, Windows NT, rodzina Windows 2000 (Professional, Server i Advanced Server) oraz Windows XP ( Edycja domowa, Professional) – i ta lista nie jest zamknięta. Do obsługi sieci lokalnych przeznaczone są systemy Windows NT i Windows 2000 Server (Advanced Server) (omówienie sieciowych systemów operacyjnych zostanie przełożone do rozdziału 5), natomiast systemy Windows 98, Windows 2000 Professional i Windows XP bezpośrednio kontynuują linię Windows 95 i są przeznaczony do organizacji pracy komputera.

    Każda kolejna wersja systemu typu Windows, zachowując podstawowe zasady budowy interfejsu użytkownika systemu Windows 95, zapewnia, ogólnie rzecz biorąc, więcej funkcji dla użytkownika niż poprzedni. Jednocześnie każda kolejna wersja systemu stawia coraz większe wymagania co do szybkości komputera, ilości pamięci RAM i dysku twardego.

    Nowe możliwości tych systemów.

    System operacyjny Windows 98 jest bezpośrednim ulepszeniem systemu Windows 95. Mają ze sobą tyle wspólnego, że w literaturze często określa się je łącznie o nazwie Windows 9x. Jednak pod wieloma względami Windows 98 jest lepszy od swojego poprzednika. Posiada usprawniony i bogatszy interfejs użytkownika oraz znacznie upraszcza dostęp do zasobów Internetu. To ostatnie osiągnięto dzięki włączeniu w systemie Windows 98 przeglądarki Internet Explorer 4.0 i możliwości dostępu do Internetu z różnych paneli i okien. Internet Explorer zawiera program do pracy e-mailem Outlook Express i inne programy komunikacyjne. Znacznie poszerzono możliwości wykorzystania aplikacji multimedialnych, m.in. programy korzystające jednocześnie z narzędzi do wyświetlania grafiki i dźwięku oraz ruchomych obrazów.

    System operacyjny Windows 2000 Professional zwiększa możliwości użytkownika komputera PC w następujących obszarach:

    Instalacja systemu i aktualizacja plików systemowych;

    Zwiększone bezpieczeństwo;

    wsparcie internetowe;

    Obsługa aplikacji multimedialnych;

    Praca na laptopie w trybie bateryjnym.

    Windows 2000 Professional może obsługiwać komputer z dwoma procesory centralne i znacznie więcej pamięci RAM. Nowe funkcje (w stosunku do Windows 9x) wiążą się z wygodniejszą procedurą instalacji systemu operacyjnego (w tym także instalacją przez sieć), z większą ochroną przed awariami. System obsługuje wielojęzyczny interfejs użytkownika. Oferuje przyspieszoną wielozadaniowość, co oznacza, że ​​możesz wykonywać więcej zadań jednocześnie niż w Windows 9x. System umożliwia równoległe korzystanie na jednym komputerze z systemami Windows 9x, w tym współdzielony dostęp do folderów i plików urządzenia peryferyjne. Dla laptopów organizowany jest specjalny serwis. Umożliwia tym samym korzystanie z „trybu uśpienia” poprzez zapamiętywanie aktualnych ustawień pulpitu, a następnie całkowite wyłączenie zasilania i przywrócenie stanu pracy na żądanie użytkownika.

    Podczas pracy w sieci system umożliwia utworzenie kopii lustrzanej dokumentów przechowywanych w sieci na komputerze, a następnie przetwarzanie tych dokumentów po odłączeniu od sieci.

    Kontynuowanie udoskonalania systemu operacyjnego Windows we wskazanych powyżej kierunkach doprowadziło do powstania systemu operacyjnego Windows XP. Posiada zaktualizowany interfejs użytkownika, który można dostosować do osobistych nawyków pracy użytkownika i pozwala grupować podobne aplikacje pod wspólnym przyciskiem na pasku zadań. Zainstalowano nowe lub znacznie ulepszone programy do pracy z danymi audio i wideo oraz wzmocniono możliwości komunikacji; w szczególności użytkownicy mogą współpracować nad aplikacjami (pracując online). Pliki systemowe są chronione przed uszkodzeniem (nadpisaniem) podczas instalowania nowych aplikacji. Oczywiście każda nowa wersja systemu operacyjnego Windows dziedziczy najlepsze cechy swojego poprzednika.

    nazwą pliku lub folderu oraz ciągiem znaków zawartym w nazwie pliku lub folderu;

    Według rozszerzenia nazwy pliku;

    Według daty ostatniej modyfikacji;

    Na wymiar;

    Przez fragment tekstu z dokumentu lub tytuł sekcji.

    Stosowanie różne zakładki ułatwia wyszukiwanie plików w oparciu o określone kryteria.

    Aby szybko wywołać często powtarzane polecenia, można skorzystać z dynamicznego menu, które wywołuje się prawym przyciskiem myszy. Dynamiczne menu (rys. 2.8) zawiera często używane polecenia. Zestaw poleceń zależy od wybranego obiektu: ikony dysku, folderu lub pliku, wybranego tekstu, paska zadań lub wolnego miejsca na ekranie.

    Jeśli klikniesz prawym przyciskiem myszy ikonę dysku w oknie programu Mój komputer, następnie pojawią się polecenia: Otwórz, Eksplorator, Znajdź, Podziel, Formatuj, Wklej, Utwórz skrót. Nieruchomości. Podobnie jak w przypadku dysku, polecenia menu dynamicznego dla pliku zależą od typu pliku i duplikują menu Plik. Prawy przycisk myszy jest wygodny w użyciu do przenoszenia lub kopiowania pliku z jednego okna do innego folderu Mój komputer Lub Konduktor. Po transpozycji ikony folderu/pliku przy naciśnięciu prawego przycisku myszy pojawia się dynamiczne menu, które pozwala określić cel transportu: przenieść lub skopiować obiekt, utworzyć ikonę skrótu.

    Teczka Kosz na śmieci przeznaczone do usunięcia niepotrzebne pliki. Główna różnica pomiędzy wykonaniem polecenia Usuwać w Windows”95 i innych programach jest to, że w nowej wersji systemu operacyjnego wybranie polecenia nie powoduje usunięcia pliku, lecz przeniesienie go do folderu Kosz na śmieci. Umieszczony w nim plik jest zapisywany do momentu „opróżnienia Kosza”. Aby usunąć dowolny plik, folder lub ikonę skrótu, możesz użyć polecenia Usuwać lub przesuń myszką ikonę obiektu do usunięcia na ikonę Kosz na śmieci. Ikona przeciąganego elementu zniknie. Aby wyświetlić wszystkie pliki w Koszu, należy dwukrotnie kliknąć jego ikonę. Pojawi się okno folderu z paskiem menu zawierającym standardowy zestaw poleceń. Aby przywrócić plik, folder lub ikonę skrótu, należy kliknąć nazwę pliku, który ma zostać przywrócony. Jeśli chcesz przywrócić kilka plików, nazwy plików zostaną podświetlone po naciśnięciu Klawisz Ctrl. Następnie użyj polecenia Przywrócić z menu Plik.

    Ryż. 2.8. Dynamiczne menu

    Obecnie produkowane są tysiące dysków twardych, adapterów, kontrolerów i innych produktów dla komputerów kompatybilnych z IBM PC. W niektórych przypadkach instalacja ich na komputerze powoduje znaczne trudności w zakresie kompatybilności i wymaga dużej ilości czasu użytkownika na wybranie położenia zworek. Komputery z adapterami Plug and Play nie wymagają ręcznego ustawiania przełączników DIP. Zgodnie z technologią Plug and Play, po włączeniu komputera, automatycznie ustalane są nazwy nowo podłączanych urządzeń lub płytek oraz ich charakterystyka, są one konfigurowane i automatycznie ładowane są odpowiednie sterowniki. Może się to również zdarzyć podczas sesji roboczej, jeśli nastąpi zmiana sprzętu komputerowego. Podobnie rejestrowane jest usunięcie urządzenia lub płyty, sterowniki tego urządzenia są rozładowywane, aby nie zajmowały pamięci RAM i nie zwalniały zasobów systemowych.

    Podczas instalacji systemu Windows 95 aplikacja instalacyjna wykrywa karty i sterowniki, które nie obsługują nowej technologii i automatycznie tworzy odpowiednie wpisy w pliki systemowe. Nawet jeśli Twój komputer nie jest w pełni zgodny ze standardem Plug and Play, system Windows 95 pomoże Ci skonfigurować sprzęt za pomocą okna dialogowego Właściwości z patka Zasoby dane urządzenie. Aby wywołać okno Urządzenia najpierw musisz aktywować ikonę System Panel sterowania i kliknij dwukrotnie, aby wybrać urządzenie. W dolnym polu Lista urządzeń będących w konflikcie Wskazane są urządzenia, z którymi dane urządzenie może powodować konflikt. Zalecane jest zaznaczenie tego pola Użyj automatycznej konfiguracji tak, że system operacyjny sam konfiguruje zasoby systemowe.

    Technologia Plug and Play składa się z trzech głównych komponentów: systemu operacyjnego obsługującego technologię Plug and Play, systemu BIOS typu Plug and Play oraz urządzeń typu Plug and Play z odpowiednimi sterownikami. Dlatego kompletne rozwiązanie Problemy Plug and Play wymaga wsparcia zarówno na poziomie oprogramowania, jak i sprzętu.

    Podczas pracy z systemem Windows „95 czasami trzeba zrestartować system. Wyróżnia się „zimne” i „gorące” restarty komputera. „Zimny” restart następuje po wyłączeniu zasilania i ponownym jego włączeniu. Programy i parametry niezbędne do pracy są ponownie wczytywane do pamięci RAM. " Hot boot wykonywany jest bez wyłączania zasilania poprzez jednoczesne naciśnięcie klawiszy Alt+Ctri+Del. W takim przypadku wszystkie informacje zapisane w pamięci RAM, a nie zapisane na dysku twardym zostaną usunięte. Gorący rozruch jest zwykle używany, gdy program jest zawieszony i nie reaguje na naciśnięcia klawiszy i przyciski myszy. W niektórych przypadkach po naciśnięciu klawiszy Alt+Ctri+Del pojawia się okno dialogowe Anuluj zadanie. Jeśli okno umożliwia zamknięcie zamrożonego programu, nie będzie potrzeby ponownego uruchamiania komputera.

    Przed wyłączeniem zasilania komputera należy zamknąć wszystkie otwarte dokumenty i aplikacje. Wyłączenie zasilania bez zamknięcia dokumentu może spowodować utratę danych, uszkodzenie otwartych plików i trudności z ich otwieraniem w kolejnych sesjach. Po wyłączeniu komputera bez prawidłowego wylogowania mogą wystąpić problemy w działaniu struktura logiczna dysk. Możesz je naprawić za pomocą programu ScanDisk znajdującego się w grupie Narzędzia.

    Aby poprawnie zamknąć system Windows, kliknij przycisk Początek i zespół Aby zakończyć pracę w wyświetlonym menu. Pojawi się okno dialogowe Zamykanie. Okno zawiera przyciski radiowe: Wyłącz komputer. Aby ponownie uruchomić komputer. Uruchom ponownie komputer w trybie emulacjiSM DOS-u, Zaloguj się pod inną nazwą. Wszystkie przyciski zamykają wszystkie programy. W dolnej części okna Zamknięcie Windows ma trzy przyciski - Tak, nie, pomóż. Krótki czas po kliknięciu przycisku myszą Tak Komputer zostanie przygotowany do wyłączenia: wewnętrzne bufory i pamięć podręczna dysku zostaną wyczyszczone, a dane zostaną zapisane. Nie wyłączaj zasilania, dopóki nie pojawi się komunikat „Możesz teraz wyłączyć zasilanie komputera”.

    Ograniczymy się do powyższego krótki opis zasady działania systemu Windows. Prawdziwe opanowanie go (nawet bardziej niż DOS i Norton Commander) polega na praktycznym przeszkoleniu przy komputerze, zarówno przy pomocy licznych specjalnych podręczników, jak i wbudowanego podręcznika.

    Pytania testowe i zadania

    1. Opisać miejsce systemów operacyjnych wśród innych rodzajów oprogramowania.

    2. Jakie są funkcje systemu operacyjnego?

    3. Opisz główne etapy ewolucji systemów operacyjnych.

    Proces?

    Wirtualizacja?

    Przerywać?

    5. Opisać funkcje głównych elementów systemów operacyjnych.

    6. Jaki jest cel system plików system operacyjny?

    7. Co to jest plik? Jakie struktury plików są obsługiwane przez różne systemy operacyjne?

    8. Co to jest katalog (katalogi)? Do czego służą katalogi?

    9. Jakie operacje na plikach umożliwiają systemy operacyjne?

    10. Opisz polecenia systemu operacyjnego MS DOS.

    11. Opisz interfejs powłoki systemu operacyjnego Norton Commander.

    12. Opisz styl pracy z wykorzystaniem powłoki Windows.

    13. Pod jakim względem Windows 95 jest lepszy od Windows 3.11?

    14. Opisz typowe okno systemu Windows „95”.

    15. Jakie funkcje realizuje menu Start? Szukaj?

    16. Jak wywołać menu dynamiczne i jakie są jego możliwości?

    § 2. KONCEPCJA SYSTEMU PROGRAMOWANIA 2.1. GŁÓWNE FUNKCJE I ELEMENTY

    Systemy programistyczne to zestaw narzędzi programowych zaprojektowanych do pracy z programami w jednym z języków programowania. Systemy programowania zapewniają programistom możliwości tworzenia własnych usług programy komputerowe.

    Obecnie rozwój dowolnego oprogramowania systemowego i aplikacyjnego odbywa się z wykorzystaniem systemów programowania, do których zalicza się m.in

    Tłumacze języków wysokiego poziomu;

    Narzędzia do edycji, komponowania i ładowania programów;

    Makroasemblery (języki zorientowane maszynowo);

    Debuger programów maszynowych.

    Systemy programowania zazwyczaj obejmują

    Edytor tekstu (Edit), który realizuje funkcje nagrywania i edycji tekstu źródłowego programu;

    Program ładujący (Load), pozwalający wybrać żądany plik tekstowy programu z katalogu;

    Program uruchamiający (Uruchom), który realizuje proces wykonywania programu;

    Kompilator (Compile), przeznaczony do kompilacji lub interpretacji tekstu źródłowego programu na kod maszynowy z diagnostyką błędów składniowych i semantycznych (logicznych);

    Debugger (Debug), który wykonuje funkcje serwisowe w celu debugowania i testowania programu;

    Menedżer plików (Plik), który umożliwia wykonywanie operacji na plikach: zapisywanie, wyszukiwanie, usuwanie itp.

    Rdzeniem systemu programowania jest język. Istniejące języki programowania można podzielić na dwie grupy: proceduralne i nieproceduralne, ryc. 2.9.

    Programy proceduralne (lub algorytmiczne) to system instrukcji rozwiązywania Szczególnym zadaniem. Rola komputera sprowadza się do mechanicznej realizacji tych instrukcji.

    Języki proceduralne dzielą się na języki niskiego i wysokiego poziomu.

    Języki niskiego poziomu (zorientowane maszynowo) umożliwiają tworzenie programów z kodu maszynowego, zwykle w postaci szesnastkowej. Praca z nimi jest trudna, ale programy tworzone przy ich pomocy przez wykwalifikowanego programistę zajmują mniej miejsca w pamięci i działają szybciej. Te języki ułatwiają rozwój programy systemowe, sterowniki (programy do sterowania urządzeniami komputerowymi), niektóre inne rodzaje programów.

    Ryż. 2.9. Generalna klasyfikacja języki programowania

    Programy w językach wysokiego poziomu są zbliżone do naturalnego (angielski)

    język i reprezentują zbiór podanych poleceń.

    Wymieńmy najbardziej znane systemy programowania.

    1. FORTRAN (system FORmula TRANslating - system translacji formuł); najstarszy język, który jest nadal aktywnie używany w rozwiązywaniu problemów orientacji matematycznej.

    2. BASIC (Uniwersalny symboliczny kod instrukcji dla początkujących – uniwersalny symboliczny kod instrukcji dla początkujących), pomimo wielu niedociągnięć i mnóstwa złych kompatybilne wersje- najpopularniejszy pod względem liczby użytkowników.

    3. ALGOL (Język ALGOrytmiczny - język algorytmiczny); odegrał dużą rolę w teorii, ale obecnie prawie nigdy nie jest używany w programowaniu praktycznym.

    4. PL/1 (język programowania PL/I – pierwszy język programowania). Język uniwersalny; teraz prawie w ogóle nie używany.

    5. Si (C - „si”); szeroko stosowane przy tworzeniu oprogramowania systemowego.

    6. Pascal (Pascal - nazwany na cześć naukowca Blaise'a Pascala); niezwykle popularny zarówno podczas nauki programowania, jak i wśród profesjonalistów. Na jego bazie stworzono kilka potężniejszych języków (Modula, Ada, Delphi).

    7. COBOL (Common Business Oriented Language – język zorientowany na wspólny biznes); w dużej mierze wyszedł z użycia.

    8. Delphi - obiektowy język programowania „wizualny”; obecnie niezwykle popularne.

    9. Java to niezależny od platformy, obiektowy język programowania, niezwykle skuteczny przy tworzeniu interaktywnych stron internetowych.

    Spośród języków nieproceduralnych najbardziej znane to

    1. Lisp;

    2. Prolog (PROGRAMOWANIE w LOGic);

    3. Occam (nazwany na cześć filozofa W. Ockhama).

    Systemy programistyczne „Turbo” firmy Borland, których podstawą są tłumacze z języków programowania BASIC, Pascal, C, Prolog itp., są szeroko stosowane wśród twórców programów, a także podczas nauczania programowania. Interfejs Turbo Shell dla dowolnego zewnętrznego programowanie systemów jest dokładnie takie samo i zapewnia użytkownikowi standardowy zestaw funkcji i poleceń opisanych powyżej i wyświetlanych w menu głównym systemu.

    Rozważmy technologię tworzenia programów z wykorzystaniem popularnego systemu programowania Turbo-Pascal 7 (obycie z samym językiem zostawmy do następnego rozdziału).

    W takich zintegrowanych systemach programistycznych stara się zapewnić twórcy programu maksymalne możliwości obsługi. Oprócz głównych funkcji system Turbo Pascal 7 umożliwia skonfigurowanie kompilatora do pracy w trzech trybach: Tryb normalny MS DOS (Real), tryb chroniony i tryb pracy Środowisko Windowsa(Okna).

    Po uruchomieniu systemu (plik TURBO.EXE) na ekranie monitora pojawia się okno interfejsu, rys. 2.10.

    Ryż. 2.10. Widok ekranu zintegrowanego środowiska Turbo-Pascal wersja 7 (instalacja)

    Menu główne systemu ( Górna linia screen) zawiera polecenia umożliwiające wykonanie następujących rodzajów pracy:

    Plik - praca z plikami (zapisywanie, ładowanie, komunikacja z systemem operacyjnym
    system);

    Edytuj - praca z edytorem tekstu (domyślnie po załadowaniu systemu
    edytor tekstu jest w stanie aktywnym);

    Szukaj - wyszukaj i zamień fragmenty tekstu;

    Uruchom - uruchom program do wykonania;

    Kompiluj - kompilowanie programu i ustawianie parametrów kompilacji;

    Debugowanie - ustawianie parametrów debugowania programu;

    Narzędzia – narzędzia programowe (dyskretna obsługa);

    Opcje - ustawienie opcji dla zintegrowanego środowiska;

    Okno - praca z oknami;

    Pomoc - system pomocy i podpowiedzi.

    Aby rozpocząć pracę z systemem programowania należy posiadać projekt tekstu programu, który można wpisać w polu roboczym okna systemu. Wbudowany edytor tekstu jest prosty i maksymalnie odpowiedni do wpisywania tekstów programów w języku Pascal. Zapewnia specjalne oświetlenie struktur kontrolnych i poleceń. Wygodny jest system pomocy kontekstowej (Shift+Fl), który w dowolnym momencie i miejscu przywoła podpowiedź dotyczącą wpisywanego tekstu programu. Jednakże tekst programu można przygotować w dowolnym edytorze tekstu przechowującym teksty w kodach ASCII (np. w Leksykonie); wystarczy podać nazwę pliku z rozszerzeniem .pas.

    Jeżeli teksty programu zostały wcześniej zapisane na dysku twardym lub dyskietce, można je załadować do pola edycyjnego za pomocą pozycji menu Plik.

    Po zakończeniu generowania tekstu należy skompilować program (punkt menu Kompiluj). Jeśli w programie wystąpią błędy, kompilator je wskaże. Po poprawieniu błędów możesz powtórzyć kompilację jeszcze raz.

    Po pomyślnej kompilacji program uruchamia się za pomocą polecenia menu Uruchom.

    Ale najczęściej praca nie kończy się na tym etapie. Złożone algorytmy wymagają testowania i debugowania. Wiele programów składa się z oddzielnych modułów, wymaga komunikacji z innymi programami i systemami itp. Aby rozwiązać wszystkie te problemy, przeznaczone są inne polecenia systemowe (Debugowanie, Opcje itp.).

    Oczywiście programista pracujący w Pascalu nie musi programować tak skomplikowanych, ale często spotykanych operacji, jak obliczanie wartości. funkcje matematyczne, konstruowanie obrazów prostych obiektów geometrycznych (odcinki linii, okręgi itp.), czyszczenie ekranu i wiele innych. Wysoce skuteczne, starannie dostrojone programy do takich działań są podsumowane w standardowych modułach i wystarczy mieć do nich dostęp. Zawarte w pakiecie bibliotecznym standardowe moduły obejmują: Crt - praca z ekranem, Graph - praca z grafiką i inne, takie jak Overlay, String, System, Turbo 3, WinAPI, WinCrt, WinDos, WinPrn, WinTypes, WinProcs.

    2.2. PROGRAMY NADAWCZE I PROCESY ZWIĄZANE Z nimi

    Od czasu pojawienia się pierwszych komputerów programiści poważnie zastanowili się nad problemem kodowania programów komputerowych. Już pod koniec lat 40. zaczęły pojawiać się pierwsze prymitywne języki programowania wysokiego poziomu. W nich programista zapisał w formularzu problem do rozwiązania wzory matematyczne, a następnie za pomocą specjalnej tabeli przetłumaczono znak po znaku, konwertując te formuły na dwuliterowe kody. Dalej specjalny program(później zwany interpreterem) zamienił te kody na binarny kod maszynowy. Pierwszy kompilator został opracowany przez G. Hoppera na początku lat 50-tych; realizował funkcję łączenia poleceń, a podczas tłumaczenia organizował podprogramy, przydzielał pamięć komputera i konwertował polecenia wysokiego poziomu (wówczas pseudokody) na polecenia maszynowe. Następnie kompilatory i tłumacze języków asemblera zaczęły się rozwijać i ugruntowały swoją pozycję w praktyce komputerowej.

    Pomysły na tłumaczenie (przekodowanie) niektórych znaków na inne stały się podstawą do stworzenia różnych języków programowania wraz z odpowiednimi tłumaczami - kompilatorami i/lub interpreterami. Różnica między kompilatorami a interpreterami polega na procedurze tłumaczenia tekstu na kod maszynowy. Kompilator konwertuje cały tekst programu na sekwencyjny zestaw instrukcji maszynowych, który następnie jest wysyłany do wykonania (przykład kompilatora Pascala). Tłumacz realizuje transmisję zgodnie z zasadą tłumaczenia symultanicznego. Tłumaczona jest każda pojedyncza linia tekstu programu, a następnie po jej zinterpretowaniu wykonywane są polecenia zawarte w tej linii (przykład języka BASIC). Współcześni tłumacze języków programowania wysokiego poziomu i systemów zarządzania bazami danych integrują możliwości i zalety kompilatorów i interpreterów oraz dodają różne narzędzia usługowe do tłumaczenia i debugowania utworzonych programów do systemów programistycznych.

    Najważniejszym elementem w rozwoju systemów programowania były podprogramy. Pojawienie się podprogramów znacznie uprościło proces tworzenia programów systemowych i aplikacyjnych. Podprogramy umożliwiły tworzenie bibliotek z najczęściej stosowanych w programach algorytmów – procedur i funkcji. Systemy programowania z konieczności zawierają standardowe (wbudowane w system) biblioteki podprogramów. Zawierają na przykład podprogramy do obliczania funkcji matematycznych sin(x), cos(x), abs(x) itp.

    Obecnie powszechnie stosowane są biblioteki podprogramów użytkownika i aplikacji. Ich liczba wzrasta. Zmienia się struktura procedur bibliotecznych. We współczesnych językach upowszechniły się moduły (Unit), reprezentujące wyspecjalizowane pakiety połączonych ze sobą podprogramów o określonym celu, na przykład do pracy z klawiaturą, grafiką itp. Rozwój programowania obiektowego umożliwił tworzenie biblioteki obiektów i podprogramów z obiektowymi typami danych (Object). Przykładem są powłoki takie jak TurboVision.

    Nowoczesny program reprezentuje zbiór poleceń, operatorów i wyrażeń, które zawierają łącza (bezpośrednie lub pośrednie) do różnych podprogramów z bibliotek, modułów i obiektów istniejących w systemie programowania. Pod tym względem tekst źródłowy programu z reguły zajmuje kilka razy mniej miejsca w pamięci niż jego wersja przetłumaczona na kod maszynowy. Jak to się stało?

    Rozważmy jedną z opcji tłumaczenia programu z języka programowania Pascal. Tekst źródłowy programu do rozwiązywania równania kwadratowego przedstawiono poniżej:

    program KvadUravn;

    var A, B, C, D, XI, X2: RZECZYWISTY;

    writeln("wpisz A,B,C"); czytaj (A, B, C);

    jeśli D