Web page layout

ChuckASP · March 25th, 2010, 03:12 PM

I actually have two question. One specific and one general page design question. Although I'm on chapter 10, these are questions that I should have asked earlier.
When I look at my default.aspx page in Design View it looks nothing like what is rendered when the page comes up in Internet Explorer. It is correct in IE but shouldn't the Design View look pretty much the same?

The other question is a design question also. I'm starting to desing another page for my own use and I don't understand how to place the controls and html text where I want it on the page. As you place text and controls on the page they end up in order from top to bottom. I see from the CSS in chapter 3 how text-align works, but I must have missed/forgot/don't understand how to put controls and text a page where I want them. What am I missing? I found that you can format all the contols to absolute positioning but that won't work for text and I don't think that's the correct way to design in most cases.

Thanks,

Chuck

Will · March 25th, 2010, 04:32 PM

I wouldn't rely too much on the Design View as a guide for what your webpage will render like in the browser.

Design Views are typically put in to help first time users get their web pages up and running quickly with little time spent on coding. As a result of this the code they add automatically is often bloated and not efficient and not a good indication of what the final project will look like.

Test on what your project will be viewed in eventually, I doubt too many people will be viewing your website in Visual Studio design view so don't worry too much that it isn't entirely accurate.

For creating your own page is it possible to provide a link / code to see what it looks like?

You should place the controls on the page in a logical order from top to bottom and then focus on adding styles and changing the layout using CSS.

AdamPembs · March 25th, 2010, 05:00 PM

I would recommend reading some tutorials on CSS. Typically, the page is divided into boxes using <div id = "something"> tags. A typical layout follows, the divs represent container boxes in which you place content.

You position them using float:left and float:right, and you put widths and sometimes heights on them. This is hugely oversimplified, so suggest you read up on this. It is easiest if you only have two columns wide, with more, it gets more complicated.

<-------------------------Top Bar Navigation--------------->

<--left div ---------><--------------main content div -------->

<--------------------footer div ------------------------------>

Imar · March 26th, 2010, 04:01 AM

Hi Chuck,

Did you add the styleSheetTheme attribute set to a valid theme in the <pages /> element in web.config? That determines for a large part how the page is rendered inside Visual Studio. And I agree with the others here: design time rendering is nice in VS, but it's how it looks in the browser that counts. But of coruse some idea of how things are going to look is nice, which can be accomplished by using the theme attributes.

I think your other question about CSS is answered by Will and Adam?

Hope this helps,

Imar

ChuckASP · March 26th, 2010, 10:58 AM

Thanks to all three of you. You've all contributed to answering my questions. I suspected that VWD couldn't render the screen like it looks in IE but it does make it easy to add controls and coding quickly.
Adam verifyed that I was making a mountain out of a mole hill. Even though his example is simplified, it's just a matter of playing around with the HTML and seeing what happens. I found a site that has free HTML templates and I can download them to see the effect various properties have on the placement of items on the screen.

Imar,

Is this what you meant by setting the StyleSheet theme in the webconfig file.

Code:

 <pages theme="Monochrome">
      <controls> 
      <add tagPrefix="asp" namespace="System.Web.UI"
      assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35"/>

      <add tagPrefix="asp" namespace="System.Web.UI.WebControls"
assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

<add tagPrefix="Wrox" tagName="Banner" src="~/Controls/Banner.ascx"/>
</controls>
</pages>

Thanks again,

Chuck

Imar · March 26th, 2010, 05:09 PM

Quote:

Is this what you meant by setting the StyleSheet theme in the webconfig file.

Almost; to apply the theme at design time, you need to set the styleSheetTheme instead of theme:

Code:

 
 <pages styleSheetTheme="Monochrome">

This applies the CSS and other styling from the Monochrome folder to your pages in Design View.

Check out page 215 and onward and other exercises in Chapter 6 for more detail

Hope this helps,

Imar