Category #2 Design of Webpages

Message
Author
Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Category #2 Design of Webpages

#1 Post by Hartzell »

Comments on the Chinese webpage design
Jan. 29th, 2016
2:45 pm (GMT + 08:00)

1) In the title, you should add another space ( ) before
八斗子社區


2) Picture at top of right column should be much bigger.


3) Picture on left should be bigger. This picture doesn't show Ms. Chen's face too clearly.
I suggest we replace it with this one of Ms. Chen and her two friends --
http://www.taiwanbasic.com/rec-temp/web ... 71213.jpeg

3b) This 15-11-07-12-35-26-862_photo.jpg can be put at the bottom of the right column, AFTER the email address.
Caption would be simply -- 陳燕銀教授

(3d) After this 15-11-07-12-35-26-862_photo.jpg picture, please arrange three LINKS, in a similar fashion to the bottom of this page --
http://vosive.com/demo/2/glass-china.html

WHICH MEANS -- Three pictures, with captions
. . . . which are encoded as links.

For now, you could use three dummy pictures. Go to Google and search "Taiwan Scenery". Find three random pictures which are "horizontal" oriented. Captions underneath could be
這是照片說明一。
這是照片說明二。
這是照片說明三。

This glass-china.html has some unusual "red covering" effect over these pictures. That is not really necessary.


4a) RIGHT COLUMN: Other pictures should be displayed bigger, and integrated into the text, as per
original webpage -- http://goo.gl/myp38o

You are missing several of the pictures.

There were originally nine pictures. However, picture #2 of the man with the beard is to be removed.

Hence there are eight pictures remaining. I have uploaded these to the following subdirectory --

http://www.taiwanbasic.com/rec-temp/webdesign2/img/

Captions for pictures integrated into the text are placed at the bottom of the pictures, as per original file. See -- http://goo.gl/myp38o

If any captions for pictures are missing please let me know.


(4b) Jessica said: "I've copied the 渔村再生 story as is the word document, is it okay if I remove some of the white space?"

Well, please integrate the pictures into the text first.


(4c) "*******" marks the location of the (original) bearded man picture, and can be removed.



5) Social media buttons are good at the bottom of the so-called navigation bar.


6) For the navigation bar on the left, now are "Home" and "Story".
You could add "Email" and "Links"

Black color for the left panel is not desirable.

We can add an email address at the very bottom of the right column, before the 15-11-07-12-35-26-862_photo.jpg picture.

Jessica said: "Do you have a colour preference? I think that having the whole thing in white looks a little plain, is there another colour that you would prefer for the nav bar?"

Maybe a water texture design would be good. Here is a suggestion, what do you think --
http://www.taiwanbasic.com/rec-temp/web ... ureA12.jpg

If you have a better selection, let me know.


7) LEFT COLUMN: Wording should be --
A REPORT OF ANNIE CHEN

But the lettering of "ANNIE CHEN" should be in a bigger typesize.

Moreove, now, the "A" is missing.


8) Your HTML coding of <title>Report of Annie Chen</title> would best be changed to --

<title>[漁村再生--進階班] 八斗子社區</title>


(8b) Please add meta values for author, keywords, etc.



9) NAME and EMAIL ADDRESS -- above 15-11-07-12-35-26-862_photo.jpg picture, is --

陳燕銀 email: farm9985yahoo.com.tw

[ Note: This email address should not be made into a LINK ]


There should be thirty or forty spaces between
陳燕銀

- and -

email: farm9985yahoo.com.tw


10) Here is the source code for another Chinese webpage which was done for me recently by an overseas Chinese in Europe.

view-source:http://www.taiwanbasic.com/time-flies.html

You can examine the coding, and then look at the webpage too --

http://www.taiwanbasic.com/time-flies.html

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Category #2 Design of Webpages

#2 Post by Hartzell »

Your response and my additional comments of January 29, 8:55pm

Changes made:
1. done - two spaces added
2. done - picture enlarged
3. done - picture cropped and enlarged You need a blank line after the email information --
陳燕銀 email: farm9985yahoo.com.tw


