First, let me say that I'd recommend skinning with .ascx files once you've become more experienced. There's less headache troubleshooting your skin because changes are applied immediately. I had trouble getting the skin to render properly in my design tool using .ascx, so I used HTMS for my first skin (a tutorial on getting Visual Studio to properly render a dnn skin while designing would be AWESOME dnn ppl!)
Here's the basic steps I used to create my first skin:
1. Create a .html file to hold your skin. There's NO need to any head, html, or body tags here on the final version, but you can put them in there so your design tool can properly render the page while you are editing it. I'll assume you're using visual studio here.
2. Create the layout in your .html file. This would include divs, tables, or your placement tools of choice. Make your headers, columns, footers, or whatever else your skin will need. Just be sure everything scales properly before moving on.
3. Add tags for DNN standard components. The tags are just []s with the name of the component within. For example, a menu would be [SOLPARTMENU], and a login link would be [LOGIN]. Just add them to the html file as text wherever they should go. At a BARE MINIMUM you need one [solpartmenu], [login] and [contentpane]. Refer to the skinning adobe you mentioned for a complete list of tags you can use. Some are pretty slick, i.e. [search],[privacy],[terms] etc...
4. Add the rest of your panes. You've probably seen sites with a left pane, right pane, footer pane, etc. to add these requires two steps. One, add a tag to your html file like so, [contentpane:1] or [contentpane:2] etc. Then you need to create a Skin.xml file that will name these panes. Here's an example for two extra panes, one would be called headerpane, and the other footerpane:
<Objects>
<Object>
<Token>[CONTENTPANE:1]</Token>
<Settings>
<Setting>
<Name>ID</Name>
<Value>FooterPane</Value>
</Setting>
</Settings>
</Object>
<Object>
<Token>[CONTENTPANE:2]</Token>
<Settings>
<Setting>
<Name>ID</Name>
<Value>HeaderPane</Value>
</Setting>
</Settings>
</Object>
</Objects>
just make sure this file is named skin.xml and that it is in the same directory as your html file!
5. Create a file called Skin.css. This will hold any styles you may want to set for things like the menu, content pane, body, etc. Please note that DNN has lots of default styling for components like the menu, etc. Refer to the DNN skinning adobe file for more info on which classes are availiable for what objects. CSS is not very intuitive, especially for web programmers used to high level programming languages. No tutorial will help you learn CSS (especially cross-browser compatability...), in my opinion. You'll just have to read whay you can and hack your way through a few skins before you get the hang of it (or before it drives you insane!).
Done! Ready for upload!
Now, zip the files up (.html, skin.xml, skin.css and the Images subdirectory). Log into your DNN site as host, go to skins, upload and apply your skin! Fun fun fun!
Things to note: Put your images in a subfolder called 'Images'. Any images you put in your skin MUST be preceded by a '/'. For example, visual studio leaves the front slash of its images by default. So if you have a pic called Dog.gif in the Images directory, visual studio will name it Images/Dog.gif. This will NOT show up on the DNN skin! you need to rename it /Images/Dog.gif for it to work! I've had issues with images not being copied correctly to the root /images directory (standard DNN folder), so you may want to make sure they are in that directory if you have problems. I'm probably screwing something up when it doesn't work for me :)
Also, if you modify your html file on the server (it will be in the portals subdirectory probably under the default subdirectory) you will need to log in as host, go to the skin, and reparse it for changes to take affect. That also applies to changes made to the .xml file. If you change the skin.css file, the changes will be immediate (no need to reparse). Also, when you upload your skin, DNN will generate a .ascx file (merger of the .html and the .xml file). If you edit this file, changes will be immediate, and you can see how dnn is transforming your .html file into your actual skin. You can also see how it parses the tokens (i.e. [solpartmenu], [contentpane], etc) into divs and controls.
Anymore questions?? Hope that helps!