#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    27
    Rep Power
    0

    Help: Web site creation process?


    I'd like a brief explanation of the process of creating a web site.

    Once I sign up, how do I actually construct/configure the web site. Are there templates that I change the colours, background and text of? I don't want to actually construct my own web pages. I just want to "brand/personalize" some template and then let it operate. (And if I'm using some ambiguous terms, please correct me.)

    Also, I wanted to know if hosting companies allow one to experiment with an "offline" web site; one that I can set up and play with (via a password or such) using their templates until I have a better idea of what I want or what I can do in terms of presentation (perhaps a month?). Once that's done, I wanted the ability to cancel the whole idea or put what I have on line.

    To provide some other info:
    I am looking for a shared account, and I understand that bandwidth and disk space are the key requirements, but thanks for the reminder. I have heard about some tools, but for the time being let's just talk about process.
  2. #2
  3. No Profile Picture
    CEO StealthyHosting
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2009
    Location
    Tacoma, WA
    Posts
    339
    Rep Power
    96
    The only way to construct a website is with code.
    This is a website:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!--
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    
    Name       : Violet Ray
    Description: A two-column, fixed-width design for 1024x768 screen resolutions.
    Version    : 1.0
    Released   : 20090215
    
    -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Violet Ray by Free CSS Templates</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
    <div id="wrapper">
    
    <div id="header">
    	<div id="menu">
    		<ul>
    			<li class="current_page_item"><a href="#">Home</a></li>
    			<li><a href="#">Blog</a></li>
    			<li><a href="#">Photos</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">Links</a></li>
    			<li><a href="#">Contact</a></li>
    		</ul>
    	</div>
    	<!-- end #menu -->
    	<div id="search">
    		<form method="get" action="">
    			<fieldset>
    			<input type="text" name="s" id="search-text" size="15" />
    			<input type="submit" id="search-submit" value="Search" />
    			</fieldset>
    		</form>
    	</div>
    	<!-- end #search -->
    </div>
    <!-- end #header -->
    <div id="logo">
    	<h1><a href="#">Violet Ray</a></h1>
    	<p><em> template design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></em></p>
    </div>
    <hr />
    <!-- end #logo -->
    <!-- end #header-wrapper -->
    
    <div id="page">
    	<div id="content">
    		<div class="post">
    			<h2 class="title">Welcome to Violet Ray</h2>
    			<p class="date">01.23.09</p>
    			<div class="entry">
    				<p>This is <strong>Violet Ray</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license. The photos in this design are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>
    				<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.Sed lacus. Donec lectus. </p>
    				<p class="links"><a href="#" class="comments">Comments (64)</a> &nbsp;&nbsp;&nbsp; <a href="#" class="permalink">Full article</a></p>
    			</div>
    		</div>
    		<div class="post">
    			<h2 class="title">Lorem ipsum sed aliquam</h2>
    			<p class="date">01.23.09</p>
    			<div class="entry">
    				<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros.</p>
    				<p class="links"><a href="#" class="comments">Comments (64)</a> &nbsp;&nbsp;&nbsp; <a href="#" class="permalink">Full article</a></p>
    			</div>
    		</div>
    		<div class="post">
    			<h2 class="title">Lorem ipsum sed aliquam</h2>
    			<p class="date">01.23.09</p>
    			<div class="entry">
    				<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Phasellus pellentesque. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.</p>
    				<p class="links"><a href="#" class="comments">Comments (64)</a> &nbsp;&nbsp;&nbsp; <a href="#" class="permalink">Full article</a></p>
    			</div>
    		</div>
    	</div>
    	<!-- end #content -->
    	<div id="sidebar">
    		<ul>
    			<li>
    				<h2>Aliquam tempus</h2>
    				<p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, volutpat.</p>
    			</li>
    			<li id="calendar">
    				<h2>Calendar</h2>
    				<div id="calendar_wrap">
    					<table summary="Calendar">
    						<caption>
    						March 2008
    						</caption>
    						<thead>
    							<tr>
    								<th abbr="Monday" scope="col" title="Monday">M</th>
    								<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
    								<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
    								<th abbr="Thursday" scope="col" title="Thursday">T</th>
    								<th abbr="Friday" scope="col" title="Friday">F</th>
    								<th abbr="Saturday" scope="col" title="Saturday">S</th>
    								<th abbr="Sunday" scope="col" title="Sunday">S</th>
    							</tr>
    						</thead>
    						<tfoot>
    							<tr>
    								<td abbr="February" colspan="3" id="prev"><a href="#" title="">&laquo; Feb</a></td>
    								<td class="pad">&nbsp;</td>
    								<td abbr="April" colspan="3" id="next"><a href="#" title="">Apr &raquo;</a></td>
    							</tr>
    						</tfoot>
    						<tbody>
    							<tr>
    								<td colspan="5" class="pad">&nbsp;</td>
    								<td>1</td>
    								<td>2</td>
    							</tr>
    							<tr>
    								<td>3</td>
    								<td>4</td>
    								<td>5</td>
    								<td>6</td>
    								<td>7</td>
    								<td>8</td>
    								<td>9</td>
    							</tr>
    							<tr>
    								<td>10</td>
    								<td id="today">11</td>
    								<td>12</td>
    								<td>13</td>
    								<td>14</td>
    								<td>15</td>
    								<td>16</td>
    							</tr>
    							<tr>
    								<td>17</td>
    								<td>18</td>
    								<td>19</td>
    								<td>20</td>
    								<td>21</td>
    								<td>22</td>
    								<td>23</td>
    							</tr>
    							<tr>
    								<td>24</td>
    								<td>25</td>
    								<td>26</td>
    								<td>27</td>
    								<td>28</td>
    								<td>29</td>
    								<td>30</td>
    							</tr>
    							<tr>
    								<td>31</td>
    								<td class="pad" colspan="6">&nbsp;</td>
    							</tr>
    						</tbody>
    					</table>
    				</div>
    			</li>
    			<li>
    				<h2>Turpis nulla</h2>
    				<ul>
    					<li><a href="#"></a><a href="#">Nec metus sed donec</a></li>
    					<li><a href="#">Magna lacus bibendum mauris</a></li>
    					<li><a href="#">Velit semper nisi molestie</a></li>
    					<li><a href="#">Eget tempor eget nonummy</a></li>
    					<li><a href="#">Nec metus sed donec</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    	<!-- end #sidebar -->
    	<div style="clear: both;">&nbsp;</div>
    	</div>
    <!-- end #page -->
    </div>
    <div id="footer">
    	<p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
    	</div>
    <!-- end #footer -->
    </body>
    </html>
    If you are wanting to edit a pre done template (can get templates from http://www.freelayouts.com/websites/html-templates or hundreds of free html template sites) you have to understand some html and how it integrates with style.css

    Code:
    body {
    	margin: 0;
    	background: #7A287A url(images/img02.jpg) repeat left top;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #C752C7;
    }
    
    h1, h2, h3 {
    	margin: 0;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: normal;
    	color: #649632;
    }
    
    h1 { font-size: 44px; }
    
    h2 { font-size: 20px; }
    
    h3 { }
    
    p, ul, ol {
    	margin-top: 0;
    	line-height: 240%;
    	text-align: justify;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 11px;
    }
    
    ul, ol { }
    
    blockquote { }
    
    a { color: #FFFFFF; }
    
    a:hover { text-decoration: none; }
    
    a img {
    	border: none;
    }
    
    img.left {
    	float: left;
    	margin: 7px 30px 0 0;
    }
    
    img.right {
    	float: right;
    	margin: 7px 0 0 30px;
    }
    
    hr { display: none; }
    
    .list1 {
    }
    
    .list1 li {
    	float: left;
    	line-height: normal;
    }
    
    .list1 li img {
    	margin: 0 30px 30px 0;
    }
    
    .list1 li.alt img {
    	margin-right: 0;
    }
    
    #wrapper {
    	background: url(images/img01.jpg) repeat-x left top;
    	padding-top: 30px;
    }
    
    /* Header */
    
    #header-wrapper {
    }
    
    #header {
    	width: 913px;
    	height: 81px;
    	margin: 0 auto;
    	background: url(images/img03.jpg) no-repeat left top;
    }
    
    /* Menu */
    
    #menu {
    	float: left;
    	width: 540px;
    	height: 51px;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 30px 0 0 20px;
    	list-style: none;
    	line-height: normal;
    }
    
    #menu li {
    	display: block;
    	float: left;
    }
    
    #menu a {
    	display: block;
    	float: left;
    	padding: 5px 25px 5px 25px;
    	text-decoration: none;
    	background: url(images/img05.gif) no-repeat right 50%; 
    	font: 14px Georgia, "Times New Roman", Times, serif;
    	color: #FFFFFF;
    }
    
    #menu a:hover { text-decoration: underline; }
    
    #menu .current_page_item a {
    	padding-left: 0px;
    	color: #FFFFFF;
    Stuff like that defines your colors, some html puts the style variables in the html, others link the html to a style.css file that defines most of your colors, boarders, and text size.

    If you have no experience with html getting a predone template to do exactly what youw ant is going to be pretty hard. You will most likely want to go with a script that has a easy admin edit page for the website.


    Above examples are taken from http://www.freelayouts.com/templates...y?preview=true
    Last edited by brianbak; October 25th, 2009 at 04:01 PM.
    Brian Kearney, CEO Stealthy Hosting Inc
    Shared/Reseller/Dedicated Hosting Http://StealthyHosting.com
    Please Contact us for VPS/Colo pricing.
    Email: sales@stealthyhosting.com Phone: 253-880-1233
  4. #3
  5. No Profile Picture
    CEO StealthyHosting
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2009
    Location
    Tacoma, WA
    Posts
    339
    Rep Power
    96
    I can give you a hosting account on a subdomain that you can tinker with if you would like.

    99% of websites are done offline and then you upload the files via ftp to the webserver. (unless you are direct editing with frontpage or dreamweaver which is not recomended).
    Brian Kearney, CEO Stealthy Hosting Inc
    Shared/Reseller/Dedicated Hosting Http://StealthyHosting.com
    Please Contact us for VPS/Colo pricing.
    Email: sales@stealthyhosting.com Phone: 253-880-1233
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    27
    Rep Power
    0
    Originally Posted by brianbak
    The only way to construct a website is with code.

    If you have no experience with html getting a pre-done template to do exactly what you want is going to be pretty hard. You will most likely want to go with a script that has a easy admin edit page for the website.
    Hmmm...If that's true, then you're telling me that millions of people have learned to code their own web pages, or spent the money to hire others to do that. I have trouble believing that.

    Can I get the opinions of others on this, please?
  8. #5
  9. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,117
    Rep Power
    1990
    Originally Posted by LouArnold
    Hmmm...If that's true, then you're telling me that millions of people have learned to code their own web pages, or spent the money to hire others to do that. I have trouble believing that.
    What? You have trouble believing that the people on here that you are asking advice from have actually spent the time to learn this for themselves? Of course we have. These days, any 15 y/o knows how to do (basic...) HTML work and can create a basic site. Of course, not everyone knows how, and that is why people make money building sites for them. It's the same as any other industry.

    If people don't learn how to code themselves, or pay someone else to do it for them... how else do they get a website done?
  10. #6
  11. They're coming to take me away

    Join Date
    Jan 2005
    Location
    Florida
    Posts
    5,105
    Rep Power
    5049
    Originally Posted by LouArnold
    I'd like a brief explanation of the process of creating a web site.

    Once I sign up, how do I actually construct/configure the web site. Are there templates that I change the colours, background and text of? I don't want to actually construct my own web pages. I just want to "brand/personalize" some template and then let it operate. (And if I'm using some ambiguous terms, please correct me.)
    There are some sites that will put a site up for you with just customizing a few things here and there. But, this really depends on what type of site you want. For strictly informational, this may work for you, but for anything more complicated, then what brianbak mentioned is pretty much accurate.

    Also, I wanted to know if hosting companies allow one to experiment with an "offline" web site; one that I can set up and play with (via a password or such) using their templates until I have a better idea of what I want or what I can do in terms of presentation (perhaps a month?). Once that's done, I wanted the ability to cancel the whole idea or put what I have on line.
    You can setup a site to not display your website by requiring a password to view the page, or just creating a subdirectory and building the site in there.

    Hmmm...If that's true, then you're telling me that millions of people have learned to code their own web pages, or spent the money to hire others to do that. I have trouble believing that.
    Basically, yes.... to get a "worthwhile" site up, then the options are:
    - Hand code your own
    - Use a WYSIWYG editor such as Dreamweaver (where you don't necessarily need to learn how to code)
    - Pay someone to code the site for you
    - Con a friend (or someone else) to code it for you for free
    - Barter
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    27
    Rep Power
    0
    Wow! Looks like I was wise to ask before I got too far into this. I thought web building was well past the coding stage. I understand tho. I guess to "brand" a site takes somewhat more than modifying templates. Still, I'm not looking for something unique. a blog, sales and download of files IS perhaps in the realm of possibility with templates alone. Those web activity have been implemented countless times. I'm really not looking for anything dynamic or with animation.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2008
    Posts
    33
    Rep Power
    7
    I suggest you order a cheap hosting account with monthly billing so you can try it out for a month. This will cost less than $10.

    Choose a web host who offers the cpanel/fantastico control panels which allow you to auto-install free blog software such as Wordpress, and also a free shopping cart. Teach yourself how to run these - it's not difficult but may take a few days to get the hang of it. Here's a few companies who offer cPanel hosting. Thousands of free wordpress templates are available for your blog design.

    While you're at it get yourself a Paypal account or 2CO account so you can accept payments for your products.


    Andrew
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2008
    Posts
    33
    Rep Power
    7
    If you are just selling digital products I recommend using e-junkie.com as your shopping cart solution. Free to try.

IMN logo majestic logo threadwatch logo seochat tools logo