How do I see HTML and linked CSS code together and smart-Jump?

[Galeodan]

I'm thinking there must be some way to setup a split screen showing HTML code and the linked CSS file at the same time, but I just can't figure it out (novice here). At the moment I have to switch between files and do a search for the class or element etc. Really cumbersome. I  would have thought you could highlight the code (class etc.) and jump to the relevant CSS Style - Or something like that..

[Nayan_Kankariya · Accepted solution]

Hi @Galeodan ,

Thanks for writing to us. Please see if any of the below options works for you.

Option 1:

1. Invoke Code-Code view from View menu --> Split --> Code-Code

2. Click on the required css file and you shall have the html and css file loaded in the split view

Option 2:

1. Invoke Code inspector panel from Window menu --> Code Inspector

2. Within Code inspector panel, html file will be loaded and can be placed at required location either docked/undocked

Option 3:

1. In Code view, click on the css class name/id and right click to bring up the context menu

2. Select Quick Edit option and you will see a pop-up to edit the associated css

Option 4:

1. In Live view, click on the tag and right-click on the css class/id associated to invoke context menu

2. Select Go to Code to navigate to the associated css code

Please let us know if any of the above options works for you else we will further look into the same.

Have a pleasant day!

Regards,

Nayan

Dreamweaver Team

[Nancy OShea]

See screenshot.

Post back if you have any questions.

[Galeodan]

Thanks Nancy - That particular layout looks interesting. I confess I am having some difficulty figuring out how to dock the panels and control what appears in each. I really need a comprehensive guide to the interface because it is far from intuitive (seems to be an Adobe specialty). I am also seeing a bunch of files that have nothing to do with my site. It may be I should open another topic for this part - Please advise

These are the files in my site (is "project" the same thing?):

 

But when I select the Index.html tab, I see all these extra files that have nothing to do with my site:

This is the drop-down list:

These files are not in the site folder. Some are not even on disk. I don't know how they got here or how to purge them.

Sean

[Galeodan]

Hi Nancy - An update to clarify the 2nd part of my message above. I figures out that the mystery files (fusion.css, another index.html, etc.) were all associated with one of my existing websites which I was displaying in an iframe. As soon as I removed the iframe the file references disappeared. I'm not sure I see any benefit to DW showing a bunch of files from another site but maybe there is. 

Sean 

[Nancy OShea]

#1 See customizing your Dreamweaver Workspace. 

https://helpx.adobe.com/hk_en/dreamweaver/using/customizing-dreamweaver-workspace.html

Click and drag panels where desired.  When you see a dark blue border around them release to dock the panel to Dreamweaver's application frame.  Save Current workspace.

#2  Google JS is coming from Google and hosted on Google's servers.  It could be coming from your GA tracking code (Analytics) or Google Fonts or whatever other Google services you use.  You can look but you can't touch. 

You have editing authority only over those assets that physically reside inside your local site folder.  Files that reside on other domains, CDNs, remote servers, etc... may effect your site's performance but the files are off limits to you.

I hope that makes sense.

[Nancy OShea]

I forgot to mention, you can turn off external file viewing if you wish.  See screenshot. Untick the last one.

[Galeodan]

I am able to edit most of these related files - I assume that's because I do have them on disk (they come from one of my sites). So I would have to be very careful not to make inadvertent changes to them and mess up the other site. Trouble is that even if I untick Display External Files, they still appear.

[Nancy OShea]

I maintain clear and separate site definitions for each domain, even if multiple domains are hosted on the same server.  

When I am sharing the same assets across more than one website, I put them on content delivery networks (AWS, CloudFlare or Akamai, etc...). 

[Galeodan]

I think I am missing something when it comes to Site definition. It looks like you just have to make sure each site is in its own separate folder and the related files also all under that folder. I have done that.

The files behave as if they are in an organized site. If I edit a name or move a file it does offer to update the affected code links. 

My index.html page is linked to a style sheet file (site.css in the styles folder) and changes to the CSS are properly reflected in the preview. However, if I place the cursor on a tag in Code Inspector and press Ctrl-E (for Quick Edit) it opens a box below that line with a message saying: 

                  There are no stylesheets in your project

                  Create one to add CSS rules.

So how do I add a style sheet to my project? I thought I had already done that.

What is the distinction between a Site and a Project? I don't see anywhere to define a Project?

Alternatively, If I select Quick Edit from the right-click context menu, the cursor hops to the relevant CSS file with a popup saying "No Quick Edit available for current cursor position". 

This just does not seem to be working the way I expect it to.

[Nancy OShea]

Site > New Site ....  Your local site folder is your project folder.  They are one in the same.

[Galeodan]

I did setup the site as described. I also suspected Site and Project were the same thing but the error message had me wondering - Quick Edit tells me I do not have a CSS file in the project.

[Nancy OShea]

I can cite numerous examples where embedded CSS code and external stylesheets are not recognized by Quick Edit so I never use it.

[Galeodan]

Not the answer I was hoping for 😞
I have tried it on a couple of sites and so far none of them have worked. So at least it's not just me.. Is there another way to hop to the associated style or do you just have to scroll & search? Maybe there are other editors out there that can do it - Not that I'm asking.

[osgood_]

Maybe there are other editors out there that can do it - Not that I'm asking.

Most other editors can jump to a css style either in a linked css file or styles in the head of the document. I'm surprised DW can't do that. I thought the editor was based on Adobe Brackets where you can certainly use Quick Edit but It doesnt have a way of jumping to a css style to my knowledge, unless someone has written an extention.

[Nancy OShea]

Use your browser's Inspect Element feature (F12) to find the CSS selector name.

Or use DW's CSS Designer Panel (see screenshot).

[Galeodan]

I was wondering how the CSS Designer would help as it did not seem to be reacting from Code Inspector. But I did get it to react from Code view. I put the cursor on a class tag and the CSS Designer showed me some fields which I assumed were there to help me modify the style. So I click on background, I start to type, expecting some colors to be offered, but when I started typing "r" (meaning to just put red) the popup which appeared offered a bunch of other attributes - none of which were colors. 

That didn't seem to helpful. Though they didn't seem to make sense, I tried a couple and then DW crashed.

Getting very discouraged with DW. I'm itching to start work on my websites but so far DW has been more of a hindrance than a help.

[Nancy OShea]

The property you want is background-color:

[Nancy OShea]

I think you should concentrate less on panels and focus more on writing code because that's how you learn.  Panels don't teach you anything.  Code hints and auto-code completion in Code view are way, way faster than panels.

Code Hints / Auto-completion

- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/

- https://www.w3schools.com/bootstrap4/

[Galeodan]

I have started coding and learning as I go with the assistance of auto completion and hints (the least I would expect). I assumed, perhaps wrongly, that the facility of jumping between HTML and related CSS would be handy for anybody and if offered, that it would function as advertised. I know the property I want is background color. That's why I expected the CSS Designer to offer colors instead of alignments etc.