pienaple Posted June 22, 2008 Share Posted June 22, 2008 Does anybody know if it is possible to insert text into an image, through Dreamweaver? I have the whole image "mapped" and i need an area of it i could put different text for each webpage. If this is possible could someone please explain it, or just give me a link that would help? Thanks I may start making sigs againRSN: Pie Naple Link to comment Share on other sites More sharing options...
sloter Posted June 22, 2008 Share Posted June 22, 2008 what about put text over the image? Link to comment Share on other sites More sharing options...
pienaple Posted June 22, 2008 Author Share Posted June 22, 2008 what about put text over the image? How? :P I may start making sigs againRSN: Pie Naple Link to comment Share on other sites More sharing options...
sloter Posted June 22, 2008 Share Posted June 22, 2008 Use divs Link to comment Share on other sites More sharing options...
pienaple Posted June 22, 2008 Author Share Posted June 22, 2008 Use divs You know, the purpose of the topic was for people to teach me to do it? >_> Is there a tutorial i can lo ok at? :( I may start making sigs againRSN: Pie Naple Link to comment Share on other sites More sharing options...
sloter Posted June 22, 2008 Share Posted June 22, 2008 If you had some kind of knowledge of html that would be nice not to say is is really easy too. http://www.w3schools.com Link to comment Share on other sites More sharing options...
pienaple Posted June 22, 2008 Author Share Posted June 22, 2008 If you had some kind of knowledge of html that would be nice not to say is is really easy too. http://www.w3schools.com I have been looking on there for a while and all it says is that divs are used for centering text and paragraphing it >_> I have very little knowledge of html, so this is the reason this topic was actually made ^_^ Can you help me? I may start making sigs againRSN: Pie Naple Link to comment Share on other sites More sharing options...
Rcty Posted June 22, 2008 Share Posted June 22, 2008 Over the image. Rcty Link to comment Share on other sites More sharing options...
pienaple Posted June 22, 2008 Author Share Posted June 22, 2008 Thanks, but im not sure if that would be helpful, since i don't really have a background image >_> Here: [hide=Clickie][/hide] What i want, is to be able to type text into the "welcome" box on dreamweaver, instead of doing in onto the actual image in photoshop. I may start making sigs againRSN: Pie Naple Link to comment Share on other sites More sharing options...
sloter Posted June 22, 2008 Share Posted June 22, 2008 You can move them just adjust margin in the css and the padding etc... Link to comment Share on other sites More sharing options...
eyehawk78 Posted June 22, 2008 Share Posted June 22, 2008 The simplest way (admittedly not the best) will to use z-index ing. W3Schools Tutorials Website Updates & Corrections | Website Discussion Link to comment Share on other sites More sharing options...
Earpy Posted June 23, 2008 Share Posted June 23, 2008 One way you can do that in Dreamweaver is to select the welcome box, and then the propeties box should appear. Once it does, find the location of the image, and copy the text. Delete the text, and then put the location to the Welcome box image into the 'Background Image' box. This will then convert your image to the background, and will allow you to type over it. Is that what you needed? Let me know :) Link to comment Share on other sites More sharing options...
Nadril Posted June 23, 2008 Share Posted June 23, 2008 Can't you just make the welcome text a table background? Should probably split it up into tables anyways. Link to comment Share on other sites More sharing options...
ClareJonsson Posted June 23, 2008 Share Posted June 23, 2008 You should really learn a bit of CSS, the whole page can be controlled via that. There's loads of tutorials online too! And to show you how, here's your site coded in CSS/HTML: CLICK HERE. You will notice there is no formatting in the actual HTML, it's all done in the style sheet. And here's the source: DOWNLOAD. [Assist-X] Link to comment Share on other sites More sharing options...
pienaple Posted June 23, 2008 Author Share Posted June 23, 2008 You should really learn a bit of CSS, the whole page can be controlled via that. There's loads of tutorials online too! And to show you how, here's your site coded in CSS/HTML: CLICK HERE. You will notice there is no formatting in the actual HTML, it's all done in the style sheet. And here's the source: DOWNLOAD. Wow thanks a lot there! Really, even hosting it for me to see? :P Oh and is the same thing done with putting images into the 2 "latest work" boxes? I have not looked through the source yet, but i will in a min. Thanks again! EDIT: Wait, you actually cut my image into pieces? How do you do that then? P.S - As i've said i really have no experience in CSS or html that much >_> EDIT 2: It doesn't seem to work when i open the source :( All is see is a white background and the blah blah text >_> I may start making sigs againRSN: Pie Naple Link to comment Share on other sites More sharing options...
ClareJonsson Posted June 23, 2008 Share Posted June 23, 2008 Wow thanks a lot there! Really, even hosting it for me to see? :P Oh and is the same thing done with putting images into the 2 "latest work" boxes? I have not looked through the source yet, but i will in a min. Thanks again! That's okay, it only took an hour and I was bored :) EDIT: Wait, you actually cut my image into pieces? How do you do that then? P.S - As i've said i really have no experience in CSS or html that much >_> Well I used Paintshop Pro and cut out the relevant sections of the image. I then created DIVS and used CSS to place the images in the DIVs in the correct place on the webpage. EDIT 2: It doesn't seem to work when i open the source :( All is see is a white background and the blah blah text >_> You won't be able to use Dreamweavers Design (WYSIWYG) View to edit that page, you need to use the code view and edit the code directly. The thing about the design view is you are not getting a true representation of what the site will actually look like in a browser, especially because things look different in IE and Firefox. I really would get to grips with HTML and CSS, you will find website creation much more fun. Anyway, to edit the page, switch to Dreamweavers code mode by clicking View, and selecting Code. Don't forget that there's 2 files that control this page: 1. Index.html - This is the raw HTML but has no formatting information. 2. css/main.css - This is the style sheet and contains all the formatting for the site. Good luck, Clare. P.S. Don't forget you need to unpack the entire zip to a folder, you need the two folders images and CSS as well as index.html. Without them you will only get the raw text. [Assist-X] Link to comment Share on other sites More sharing options...
pienaple Posted June 23, 2008 Author Share Posted June 23, 2008 EDIT 2: It doesn't seem to work when i open the source :( All is see is a white background and the blah blah text >_> You won't be able to use Dreamweavers Design (WYSIWYG) View to edit that page, you need to use the code view and edit the code directly. The thing about the design view is you are not getting a true representation of what the site will actually look like in a browser, especially because things look different in IE and Firefox. I really would get to grips with HTML and CSS, you will find website creation much more fun. Anyway, to edit the page, switch to Dreamweavers code mode by clicking View, and selecting Code. Don't forget that there's 2 files that control this page: 1. Index.html - This is the raw HTML but has no formatting information. 2. css/main.css - This is the style sheet and contains all the formatting for the site. Good luck, Clare. P.S. Don't forget you need to unpack the entire zip to a folder, you need the two folders images and CSS as well as index.html. Without them you will only get the raw text. I have unpacked the whole folder before but i still get this: [hide=][/hide] I don't if i'll just give up lol :P It seems that i will be asking too many questions to get to nowhere >_> Do you know of a tutorial that fully explains the way to program what i need? Like what to use to slice up the images, how to code the Stylesheet, etc? It would be much appreciated just like the rest of how much you already helped me :P I may start making sigs againRSN: Pie Naple Link to comment Share on other sites More sharing options...
ClareJonsson Posted June 23, 2008 Share Posted June 23, 2008 See the Code View Button highlighted in the image below: Click it, this is what you should be using to edit web pages. And below I have highlighted the way to see the CSS inspector: I will look for usefull tutorials for you later on. [Assist-X] Link to comment Share on other sites More sharing options...
ClareJonsson Posted June 23, 2008 Share Posted June 23, 2008 Try working your way through this HTML tutorial: Link. Once you have done that, take a look at this CSS Tutorial: Link. if you have any questions, just ask :) [Assist-X] Link to comment Share on other sites More sharing options...
pienaple Posted June 23, 2008 Author Share Posted June 23, 2008 Thanks for the tut links :) Oh and really im not that stupid >_> I know how to edit code and all that, but i still don't know why it wont show the picture etc? I DID put the image mapping in myself through code so it proves i can do something :P I may start making sigs againRSN: Pie Naple Link to comment Share on other sites More sharing options...
ClareJonsson Posted June 24, 2008 Share Posted June 24, 2008 Actually yeah, the only hard thing about CSS is cross browser compatibility. Things that look perfect in FF may be completely different in IE, and that is the thorn in the side of web developers. The rest is pretty darn simple! As I said in an earlier post, from the image pienaple supplied us with, I had that chopped up, and the page written in about an hour, and that was taking my time and I had breakfast in the middle of that too! It won't take anyone long to get to grips with CSS especially with all the online tutorials plus help from people like the fab guys on forums like this :) [Assist-X] Link to comment Share on other sites More sharing options...
thrash-boy Posted June 24, 2008 Share Posted June 24, 2008 http://www.htmldog.com has great tutorials that concentrate on HTML = content and CSS = presentation. you should really check it out. Link to comment Share on other sites More sharing options...
Nadril Posted June 24, 2008 Share Posted June 24, 2008 Actually yeah, the only hard thing about CSS is cross browser compatibility. Things that look perfect in FF may be completely different in IE, and that is the thorn in the side of web developers. The rest is pretty darn simple! Ugh yeah, I know what you mean. I'm helping doing some web design work for a company this summer and I've ran into that problem -- damn annoying. Of course it's almost always I.E that likes to screw up and not firefox. Link to comment Share on other sites More sharing options...
sloter Posted June 24, 2008 Share Posted June 24, 2008 Actually yeah, the only hard thing about CSS is cross browser compatibility. Things that look perfect in FF may be completely different in IE, and that is the thorn in the side of web developers. The rest is pretty darn simple! Ugh yeah, I know what you mean. I'm helping doing some web design work for a company this summer and I've ran into that problem -- damn annoying. Of course it's almost always I.E that likes to screw up and not firefox. Tell me about it. You do one thing to make it work in IE and it screws up everything else. Link to comment Share on other sites More sharing options...
ClareJonsson Posted June 24, 2008 Share Posted June 24, 2008 What is your problem resolution? Great thing for that is to have fixed spaces. Anyway, I want to learn HTML but I have lost intretst on learning it again. I was really into it at one point and then I just gave up. Meh, I have a few books so I might read them. Also have a Photoshop book :D Actually that is my task for summer, learn HTML! Er no Fixed spaces are not exactly a solution. I will give you an example of the kind of thing we web devs are up against: The way IE and Firefox deals with widths/heights and padding in CSS are different. i.e. if you define a div that has a width and height of 100px, and a padding of 4px all round, then that box will be bigger in Firefox, why? Well IE will keep the box size to 100px x 100px and pad it inwards, but Firefox will add the padding to it, so the box will end up 108px x 108px, things like that can be a real pain :( If you want to see the above in action, take a look HERE. The boxes will be different in Firefox and Internet Explorer. [Assist-X] Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now