I am making a website with only two main pages which are "Index" and "About me" pages. After making the templates and everything, I came across a confusing problem where I couldn't really edit the Css style of the about page.
Basically my About and Index page got the same template from my main Html (the one made from scratch) Which i thing it's fine there .. but I would like My About page to have a different look from my Index page, Everytime i make a change on the Editable region that I would like to make disappear from the About page, It also Affects the INdex page. Same for the Stylesheet, I want different colors on the about page but it seems like everytime i do something it affects the whole site.
Here is the picture of the site i made so far.
Homepage and about page
Both pages have the same template, same editable region and the same css and look exactly the same way at the moment but I would like to remove the div class:"notes" from the about page and expand the width of his div id="main-content" change completely almost every even the colors i mean the whole style of the about page, without affecting the Homepage and leave it as it is .. what should I do? Please
Thank you
PS: i am using Dreamweaver cs6.
main dwt html/ same html for the about and index page only difference is the for index and about are not editable
<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><img src="../images/twitter.png" width="20" /></li>
<li><img src="../images/behance.png" width="20" /></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>HOME</li>
<li>ABOUT ME</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>Getting started</li>
<li>Learning more about tags</li>
<li>Learning about lists and tables</li>
</ol>
<h3> Favourites</h3>
<ul>
<li> W3C markup validation service </li>
<li> Web platform Docs - Web development for beginners </li>
<li> Html5 Doctor - Helping you implement HTML5 today </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>
You should create two separate CSS files and put the styles for each page into the separate files, say about.css and home.css. From the about page, link to the about.css and from the home page link to the home.css.
A CSS link should look something like this:
<link rel="stylesheet" type="text/css" href="home.css">
CSS files are loaded in order so you will need to take that into consideration if styles are supposed to override each other. If the following is declared in the head and both files have a style with the same name, the style in the home.css file will be used. You might not be seeing changes made to the about.css if this is the case. The most important CSS file should be listed last.
<link rel="stylesheet" type="text/css" href="about.css">
<link rel="stylesheet" type="text/css" href="home.css">
If your styles are currently inline and look like this:
<style type="text/css">
/*YOUR STYLES HERE*/
</style>
you can make the changes in each file directly or if you want cut everything from inside the tag and put it in the appropriate css file.
If after making changes to your CSS nothing is happening, it is possible, depending on the system you are using, that cache is coming into play. Even though you make changes, the version served by the web server is the same. CSS files seem to do this a lot to me if I'm not careful. If that's the case, reset the website and clear browser cache and you should be good to go.
Related
So I started writing HTML code for a school assignment. I wanted to use HTML5 semantics such as <section>, <article> and so on. But I encountered something peculiar about heading sizes when placed in these tags (see below). I then proceeded to change the semantics back to only HTML that being only <div> and the headings worked fine. I'll post some screen shots to help clarify the situation.
First the Code with <div> tags only
<!DOCTYPE html>
<html>
<head>
<title>
Curriculum Vitae
</title>
</head>
<body>
<div>
<h1>Curriculum Vitae</h1>
</div>
<div>
<h2>Personal Information</h2>
<ul>
<ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
</ul>
</div>
</body>
</html>
The heading sizes appear to work properly within in the div tags
Next is the code using HTML5 semantics
<!DOCTYPE html>
<html>
<header>
<title>
Curriculum Vitae
</title>
</header>
<body>
<article>
<section>
<h1>Curriculum Vitae</h1>
</section>
<section>
<h2>Personal Information</h2>
<ul>
<ol><strong>Name: </strong>Haroon Rasheed Ramay</ol>
</ul>
</section>
</article>
</body>
</html>
Note here in this picture I have used the same heading tags for Curriculum Vitae and Personal Information but the heading sizes seemed to have switched?!
Could someone else please verify whether this appears to be a problem only with me or am I using HTML5 semantic tags in a completely wrong manner which is causing the peculiar behavior of the headings?
P.S. Any links for HTML documentation or tutorials would be awesome (currently I'm learning the course online on udacity & w33schools and in school as a subject)
You're mixing up head and header tags. They are very different.
Every HTML page must have a head tag (although browsers usually insert one if it's missing).
The header tag is used as a heading for the content of the page, as a title or something similar. It's optional and will be inside the body tag; potentially before a article, or some other "main content tag".
I'm probably thinking about this 'oldschool' but what am I missing?
I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.
I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.
In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.
My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:
<div data-role="page">
<div data-role="header">
<h1>MyApp</h1>
</div>
<div data-role="content">
<center>
<p>This is page 2. Click me</p>
</center>
</div>
</div>
Here is my demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function handlePageLoaded() {
$('#loadPage2').on("click",function(){
$.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
// Tried these as well:
//$.mobile.loadPage("pages/page2.php");
//$('#main_content').load("pages/page2.php");
alert ("#loadPage2.onClick()");
return false;
});
};
$(document).ready(handlePageLoaded);
</script>
<title>MyApp</title>
</head>
<body>
<div data-role="page" id="application">
<div data-role="panel" id="menu" data-display="overlay">
<center>
Close<br />
<a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
</center>
</div><!-- /panel -->
<div data-role="header">
<h1>MyApp</h1>
Me
</div>
<div id="main_content" data-role="content">
<center>
<p>This is the landing page.</p>
</center>
</div>
<div data-role="footer"><span class="ui-title" /></div>
</div>
</body>
</html>
I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.
So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?
you can use $.get to get common header
$.get('header.html', {}, function(response){
$('div#nav').append(response);
});
it will load common header in this div
<div id="nav" class="navcontain">
</div
I saw both div and section been used in data-role="page". For example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>This content will be ignored.</p>
<!-- Begin Page 4 -->
<section id="page4" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>External Page!</p>
<p>Go to First Page.</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<!-- End Page 4-->
<h3>This content will be ignored as well.</h3>
</body>
</html>
and
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Facebook Friends</h1>
</div><!-- /header -->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
What's the difference and what is section used for?Will it prevents load contents in it when it is not shown?
SECTION is simply an HTML5 tag. Since HTML5 is relatively new, many developers improperly use it, or you'll see only portions of a project updated to use the new tags while the rest continue to use DIV tags. The code that you have provided that uses SECTION does appear to use it in the proper place and context, just to give you an idea.
Check out this brief article on the SECTION tag and when to use it, don't get the idea that SECTION is just a fancy name for DIV: http://www.impressivewebs.com/html5-section/
Also, it never hurts to check out the specs: http://w3c.github.io/html/sections.html#the-section-element
The short answer to your question, though, is that there is no practical difference - a SECTION tag will behave exactly the same as a DIV tag in terms of how CSS affects it and how you work with it from javascript. The real difference is in how the tags are interpreted when a document outline is created, for example, by a feed reader.
The data-* attributes are a new HTML5 addition (article) that allow you to associate arbitrary data with an HTML element. The data within the attributes can be harnessed by javascript to implement features like tooltips or geolocation data. Formerly, such data had involved hidden child elements or JSON data, or a new AJAX request to fetch such data from the server. Now, javascript can simply read these data attributes to get associated data about a given element. I am not certain how exactly your particular script makes use of the data-role attribute, but it doesn't matter if the attribute is on a DIV, a SECTION, an IMG, or a SPAN insofar as the specification goes.
Here is the code:
<html>
<head>
<title> ATS Business and Games - Home </title>
<link rel="stylesheet" type="text/css" href="formatting.css"/">
<meta name= "description" content="This page has our rules along with links to our external and internal download pages.">
<meta name="keywords" content="ATS ats business and games video tutorials video videos tutorial minecraft">
</head>
<!-------------------------------------------------------------------------------------------------------------------------------->
<body>
<a href="http://atsbusinessandgames.co.cc">
<div class="toper" align="top">
<p style="color:white"> ATS Business and Games <img align="right"
src="http://atsbusinessandgames.co.cc/pictures/business-logo-small-with-tag-line.GIF" alt="ATS Business and Games Logo with tag line"
width=115px height=100px> </p>
</div>
</a>
<!-------------------------------------------------------------------------------------------------------------------------------->
<div class="navt">
<p style="text-align:center;color:white"> Home
</div>
<!-------------------------------------------------------------------------------------------------------------------------------->
<p> <span><b><font size="5" color="black"><h1>Rules for Downloads</h1></b></font>
<font size="4" color="black">Please note that this section is here to protect both us and you.
Proceeding to any download page beyond this assumes that you have read and understood all these rules.
If you have any questions then you may contact us (the link can be found at the bottom of every page).
<!-------------------------------------------------------------------------------------------------------------------------------->
<div class="bottom" align="bottom">
<p style="text-align:center;color:white"> Copyright (C) 2011
<a href="mailto:info#atsbusinessandgames.co.cc?subject=Information Request&body=What information would you like. We will try and get to you as soon
as possible!%0A%0A">Contact Us</a> </p>
</div>
</body>
</html>
So you can see how the formatting looks here is the link to the page:
http://www.atsbusinessandgames.co.cc/Downloads
and here is what the formatting of the page should look like:
http://www.atsbusinessandgames.co.cc/
Can someone please tell me how I can fix the formatting?
Note: I am working on the page so the body code may look a little different (as in more paragraphs). If I make any major changes I'll post them here otherwise right click then left click on view source.
You should refer to ../formatting.css instead of formatting.css in the Downloads part.
Also, there is a " at the end which shouldn't be there, but I don't think it's a problem for any browsers
<link rel="stylesheet" type="text/css" href="../formatting.css"/>
I have been using .NET since beta and HTML since the days of HotDog pro & notepad, using table layout of course. I am FINALLY ready to use only div, li, CSS for the layout, but my question is, what is the proper way to layout pages in VS2010?
When i use table layout its simple and i can visually see what im creating and where the elements are, such as the sample below - how should I do this using div's, etc in VS2010?
<table width="300" border="0" cellpadding="5">
<tr>
<td><img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" /></td>
<td><h2>This is some text to the right of the picture...</h2></td>
</tr>
<tr>
<td colspan="2">Here some text underneath</td>
</tr>
</table>
I would say that you should learn about Css and use divs etc to layout pages.
In my opinion you should not use any WYSIWYG and write the markup from scratch, it's just as fast if you know how.
Or if you want a good basic css framework for dealing with the layout in a grid-like way then try out 960 Grid System.
As for seeing what you are doing I would say use the simplest. open the site in a webbrowser and hit refresh.
Here is an example of a masterpage in ASP.NET MVC that uses the Blueprint CSS framework.
It has two columns next to each other with a footer underneath it.
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<asp:ContentPlaceHolder ID="MetaDescription" runat="server" >
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="MetaKeywords" runat="server">
</asp:ContentPlaceHolder>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"/>
</head>
<%=Html.Flash() %>
<body>
<div id="flash" style="display:none"></div>
<div class="container">
<div id="main" class="span-24 last">
<div class="span-5">
<div id="logo">
</div>
<% Html.RenderAction("MainMenu", "Cms"); %>
</div>
<div class="span-19 last">
<div id="headerTekst">
<div class="padding-30">
<h1 class="right uppercase">Some text</h1>
</div>
</div>
<div class="padding-10">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer" class="span-24 last">
</div>
</div>
</body>
</html>
To write html code you should definetly not use at all Visual Studio. Use Dreamweaver instead.
When designing the page's layout you will get a far better tool with Adobe's Dreamweaver using design view than using Visual Studio.
Only when it's time to program the page to make it dynamic is when you should open your IDE and write code.
For layout I use Firefox with the FireBug plugin. It's gives you real-time feedback. It does not get any better. Once I have the change dialed in, I copy the change in to the html or css in the project.
WYSIWYG programs are fine. It's how I learned. Like everything else, eventually you'll want to know what's happening under the hood.
If you need to use browsers that support HTML 4.01 then go with divs, but if your layouts get too complex you will eventually fall captive to div soup and understanding your markup and making changes will become cumbersome.
If you can use modern browsers that support HTML 5 (or add various hacks to make it work) I would go this route since your markup will have more semantic meaning and be easier to understand. Instead of making a nav like this:
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
You could use HTML5 to have:
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
Or if you were posting blogs instead of doing this:
<div class="post">
<h1>Example Blog Post</h1>
<div class="entry">
<p>Blog text goes here...</p>
</div>
<div class="entryFooter">
<p> Posted in example category.</p>
</div>
</div>
You would write it like this:
<article>
<header>
<h1>Example Blog Post</h1>
</header>
<p>Blog text goes here...</p>
<footer>
<p>Posted in example category.</p>
</footer>
</article>
As you can see it is a lot easier to understand and still gives the structure you are looking for over tables.
To then position everything like you would want I would use CSS3, but again if you need to support older browsers use CSS2.
To do this in VS2010, simply open up the .aspx or .ascx pages and start writing the markup. I find products like Dreamweaver to produce garbage markup when using a designer interface, so the best bet is to write it yourself by hand.
Also, if you do go the HTML5 route and want intellisense in VS2010, here is an addon for it.