16 replies [Last post]
Dead Walrus
Dead Walrus's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Joined: 2010-12-26
Posts: 9
Points: 10

DISCLAIMER: While I have edited CSS before and am relatively familiar with it, as well as HTML, I'm not an expert, so may be prone to asking some questions which could seem very daft. With that out of the way, here is my quandary:

I currently own the domain www.deadwalrus.com. It is hosted on DreamHost.

What I would like to do with this domain is turn it into a menu-directory for its sub-domains (e.g., its only current one, the work-in-progress deadwalrus.com/bug-out), as well as my other sites (e.g., my DeviantArt account). I'm visualising something similar to a format previously used by the owner of www.Rosalarian.com - she has a similar but different design now - which had an illustration of her on the right of the page, with speech bubbles on the left of the illustration, each bubble hyperlinked to a different sub-domain or website.

My design would have a large illustration (Possibly a gigantic Dead Walrus) in the centre, connected to the bottom of the page, with smaller illustrations above it, and possibly around its left and right as well. White space around it, and possibly the illustrations looking like Ink-Stains on a surface, so as to suggest a wider environment.

The problem is, I haven't the faintest idea as to how to build something like this at the HTML and/or CSS level. (I've already contacted the owner of Rosalarian.com, but she can't remember how she did it). I can create the illustrations, and in an HTML format I can add links to them. However, from there I have the feeling that I'd start messing things up if I went too far without help. For instance, supposing I create all this as one HTML file, do I save it as a .php, then upload it onto my FTP? Do I upload each illustration separately onto the directory for deadwalrus.com, then upload the HTML file that knits them all together? Is there possibly an application that can make this easier for me? Is there (somehow) a way of doing this on HTML instead?

I would be grateful for any and all help you can provide. My humble thanks in advance.

Happy New Year, everybody!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Dead Walrus, There are

Hi Dead Walrus,
There are many ways to cook an egg Puzzled
Sounds like you just need to put the walrus image as a background to the body and have a styled, positioned menu on the page.
Start out generating a simple layout then add the style rule for the background image and markup for the menu. You may want to look at listutorial for ideas on structuring and styling the menu.
You can save it as a php or html file.

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 7 years 20 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Jump start

It looks like you need someone to jump start your project by coding up your first page for you. Have you designed your page layout yet?

Dead Walrus
Dead Walrus's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Joined: 2010-12-26
Posts: 9
Points: 10

How do you mean by

How do you mean by 'designed'? I've created one element of it (the 'Walrus' illustration), and I'm working on a couple of the others...

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 7 years 20 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

Dead Walrus wrote: How do you

Dead Walrus wrote:

How do you mean by 'designed'? I've created one element of it (the 'Walrus' illustration), and I'm working on a couple of the others...

I meant have you created a complete mockup of your site in Photoshop so that you know exactly where you want to place each element of the design. It helps to plan this out before you start coding.

Dead Walrus
Dead Walrus's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Joined: 2010-12-26
Posts: 9
Points: 10

Ah. No, not quite, but I am

Ah. No, not quite, but I am indeed working on that part. As I said, I've got the main illustration finished and I'm developing the rest of it. Anticipating any possible delays, I should have all the elements finished just after New Years'. Unless you'd rather see some sort of rough work-sketch?

Many thanks for your help, it's much appreciated.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

At this stage, a rough

At this stage, a rough working sketch is often better than anything more refined. The trap most graphics oriented folks get themselves into is to become graphics bound. That is, their design tends to restrict content, whereas content should define the layout; then the graphics can enhance the visitor experience.

The first thing to do is to organize your links, and the appropriate text for each. That may just determine how they must be laid out. Otherwise, you now have your real content to work with.

From your description, you may want to explore ยง13.6.1 Client-side image maps: the MAP and AREA elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Dead Walrus
Dead Walrus's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Joined: 2010-12-26
Posts: 9
Points: 10

Okay, so I have my rough plan

Okay, so I have my rough plan up, it looks like this. The 'Title' and 'Text' are going to be hand-drawn as pics, the 'links' are also pics - I essentially want it to be a parody of/homage to independent movie posters, with the links as mock-laurels. The self-potrait will be part of the walrus image rather than a separate image itself.

Hope that helps.

//mod edit: Humongous (3710x3224px, 491kB) image replaced with a scaled and compressed version. --gt

AttachmentSize
walrus.jpg 22.73 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

OK, now you should replace

OK, now you should replace each image other than the walrus with the text it represents, and mark up the text in html.

Those laurels need to have text included or have a caption line to tell the visitor where the link takes him. Without the text, it's mystery meat.

When developing an image for the web, develop for monitor resolutions. For print at 600dpi, the walrus image is reasonable. For the web at 100ppi, the image is 37 inches wide. Also your jpg compression quality (original at 93) needs to be considerably reduced. For example, I scaled the image to 16% (1/6), and set the quality to 10, since it's a line drawing. The resulting image is not noticeably degraded and the file size is 4.7% of the original. For photographic images, compression quality in the 50 - 70 range is common. High quality photos with delicate gradations may (rarely) need a higher value. Use ImageMagick to scale photos, as there is a noticeable improvement over Photoshop in the finer details.

