PDA

View Full Version : Template Issues


Jim Jakarta
03-16-2009, 03:15 PM
I am trying to build a nice looking website for my company with no budget. Once it is up we have advertisers that will spend money with us and then we will be abel to employ a web designer.

I found a free template that I liked and it was sent to me with three folders; images, index.html and style css. I have opened the index.html in dreamweaver and changed the site to how i would like it. However, I am not sure what to do with the css folder. I found teh dreamweaver club after looking at several sites and the instructions for making a template seem really easy to follow.

I added the editable text area and then saved as mysite_main. When i tried to open in a browser it came up just with all the text and no site parameters or styling. i guess maybe I have not done something with the CSS?

Can anyone help. I am convinced once I have my template page setup I will quickly be able to finish the first stage of the site and learn more as I go along.

Jim

Corrosive
03-16-2009, 04:13 PM
I am trying to build a nice looking website for my company with no budget. Once it is up we have advertisers that will spend money with us and then we will be abel to employ a web designer.

I found a free template that I liked and it was sent to me with three folders; images, index.html and style css. I have opened the index.html in dreamweaver and changed the site to how i would like it. However, I am not sure what to do with the css folder. I found teh dreamweaver club after looking at several sites and the instructions for making a template seem really easy to follow.

I added the editable text area and then saved as mysite_main. When i tried to open in a browser it came up just with all the text and no site parameters or styling. i guess maybe I have not done something with the CSS?

Can anyone help. I am convinced once I have my template page setup I will quickly be able to finish the first stage of the site and learn more as I go along.

Jim

Have you defined your site in 'manage sites'? Also, have you saved the page as a .dwt file?

Jim Jakarta
03-16-2009, 04:30 PM
I had not done anything in manage sites but i have now done that. When i save as template it becomes a .dwt file. Again when i try to view in a browser it says no editable areas and then when i press ok and it opens then it just comes up as all text. Sorry if my questions are very basic but this is all new to me.

