Damian Daszkiewicz Tworzenie strony-wizytówki dla firmy XYZ

Transkrypt

1 Damian Daszkiewicz Tworzenie strony-wizytówki dla firmy XYZ Dokument może być dowolnie rozpowszechniany w niezmiennej formie. Nie możesz pobierać opłat Dokument może jest trochę niedopracowany, ale robiłem go jako projekt na kursie pedagogicznym i po nieznacznych zmianach postanowiłem go udostępnić dla czytelników serwisu VideoWebmaster.pl W tym ćwiczeniu uczniowie w praktyce wykorzystają nabyte wcześniej umiejętności obsługi programu Microsoft Share Point Designer podczas tworzenia prostej strony internetowej dla firmy XYZ KROK 1: Uruchamiamy program Microsoft Share Point Designer. Program załaduje się z czystym dokumentem. Wybieramy w menu opcję Plik -> Zapisz jako i zapisujemy projekt w folderze c:\uczen\inicjały_ucznia nadając plikowi nazwę index.html

2 KROK 2: Stworzymy prosty szkielet strony. Stronę oprzemy na tabelkach. Stworzymy tabelę składającą się z 2 kolumn i 3 wierszy. W tym celu w menu Tabela wybieramy pozycję Wstaw Tabelę a następnie w oknie dialogowym Wstaw Tabelę wpisujemy wartości jak na poniższym rysunku KROK 3: W dokumencie pojawi się tabela. Scalamy komórki w pierwszym i trzecim wierszu. W tym celu zaznaczamy dwie komórki, klikamy prawym przyciskiem myszy i z menu kontekstowego wybieramy pozycję Modyfikuj -> Scalaj komórki. Ową czynność wykonujemy dwukrotnie (raz dla pierwszego wiersza, a drugi raz dla trzeciego wiersza tabeli)

3 KROK 4: W pierwszym wierszu tabeli wpisujemy test Firma XYZ usługi budowlane. Następnie zaznaczamy myszą wpisany tekst i wybieramy na pasku narzędzi opcję Nagłówek1.

4 KROK 5: W trzecim wierszu tabeli wpisujemy notkę o stronie np. (c) Firma XYZ 2010 Webmaster: Twoje imię. Następnie zaznaczamy ciąg znaków Twoje imię, klikamy prawym przyciskiem myszy i z menu kontekstowego wybieramy pozycję Hiperłącze KROK 6: W oknie dialogowym Wstawianie hiperłącza klikamy w zakładkę Adres w polu Adres wpisujemy swój adres (UWAGA: program sam automatycznie doda przedrostek mailto:) i klikamy w przycisk OK.

5 KROK 7: W drugim pierwszy w pierwszej komórce wpisujemy Menu: i naciskamy enter a następnie tworzymy trzy pozycje: Strona główna, Oferta, Kontakt (oddzielone enterem) KROK 8: Tworzymy hiperłącza do poszczególnym opcji w menu. W tym celu zaznaczamy po kolei odpowiednią pozycję (najpierw Strona główna) i klikamy prawym przyciskiem myszy. Z menu kontekstowego wybieramy znaną już wcześniej pozycję hiperłącze. W oknie dialogowym Wstawianie hiperłącza upewniamy się, że jest aktywna zakładka Istniejący plik lub strona sieci Web i w polu Adres wpisujemy odpowiednią nazwę pliku index.html KROK 9: Wykonujemy to samo, co w kroku 8, ale tworzymy hiperłącza dla pozycji Oferta (linkujemy do jeszcze nieistniejącego pliku oferta.html) i kontakt (linkujemy do jeszcze nieistniejącego pliku kontakt.html). Nasza strona powinna wyglądać tak, jak na poniższym rysunku

6 KROK 10: Mamy już zrobione menu. Obie komórki w drugim wierszu zajmują po 50% wielkości tabeli. Komórka dla menu jest zbyt szeroka, więc ją zmniejszymy. W tym celu klikamy na komórkę prawym przyciskiem myszy i z menu kontekstowego wybieramy pozycję Właściwości komórki. Następnie w oknie dialogowym Właściwości komórki zmniejszamy szerokość komórki na 200 pikseli. KROK 11: Zaznaczamy dwie komórki w drugim wierszu. Klikamy prawym przyciskiem myszy i z menu kontekstowego wybieramy Właściwości komórki. Następnie w oknie dialogowym Właściwości komórki ustawiamy opcję Wyrównanie w pionie -> Do góry a Wyrównanie w poziomie -> do lewej

7 KROK 12: Z menu Plik wybierz pozycję Właściwości. Następnie w oknie dialogowym właściwości wypełnij odpowiednie pola (Tytuł strony, Opis strony, Słowa kluczowe) KROK 13: Właśnie został stworzony prosty szablon strony internetowej. Zapisz dokonane zmiany (Plik -> Zapisz). Następnie zapiszemy dodatkowo dwukrotnie ten sam plik pod dwoma różnymi nazwami (oferta.html i kontakt.html). W tym celu z menu Plik wybierz pozycję Zapisz jako i wpisz odpowiednią nazwę pliku.

8 KROK 14: Skoro mamy już stworzone 3 takie same pliki (oferta.html, kontakt.html i index.html) to należy je wszystkie otworzyć (gdyż otwarty będzie pewnie plik, który został jako ostatni zapisany w moim przypadku pewnie kontakt.html). Za pomocą Plik -> Otwórz otwieramy dwa brakujące pliki Zwróć uwagę na górny pasek zakładek, na którym każdej zakładce odpowiada jeden plik i na biało jest zaznaczona zakładka z nazwą pliku, który aktualnie edytujesz KROK 15: Upewnij się, że aktualnie edytujesz plik kontakt.html. Następnie wpisz na stronie kilka informacji kontaktowych np. telefon, adres pocztowy, fax i zapisz zmiany (Plik->Zapisz)

9 KROK 16: Teraz wyedytuj stronę Oferta. Za pomocą narzędzia wypunktowania można wygodnie wypunktować listę usług, które świadczymy. Nie zapomnij zapisać zmian (Plik -> Zapisz) KROK 17: Została nam do wymedytowania strona index.html. Wpisz kilka informacji o firmie. Nie zapomnij zapisać zmian (Plik -> Zapisz)

10 KROK 18: Sprawdź jak wygląda strona w przeglądarce internetowej! W tym celu kliknij w przycisk Podgląd w Windows Internet Explorer lub naciśnij przycisk F12. Postaraj się obklikać wszystkie hiperłącza i jeśli coś nie działa, skoryguj Tak wygląda strona w przeglądarce internetowej: Zapraszam na gdzie znajdziesz więcej materiałów dotyczących tworzenia stron internetowych w postaci krótkich filmików instruktażowych!