Machen Sie ein CSS-Stylesheet für die verschiedenen Seiten einer website
Ich bin erstellen einer Webseite mit nur zwei Hauptseiten, die sind "Index" und "Über mich" - Seiten. Nachdem Sie die Vorlagen und alles, ich kam in eine verwirrende problem, wo ich konnte nicht wirklich Bearbeiten der Css-Stil auf der Seite.
Im Grunde ist mein Über und Index-Seite bekam die gleiche Vorlage aus meinem Haupt-Html-Dateien (die man von Grund auf neu gemacht), Die ich Sache, es ist in Ordnung dort .. aber ich möchte, dass Meine About-Seite, um ein anderes Aussehen von meiner Index-Seite, jedes mal wenn ich eine änderung vornehmen, die auf den Bearbeitbaren Bereich, den ich machen möchte, verschwinden von der Seite, Es Wirkt sich auch auf die INdex-Seite. Gleichen für das Stylesheet, ich möchte verschiedene Farben auf der Seite, aber es scheint, wie jedesmal, wenn ich etwas mache, es wirkt sich auf die gesamte Website.
Hier ist das Bild von der Seite, die ich bislang gemacht.
Homepage und info-Seite
Beide Seiten haben die gleiche Vorlage, gleicher bearbeitbaren Bereich ein und die selbe css und schauen genau die gleiche Weise im moment, aber ich möchte, um die zu entfernen div class:"notes"
von der Seite und erweitern Sie die Breite seiner div id="main-content"
komplett ändern fast jede, selbst die Farben, die ich meine, der ganze style von der Seite, ohne die Homepage und lassen Sie es wie es ist .. was soll ich tun? Bitte
Danke
PS: ich bin mit Dreamweaver cs6.
main dwt html/gleiche html-Code für die über-und index-Seite nur mit dem Unterschied der für index-und über sind nicht editierbar
<code>
<!doctype html>
<html>
<head>
<!--JavaScript that enables Internet Explorer (version 8 and below) to recognise HTML5 elements -->
<script type="text/javascript">
document.createElement ('article')
document.createElement ('nav')
document.createElement ('aside')
document.createElement ('header')
document.createElement ('footer')
document.createElement ('main')
</script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/timothy.js"></script>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>My Uni Website</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<!--Write web page content and markup within the 'body' tags -->
<div id="outer">
<div class="frame">
<div class="fade"></div>
<img src="../images/huxley.jpg"/>
</div>
<div id="wrapper">
<!--The 'wrapper' div contains all the page content and can be styled -->
<div id="icon">
<ul>
<li><a href="http://www.twitter.com/justcallmebigdi"><img src="../images/twitter.png" width="20" /></a></li>
<li><a href="http://www.behance.net/justcallmebigdi"><img src="../images/behance.png" width="20" /></a></li>
</ul>
</div>
<div id="logo"><a href><img src="../images/logo2.png" width="209" height="207"/></a></div>
<!--The main heading for the page -->
<header>
<!-- <h1>CI135 Learning journal</h1> -->
<h2> How I mastered web standards in 10 weeks</h2>
</header>
<!--The primary navigation for the page -->
<nav>
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../about.html">ABOUT ME</a></li>
</ul>
</nav>
<!--Secondary sidebar navigation -->
<aside>
<div class="image"><img src="../images/information.png" width="100"/></div>
<div class="aside">
<!-- TemplateBeginEditable name="aside" -->
<h3> The Weekly posts </h3>
<ol>
<li><a href="../index.html">Getting started</a></li>
<li><a href="../index.html">Learning more about tags</a></li>
<li><a href="../index.html">Learning about lists and tables</a></li>
</ol>
<h3> Favourites</h3>
<ul>
<li> <a href="../index.html"> W3C markup validation service </a></li>
<li> <a href="../index.html"> Web platform Docs - Web development for beginners </a> </li>
<li> <a href="../index.html"> Html5 Doctor - Helping you implement HTML5 today </a></li>
</ul>
<h3> Basic Definitions </h3>
<dl>
<dt><strong>HTML</strong></dt>
<dd>Hyper-text markup language - markup language used to structure content</dd>
<dt><strong>CSS</strong></dt>
<dd>Cascading stylesheets - used to tell browsers how to present HTML elements</dd>
<dt><strong>JavaScript</strong></dt>
<dd>Scripting language for adding interactive behaviour to web pages</dd>
</dl>
<!-- TemplateEndEditable -->
<h3> My time table </h3>
<table width="523" height="81" border="1">
<tr>
<td width="71" height="23" bgcolor="#FFFFFF">Day/Time</td>
<td width="215" bgcolor="#FFFFFF">Monday</td>
<td width="215" bgcolor="#FFFFFF">Tuesday</td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF">9-10 am</td>
<td> </td>
<td>Lecture</td>
</tr>
<tr>
<td height="23" bgcolor="#FFFFFF">10-11 am</td>
<td>lecture</td>
<td>Lab</td>
</tr>
</table>
</div>
</aside>
<!--The main page content -->
<main><!-- TemplateBeginEditable name="mainContent" -->
<article>
<!--Content node -->
<div class="header">
<h1>Week 3: Tables, link images, quoting text </h1>
</div>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3. </p>
</article>
<article>
<div class="header">
<h1>Week 2</h1>
</div>
<p>PS: ADD COMMENTS ABOUT WEEK 2.</p>
</article>
<article>
<div class="header">
<h1>Week 1</h1>
</div>
<p>ADD COMMENTS ABOUT WEEK 1. </p>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3</p>
</article>
<!-- TemplateEndEditable --></main>
<div id="right_side_note">
<div class="post"><!-- TemplateBeginEditable name="SideNotes" -->
<h2>Notes</h2>
<p class="date">March 22, 2011</p>
<p>The W3C defines HTML and CSS as follows:</p>
<blockquote>
<p>HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages. <br>
<cite>W3C standards for web </cite></p>
</blockquote>
<!-- TemplateEndEditable --></div>
</div>
<div id="footer">
<!--Footer content -->
<p class="footer-text">© 2013 Daniel Biakath /University of Brighton.</p>
</div>
</div>
</div>
<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html>
<code>
- Sie tun sollten 2 unterschiedliche css-Seiten, und rufen jeden von Ihnen in der richtigen Seite.
- Yh mate ich dachte darüber nach .. aber Wie dann, und verknüpfen Sie die neuen css-Seite, auf der about-Seite nur ..
- Er hat gerade erklärt, dass, wenn er sagte: "rufen Sie Sie in der richtigen Seite". Wenn Sie ein Muster benötigen, wie im link zur CSS-Dateien sollten Sie die Antwort unten.
- Statt dem Bild, sollten Sie den HTML-Code für jede Seite.
- Ok ich Mach das jetzt
Du musst angemeldet sein, um einen Kommentar abzugeben.
Erstellen Sie zwei separate CSS-Dateien, und legen Sie die Stile für jede Seite in separaten Dateien, darüber sagen.css-und.css. Aus der about-Seite, link auf die info.css und aus dem Homepage-link auf der Startseite.css.
Einen CSS-link sollte in etwa so Aussehen:
CSS-Dateien geladen werden, um, so müssen Sie Rücksicht nehmen, wenn Stile sollen, überschreiben sich gegenseitig. Wenn im folgenden erklärt wird, in den Kopf und beide Dateien haben ein Format mit dem gleichen Namen, die den Stil in der Heimat.css-Datei verwendet werden. Sie könnten nicht sehen, änderungen an den über.css ist dies der Fall. Die wichtigsten CSS-Datei aufgeführt werden sollte letzten.
Wenn Ihre Stile sind derzeit inline-und so Aussehen:
können Sie die änderungen in jeder Datei direkt oder, wenn Sie möchten, schneiden Sie alles aus in den tag und legen Sie es in die entsprechende css-Datei.
Wenn nach den änderungen an den CSS nichts geschieht, ist es möglich, je nach system, das Sie verwenden, dass der cache ins Spiel kommen. Auch wenn Sie änderungen vornehmen, die version vom web-server bereitgestellt wird, den gleichen. CSS-Dateien scheinen, dies zu tun eine Menge, um mich, wenn ich nicht vorsichtig sind. Wenn das der Fall ist, setzen Sie die website und deaktivieren Sie browser-cache und Sie sollten gut zu gehen.