Proper Way to Reference CSS

Question

I'm struggling a bit with a conversion to Dreamweaver from MS Expression Web, but my question is really a generalized issue. I want to know the best way to refer to my CSS from each HTML file (which I do from a Template).

What I WANT to do is this:

My understanding is that leading slash takes me to the base domain (either HTTP:// or HTTPS:// followed by, for example, mydomain.com), regardless of whether or not my HTML is in a subdirectory. That doesn't seem to work right while editing in Dreamweaver, so I put the full domain in there:

I don't like that, because then I can't experiment with CSS changes with Dreamweaver: I have to publish first; but the relative reference idea above (/css/...) doesn't seem to work within Dreamweaver.

So my question is, what is the BEST way to do this? It turns out my base domain name may change after a testing period, so it would be nice to generalize, though I could make a global change via the Template, so that's not critical. I do not currently use a BASE element, so I will certainly take advice on that, too.

Thanks.

Fred B

Nancy OShea · Accepted Answer

This is not working. If I use a leading slash in pointing to my CSS to imply site root, both main directory and subdirectory files work fine online, but neither honor the HTML in Dreamweaver, regardless of the "Links relative to" setting of document or site root. If I drop that leading slash, meaning document relative, then both files work online also (probably because I introduced a BASE statement in the HTML), but the file in a subdirectory does not find the CSS in Dreamweaver and thus looks awful. Any statement I made before regarding "../css/..." was not something I coded but something I was wondering if Dreamweaver handled in document relative references automatically to move up one directory level to find the CSS.

Just to clarify, the production HTML (via my Expression Web) points the CSS to the online file via a full URL, and this works fine, but it means I can't experiment with changing the CSS at the Dreamweaver level, which is why I am asking how I am supposed to specify the CSS to get both to work properly! Thanks.

If you let DW do it, it should work correctly with document relative link paths both locally and on the remote server. Did you change the settings in your site definition as shown in my screenshot on May 28th?

1. Create a new dummy test page by going to File > New > HTML document > Create button.

2. File > SaveAs test.html.

3. Go to Tools > CSS > Attach stylesheet as link. Browse to the stylesheet in your local site folder and hit OK.

4. Go to File > Save As Template. Skip the prompt to add Editable Regions for now.

5. DW will create a Templates folder for you if one does not already exist. Close test.dwt.

6. Go to File > New > Site Templates. Select test.dwt from 3rd column and hit Create button.

7. File > SaveAs test_child.html.

8. Now note the file path of linked CSS in your child page. DW should resolve the path relative to the child page's location in your site folder.

Hope that makes sense. If not, post back.

DISCLAIMER: Personally, I won't use Template DWTs. IMO server-side includes are much more efficient and a lot less hassle. The type you use (PHP, ASP.net, ColdFusion, etc...) depends on the type of server you use to host your site.

Paul-M · Answer

I use EasyPHP to set up local development environment and it has and add on that makes setting up virtual hosts very easy, so for example I can set up a virtual host and root for any given project something like this http://myproject.test , you would then set up the relevant info in the Dreamweaver's site definition.... It makes working with file paths a lot easier in your local development environment instead of working with paths from a root like http://localhost/myproject

*Note: If you decide to give EsyPHP a go, you'll need to run it as administrator for setting up virtual hosts as it will need to edit your windows hosts file.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded