Copy link to clipboard
Copied
I am a beginner of Dreamweaver, but currently working on revising university website pages. I found there are pages I can't insert a carousel. I can make carousel on the new HTML page but it does not work when I paste the code on the bad page. I can insert carousel in the original page, but when I link the page to other pages and close, then carousel got broken into 3 pictures. Even I comment out all java script, carousel does not appear in a proper shape. The HTML of the bad page with broken carousel is attached. Please let me know if I can get a carousel on this page.
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-171786245-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-171786245-1');
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="../ja/js/styleswitcher.js"></script>
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../ja/js/jquery.js"></script>
<script type="text/javascript" src="../ja/js/style.js"></script>
<script type="text/javascript" src="../ja/js/rollover.js"></script>
<script type="text/javascript" src="../ja/js/navi_rollover.js"></script>
<script type="text/javascript" src="../ja/js/script.js"></script>
<link rel="stylesheet" href="../ja/css/style.css" type="text/css" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overview: Graduate School of Fisheries Science and Environmental Studies, Nagasaki University</title>
</head>
<body>
<div id="container">
<div id="header">
<noscript>
<div id="noscript">
Your browser appears to have JavaScript disabled.<br />
The features of this page may not work nor display properly if your browser has JavaScript disabled.<br />
To view all information, we recommend that you enable JavaScript (activate) in the browser settings.
<!-- end #noscript --></div>
</noscript>
<div class="content">
<div class="skipNavigation">
<p>
You may skip common menus on this page and directly view the text. To directly view text, click "Go to main body."<br />
<a href="#section1">Go to main body.</a>
</p>
<!-- .skipNavigation --></div>
<div id="logo">
<p>
<a href="../index.html"><img src="../images/common/logoE.gif" alt="Nagasaki University" /></a>
</p>
<!-- end #logo --></div>
<div id="tools">
<div id="langNavigation">
<ul>
<li><a href="../../index.html"><img src="../images/common/japanese.gif" alt="Japanese" /></a></li><!--
--><li><a href="../index.html"><img src="../images/common/english.gif" alt="English" /></a></li>
</ul>
<!-- end #langNavigation --></div>
<div id="contactNavigation">
<ul>
<li><a href="../contact/index.html">Contact</a></li><!--
--><li><a href="../access/index.html">Access Guide</a></li><!--
--><li><a href="../sitemap/index.html">Site map</a></li>
</ul>
<!-- end #contactNavigation --></div>
<div id="mojisize">
<ul>
<li><img src="../images/common/moijE.gif" alt="Change the font size" /></li><!--
--><li><a href="#top" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;"><img src="../images/common/bigE.gif" alt="Make the font larger." /></a></li><!--
--><li><a href="#top" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;"><img src="../images/common/smallE.gif" alt="Make the font smaller." /></a></li><!--
--><li><a href="#top" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;"><img src="../images/common/resetE.gif" alt="Default" /></a></li>
</ul>
</div>
<div id="search">
<form method="get" action="http://www.google.com/search">
<table cellpadding="0" cellspacing="0">
<tr valign="top">
<td><a href="http://www.google.com/"><img src="../images/common/google_logo.jpg" border="0" alt="Google" align="absmiddle" width="50" height="20" /></a></td>
<td><input type="text" name="q" size="22" maxlength="255" value /><!--
--><input type="hidden" name="ie" value="utf-8" /><!--
--><input type="hidden" name="oe" value="utf-8" /><!--
--><input type="hidden" name="hl" value="en" /><!--
--><input type="submit" name="btnG" value="Search this site" /><!--
--><input type="hidden" name="as_sitesearch" value="http://www.fe.nagasaki-u.ac.jp" />
</td>
</tr>
</table>
</form>
<!-- end #search --></div>
<!-- end #tools --></div>
<!-- end .content --></div>
<div id="globalNavigation">
<ul>
<li><a href="../prospective/index.html"><img src="../images/common/prospectiveE_n.gif" alt="For Prospective Students" /></a></li><!--
--><li><a href="../student/index.html"><img src="../images/common/studentE_n.gif" alt="For Current Students" /></a></li><!--
--><li><a href="../alumni/index.html"><img src="../images/common/alumniE_n.gif" alt="For Alumni" /></a></li><!--
--><li><a href="../business/index.html"><img src="../images/common/businessE_n.gif" alt="For the General Public and Businesses" /></a></li>
</ul>
<ul>
<li><a href="../index.html"><img src="../images/common/homeE_n.gif" alt="Home" /></a></li><!--
--><li><a href="../greeting/index.html"><img src="../images/common/greetingE_n.gif" alt="Dean's Message" /></a></li><!--
--><li><a href="../outline/index.html"><img src="../images/common/outlineE_n.gif" alt="Overview" /></a></li><!--
--><li><a href="../research/index.html"><img src="../images/common/researchE_n.gif" alt="Education" /></a></li><!--
--><li><a href="../intro/index.html"><img src="../images/common/introE_n.gif" alt="Laboratories" /></a></li>
</ul>
<!-- end #globalNavigation --></div>
<!-- end #header --></div>
<div id="contents">
<p id="topicPath">
<a href="../index.html">Home</a> > Overview
</p>
<div id="section1">
<div class="skipNavigation">
<p>
The main body starts here.
</p>
<!-- end .skipNavigation --></div>
<h1>Overview</h1>
<p>
The Graduate School of Fisheries Science and Environmental Studies was established in April 2011 through a reorganization of the Graduate School of Science and Technology, based on the Faculty of Fisheries and the Faculty of Environmental Studies. The fundamental principle of the new Graduate School is: "To cultivate both advanced specialists with practical leadership skills and internationally competent researchers, who can address and provide solutions to environmental and food-security issues, by promoting education and research in interdisciplinary and comprehensive academic fields of fisheries science and environmental studies".
</p>
<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: grey">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img class="d-block mx-auto" src="../images/Carousel_Placeholder.png" alt="First slide" />
<div class="carousel-caption">
<h5>First slide Heading</h5>
<p>First slide Caption</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="../images/Carousel_Placeholder.png" alt="Second slide" />
<div class="carousel-caption">
<h5>Second slide Heading</h5>
<p>Second slide Caption</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="../images/Carousel_Placeholder.png" alt="Third slide" />
<div class="carousel-caption">
<h5>Third slide Heading</h5>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<!-- end #section1 --></div>
<div id="section2">
<div id="localNavigation">
<dl>
<dt>Overview</dt>
<dd>
<ul>
<li><a href="philosophy.html" class="off">Departmental Philosophy</a></li>
<li><a href="organization.html" class="off">Organization</a></li>
<li><a href="organization.html" class="off">History</a></li>
</ul>
</dd>
</dl>
<!-- end #localNavigation --></div>
<!-- end #section2 --></div>
<!-- end #contents --></div>
<div id="footer">
<p class="pageTop">
<img src="../images/map.JPG" width="603" height="609" alt=""/><a href="#container">To the top of this page.</a>
</p>
<div class="globalNavigation">
<p>
| <a href="../index.html">Home</a><!--
--> | <a href="../greeting/index.html">Dean's Message</a><!--
--> | <a href="../outline/index.html">Overview</a><!--
--> | <a href="../research/index.html">Education</a><!--
--> | <a href="../intro/index.html">Laboratories</a>|
</p>
<!-- end .globalNavigation --></div>
<div id="copyright">
<p>
Graduate School of Fisheries Science and Environmental Studies, Nagasaki University 1-14 Bunkyo-machi, Nagasaki 852-8521, Japan<br />
Copyright© Nagasaki University, All Rights Reserved.
</p>
<!-- end #copyright --></div>
<!-- end #footer --></div>
<!-- end #container --></div>
<script src="../js/jquery-3.4.1.min.js"></script> <script src="../js/popper.min.js" type="text/javascript"></script> <script src="../js/bootstrap-4.4.1.js" type="text/javascript"></script>
<script src="../js/popper.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-4.4.1.js" type="text/javascript"></script>
</body>
</html>
Have a look at
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-4.4.1.js" type="text/javascript"></script>
<script src="../js/popper.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-4.4.1.js" type="text/javascript"></script>
where you have called both bootstrap.js and popper.js twice. Also, in line #20 you have called jquery.js as well as in the above. This
...Copy link to clipboard
Copied
Have a look at
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-4.4.1.js" type="text/javascript"></script>
<script src="../js/popper.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-4.4.1.js" type="text/javascript"></script>
where you have called both bootstrap.js and popper.js twice. Also, in line #20 you have called jquery.js as well as in the above. This is enough to throw the program out of wack.
Document declaration should always appear on line #1. This does not happen in your case as you can see
<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="ja" lang="ja">
You are using the Bootstrap framework which relies heavily on HTML5, yet your document type is XHTML1
Copy link to clipboard
Copied
Thank you very much! This answer clears all misteries. I am now aware that using Dreamweaver command on the wrong HTML causes troubles. This site is our departmental English page, which was made 6 years ago by an external office, and never renewed. There is nobody in charge of this site. I am a faculty of the department with no knowledge of making website, but received a full data package of this site to update the information. I thought it would be nice to add photographs on the page, preferably in the form of carousel.
Is it possible to put carousel without rewriting the entire code? I appreciate your suggestion.
Copy link to clipboard
Copied
"Is it possible to put carousel without rewriting the entire code?"
==========
That's like asking if you can make an omelet without breaking some eggs. Short answer: no.
Long answer: For compatibility reasons, the entire code should be updated to the latest HTML5, CSS, JavaScript and Bootstrap framework.
As a no-frills workaround, insert static images without the Carousel.
Copy link to clipboard
Copied
Delete the following lines and see how you go with the carousel.
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/popper.min.js" type="text/javascript"></script>
<script src="../js/bootstrap-4.4.1.js" type="text/javascript"></script><script src="../js/popper.min.js" type="text/javascript"></script><script src="../js/bootstrap-4.4.1.js" type="text/javascript"></script>
Copy link to clipboard
Copied
Thank you so much for suggesting this. I tried but it did not work.
I understand that my HTML code is wrong, but I still do not understand that there are some pages I could successfully insert carousel. These are also XHTML1. Successful page is attached. Could you please tell me why
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-171786245-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-171786245-1');
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="ja/js/styleswitcher.js"></script>
<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css" />
<!-- <script type="text/javascript" src="ja/js/jquery.js"></script> -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="ja/js/style.js"></script>
<script type="text/javascript" src="ja/js/rollover.js"></script>
<script type="text/javascript" src="ja/js/navi_rollover.js"></script>
<script type="text/javascript" src="ja/js/script.js"></script>
<link rel="stylesheet" href="ja/css/style.css" type="text/css" />
<meta name="description" content="" />
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.10.0 for Windows" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Graduate School of Fisheries and Environmental Sciences, Nagasaki University</title>
<link rel="stylesheet" href="ja/css/index.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<noscript>
<div id="noscript">
Your browser appears to have JavaScript disabled.<br />
The features of this page may not work nor display properly if your browser has JavaScript disabled.<br />
To view all information, we recommend that you enable JavaScript (activate) in the browser settings.
<!-- end #noscript --></div>
</noscript>
<div class="content">
<div class="skipNavigation">
<p>
You may skip common menus on this page and directly view the text. To directly view text, click "Go to main body."<br />
<a href="#section1">Go to main body.</a>
</p>
<!-- .skipNavigation --></div>
<div id="logo">
<p>
<a href="index.html"><img src="images/common/logoE.gif" alt="Nagasaki University" /></a>
</p>
<!-- end #logo --></div>
<div id="tools">
<div id="langNavigation">
<ul>
<li><a href="../index.html"><img src="images/common/japanese.gif" alt="Japanese" /></a></li><!--
--><li><a href="index.html"><img src="images/common/english.gif" alt="English" /></a></li>
</ul>
<!-- end #langNavigation --></div>
<div id="contactNavigation">
<ul>
<li><a href="contact/index.html">Contact</a></li><!--
--><li><a href="access/index.html">Access guide</a></li><!--
--><li><a href="sitemap/index.html">Site map</a></li>
</ul>
<!-- end #contactNavigation --></div>
<div id="mojisize">
<ul>
<li><img src="images/common/moijE.gif" alt="Change the font size" /></li><!--
--><li><a href="#top" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;"><img src="images/common/bigE.gif" alt="Make the font larger." /></a></li><!--
--><li><a href="#top" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;"><img src="images/common/smallE.gif" alt="Make the font smaller." /></a></li><!--
--><li><a href="#top" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;"><img src="images/common/resetE.gif" alt="Default" /></a></li>
</ul>
<!-- end #mojisize --></div>
<div id="search">
<form method="get" action="http://www.google.com/search">
<table cellpadding="0" cellspacing="0">
<tr valign="top">
<td><a href="http://www.google.com/"><img src="images/common/google_logo.jpg" border="0" alt="Google" align="absmiddle" width="50" height="20" /></a></td>
<td><input type="text" name="q" size="22" maxlength="255" value /><!--
--><input type="hidden" name="ie" value="utf-8" /><!--
--><input type="hidden" name="oe" value="utf-8" /><!--
--><input type="hidden" name="hl" value="en" /><!--
--><input type="submit" name="btnG" value="Search this site" /><!--
--><input type="hidden" name="as_sitesearch" value="http://www.fe.nagasaki-u.ac.jp" />
</td>
</tr>
</table>
</form>
<!-- end #search --></div>
<!-- end #tools --></div>
<!-- end .content --></div>
<div id="globalNavigation">
<ul>
<li><a href="prospective/index.html"><img src="images/common/prospectiveE_n.gif" alt="For Prospective Students" /></a></li><!--
--><li><a href="student/index.html"><img src="images/common/studentE_n.gif" alt="For Current Students" /></a></li><!--
--><li><a href="alumni/index.html"><img src="images/common/alumniE_n.gif" alt="For Alumni" /></a></li><!--
--><li><a href="business/index.html"><img src="images/common/businessE_n.gif" alt="For the General Public and Businesses" /></a></li>
</ul>
<ul>
<li><a href="index.html"><img src="images/common/homeE_n.gif" alt="Home" /></a></li><!--
--><li><a href="greeting/index.html"><img src="images/common/greetingE_n.gif" alt="Dean's Message" /></a></li><!--
--><li><a href="outline/index.html"><img src="images/common/outlineE_n.gif" alt="Overview" /></a></li><!--
--><li><a href="research/index.html"><img src="images/common/researchE_n.gif" alt="Education" /></a></li><!--
--><li><a href="intro/index.html"><img src="images/common/introE_n.gif" alt="Laboratories" /></a></li>
</ul>
<!-- end #globalNavigation --></div>
<!-- end #header --></div>
<div id="contents">
<div id="mainVisual">
<div id="main">
<p><img src='images/main_imgE.jpg' alt='' /></p>
</div>
<!-- end #mainVisual --></div>
<div id="section1">
<h1>長崎大学</h1>
<div class="topicsList">
<div class="heading" id="heading_in">
<h2 class="text-center">The Graduate School of Fisheries and Environmental Sciences</h2>
<main>
<p> The Graduate School of Fisheries and Environmental Sciences trains practice-oriented researchers with comprehensive problem-solving abilities. We help students acquire specialized knowledge that contributes to solve environmental problems and build a sustainable society that coexists in harmony with the environment.</p>
</main>
<!-- end .heading --></div>
<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: grey">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img src="images/Nagasaki Night view.jpeg" alt="First slide" height="510" class="d-block mx-auto" />
<div class="carousel-caption">
<p>Nagasaki Harbor</p>
</div>
</div>
<div class="carousel-item">
<img src="images/unzen.jpg" alt="Second slide" height="510" class="d-block mx-auto" />
<div class="View of Nagasaki">
<p>Unzen National Park</p>
</div>
</div>
<div class="carousel-item"> <img src="images/99islands.jpg" alt="Third slide" height="510" class="d-block mx-auto" />
<div class="carousel-caption">
<p>Ninty Nine Islands</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<!-- end .topicsList --></div>
<!-- InstanceEndEditable -->
<!-- end #section1 --></div>
<div id="section2">
<div id="localBanner">
<ul>
<li><a href="http://www.fe.nagasaki-u.ac.jp/5year/english/index.html" target="_blank"><img src="images/banner/fish_env_5.gif" alt="Nagasaki University Marine Science 5-year doctoral program" /></a></li>
<li><a href="http://www.nagasaki-u.ac.jp/en/" target="_blank"><img src="images/banner/nagasaki_univE.gif" alt="Nagasaki University" border="0" /></a></li>
<li><a href="http://www.fish.nagasaki-u.ac.jp/index.htm" target="_blank"><img src="images/banner/fish_facE.gif" alt="Faculty of Fisheries" /></a></li>
<li><a href="http://www.env.nagasaki-u.ac.jp/english/index.html" target="_blank"><img src="images/banner/env_facE.gif" alt="Faculty of Environmental Science" /></a></li>
<li><a href="http://www-mri.fish.nagasaki-u.ac.jp/english/" target="_blank"><img src="images/banner/mrifishE.gif" alt="Institute for East China Sea Research" /></a></li>
</ul>
<!-- end #localBanner --><a href="info/pamphlet.pdf" target="_blank"><img src="images/banner/pamhlet.gif" width="210" height="275" border="0" /></a></div>
<!-- end #section2 --></div>
<!-- end #contents --></div>
<div id="footer">
<p class="pageTop">
<a href="#container">To the top of this page</a>
</p>
<div class="globalNavigation">
<p>
|<a href="index.html">Home</a><!--
-->|<a href="greeting/index.html">Dean's Message</a><!--
-->|<a href="outline/index.html">Overview</a><!--
-->|<a href="research/index.html">Education</a><!--
-->|<a href="intro/index.html">Laboratories</a>|
</p>
<!-- end .globalNavigation --></div>
<div id="copyright">
<p>
Graduate School of Fisheries and Environmental Sciences, Nagasaki University 1-14 Bunkyo-machi, Nagasaki 852-8521, Japan<br />
Copyright© Nagasaki University, All Rights Reserved.
</p>
<!-- end #copyright --></div>
<!-- end #footer --></div>
<!-- end #container --></div>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap-4.4.1.js" type="text/javascript"></script>
</body>
</html>
this work, and other doesn't?
Copy link to clipboard
Copied
Is there a reason why one jQuery line is commented out in the working copy?
Copy link to clipboard
Copied
I am sorry for bothering you so much, and thank you for checking, but it did not work. I do not know why the line was commented out. I put the line back but it did not fix the problem.
This is my last questions. Please bear with me one more time. Nancy said that any code change could have adverse effects on other parts, does she mean that I should not convert this page to HTML5?
Copy link to clipboard
Copied
To make things easier for us to see what is wrong, please supply the URL (address) to the site.
Copy link to clipboard
Copied
As Ben said, this will never work in your current document. Suggest you please contact whoever is in charge of this site before you proceed. Any code changes that you make could have adverse effects on other parts of the site that we cannot see.