I'm building 2 websites as I go along and I want them both to work with the same data base on 1 server how do I do that ?? 2... I'm using dreamweaver and file paths are to long file:///C|/Users/justin/Desktop/tomvids/root/vidstyle/style.css" will that file path affect my design when I upload to the webserver and if so since I'm coding in dreamweaver will I have to rename some files as to not confuse the computer?? they have they own folders main and sub
It's bad enough that you're bogging yourself down with DW, but not using a web server for development is just begging for trouble. There's no way for that to act as a web site. cheers, gary
What you see in dream weaver, is not what you are going to see when you put it on a web server. Yes you are going to have to change the paths; those are local pc directory paths using nothing but a file protocol, a totally different environment from a server. You need to set up a server on your development machine because at the moment your chances of things working correctly are a little les than the odds of winning the big prize in the lottery.
@COBOLdinosaur how to set a server up?? I have xammp should I build my websites in xammp?? and if so wont I have the same problem with the file being in htdocs??
That's where the magic of RELATIVE links and a well organized directory structure comes into play. IF you write the site PROPERLY, your links on the page should not have the http or the :// or even a path on them. The DEFAULT relationship for a file in a HREF or SRC attribute in HTML is the directory that HTML file is in, or for URL in CSS from the location of that CSS file. So if for example let's say you had your index.html in: C:\xampp\htdocs\currentProject\index.html aka via the browser: localhost/currentProject/index.html ...and your screen media CSS was at: C:\xampp\htdocs\currentProject\template\default\screen.css aka localhost/currentProject/template/default/screen.css Your LINK tag in the HTML to that stylesheet could simply be said as: <link rel="stylesheet" type="text/css" href="template/default/screen.css" media="screen,projection,tv" > Code (markup): If you had a content image that was something like: C:\xampp\htdocs\currentProject\images\screenshot.jpg aka localhost/currentProject/images/screenshot.jpg The image tag to include it can simply be stated as: <img src="images/screenshot.jpg" alt="Screenshot of current project" > Code (markup): This is all because as the HTML file is at C:\xampp\htdocs\currentProject aka localhost/currentProject, that is assumed for any links that don't have a location identifier (the protocol:// part) before them. The same happens inside the CSS file. If you have a presentational image (aka part of the template, not part of the content) at: C:\xampp\htdocs\currentProject\template\default\images\background.png The CSS can simply be stated as: background:url(images/background.png); Code (markup): as that screen.css is at C:\xampp\htdocs\currentProject\template\default\ -- so it's assumed. Because this makes all the links to internal resources on the page "relative" to the document locations, it's "portable" to regardless of where you move that project directory! Another method to be aware of is the "up-tree link" -- "../" Every time you say ../ it means "go up a directory" so for example if you wanted to access: C:\xampp\htdocs\currentProject\images\screenshot.jpg As a CSS background from: C:\xampp\htdocs\currentProject\template\default\screen.css the code would be: background:url(../../images/screenshot.jpg); Code (markup): pretty much every "../" in the URI removes a directory from the end of the currently active path... so that first ../ removes \default from the end, then the next one removes \template so we're at C:\xampp\htdocs While a valid technique, if you have to resort to using it there may be somethign wrong with how you are building things. ADMITTEDLY a LOT of off the shelf solutions are built "wrong" so you may end up using it anyways. You will also find when/if you get into deeper server side concepts and languages like PHP that the up-tree ../ style link can be a security issue you need to filter out of user requests... particularly if hosting on a system like winblows where filesystem security is, well... an utter and complete joke. I TRY to avoid using ../ in my code as much as possible, in fact if I write the entire page and back end system you'll never find it used once. BUT, you start working with sloppy code written by people who don't know any better on existing systems, you need to be aware of it and often end up forced to use it. Another thing to be aware of is what a leading slash does. If you put a / at the start of the URI, it will assume the BASE directory of the current location, not the location of the file... This can be really useful, or it can bite you in the ass when it's time to move the page live or between servers. For example, if you did: <img src="\test.jpg" alt="test image"> Code (markup): If you were on a live web server in the root directory, that would access the file in the HTTP root. But if you were in a subdirectory, well... let's use XAMPP as our example. That would try to access: C:\xampp\htdocs\test.jpg aka localhost/test.jpg and NOT C:\xampp\htdocs\currentProject\test.jpg aka localhost/currentProject/test.jpg That leading slash basically kills all directories in the link. Would be the same thing from the CSS: background:url(/test.jpg); Would still point to localhost/test.jpg regardless of where the screen.css is located. If you want to write truly portable code, you'll stick to just the first method and organize your directory structure accordingly. A typical project of mine usually follows this structure: \ == project root, location of all user callable .html or .php \downloads\ == files the user can download (duh) \images\ == content images, aka stuff that's not presentation and/or used by the template. \media\ == audio or video content \templates\ == root for having multiple templates. \templates\default == default template location If you write your HTML properly, it's possible to easily change templates/layouts by just having other directories for your different template and CSS includes. Following this structure means you don't need to up-tree link with "../", and you really shouldn't "need" to use the root "/" either... though I often have the "home" href on things like menu or my H1 be: <h1><a href="/">Site Title</a></h1> Since the LIVE copy of the site is going to be in the root 99.99% of the time. Link sends me the wrong place in local testing I don't sweat that. Portability is one of the most important things to master, particularly in controlling "code bloat" -- garbage halfwit systems like Wordpress vomit up "absolute" URI's on EVERYTHING when they don't have to, often to the point that you could reduce the output code size 25% just by using the above techniques! (then kill another 25% by not throwing endless pointless DIV for nothing and endless pointless classes for nothing... and another 25% by removing the static style and scripting from the markup... Turdpress sucks.) Hope that helps clarify the methodology on that. It's tricky at first, but once you start using it you'll find it will suddenly "click" in your head. You use just "down-tree" linking from the file location to make it "portable" you can move that directory around, rename it, upload it until blue in the face, and it will still work! ... which is actually pretty damned slick if you think about it. The only LEGITIMATE reason to use a full URI in your href/src attributes or CSS url properties is if the file is NOT on the same server. That's it, if you use it for a file on the same server, that's just code bloat and developer ineptitude and/or ignorance. The latter isn't an insult, there's nothing wrong with not knowing something, that's why you ask. The former on the other hand...
Oh, and to use your example URI from your thread starter, can I assume that index.html or whatever HTML file is calling it is in: C:\Users\justin\Desktop\tomvids\root\ If so, your <link> tag would simply be: <link rel="stylesheet" type="text/css" src="vidstyle/style.css" media="screen,projection,tv" > Code (markup): Then when you copy the contents of /root/ to the live server, the link will still work as it's relative to the HTML file's location! Little side note, try to use meaningful names for your files, and not uselessly vague and pointless ones like "style" -- since that's basically saying "style cascading style sheet" -- a little redundant. I like to use names that say what the media target is -- if you aren't using media targets on your <link> tags you've also missed an important part of how to use CSS and why it even exists. (...and why the <style> tag is pointless rubbish and why 99.99% of the time people use style="" they REALLY shouldn't!) Oh, and do yourself a favor... others nicely mentioned it, I'm gonna come right out and say it.... THROW THAT STEAMING PILE OF MANURE KNOWN AS DREAMWEAVER IN THE BIN!!! The ONLY thing you can learn from it is how not to build a website; the only thing about Dreamweaver that can be considered professional grade tools are the people who promote it's use. There are a LOT of apologists and people who defend it -- I have come to the conclusion that such people do not know enough about HTML, CSS or site development to be flapping their gums on the topic! Learn HTML, learn CSS, then go get a normal flat text programmers editor. Personally I like "Flo's Notepad 2", but try a bunch of them out -- there's notepad++, editplus, sublime -- any of them are fine, just find one you like and get to know it. Work in the code, test in actual browsers not some goofy preview pane bull.... ... and when I say test in the browserS -- pay attention to the plural. Browsers generally do not all act the same, so it's important to test AS YOU STYLE EACH SECTION in at LEAST three different browser engines, possibly back to four at this point since Safari is aging so poorly since Google absconded with all the talent, that some folks have taken to calling it "The new IE6".