baner

Lekcja 5

kl 5 Aplikacje internetowe

 
TEMAT: Konstruowanie serwisu informacyjnego o bazie danych.

 

Zadanie 1_5 (kontynuacja z lekcji poprzedniej)

Powtórzenie z obsługi bazy danych z wykorzystaniem składni języka PHP

  1. Uruchom pakiet XAMPP, a w nim serwer Apache oraz bazę danych.
  2. Utwórz na dysku S:\zad1\ plik zad1.php
  3. Dodaj kolejny plik S:\zad1\zad1.css w którym umieścisz wszystkie elementy stylu.
  4. Teraz kolej na budowę witryny
    • Utwórz szkielet strony internetowej składający się z: bloku górnego (banera), poniżej dwóch bloków (lewy i prawy), poniżej bloku dolnego (stopki)

    • Baner
    • Blok górny powinien zajmować całą szerokość okna przeglądarki i mieć wysokość 120px
    • W bloku górnym umieść napis: Zadanie 1 (nagłówek 1 poziomu, wyśrodkowany) oraz z lewej strony napisu obraz (widok1.png)
    • Obraz (widok1.png) o wymiarach 90px na 90px ma przestawiać logo XAMPP'a (można pobrać z sieci)
    • Ustal tło dla banera tak, aby całość była czytelna i nie raziła w oczy (dobierz pastelowy kolor)

    • Blok lewy - menu
    • Wymyśl konstrukcję prostego menu w układzie pionowym składającego się z odsyłaczy do 4 podstron
      1. Tworzenie bazy i tabel
      2. Dodawanie i usuwanie rekordów
      3. Zapytania do bazy
      4. Przykłady kodów
    • Dobrze rozplanuj położenie i wielkość elementów aktywnych.
    • Szerokość bloku lewego 25% szerokości okna przeglądarki.
    • Dobierz kolor tła bloku tak, aby pasował do tła w banerze.
    • Na dole okna lewego umieść obraz (widok2.png) prezentujący logo phpMyAdmin (można pobrać z sieci)
    • Obraz (widok2.png) ma mieć zachowane proporcje i nie może być szerszy niż 200px;

    • Blok prawy
    • Szerokość bloku prawego 75% szerokości okna przeglądarki.
    • Dobierz kolor tła bloku tak, aby pasował do tła w banerze.
    • W tym bloku będą prezentowane elementy graficzne, zrzuty ekranowe i opisy z operacji wykonywanych na poprzednich zajęciach

    • Stopka
    • Stopka powinna zajmować całą szerokość okna przeglądarki i mieć wysokość 40px
    • W stopce umieść paragraf, a w nim swoje: imię, nazwisko, klasę i grupę
    • Tekst w stopce wyrównaj do prawej zachowując odstęp od prawej krawędzi okna 50px
    • Ustal czcionkę dla tekstu w stopce Courier New w rozmiarze 8px
    • Kolejne działania w lekcji następnej...
  5. Pomoc i wskazówki jak to zrobić można znaleźć pod adresem:
Pytania i odpowiedzi: