www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Need feedback/help building a simple/basic site

  1. #1
    Join Date
    Feb 2014
    Posts
    8

    Question Need feedback/help building a simple/basic site

    Hi,

    I have been tasked with building a repository of sorts for end users. The concept is simple: It's an internal site people will use to look up information; it will be text heavy.

    The layout I want is a left-hand menu, a top banner/header, and then the area where content is displayed. The menu and banner should be static and clicking links will open in the content section.

    I can do the site with frames, but I would rather not as looking ahead, the site will be large with many pages that will be constantly updated.

    That said, CSS seems to be my solution, I think. However, I have limited resources and have no real domain/server tools so PHP and other server-side items are an option. I do not even have an editor other than Notepad as my workstation is locked down.

    Given my lack of resources and my limited web dev knowledge (I'm self-taught; I can learn new concepts easily enough), is there any "clean" way I can create this site without worrying about having to update lots of pages manually when changes are needed?

    Any suggestions are greatly appreciated.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there BlondOverBlue,

    and a warm welcome to these forums.

    Check out the attachment which contains a very basic PHP navigation.

    coothead
    Attached Files Attached Files

  3. #3
    Join Date
    Mar 2012
    Posts
    1,638
    With the size of site you are talking about, you really need to use PHP include files for the header, side menu and footer (if required). Developing and testing it will need a local host such as Wamp server, so you will need to get permission to download that, or have the Internal Systems people install it. Also, notepad is not really suitable for the job. So, ideally you would also be allowed to use a developer editor like notepad++. If they are needed for your work they should be approved.

  4. #4
    Join Date
    Feb 2014
    Posts
    8
    Quote Originally Posted by coothead View Post
    Hi there BlondOverBlue,

    and a warm welcome to these forums.

    Check out the attachment which contains a very basic PHP navigation.

    coothead
    Oohh...I think this is what I have been looking for! I'll give it a go and see if I can tailor it to my "project" and reply back ASAP. Thanks so much!!

  5. #5
    Join Date
    Feb 2014
    Posts
    8
    Hrmm...Correct me if I am wrong, but PHP is a server-side language, no? I should clarify that this "website" is currently hosted on a network share on the LAN. The previous project manager just has the frameset files, a CSS file for the links (looks like they were customized), and then a bottomless pit of all the pages for the "website".

    What I am trying to do is pretty much keep the layout, but somehow keep myself from having to update every single stupid page if I make any major code changes.

    The site is all HTML with that CSS file; it's not meant to be or needs to be any fancier. I guess I'm trying to look for an easy way to maintain this project that may not exist given I there's no web servers to support MySQL, PHP, and other server-side languages.

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there BlondOverBlue,

    as our friend jedaisoul has already pointed out, you will need a local server to run PHP.

    Here are a few links...
    1. WampServer
    2. XAMMP
    3. EasyPHP DevServer

    coothead

  7. #7
    Join Date
    Feb 2014
    Posts
    8
    Ok, PHP is server-side. Got it.

    Since all files for this website are stored on a local network share, any server-side options can not be considered; there will never be servers, domain hosting, etc available to me nor will I be allowed to install any software server-based or client-based.

    Am I to assume that using old-school framesets, which is the current format, and update the ungodly amount (100+) pages individually the only way to manage something like this using basic HTML and the CSS file (which is useless as it only affects links apparently)?

    To give a further idea of what I'm up against, the webpages were created/edited in Word.

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,467
    Hi there BlondOverBlue,

    I have been tasked with building a repository of sorts for end users.
    To give a further idea of what I'm up against, the webpages were created/edited in Word.
    ...nor will I be allowed to install any software...
    Obviously, some one in your place of work has taken a distinctly unhealthy exception to you.

    I would strongly suggest that, for your future safety, you head for the hills.

    coothead

  9. #9
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Since no PHP or other server-side script is possible, you could use JavaScript or jQuery to read the contents of those files, do any data processing (hopefully none) and print it to the webpage. For JavaScript, here's a helpful blog and here's the long documentation. jQuery also has some options but I'm fairly certain for both, the files have to be on the local disk where the script is being ran from. Last, you can execute shell commands from your JavaScript, including reading a file and storing the result in a variable from here, although I've never done it before and don't know if there is a file size limit.

  10. #10
    Join Date
    Feb 2014
    Posts
    8
    Oh, there's no data processing at all, mercifully. This "little" site is basically a reference tool of sorts for people to look up info when they have a question or just need a "refresher" on how to do X, Y, or Z which is why the backend (no servers, server-side scripts, etc) is lacking and the content was created and maintained using basic HTML in Word.

    It currently looks like 1996 is calling and wants its AngelFire/GeoCities website template back and even then that's being too nice. For its intended purpose (and to extent audience), it works.

    However, it really could use some digital lipstick and Botox not only to make it more pleasing to look at, but also to use as I have to reorganize content.

    I'm trying to make this as less painful as possible for myself if I have to be delegated as "the chosen one" for this project.

    That said, I found some free code that is called "fake frames" using a CSS file and an HTML file. The layout is identical to what is in place now, minus framesets and all the relevant frame pages.

    I'm struggling with a few things and have questions. I've Googled and read articles until my eyes bled, but I'm stuck. How do I add my code with an explanation on what I need help with? to a post here?

    @coothead Oh I ran, but they caught me and dragged me back kicking, screaming, and crying.

  11. #11
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Click on Go Advanced, then you choose the PHP code button, HTML code button or code code button (sounds fun to say), or just write [ CODE ] some code [ / CODE ] , [ HTML ] some html [ / HTML ] and [ PHP ] some php [ / PHP ] but without the spaces.

  12. #12
    Join Date
    Feb 2014
    Posts
    8

    Post Here's my code and questions.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
     <html>
     <head>
     <title>Manual</title>
     <link href="manualcss.css" rel="stylesheet" type="text/css" />
     </head>
     <body topmargin="0" leftmargin="0">
     <div id="header">
     <h1>MANUAL</h1>
    
    Home | Index | T3 | Feedback
    
     </div>
     
     <div id="leftnavigation">
     <h3>Platform</h3>
     <ul>
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>
     <li>Link 4</li>
     </ul>
    
    <h3>Platform</h3>
     <ul>
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>
     <li>Link 4</li>
     </ul>
    
    <h3>Miscellaneous</h3>
     <ul>
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>
     <li>Link 4</li>
     </ul>
    
    <h3>Manuals</h3>
     <ul>
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>
     <li>Link 4</li>
     </ul>
     </div>
     <div id="content">
     <h1>Sample Content</h1>
     <p>
     This is sample content in the content section of the page.
     </p>
     <p>
     QUERTY
     </p>
     <h2>Sample content</h2>
     <p>
     QUERTY
     </p>
     
     </div>
     </body>
     </html>
    Here's the CSS:

    HTML Code:
    body {
     margin : 0;
     padding : 0;
     background-color : #8fbc8f;
     color : #000000;
     }
     p, ul, ol, li {
     font : 12pt calibri,arial,sans-serif;
     }
     h1 {
     font : bold 18pt calibri,arial,sans-serif;
     }
     h2 {
     font : bold 16pt calibri,arial,sans-serif;
     }
     h3 {
     font : bold 14pt calibri,arial,sans-serif;
     }
     h4 {
     font : bold 12pt calibri,arial,sans-serif;
     }
     h5 {
     font : bold 10pt calibri,arial,sans-serif;
     }
     #header {
     position : fixed;
     width : 100%;
     height : 10%;
     top : 0;
     right : 0;
     bottom : auto;
     left : 0;
     border-bottom : 2px solid #cccccc;
     }
     #leftnavigation {
     position : fixed;
     height : auto;
     top : 10%;
     left : 0;
     width : 150px;
     margin : 0px 0px 0px 10px;
     color : #000000;
     padding : 3px;
     overflow : auto;
     }
     #content {
     position : fixed;
     top : 10%;
     bottom : 0px;
     margin : 0px 0px 0px 165px;
     width : auto;
     height : auto;
     padding-left : 5px;
     padding-right : 12px;
     color : #000000;
     border-left : 2px solid #cccccc;
     overflow : auto;
     }
     #content h1, #content h2 {
     color : #cc0000;
     }
    What I am trying to do is get the "Home", "Index", "T3", and "Feedback" font to match in size and style of the "Link 1", "Link 2" etc.

    Next, is there a way to have the left hand menu update automatically across all pages using CSS? For instance, say I add a "Link 5", I want it to update on the 100+ pages that have been created without having to manually do it myself. Same idea for if I add a new link up top, say next to "Feedback".

    Did I explain it clearly or did I make it incomprehensible?

  13. #13
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Quote Originally Posted by BlondOverBlue View Post
    What I am trying to do is get the "Home", "Index", "T3", and "Feedback" font to match in size and style of the "Link 1", "Link 2" etc.
    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<style> 	
    			h1 <!-- put this in your external CSS file --> 
    			{
    				font-weight: normal;
    				font-size: 16px;
    			}
    		</style>
    	</head>
    	<body>
    		<h1>Manuals</h1>
    		<ul>
    			<li>Manuals</li>
    		</ul>
    	</body>
    </html>
    Quote Originally Posted by BlondOverBlue View Post
    Next, is there a way to have the left hand menu update automatically across all pages using CSS? For instance, say I add a "Link 5", I want it to update on the 100+ pages that have been created without having to manually do it myself. Same idea for if I add a new link up top, say next to "Feedback".

    Did I explain it clearly or did I make it incomprehensible?
    Normally, it'd be easy to do with PHP or another server-side language but given the constraints, I would recommend trying out that Node.js (in 1 of the links I gave earlier) to have it execute a file. This file would contain all of the link names you want. Once you update it, your JavaScript or jQuery would read it and dynamically add it to the menu. In other words, your layout will end up being dynamic if you want to add anything and have it still look formatted, so possible but not as easy. Fortunately, the layout of your site doesn't seem terribly complex, so navigating by the DOM shouldn't be difficult and JS can easily add in new content.

    In each HTML page, you'll need that external JS file, which can be done by:

    HTML Code:
    <!-- somewhere in the <head> -->
    <script type = "text/javascript" src = "updatedPage.js"></script>

  14. #14
    Join Date
    Feb 2014
    Posts
    8

    Post How to adjust spacing between links when listed vertically in a side menu

    Alrighty, I decided to step back any really analyze this project I was volunteered for.

    It seems basic HTML and a frameset are going to be the best methods given the constraints I am faced with even after trimming down the mountain of separate pages to a more "manageable" level.

    In trying to slap lipstick and Botox on this pig, I redesigned the left-hand menu. The issue I am coming across is trying to space out the links.

    Under "Miscellaneous" a <p> tag was used for some reason. That adds too much space between links, but I see their intent when it was added and then jumped to using Word to force it to look better.

    Is there anyway to space out the links under each heading a little bit so they do not look so "bunched" together, yet not so far apart as the <p> makes them?

    If I am being too pedantic, by all means call me out.

    HTML Code:
    <html>
    
    <head>
    
    <title>Menu</title>
    
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    
    <link type="text/css" rel="stylesheet" href="hyperlinkcolors.css">
    
    <style type="text/css">
    body {
    	font-family:calibri,arial,sans-serif;
    	font-size:14pt;
    	margin:10px;
    	background-color:#999f8e;
    	}
    </style>
    
    </head>
    
    <body>
    
    <h4>Platform 1</h4>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br> 
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <p>
    
    <hr>
    
    <h4>Platform 2</h4>
    
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <p>
    
    <hr>
    
    <h4>Miscellaneous</h4>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <p>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <p>
    
    <hr>
    
    <h4>Manuals</h4>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    </body>
    </html>

  15. #15
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    I copied and pasted the Platform 1 links into a table. If you want to adjust the cells' positioning, including their spacing, just tweak the values for cellpadding and cellspacing. Using a table is better than relying on <p> elements for spacing since it's easier to control and to help spice it up and add nifty features, you can do some very crafty things on the <table> that you cant do just that way you had it (but that's for later if you choose).

    HTML Code:
    <html>
    
    <head>
    
    <title>Menu</title>
    
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    
    <link type="text/css" rel="stylesheet" href="hyperlinkcolors.css">
    
    <style type="text/css">
    body {
    	font-family:calibri,arial,sans-serif;
    	font-size:14pt;
    	margin:10px;
    	background-color:#999f8e;
    	}
    	
    tr td 
    {
    	font-family:calibri,arial,sans-serif;
    	font-size:14pt;
    }
    </style>
    
    </head>
    
    <body>
    
    <h4>Platform 1</h4>
    	<!-- adjust the cellpadding and cellspacing for the table as you see fit -->
    	<table border = "0" cellspacing = "2" cellpadding = "2">
    		<tr><td><a href="test.html" title="Test link" target="content">Link</a></td></tr>
    		<tr><td><a href="test.html" title="Test link" target="content">Link</a></td></tr>
    		<tr><td><a href="test.html" title="Test link" target="content">Link</a></td></tr>
    		<tr><td><a href="test.html" title="Test link" target="content">Link</a></td></tr>
    		<tr><td><a href="test.html" title="Test link" target="content">Link</a></td></tr>
    		<tr><td><a href="test.html" title="Test link" target="content">Link</a></td></tr>	
    	</table>
    
    	<!-- your previous code
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br> 
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    	-->
    <p>
    
    <hr>
    
    <h4>Platform 2</h4>
    
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <p>
    
    <hr>
    
    <h4>Miscellaneous</h4>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <p>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <p>
    
    <hr>
    
    <h4>Manuals</h4>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    <a href="test.html" title="Test link" target="content">Link</a></br>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles