Jump to content

::: Beginner looking for specific instructions :::


brysonprice

Recommended Posts

I'm pretty good with Photoshop, but when it comes to building websites, I am such a noob that it's not even funny. I want to make a very simple website and I've attached my design below:

 

design

 

I want to be able to click each black text to take me to the next page of the website (and maybe even animate these buttons with flash so that when I scroll over them, it will do something fancy). I also want the text to be aligned in the center.

 

I've been researching tutorials and info online for much of these past 3 days with minimal luck. I keep finding tutorials that don't help me do specifically what I want to do. There are many tutorials about how to import photoshop images into Dreamweaver...the only problem is that they end up using the design and also making a background to go with it. I don't want there to be a separate table for the content of the site and the background...I want the "BIO", "MUSIC", etc to be directly on top of the background (as in my picture), but I don't want WHITE spaces when viewing my site at higher resolution screens.

 

Can anyone push me in the right direction or maybe walk me through how I can achieve these things? I'm sorry that I might now be using the right terminology because I'm a music producer trying to build a website. Please let me know if you need anything explained.

thanks!

Link to comment
Share on other sites

I want to be able to click each black text to take me to the next page of the website (and maybe even animate these buttons with flash so that when I scroll over them, it will do something fancy). I also want the text to be aligned in the center.

 

If you are using one image for all the black text on the background you can use an image map and then code coordinates for the link hotspots. See

http://www.wickham43.net/imagemaps.php

 

However, image maps seem to have gone out of favor so you could create your own font (or download it) and use @font-face which styles the text in normal h1 to h6 tags or p tags.

http://www.wickham43.net/css3.php#font-face

This would be better for SEO, but I don't know where you got the font from.

 

I don't want there to be a separate table for the content of the site and the background...I want the "BIO", "MUSIC", etc to be directly on top of the background (as in my picture),

Image maps just use the whole image with all the text and create separate links over each item.

 

but I don't want WHITE spaces when viewing my site at higher resolution screens.

What white spaces? Around the side? Most people would leave as you have it but place it in a wrap div with a width: ??px; margin: 0 auto; position: relative; which will center it in large window widths.

Link to comment
Share on other sites

Maybe one of the questions should be: Do you actually want to learn webdesign, or do you just want to have this one website? Overall, a webpage should not just consist of images, there needs to be text, too.

Link to comment
Share on other sites

 

1.

-use an image map and then code coordinates for the link hotspots. See http://www.wickham43.net/imagemaps.php

 

-use @font-face which styles the text in normal h1 to h6 tags or p tags. http://www.wickham43.net/css3.php#font-face

 

 

2.

What white spaces? Around the side? Most people would leave as you have it but place it in a wrap div with a width: ??px; margin: 0 auto; position: relative; which will center it in large window widths.

 

 

1. I think 'image maps' are the way I want to do this...correct me if I'm wrong, but from reading the link you gave me and other links on Google, it seems as if you can only use fonts with @font-face. The way I made my image was in Photoshop----I started with a font and then I added a stroke on the outside, embossed the image and added effects such as drop shadow, outer glow, etc. To my understanding, you are not able to do this in Dreamweaver. Is this a correct statement?

 

2. The white spaces occur when my background is viewed on larger resolution screens such as those huge MACS with 1600x1200 resolution. Although my target audience will be people using 1200x1024 resolution, I also want to accommodate those using their TVs as a monitor (as well as small monitors such as cell phones if possible). Is there a code for this? And if so where and how do you insert this code into Dreamweaver?

 

I greatly appreciate your help. You have been more than kind! :clap:

Link to comment
Share on other sites

Maybe one of the questions should be: Do you actually want to learn webdesign, or do you just want to have this one website? Overall, a webpage should not just consist of images, there needs to be text, too.

 

Honestly, I will have no need to continue with webdesign after I finish my website...It's very interesting, but I won't have the time to pursue it between my schooling and music. I understand that I will have to add text to the website, but it will mainly consist of images and visual effects with minimal text. It's going to be a website that will feature my music so I don't want too much clutter...I just want something fresh and clean looking, with nice effects, to accompany my music.

Link to comment
Share on other sites

Webdesign is a lot of fun, and there is a lot involved, maybe not quite worth all the work for just one site. It might be more efficient to use a template or maybe even have the site done? But if you do want to do it yourself, maybe reading a couple basic tutorials would be good to give you an idea how things work.

Link to comment
Share on other sites

Webdesign is a lot of fun, and there is a lot involved, maybe not quite worth all the work for just one site. It might be more efficient to use a template or maybe even have the site done? But if you do want to do it yourself, maybe reading a couple basic tutorials would be good to give you an idea how things work.

 

I already know how to use photoshop so I've conquered half the battle (just because you know how to program, doesn't necessarily mean you know how to graphic design and vice versa). I would pay someone to do this, but I don't have the money right now (I'm a broke college student).

 

