...

View Full Version : Using Templates? Dreamweaver



xxnonamexx
07-25-2011, 07:25 PM
Hi I have been using dreamweaver to design websites and it has been very useful. I was wondering what is a general template outline for a website as far as positioning, margins etc. I think it would help me alot make more websites if I got the general template format. Dreamweaver gives general formats but I find them a bit useless to use and better to go from scratch. Thanks

Sammy12
07-25-2011, 07:27 PM
*** Layouts
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

fixed: set the content to 960px and use margin: auto;. this technique centers your content with a width of 960px (believed to be the "worst-case" scenario where the user's screen is or slightly greater than 960px").

fluid: using % to create a page that is "full screen". this method works on all widths and heights and adjusts accordingly. one must create gutters to stall collapsing of elements, and is quite difficult for beginning developers. http://www.maxdesign.com.au/articles/liquid/

elastic: using a base % font, then using ems for resizability options. using ems however I believe is a bit outdated now, since most browsers can px. http://www.alistapart.com/articles/elastic/


*** Footers
natural: let the footer naturally fall underneath the content

sticky: stick the footer to the bottom of the page http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

xxnonamexx
07-25-2011, 11:54 PM
Very Interesting. Please check my other link below regarding my webpage not displaying properly in IE9. I would like to know your views on the site I designed using Dreamweaver from scratch no template. www.philipsalon.com I just launched it.

I checked your links briefly and read the pros and cons but wanted to see what you think of the site I created. Using a fixed layout as mentioned about where in the code would I put the "960px" etc values Thanks

Sammy12
07-26-2011, 07:28 PM
your site looks great man. The background images look like you took them in your backyard though :D

script wise, your site is going to run in many more severe problems than ie9. you can't use position: absolute relative to the body. its going to display very differently in different browsers as well as computers. I would suggest that you use floats to make a website rather than absolute main elements

---

I would suggest making a <h1> tag also.

Many people don't think this is worth-while, but I actually think search engines are very picky about h1.



h1 {
display: none;
}




<h1>
Philip Salon
</h1>

xxnonamexx
07-26-2011, 07:32 PM
Thanks but look now I had to make changes per client request now he doesn't like his changes lol. I need to revert them back to the way you viewed them when I posted. Hes driving me crazy with the home page hes making it not look like a nice website home page. I told him personally I do not like his taste of having no hair models how would one know its a salon lol. The images are all taken inside the salon.

Sammy12
07-26-2011, 07:37 PM
make a <div class="page"></div> right the body that wraps all your content



<body>
<div class="page">
<div class="appDiv">
</div>
<!-- Rest of Content Here -->
</div>
</body>




.page {
width: 960px;
margin: auto;
}


was your content centered or full screen. I can't remember. Just heed the warning, the page will have a lot of problems in the future

xxnonamexx
07-26-2011, 07:41 PM
You are a wealth of information and that is what I was afraid of browsers not liking each other. How do I go about placing what you mentioned? div class page do I place that script on top of each page as well as .page? Rest of content here is that where I place all of the website data? h1 tag only goes on each side of Philip Salon on each page? Thanks

Sammy12
07-26-2011, 07:49 PM
you place .page below the body tag, wrapping everything below it. it goes on every page, as well as the h1 tag



<body>
<div class="page">
<h1 style="display: none;">Philip Salon - Best hair care products</h1>
<div id="apDiv24"><img src="Images/header.jpg" width="1100" height="310" border="3"></div>
<div id="apDiv33"><img src="Images/philip salon outside.jpg" width="600" height="400"></div>
<div id="apDiv42"><link rel="stylesheet" href="mbcsmb73g0.css" type="text/css">
<script type="text/javascript" src="mbjsmb73g0.js"></script><div id="BtnMenuContainermb73g0"></div>
<link rel="stylesheet" href="mbcsmb73g0.css" type="text/css">


<ul id="mb73g0ebul_table" class="mb73g0ebul_menulist" style="width: 441px; height: 35px;">
<li class="spaced_li"><a href="http://www.philipsalon.com"><img id="mbi_mb73g0_1" src="mb_home.gif" name="mbi_mb73g0_1" width="68" height="35" style="vertical-align: bottom;" border="0" alt="Home" title=""></a></li>
<li class="spaced_li"><a href="http://www.philipsalon.com/aboutus.html"><img id="mbi_mb73g0_2" src="mb_about_us.gif" name="mbi_mb73g0_2" width="93" height="35" style="vertical-align: bottom;" border="0" alt="About Us" title=""></a></li>
<li class="spaced_li"><a href="http://www.philipsalon.com/services.html"><img id="mbi_mb73g0_3" src="mb_services.gif" name="mbi_mb73g0_3" width="85" height="35" style="vertical-align: bottom;" border="0" alt="Services" title=""></a></li>
<li class="spaced_li"><a href="http://www.philipsalon.com/products.html"><img id="mbi_mb73g0_4" src="mb_products.gif" name="mbi_mb73g0_4" width="90" height="35" style="vertical-align: bottom;" border="0" alt="Products" title=""></a></li>
<li><a href="http://www.philipsalon.com/directions.html"><img id="mbi_mb73g0_5" src="mb_directions.gif" name="mbi_mb73g0_5" width="101" height="35" style="vertical-align: bottom;" border="0" alt="Directions" title=""></a></li>
</ul>
<script type="text/javascript" src="mbjsmb73g0.js"></script><div id="BtnMenuContainermb73g0"></div></div>
<div id="apDiv43"><img src="Images/waterfire.jpg" width="208" height="313"></div>
<div id="apDiv44"><img src="Images/chair.JPG" width="225" height="338"></div>
<div></div>
<div id="apDiv7"></div>
<p>&nbsp;</p>
</div>
</body>

xxnonamexx
07-26-2011, 07:54 PM
So <div class="page"> after body on every page and <h1> above and below philip salon on every page?

Sammy12
07-26-2011, 07:55 PM
<h1> in this case, should go below the page. it doesn't really matter, since it doesn't display on the page "display: none;". It's just for search engines. look at the code i provided earlier, that's the correct place

----

also remember about



<meta name="keywords" content="hair, philip, salon"/>
<meta name="description" content="Philip Salon provides excellent hair care..."/>


The h1, and these <meta>s provide search optimization. These belong in the <head>.
----

bro, you have <link rel="stylesheet"/> inside a div, it belong in the <head>. I believe any <style type="text/css"> as well as <link> css will not function for any html that is before it. that's why it belongs in the head

xxnonamexx
07-26-2011, 08:00 PM
I made it in dreamweaver and I think they automatically applied it or as I made it they applied it.

Did you ever work with Flash? www.massivetemplayes.com there are free flash templates. I would like to know what program (I use dreamweaver) do you go aboout editing to my style. I always wanted to give flash a shot from a template. Thanks

Sammy12
07-26-2011, 08:04 PM
That made me smile :D I think you should try to make a page that passes w3 validation http://validator.w3.org/

before moving on to something as difficult as flash. I use pnotepad which is a light weight notepad. I have dreamweaver, but it proves to be more of an annoyance than helpful

xxnonamexx
07-26-2011, 08:06 PM
I thought with the flash templates all you had to do was change images and text? I know flash from scratch is hard but I just wanted to try a basic one.

xxnonamexx
07-26-2011, 08:07 PM
The client now wants his website similar to this one http://www.warrentricomi.com/ more elegant, basic everything fitting on one page without scrolling ARGHHHH lol

Sammy12
07-26-2011, 08:07 PM
yeah, you can try integrating a free one, but you should try to make a page that is correct before even integrating a flash piece, because embedding flash wrong will be detremental to a page

you may not even be talking about flash, is this what you had in mind?

http://www.google.com/search?rlz=1C1CHOL_enUS415US415&sourceid=chrome&ie=UTF-8&q=free+content+sliders

I would highly suggest you stick with the basics before moving onto flash or even integrating a free script (including the content slider link I provided you) I hope you realize that a site that is masterful in flash
http://www.mcdonalds.com/us/en/promotions/Smoothies.html
was first masterful in html/css

xxnonamexx
07-26-2011, 08:12 PM
Well I have placed slideshows in a website before that is what the link I sent you is really about. I understand learn this before stepping into flash but I saw flash templates and wanted to see how easy it was to change images text of an already made template to make it my own. I think I am going to try to come up with a similar more basic elegant looking site similar to this one using a slideshow to give him a choice. Since this site really isn't about flash and the slideshow is only on one page.

xxnonamexx
07-26-2011, 10:28 PM
Check the services page www.philipsalon.com I added the <page> part under body I also updated the menus back to normal.

Sammy12
07-26-2011, 10:31 PM
? .page does nothing inless using width: 960px; margin: auto;

xxnonamexx
07-26-2011, 10:40 PM
Where do I place the margining information?


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Philip Salon</title>
<style type="text/css">

#apDiv1 {
position:absolute;
left:130px;
top:50px;
width:901px;
height:369px;
z-index:1;
background-color: #592D00;
}
#apDiv2 {
position:absolute;
left:1073px;
top:782px;
width:16px;
height:724px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:1161px;
top:136px;
width:23px;
height:859px;
z-index:2;
}
#apDiv4 {
position:absolute;
left:129px;
top:1594px;
width:898px;
height:26px;
z-index:3;
background-color: #663300;
}
body {
background-image: url(Images/pond.jpg);
background-attachment:fixed;
">

}
#apDiv5 {
position:absolute;
left:481px;
top:57px;
width:126px;
height:118px;
z-index:4;
background-color: #FFFFFF;
}
#apDiv6 {
position:absolute;
left:162px;
top:329px;
width:848px;
height:290px;
z-index:5;
background-color: #CC9966;
}
#apDiv7 {
position:absolute;
left:778px;
top:77px;
width:208px;
height:181px;
z-index:6;
}
#apDiv8 {
position:absolute;
left:307px;
top:162px;
width:250px;
height:23px;
z-index:7;
}
#apDiv9 {
position:absolute;
left:265px;
top:638px;
width:564px;
height:182px;
z-index:8;
}
#apDiv10 {
position:absolute;
left:149px;
top:73px;
width:150px;
height:248px;
z-index:9;
}
#apDiv11 {
position:absolute;
left:453px;
top:189px;
width:225px;
height:25px;
z-index:10;
}
#apDiv12 {
position:absolute;
left:474px;
top:217px;
width:189px;
height:24px;
z-index:11;
}
#apDiv13 {
position:absolute;
left:419px;
top:245px;
width:296px;
height:24px;
z-index:12;
}
body,td,th {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
}
#apDiv14 {
position:absolute;
left:358px;
top:362px;
width:427px;
height:42px;
z-index:13;
}
#apDiv15 {
position:absolute;
left:1196px;
top:-247px;
width:30px;
height:3968px;
z-index:14;
}
#apDiv16 {
position:absolute;
left:351px;
top:446px;
width:897px;
height:1128px;
z-index:14;
background-color: #592D00;
}
#apDiv17 {
position:absolute;
left:135px;
top:471px;
width:890px;
height:359px;
z-index:15;
background-color: #FFFFFF;
}
#apDiv18 {
position:absolute;
left:360px;
top:489px;
width:694px;
height:1120px;
z-index:15;
}
#apDiv19 {
position:absolute;
left:150px;
top:469px;
width:887px;
height:1294px;
z-index:16;
}
#apDiv20 {
position:absolute;
left:394px;
top:273px;
width:307px;
height:20px;
z-index:17;
}
#apDiv21 {
position:absolute;
left:455px;
top:296px;
width:212px;
height:22px;
z-index:18;
}
#apDiv22 {
position:absolute;
left:454px;
top:320px;
width:229px;
height:21px;
z-index:19;
}
#apDiv23 {
position:absolute;
left:317px;
top:495px;
width:412px;
height:327px;
z-index:20;
}
#apDiv23 {
font-family: Verdana, Geneva, sans-serif;
}
#apDiv23 {
font-family: Verdana, Geneva, sans-serif;
}
#apDiv24 {
position:absolute;
left:51px;
top:27px;
width:907px;
height:312px;
z-index:21;
}
#apDiv25 {
position:absolute;
left:391px;
top:380px;
width:545px;
height:53px;
z-index:22;
}
#apDiv26 {
position:absolute;
left:376px;
top:627px;
width:441px;
height:26px;
z-index:23;
}
#apDiv26 {
font-family: Georgia, Times New Roman, Times, serif;
color: #000;
}
#apDiv27 {
position:absolute;
left:373px;
top:698px;
width:444px;
height:21px;
z-index:24;
}
#apDiv27 {
font-family: Georgia, Times New Roman, Times, serif;
color: #000;
}
#apDiv28 {
position:absolute;
left:375px;
top:593px;
width:445px;
height:21px;
z-index:25;
}
#apDiv28 {
font-family: Georgia, Times New Roman, Times, serif;
color: #000;
}
#apDiv29 {
position:absolute;
left:375px;
top:665px;
width:566px;
height:22px;
z-index:26;
color: #000;
}
#apDiv30 {
position:absolute;
left:373px;
top:1140px;
width:447px;
height:23px;
z-index:27;
}
#apDiv31 {
position:absolute;
left:373px;
top:793px;
width:504px;
height:27px;
z-index:28;
}
#apDiv32 {
position:absolute;
left:373px;
top:832px;
width:443px;
height:28px;
z-index:29;
}
#apDiv33 {
position:absolute;
left:373px;
top:1032px;
width:522px;
height:25px;
z-index:30;
}
#apDiv34 {
position:absolute;
left:373px;
top:1173px;
width:448px;
height:23px;
z-index:31;
}
#apDiv35 {
position:absolute;
left:373px;
top:1067px;
width:528px;
height:24px;
z-index:32;
}
#apDiv36 {
position:absolute;
left:373px;
top:924px;
width:559px;
height:23px;
z-index:33;
}
#apDiv37 {
position:absolute;
left:373px;
top:957px;
width:554px;
height:21px;
z-index:34;
}
#apDiv38 {
position:absolute;
left:373px;
top:1205px;
width:555px;
height:22px;
z-index:35;
}
#apDiv39 {
position:absolute;
left:373px;
top:1236px;
width:558px;
height:24px;
z-index:36;
}
#apDiv40 {
position:absolute;
left:532px;
top:1286px;
width:112px;
height:20px;
z-index:37;
}
#apDiv41 {
position:absolute;
left:280px;
top:1179px;
width:562px;
height:88px;
z-index:38;
}
#apDiv42 {
position:absolute;
left:532px;
top:1421px;
width:122px;
height:19px;
z-index:39;
}
#apDiv43 {
position:absolute;
left:341px;
top:1464px;
width:562px;
height:65px;
z-index:40;
}
#apDiv44 {
position:absolute;
left:343px;
top:1330px;
width:505px;
height:72px;
z-index:41;
}
#apDiv45 {
position:absolute;
left:565px;
top:501px;
width:77px;
height:25px;
z-index:42;
}
#apDiv46 {
position:absolute;
left:528px;
top:1109px;
width:129px;
height:19px;
z-index:43;
}
#apDiv47 {
position:absolute;
left:549px;
top:752px;
width:78px;
height:22px;
z-index:44;
}
#apDiv48 {
position:absolute;
left:541px;
top:543px;
width:124px;
height:27px;
z-index:45;
}
#apDiv49 {
position:absolute;
left:546px;
top:993px;
width:99px;
height:20px;
z-index:46;
}
#apDiv49 {
font-family: Georgia, Times New Roman, Times, serif;
}
#apDiv50 {
position:absolute;
left:493px;
top:881px;
width:332px;
height:23px;
z-index:47;
}
#apDiv51 {
position:absolute;
left:528px;
top:629px;
width:138px;
height:21px;
z-index:48;
}
#apDiv27 a {
color: #960;
}
a:link {
color: #960;
}
</style>
</head>

