Jump to content

Pointers Needed For Beginning Developer


MRGhost

Recommended Posts

Good Evening Reader,

 

I'm relatively new to the world of web design and need some pointers on a design that I've drawn up for practice. Up til now, my websites have been relatively plain and straight forward. However, in this highly competitive field I felt that I should begin to get my weight up and try and hang with my competition. So the idea that I had was to work on creating an HTML5 site with a UI that responds similarly to a Flash/ActionScript UI. I have a picture of the PSD Mock-up I created but I don't know how to display it here. If any of you know how and would like to tell me, please let me know.

 

The homepage has a very simple look. The logo of the company that I'm practicing with is diamond-shaped so imagine a webpage with a 960px wide wrapper centered on the screen. In the header is the company's long logo and in the center of the content area is just the diamond-shaped logo with a linkable image on all four sides. The images are square-shaped with the corner under the diamond cut off and a 25px gap between it and the diamond. A 50px gap between the boxes themselves. Hopefully this isn't too hard to imagine.

 

Here's my problem. I would like each box to serve as the main content area for the page it links to. I'm not suggesting that once clicked it goes to another page. That's simple and actually is what the current site does now. No, instead, I want the box to grow and transition to white background. During the transition, the image which was displayed in the box goes away and page information is displayed. I need it to function like a normal website at this point...sort of. I mean this in the sense that I want to display a sidebar and main content in the expanded box. When a link is clicked, the current content fades out and the new content fades in. I still haven't thought come up with a way to get back to the homepage without actually having to reload the page all over again.

 

Now once the blocks are created, it is my opinion that I could achieve the effect of moving through pages by simply placing all the page contents in a div and as the links are clicked, simply hide one div and display the next using css and maybe a touch of javascript. However, I have no clue as to how to create my boxes to begin with. I had thought about using the canvas tag but I wasn't sure how well that could be manipulated so I decided to come here for help. I hope I wasn't too wordy in my explanation but I thought it best to paint the scene for what I'm trying to accomplish. And let me remind you, I'm new to this. I don't know javascript but I have worked with it before, just haven't written it. I decided to practice with this design in hopes that I could learn several techniques at once, javascript being one of them.

 

Link to comment
Share on other sites

Have you looked into Bootstrap? It uses HTML5 and CSS3 and comes with tons of ready made features. It's a bit overwhelming when you review that site but over time you start to appreciate what it can deliver.

 

So I've gone through the whole install process for bootstrap but as I read through their site, I'm not really seeing how it will help me with this particular site. I don't know where to begin.

Link to comment
Share on other sites

As I was saying, it's a learning curve but it has a lot of the functions ready for you. You just need to scan thru which one is best for you.  From the bootstrap site, click on JavaScript from the top menu and then search (via your browser's Find) for Togglable.  This might be what you are looking for. Another option is Collapse.

 

You can test out some of the existing components/scripts yourself by copying the provided source which you could then modify it to fit your need.

 

You can also check out Layoutit

 

Again, it's a lot of readying but I am certain you will find something there that will help you achieve your goal.

Link to comment
Share on other sites

I've been playing around with bootstrap over the weekend and it is pretty nifty. However, I'm still having difficulties trying to figure out where to begin with the more complex portion of the design. To kinda see that main page looks like, check our the organization's current homepage http://www.msculturalcrossroads.org/. My design centers the logo on the page, adds a navigation bar underneath the logo for easy page navigation and removes the current sidebar from the homepage. Now with what's left on the page, keeping the same general layout of the four images surrounding the diamond logo (if I can somehow get my images closer together using this grid layout system, I want to make the images kinda grow to cover the content area completely when clicked. While growing, the image goes away and page content is displayed with a close button at the top to shrink back to normal image size and allow the homepage to be seen again. Can you offer any suggestions as to how that may work? The other option for this design is to just go the easy route and make plain static pages but that doesn't allow me to learn any really nifty CSS3 tricks that I don't already know and definitely doesn't give me practice in learning JavaScript which I don't know any. 

Link to comment
Share on other sites

What you are looking for is modal window. Per that bootstrap page, click on JavaScript at the top and look for Modals. This will get your started but I am not sure how you can 'grow' the image and the display the content that that growing image disappears.

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...