Do you recommend any tutorials?

thanks : )

Link to comment
Share on other sites

Killersites has great tutorials - look into http://www.how-to-build-websites.com/lessonOne.php (part of Killersites) for some basics. Or view some of the 'teaser' videos on http://www.killersites.com/university/ - they should be enough to get you started. Plus, you can always come here and post questions if you get stuck.

Link to comment
Share on other sites

Killersites has great tutorials - look into http://www.how-to-build-websites.com/lessonOne.php

 

Plus, you can always come here and post questions if you get stuck.

 

Andrea,

 

I appreciate you being patient and helpful... I know how annoying it can be when noobs show up on the forum and ask dumb questions (It happens on music forums ALL the time. People show up expecting there to be a 'quick fix' on how to make amazing music).

 

I have the creativity to make a nice site, now I just need to learn the technical aspects :D

Link to comment
Share on other sites

1. I think 'image maps' are the way I want to do this...correct me if I'm wrong, but from reading the link you gave me and other links on Google, it seems as if you can only use fonts with @font-face. The way I made my image was in Photoshop----I started with a font and then I added a stroke on the outside, embossed the image and added effects such as drop shadow, outer glow, etc. To my understanding, you are not able to do this in Dreamweaver. Is this a correct statement?

 

2. The white spaces occur when my background is viewed on larger resolution screens such as those huge MACS with 1600x1200 resolution. Although my target audience will be people using 1200x1024 resolution, I also want to accommodate those using their TVs as a monitor (as well as small monitors such as cell phones if possible). Is there a code for this? And if so where and how do you insert this code into Dreamweaver?

 

If you use an image map you don't have to worry about @font-face. You use the photoshop image you already have linked in your first post complete with the black text and use it as the map image and then create hotspot links over the top of it.

 

Stretching a page to suit all window resolutions is not a good idea. Just create it as a fixed width place it in a wrap div with a width: ??px; margin: 0 auto; position: relative; which will center it in large window widths.

Link to comment
Share on other sites

If you use an image map you don't have to worry about @font-face. You use the photoshop image you already have linked in your first post complete with the black text and use it as the map image and then create hotspot links over the top of it.

 

Stretching a page to suit all window resolutions is not a good idea. Just create it as a fixed width place it in a wrap div with a width: ??px; margin: 0 auto; position: relative; which will center it in large window widths.

 

I appreciate you letting me know about "@font-face" because I will be needing it for my "BIO" section. If I use an image map, can the word be found in google when searched?

 

What resolution do you recommend for me to use? 1200 x 1024 or 1024 x 768 ?

 

Thank you so much for you help...when I posted this late last night, I was feeling so hopeless. I spent all day in the computer lab at school researching and messing around in Dreamweaver. I was just about to give up, but then I thought it would be a good idea to post in the forum first. You have given me a new found hope to design my website! :)

Link to comment
Share on other sites

I appreciate you letting me know about "@font-face" because I will be needing it for my "BIO" section. If I use an image map, can the word be found in google when searched?

 

What resolution do you recommend for me to use? 1200 x 1024 or 1024 x 768 ?

 

Thank you so much for you help...when I posted this late last night, I was feeling so hopeless. I spent all day in the computer lab at school researching and messing around in Dreamweaver. I was just about to give up, but then I thought it would be a good idea to post in the forum first. You have given me a new found hope to design my website! :)

 

Text on an image map cannot be seen by a search engine, that's why I said it's bad for SEO, but easy to do.

 

Edit: Google won't see TEXT on an image but should see LINK TEXT according to this

http://www.webmasterworld.com/forum34/456.htm Don't rely on an alt tag, use the title="..." inside the image map link

<area href="intro12.html" coords="113, 108, 158, 157" shape="rect" target="_top" title="link anchor text" alt="link anchor text"></a> although that may show the ugly yellow tooltip with black text in most browsers.

 

 

@font-face is now supported by all major browsers and you would use the decorative image without the text as a body or div background and then use @font-face as hyperlinks in the normal way over the image, but it would be a bit more work and you have to find the font in several formats.

 

Resolution? Personally I would use a wrap div for the whole page content of 1000px to fit inside the vertical scrollbar of a 1024*768 resolution, and use the width: 1000px; margin: 0 auto; position: relative; to center it in wider widths. It is a matter of choice and depends on what resolution you think most of your viewers will have - old computers with 800px width or Mac computers or modern computers with 1440 or 1366px width?

 

This http://www.w3schools.com/browsers/browsers_display.asp shows 1024*768 getting less and less but I think many developers are still coding 1000px width because you don't know which higher resolution is most popular and a centered page can still look neat and easy to read without being so wide that your eye has to move over a wide area.

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...