Lediglich ein fehlerhaftes Experiment

Patch-Design

Grafische Web-Grund-Elemente ( Liste von Patch-Elemente ) Mit Drag and Drop kann ein ästetisches Web-Seiten-Design aus grafischen Web-Grund-Elementen ( Liste von Patch-Elemente ) aufgebaut werden. Ausgestaltungen können Flicken ( Patch ) Drag and Drop )

id="BBBBBBBBBB"

id="AAAAAAAAAAA" This is a drag and drop element with position: absolute.

img src="image-1.jpg"

      11 11
   11 11

Create 3 different style sheets: pc.css pcbig.css pchuge.css Use the following code for the links: Text Size: Sm | Med | Lg

function setActiveStyleSheet(title) {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("link"))[i]; i++) {
     if(a.getAttribute("rel").indexOf("style") != -1
        && a.getAttribute("title")) {
       a.disabled = true;
       if(a.getAttribute("title") == title) a.disabled = false;
     }
   }
}
function getActiveStyleSheet() {
var i, a;
 for(i=0; (a = document.getElementsByTagName("link"))[i]; i++) {
  if(a.getAttribute("rel").indexOf("style") != -1
  && a.getAttribute("title")
  && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

// if (!(dx && dy)) { // dx = 0; dragDrop.XXX = dragDrop.startX = 50; // dragDrop.draggedObject.style.left || 0; // dy = 0; dragDrop.YYY = dragDrop.startY = 50;// dragDrop.draggedObject.style.top || 0; return; // } //OK: // dragDrop.XXX = dragDrop.startX + dx; // dragDrop.YYY = dragDrop.startY + dy; // dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px'; // dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px'; // dragDrop.XXX = dragDrop.startX + dx; // dragDrop.YYY = dragDrop.startY + dy; // dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px'; // dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px'; // // alert(Object.keys(e.target).join('\n') + '\n\n' + Object.keys(this).join('\n')); //alert(e.target.relatedElement); // l = parseInt(el.style.left)||0; // t = parseInt(el.style.top)||0; // dragDrop.setPosition(l, t); // alert((false===NaN) +" l=" + l + " " + (typeof l) + " t=" + t + " " + (typeof t)); // dragDrop.drag_styles.position = "absolute"; // dragDrop.drag_styles.left = "0px"; dragDrop.drag_styles.top = "0px"; // dragDrop.startX = l; // dragDrop.startY = t; // if (l && l !== NaN) { dragDrop.startX = l; } // if (t && t !== NaN) { dragDrop.startY = t; } // alert(el.tagName + ' ' + dragDrop.drag_styles.left); // if (typeof descr_str === 'string') { // if (descr_str === '.drag_able') { // class="drag_able" // } // } else { el = doc.getElementById(descr_str); } // }

Beispiele für die Wahl von Bildgrößen

    1920 x 1080 Pixel für Fotos für Veranstaltungshinweise

     851 x 315 Pixel Titelbild als Cover Image, ganz oben quer platziertes Titelbild 
 min 450 x 150 Pixel für Titelbild

     180 x 180 Pixel Profilbild für Gesicht oder Firmenlogo 
    1200 x 444 Pixel Bildgröße 16:9 für Werbeanzeigen von Veranstaltungen

     403 x 403 Pixel für geteilte Links, Shared Link, Upload-Größe ca. 1200 x 1200 
     482 x 252 Pixel für Tab Imgage, Custom Tab Logo, Upload-Größe ca. 1200 x 627
     810 Pixel Breite für Header einer Tab Seite
  je 111 x 74 Pixel für 4 kleinen Vorschaubilder von Freunden bzw. gelikte Seiten