I have pasted the code below. Not sure if that helps or not or if I should be doing some thing with the css file that came with the template that is now in a seperate folder

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Viva Asia; Travel &amp; Food</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/style.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<div id="container">
<div id="top_panel">
<div id="header">
<div id="site_title">Viva Asia </div>
<div id="slogan">TRAVEL &amp; FOOD </div>
</div>
</div>
<div id="menu">
<ul>
<li><a href="http://www.vivaasiamagazine.com/" class="current">Home</a></li>
<li><a href="http://www.vivaasiamagazine.com/about.html">About Us </a></li>
<li><a href="http://www.vivaasiamagazine.com/travel.html">Travel</a></li>
<li><a href="http://www.vivaasiamagazine.com/wine.html">Wine &amp; Drinks </a></li>
<li><a href="http://www.vivaasiamagazine.com/recipes.html">Recipes</a></li>
<li><a href="http://www.vivaasiamagazine.com/hotels">Hotels</a></li>
<li><a href="http://www.vivaasiamagazine.com/advertise" class="lastmenu">Advertise</a></li>
</ul>
</div>
<div id="content">
<div id="content_left">
<div class="tempaltemo_content_left_section_01">
<div class="section_01_two_col"> <a href="http://www.vivaasiamagazine.com/"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_01.jpg" alt="" /></a> </div>
<div class="section_01_two_col">
<div class="section_01_box">
<h4>Featured Articles </h4>
<img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_02.jpg" alt="" /> <a class="section_01_box_title" href="http://www.vivaasiamagazine.com/">Free Website Template</a><br />
This is a FREE CSS template provided by TemplateMo website. You may apply this layout for any of your websites. </div>
<div class="section_01_box"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_03.jpg" alt="" /> <a class="section_01_box_title" href="http://www.vivaasiamagazine.com/">Donec mollis aliquet</a><br />
Hello friend, Credit goes to <strong>PublicDomainPictures</strong> for some photos used in this layout. Special Thanks to <strong>s.OliverImages</strong> for fashion photos.</div>
</div>
<div class="cleaner">&nbsp;</div>
</div>
<div class="cleaner_with_height">&nbsp;</div>
<div class="tempaltemo_content_left_section_02">
<div class="section_02_box">
<h3>Wine of the Month </h3>
<div class="section_02_box_content"> <a href="http://www.vivaasiamagazine.com/"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_04.jpg" alt="" /></a> <a class="section_02_box_content_title" href="http://www.vivaasiamagazine.com/">Lorem ipsum nunc</a><br />
<a href="http://www.vivaasiamagazine.com/">Maecenas adipiscing vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. </a>
<ul>
<li>Lorem ipsum nunc quis sem dolor sit amet.</li>
<li>Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum.</li>
</ul>
</div>
</div>
<div class="section_02_box">
<h3>Chefs Talk </h3>
<div class="section_02_box_content"> <a href="http://www.vivaasiamagazine.com/"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_06.jpg" alt="" /></a> <a class="section_02_box_content_title" href="http://www.vivaasiamagazine.com/">Nulla sed leo sed</a><br />
<a href="http://www.vivaasiamagazine.com/">Nulla sed leo sed sapien sagittis aliquet. Vivamus vestibulum condimentum massa.</a>
<ul>
<li>Donec a purus vel purus sollicitudin placerat.</li>
<li>Sed pretium, neque hendrerit rhoncus accumsan.</li>
</ul>
</div>
</div>
</div>
<div class="cleaner_with_height">&nbsp;</div>
<div class="tempaltemo_content_left_section_02">
<div class="section_02_box">
<h3>Whats New </h3>
<div class="section_02_box_content"> <a href="http://www.vivaasiamagazine.com/"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_07.jpg" alt="" /></a> <a class="section_02_box_content_title" href="http://www.vivaasiamagazine.com/">Sed pretium neque</a><br />
<a href="http://www.vivaasiamagazine.com/">Sed pretium, neque hendrerit rhoncus accumsan, nibh tellus pharetra neque, quis rutrum elit justo vitae.</a>
<ul>
<li>Lorem ipsum nunc quis sem dolor sit amet.</li>
<li>Curabitur eleifend congue leo.</li>
</ul>
</div>
</div>
<div class="section_02_box">
<h3>City Guides </h3>
<div class="section_02_box_content"> <a href="http://www.vivaasiamagazine.com/"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_08.jpg" alt="" /></a> <a class="section_02_box_content_title" href="http://www.vivaasiamagazine.com/">Donec a purus vel</a><br />
<a href="http://www.vivaasiamagazine.com/">Donec a purus vel purus sollicitudin placerat. Nunc at sem. Sed pellentesque placerat augue.</a>
<ul>
<li>Nunc at sem. Sed pellentesque placerat.</li>
<li>Mauris pede nisl, placerat nec, lobortis vitae.</li>
</ul>
</div>
</div>
</div>
<div class="cleaner_with_height">&nbsp;</div>
<div class="tempaltemo_content_left_section_03">
<h1> Events</h1>
<div class="section_03_box">
<h4>Cheese Dinner </h4>
<a href="http://www.vivaasiamagazine.com/"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_10.jpg" alt="" /></a>
<p> <a href="http://www.vivaasiamagazine.com/">Lorem ipsum nunc quis sem dolor sit amet.</a> </p>
</div>
<div class="section_03_box">
<h4>Earth Day </h4>
<a href="http://www.vivaasiamagazine.com/"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_09.jpg" alt="" /></a>
<p> <a href="http://www.vivaasiamagazine.com/">Curabitur eleifend congue leo.</a> </p>
</div>
<div class="section_03_box">
<h4>Thai Food </h4>
<a href="http://www.vivaasiamagazine.com/"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_11.jpg" alt="" /></a>
<p> <a href="http://www.vivaasiamagazine.com/">Sed pellentesque placerat augue. </a> </p>
</div>
<div class="section_03_box">
<h4>Wine Dinner </h4>
<a href="http://www.vivaasiamagazine.com/"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_12.jpg" alt="" /></a>
<p> <a href="http://www.vivaasiamagazine.com/">Donec a purus vel purus sollicitudin placerat. </a> </p>
</div>
<div class="cleaner">&nbsp;</div>
</div>
</div>
<div id="content_right">
<div class="content_right_section_01">
<center>
ADVERTISEMENT
</center>