<body>
.page {
width: 1000px;
margin: auto;
position: relative; /* if you use position: absolute; */
}
<div id="apDiv18">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="apDiv19"><img src="Images/ivory2.jpg" width="898" height="1110" border=3 /></div>
<div id="apDiv24"><img src="Images/header.jpg" width="1100" height="310" border=3/></div>
<div id="apDiv25"><link rel="stylesheet" href="mbcsmb73g0.css" type="text/css" />
<script type="text/javascript" src="mbjsmb73g0.js"></script><link rel="stylesheet" href="mbcsmb73g0.css" type="text/css" />


<ul id="mb73g0ebul_table" class="mb73g0ebul_menulist" style="width: 441px; height: 35px;">
<li class="spaced_li"><a href="http://www.philipsalon.com"><img id="mbi_mb73g0_1" src="mb_home.gif" name="mbi_mb73g0_1" width="68" height="35" style="vertical-align: bottom;" border="0" alt="Home" title="" /></a></li>
<li class="spaced_li"><a href="http://www.philipsalon.com/aboutus.html"><img id="mbi_mb73g0_2" src="mb_about_us.gif" name="mbi_mb73g0_2" width="93" height="35" style="vertical-align: bottom;" border="0" alt="About Us" title="" /></a></li>
<li class="spaced_li"><a href="http://www.philipsalon.com/services.html"><img id="mbi_mb73g0_3" src="mb_services.gif" name="mbi_mb73g0_3" width="85" height="35" style="vertical-align: bottom;" border="0" alt="Services" title="" /></a></li>
<li class="spaced_li"><a href="http://www.philipsalon.com/products.html"><img id="mbi_mb73g0_4" src="mb_products.gif" name="mbi_mb73g0_4" width="90" height="35" style="vertical-align: bottom;" border="0" alt="Products" title="" /></a></li>
<li><a href="http://www.philipsalon.com/directions.html"><img id="mbi_mb73g0_5" src="mb_directions.gif" name="mbi_mb73g0_5" width="101" height="35" style="vertical-align: bottom;" border="0" alt="Directions" title="" /></a></li>
</ul>
<script type="text/javascript" src="mbjsmb73g0.js"></script></div>
<div id="apDiv26"><a href="touchups.html">Touch Up..........................................................$65 and up</a></div>

<div id="apDiv27"><a href="highlights.html">Highlight/Lowlight...........................................$100 and up</a></div>
<div id="apDiv28"><a href="glazing.html">Glazing...............................................................$30 and up</a></div>
<div id="apDiv29"><a href="corrective.html">Corrective Color................................................Upon Consultation</a></div>
<div id="apDiv30"><a href="wellwater.html">Well Water Treatment.....................................$35 and up</a></div>
<div id="apDiv31">Women...............................................................$60 and up</div>
<div id="apDiv32">Men....................................................................$35 and up</div>
<div id="apDiv33">Blow Dry............................................................$35 and up</div>
<div id="apDiv34">Deep Conditioning &amp; Scalp Treatment..........$35 and up</div>

<div id="apDiv35"><a href="updos.html">Updo's................................................................$90 and up</a></div>
<div id="apDiv36"><a href="keratin.html">Keratin Treatments..........................................Upon Consultation</a></div>
<div id="apDiv37">Relaxers.............................................................$90 and up</div>
<div id="apDiv38">Body Wave.........................................................$90 and up</div>
<div id="apDiv39"><a href="extensions.html">Extensions..........................................................Upon Consultation</a></div>
<div id="apDiv40"><strong><em>Salon Policy</em></strong></div>
<div id="apDiv42"><em><strong>Appointments</strong></em></div>
<div id="apDiv43">Please arrive on time for your appointment to ensure full service, as we may have to reschedule your appointment if you are excessively late. Cancellations are required with a 24 hours notice.</div>
<div id="apDiv44">Method of payment- Amex, Visa, Mastercard, &amp; personal checks. Gratuity is customary for good services and always left to the decision of our clients. Please note- gratuities cannot be charged to your credit card or check.</div>

