[Veltliner]

I got tired of the restrictions of iWeb (and that you can't encrypt your e-mail address against bots and spyders), and would like to do my next website in Photoshop.

You can do this using the slice tool.

Just what exactly is the process?

QUESTIONS:

1. How do you create an index, and the different page urls, so they are together in one site? iWeb does this for you.

2. How do you put in links like an e-mail link, and a link to other pages of your site?

3. What's the recommended document width? Even though Mac is 100% widescreen now, there are still plenty of monitors around that aren't, especially on the dark (PC) side. Is 1024 the best width?


I have been trying to get this info for some time, but couldn't get a decent document so far. I'd be grateful on detailed info on this matter.

Thanks!

[Thorzdad]

You use Photoshop to create the images and graphics for a website. You use other software to write the html (the index page and other internal pages.) I use GoLive or Dreamweaver (because I'm not enough of an html stud to use TextEdit, LOL)

Many people use Photoshop to design the entire web page. You can certainly do this, but I wouldn't use it to set blocks of text. I'd do that in the html.

Many people base a website on a 1024x768 layout, but there's no hard rule about that. Some still use the old 800x600 measure. Still others make it whatever size suits their fancy.

[peeb]

Decent websites should look ok on most common page sizes.

[Macola]

As Thorzdad said, you can use Photoshop for the graphics, but you can't really design a website in it. Well, you can, but it would be a disaster.

You have lots of web design software options, some of which are free like Nvu. Aside from that, I'd recommend learning HTML and CSS.

[andi*pandi]

our recent statistics said 1024 was a good max width.

[iranfromthezoo]

Originally Posted by andi*pandi 

our recent statistics said 1024 was a good max width.

really? we are still being told the 800 x 600 gig...although I don't follow that route a lot.

[Veltliner]

Originally Posted by Macola 

As Thorzdad said, you can use Photoshop for the graphics, but you can't really design a website in it. Well, you can, but it would be a disaster.

You have lots of web design software options, some of which are free like Nvu. Aside from that, I'd recommend learning HTML and CSS.

I know, but I don't have the time to do that.

What about the slice tool everybody is raving about to create a full website in Photoshop, using what was Imageready (which became Fireworks) in CS2?

What do you think about this article?

Design a Website In Photoshop [Software Tutorials]

[Veltliner]

Originally Posted by Thorzdad 

You use Photoshop to create the images and graphics for a website. You use other software to write the html (the index page and other internal pages.) I use GoLive or Dreamweaver (because I'm not enough of an html stud to use TextEdit, LOL)

Many people use Photoshop to design the entire web page. You can certainly do this, but I wouldn't use it to set blocks of text. I'd do that in the html.

Many people base a website on a 1024x768 layout, but there's no hard rule about that. Some still use the old 800x600 measure. Still others make it whatever size suits their fancy.

How do you get your Photoshop design into Dreamweaver? I thought you had to start your design from scratch there.

[KeriVit]

Just export for web as a jpeg and it makes the html

[hart]

Originally Posted by KeriVit 

Just export for web as a jpeg and it makes the html

?? where is this option? I've done Save for Web which is for optimization but Export doesn't seem to have a "for web" option.

[andi*pandi]

(I think she was joking)

but really, if you slice up your image and then hit save for web, you will get a dialogue where you can select "images" or "images and html".

[hart]

oh, ah...I have about 10 tabs running so maybe I wasn't paying that close attention. I'll have to look at that slice/save for web window a bit closer though. I wasn't noticing any HTML things in there.

I've actually been trying to figure the optimal work path among the various components in CS3 and I'd be willing to believe there was some whole option I'd missed. I'm still stumped on how/why to use Fireworks even tho I tramped through the Help file rather extensively.

I'm trying to figure the easiest way to help a group of middle schoolers to create a web site and I was trying to go in the opposite direction, working backwards from Dreamweaver and coding to something closer to what I assume iWeb is like.

[Veltliner]

Originally Posted by KeriVit 

Just export for web as a jpeg and it makes the html

Could you provide a step by step-guide? That would be very helpful.

[Veltliner]

Generally, if anybody knows of any documents on the web, or books, downloadable articles (both free and for purchase), please post it here.

[Veltliner]

Nobody can give factual info on this theme?

[KeriVit]

Originally Posted by andi*pandi 

(I think she was joking)

but really, if you slice up your image and then hit save for web, you will get a dialogue where you can select "images" or "images and html".

Well I was being a bit facetious, but yes- you described what I was talking about.

I'm a print person, taking my first web design course. Now that would be where my sarcasm comes from. Basically, we have been handed a book and told to read it.

[KeriVit]

Originally Posted by Veltliner 

Could you provide a step by step-guide? That would be very helpful.

OK, here's what I was told, web people, feel free to dispute.

Let's say you have created the site- just the homepage for instance in Photoshop.

Put that file in a new folder. Make another folder within this folder named "Images"

Divide it with guide paying specific attention to where you might divide rollovers and/or tabs.

When you've got all the guides done, click on the slice tool- (the Xacto knife-looking button.)

At the top in the menu bar, choose "Slice From Guides"

Go to File> Save for Web and Devices

Choose JPEG (for mine anyway) and optimize and hit Save.

A dialog box comes up. It should be "HTML and Images" Save.

Now, there will be an html file in the folder.

Open this up in Dreamweaver an go from there to build your rollovers and such.

Is that what you want?

[besson3c]

Originally Posted by Veltliner 

I know, but I don't have the time to do that.

What about the slice tool everybody is raving about to create a full website in Photoshop, using what was Imageready (which became Fireworks) in CS2?

What do you think about this article?

Design a Website In Photoshop [Software Tutorials]

To be blunt, Imageready/Photoshop slice generated websites are horrible... I've had to recode and decipher several. You'd honestly be just about as well off with iWeb.

Learn HTML and CSS. No point and click WYSIWYG shortcuts, just do it.

[silver]

I agree with besson3c, there's no short cuts.

[Veltliner]

Originally Posted by KeriVit 

OK, here's what I was told, web people, feel free to dispute.

Let's say you have created the site- just the homepage for instance in Photoshop.

Put that file in a new folder. Make another folder within this folder named "Images"

Divide it with guide paying specific attention to where you might divide rollovers and/or tabs.

When you've got all the guides done, click on the slice tool- (the Xacto knife-looking button.)

At the top in the menu bar, choose "Slice From Guides"

Go to File> Save for Web and Devices

Choose JPEG (for mine anyway) and optimize and hit Save.

A dialog box comes up. It should be "HTML and Images" Save.

Now, there will be an html file in the folder.

Open this up in Dreamweaver an go from there to build your rollovers and such.

Is that what you want?

Thanks. Except that I won't buy Dreamweaver.

[Veltliner]

Originally Posted by besson3c 

To be blunt, Imageready/Photoshop slice generated websites are horrible... I've had to recode and decipher several. You'd honestly be just about as well off with iWeb.

Learn HTML and CSS. No point and click WYSIWYG shortcuts, just do it.

Stubborn as hell I am, but I have the severe impression that you are right.

Today I'm going to do a first research on books on mark-up language on Amazon.

(By the way: if you can recommend one, please do so).

Wouldn't you rather recommend buying an XHTML book? My first researches lead me to a few statements, that HTML (even though the similarities are huge) is on the way to be replaced by XHTML?

[besson3c]

If you know HTML, you will be fine with HTML in XHTML documents. The X in XHTML stands for "XML" which this doctype also supports, but not many people are going with XML yet. The differences between HTML and HTML in XHTML documents is minor, like you said. The take home message is that I would probably go with XHTML, but all of your modern HTML books and resources are still very much applicable.

[Thorzdad]

Originally Posted by besson3c 

...Learn HTML and CSS. No point and click WYSIWYG shortcuts, just do it.

I agree with Besson that you really need to understand HTML (at the very least) to create a passable website.
Having said that, I really think that, for a beginner, using one of the WYSIWYG editors (Dreamweaver, GoLive, etc) can be a big help. I used them to download complete webpages. Then I could study the code in detail, dissect it, edit it, and see immediately what changes were made and how those changes affected the structure. It was a great learning tool that gave me immediate feedback and really helped me visualize internally, the structures of HTML and CSS. Today, I rarely leave the source-code panel, because I know what the changes I'm making will do.

Yes, if you let the programs write the code, they'll tend to muck it up with proprietary tags and whatnot. However, the more you learn, the easier it becomes to avoid these things and output good, clean, valid code with these programs.

[KeriVit]

It would be nice if my professor passed along even half as much info as you guys.

[iRabbit]

Originally Posted by iranfromthezoo 

really? we are still being told the 800 x 600 gig...although I don't follow that route a lot.

I just recently switched to doing all my site design at 960 max (1024 but allowing for browser screen real estate). Recent stats I follow were that only like 14% still view at 800x600 or less. If your audience is less technical you could air on the safe-side, but if your audience is the type to likely keep their computer up-to-date, go with 960.

[Veltliner]

Originally Posted by iRabbit 

I just recently switched to doing all my site design at 960 max (1024 but allowing for browser screen real estate). Recent stats I follow were that only like 14% still view at 800x600 or less. If your audience is less technical you could air on the safe-side, but if your audience is the type to likely keep their computer up-to-date, go with 960.

I've heard of 1024, but 960 width?

[besson3c]

Most people who can only go up to 1024 px will not have their browser open to its max width, therefore you knock some off the max to prevent from having to scroll. 960 px is a reasonable width for supporting a min width of 1024 px.

[alex_kac]

What about mobile browsers? This kills it. Its stupid to make a website conform to specific screen sizes. I don't care if I have a 1920x1280 screen - I don't want web pages to fill it. I hate that assumption.

Write your HTML with CSS properly and do it RIGHT.

[besson3c]

Originally Posted by alex_kac 

What about mobile browsers? This kills it. Its stupid to make a website conform to specific screen sizes. I don't care if I have a 1920x1280 screen - I don't want web pages to fill it. I hate that assumption.

Write your HTML with CSS properly and do it RIGHT.

What is your point? What width should pages be developed at?

[himself]

Originally Posted by alex_kac 

What about mobile browsers? This kills it. Its stupid to make a website conform to specific screen sizes. I don't care if I have a 1920x1280 screen - I don't want web pages to fill it. I hate that assumption.

Write your HTML with CSS properly and do it RIGHT.

For mobile platforms, create a CSS file for that platform and assign to the proper profile, in this case "mobile." It is possible to design one page to support multiple platforms and profiles, you know.

[Oisín]

Originally Posted by alex_kac 

What about mobile browsers? This kills it. Its stupid to make a website conform to specific screen sizes. I don't care if I have a 1920x1280 screen - I don't want web pages to fill it. I hate that assumption.

Write your HTML with CSS properly and do it RIGHT.

If you “do it RIGHT”, the mobile phone will never see the same styles a monitor will. That’s why they invented the media attribute.

As for whether or not you want the page to “fill” the screen, that’s a matter of personal taste. Some people like fluid designs that fill the screen and float when windows are resized; others like fixed designs that remain the same absolute size regardless of window size or screen resolution. There is no perfect solution.

[l008com]

I use tables.

... waits for the collective *gasp* to finish ...

Which means nearly all of my web pages are super flexible, down to is narrow as say 300 or 400 pixels, and virtually unlimited width. You can do this with CSS too but it will take you days to get the code working just right. Do it with a table and you'll be done in A minute. :-)

[Oisín]

It’s a matter of what you’re used to. Takes me just as long (longer, actually) to get a table-based design to look properly as I want as it does for a CSS-based design.

And there’s the part about older browsers rendering many table constituents wildly differently.

[l008com]

Tables are supported much further back than CSS.

[andi*pandi]

how far back are you willing to go? do you have lots of clients using netscape 4?

[l008com]

My point was that netscape 4 has very little CSS support but fine table support.

[l008com]

It drove me nuts when versiontracker went to a CSS layout because I used to be working on OS 9 machines, and the only browser was Netscape 4, and trying to get to version tracker to download something different was a real pain in the ass.

[Thorzdad]

Originally Posted by Oisín 

...And there’s the part about older browsers rendering many table constituents wildly differently.

Let's be fair, though. If you are dealing with a browser that is so old that it can't handle tables correctly, it's highly doubtful that they'll be able to handle CSS any better...if at all.

There's no shame in using tables. I use 'em. They're simple and reliable.