Hi I am new to web programming. I want to create a template sort of css where all the pages look the same except the content of the pages.
So I have a logo and some tabs at the top where you can navigate the website, but the content of the pages would be different (contact, about, info.etc).
How do I go about creating this template?
You might want to try building your template page in plain HTML + CSS, and then using simple PHP includes to build your pages. You could, for example, break your page into two separate files:
header.php:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
and footer.php:
</div>
</body>
</html>
And then, for any files that use that template, you'd use something like this:
<?php include("header.php"); ?>
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
<?php include("footer.php"); ?>
So then if someone visited the previous file (let's say it's called index.php), then the files would be assembled and the final HTML output would look something like:
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<div id="main-content">
<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>
</div>
</body>
</html>
Just make sure you have PHP running on your server, or this won't work at all. Also, if you want to develop your site locally, I'd recommend using XAMPP to get a local Apache host.
You have a look at some of the many template sites - e.g. http://www.freecsstemplates.org/ or http://www.freecsstemplates.com/. Chances are you'll find something close to what you want to achieve.
I suggest starting with a paper sketch. Just draw boxes for the different areas each page will have... like Logo, Header, Content, Footer, etc. There's many ways to approach this initial stage. Here's one explanation of the gray box method.
Once you have a rough idea like this, create 1 sample page. You can fill in the content with lorum ipsum. Get the CSS to how you like it, and make sure that each section of the page (roughly each box in your rough sketch) is in it's own unique div (id = "...").
Once you have all of this set up, you'll have your CSS file ready to go.
To create your template HTML file, just take the HTML page you've been working on and delete all the lorum ipsum.
CSS Zen Garden is a great place to look for CSS inspiration.
If you're a beginner, I could suggest trialing Adobe Dreamweaver and looking at using DreamWeaver (.dwt) Templates. It's really, really easy to use and it allows you to create 1 master (template) file with editable parts.
If you have Visual Studio, MasterPages do a similar job!
Good luck and welcome to the Web Development world!
Related
So I've just published a website for the first time and I've come up with a problem. It looks like that the _Layout.cshtml page and the views conflicts with each other, because it doesn't load all of the CSS and JS. I get a few errors in the console tab which says:
"
HTML1503: Unexpected start tag,
HTML1512: Unmatched end tag,
HTML1506: Unexpected token.
"
When I go to the source of the page where the error occurs, the layout and the view page are combined together, it gives the error at the seconds head tags. The first first head tag is the one from the Layout page and the second head tags is from the view page. Thus having 2 head tags in 1 page and it conflicts.
Is there something I missed before publishing? Because on localhost it runs fine without these conflicts.
Hope someone can help me, thanks in advance! :)
I recommend you read through this MSDN article on Layout pages using Razor.
It sounds like you're repeating your header information.
From the article,
Many websites have content that's displayed on every page, like a
header and footer, or a box that tells users that they're logged in.
ASP.NET lets you create a separate file with a content block that can
contain text, markup, and code, just like a regular web page. You can
then insert the content block in other pages on the site where you
want the information to appear. That way you don't have to copy and
paste the same content into every page.
In other words, the layout page has all of the markup that you want repeated on every page. This way, you don't have to repeat it manually.
A content page can have multiple sections, which is useful if you want
to use layouts that have multiple areas with replaceable content. In
the content page, you give each section a unique name. (The default
section is left unnamed.) In the layout page, you add a RenderBody
method to specify where the unnamed (default) section should appear.
You then add separate RenderSection methods in order to render named
sections individually.
Since each page is likely to have multiple sections, you can use the RenderSection method to differentiate them in your layout.
Here's an example from the article:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
#RenderSection("header", required: false)
</div>
<div id="main">
#RenderBody()
</div>
</body>
</html>
As you can see, any header information will be loaded using the RenderSection method. On your view, you would define that section using code similar to this:
#section header {
<div>
This content will only repeat on the page that it is declared in.
</div>
}
So, when you run it, you'll get:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
<div>
This content will only repeat on the page that it is declared in.
</div>
</div>
<div id="main">
...
</div>
</body>
</html>
The required:false part of #RenderSection("header", required: false) means that you do not have to include the Section "header" in every view that uses the layout. It is optional. If you do not have required set to false, it will be required that you declare it on every page that uses the layout.
On a side note, make sure you only declare your css and javascript that in only one of these locations, preferably the layout page if it is going to be repeated. This does not mean, however, that you cannot have css and javascript in both. For example, if you are using bootstrap in your project, you would include that in your layout page so that you do not repeat the inclusion throughout your views. But, you may, for example, include a view specific javascript file in only your view and not the layout.
I'm trying to build a basic documentation site using asciidoctor. One thing I am struggling with is how I can inject a standard site header (a banner with a logo and top-level navigation) into each documentation page.
I render my asciidoc directly to html from the command line. I have tried to find a way to somehow inject an extra div element and position it fixed at the top, but I can't figure out what mechanism to use for this. My early attempts involved using docinfo.html but that gets injected into the html in the <head> element, instead of the <body>.
I am aware that full-on publication systems like Jekyll allow me to configure "front matter" that can probably take care of this, but I was hoping there was a mechanism or trick using vanilla asciidoctor that can achieve this.
Ted Bergeron on the Mailing List mentioned a simple project:
Demo website created just using Asciidoctor.
Check the corresponding repo to see the files and how to create the site (just using one command).
In summary: simply create a header asciidoc file that includes your site nav (in the demo site this is done using table markup), without including a level-0 (document) title. Include this header file right at the top in every page of your site. Then render by just running asciidoctor *.txt on your project.
--embedded option + simple post processing
With this option, asciidoctor generates only the interior part of the <body> element.
For example:
main.adoc
= Super title
== Second level
asdf
== Also second level
qwer
then:
asciidoctor --embedded main.adoc
produces:
main.html
<div class="sect1">
<h2 id="_second_level">Second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>asdf</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_also_second_level">Also second level</h2>
<div class="sectionbody">
<div class="paragraph">
<p>qwer</p>
</div>
</div>
</div>
You can then just cat a header and closing footer, and you are done.
Tested with Asciidoctor 2.0.10.
Let's say all of my html pages will have a top bar and banner with the same content.
Rather than copy the code for these content on all html pages, is it possible to have pages inherit the content from a base html page?
For example : base.html can have the top bar, banner, etc (all repeated content)
Remaining pages (index.html, about.html, etc) can inherit the content from base.html and then add more content.
Is this possible in html or do I have to copy and paste repeating content all the time?
In this situations (as far as I know)
You can use template based editors like Dreamweaver
You can use framesets (don't use them)
You can use iframe (meh.)
You can convert your files to PHP and just use a single include command (Y)
Copy and paste whole thing and when you get 100 pages, try to add a new menu...
I'd like to see other solutions too.
Example:
Lets say I've created a template.html it's something like
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
<div class="content">
unique content here
</div>
</body>
</html>
Allright this is my one html file. Lets take top section of the page. Menu will be same but content will be changed so this is top of the page:
<html>
<head>
<title>asd</title>
style tags keywords bla bla bla
</head>
<body>
<div class="menu">
yeah I've my menu here well designed
</div>
Save this part as top.php Now let's see what have we left:
<div class="content">
unique content here
</div>
</body>
</html>
This will be our post page. But how can we get codes from top.php? Just like that:
<?php include("top.php"); ?>
<div class="content">
unique content here
</div>
</body>
</html>
Now, save this as page1.php BINGO! You did not wrote anthing about menu but include method will bring it for you.
Include basically writes everything from a file to another. You can check differences for include_once, require, require_once too.
Allright, we've created our first page. What about second one? Exactly the same:
<?php include("top.php"); ?>
<div class="content">
my second page here
</div>
</body>
</html>
Save this as page2.php
Well, you need to change your menu now but there are two pages, two hundred pages, two million pages... Who cares. Just change top.php that's all.
Please note that in this codes; top.php, page1.php and page2.php are in SAME directory. If you want to include from another path, you must use for example:
<?php include("../top.php"); ?>
//OR
<?php include("myFiles/theme/top.php); ?>
depending on your path.
I hope this helps. Read PHP guides for include. It's really easy.
You need a testing server (or you can use a local server like WAMP, XAMP etc.) to execute PHP files.
You can create template page and include it to the all new pages as javascript
<script type="text/javascript" src="includes/template.js"> </script>
Same way with php - using include
I just go through the bootstrap framework, its a grid based css framework but I dont know how implement in IBM Websphere Portal 8.
code
<!DOCTYPE html>
<body class="lotusui30dojo tundra locale_en">
<div class="wpthemeFrame">
<header role="banner">
<div class="wpthemeHeader">
<a rel="dynamic-content" href="dyn-cs:id:customTheme_preview"></a>
<div class="wpthemeInner">
<div class="wpthemeLogo wpthemeLeft">
I suggest you to create a normal static HTML Prototype using Bootstrap. Once you make sue it's working properly (in responsive manner) you can start porting the source code to Portal. There are 3 parts:
First you have to copy paste the html part other than the middle content area (ie. the header part and the footer part) into theme_en.html in your custom folder. Then replace the css and JS links header part with
Then replace blocks of code with appropriate Dynamic Spot contents (JSP files). For instance something like,
<a rel="dynamic-content" href="res:/customTheme/themes/html/dynamicSpots/banner.jsp"></a>
Also, please make sure at the end of page you have this,
<div class="wpthemeComplementaryContent" id="wpthemeComplementaryContent" role="region" aria-labelledby="wpthemeComplementaryContentText">
<span class="wpthemeAltText" id="wpthemeComplementaryContentText" >Complementary Content</span>
<a rel="dynamic-content" href="co:config"></a>
</div>
Now we have to take the layout structure from the middle part of HTML area and use it for creating a Template Layout. Remember, in each template layout we have to keep the div for hidden widgets. Better way is to copy one existing layout.html file from Template Layouts and rename it and modify in that. If you are using Bootstrap, you don't have to use default WP classes. But few must be integrated, like DndRow,DndColumn, Componet-Container etc.
Now for each page specific styling, you can manage in Presentation template.
Is there any alternative for using a frame. I'm just a beginner and I still don't know what the web designers are doing.
Almost all of the websites I see. Retains the header in the page. How can I apply that so I can stop from using frames.
Use a server-side language like PHP in order to generate a full HTML page.
For example, create three files:
header.php
page.php
footer.php
In the header.php file you have to put the first part of the HTML page.
In the page.php file you have to put the main content of the HTML page.
In the footer.php file, like the header.php, you have to put the end part of the HTML page.
So you can change the page file and the header and the footer remain.
header.php:
<html>
<head>
</head>
<body>
<div id="header">
Place your header here.
</div>
page.php:
<?php include('header.php'); ?>
<div id="main_content">
Place your page content here.
</div>
<?php include('footer.php'); ?>
footer.php:
<div id="footer">
Place your footer here.
</div>
</body>
</html>
For more information, search for a PHP tutorial with Google.
In regards to what you see in most websites, they just reuse the same code.. (usually in an external file and insert it in all their pages)..
Take a look at Server Side Includes for more info
Depending on what you wish to display you could look at using divs or using includes.