Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

the worst website award goes to.....

Featured Replies

Me...

 

My Website is so bad I'm too embarrassed to even link it!

 

Anyway what I really need is some advice. Last year I created my 'Worst Website ever' by really quickly following an online tutorial as I needed a website to show my college work. Only problem is it works differently in every browser and needs the viewer to scroll down the page. I don't like it and have never met anyone else who does either!

 

So i have done another very simple design for a portfolio site in Photoshop and I think I will be able to slice it up to put it into Dreamweaver. But it includes thumbnails which I want to enlarge to show my work when the mouse rolls over them. Is this a bit advanced for a Dreamweaver newbie or will it be straightforward?

I use Dreamweaver so rarely I can never remember it when I start it up and only know the VERY basics of HTML.

any advice appreciated.

Here's some advice - don't use Dreamweaver

 

A simple image editing software such as Gimp or Photoshop, along with Notepad ++ (or similar) and a browser is all you need mate, oh and some practice

 

Hope this helps.

Here's some advice - don't use Dreamweaver.

 

Someone should pin this to the top of the forum

lol, I agree to a point dreamweaver isnt good for web design but i like using it as a code editor but dont use the design aspect. Notepad++ is really good and its free i would recommend this aswell.

can we see the site then maybe we can help you with the code to make it browser compatible?

 

PS as for the pictures enlarging on hover, i would suggest you look at Jquery/ Javascript. Not sure if JQuery lightbox makes this easier.

Edited by joe2011uk

Your question about how easy it will be is entirely dependent on how complicated the design is :p

 

No one on here will care how bad your design is to be honest. Some people will care enough to point out how you can improve it though :)

 

Post an image of the design and we'll be able to tell you how hard it is to make, or just go at it and find out for yourself. Having a bigger image shown when you roll over the thumbnail isn't necessarily hard, it depends on the effect you want. For a basic roll over you can look up the css:hover selector or for something more advanced you can use Javascript/Jquery.

 

And just in case, don't use photoshop's slice tool then export as html kinda thing, it's not that great.

 

Goodluck,

~evu.

  • Author

my site from last year is at cbninedesign dot co dot uk but it really is BAD

my new site is so far only done in Photoshop although all thumbnails are not done as you can see. I am only trying to create a really simple site just for my work and a contact but am now feeling rather beaten! After I finish my degree in the summer I will hopefully have more time to devote to it.

 

photoshops slice tool and exporting it was just what I was going to do next :o

post-10199-0-31053400-1302018736_thumb.gif

 

And just in case, don't use photoshop's slice tool then export as html kinda thing, it's not that great.

 

Goodluck,

~evu.

 

Evu,

 

I use slice tool with my last site and it looked dead jaggy for images that i'd done in PS is that why? Ho wwould you recommend doing this?

 

Also totallly agree with you Evu no one cares how bad your site is we all have to start somewhere. If we can see we can help, dont worry.

 

Thanks

Joe

I know some really good designers who use the slice tool but none that use the export as html feature. I don't like using the slice tool personally, I prefer to hide all other layers and use image>trim then save for web. This has the advantage of being incredibly accurate as opposed to defining edges by hand. On occasions where I have a flat image I just use the crop tool.

 

The reason you have jagged edges, Joe, could be a variety of things but I would guess it's an image quality issue. Did you check the quality before saving?

 

And Jilly, that would be extremely easy to make with basic/html CSS :) I guess you meant enlarge image on click rather than hover? Easily accomplished with Jquery.

 

Goodluck,

~evu.

 

Ed: For what it's worth, I think the redesign is looking good :)

Edited by evu

 

 

The reason you have jagged edges Joe could be a variety of things but I would guess it's an image quality issue. Did you check the quality before saving?

 

Goodluck,

~evu.

 

 

Yeh, I go to save for web and devices -> Set as PNG 24 for transparency or Jpeg for normal -> JPEG -> Quality->High -> 60, PNG ->Quality->Bicubic

 

Are this quality not high enough?

 

Thanks

Joe

I didn't mean specifically, just wondered if you checked the quality by eye first :p Before we hijack this thread, feel free to show me the image in pm Joe and I'll see if I can help :)

 

~evu.

Hi! I'm a beginner too, and I'm also trying to put up a portfolio site. A web designer friend of mine told me to study a jquery called 'fancy box' that can be used for a simple artwork gallery. Another option is to search for tutorials on simple CSS and jquery slideshows There are lots of tutorials out there where you can learn from. Just google. As for the images, I was told in photoshop to always use save for web and devices option when saving images for web to optimize the quality.

 

Yep, so that's some of the advices I got. It helped me a lot, hope it will help you as well.

 

Good luck!

Guest
This topic is now closed to further replies.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.