On going process (part two)

While I was playing around with Dreamweaver this week and reading the Help menu, I found out about the “add browser window” option that lets you click on a thumbnail (or any link) and open the full size version in a new pop-up window. You find it in “add behaviour > open browser window”. I added this to each of my cover images, so that users can see the full-size covers and download them if they want to.

I also made the other three “rollover image” buttons today to link with “Special Features”, “Feedback” and “Subscribe” pages of my website. I think these pages will be pretty easy to create, though I’m worried about the two web forms because I don’t really know how to use them.


Last of all today I changed the Template a little bit to create the basic layout of the “Special Features” page. This is just going to be a gallery to display some featured artwork – about five pages in all, I think. Need to download some artwork to display here through the week, and also use Photoshop to create some more magenta buttons – to let users go to the “Previous Image”, “Next Image” and back to the Home Page.

iFrame = in line Frame

I solved the iFrame problem. I didn’t realise that I had to insert a bit of HTML code with the “target” in each link, and also that I needed to give a name to the target iFrame. Once I did this, I was able to get the spreads to load into an iFrame in the right-hand column of my table.

But it’s too difficult to make a frame within a frame to do the separate issues as well, so I guess I’m going to have to create a separate page for each issue and switch between them. So when the Home Page opens, it will display the current issue, with thumbnails for the current issue spreads. If the user wants to go to a previous issue and clicks a thumbnail at the bottom, the link will go to a completely new page. So I need one page for each of the nine issues. This is quite easy to do from my template by cutting and pasting.

So now I have the beginnings of my website and it works quite well. The layout matches my wireframe design, and I’m able to choose between the nine issues with three spreads in each one. The problem is that my images are quite large, and they take a while to load – so I think I’ll take some time through the week to resize them in Photoshop and fix up all the links.

By they way, I need to get the book "Design for Dummy" (if they have one)

On going process

Spent a busy week downloading images from CMYK for the site – mostly covers of about ten issues, plus some sample spreads. First thing I did today was to paste the cover images into the footer section of my template.

Next I used Photoshop to create the two different images for the magenta square logo. One is just a blank magenta square, and the other is the same with a white version of the CMYK logo inside. I’ve never used Dreamweaver before, but the “Rollover Image” feature was really easy. My original idea was to have a home page with minimal text, so the directions for each button or feature will only appear when the mouse goes over them. It was easy to add a link to the CMYK main page as well – and when I tested the page in Firefox, it actually worked.

Finally today I used the Template to create a working version of my Home Page, and saved it in the “CMYK” folder.


The main problem I’m having at this stage is that I want to have two lots of content to load on each page – the front cover (by selecting a thumbnail in the footer) and three spreads (by selecting thumbnails in the far-right column). I don’t know how to get Dreamweaver to do both on a single page! I’ve tried using iFrames without success, because I can’t get them to work properly. I may have to go back to my “HTML for Dummies” book and read about them.

Time to start from nothing

My first time using Dreamweaver without Dave's instruction, but I found the basic page layout fairly easy. I used Dreamweaver to create a “New Site”, which I called “CMYK”. Inside the site folder, I created a few sub-folders for Current Issue, Back Images and Images, because hopefully this will keep the content in order.

Because I know that quite a few of my pages are going to share similar features, I spent most of my time today trying to create a Template in Dreamweaver.

One of the frustrating things is that Dreamweaver gives you quite a lot of choices for different types of layout – 1, 2 or 3 column, with or without header and footer, fixed layout etc. I went back to the wireframes I’d done last week and tried to choose the one that fitted best with my original design. So after a bit of experimenting I finished up with the “Three column, fixed, centered” layout with a header and footer.

The header will contain the magenta square with the CMYK logo (which will be common to all pages). I’ll have to do this next week with Photoshop, because I don’t have time today. The footer will contain thumbnail images of the CMYK magazine covers, based on my wireframe. And I set up a 1 row x 2 column table in the main body of the template, to contain the cover picture and sample spreads.

If I get any time this week, I’ll use it to start downloading some content from the CMYK website.

I love (*´ー`)

Image taken from this link

（*´▽｀*） (・-・*)
(｡･_･｡) (^-^*) (o^^o)
(*´ー`) (\_/)

Don't you think they are adorable ^^

Wikipedia has quite a good entry overview about them.
ヽ( ´ー)ノ Link

Submission 2: Site Map & Visual Roughs

I submitted Task 2 today. I'm very please with the design. I think it very simple but affective. Got an Distinction for last submission. I hope this one is as good (^O^)／ hehe

Basically, I find the CMYK website is very busy with a lot of information already. So I want to create a seperate site for them just for the sake of promotional. They can treat my mini site as a tool to refresh their "brand".

Context
The CMYK management team wants to create a seperate site/blog for advertising the look of CMYK with:
- Images of the cover of each issue,
- Small thumbnails of CMYK spreads,
- Very brief section of past issues,
- Big section of current issue,
- Future issues.

What we are trying to achieve
The idea is to create a stronger focus on the CMYK identity as a “packaging presentation”.

Audience
Long-term readers
Collectors of the magazine
Subscribed readers
New readers who may want to collect every issue.

Brand Overview
CMYK provides a place where new artists and design students can showcase their talents to creative
directors, agency principals and art buyers who read the maga¬zine/website.

Unique Selling Point
An open, healthy and supportive forum for both creative new talents and creative professionals.

A few snapshot from my pdf submission