SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    new, looking for image help

    I'm new, I wanted to see if this actually worked. I'm reading a book entitled website the right way by this guy named Ian lloyd. In chapter five images is discussed. I can't seem to pull the image on my computer up. Any idea what I might be doing incorrect? The webpage doesn't seem to find it on my computer. Also, I want the photo to fill the entire page and I want to place text over it. What is dreamweaver? Should I use a photo package like adobe? I have a nice SLDR a sony alpha 100.

  2. #2
    whagwan? silver trophybronze trophy akritic's Avatar
    Join Date
    Nov 2006
    Posts
    2,780
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    It's usually that you have the image in the wrong directory or the code has an error in it. Post the code up and we'll see what's going on.

    As for Dreamweaver, it's a fully featured development 'studio'. I don't happen to use it but I know a person who does and I'll ask them to give you a better explanation.

    Photoshop, by adobe, is the most common piece of software used to manipulate images for the web. There are other adobe programs that do different things, like Illustrator and InDesign, but they are more suited to specific tasks whereas photoshop is a good all-rounder.

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swanswan View Post
    I can't seem to pull the image on my computer up. Any idea what I might be doing incorrect? The webpage doesn't seem to find it on my computer.
    Do you have the image on your computer? Are you using one of your own images? As Andy mentioned above, you need to make sure the path to the image is correct. Make sure the image is in the same folder as your other webpage files and then link to the image that way,.

    Also, I want the photo to fill the entire page and I want to place text over it.
    You need to be careful on the size of the image before you use it as a background image. You can use the image as the background to your page using css background properties and then use a a container div set over the image to hold your text.

    What is dreamweaver?
    Dreamweaver is web authoring software. You use it to markup web pages. I'm biased towards this software for coding websites because I've been using it for years and use it every day. More information about Dreamweaver can be found here: http://www.adobe.com/products/dreamweaver/

    It is a bit on the pricey side, and would strongly urge you to learn HTML/CSS before even thinking of using it. It does not create web pages for you automatically (as a lot of people expect it to), you need to know the underlying code to successfully use the software.

    Should I use a photo package like adobe?
    Adobe is the manufacturer of different software, Dreamweaver being one for coding and Photoshop and Fireworks for image manipulation. I use Fireworks for creating my web design mockups and then converting the mockup into a webpage using Dreamweaver.

    The Adobe products are high end and again, a bit pricey - so it really all depends on what you are trying to achieve. Are you going to be developing websites on a more permanent basis or are you just building one website for yourself. If it's a one off, then there are products much cheaper than the Adobe range that would be suitable to do the job...

    What are you using to follow the tutorials in the book you mentioned?

  4. #4
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <img src="file:///c:/Documents and settings\hp_adminstrator\my documents\2009-02(feb)/dsc00394.jpg alt="paper and rose" />


    I tried saving the image in IE and that worked, I was alittle excited about that at least I got to see what it would look like. The image is mine and it is on my computer. I liked how it looked so at this point I don't think I'll be buying photoshop. Not right now anyway. What are you using to follow the tutorials? I'm currently just reading the book and using my windows xp on an hp desk top. If I understand your question correctly? I've gotten other books but haven't broken into them. "the complete reference html & xhtml by thomas powell. Larry Ullman PHP and MYSQl, Javascript by Negrino and smith

    You need to be careful on the size of the image before you use it as a background image. You can use the image as the background to your page using css background properties and then use a a container div set over the image to hold your text. I will try to do what the previous sentence suggest.

  5. #5
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,745
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swanswan
    <img src="file:///c:/Documents and settings\hp_adminstrator\my documents\2009-02(feb)/dsc00394.jpg alt="paper and rose" />
    That may be your problem.

    Put the html file and the image into the same folder and link to it directly in there. That should work. If not, something else is wrong.


    <img src="photo.jpg" alt="" />




    _
    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swanswan View Post
    I want the photo to fill the entire page and I want to place text over it.
    Try this:
    <html>
    <head>
    </head>
    <body backgroung='c:/pics/image.jpg'> //image.jpg: name ur own image and path
    This is my text.
    </body>
    </html>

  7. #7
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Don't teach a new guy bad habits!

    Design elements should be implemented with CSS - HTML attributes for design should not be used.

    Code html:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title>Your First Page</title>
            <link rel="stylesheet" href="Style.css" type="text/css" />
        </head>
        <body>
            <h1>Your First Site</h1>
            <p>Content Content Content...</p>
        </body>
    </html>
    Style.css:
    Code css:
    body{
        background: url('yourphoto.jpg') no-repeat #fff;
        /*
         * No-Repeat means that the image isn't repeated.
         * To repeat the image completely, omit this.
         * To repeat it only horizontally, use: repeat-x
         * To repeat it only vertically, use: repeat-y
         * #fff is the background color in the absence of an image, in hexidecimal format.
         * The first character is the amount of red, the second is the amount of green, the third is the amount of blue.
         * The characters go from 0 (no colour) to f (full colour), i.e. from 0-9, A-F.
         * As there is full red, green and blue, the colour is white.
         */
    }
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  8. #8
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think swanswan is trying to run before he can walk. :-)

    Swanswan - you really need to learn some basic html and css. I know you are trying to learn by using the book you mentioned - but you need to go through all the exercises so that you can understand the basics.

    Creating a background image for a page is relatively easy using css. However, your next step of creating content on top of the background can be fraught with problems unless you learn more than you appear to know now.

    Firstly, you need to create a new folder on your harddrive, and put the image you want to use inside this folder. This folder should contain any files you are going to use to create your web pages. When you create your web page, usually saved as index.html, this will also need to be inside this folder. This will then insure that all the paths to your images etc will be correct.

    The path you show above shows that the image is in a folder on your desktop but that the webpage you created (at least I'm assuming you've created one), is not in the same location as the image - hence the wrong 'path'.

    When I asked what you are using to create your page, I meant - what program/software are you using to 'code' the page? Are you using something like Notepad for example?

    Please go through the book you currently have to complete all the lessons provided (I don't know the book, but hopefully it teaches you the basics - particularly how to work with files, paths etc) as well as teaching you html and css.

  9. #9
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh, and by the way, avoid dreamweaver whilst you still class yourself as a beginner. Temptation to use the WYSIWYG can quickly throw all of your potential away.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  10. #10
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think swanswan is trying to run before he can walk. :-) I concur, you are on to me!!! I also run with sissors (pointed end away from the body not <body>), color outside the lines and laugh when it's considered inappropriate. I'm a real hoot at wedding receptions.
    I use notepad. I will try to save the image and webpage to the same folder. Paths, files? I don't recall lloyd's book discussing paths, but Castro's book does some. I will tinker with the various suggestions and let you know. Do teach the new guy bad habits. Are there other habits? I will try to stay inside the lines, I promise.

  11. #11
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, the best place to find out about good/bad markup habits is the Design Forum.

    Here are just some tips I can come up with:

    Make sure you code semantically; Avoid <table>s like the plague unless you are displaying grid-based data.

    Menus are simply lists so code them with the <ul /> tag, and each link being <li><a /></li>.

    Have a clear header structure. Only ever use <h1> ONCE on a webpage. Use <h2> ONLY after <h1> has been used and NOT after a <h3>. Opera's table-of-contents view is a good way to check if you have it right. Oh, and make sure you aren't using Internet Explorer to build your designs with. If you use IE normally, change to a decent browser like Opera, Firefox, Chrome or Safari. Check your design regularly in these. If your design looks good in the decent browsers but not in IE, ask in the design forum if you aren't sure what you're doing - that'll save you from butchering up some perfectly good CSS.

    Don't mix design with HTML - HTML is purely markup. All styles should be done with CSS.

    If you're going to use JavaScript, don't RELY on its use - some have JS disabled.

    Always include the HTML doctype etc, and code using STRICT - XHTML 1.0 Strict or HTML 4.01 Strict. Validate your pages regularly. DONT display the crappy 'valid (X)HTML' images though.

    Don't use WYSIWYG editors (e.g. dreamweaver's design view). They will destroy you and your site.

    Keep HTML markup minimal. If you open theoretical tag A, and then immediately open tag B, then have some content followed by closing tag B then immediately closing tag A - chances are you don't need tag B at all, unless it's an image (in which case tag A isn't needed) or a link (which is currently restricted to only <a> tags...).

    Avoid large images for design elements. Remember images need to load.

    Oh, and make sure your design is tasteful! If you don't know what colors to use, use a color scheme picker online, and try out some different color ideas. Don't use colors that clash and, if you find yourself using yellow text on a red background, you need to reconsider before your reader's eyes dissolve.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •