Skip to main content
Galeodan
Galeodan
Known Participant
April 1, 2021
Answered

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

  • April 1, 2021
  • 3 replies
  • 1917 views

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..

    This topic has been closed for replies.
    Correct answer Nayan_Kankariya

    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

    3 replies

    Nancy OShea
    Nancy OShea
    Adobe Expert
    April 8, 2021

    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.

     

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

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

     

    Nancy O'Shea— Product User, Community Expert & Moderator
    Galeodan
    GaleodanAuthor
    Known Participant
    April 9, 2021

    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. 

    Nancy OShea
    Nancy OShea
    Adobe Expert
    April 2, 2021

    See screenshot.

     

    Post back if you have any questions.

     

    Nancy O'Shea— Product User, Community Expert & Moderator
    Galeodan
    GaleodanAuthor
    Known Participant
    April 6, 2021

    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
    GaleodanAuthor
    Known Participant
    April 6, 2021

    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 

    Nayan_Kankariya
    Community Manager
    Nayan_KankariyaCommunity ManagerCorrect answer
    Community Manager
    April 1, 2021

    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices