{"id":907,"date":"2024-01-15T08:00:00","date_gmt":"2024-01-15T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=907"},"modified":"2023-10-12T12:35:58","modified_gmt":"2023-10-12T10:35:58","slug":"flex-2-version-1","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2024\/01\/15\/flex-2-version-1\/","title":{"rendered":"Flex 2 Version 1"},"content":{"rendered":"\n<p>Webdesign 2024 beginnt mit einem sehr einfachen Layout. Flex 2 Version 1 ist ein flexibles, zweispaltiges Layout mit Basis-Navigation\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Vorbereitungen:<\/strong><\/p>\n\n\n\n<p>In einem ersten Schritt erstellen wir eine einfache Textdatei und nennen sie \u201cindex.html\u201c. Im Idealfall machen wir das innerhalb eines Ordners \u201cWebdesign-2024\u201c in der localhost-Umgebung.<\/p>\n\n\n\n<p>Wir arbeiten also innerhalb der lokalen Webserverumgebung von Apache.<\/p>\n\n\n\n<p>In einem zweiten Schritt erstellen wir den Ordner \u201c01_CSS\u201c und darin erstellen wir folgende einfache Textdateien\u2026<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>01_zentrale.css<\/li>\n\n\n\n<li>02_fundament.css<\/li>\n\n\n\n<li>03_body.css<\/li>\n\n\n\n<li>04_wrapper.css<\/li>\n\n\n\n<li>05_kopfbereich.css<\/li>\n\n\n\n<li>06_navibereich.css<\/li>\n\n\n\n<li>07_textbereich.css<\/li>\n\n\n\n<li>08_artikel.css<\/li>\n<\/ul>\n\n\n\n<p>Der nachfolgende HTML Quellcode wird in die Datei \u201cindex.html\u201c eingef\u00fcgt. Das Layout entsteht aber erst, wenn der CSS-Code auch in die entsprechenden CSS-Dateien eingef\u00fcgt wird\u2026<\/p>\n\n\n\n<p><strong>Der HTML Quelltext:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"de\">\n\n&lt;head>\n&lt;title>Webdesign 2024&lt;\/title>\n&lt;link rel=\"stylesheet\" href=\"01_CSS\/01_zentrale.css\" type=\"text\/css\" \/>\n&lt;meta charset=\"UTF-8\"\/>\n&lt;\/head>\n\n&lt;body>\n&lt;div id=\"wrapper\"> &lt;!-- Anfang vom wrapper-Bereich-->\n\n&lt;header> &lt;!-- Anfang vom kopfbereich-Bereich -->\n&lt;\/header> &lt;!-- Ende vom kopfbereich-Bereich -->\n\n&lt;nav> &lt;!-- Anfang vom navibereich -->\n&lt;ul>\n&lt;li>&lt;a href=\"index.html\">Webseite 1&lt;\/a>&lt;\/li>\n&lt;li>&lt;a href=\"index.html\">Webseite 2&lt;\/a>&lt;\/li>\n&lt;\/ul>\n&lt;\/nav> &lt;!-- Ende vom navibereich -->\n\n&lt;main> &lt;!-- Anfang vom main-Bereich -->\n\n&lt;article>\n&lt;h1>\u00dcberschrift Artikel 1:&lt;\/h1>\n&lt;p>\nWillkommen auf der ersten Webseite...\n&lt;\/p>\n&lt;\/article>\n&lt;br \/>\n\n&lt;\/main> &lt;!-- Ende vom main-Bereich -->\n\n&lt;footer> &lt;!-- Anfang vom footer-Element -->\n&lt;\/footer> &lt;!-- Ende vom footer-Element -->\n\n&lt;\/div> &lt;!-- Ende vom wrapper-Bereich -->\n\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c01_zentrale.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url(02_fundament.css);\n@import url(03_body.css);\n@import url(04_wrapper.css);\n@import url(05_kopfbereich.css);\n@import url(06_navibereich.css);\n@import url(07_textbereich.css);\n@import url(08_artikel.css);<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c02_fundament.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\/*\nDiese Datei dient nur dem Reset. Padding und margin werden auf null gesetzt.\n*\/\n\n* {\npadding: 0;\nmargin: 0;\n}\n\nhtml {\nheight: 101%;\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c03_body.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\nbody {\nbackground-color: white;\ncolor: black;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c04_wrapper.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\n#wrapper {\n\nmargin: 5px;\n\nbackground-color: white;\n\ncolor: black;\n\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c05_kopfbereich.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\nheader {\n\nheight: 80px;\n\nbackground-image: url(..\/cpm-header01.jpg);\n\nbackground-repeat: no-repeat;\n\nbackground-color: steelblue;\n\ncolor: white;\n\nmargin-top: 5px;\n\nmargin-right: 5px;\n\nmargin-bottom: 5px;\n\nmargin-left: 5px;\n\nborder-top-width: 1px;\n\nborder-right-width: 1px;\n\nborder-bottom-width: 1px;\n\nborder-left-width: 1px;\n\nborder-top-style: solid;\n\nborder-right-style: solid;\n\nborder-bottom-style: solid;\n\nborder-left-style: solid;\n\nborder-top-color: black;\n\nborder-right-color: black;\n\nborder-bottom-color: black;\n\nborder-left-color: black;\n\npadding-top: 5px;\n\npadding-right: 5px;\n\npadding-bottom: 5px;\n\npadding-left: 5px;\n\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c06_navibereich.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\nnav {\n\nposition: absolute;\n\ntop: 97px;\n\nleft: 5px;\n\nwidth: 210px;\n\nbackground-color: steelblue;\n\ncolor: white;\n\nmargin-top: 5px;\n\nmargin-right: 5px;\n\nmargin-bottom: 5px;\n\nmargin-left: 5px;\n\nborder-top-width: 1px;\n\nborder-right-width: 1px;\n\nborder-bottom-width: 1px;\n\nborder-left-width: 1px;\n\nborder-top-style: solid;\n\nborder-right-style: solid;\n\nborder-bottom-style: solid;\n\nborder-left-style: solid;\n\nborder-top-color: black;\n\nborder-right-color: black;\n\nborder-bottom-color: black;\n\nborder-left-color: black;\n\npadding-top: 10px;\n\npadding-right: 10px;\n\npadding-bottom: 10px;\n\npadding-left: 10px;\n\nfont-family: Arial;\n\nfont-size: smaller;\n\n}\n\nnav li {\n\nlist-style-type: none;\n\n}\n\nnav a:link {\n\ncolor: white;\n\nbackground-color: steelblue;\n\ndisplay: block;\n\ntext-decoration: none;\n\n}\n\nnav a:visited {\n\ncolor: white;\n\nbackground-color: steelblue;\n\ndisplay: block;\n\ntext-decoration: none;\n\n}\n\nnav a:hover {\n\nbackground-color: white;\n\ncolor: black;\n\ndisplay: block;\n\ntext-decoration: none;\n\n}\n\nnav a:focus {\n\ncolor: black;\n\nbackground-color: white;\n\ndisplay: block;\n\ntext-decoration: none;\n\n}\n\nnav a:active {\n\ncolor: black;\n\nbackground-color: white;\n\ndisplay: block;\n\ntext-decoration: none;\n\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c07_textbereich.css\u201c:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\nmain {\n\nbackground-color: steelblue;\n\ncolor: white;\n\nmargin-top: 3px;\n\nmargin-right: 5px;\n\nmargin-bottom:5px;\n\nmargin-left: 241px;\n\nborder-top-width: 1px;\n\nborder-right-width: 1px;\n\nborder-bottom-width: 1px;\n\nborder-left-width: 1px;\n\nborder-top-style: solid;\n\nborder-right-style: solid;\n\nborder-bottom-style: solid;\n\nborder-left-style: solid;\n\nborder-top-color: black;\n\nborder-right-color: black;\n\nborder-bottom-color: black;\n\nborder-left-color: black;\n\npadding-top: 20px;\n\npadding-right: 20px;\n\npadding-bottom: 20px;\n\npadding-left: 20px;\n\nfont-family: Arial;\n\nfont-size: smaller;\n\n}\n\nmain a:link {\n\ncolor: white;\n\nbackground-color: steelblue;\n\ntext-decoration: underline;\n\n}\n\nmain a:visited {\n\ncolor: white;\n\nbackground-color: steelblue;\n\ntext-decoration: underline;\n\n}\n\nmain a:hover {\n\ncolor: black;\n\nbackground-color: white;\n\ntext-decoration: underline;\n\n}\n\nmain a:focus {\n\ncolor: white;\n\nbackground-color: steelblue;\n\ntext-decoration: underline;\n\n}\n\nmain a:active {\n\ncolor: white;\n\nbackground-color: steelblue;\n\ntext-decoration: underline;\n\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p><strong>Der CSS-Code f\u00fcr die Datei \u201c08_artikel.css\u201c<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\narticle {\n\noverflow: hidden;\n\ncolor: black;\n\nbackground-color: lightsteelblue; \/* Grundeinstellung = lightsteelblue *\/\n\npadding: 5px;\n\nborder-style: solid;\n\nborder-color: black;\n\nborder-width: 1px;\n\n}\n\n.clearingtext {\n\nclear: both;\n\nbackground-color: lightsteelblue;\n\n}\n\n.bildlinks {\n\nfloat: left;\n\nmargin-top: 5px;\n\nmargin-right: 15px;\n\nmargin-bottom: 5px;\n\nmargin-left: 0px;\n\nborder-top-width: 1px;\n\nborder-right-width: 1px;\n\nborder-bottom-width: 1px;\n\nborder-left-width: 1px;\n\nborder-top-style: solid;\n\nborder-right-style: solid;\n\nborder-bottom-style: solid; \/* dashed = gestrichelte Rahmenlinie*\/\n\nborder-left-style: solid;\n\nborder-top-color: black;\n\nborder-right-color: black;\n\nborder-bottom-color: black;\n\nborder-left-color: black;\n\n}\n\n.bildrechts {\n\nfloat: right;\n\nmargin-top: 5px;\n\nmargin-left: 15px;\n\nmargin-bottom: 5px;\n\nborder-style: solid;\n\nborder-width: 1px;\n\n}\n\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Webdesign 2024 beginnt mit einem sehr einfachen Layout. Flex 2 Version 1 ist ein flexibles, zweispaltiges Layout mit Basis-Navigation\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-907","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=907"}],"version-history":[{"count":3,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/907\/revisions"}],"predecessor-version":[{"id":910,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/907\/revisions\/910"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}