(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.
(Making the landing page, changed the navigation bar form the bootstrap-preset ones to ordinary texts.)
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;)
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.)
(Google Chrome 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)
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.
Previewing the webpage – still with the design template beneath it.
Final view of the website – Google Chrome viewing