3b. done - alternative avatar picture added
3d. done - three images with captions added in responsive grid layout (they'll change from horizontal to vertical on screen size change). stock images NOT used, instead reused images from the picture section. Chinese for "this is picture description 1-3" added. OK

--> 4. QUESTION: The original template you liked had a pictures section. Do you want me to delete this section and put the pictures in the text? Sorry for the confusion. I am not referring to the "template" for the location of the pictures. I am referring to the original webpage article which is here -- http://goo.gl/myp38o

"*******" marks the location of the (original) bearded man picture, and can be removed.


4c. The word document I received doesn't include pictures, do I just put the pictures anywhere in the text? Please refer to the original location of the pictures in the original webpage article which is here -- http://goo.gl/myp38o


5. Already done
6. Done - Email and links added [/color]

--> 7. NOT DONE YET - Can I put the "report of annie chen" either on top of the photo in the right column or in the main body above the text? Should be in left column

--> 7. I'm not a big fan of the photo of the water, I think it would look much better with a solid colour and a slight overlay, but it's up to you Which is the photo of the water?

8. Done
9. Done
10. done


Left column should have links for
Home
Story
Email
Links


AND THESE ITEMS SHOULD BE MOVED UP

Formerly there were four social media buttons, now the "EMAIL" is sitting on top of these ...

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Category #2 Design of Webpages

#3 Post by Hartzell »

January 30, 2016 9:35 am
Webpage discussion

1) I liked it better yesterday when you had the full body picture of Ms. Chen on the upper left. I don't know why that was changed. Can it be put back the way it was? Thank you.

2) You need a blank line after 以下分享本次課程的簡要記錄:

3a) Please add a caption after the picture of the boat,
(this one -- http://www.taiwanbasic.com/rec-temp/web ... cture6.jpg )
The caption is --
* 八斗子漁船供遊客共同回響過往的歲月。

3b) and then a blank line

4) Looking at your HTML coding for the three pictures at the bottom, and their one line descriptions, it is not clear to me that these are links, which I can later link to other essays of Ms. Chen. Wouldn't links have the <A href="" target="_blank"></A> syntax ? Please advise.

5) The four media buttons are currently "dummy values". How do I (we) encode these so that they are actually functioning?

= = = = = = = =

6) My next project would be a simple webpage for this file --
http://www.taiwanbasic.com/rec-temp/mab ... roof2.docx

No navigation is needed. No menu bar. No links.

This is part of a series, and the emblem is here --
http://www.taiwanbasic.com/rec-temp/mab ... hnew-1.png

A picture or two inserted in the text would be nice, if you could find something simple and uncopyrighted. I think no captions are necessary.

The question now is just how to make the overall page design somewhat attractive. Perhaps a column on the left, which is fully filled in with a graphic texture? Or you might have another idea.

What would be your charge for a simple web page like this? I believe it will be easier that what we did with Ms. Chen's article.

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Category #2 Design of Webpages

#4 Post by Hartzell »

January 30, 2016
3:57 pm (GMT +08:00)
Taipei, Taiwan

1) OK, regarding the three pictures on the very bottom, I can run my mouse over those and see that they are LINKS. That is great. However, the point I was making in my last messages was, can the captions be LINKS as well?
The captions are --
這是照片說明一。
這是照片說明二。
這是照片說明三。

2a) In terms of the media buttons, there are four now. I think I recognize Twitter and Facebook on the left. I don't know the other two ones. Please advise.

2b) However, it seems that the rightmost one is for an email. I don't think I need that one. (We already have an internal link to Ms. Chen's email address fully shown.) Could we replace that with another social media button?

3a) In regard to social media buttons, and how they work, I am unfortunately quite ignorant on this topic. Let me give you my theory on how these buttons should work for me.

Let's consider the homepage of Facebook -- https://www.facebook.com/

I would assume that for any person using a computer (cellphone, tablet, etc.), (A) if they have their facebook account open, then a link to "https://www.facebook.com/" would take them to their facebook account. (B) If they do not have their facebook account open, then by going to "https://www.facebook.com/" he/she would be able to sign in.

