Hi there. I’m a total novice. Just used Dreamweaver to create a two page website. Page one just has a background and a separate image overlayed, that once clicked takes you to Page two.
My issue is I’ve got no idea what I need to upload to the public_html folder, and whether, once there, I need to organise the files in a certain way so that the images are still sourced properly?
upload all the files but page one should be named “Index.html”
Thanks @akhilkumar332. Couple of follow up questions:
a) When you say ‘all the files’, what should that include?
b) Is the index file something I can create automatically in Dreamweaver? If not, what is it/whatdo I need to do to recreate it?
all the files:- includes your html file, images and so on
u said have two files…one is page one and another is page two…
so…dont have to create it…
just rename page one to “index.html” before uploading
or u can save page one again as “Index.html”
see…now u have like this
now rename or save again “pageone.html” to "index.html"
like this
make sure it is an html document
Thanks! That seems to have done the trick: https://androojb.000webhostapp.com/
So the site is now actually live, but now the images aren’t being sourced as the original html has the file as if it’s on my desktop:
Do you know what the path should look like for the two images involved? (ie the paths to source “hello.jpg” and “im.png”?)
Thanks for all your help btw
But by the way i just checked your site…both images seems be to perfectly showing…one in background and one in foreground and the path u have given is “Image/hello.jpg” and “Image/im.png”
and also another problem is you map does’t show up…which is there on page (left bottom side) its like Invisible its hard to find and click to go to "pagetwo.html"
correct it by,
removing "map related all three lines"
and instead of map use this:
It will look like this
if you want u can do these changes!!!
yess thanks, i found another thread which explained where the path came from, then put my image files in an ‘image’ folder and did it from there
in terms of your other suggestion, I’m kinda confused, which lines should I delete?
If I delete the bottom 3 then the usemap="#Map" command is still there, but even when I remove that the link at the bottom doesn’t appear either. (Is there a delay between updating the html in the file manager and it being updated when you load the site again?)
My plan was just that I was going to change the shape of the map to cover the entire foreground ‘Britain’ image. If I wanted to do that, how would I?
Sometimes…if u overwrite over existing file…the changes are not made…i personally faced this
Can u tell me…Y do u want to change the shape of the map to cover the entire foreground ‘Britain’ image?
Is this your plan…that u can click anywhere and go to pagetwo…thats y u want to cover the entire foreground ‘Britain’ image?
u can make these changes…
this will make your website adapt to any screen
If you want the entire foreground “Britain” image to be a link, it’s really quite simple! All you need to do is wrap an <a> tag around your <img> tag, like so:
<a href="pagetwo.html"><img src="image/im.png" alt=""></a>
You don’t need to use usemap at all! That’s only for special cases, like if you have an image with multiple, complex shapes on top of it, and want links over each of those shapes.
Example: BitDegree Area Map Example
In general, it’s considered better practice to style your images and such in your CSS code, instead of in your HTML coding (<img src="image/im.png" alt="" width="1366" height="768">). Try writing:
img {
width: 1366px;
height: 768px;
}
Of course, this will alter ALL images on your page that way, so if you only want to identify that particular image, you should give it an id and identify it that way in your CSS.
If you want your code to be responsive, you can even add the following line:
img {
width: 1366px;
max-width: 100%;
height: 768px;
}
The max-width won’t allow your image to be any wider than the body of the HTML document. Providing you have the <meta name="viewport" content="width=device-width, initial-scale=1"> tag in the head of your document, this should make everything nicely responsive on mobile… though it will distort the image because of your height property. (This can also be fixed, but it’s less simple. The more you add and the pickier you are, the more complicated it gets, of course. ;))
Hi, I am new here. This page helped me a lot to for file uploading. But I can’t link css file to html file. All images are uploading in my website correctly but website not connected to my css file… Please check my website http://nipulisa.000webhostapp.com/ . it showing all images path are correct but css not. My css file is in public_html folder. My css file’s link path is href="style.css". Is there any wrong? Please help!! I am attaching screenshot. so you can understand.
Also is there any restriction here for using Favicon? I link it correctly. But not showing in my website.
Sometimes its showing “404 Not Found”. Why this is?
@nipulisa make this changes:
looks like this
href=“style.css”
change to
href=“Style.css”
(instead of lower case letter “s”… use upper case letter “S”…your problem will be solved)
or
rename css file to “style.css” which is there in public_html
it will look like this
To add favicon…add this
and place favicon.ico to public_htmlHi, Thanks for your replay. Yes css problem is solved. But couldn’t solved the Favicon problem. Which to add…? Didn’t find the line in your comment. Also other two problem showing.
1> I have slider in my index pages. But its not working and
2> I have a map in my let’s connect page. But it is not showing.
What should I do?
I have favicon in .ico format.
And Slider and map not working here from my side. Is there any wrong?
Here is the slider and Map screenshot
@nipulisa I see that your favicon is working
And the favicon link should be this
As of now only Index.html has correct favicon link…
make changes in other html files too …to make it work
