I cannot figure out how the entered HTML code, CSS, and Scripts map into what locations in the Site Designer produced files. See my attached Full question graphic. Can ANYONE define where to place custom code as shown in my graphic?

Are you wanting to 'recreate' an existing website by just popping the various code and script bits and pieces into those boxes on the Element pane? Site Designer is not made to work that way. I'm not saying that it is impossible, but all those boxes are relatively new to us all, so I don't think anyone has tried to figure this out yet.

We always recommend here in the forum that the users try to learn how to add content, styles and scripts the way which is intended. If you open Site Designer and click the far right button where it says Help Dialog, you'll find the user manual and plenty of instructional videos. And you can always ask us questions, we'll do our best.

Gordon - I usually add custom .js files and .css files to the page in the page manager screen (found under Manage Project or Ctrl + Shift + I ).

Custom .css files go in the Head section. I typically write the css file in an editor (Visual Studio Code) and add it as a local resource. In the page manager, you'll see a button that says "Add a local CSS or Javascript". Once you add the local resource, it adds a reference to your page. If you don't have an external file, you can just click "Edit Code in Dialog" and that opens Site Designers code editor.

I put custom .js files in the footer section using the same method as the custom .css file (writing the file in Visual Studio Code and adding it as a local resource).