Ten wikiHow uczy, jak używać programu Adobe Dreamweaver do tworzenia rozwijanego pola dla strony internetowej. Rozwijane pola to menu, które „rozwijają się” po kliknięciu elementu na Twojej stronie internetowej, prezentując więcej opcji w procesie.
Kroki
Krok 1. Otwórz projekt Dreamweaver
Aby to zrobić, kliknij dwukrotnie plik projektu. Jeśli chcesz utworzyć nowy projekt Dreamweaver, otworzysz program Dreamweaver, kliknij Plik, Kliknij Nowyi postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.
Krok 2. Utwórz uporządkowaną listę
Aby utworzyć menu rozwijane, musisz mieć co najmniej jeden punkt wypunktowania. Możesz utworzyć punktor, wyłączając CSS (kliknij Pogląd element menu, wybierz Renderowanie stylówi kliknij Style wyświetlania jeśli jest zaznaczone), klikając lokalizację, w której chcesz dodać punkt, klikając ikonę wypunktowania na dole okna i wpisując nazwę punktu. Przed kontynuowaniem należy ponownie włączyć CSS.
- Nazwa punktu będzie tutaj służyła jako aktywator menu rozwijanego (np. przycisk, nad którym najedziesz lub klikniesz, aby otworzyć menu rozwijane).
- Pomiń ten krok, jeśli masz już element listy, który chcesz przekonwertować na menu rozwijane.
Krok 3. Określ nazwę swojej listy
Kliknij Kod i upewnij się, że jesteś na Kod źródłowy ustawienia, a następnie przewiń w dół do kodu uporządkowanej listy (będzie on między „
"tag i"
„ tag) i poszukaj tagu „” nad górą”
„. Słowo w cudzysłowie to nazwa Twojej listy.
-
Jeśli nie widzisz nazwy, wstaw tag (gdzie nazwa odnosi się do preferowanej nazwy z listy) bezpośrednio nad
etykietka.
Krok 4. Usuń punktor(y)
Upewnij się, że jesteś we właściwym miejscu, klikając Projekt zakładkę, a następnie klikając Projektant CSS w prawym górnym rogu okna, a następnie wykonaj następujące czynności:
- Kliknij + po prawej stronie nagłówka „Selektory”.
- Wpisz #name ul, gdzie „name” to nazwa Twojej listy.
- Naciśnij ↵ Enter dwa razy.
- Przewiń w dół i kliknij typ-listy w okienku na dole Projektant CSS patka.
- Kliknij Żaden w wyświetlonym menu podręcznym.
Krok 5. Zmień uporządkowaną listę, aby wyświetlała się poziomo
Aby to zrobić:
- Kliknij + po prawej stronie nagłówka „Selektory”.
- Wpisz #name li, gdzie "name" to nazwa Twojej listy.
- Znajdź nagłówek „pływający” w okienku na dole Projektant CSS patka.
- Kliknij Lewo bezpośrednio po prawej stronie nagłówka „pływak”.
Krok 6. Dodaj aktywny tag do swojej listy
Kliknij + po prawej stronie "Selektory", a następnie wpisz #nazwa a (gdzie "nazwa" to nazwa Twojej listy) i dwukrotnie naciśnij ↵ Enter.
Krok 7. Dodaj kolor tła
Wybierz #Nazwij element, jeśli to konieczne, a następnie kliknij kartę „Kolor tła” w kształcie pudełka u góry Projektant CSS okienko, wybierz kolor tła i wybierz kolor tła, którego chcesz użyć.
To jest kolor, którego będą używać elementy Twojej listy rozwijanej
Krok 8. Ustaw elementy listy w formacie „blokowym”
Ten format zapewnia, że gdy ktoś kliknie lub dotknie elementu na liście, może go otworzyć, wybierając nieco powyżej lub poniżej niego, zamiast precyzyjnie zaznaczać tekst:
- Upewnij się, że #Nazwij element jest wybrany w Projektant CSS patka.
- Przewiń w dół do nagłówka „Wyświetl” w okienku.
- Kliknij skrajną prawą stronę nagłówka „wyświetlanie”, a następnie kliknij blok w wynikowym menu.
Krok 9. Dodaj dopełnienie, jeśli to konieczne
Jeśli zauważysz, że elementy listy są ze sobą zacięte, możesz umieścić między nimi trochę miejsca, wykonując następujące czynności:
- Upewnij się, że #Nazwij element jest wybrany w Projektant CSS patka.
- Przewiń w dół do nagłówka „dopełnienie” w okienku.
- Zmień górne i dolne pola tekstowe „px”, aby zawierały co najmniej 5.
- Zmień lewe i prawe pola tekstowe „px” na co najmniej 10.
Krok 10. Utwórz kolor najechania
To jest kolor, który pojawi się po najechaniu kursorem myszy na element w menu rozwijanym:
- Kliknij + po prawej stronie nagłówka „Selektory”.
- Wpisz #nave a:hover (gdzie "name" to nazwa Twojej listy) i dwukrotnie naciśnij ↵ Enter.
- Kliknij kartę „Kolor tła”.
- Wybierz kolor tła a następnie wybierz jaśniejszy kolor niż użyty jako kolor tła.
Krok 11. Wyłącz CSS
Kliknij Pogląd element menu, wybierz Renderowanie stylówi kliknij Style wyświetlania opcja w wyskakującym okienku.
Jeśli Style wyświetlania jest wyszarzona, kliknij w dowolnym miejscu w dokumencie programu Dreamweaver i spróbuj ponownie.
Krok 12. Utwórz zawartość menu rozwijanego
Możesz to zrobić, dodając podpunkty pod punktorem, którego chcesz użyć jako przycisku menu rozwijanego:
- Kliknij po prawej stronie pozycji listy, którą chcesz zmienić w menu rozwijane, a następnie naciśnij ↵ Enter.
- Naciśnij klawisz Tab ↹.
- Wpisz nazwę pierwszego elementu menu rozwijanego, a następnie naciśnij ↵ Enter.
- Wpisz nazwę następnego menu rozwijanego, a następnie naciśnij ↵ Enter i powtórz w razie potrzeby.
Krok 13. Powiąż zawartość menu rozwijanego z elementem punktora
Aby to zrobić:
- Kliknij + obok „Selektory”, a następnie wpisz #name ul ul i naciśnij dwukrotnie ↵ Enter.
- Przewiń w dół i kliknij wyświetlacz, następnie kliknij Żaden w menu podręcznym.
- Znajdź i kliknij pozycja, następnie kliknij absolutny w menu podręcznym.
Krok 14. Utwórz samo menu rozwijane
Aby to zrobić, musisz dodać jeszcze jeden selektor:
- Kliknij + obok „Selektory”, a następnie wpisz #name ul li:hover > ul i naciśnij dwukrotnie ↵ Enter.
- Znajdź i kliknij wyświetlacz, następnie kliknij blok w wyświetlonym menu podręcznym.
Krok 15. Spraw, aby zawartość menu rozwijanego była wyświetlana w pionie
Domyślnie zawartość menu rozwijanego będzie wyświetlana na poziomym pasku, ale możesz wymusić umieszczenie ich w pionowej kolumnie, wykonując następujące czynności:
- Kliknij + obok „Selektory”, a następnie wpisz #name ul ul li i naciśnij dwukrotnie ↵ Enter.
- Znajdź nagłówek „pływak”.
- Kliknij „brak” () po prawej stronie nagłówka „float”.
Krok 16. Zapisz swój projekt
Aby to zrobić, naciśnij Ctrl+S (Windows) lub ⌘ Command+S (Mac).