3b) Hence, in my view, wouldn't it be best just to link the social media buttons to the homepage of those social media organizations. ? ? ?

3c) And yes, I would prefer that all external links of this type open in a new tab.
As you mentioned, that is --
target="_blank"

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Category #2 Design of Webpages

#5 Post by Hartzell »

January 30
5:10 pm

My next project would be a simple webpage for this file --
http://www.taiwanbasic.com/rec-temp/mab ... roof2.docx

No navigation is needed. No menu bar. One link at the bottom.

This is part of a series, and the emblem is here --
http://www.taiwanbasic.com/rec-temp/mab ... hnew-1.png

A picture or two inserted in the text would be nice, if you could find something simple and uncopyrighted. I think no captions are necessary.

The question now is just how to make the overall page design somewhat attractive. Perhaps a column on the left, which is fully filled in with a graphic texture? Or you might have another idea.

What would be your charge for a simple web page like this? I believe it will be easier that what we did with Ms. Chen's article.

There should be one Youtube link at the bottom of the file.
I don't have the exact URL yet, you could use --
https://www.youtube.com/watch?v=123456abcde

The Youtube graphic is here --
http://www.taiwanbasic.com/rec-temp/mabo/ch-film/

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Category #2 Design of Webpages

#6 Post by Hartzell »

January 30th 11:59 pm
Taipei

Hello:

1) I suggest a webpage design made with reference to this page --
http://constitutiontw.org/archives/2380

There is a white middle. (So, white is the central color.)
It is on top of a lighter background (color #2), which is on top of a darker background (color #3).
(I will leave it up to you to make appropriate choices of colors for color #2 and color #3.)


2) The colored bar runs across the top. No links. No search function.
For the background color of this colored bar, I suggest --
http://static3.grsites.com/archive/text ... isc366.jpg


3) Layout of the page as follows --
(See http://www.taiwanbasic.com/rec-temp/mab ... b2mock.jpg )

There are several items of importance here, and I have placed numbers as 1, 2, 3, 4.

1 -- This is the location for the earthnew-1 graphic. (This "area" may have to be enlarged in size.)

Below this is the colored bar.

2 -- This is the title of the essay.

3 -- This information should be changed to --
2016年02月02日 | Filed under Taiwan Reality

4 -- This subtitle is eliminated.


4) Pictures for insertion in the text --
http://www.taiwanbasic.com/rec-temp/mab ... taiwan.jpg

http://www.taiwanbasic.com/rec-temp/mab ... up4usa.jpg

http://www.taiwanbasic.com/rec-temp/mab ... PTsign.jpg

http://www.taiwanbasic.com/rec-temp/mab ... ROCmug.jpg

http://www.taiwanbasic.com/rec-temp/mab ... testt2.jpg


5) Location for insert of pictures in the text: Pictures should be inserted after the following paragraphs as indicated --
AFTER 臺灣人似乎沒有權利解釋自己的歷使!所以我們要問:到底誰說了算?
Flagmaptaiwan.jpg

AFTER 在國際政治學界,很多人說美國一直扮演臺灣 ”保護國” 的角色。
occup4usa.jpg

AFTER 第三,另一點很重要的是,在舊金山和平條約的條款中,我們只看到日本對臺灣的主權結束,沒有看到接下來有認定一個 “收受國”。
5-SFPTsign.jpg

AFTER 「在法理上,臺彭地區一直沒有納入中華民國的國家領土」、「臺彭地區不具有國家身份」、「臺彭地區法理地位未定 . . . . 」之類的話,那也等於「水落石出」。
ROCmug.jpg

AFTER 如此,台灣可以達到高度「自治」又有豐厚的經濟資源可發揮。
6-protestt2.jpg

6) There should be a minimum of one blank line before and after each picture.

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Category #2 Design of Webpages

#7 Post by Hartzell »

Jan. 31, 2016
Taipei, Taiwan
9:43 am

1) I think the background colors are too dark. Hence, the page seems too "heavy."
Perhaps you could use lighter shades of colors. In fact, GREEN is the popular color
here in Taiwan now. Perhaps you could use shades of GREEN.