<div id="apDiv45"><em><strong>Services</strong></em></div>
<div id="apDiv46"><strong><em>Other Services</em></strong></div>
<div id="apDiv47"><strong><em>Hair Cut</em></strong></div>
<div id="apDiv48"><em><strong>Hair Coloring</strong></em></div>
<div id="apDiv49"><em><strong>Styling</strong></em></div>
<div id="apDiv50"><strong><em>Anti Frizz Treatments</em></strong></div>
</body>
</html>

Sammy12
07-26-2011, 10:42 PM
in your css



.page {
width: 1100px;
margin: auto;
position: relative; /* if you use position: absolute; */
}


then you have to remeasure all your absoluted elements. for example, the elements to the left has like 50px;, just set them to 0;

----

bro you set this div to width: 907px, when the image within it is over a 1100. child elements aren't supposed to be greater than their parents

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-30.png

xxnonamexx
07-26-2011, 10:51 PM
I reposted my code just lost about the 21px I am not seeing it? Can you also help me make a template for a "floating window" like I mentioned in the earlier website the guy wants to see a simpler version. Thanks

Sammy12
07-26-2011, 10:57 PM
A floating windows...the problems with your script are !important;

For a floating window I would suggest using position: fixed; with some ajax. I'm not interested in writing something tedious for a client that isn't mine

xxnonamexx
07-26-2011, 11:07 PM
So my div width is 907 and the appdiv24 image is 1100 so the image should be 907 and it will be fine?




I didn't know how tedious it was to make a box template floating. Another member gave me the dimensions which is what I was looking for.

Sammy12
07-26-2011, 11:45 PM
I would probably have written it out for you if this was your first post in this thread. but I can't fix all the problems with your page. All I can say is, try to use floats instead of position: absolute, since your page right now is unstable.http://www.w3schools.com/css/css_float.asp

you realize I've already spent quite a bit of time in this thread. I would suggest posting a new thread about this floating window and hopefully a member will be willing to spend the time. I don't get paid to help so as you can imagine I can't spend the next 3 hours fixing all the errors on your page! or the next 30 minutes building an elaborate float window with ajax
http://www.webmasterworld.com/forum91/4528.htm

xxnonamexx
07-27-2011, 03:52 AM
Sorry disregard the floating window I am not worrying about that. I want to concentrate on my mistakes in this website that I created and learn what I did to improve my beginner skills. I appreciate all of your work and time helping me with this task. I want to correct my issues in my code so that it is compatible with all browsers. Than you

Sammy12
07-27-2011, 04:28 AM
I think where I'm getting at is that the pages are near unfixable. and it would take about 3 hours to rewrite all the pages. I would suggest finishing this project and starting any new ones with a better understanding of floats.