<a href="http://www.vivaasiamagazine.com/9.html"><img src="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/images/image_13.jpg" alt="" /></a> </div>
<div class="content_right_section_01">
<h2>Subscribe to Viva Asia </h2>
<form method="get" action="http://www.vivaasiamagazine.com/">
<p>
<input type="checkbox" name="maillist" />
Weekly Update of upcoming events </p>
<p>
<input type="checkbox" name="maillist" />
Electronic Version of Viva Asia </p>
<p>
<input type="checkbox" name="maillist" />
Please contact me. I would like to arrange subscription to the hard copy of Viva Asia.</p>
<p>
<input name="email_address" type="text" id="email_addremss" value="email address..." />
<input type="submit" name="Submit" value="Subscribe" />
</p>
</form>
</div>
<div class="content_right_section_01">
<h2>Your Guide</h2>
<div class="blog_box">
<h5><a class="section_01_box_title" href="http://www.vivaasiamagazine.com/hotels.html">HOTELS</a></a></h5>
<a href="http://www.vivaasiamagazine.com/hotels.html">Search for Hotels here</div>
<div class="blog_box">
<h5><a href="http://www.vivaasiamagazine.com/restaurants.html">RESTAURANTS</a></h5>
<a href="http://www.vivaasiamagazine.com/restaurants.html">Search for Restaurants here</div>
<div class="blog_box">
<h5><a href="http://www.vivaasiamagazine.com/bars.html">BARS &amp; NIGHTCLUBS</a></h5>
<a href="http://www.vivaasiamagazine.com/bars.html">Search for Bars & Nightclubs here</div>
<div class="blog_box">
<h5><a href="http://www.vivaasiamagazine.com/golf.html">GOLF COURSES </a></h5>
<a href="http://www.vivaasiamagazine.com/golf.html">Search for Golf Courses here</div>
</div>
<div class="content_right_section_01">
<h2>Travel Offers </h2>
<div class="sister_links_box">
<h5>Past Editions </h5>
<a href="http://www.vivaasiamagazine.com/">Viva Asia Edition 8 </a><br />
<a href="http://www.vivaasiamagazine.com/">Viva Asia Edition 7 </a><br />
<a href="http://www.vivaasiamagazine.com/">Viva Asia Edition 6 </a><br />
<br />
</div>
<div class="sister_links_box">
<h5><br />
</h5>
</div>
<div class="cleaner">&nbsp;</div>
</div>
<div class="content_right_section_01"> <a target="_blank" href="http://validator.w3.org/check?uri=referer"></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"></a> </div>
</div>
<div class="cleaner">&nbsp;</div>
</div>
<div id="footer"> <a href="http://www.vivaasiamagazine.com/">Home</a> | <a href="http://www.vivaasiamagazine.com/about.html">About Us </a> | <a href="http://www.vivaasiamagazine.com/articles.html">Articles</a> | <a href="http://www.vivaasiamagazine.com/hotels.html">Hotels</a> | <a href="http://www.vivaasiamagazine.com/advertise.html">Advertise</a> | <a href="http://www.vivaasiamagazine.com/contact.html">Contact Us </a><br />
Copyright 2008 <a href="http://www.origomedia.com/"><strong>Origomedia</strong></a>
</div>
</div>
</body>
</html>

Corrosive
03-16-2009, 04:39 PM
Where you've got this...

<link href="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/style.css" rel="stylesheet" type="text/css" />

It is referencing a file on your hard drive and not in your site structure. I'd expect to see something like...

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">

Have you read the manual you got with Dreamweaver? Pay particular attention to how you manage sites and how to attach a stylesheet correctly.

Jim Jakarta
03-16-2009, 04:56 PM
Ok thanks. The manual is at the office so I will have to have a look at it tomorrow and work out how to get the css file across into the manage sites area. Appreciate your help