Having said all that, I may have simply been treading on toes. If you already knew all that and simply forgot to do it, I apologize.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Dead Walrus
Dead Walrus's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Joined: 2010-12-26
Posts: 9
Points: 10

I definitely know about

I definitely know about scaling, thanks, but you did help very much in reminding me of the text problem - I realise now that it would probably be more helpful to use black text links with surrounding laurel images, rather than simply images of black laurels AND text, as the former is more easily edited.

In the better scenario, the laurels would contain a large black title indicating specific categories - e.g., Writings - and text-links in a smaller font, underneath, linking to such things as a wordpress blog, livejournal, etc. This could also reduce the number of laurel-things I needed.

Many thanks, again! Now, what would you suggest doing to the images and links in html?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

For the time being, ignore

For the time being, ignore them. Get the content, as text, marked up. Then you can insert images in place of the text. Text is the base. Once you've become more practiced at building pages, you can skip ahead, but while developing your skills, keep it one step at a time.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Dead Walrus
Dead Walrus's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Joined: 2010-12-26
Posts: 9
Points: 10

Again...not entirely sure how

Again...not entirely sure how to do that. I'm not quite sure about coding and image maps and so forth; you mean I should create html link-codes and then modify them to encompass image files?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

One step at a time

Let's not worry about maps right now. From your sketch and description, that's likely not the way to go.

You have a top banner with some text and a list of links. Mark up the the text. Then post what you've got. Don't even think about the layout; all you want to do is label the components with semantic html element tags.

Don't let it bamboozle you. There's a reason we call it building a page or a site. You simply take it one step at a time, starting with the foundation; marked up content.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Dead Walrus
Dead Walrus's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Joined: 2010-12-26
Posts: 9
Points: 10

I've found a site that has a

I've found a site that has a design rather similar to what I'm after:

http://erikamoen.com/

Except not using WordPress. Also...I'm probably going to be re-working the main image due to the essential part of it (the self-portrait illustrating the picture) is very similar to that in the above link. Note I don't want to do exactly the same as Erika, as I'm going to put a webcomic at deadwalrus.com/bugout and I can't have wordpress installed at both a domain AND sub-domain, but I would like to have a similar setup in having a Bio, Gallery, Blog in sub-domains linked to at the frontpage, as well as outward links to deadwalrus.livejournal.com, deadwalrus.tumblr.net, salierithefish.deviantart.com, etc. All linked to with smaller images connected to a larger image.

Another good example of what I'm going for is at http://www.annafitzpatrickart.com/, which has a gallery and Bio and doesn't use WordPress. (I think.) If it will be necessary (or advisable) to start again, move the whole thing onto WordPress under a similar setup to Erika, and get a different Domain for Bug-Out (the webcomic), I'll happily do it. If not, some help with getting a gallery and Bio would be appreciated - couldn't I simply just create what's on http://www.annafitzpatrickart.com/about.html, http://erikamoen.com/about/ with simple HTML/CSS editing?

Meanwhile, here are the marked HTML links:

 
BLOGS
<A HREF="http://www.deadwalrus.com/blog">WordPress</A> 
<A HREF="http://deadwalrus.livejournal.com">LiveJournal</A>
<A HREF="http://deadwalrus.tumblr.net">Tumblr</A>  
 
ART
<A HREF="http://www.deadwalrus.com/gallery">Gallery</A>
<A HREF="http://deadwalrus.com/bugout">Bug-Out</A>
<A HREF="http://salierithefish.deviantart.com">DeviantArt</A>
<A HREF="http://etsy.com/shop/beastcrafterkent">Etsy</A>  
 
PERSONAL
<A HREF="http://www.deadwalrus.com/bio">Bio</A>

Dead Walrus
Dead Walrus's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Joined: 2010-12-26
Posts: 9
Points: 10

Okay, I've rendered a new

Okay, I've rendered a new plan for the layout. Again, it's all going to be images - large and small ones. Walrus on the bottom left, Self-Portrait on the right, the titles rendered as links with images of text masking them. The extra branch is in case I ever need to edit it and add links elsewhere.

Hope that helps! (Also the plan is of a good size now.)

AttachmentSize
DW.jpg 147.42 KB
Dead Walrus
Dead Walrus's picture
Offline
newbie
Last seen: 11 years 38 weeks ago
Joined: 2010-12-26
Posts: 9
Points: 10

Erm...any help here?

Erm...any help here?

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 7 years 20 weeks ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 313
Points: 360

If you look

at the site you mentioned earlier on, and view source (right click on the page and View Page Sorce) and then in the source code find the link to the style.css file, you will see how the navigation was laid out. It would also help if you have some sort of developer tool like Firebug, so you can see the css for each element.