#header {
width: 900px;
height: 80px;
}

#header .logo {
width: 100px;
float: left;
}

#header .login {
width: 200px;
float: right;
}




<div id="header">
<div class="logo"></div>
<div class="login"></div>
</div>


that's pretty much it, you have a logo on the left and a login div at the right. When floating elements, you are taking them out of the flow of the page (as well as position: absolute) by setting a height of 80px to the header, you are pushing whatever content below them down. essentially, the "logo" and "login" dont have a height in the page, therefore you must set a height to their "parent - header" in order to clear space for them. notice: the logo and login widths combined are less than the headers. if the widths were greater, the login would be pushed off, below the logo. this is called "collapsing elements" a problem that will be faced when using a liquid layout.

---

you can also use clear methods which I describe as the "lazy" way of clearing floats or if your height cannot be defined (for instance, content that continually grows - blogs, comments, or any user-inputed type of things)



.clear {
clear: both;
}




<div class="header">
<div class="logo"></div>
<div class="login"></div>
<div class="clear"></div>
</div>


this will "clear" the floats (in this case :both), you can also just clear one float, clear: left or clear: right.




UNNECESSARY INFORMATION:

Additionally, you can use what people think as the "safest" way to clear floats without a definite height (clearfix) in which some people find to be "safer" in older browsers (ie6, ie7). http://www.positioniseverything.net/easyclearing.html



.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}




<div id="header" class="clearfix">
<div class="logo"></div>
<div class="login"></div>
</div>


clearfix actually has much more code than that (see link above - bottom of the link page), but for simplicity, this is essentially what clearfix is. the :after will clear everything within it (logo, login)

xxnonamexx
07-27-2011, 02:31 PM
Hi Sammy thank you I will look into your information.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum