Solved

Basic HTML editing question (Very Newbie Question)

Posted on 2013-11-25
12
281 Views
Last Modified: 2013-11-25
I apologize for such a basic question but I am not a web site programmer and very little experience doing so.  BUT, I have been tasked to make a couple basic changes to a simple HTML site.  I did not create the site but only making simple changes.  One thing that typically comes up is to add another page for things such as new happening etc. and is a copy of all the others.  But, the person who created the site has a navigation bar at the top and when you hover your mouse over these, this drops down a cell with lines giving the user the ability to click a link and navigate to another page.  So, each time I create a page, I have to go into EACH existing page and add that line in the code for the navigation cell which is VERY time consuming.  Is there a way to add a navigation bar and if I edit a link for one, it edits them all?

Thanks!
0
Comment
Question by:ehouser_paralleltech
  • 4
  • 3
  • 2
  • +2
12 Comments
 
LVL 15

Assisted Solution

by:weinberk
weinberk earned 250 total points
ID: 39674715
There's many ways to have a navigation bar pull its contents from a single location.  You could use javascript to spit out the menu using code, to use a content management system (CMS) like WordPress, use server side includes (bad idea IMO), frames (worse), and lots of other ways.

Being that you've got an existing site that sounds like it's static HTML (not a CMS), javascript is probably the easiest way to make this work.  

Here's a quick tutorial:
http://webdesign.about.com/od/javascript/ht/htjsincludehtm.htm

Essentially, you'd replace the existing menu HTML with the javascript include line, in each and every html page.
<script type="text/javascript" src="/yourmenu.js"></script>

Then you could copy that original menu code into the yourmenu.js file.  You'd have javascript write the html to the visitor's browser using document.write as seen in the example.

Make sure to enclose the text in SINGLE quotes.  The example has double quotes, but that won't work since your text likely has double quotes in it already.  For example, do this:

document.write('<ul><li style="something">bla</li></ul>');

Hope this helps get you started.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39674854
common code like this is best done by using an include on the server side so you have a single place to edit for the whole site and you avoid bloating the pages.  Whether that is available to you is unknown based on the information you have given us.  If you post a link to the page we can probably give you all the doable options after we take a look at what is there.

Cd&
0
 
LVL 15

Expert Comment

by:weinberk
ID: 39674888
And of course, if you want NO code, you could use find and replace functionality to update each page.  Notepad++ does this.  Not an elegant solution, cumbersome in my opinion, but it'll work.
0
 

Author Comment

by:ehouser_paralleltech
ID: 39675053
The web site is www.paralleltech.com and an example would be when you hover over "New & Noteworthy" each line item is something I need to add from time to time.  So, I add a new page to the site contents and go to each page and copy in a new line item in the cell.
0
 
LVL 15

Expert Comment

by:weinberk
ID: 39675364
OK.  Take this bit out:
			<!-- NAVIGATION -->
			<div id="nav" class="navDiv">
				<table  cellpadding=0 cellspacing=0 border=0>
					<tr>
						<td class="navCell"><a href="index.shtml" class="nav_link">Home</a></td><td width=7><img src="images/pipe.gif" class="middle" alt="" /></td>
						<td class="navCell"  onmouseover="myexpand('products',this)" onmouseout="theMouseOut(document.getElementById('products'),event)">
							<a href="javascript: void(0)" class="nav_link">Products &amp; Services</a>
								<div id="products" class="drop" onmouseout="theMouseOut(document.getElementById('products'),event)" style="width:200px;">
									<a href="business_communication.shtml" class="drop_link">VoIP Telephony</a>
									<a href="host_voip_telephony.shtml" class="drop_link">Hosted VoIP Telephony</A>
									<a href="structured_cabling.shtml" class="drop_link">Structured Cabling</A>
									<a href="WAN_services.shtml" class="drop_link">WAN Services</A>
									<a href="video_conferencing.shtml" class="drop_link">Video Conferencing</A>
									<a href="network_services.shtml" class="drop_link">Network Services</A>
								</div>
						</td><td width=7><img src="images/pipe.gif" class="middle"  alt=""/></td>
						<td class="navCell"  onmouseover="myexpand('news',this)" onmouseout="theMouseOut(document.getElementById('news'),event)">
							<a href="javascript: void(0)" class="nav_link">New &amp; Noteworthy</a>
								<div id="news" class="drop" onmouseout="theMouseOut(document.getElementById('news'),event)" style="width:391px;">
									<!-- <a href="news.shtml" class="drop_link">All News Items</a> -->
									<a href="news22.shtml" class="drop_link">Parallel Receives Circle of Excellence Award</a>
									<a href="news24.shtml" class="drop_link">Parallel Named Best Place to Work for 5th Consecutive Year</a>
									<a href="news23.shtml" class="drop_link">Parallel Named Best Place to Work for Third Consecutive Year</a>
									<a href="news21.shtml" class="drop_link">Parallel Named Best Place to Work for 2009</a>
									<a href="news20.shtml" class="drop_link">Parallel Wins Customer Service Award</a>
                                    <a href="news11.shtml" class="drop_link">Parallel partners with Cincinnati Bell</a>
									<a href="news10.shtml" class="drop_link">Parallel named Best Place to Work 2008... </a>
									<a href="news07.shtml" class="drop_link">Parallel named Top Ten ShoreTel Partner... </a>
									<a href="news09.shtml" class="drop_link">Parallel Win Customer Satisfaction Award... </a>
									<a href="images/Downlite_Parallel_Technologies.pdf" class="drop_link" target='_BLANK'>Parallel Implements Enhanced 911 Service... </a>
									<a href="news06.shtml" class="drop_link">Double Diamond Associate Status with Nec... </a>									
									<a href="news04.shtml" class="drop_link">Parallel named as an Adtran Gold Partner...</a>
									<a href="news03.shtml" class="drop_link">Parallel named as an Authorized Partner for ShoreTel Inc...</a>
									<a href="news02.shtml" class="drop_link">Howard Hebb certified as a NEC Master Technician...</a>
									<a href="news01.shtml" class="drop_link">Columbus Zoo Improves Communications...</a>
                                    
									
									
								</div>
						</td><td width=7><img src="images/pipe.gif" class="middle"  alt=""/></td>
						<td class="navCell"  onmouseover="myexpand('testimonials',this)" onmouseout="theMouseOut(document.getElementById('testimonials'),event)">
							<a href="javascript: void(0)" class="nav_link">What Our Customers Are Saying</a>
								<div id="testimonials" class="drop" onmouseout="theMouseOut(document.getElementById('testimonials'),event)" style="width:260px;">
									<a href="t_10.shtml" class="drop_link">Beckfield College</a>
									<a href="t_13.shtml" class="drop_link">Big Walnut Local Schools</a>
									<a href="t_08.shtml" class="drop_link">Bluepoint</a>
									<a href="t_01.shtml" class="drop_link">Child Focus Inc.</a>
									<a href="t_02.shtml" class="drop_link">Columbus Ophthalmology Associates</a>
									<a href="t_05.shtml" class="drop_link">Midwest Express Group</a>
									<a href="t_04.shtml" class="drop_link">MTSO</a>
									<a href="t_09.shtml" class="drop_link">New Albany - Plain Local School District</a>
									<a href="t_11.shtml" class="drop_link">Neyra Industries, Inc.</a>
									<a href="t_17.shtml" class="drop_link">possitivity</a>
									<a href="t_14.shtml" class="drop_link">Silgan Containers Corp.</a>
									<a href="t_15.shtml" class="drop_link">Smith & Schaefer</a>
									<a href="t_16.shtml" class="drop_link">Tallo & Associates</a>
									<a href="t_07.shtml" class="drop_link">Therapy Support Inc.</a>
									<a href="t_06.shtml" class="drop_link">Trinity Debt Management</a>									
									<a href="t_03.shtml" class="drop_link">ViaQuest</a>
									<a href="t_12.shtml" class="drop_link">Wine Cellar Inovations</a>
								</div>
						</td><td width=7><img src="images/pipe.gif" class="middle"  alt=""/></td>
						<td class="navCell"  onmouseover="myexpand('about',this)" onmouseout="theMouseOut(document.getElementById('about'),event)">
							<a href="javascript: void(0)" class="nav_link">About Us</a>
								<div id="about" class="drop" onmouseout="theMouseOut(document.getElementById('about'),event)" style="width:120px;">
									<a href="mission_statement.shtml" class="drop_link">Mission Statement</a>
									<a href="company_history.shtml" class="drop_link">Company History</a>
									<a href="executives.shtml" class="drop_link">Executive Team</a>
								</div>
						</td><td width=7><img src="images/pipe.gif" class="middle"  alt=""/></td>
						<td class="navCell"  onmouseover="myexpand('contact',this)" onmouseout="theMouseOut(document.getElementById('contact'),event)">
							<a href="javascript: void(0)" class="nav_link">Contact Us</a>
								<div id="contact" class="drop" onmouseout="theMouseOut(document.getElementById('contact'),event)" style="width:145px;">
									<a href="mailto:sales@paralleltech.com?subject=Sales%20Inquiry" class="drop_link">Sales</a>
									<a href="mailto:service@paralleltech.com?subject=Service%20Request" class="drop_link">Service/Support</a>
									<a href="mailto:employment@paralleltech.com?subject=Employment%20Information" class="drop_link">Employment</a>
									<a href="mailto:shoretelseminars@paralleltech.com?subject=ShoreTel%20Seminar%20Inquiry" class="drop_link">VOIP Seminars</a>
									
									<a href="phone_fax.shtml" class="drop_link">Phone/Fax Numbers</a>
									<a href="addresses.shtml" class="drop_link">Mailing Addresses</a>
									<a href="directions.shtml" class="drop_link">Directions to our offices</a><font size="2"> </div></td>
					</tr>
				</table>
			
				</div>

Open in new window


Replace with the include line from my first post.


Then paste the html above into a new file called something like menu.js.  
Prefix each line with document.write('   put the line of text, end with ');
FOr lines where there is already a single quote, "escape" it by prefixing it with a backslash.  For example 'test' becomes \'test\'
0
 
LVL 7

Expert Comment

by:dimmergeek
ID: 39675503
@weinberk:
I'm curious, why do you feel that include files are a bad idea for menus?  I'm not arguing with you, but I use include files alot for my menus so I can only ever update one file.  I'm just wondering why you feel this is a bad idea.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 15

Expert Comment

by:weinberk
ID: 39675566
Including files in a general sense are fine.  Not really any different from what I recommended by using the javascript include.  I tend to shy away from "server side includes" / ssi because many (or most?) commercial hosts don't allow them.  Having it enabled can present a security risk, and also requires that every page be parsed by the server to see if there's a ssi.  Javascript includes on the other hand are processed by the client.  Of course, the server still needs to make another file request, but that's the only additional load.

See http://httpd.apache.org/docs/current/misc/security_tips.html#ssi
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 39675667
I would create the navigation in a separate file (call it navigation.html for ease) and then use a server-side include to include it on every page - no need to mess about with javascript and document.write(). Server-side includes are much more robust and is precicely what they're designed for. Once you've created the file, you will need to edit all your pages to replace the HTML with the following include script.

<!--#include virtual="/navigation.html" -->

Open in new window

This assumes the navigation.html file is on the root folder of your website. If it's not, change the path
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39676249
@Weinberk,
"because many (or most?) commercial hosts don't allow them." . The kind of low quality hosting that still does not allow includes are extremely rare, and are generally not suitable for anything but vanity sites.  No one should be paying for a hosting package that is that primitive.

As for the overhead, if we want to look as total elapsed time from request to final rendering the difference is in the range of 25-30ms and favors the server include solution, and also avoids issues around updates not be rendered for some users because they have a previous version of the javascript file cached.

Plus dynamic scripting at load time frequently breaks the document object and makes diagnostics more difficult.

Cd&
0
 

Author Comment

by:ehouser_paralleltech
ID: 39676383
@ChrisStanyon

Funny, I used your suggestion and it works EXCEPT it now puts funny characters on the page just above the nav bar?  Have a look at www.paralleltech.com and just below the banner and above the bar
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39676404
I would double check the files to make sure there are no stray characters in there. They can sometime be 'invisible' so delete any extraneous white space. You may also want to change your character encoding to UTF-8. The strange characters only appear on the homepage so they are more likely in that page, than the included file.
0
 

Author Comment

by:ehouser_paralleltech
ID: 39676544
The UTF-8 fixed it.   I had only applied the change to the main page so this is why it only appeared there.  Thanks
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

943 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now