Design Trainingen

Responsive Website: Body Section

<<< terug1 Head Section2 Body Section3 Responsive CSS


CODE VOOR DE BODY-SECTION (code voor de pagina inhoud)


 Zo ziet de index.html er uit. Ga door met de body-section. Vervang de grijze teksten in je index.html door code:


STAP 8: header

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    <!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 08_body_header

STAP 9: nav (menu) IN de header

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    PLAK TUSSEN DE OPEN-SLUIT-TAG DE CODE UIT: 09_body_nav

STAP 10: pagina titel en afbeelding IN de header

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    PLAK HIER DE CODE UIT: 10_body_title_image -->

De code van de header-tag met het menu en paginatitel zier zo uit:


STAP 11: eerste section (hele breedte)

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    <!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 11_body_section_full_width

STAP 12: leader en afbeelding IN de eerste section

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    PLAK TUSSEN DE OPEN-SLUIT-TAG DE CODE UIT: 12_body_section_leader

STAP 13: container-div voor de pagina content

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    <!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 13_body_container -->
     

De code van de eerste section met Leader ziet er zo uit:


STAP 14: tweede section (halve breedte)

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    <!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 14_body_section_half_width

STAP 15: tekst en afbeelding IN de tweede section (2x plakken)

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    PLAK TUSSEN DE OPEN-SLUIT-TAG DE CODE UIT: 15_body_section_content -->

STAP 16: news & photo section

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    <!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 16_body_section_news_photos

STAP 17: teksten IN de news-blokken (4x plakken)

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    PLAK TUSSEN DE OPEN-SLUIT-TAG DE CODE UIT: 17_body_section_news_content

STAP 18: witregel (clear) tussen news & photo-blokken

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    PLAK HIER DE CODE UIT: 18_body_section_news_clear

STAP 19: photo-blokken

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    PLAK HIER DE CODE UIT: 19_body_section_photos

STAP 20: afbeeldingen in de photo-blokken (4x plakken)

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    PLAK HIER DE CODE UIT: 20_body_section_photos_content -->

De code van de news- en photo-section zier er zo uit:


STAP 21: footer

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    <!-- VERVANG DEZE REGEL TEKST MET DE CODE UIT: 21_body_footer

STAP 22: tekst in de footer

  1. Kopieer de code uit deze link
  2. Ga naar je index.html in Dreamweaver
  3. Plak de zojuist gekopieerde code op de plek waar deze tekst staat:

    PLAK TUSSEN DE OPEN-SLUIT-TAG DE CODE UIT: 22_body_footer_content -->

De website met tekst en afbeeldingen. Nu de vormgeving nog...:


Bekijk het resultaat in de browser


Volgende stap: CSS