4 ms·

Does anyone know where I can find old HTML4 templates that used to be all the rage back in the day? (Similar to the few that can be seen here https://www.bryant

Does anyone know where I can find old HTML4 templates that used to be all the rage back in the day? (Similar to the few that can be seen here https://www.bryantsmith.com/template/ https://www.bryantsmith.com/template/, or used to be provided on hpage.com)

deaddodo 2y ago
The terms you would be looking for are "PSD layouts", "sliced layouts", "website templates PSD", "table-based website templates", etc. Basically these are all websites that were fully designed in something like Photoshop or PaintShop Pro and then manually sliced into graphics that would then be finagled into a table layout manually (with zero borders). Usually with coord-based anchor links that were super finicky, especially if you wanted hover/click effects (usually achieved via HTML+JS versus CSS). Certain portions of the layout were designed to be repeatable for the content-based section of the website, so that would be a <TD> with a fixed width but non-fixed height and background-image with an x-repeat (again, usually in HTML tag properties versus CSS). Nowadays, it would probably be easier to find a graphic designer to just make you one to your specs and "slice"+table it yourself. It would certainly use better/more modern HTML/CSS.
- nicpottier 2y ago
  I built an early site using those techniques in oh, 1996 I think? (stomped.com) Using zero border/padding tables was a clever way at the time of accomplishing a fancy graphics tab/menu without resorting to calling a CGI script.
  - deaddodo 2y ago
    Depends, does this look like your design? https://web.archive.org/web/19961121230158/http://www.stomped.com/ https://web.archive.org/web/19961121230158/http://www.stompe...
- notRobot 2y ago
  Thank you for the search terms and context!
- codetrotter 2y ago
  Also integral to this kind of design was the spacer gif. A 1x1 transparent gif that you’d give different width and height values to in the img tag, in order to create spacing in the page. https://en.wikipedia.org/wiki/Spacer_GIF https://en.wikipedia.org/wiki/Spacer_GIF
  - supriyo-biswas 2y ago
    This very website uses them to this day[1]. [1] https://news.ycombinator.com/s.gif https://news.ycombinator.com/s.gif
- beardedetim 2y ago
  Oh this brought back memories! Getting a PS file, using px for everything to "match the designs", random jQuery snippets to get a hamburger menu. Not a damn clue what I was doing but loving every minute of it.
notRobot 2y ago
Update: Found several here: https://www.oswd.org/ https://www.oswd.org/ http://www.openwebdesign.org/ http://www.openwebdesign.org/ http://www.opendesigns.org/ http://www.opendesigns.org/

deaddodo 2y ago

The terms you would be looking for are "PSD layouts", "sliced layouts", "website templates PSD", "table-based website templates", etc. Basically these are all websites that were fully designed in something like Photoshop or PaintShop Pro and then manually sliced into graphics that would then be finagled into a table layout manually (with zero borders). Usually with coord-based anchor links that were super finicky, especially if you wanted hover/click effects (usually achieved via HTML+JS versus CSS). Certain portions of the layout were designed to be repeatable for the content-based section of the website, so that would be a <TD> with a fixed width but non-fixed height and background-image with an x-repeat (again, usually in HTML tag properties versus CSS). Nowadays, it would probably be easier to find a graphic designer to just make you one to your specs and "slice"+table it yourself. It would certainly use better/more modern HTML/CSS.

nicpottier 2y ago
I built an early site using those techniques in oh, 1996 I think? (stomped.com) Using zero border/padding tables was a clever way at the time of accomplishing a fancy graphics tab/menu without resorting to calling a CGI script.
- deaddodo 2y ago
  Depends, does this look like your design? https://web.archive.org/web/19961121230158/http://www.stomped.com/ https://web.archive.org/web/19961121230158/http://www.stompe...
notRobot 2y ago
Thank you for the search terms and context!
codetrotter 2y ago
Also integral to this kind of design was the spacer gif. A 1x1 transparent gif that you’d give different width and height values to in the img tag, in order to create spacing in the page. https://en.wikipedia.org/wiki/Spacer_GIF https://en.wikipedia.org/wiki/Spacer_GIF
- supriyo-biswas 2y ago
  This very website uses them to this day[1]. [1] https://news.ycombinator.com/s.gif https://news.ycombinator.com/s.gif
beardedetim 2y ago
Oh this brought back memories! Getting a PS file, using px for everything to "match the designs", random jQuery snippets to get a hamburger menu. Not a damn clue what I was doing but loving every minute of it.

notRobot 2y ago

Update: Found several here: https://www.oswd.org/ https://www.oswd.org/ http://www.openwebdesign.org/ http://www.openwebdesign.org/ http://www.opendesigns.org/ http://www.opendesigns.org/