Back in the late 1990s, creating CSS Websites with multiple columns was at best a hack job. When it came to designing the user interface, I would use tables and nested tables … and more nested tables. Because the Cascading Style Sheet (CSS) standard was only just becoming available in the latest version of Internet Explorer, designers really had no alternative but to use resource-demanding tables. Back then, download bandwidth was precious. Designing a Website in tables was awful and it made future maintenance a nightmare, only second to the spaghetti code that Classic ASP would leave behind.
In those days, I often would speculate with other developers on what the future of Web development tools would look like. As Microsoft developers, we would often dream of how easy and powerful Visual InterDev would be. I’m happy to report those days are finally here in Microsoft Visual Studio 2010!
Visual Studio 2010 makes creating multicolumn Websites very easy and actually fun. The .NET developer can smoothly make the transition from programming advance object-oriented backend applications to designing the frontend—without getting bogged down in the syntax of Cascading Style Sheet properties and their attributes. With VS 2010’s powerful windows, dialog boxes and drag-and-drop capabilities, the developer can now design advanced and well-structured CSS user interfaces all in Design view. If you don't already have Visual Web Developer Express 2010, you can be download it for free.
The purpose of this article is to familiarize the developer in the shortest amount of time to Visual Studio 2010’s Design view features and functions. A more thorough tutorial is offered through Microsoft.
If you are designing a Website from scratch, the best approach in VS 2010 is to first design a Web page with inline CSS styles in Design view while viewing the results. After this is done, you can simply move these styles to a Cascading Style Sheet in order to make them available to all Web pages. If you want to create a multiple column layout, and don’t have any Web page content, I would recommend copying the starter code with tags from Microsoft’s tutorial and pasting that into your Web page. If you already have Web content, just paste that into the page and add your tags to the content.
Manage Styles Window & Tag Selector Bar
New Style Dialog Box.gif