Login

icephoenix21 · (This post was last modified: 2012-04-26, 11:51 PM by icephoenix21.)

For my final project, I'm supposed to design a web-based portfolio page.
We are expected to use Adobe Dreamweaver, and I honestly haven't touched any form of html in a good two years.
There's a few things I'd like to know, and if anyone could help I'd be extremely grateful.

-If I've made a page design in photoshop, and had to make slices on it in order to make a rollover button for a drop shadow on text (and thus, there are other slices on the page), is there any way I can set a set of light boxes on top of it, without it shifting the slices around? If it helps, I can provide a ss of what I mean >.<

sicnarf · 2012-03-22, 07:46 PM

From an HTML perspective, you'll want to create a link for Home, Photos, etc, by placing an anchor tag around the image/text used to create it.

e.g. <a href="photos.html"><li class="topNav">Photos</li></a>

The simplest way to keep a template constant between pages is to use server-side includes. More on that can be found here: http://www.boutell.com/newfaq/creating/include.html

As far as a viewer goes, you'll probably have more luck with trying to find one for free via Google than making one from scratch.

XTOTHEL · 2012-03-22, 08:19 PM

sicnarf Wrote:e.g. <a href="photos.html"><li class="topNav">Photos</li></a>

Weird wrapping there francis.

<a> tag is the way to go. http://www.w3schools.com/tags/tag_a.asp

sicnarf · 2012-03-22, 08:28 PM

Whoops. ;_;

icephoenix21 · 2012-03-23, 11:29 AM

Thank you, guys. Much appreciated Heart

icephoenix21 · 2012-04-26, 11:51 PM

-If I've made a page design in photoshop, and had to make slices on it in order to make a rollover button for a drop shadow on text (and thus, there are other slices on the page), is there any way I can set a set of light boxes on top of it, without it shifting the slices around? If it helps, I can provide a ss of what I mean >.<

XTOTHEL · 2012-04-27, 01:13 AM

I never ever use the slicing tool in Photoshop...what you should be looking for is exporting each item individually and then using div layers to layer them, with the help of CSS of course. Smile

happylight · 2012-04-27, 01:21 AM

Not sure if this is what you want but making a button that changes on mouse over is something like this

Code:
<html>

   <head>

      <style>

         .button a {

            display: block;

            width : 100px;

            height : 20px;

            background: url(foo.jpg);

         }

         .button a:hover {

            background: url(bar.jpg);

         }

      </style>

   </head>

   <body>

      <div class="button"><a href="#">link</a></div>

   </body>

</html>

icephoenix21 · 2012-04-28, 01:14 AM

XTOTHEL Wrote:I never ever use the slicing tool in Photoshop...what you should be looking for is exporting each item individually and then using div layers to layer them, with the help of CSS of course.

Unfortunately, thanks to my school's logic of things, I've taken no coding classes, yet they require this as a final >_> makes total sense, right? So slicing was the only thing I knew how to do. Guess I'll look up a youtube tutorial on that D:

happylight Wrote:Not sure if this is what you want but making a button that changes on mouse over is something like this

Code:
<html> <head> <style> .button a { display: block; width : 100px; height : 20px; background: url(foo.jpg); } .button a:hover { background: url(bar.jpg); } </style> </head> <body> <div class="button"><a href="#">link</a></div> </body> </html>

I'll try that, Jay. DW trial ran out so I gotta go be a pirate ._.

Is there any way to just set lightboxes on top of your layout, as opposed to having it shift around?

Like in 6:11 of this video (http://www.youtube.com/watch?v=kEtDT4KsL-Q) he just drags and drops it, but the pre-made layout he used already has that section divided up. How do I do that if I've made a layout in photoshop...as opposed to using a pre-made template?

iamflip · 2012-04-28, 01:31 PM

Try Aptana instead. May require some getting used to, but it's much better than Dreamweaver.

Also, about that layout in Photoshop... I assume the elements are still in their own layers, right?

happylight · 2012-04-28, 11:50 PM

Sorry can't really help you with Dreamweaver. Dx When I want to make webpages I just use a text editor.

icephoenix21 · 2012-04-29, 09:27 PM

iamflip Wrote:Try Aptana instead. May require some getting used to, but it's much better than Dreamweaver.

Also, about that layout in Photoshop... I assume the elements are still in their own layers, right?

The only problem is that the teacher is requiring us to use Dreamweaver ;/ Otherwise I'd be playing around in Muse instead; and of course haha, I almost never flatten my stuff ._.

~And Okay, Jay. Thank you anyways D:<

iamflip · 2012-04-30, 07:22 PM

That's good that nothing has been flattened yet. What you can do now is export each element as their own images to be placed on the webpage. Sure it'll take a bit of manipulating DIVs and CSS, but it's worth it.

EDIT: ...which is basically what Jay said. Just realizing this now loool.

Login
Username:
Password:	Lost Password?
	Remember me