Dreamweaver library elements are buggy and cause so many updating problems and I don't want to use them anymore. How does everyone else update, for example, the header section of every html page simultaneously without having to manually edit each page?
Here's 3 ways that aren't javascript's include function:
You could have php on your stack, and include files with php:
<?php
include('header.html');
This way used to be standard a long time ago, but no new site should be doing this anymore.
You could use a site generator, like Jekyll. Jekyll parses liquid statements on generation:
{% include header.html %}
This staticcms type of site generation is modern
You could use a javascript framework, like Angular. With angular, your pages get placed inside of a container div, and then you can put anything that shows up on every page (header, nav, footer) outside of the container:
<!DOCTYPE html>
<html>
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
Personally, I use angular. At work, our sites are react apps built in Jekyll. I assume that Facebook uses php, or a php framework like CodeIgniter
Related
I was trying to style a php file called dashboard.php with bootstrap. I only wrote some html code in the file to begin. When I test it, I found the styling in 'ul' tag was wrong. However other classes such as 'class="col-sm-2"' 'class="row"' are working as expect.
This is code in the dashboard.php:
<?php ?>
<!DOCTYPE>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<ul class="nav nav-pills nav-stacked" >
<li><a href="dashboard.php">
<span class="glyphicon glyphicon-th"></span>Dashboard</a></li>
<li><a href="#">
<span class="glyphicon glyphicon--list-alt"></span>Add New Post</a></li>
<li>Categories</li>
<li>Manage Admins</li>
<li>Comments</li>
<li>Live Blog</li>
<li>Logout</li>
</ul>
</div><!-- End of side area-->
<div class="col-sm-10">
</div><!-- End of main area-->
</div><!-- End of raw-->
</div>
</body>
</html>
This is the screen shot I made when testing the dashboard.php:
enter image description here
If you chack the image. The left side with words in blue belongs to 'ul' tag. The style is completely wrong. It also failed to add glyphicon icons. I checked the syntax of my html code , there seems nothing wrong.
I also want to add more information:
the extension of the file is .php
I opened the XAMPP with Apache opened
the url that opens the file dashboard.php is correct:
http://localhost/studyexample/PHPCMS/dashboard.php
Can you help me to find why the styling in 'ul' tag is completely wrong? Thank you so much.
The problem here may be that you are using relative URLs for your assets, but have not used a base tag. The easiest thing to do is just add a forward slash to the path to your assets. When I run your code in CodePen it looks like it should:
https://codepen.io/anon/pen/vpWLqo
So, what I mean is, for the following assets:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Add a forward slash so the URLs are absolute:
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
Once you do that, I think you'll find that things start looking different for you. If not, you'll need to specify more of a complete path to the assets, meaning you may need to have the full path, like:
<link rel="stylesheet" type="text/css" href="/studyexample/PHPCMS/css/bootstrap.min.css">
<script src="/studyexample/PHPCMS/js/jquery-3.2.1.min.js"></script>
<script src="/studyexample/PHPCMS/js/bootstrap.min.js"></script>
This is probably extremely simple but I can't figure it out. I am trying to have a pill show up as it appears in the Bootstrap documentation, however it is simply showing up as basic html text with a bullet next to it. I've looked through the documentation and other similar questions asked here but can't seem to figure out what is wrong.
My code:
<div>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Home</li>
</ul>
</div>
What it shows up as:
Home
Included in my header is:
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
Using Bootstrap 3.3
This seems to be a CSS problem. It is difficult to help you without your full code. Are using local files or do you load bootstrap from CDN?
Make sure Bootstrap is loaded correctly (CSS & Js).
Try replacing your link code with the following to see if it works
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
If it does, your link has a problem.
I have made a website in dreamweaver using bootstrap 3 and less.
I have used navbar default and customised it.
I have just added some extra pages to my site, such as about.html and blog.html
however, on these extra pages the dropdown menu doesn't seem to work. It does work fine on the homepage, with exactly the same code.
I have wrapped with a < li > already and just copy and pasted all the html into my new html files as follows, to have the navbar there on each page. Please advise if I have done something wrong, I am pretty much a complete beginner.Thanks!
<div class="header clearfix">
<nav class="text-center">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li>
Our Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>jhdhalbalb</li>
<li>hdjdjjdj</li>
<li>bdjdshbd</li>
</ul>
</li>
<li role="presentation">About us</li>
<li role="presentation">Blog</li>
<li role="presentation">Contact</li>
</ul>
</nav>
</div>
Add this to the head section of all your pages:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Sometimes bootstrap local files don't work - doing this will let you know if you should re-download them. This is something that has happened to me before.
Also your HTML is very messy, making it hard to really look through. Try cleaning it up a bit and making sure you're following W3 standards so you can follow your code and others can read it.
You should also read this: http://getbootstrap.com/javascript/#dropdowns Bootstrap dropdowns require an extra .js plugin.
I am making a website with only two main pages which are "Index" and "About me" pages. After making the templates and everything, I came across a confusing problem where I couldn't really edit the Css style of the about page.
Basically my About and Index page got the same template from my main Html (the one made from scratch) Which i thing it's fine there .. but I would like My About page to have a different look from my Index page, Everytime i make a change on the Editable region that I would like to make disappear from the About page, It also Affects the INdex page. Same for the Stylesheet, I want different colors on the about page but it seems like everytime i do something it affects the whole site.
Here is the picture of the site i made so far.
Homepage and about page
Both pages have the same template, same editable region and the same css and look exactly the same way at the moment but I would like to remove the div class:"notes" from the about page and expand the width of his div id="main-content" change completely almost every even the colors i mean the whole style of the about page, without affecting the Homepage and leave it as it is .. what should I do? Please
Thank you
PS: i am using Dreamweaver cs6.
main dwt html/ same html for the about and index page only difference is the for index and about are not editable
<code>
<!doctype html>
<html>
<head>
<!--JavaScript that enables Internet Explorer (version 8 and below) to recognise HTML5 elements -->
<script type="text/javascript">
document.createElement ('article')
document.createElement ('nav')
document.createElement ('aside')
document.createElement ('header')
document.createElement ('footer')
document.createElement ('main')
</script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/timothy.js"></script>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>My Uni Website</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<!--Write web page content and markup within the 'body' tags -->
<div id="outer">
<div class="frame">
<div class="fade"></div>
<img src="../images/huxley.jpg"/>
</div>
<div id="wrapper">
<!--The 'wrapper' div contains all the page content and can be styled -->
<div id="icon">
<ul>
<li><img src="../images/twitter.png" width="20" /></li>
<li><img src="../images/behance.png" width="20" /></li>
</ul>
</div>
<div id="logo"><a href><img src="../images/logo2.png" width="209" height="207"/></a></div>
<!--The main heading for the page -->
<header>
<!-- <h1>CI135 Learning journal</h1> -->
<h2> How I mastered web standards in 10 weeks</h2>
</header>
<!--The primary navigation for the page -->
<nav>
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
</ul>
</nav>
<!--Secondary sidebar navigation -->
<aside>
<div class="image"><img src="../images/information.png" width="100"/></div>
<div class="aside">
<!-- TemplateBeginEditable name="aside" -->
<h3> The Weekly posts </h3>
<ol>
<li>Getting started</li>
<li>Learning more about tags</li>
<li>Learning about lists and tables</li>
</ol>
<h3> Favourites</h3>
<ul>
<li> W3C markup validation service </li>
<li> Web platform Docs - Web development for beginners </li>
<li> Html5 Doctor - Helping you implement HTML5 today </li>
</ul>
<h3> Basic Definitions </h3>
<dl>
<dt><strong>HTML</strong></dt>
<dd>Hyper-text markup language - markup language used to structure content</dd>
<dt><strong>CSS</strong></dt>
<dd>Cascading stylesheets - used to tell browsers how to present HTML elements</dd>
<dt><strong>JavaScript</strong></dt>
<dd>Scripting language for adding interactive behaviour to web pages</dd>
</dl>
<!-- TemplateEndEditable -->
<h3> My time table </h3>
<table width="523" height="81" border="1">
<tr>
<td width="71" height="23" bgcolor="#FFFFFF">Day/Time</td>
<td width="215" bgcolor="#FFFFFF">Monday</td>
<td width="215" bgcolor="#FFFFFF">Tuesday</td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF">9-10 am</td>
<td> </td>
<td>Lecture</td>
</tr>
<tr>
<td height="23" bgcolor="#FFFFFF">10-11 am</td>
<td>lecture</td>
<td>Lab</td>
</tr>
</table>
</div>
</aside>
<!--The main page content -->
<main><!-- TemplateBeginEditable name="mainContent" -->
<article>
<!--Content node -->
<div class="header">
<h1>Week 3: Tables, link images, quoting text </h1>
</div>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3. </p>
</article>
<article>
<div class="header">
<h1>Week 2</h1>
</div>
<p>PS: ADD COMMENTS ABOUT WEEK 2.</p>
</article>
<article>
<div class="header">
<h1>Week 1</h1>
</div>
<p>ADD COMMENTS ABOUT WEEK 1. </p>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3</p>
</article>
<!-- TemplateEndEditable --></main>
<div id="right_side_note">
<div class="post"><!-- TemplateBeginEditable name="SideNotes" -->
<h2>Notes</h2>
<p class="date">March 22, 2011</p>
<p>The W3C defines HTML and CSS as follows:</p>
<blockquote>
<p>HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages. <br>
<cite>W3C standards for web </cite></p>
</blockquote>
<!-- TemplateEndEditable --></div>
</div>
<div id="footer">
<!--Footer content -->
<p class="footer-text">© 2013 Daniel Biakath / University of Brighton.</p>
</div>
</div>
</div>
<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html>
<code>
You should create two separate CSS files and put the styles for each page into the separate files, say about.css and home.css. From the about page, link to the about.css and from the home page link to the home.css.
A CSS link should look something like this:
<link rel="stylesheet" type="text/css" href="home.css">
CSS files are loaded in order so you will need to take that into consideration if styles are supposed to override each other. If the following is declared in the head and both files have a style with the same name, the style in the home.css file will be used. You might not be seeing changes made to the about.css if this is the case. The most important CSS file should be listed last.
<link rel="stylesheet" type="text/css" href="about.css">
<link rel="stylesheet" type="text/css" href="home.css">
If your styles are currently inline and look like this:
<style type="text/css">
/*YOUR STYLES HERE*/
</style>
you can make the changes in each file directly or if you want cut everything from inside the tag and put it in the appropriate css file.
If after making changes to your CSS nothing is happening, it is possible, depending on the system you are using, that cache is coming into play. Even though you make changes, the version served by the web server is the same. CSS files seem to do this a lot to me if I'm not careful. If that's the case, reset the website and clear browser cache and you should be good to go.
I am building a web page that uses the tag to navigate the page -
Menu
...
<nav id="mymenutag">
<ul>
<li class="first">Index</li>
<li>Happy</li>
<li class="last">Nowhere</li>
</ul>
/nav>
This generally works fine, except when I also include the script reference-
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
Then, the navigation no longer functions. There are a number of other jquery mobile scripts being loaded as well, but this is the one that breaks the navigation. There are some other ID Selectors that still work, but I think they are processed through jquery mobile. This one is not; it just navigates to a new location on the same page.
I set up a working example on github which can be found here:
https://github.com/hypnoboy/jqmobile_breaks_html5_navt
The behavior can be observed by clicking through the pages. As a bonus and to make it easier to see, I added a jpg photo of my favorite "WTF" software installation moment.
Here is a complete sample web page in which the problem can occur:
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<!--begin entries for jquerymobile-->
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="libs/jquery-1.9.1.min.js" type="text/javascript"></script>
<!--end entries for jquerymobile-->
</head>
<body>
<!-- start of navigation -->
Menu
<!-- end of navigation -->
<script src="libs/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<!-- causes href navigation in the page to fail -->
<header><div class=main_heading>
<h1>Sad Test App (jquery.mobile-1.3.1.min.js is running)</h1></div>
</header>
<p>This is some sample text
</p>
Menu
Menu
<img id="front" src="WP_000241.jpg"/>
<!--start of navigation-->
<nav id="mymenutag">
<ul>
<li class="first">Index</li>
<li>Happy</li>
<li class="last">Nowhere</li>
</ul>
</nav>
<!-- /end of navigation -->
<script src="js/vendor/jquery-2.0.2.min.js"></script>
<script src="js/helper.js"></script>
<script src="js/main.js"></script>
<script src="libs/app.js" type="text/javascript"></script>
<script src="pages.js" type="text/javascript"></script>
<footer data-role="footer" data-position="fixed">
<h1>Footer</h1>
</footer>
</body>
</html>
Any assistance appreciated.
One of JQuery Mobile traits is loading 2 pages at once into the DOM and showing just one. It is part of the JQM ajax functionality. If you have used an ID in a master page or part that is loaded into more than 1 of your pages you will probably find that upon inspecting your source at runtime you have duplicate IDs
Turning off the ajax functionality and having it do postbacks is a workaround, or use classes
Image showing the issue (image from pluralsight course video)