I'm initiating a new web site after about a year's absence and its amazing the changes that have developed. So out with tables and in with div...
This project is for a friend and my goal is to have the maintenance by the friend as simple as possible therefore the external stylesheet and layout will be 'business' rather than fancy 'bells and whistles'.
BUT...do I create the stylesheet first and then proceed with the html page?
OR does the stylesheet 'grow with content' as the html page is constructed?
RoseDo the css first and like basic html like all the <div>s then do the detailsSince the CSS realizes the design for all content, in the best of all possible worlds the style sheet would come first. Back in the REAL world what usually happens is a page of representative content comes first. An embedded style sheet is used to get the presentation of that page right then the embedded style sheet is extracted to become an external style sheet used site-wide.As I read the words 'in the REAL world' a grin began but the 'A-HA!'erupted with the imbed and then put that into an external stylesheet...
This solves my 'wonder what I need'quandry and I visualized putting together the stylesheet with every possiblity. Browsing through the W3 reference site boggled my mind.
By coincidence I had already played around using this process and added things to the stylesheet as I went along. I couldn't find any statement with lots of searching on css as to which to start first so I thank you for a sensible answer. It was worth registering on this forum <LOL>
RoseActually, I start with a photoshop mockup of the page. I recreate the content using semantic markup with no DIVs at all so I know my page will at least make sense without CSS. I also embed any images relating to the content using the <img /> tag. Then I look at the photoshop mockup, image slice it to extract only the decorative graphics I need and optimize them for the Web.
Then back to the markup. I add DIVs and SPAN where I need to group text and images together to create my columns and kind of visualize the CSS needed — nothing too vivid.
I give my SPANs and DIVs ids and classes so they can be referenced via CSS. I also make sure all ids are unique on the page so if I need to grab a certain element via JavaScript, the browser doesn't throw out an error because I grabbed more than one element with the same id.
Then I create the basic framework of the page using an external CSS file. Why not? It's gonna be external anyhow. I add and/or rearrange DIVs and SPANs to get the framework done. Preview in all major browsers, then move on to skinning the page, giving it the actual style.
I add the decorative graphics as background images in CSS. Again, add/rearrange DIVs and SPANs to fit the design, but leave the basic semantic HTML alone. Nested DIVs aren't bad
Check in Firefox, then in all major browsers. Done.Originally posted by toicontien
The stuff said above +1
At the moment I am trying work with CSS by creating a logically laid out page of content first and then diving into the CSS and using image replacement techniques to make it all look pretty.
Logically the content should come before everything and should create a logical, readable page in itself. If it is well laid out and grouped I find it easy to then "skin" the site to my liking.
If I want a text box with a header in my site I would use:
<div id="textbox">
<h2>Header</h2>
<p>Content</p>
</div>
And then reference the h2 and p within that box using the containing div id - #textbox h2, #textbox p
A similar navigation would be:
<div id="navigation">
<ul>
<li>Link One</li>
<li>Link Two</li>
</ul>
</div>
And so on and so forth - with a good idea of what content I want to appear in the page I can then hit photoshop/fireworks and churn out a few designs. Because I have not created any specific hooks/hacks for layout and images I can then try out a few different layouts without having to touch the HTML. Basically what I did here: <!-- m --><a class="postlink" href="http://www.dxdec.com/wod/test/index4.html">http://www.dxdec.com/wod/test/index4.html</a><!-- m -->
Basically, the page with all the content should come first and should not be touched during the whole skinning/design process. In an ideal work environment the developer (asp/php) would give the designer a ready made page laid out using the above markup, and all the designer needs to do is work magic with the CSS and not have to mess around with HTML which may all be somewhat obfuscated in Response.Writes, loops, dos and fors.Content first - Design second - CSS third
The design, and ensuing CSS, should be determined by the content you wish to emphasize (or de-emphasize). The visitor is there to read something or use a service, not look at your design. (Unless it's another web master desperate for some inspiration!)
**Think outside the cubicle.**
Good Luck -RoseW; you are light-years ahead of me in knowledge, experience, not to mention ability - but this thread is being incredibly instructive to me; thanks to all!
Fri, 04 Feb 2005 07:58:33
This project is for a friend and my goal is to have the maintenance by the friend as simple as possible therefore the external stylesheet and layout will be 'business' rather than fancy 'bells and whistles'.
BUT...do I create the stylesheet first and then proceed with the html page?
OR does the stylesheet 'grow with content' as the html page is constructed?
RoseDo the css first and like basic html like all the <div>s then do the detailsSince the CSS realizes the design for all content, in the best of all possible worlds the style sheet would come first. Back in the REAL world what usually happens is a page of representative content comes first. An embedded style sheet is used to get the presentation of that page right then the embedded style sheet is extracted to become an external style sheet used site-wide.As I read the words 'in the REAL world' a grin began but the 'A-HA!'erupted with the imbed and then put that into an external stylesheet...
This solves my 'wonder what I need'quandry and I visualized putting together the stylesheet with every possiblity. Browsing through the W3 reference site boggled my mind.
By coincidence I had already played around using this process and added things to the stylesheet as I went along. I couldn't find any statement with lots of searching on css as to which to start first so I thank you for a sensible answer. It was worth registering on this forum <LOL>
RoseActually, I start with a photoshop mockup of the page. I recreate the content using semantic markup with no DIVs at all so I know my page will at least make sense without CSS. I also embed any images relating to the content using the <img /> tag. Then I look at the photoshop mockup, image slice it to extract only the decorative graphics I need and optimize them for the Web.
Then back to the markup. I add DIVs and SPAN where I need to group text and images together to create my columns and kind of visualize the CSS needed — nothing too vivid.
I give my SPANs and DIVs ids and classes so they can be referenced via CSS. I also make sure all ids are unique on the page so if I need to grab a certain element via JavaScript, the browser doesn't throw out an error because I grabbed more than one element with the same id.Then I create the basic framework of the page using an external CSS file. Why not? It's gonna be external anyhow. I add and/or rearrange DIVs and SPANs to get the framework done. Preview in all major browsers, then move on to skinning the page, giving it the actual style.
I add the decorative graphics as background images in CSS. Again, add/rearrange DIVs and SPANs to fit the design, but leave the basic semantic HTML alone. Nested DIVs aren't bad
Check in Firefox, then in all major browsers. Done.Originally posted by toicontien
The stuff said above +1
At the moment I am trying work with CSS by creating a logically laid out page of content first and then diving into the CSS and using image replacement techniques to make it all look pretty.Logically the content should come before everything and should create a logical, readable page in itself. If it is well laid out and grouped I find it easy to then "skin" the site to my liking.
If I want a text box with a header in my site I would use:
<div id="textbox">
<h2>Header</h2>
<p>Content</p>
</div>
And then reference the h2 and p within that box using the containing div id - #textbox h2, #textbox p
A similar navigation would be:
<div id="navigation">
<ul>
<li>Link One</li>
<li>Link Two</li>
</ul>
</div>
And so on and so forth - with a good idea of what content I want to appear in the page I can then hit photoshop/fireworks and churn out a few designs. Because I have not created any specific hooks/hacks for layout and images I can then try out a few different layouts without having to touch the HTML. Basically what I did here: <!-- m --><a class="postlink" href="http://www.dxdec.com/wod/test/index4.html">http://www.dxdec.com/wod/test/index4.html</a><!-- m -->
Basically, the page with all the content should come first and should not be touched during the whole skinning/design process. In an ideal work environment the developer (asp/php) would give the designer a ready made page laid out using the above markup, and all the designer needs to do is work magic with the CSS and not have to mess around with HTML which may all be somewhat obfuscated in Response.Writes, loops, dos and fors.Content first - Design second - CSS third
The design, and ensuing CSS, should be determined by the content you wish to emphasize (or de-emphasize). The visitor is there to read something or use a service, not look at your design. (Unless it's another web master desperate for some inspiration!)
**Think outside the cubicle.**
Good Luck -RoseW; you are light-years ahead of me in knowledge, experience, not to mention ability - but this thread is being incredibly instructive to me; thanks to all!
Fri, 04 Feb 2005 07:58:33