Webspace Bplaced.net

Allgemeine Fragen zu hPage

Moderator: HTML-Laie

Antworten
Benutzeravatar
leuchtturm
Erfahrener Forengänger
Erfahrener Forengänger
Beiträge: 50
Registriert: Di 14. Feb 2012, 20:29
Mein Vorname: erhard
Kontaktdaten:

Webspace Bplaced.net

Beitrag von leuchtturm »

Jahrelang war ich bei Npage und nun möchte ich weg von Hpage, weil man keine eigenen Templates mehr einbauen kann. Nun habe ich
mich bei Bplaced angemeldet und das Template Nr.002 ausgewählt und auch bei Bplaced hochgeladen und soweit klappt es auch. Nun
habe ich einige Fragen an euch: wie legt man Unterseiten an und ist es erforderlich auch die css-dateien hochzuladen?
[img]/home/erhard/Schreibtisch/Filezilla.jpg[/img]
Dateianhänge
Filezilla.jpg
Filezilla.jpg (126.07 KiB) 9565 mal betrachtet
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Webspace Bplaced.net

Beitrag von Jasko »

Hallo,

wenn du das Template hochgeladen hast und über deine neue URL auf die Startseite kommst, wo du das Template richtig angezeigt bekommst mit dem Beispielinhalt, dann hast du schon einiges richtig hinbekommen.

Die Startseite ist nähmlich die index.html Seite, diese kannst du nun kopieren und umbenennen und hast im Grunde eine weitere "Unterseite" erstellt. Der Inhalt muss natürlich angepasst werden und ein Link zur neuen Seite muss in die Navi eingebunden werden.

Das Problem bei einer Webseite die man so organisiert, ist natürlich das man bei jeder neuen Seite die Navis in allen Unterseiten anpassen muss, daher kann man von html auf php wechseln und mit zwei, drei kleinen Anpassungen die Navigation in eine Datei auslagern. Bei bedarf erkläre ich das im Detail.

Doch zunächst muss folgendes klappen:

1. Nach aufruf von deiner URL (z.B. meine_url.bplaced.de) bei bplaced erscheint die richtige Vorlage / das richtige Template
2. Nach aufruf von deiner URL mit index.html (z.B. meine_url.bplaced.de/index.html) bei bplaced erscheint immer noch die richtige Vorlage / das richtige Template
3. Kopiere die index.html Datei und bennene diese um z.B. index2.html
4. Nach aufruf von deiner URL mit index2.html (z.B. meine_url.bplaced.de/index2.html) bei bplaced erscheint immer noch die richtige Vorlage / das richtige Template

Wenn 4. funktioniert heist es das du einfach neue Seiten anlegen kannst. Bist du so weit schreibe ich hier dann auch das weitere vorgehen hin wie man die Navi aus den Seiten auslagern kann, bzw. wie man das Design im allgemeinen von dem Inhalt trennen kann wenn gewünscht.
Benutzeravatar
leuchtturm
Erfahrener Forengänger
Erfahrener Forengänger
Beiträge: 50
Registriert: Di 14. Feb 2012, 20:29
Mein Vorname: erhard
Kontaktdaten:

Re: Webspace Bplaced.net

Beitrag von leuchtturm »

Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3277
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Webspace Bplaced.net

Beitrag von Jasko »

Hallo,

Punkt 1: http://ankerplatz.bplaced.net/
Punkt 2: http://ankerplatz.bplaced.net/index.html

nun kannst 3 und 4 probieren hinzubekommen. Einfach eine Kopie der Datei index.html machen und die Kopie umbennen z.B. in index2.html

Dann über den Link http://ankerplatz.bplaced.net/index2.html versuchen aufzumachen. Wenn das klappt ist im Grunde die Kopiertre Datei deine zweite Seite.

Ein Webspace im so aufgebaut wie eine Verzeichnissstruktur auf dem Rechner. Um eine weitere Datei in einem ordner anzulegen reicht es oft einfach eine bestehende zu kopieren, so ähnlich verhält es sich mit dem anlegen neuer Webseiten auf dem Webspace, wenn man das ohne ein entsprechendes system dahinter probiert.
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 354
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Webspace Bplaced.net

Beitrag von HTML-Laie »

Habe mir mal eben zum testen ein Bplaced.net Account zugelegt und das Template 002 verwendet. Habe das Design am Rechner in 4 Teile zerlegt: Header, Navigation, Index und Footer. Abgespeichert wie folgt: Header.php, Navigation.php usw..

Sieht also wie folgt für den Header aus:

Code: Alles auswählen

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width"/>

<script type="text/javascript" src="modernizr.min.js"></script>
<script type="text/javascript" src="respond.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="menu_script.js"></script>
<link rel="stylesheet" href="menu_style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">

<title>HomepageHelfer.net - Design</title>

<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
</head>
<body>
<div class="container"><a id="top"></a>

<div class="header">
  <img src="header.png" alt="Design Header" />
</div>

<!-- Hier kann zusätzlich eine Sprachauswahl "Div" stehen. Download hier: http://homepagehelfer.net/tools/templates/zusatz.php -->

<div class="balken">

<?php include ("Navigation.php"); ?>

</div>


<div class="content">
<div class="content-text">

<!-- Ende des Header alles darueber in den Design Header Kopieren -->
Navigation:

Code: Alles auswählen

<div id='cssmenu'>
<ul>
   <li class='active'><a href='http://bbv-sitemaker.bplaced.net'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Musterlink 1-3</span></a>
      <ul>
         <li><a href='Startseite.php'><span>Seite 1</span></a></li>
         <li><a href='index.php'><span>Musterlink 2</span></a></li>
         <li class='last'><a href='index.php'><span>Musterlink 3</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Musterlink 4-5</span></a>
      <ul>
         <li><a href='index.php'><span>Musterlink 4</span></a></li>
         <li class='last'><a href='index.php'><span>Musterlink 5</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>HomepageHelfer</span></a>
      <ul>
         <li><a target="_blank" href='http://www.homepagehelfer.org'><span>Forum</span></a></li>
                 <li><a target="_blank" href='http://www.homepagehelfer.net'><span>Netzwerke</span></a></li>
         <li class='last'><a target="_blank" href='http://homepagehelfer-award.de'><span>Award</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='index.php'><span>Musterlink 6</span></a></li>
</ul>
</div>
Index-Seite:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title> Testseite Designeinbau </title>
<meta name="description" content="Inhalt der Seite (Beschreibung)">

<?php include ("Header.php"); ?>


<!-- Hier kommt der jeweilige Inhalt deiner Seite hinein -->
<h1>Design von HomepageHelfer.net</h1>

<p>
Einige Informationen zu diesem Design!
</p>

<h2>Design Informationen</h2>

<p>
Hier k&ouml;nnt ihr einige Informationen zu diesem "Light blue" Design nachlesen. Wenn ihr sonst noch Fragen zu diesem Layout habt, fragt doch in unserem <a target="_blank" href="http://homepagehelfer.org">Homepagebau Forum</a> nach. Da wird euch sicher jemand weiterhelfen.
</p>


<h3>Optimierung f&uuml;r Mobilger&auml;te</h3>

<p>
Dieses ist ein responsives Webdesign und Optimiert f&uuml;r Mobilger&auml;te!<br />
Die Mobile Freundlichkeit kann man <a target="_blank" href="https://www.google.com/webmasters/tools/mobile-friendly/">hier</a> testen, oder <a target="_blank" href="http://quirktools.com/screenfly">hier</a> verschiedene Ansichten betrachten.
</p>

<p>
Kannst gerne mal dein Browser zusammenziehen und sehen was passiert!
</p>
<h3>Templates Erweiterungen</h3>

