Image

WEB AUTHORING / Dw + Muse / Term 4, Week 4

(Resuming from the last week’s exercise)

After tons of coding failures and mishaps, I finally finished the exercise to making our own webpage with Dreamweaver. I didn’t screenshot most of the process but here are some that I did, when I was not too stressed out about getting the coding right.

This slideshow requires JavaScript.

(Making the landing page, changed the navigation bar form the bootstrap-preset ones to ordinary texts.)

This slideshow requires JavaScript.

Centering the images is a lot tougher than I thought it’d be. I thank google for the solution. (display: block, align-items: center, justify-content: center;)

This slideshow requires JavaScript.

The contact page is vastly different from what I’ve planned out because I didn’t know how to place an active textbox. It is also the most screenshot-ed process because I was considerably less stressed out by this point.

I initially encountered a problem after finishing all the pages & launching it on Chrome & Safari; some of the css styling seemed to not register, which left some alignments off. It turns out that I simply haven’t saved the css file yet, so that was solved pretty easily. Opening it in Chrome and Safari gives a different result, mostly for the font of the navigations (My preferred font is MatrixBookSmallCaps – Safari registered this just fine, but Chrome doesn’t, so it used the secondary choice which is Baskerville.)

Flatplan

This slideshow requires JavaScript.

(Google Chrome viewing)

This slideshow requires JavaScript.

Safari viewing

 

 

This week we familiarised ourselves with Adobe Muse, by using some of the widget functions and learning how to create a new site on Muse. Unlike Dreamweaver, it does not require any coding and works very similarly like InDesign. Positioning text and images has never been easier, however some functions are quite limited to what is already pre-built in the software.

(Placing items on the site)

(Creating parallax function by anchoring)

Company website exercise (WIP)

15/11/2016

The company I made for this Muse exercise is a Japanese fashion company, specialising in Japanese traditional outfit. It does not only sell the outfits, but also take requests for the fabric treatment, embroidery, etc.

screen-shot-2016-11-15-at-7-16-33-am
Inserting the images and text – it is very similar to InDesign in its execution.
screen-shot-2016-11-15-at-7-28-03-am
The site contains 3 pages, each linked to each other.
screen-shot-2016-11-15-at-7-34-14-am
Setting up the last page; Services.

screen-shot-2016-11-15-at-7-44-16-am

Previewing the webpage – still with the design template beneath it.

This slideshow requires JavaScript.

Final view of the website – Google Chrome viewing

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s