2) As long as we are moving to a green color scheme, the colored bar should be made with
a green graphic. I suggest --
http://www.grsites.com/archive/textures ... e/id=1387/

3) The graphic at the top left can be 20% - 25% bigger.

4) The title 新國會救臺灣的新思維
can be another typesize bigger.

5) You need two more spaces after --
2016年02月02日

You need two more spaces before --
Filed under Taiwan Reality

6) On this webpage, the two instances of
「舉證」
should be on a separate line, and in typesize two or three sizes larger.
(I believe you do now have these words on a separate line. Thank you.)

7a) Can this graphic
http://www.taiwanbasic.com/rec-temp/mab ... method.png
be inserted to accompany the paragraph of
方法 –
不管是新總統也好,或關心「臺灣認同」的新立法委員也好,應該是早日著手要求ROC外交部的高層提出一份明確的報告書,徹底解釋:

(Note: It is necessary that the Chinese lettering of 方法 – be retained, in case someone copies this page to a text file, or Word file, etc.)

7b) Ideally, the dash after 方法
should be longer in length


8) This line
在法理上臺彭地區是何時納入中華民國的國家領土?
should be in one size larger typefont, and in BOLD

9)The Youtube graphic at the end should be 25% - 30% smaller, and centered.

10) You need a blank line before the paragraph that begins
他喜歡打比喻。

11) All instances of
臺灣關係法
should be underlined.

12) You need a blank line before the paragraph that begins
其實,這一方面必須懂得

13) Please add another blank line before the paragraph that begins
有一個大學教授在美國紐約

14a) Could this paragraph
註:與美國官方討論國防問題不涉及改變現狀,而只是遵守美國憲法和大法官判決中有關 (1) 軍事管轄權(military jurisdiction) 和 (2) 共同國防 (common defense) 的規定。
please be in a slightly different typeface/typefont, and indented left and right?

14b) In this paragraph, please add one space after the words
軍事管轄權

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Category #2 Design of Webpages

#8 Post by Hartzell »

January 31, 1:05 pm
Taipei

1) In regard to
Filed under Taiwan Reality

Your HTML coding is --
2016年02月02日&nbsp; &nbsp;| Filed under Taiwan Reality

So, you are still missing the equivalent spacing
&nbsp; &nbsp;
AFTER the little "bar"

2) A blank line before the paragraph which begins
其實,這一方面必須懂得如何玩一點「美國牌」。
is still missing.

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Category #2 Design of Webpages

#9 Post by Hartzell »

February 5, 2016
2:22 pm

Here is another interesting webpage which could be designed.

http://www.taiwanbasic.com/farmculture/buy_fish_1/

The .doc file is in this subdirectory. (In this .doc file, at the top, the "date" and "character count" should be removed.)

The pictures are in this subdirectory. The captions for the pictures are in the .xls file as I recall.

The captions should be placed under the pictures (with no blank line).

This might be an idea for a template --
http://zypopwebtemplates.com/free-web-t ... e-273.html

COMPANY NAME would be replaced with --
日本鄉村旅遊中的感動
(An appropriate color could be chosen to display these characters.)

Then a colored (textured) bar, with no links and no search function. ( The width as shown here is good, but perhaps the height could be a bit less. )

Then a large picture. I believe the most suitable one is --
http://www.taiwanbasic.com/farmculture/ ... CT1227.JPG


LEFT COLUMN: Pictures as follows.
See -- http://www.taiwanbasic.com/rec-temp/web ... age2a/img/
(may be reduced in size, and/or cropped as necessary)

-----------------------------------------------------
COLORED BAR, lettering inside this: 片品村
-----------------------------------------------------

First, the gunma_fish picture.

Next, the walking picture.

-----------------------------------------------------
COLORED BAR, lettering inside this: 陳燕銀教授
-----------------------------------------------------

