Hình 11-9. Một trang trống dựa trên da DNN-Blue Bạn có thể thấy các thẻ trong hình 11-8 và làm thế nào họ nhận được dịch sang điều khiển trong hình 11-9. Bạn cũng có thể thấy các tế bào bảng ở trung tâm của hình 11-8 giữa các mẩu bánh mì và thẻ KHOẢN. | 304 CHAPTER 11 CREATING A DNN SKIN Page Functions f Add New Moduir f - Add Tideting Module Common Tasks X -ã z Module-1 Select A Mcdue 1 Pane 1 Contentpane _xJ E B G V Ad Settirqs Delete Copy Preview Title 1 Insert 1 Bottom Add Wizard ate Users Flies Heb zl Align Reft zj Hutlie Events Piloto Gallery Discussions Cunlact Us Guestbook Admit Host 1 Search Thursday March 30 2006 ĨĨ Guestbook Suprri leer Account logout TopPane LeftPane Contentpane Rightpane BottomPanc Copyright c 2006 skin Test Terms of Use Privacy statement CcilktrlJ ACil opyri 2C02-2X6 by PsrparuJ Mouse Irr ti Oj SyHsrrs Inc. Figure 11-9. A blank page based on the DNN-Blue skin You can see the tokens in Figure 11-8 and how they get translated to controls in Figure 11-9. You can also see the table cells in the center of Figure 11-8 between the BREADCRUMB and TERMS tokens. These table cells correspond to the placement of the panes in Figure 11-9. Pretty cool huh But where is all the blue stuff and images shown in Figure 11-8 This picture only shows the layout. Remember I said that the look and feel is contained in the .css file. VWD has a neat feature with which you can instantly overlay a .css file onto a layout template. In the Solution Explorer click the file. Now drag it over and drop it on the design panel showing the layout. Make sure you drop it outside the table. You can tell because a blue box appears wherever your mouse is as you drag the .css file around the design page. You want the blue box to be the whole page. Figure 11-10 shows the result. Figure 11-10. CSS applied to the layout CHAPTER 11 CREATING A DNN SKIN 305 If you look at the source for this page you will see a new line at the top of the page link href . . Skin DNN-Blue rel stylesheet type text css This line of code was added by the IDE to associate this style sheet to the layout. Creating the Images This new skin will contain three images one is the logo one is the horizontal gradient used in the copyright and .