Jim Jakarta
03-16-2009, 06:13 PM
I have managed to get all the images and the css in the right places and now when I look at it in the browser it all works. Appreciate your direction and assistance.

One last really stupid thing that I can't seem to find in any of teh drop down menus. I want to but a black line around teh outside of the whole site so that the text in the editable area is not just hanging there. Is there a really simple function that i can click on the whole outline of teh page in the design tab and then just click on a function to make it have an outline; like you would in excel to create a box. Thanks its after midnight here and i think I have sercahed all my menus but can't find it.

Here is the final code for the template page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>Viva Asia; Travel &amp; Food</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/style.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="top_panel">
<div id="header">
<div id="site_title">Viva Asia </div>
<div id="slogan">TRAVEL &amp; FOOD </div>
</div>
</div>
<div id="menu">
<ul>
<li><a href="http://www.vivaasiamagazine.com/" class="current">Home</a></li>
<li><a href="http://www.vivaasiamagazine.com/about.html">About Us </a></li>
<li><a href="http://www.vivaasiamagazine.com/travel.html">Travel</a></li>
<li><a href="http://www.vivaasiamagazine.com/wine.html">Wine &amp; Drinks </a></li>
<li><a href="http://www.vivaasiamagazine.com/recipes.html">Recipes</a></li>
<li><a href="http://www.vivaasiamagazine.com/hotels">Hotels</a></li>
<li><a href="http://www.vivaasiamagazine.com/advertise" class="lastmenu">Advertise</a></li>
</ul>
</div>
<div id="content">
<div id="content_left"><!-- TemplateBeginEditable name="EditRegion3" -->EditRegion3<!-- TemplateEndEditable --></div>
<div id="content_right">
<div class="content_right_section_01">
<center>
ADVERTISEMENT
</center>

<a href="http://www.vivaasiamagazine.com/9.html"><img src="images/image_13.jpg" width="303" height="237" /></a> </div>
<div class="content_right_section_01">
<h2>Subscribe to Viva Asia </h2>
<form method="get" action="http://www.vivaasiamagazine.com/">
<p>
<input type="checkbox" name="maillist" />
Weekly Update of upcoming events </p>
<p>
<input type="checkbox" name="maillist" />
Electronic Version of Viva Asia </p>
<p>
<input type="checkbox" name="maillist" />
Please contact me. I would like to arrange subscription to the hard copy of Viva Asia.</p>
<p>
<input name="email_address" type="text" id="email_addremss" value="email address..." />
<input type="submit" name="Submit" value="Subscribe" />
</p>
</form>
</div>
<div class="content_right_section_01">
<h2>Your Guide</h2>
<div class="blog_box">
<h5><a class="section_01_box_title" href="http://www.vivaasiamagazine.com/hotels.html">HOTELS</a></a></h5>
<a href="http://www.vivaasiamagazine.com/hotels.html">Search for Hotels here</div>
<div class="blog_box">
<h5><a href="http://www.vivaasiamagazine.com/restaurants.html">RESTAURANTS</a></h5>
<a href="http://www.vivaasiamagazine.com/restaurants.html">Search for Restaurants here</div>
<div class="blog_box">
<h5><a href="http://www.vivaasiamagazine.com/bars.html">BARS &amp; NIGHTCLUBS</a></h5>
<a href="http://www.vivaasiamagazine.com/bars.html">Search for Bars & Nightclubs here</div>
<div class="blog_box">
<h5><a href="http://www.vivaasiamagazine.com/golf.html">GOLF COURSES </a></h5>
<a href="http://www.vivaasiamagazine.com/golf.html">Search for Golf Courses here</div>
</div>
<div class="content_right_section_01">
<h2>Travel Offers </h2>
<div class="sister_links_box">
<h5>Past Editions </h5>
<a href="http://www.vivaasiamagazine.com/">Viva Asia Edition 8 </a><br />
<a href="http://www.vivaasiamagazine.com/">Viva Asia Edition 7 </a><br />
<a href="http://www.vivaasiamagazine.com/">Viva Asia Edition 6 </a><br />
<br />
</div>
<div class="sister_links_box">
<h5><br />
</h5>
</div>
<div class="cleaner">&nbsp;</div>
</div>
<div class="content_right_section_01"> <a target="_blank" href="http://validator.w3.org/check?uri=referer"></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"></a> </div>
</div>
<div class="cleaner">&nbsp;</div>
</div>
<div id="footer"> <a href="http://www.vivaasiamagazine.com/">Home</a> | <a href="http://www.vivaasiamagazine.com/about.html">About Us </a> | <a href="http://www.vivaasiamagazine.com/articles.html">Articles</a> | <a href="http://www.vivaasiamagazine.com/hotels.html">Hotels</a> | <a href="http://www.vivaasiamagazine.com/advertise.html">Advertise</a> | <a href="http://www.vivaasiamagazine.com/contact.html">Contact Us </a><br />
Copyright 2008 <a href="http://www.origomedia.com/"><strong>Origomedia</strong></a>
</div>
</div>
</body>
</html>

Corrosive
03-16-2009, 06:19 PM
Hi, would you mind wrapping your code in tags so that it is easier to view please? Thanks.

Now, find the CSS style (in your stylesheet) that relates to #container. Click on this and edit the style. Add a 1px, solid border to the style and it should wrap your site in a border *shudder* Excel style.

Corrosive
03-16-2009, 06:22 PM
You've still got this in your html by the way

<link href="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/style.css" rel="stylesheet" type="text/css" />

You've referenced the stylesheet correctly so you can delete this line.

Jim Jakarta
03-17-2009, 11:04 AM
Well slogged on during the day today and have managed to work out how to work out to work the templates and managed to upload the site. www.vivaasiamagazine.com problem is now for some reason when i look at it in safari the events section at the bottom is slightly on top of the bottom bar/footer and my friend says in IE6 the right hand section has dropped and in IE7 the back ground is grey. So just when I thought I was on top of it all :)

edbr
03-18-2009, 02:30 AM
Hi there
you still have
<link href="file:///Macintosh HD/Users/Mel/Desktop/Viva Website/style.css" rel="stylesheet" type="text/css" />
but you have code for container in your page . be careful of this as it can lead to conflicts. change the link to
<link href="style.css" rel="stylesheet" type="text/css" />
and make your changes in that file.
so far your doing ok BTW as yoour in DJK and im in ali give me a shout sometime

Jim Jakarta
03-18-2009, 02:48 AM
Thanks for the info. I come down to Bali every couple of weeks so will certainly catch up soon. i think I may have stuffed up a bit overnight. I used a free CMS system called http://www.cushycms.com which seems very good. But now I have just started to realise that while it is nice so that I can edit each page and image outside of the dreamweaver i think that i will have problems when i change my template in dreamweaver and then update all the pages linked to that template as it looks like the images i upload while appaering in the site do not actually go back to my dreamweaver files on teh server. If that makes sense

edbr
03-18-2009, 04:06 AM
yes it sounds like an accident waiting to happen. Frankly i would get your site where yo want it before venturing into cms.
alternatively give up on the dw templates i dont like them prsonally so thats easy for me to say.

another the route you want maybeto be looking at joomla of drupal,

Jim Jakarta
03-18-2009, 04:49 AM
I have just downloaded joomla but cannot work out what to click on to install it :) Am now waiting for a registration email to try the demo version. Am I going to have problems copying my current layout across as I like the layout i have now?

edbr
03-18-2009, 05:11 AM
yes you probanbly will.you know i think you are jumping the gun a bit i would advise you to work on ayour site for now. if you want to use cms this will give you problems. if cms is essential to you then without a budget and without too much experience then jookla might be the answer for mow.
Joomla is free and there are many templates of basic design for free also but i feel you are trying to run too fast.
It is a lot to expect you to create a cms or even adapt a system using a template as you have . i can see you want it for adding advertising and links which is why i suggested joomla .

have a look at mambo hut for free templates and yahoogle joomla free templates to see if there is something available you could use