Then, first picture of Ms. Chen
( I suggest http://www.taiwanbasic.com/rec-temp/web ... 8_deco.jpg )
[ This may be cropped as suitable ..... however I do want to maintain some of the background flavor. ]


Then, second picture of Ms. Chen
I suggest http://www.taiwanbasic.com/rec-temp/and ... 090331.JPG
[ My idea is to crop this picture approximately as follows, see --
http://www.taiwanbasic.com/rec-temp/web ... photo2.jpg ]
==> Basically, my idea is to include those seven people in the picture.

-----------------------------------------------------
COLORED BAR, lettering inside this: 日本鄉村
-----------------------------------------------------

Then, countryside1 picture

Then, countryside2 picture

-----------------------------------------------------
COLORED BAR, lettering inside this: 日本文化
-----------------------------------------------------

Then, the small-temple picture

Then, the kimono picture

-----------------------------------------------------
COLORED BAR, lettering inside this: 連結
-----------------------------------------------------

偷窺與買魚(二)

水草奇緣

小農主義者民宿

片品村 簡介

新連接一

新連結二


RIGHT COLUMN:
Introduction to spigot
would be replaced with the title of the essay, which is --
偷窺與買魚(一)

Then the essay content, with pictures placed inside the text.

Ideally, all the pictures will be used.

The Chinese characters of "旅遊中的最大驚喜是意外的邂逅" I suggest can be put as a subtitle in the text,
which would mean,
IT IS PUT on a separate line, before the paragraph which begins
大樹先生二十七、八歲,

[[ Note: There are no captions on the pictures in the LEFT COLUMN. ]]

[[ Note: There are no links at the bottom of the page. ]]

[[ Note: For the BACKGROUND TEXTURE of the COLORED BAR at the top of the webpage, I was thinking -- http://www.photos-public-domain.com/201 ... c-texture/ ]]

[[ Note: For the BACKGROUND TEXTURE of the COLORED BAR in the LEFT COLUMN, I was thinking --
http://www.grsites.com/archive/textures ... e/id=1347/ ]]

[[ Note: Overall color schemes for this webpage could be "Late Fall Colors," however too much emphasis on red should be avoided ....... green, white, tan, yellow, gold, etc. are good ...... just a little bit of red I suppose ..... ]]

My recorded comments are here -- http://www.taiwanbasic.com/rec-temp/web ... mplate.mp3

Hartzell
Site Admin
Posts: 320
Joined: Thu May 16, 2013 9:15 am

Re: Category #2 Design of Webpages

#10 Post by Hartzell »

Feb. 6, 2016
10:10 am

1) The Chinese characters of "旅遊中的最大驚喜是意外的邂逅" I suggest can be put as a subtitle in the text,
which would mean,
IT IS PUT on a separate line, before the paragraph which begins
大樹先生二十七、八歲,


2) The Chinese characters in your LEFT COLUMN five colored bars need to be a larger typesize, and perhaps bold

片品村

陳燕銀教授

日本鄉村

日本文化

連結



3) In your HTML coding, these should be links --
偷窺與買魚(二)
水草奇緣
小農主義者民宿
片品村 簡介
新連接一
新連結二


4) Please move these two pictures [#9 and #10] up.
陳教授教台灣人分辨乾雪或濕雪 農村散步隨景

Please move these two pictures [#3 and #4] down.
偷窺農家後院的收穫 道之驛的牛奶體驗館

WHICH MEANS --
For reference, I am looking at the RIGHT COLUMN pictures, and I see fourteen.
I can number them in my head.

So, my request here is to move [#9 and #10] to the position of [#3 and #4]

And then move [#3 and #4] to the position of [#9 and #10]


5) The TITLE of
偷窺與買魚(一)
should be in a larger typeface
and centered in the width of the RIGHT COLUMN
Note: This TITLE typeface size should be bigger than the
lettering of --
日本鄉村旅遊中的感動


6) The SUBTITLE of
日本鄉村旅遊中
can be increased in size
and centered in the width of the RIGHT COLUMN


7) You mentioned that there are four more pictures.

I thought that at the very bottom, perhaps you could use the gold fabric weave as a background, and then overlay these pictures on top of that.

I have tried to come up with a crude sample of this idea, using other pictures. See --
http://www.taiwanbasic.com/rec-temp/web ... bottom.jpg

Post Reply