<p>
Dieses Templates kann zus&auml;tzlich oben mit einer Sprachen Navigation oder anderen Zubeh&ouml;r erweitert werden. Den Download und mehr Infos dazu <a target="_blank" href="http://homepagehelfer.net/tools/templates/zusatz.php">hier</a>!
</p>

<h3>Das Layout</h3>

<p>
Das Light blue Layout ist mit Halbtransparenten Grafiken aufgebaut. So kann die Header Grafik problemlos ersetzt werden, am besten mit transparentem Hintergrund!
</p>


<h3>Die Technik</h3>

<p>
Dieses Design hat eine maximale Gr&ouml;&szlig;e, (Breite in Pixel) wo eingestellt werden kann.<br />
Schrifteinstellungen k&ouml;nnen ganz einfach &uuml;ber die CSS Datei erledigt werden.
</p>

<p>
Die runden Ecken werden automatisch &uuml;ber CSS gesteuert.
</p>

<h3>Die Navigation</h3>

<p>
Oben k&ouml;nnen Links auf die ganze Breite eingebunden werden. Sie k&ouml;nnen auch mit Untermen&uuml;s ausgestattet werden.
</p>

<p>
Die Navigationslinks sind einfach &uuml;ber CSS Beschriftet.
</p>

<h3>Bedienung</h3>

<p>
Um neue Links Einzubauen, ben&ouml;tigt man eigentlich keine HTML Kenntnisse, da die Links ganz einfach untereinander in listenform angeordnet sind.
</p>

<!-- Ende des Inhalts -->

<?php include ("Footer.php"); ?>

</body>
</html>
und Footer:

Code: Alles auswählen

<!-- Start des Footer alles darunter in den Design Footer Kopieren -->

<p>
<a href="#top"><img src="/top.png" alt="top"></a>
</p>

</div>
</div>

<!-- Hier kann zusätzlich eine Werbeblock "Div" stehen. Download hier: http://homepagehelfer.net/tools/templates/zusatz.php -->

<div class="footer">
<!-- Ab hier nichts Aendern - Design von www.HomepageHelfer.net - Free Download -->
    <!--
    #############################################
    ## Orginal Design by:   HomepageHelfer.net ##
    ## Author:             HomepageHelfer Team ##
    ## Web:             www.HomepageHelfer.net ##
    ## Linzenz:            Creative Comons 3.0 ##
    ## Modifay by:                           - ##
    #############################################
    -->
<span class="copyright">Design by <a target="_blank" href="http://homepagehelfer.net">HomepageHelfer.net</a> and <a target="_blank" href="http://www.homepagehelfer.net/tools/templates/hinweise.php">© Hinweise & TEAM</a></span>
<!-- Bis hier nichts Aendern - Design von www.HomepageHelfer.net - Free Download -->

</div>
</div>
In der Datei Style.css gegebenefalls die URL's zu den Bildern anpassen. Alles hochladen. Für jede weitere Unterseite kopierst du die Seite Index und gibst ihr einen anderen Namen. Nun brauchst du nur noch den Seiteninhalt austauschen und fertig ist eine neue Unterseite.

Auf den Seiten befinden sich im Header noch Titel Tags:

Code: Alles auswählen

<title> Testseite Designeinbau </title>
<meta name="description" content="Inhalt der Seite (Beschreibung)">
Hier kannst du der jeweiligen Seite einen Seitentitel und eine Beschreibung verpassen der dann im Browser angezeigt wird wenn du die Seite aufrufst.


Da bei dieser Art des Designeinbaus die Navigation ausgelagert wurde, braucht man nur diese anpassen wenn man eine neue Seite einfügt. Man erspart sich somit viel Arbeit.

Hier noch ein Infolink: Seiten dynamisch mit PHP erstellen

Mein Testdesign: Testseite Designeinbau

Gruß Hape :)
Zuletzt geändert von HTML-Laie am So 10. Mär 2019, 22:25, insgesamt 2-mal geändert.
Grund: Koorektur des Codes
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Antworten

Zurück zu „hPage - Allgemein“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 17 Gäste