Ну давайте по порядку :)
1) вы на страницу (сначала создайте какую-нибудь временную страницу, типа /test.php) в режиме визуального редактора положите компонент: в окне визуального редактора выберите секцию "Контент", там "Каталог", там "[LEFT]Структура разделов[/LEFT]", и два раза кликните на иконке. Иконка появится в редактируемой области. Дважды щелкните по ней. Откроется окно с настройкой компонента. Для примера выберите шаблон "tree", а "Максимальная отображаемая глубина разделов" поставьте значение "3". Далее нужно правильно выбрать "Тип инфо-блока" и сам инфоблок в выпадающих списках. Сохраняем. Страничка автоматически обновляется.
2) с учетом настройки должно получиться примерно так, как вам и нужно.
3) arResult это в шаблоне. Суть стандартного шаблона такая: в массиве $arResult поступает вся нужная информация, которую создает компонент. php-конструкцией (можно назвать процедурой) [B]foreach[/B] перебираются все значения массива [B]SECTIONS[/B], расположенного в массиве [B]arResult[/B]. При foreach указано "as $arSection", т.е. в arSection поступает вся информация о разделе. Указав простую конструкцию <?=$arSection["NAME"]?> (или то же самое <?print $arSection["NAME"]?>), можно вывести название раздела, <?=$arSection["CODE"]?> - символьный код раздела, массив <?=$arSection["PICTURE"]?> содержит всю информацию о картинке, например, картинку можно вывести так: <img src="<?=$arSection["PICTURE"]["SRC"]?>" />. Думаю, понятно.
4) чтоб настроить стили, это нужно в папку с шаблоном (template.php) положить файл [B]style.css[/B], он автоматически будет подключаться. В шаблоне делаете вывод как нужно, указываете классы, ИД, а в стилях назначаете стили этим классам :) По сути, цель шаблона это создание html-кода, поэтому нужно будет разобраться в этом "туева куча непонятного мне кода", там несложно, это же PHP :) Нужно разобраться, т.к. без этого никуда.
