Jump to content

Fireworks Design Into Css

billythetidd

By billythetidd
in CSS

Recommended Posts

billythetidd Newbie

billythetidd

Posted
Posted

Hey all, first post. Been using the site for ages though. I have a site that I have been working on in Fireworks. I have created all the pages in png format, I have sliced them, and saved them as gifs and pngs as there is some transparency. I have the site live, linky I have found that even when the slices are small and optimised as best as possible there are still some issues with the loading. I would like to be able to have the site completely CSS run. As you will see with the design it revolves around a retro television with every page appearing as if it where on the TV. With slicing I have found that even if the header and most of the page doesn't change it still loads everything from scratch. If I use CSS I would like to be able to load the header, TV and background once but only have the screen area change as this would help the site become more user friendly and reduce loading.Is this possible with CSS?Any help would be much appreciated.Alastair

Link to comment
Share on other sites
billythetidd Newbie

billythetidd

Posted
  • Author
Posted
Hey all, first post. Been using the site for ages though. I have a site that I have been working on in Fireworks. I have created all the pages in png format, I have sliced them, and saved them as gifs and pngs as there is some transparency. I have the site live, linky I have found that even when the slices are small and optimised as best as possible there are still some issues with the loading. I would like to be able to have the site completely CSS run. As you will see with the design it revolves around a retro television with every page appearing as if it where on the TV. With slicing I have found that even if the header and most of the page doesn't change it still loads everything from scratch. If I use CSS I would like to be able to load the header, TV and background once but only have the screen area change as this would help the site become more user friendly and reduce loading.Is this possible with CSS?Any help would be much appreciated.Alastair
BUMP!There must be someone out there that knows what to do. I'm really grateful if someone could help.
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

The reason I haven't decided to reply earlier is because the real solution is to forget everything about fireworks and start over.Pages comprised of sliced images generated by application always end up like this and there is no one fix for it.Rather than starting with the design, you need to start off with the information structure.Currently, you want a single box where all the content will go, and maybe a header section above it, so we'll begin with something like this:

<div id="header">Header</div><div id="content">Content</div>

The content box most likely will need a fixed width and will have to be in the center of the page, so we can apply the CSS for that:

#content { width: 760px; margin: 10px auto; }

You have to keep going step by step, focusing always on structure rather than design.Eventually, we would try to fit the frame around. Since it's a fixed size, a single background image will have to do, and we'll have to give it a fixed height as well. We'll also put some padding so that the content does not exceed the edges of the TV screen:

#content {  width: 760px;  margin: 10px auto;  height: 500px;  padding: 60px;  background-image: url(TV.png);  background-repeat: no-repeat;}

Disclaimer: All numbers used in these examples are purely hypothetical.There are a whole lot more things you need to know as well, but I only have time to tell you the most important ones at the moment:

  • Do not use HTML to give style to your pages, use CSS.
  • Base your layouts on content structure, not design.
  • Find as many opportunities as possible to use repeating background images instead of one large one.
  • Don't use <table> or related elements to position things in the page (they take far longer to load than basic block elements such as <div>.
  • Initialize the background color, font, text color, margins and paddings on the <html> and <body> elements

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

basically you should loose all the tables, try to use png images for transparent images only, and use jpg and gif for non transparent, jpg should give the picture quality you require, instead of png usage throughout. simple rough typical layout using css is shown below, and require you only to change tv inner image, and top outer image.images b_movie.pngtv_top_outer.pngtv_inner.jpgtv_frame.png<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">*{margin:0;padding:0;}body {margin:10px; background-image:url(bg_5.gif);}p{margin:0.9em;}#wrapper{ }#logo{background-image:url(b_movie.png); width:696px; height:123px;margin: 0 auto;}#tv_frame {background:url(tv_frame.png) bottom no-repeat; height:566px; width:722px;margin: 0 auto;}#tv_container {width:631px; height: 500px; margin: 0 0 0 33px;}#top_outer{background:url(tv_top_outer.png) bottom no-repeat; height:34px; width:631px; }#inner_tv{ background:url(tv_inner.jpg) no-repeat bottom; width:631px; height: 466px; }</style></head><body><div id="wrapper"><div id="logo"></div><div id="tv_frame"><div id="tv_container"><div id="top_outer"></div><div id="inner_tv"></div></div></div></div></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...