Tip:
Highlight text to annotate it
X
Ok. Now that we have a sense of what we need to accomplish, let's go ahead and jump to
our Drupal site that we just installed and see what we have to work with. I'm going to
jump to the browser and here I'm on the homepage. This is the default page that you land on
after you go through the installation process. You might have already noticed that we've
been logged in as that first user that we created as the administrative account. You
see here in the upper right hand corner we have a link to "Log out". So what do we have
to work with on this page? Specifically, how do the elements on this page match up with
the elements that are on our homepage mockup? Let's go ahead and start at the top and work
our way down just like we did with the mockup and line these elements up with the elements
in the mockup.
Ok. At the very top, we have two bars that go all the way across the page. And if you
look at the text of these items, it says "DASHBOARD", "CONTENT", "STRUCTURE", "APPEARANCE", "PEOPLE",
"MODULES", "CONFIGURATION", "REPORTS" and "HELP". This looks like it probably has something
to do with the administration of the site. And if that was your guess, you'd be right.
This top section here is an administration bar that allows you to navigate to administrative
sections of the site and this second bar here is a way to add shortcuts to this bar so that
you can easily navigate to pages that you use often. So this whole section here, we're
probably going to discount for now, because the mockups display how pages look before
a user logs in. So we're going to start our mapping of elements right below this shortcut
bar.
At the very top left we have our logo. So we have a logo in the top left corner as well
with our mockup. We have the name of the site but it looks like this is text. Now the name
of the site and the mockup looks like it is image based so I'm thinking that this will
have to be removed and be replaced with an image.
In the upper corner, we have "My account" and "Log out". And these are links that weren't
in the mockup but we might assume that they would be in the bottom part of the mockup.
Let's go ahead and jump back to the mockup and take a quick look. I'm going to go to
the resource directory and open up "homepage dot png". So we see down here in the lower
left hand corner we have a "Log in" link. And chances are if the person is logged in,
then we're going to have a logout link and the way for them to manage their account.
So let's go ahead and jump back to the browser. That's probably what this would be for. So
we just need to move the position of this menu.
As we look down, we have a tab here that says "HOME". Now I'm guessing that because this
is a tab that there could be multiple tabs in this location. And if we jump back to our
mockup, we see that we do have a navigation here that can be extended most likely by adding
additional pages but there's no tabs. No tabs around the actual text. So it looks like there
might have to be some changes here to the look and feel but The functionality may be
able to stay the same, depending on if we can expand these menu items.
I'm going to jump back to the browser. And as we look down, we see there's a box here
for a search. And this looks pretty much exactly like it does in the mock up. I'm going to
jump back to the mockup. We see here, we have our search box but it's in the right hand
side instead of the left, like it is on the site.
Ok, let's jump back to the browser. Below the search box, is another box that says "Navigation"
and there a link in it that says "Add content". This says to me that maybe this is also an
administration area of the page but we'll have to check our site, both as a normal user
and as an administrative user, to see if this displays. If it doesn't display, then we're
good to go and we don't have to worry about it. If it does, we'll need to hide it.
Now over here in the main content, it look like we have a title and we have some content
with a link. So it looks like we should be able to replace this out with our content
and the structure should be fairly similar. As we look at the bottom, it looks like we'll
need to replace the background image, just like we will with the top, as well as possibly
adjust the colors a bit. We have this "Powered by Drupal" link down here and that's not part
of the mockup so we probably need to get rid of that, as well as this line right here.
It also looks a little thick and possibly we need to bring the size of this footer part
down a bit.