Unable to include css and JS files in Liferay Portlet JSP Page

Question

I have download a Jquery Image Slider source and want to integarte with my JSP File

This is my Folder Struture

This is the way i am including them

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link type="text/css" href="/css/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="/css/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="/css/jquery.ui.slider.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen"/>

I get this 404 in server console

20:50:04,625 WARN [404_jsp:109] /css/jquery.ui.theme.css
20:50:04,640 WARN [404_jsp:109] /css/jquery.ui.core.css
20:50:04,640 WARN [404_jsp:109] /css/jquery.ui.slider.css
20:50:04,656 WARN [404_jsp:109] /css/style.css
20:50:04,671 WARN [404_jsp:109] /js/cufon-yui.js
20:50:04,671 WARN [404_jsp:109] /js/GreyscaleBasic.font.js
20:50:04,687 WARN [404_jsp:109] /js/jquery.easing.1.3.js

Answer 1

Put the links in liferay-portlet.xml and let Liferay load the css and javascript. That is the better way (e.g. if user wants put two portlets to one page).

liferay-portlet.xml:

<header-portlet-css>/css/main.css</header-portlet-css>
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>

And Olaf is right, you must move the css- and js-folders (and images too) from WEB-INF to docroot folder