Design of webpages

[Hartzell]

3:15 pm
Feb. 26, 2015

Hello:

The next project is here --

http://www.taiwanbasic.com/farmculture/water-grass/

This is one webpage, but it has a 上 portion and a 下 portion, so I would like those "separated" on the webpage.

I liked your overall design for small_farm1.html, . . . . . but for this webpage, I hope we can do something a bit different.

There are four weblinks at the bottom of the page. I suggest using some different style of "making links" for these . . . . . (different from what you did before). Some simple idea is probably OK.

[Hartzell]

COMMENTS on webpage design
http://vosive.com/demo/water-grass/water-grass.html
March 2, 2016
1:11 am

1) The "blue line-design" looks broken . . . . . . (but I suppose that is not intentional) ..... but anyway, can some other line-design be used , something which has more of a complete appearance?

See http://www.taiwanbasic.com/farmculture/ ... DESIGN.jpg

(Please don't use the line-designs you have already used in other portions of the page ....... , it would be better to find something different.)

2)
<a href="dtrees.html">南部海邊的樹真可憐！都枯竭了？</a>
= = = CHANGE TO = = =
<a href="order-boat.html">是誰下令他們去划船？</a>


3) For the links at the bottom of the page, when viewed on a desktop, they are nicely separated horizontally.

But when viewed on a cellphone they stack-up vertically. In such a situation, can there be a BLANK LINE between each one?


4) I will look at this more when I get up in the morning.

[Hartzell]

HTML coding issues
http://vosive.com/demo/water-grass/water-grass.html
March 3, 2016
3:00 pm

1)
<meta name="author" content="水草奇緣">
= = = should be = = =
<meta name="author" content="陳燕銀">


2)
At the bottom of the page, LINKs should be coded so that they open in a new page


3)
If possible, all subdirectories should be inside one master subdirectory, such as
/watergrass/

[Hartzell]

= = = Katashina webpage = = =
March 7, 2016
3:30 pm

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


I have been looking at this theme --

Cafe & Restaurant Free Website Template
http://www.templatemonster.com/cafe-res ... plate.html


Demo and Download
http://www.templatemonster.com/demo/531 ... hdesignweb



Password to archive with source files:
kEKCj787kdff1hieMwjr
(not sure if this is relevant)



ZIP file already downloaded, go to this subdirectory for access --
http://www.taiwanbasic.com/farmculture/ ... heme/cafe/


= = = = = = = = = = = = = = = = = = = = = =

I noticed at the top of the page, the photo image CHANGES several times. I guess this is a good effect,
but I think that a maximum of three pictures would be suitable for this kind of effect.

So, in my Photo Series #1, I would pick
http://www.taiwanbasic.com/farmculture/ ... butrev.jpg

http://www.taiwanbasic.com/rec-temp/and ... C_0122.JPG

http://www.taiwanbasic.com/rec-temp/and ... 010403.JPG

= = = = = = = = = = = = = = = = = = = = = =

I noticed that a type of "fixed background scrolling" was being used in this template too, and I thought

that was nice. I think this effect could be used several times. I found a Youtube video which

discusses this --

Fixed Background Scrolling Site
https://www.youtube.com/watch?v=PWoOpJtkyjI

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =


This template also has a collage of different pictures, (and differnet sizes of pictures) put together.

This is nice, and I assume that with the large number of Katashina-related pictures that I have, this

could be done more than once.



= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

For supplementary styling ideas, I have also been looking at this page --
http://www.zerotheme.com/demo/index.php ... mp=zVossen

But of course, there is a lot of unnecessary stuff on that page ...... and I would cross out many items,

see --
http://www.taiwanbasic.com/farmculture/ ... -items.jpg


I like the idea of a large picture embedded in the webpage at various places,
Then below this large picture,
Three pictures with rounded corners


= = = = = = = = = = = = = = = = = = = = = =

I also need to point out that the text for this webpage
http://www.taiwanbasic.com/farmculture/ ... na-2D.docx
is less than 1000 words, hence
I believe the typesize used should be bigger than what we used in previous projects.

(That is in relation to display on a desktop computer. For smaller devices, normal typesize would be alright.)

Ideally, different paragraphs (or different sentences) of the text of this essay will be carefully placed
on the webpage, between the photograph-image sections.


= = = = = Photo-images = = = = =

This webpage will be very image intensive.

For links to the photo images, see my posting of March 7, 2016 at 2:35pm --
http://www.taiwanbasic.com/cbs/viewtopi ... p=101#p101


Note: I do not have captions for any of these pictures. This is to be a Chinese language webpage.
The English language "names" which I have included on this page --
http://www.taiwanbasic.com/cbs/viewtopi ... p=101#p101
are just for the reference of myself and the webpage designer.


For descriptions on the basic layouts, see
http://www.taiwanbasic.com/farmculture/ ... range.docx
(The layouts in this Word file are not quite big enough, because Word requires a margin on the left and
right, and the "page" is not full screen. However, I think you should be able to get the general idea.)


I have separated the photos into four Series.

Photo Series #1 are the very outstanding photos which I believe are suitable on the webpage for full
screen display.


Photo Series #2 are the excellent photos which I believe are suitable for display as three to a line, two
to a line, or in a collage.


Photo Series #3 are some interesting photos which I believe could be in a
Photo Gallery
片品村照片集錦

placed on the same webpage, but serving as extra photos, on the webpage after the end of the essay portion.

As to how to arrange the photos in this
Photo Gallery
片品村照片集錦

I would welcome your suggestion.


Photo Series #4 are a number of somewhat interesting photos, but are for use only if necessary or desired.

In other words, these are provided as "extras" in case the webpage designer needs a few extra items at
some point.

[Hartzell]

March 9, 2016
Wed. 8:15 am
http://www.taiwanadvice.com/japan/tour/

1a) The name of
片品村
at the top of the page
would ideally be made smaller by 50%

1b) Regarding the three "circular pictures" which overlay the three full-screen alternating pictures,
could these please be placed in the blank space BELOW
the three full-screen alternating pictures

1c) Also in this blank space, you need to add the full title and author --
片品村
Katashina-mura
簡介


陳燕銀


2) In regard to the pictures in your collage, I believe you need some "border" between the pictures, and I wonder if a yellow color might be suitable. I found a yello039.gif
See -- http://www.grsites.com/archive/textures ... ve/id=409/


3) Explanation:
The images in Photo Series #1 are for the full-screen effects, including use in the
"fixed background scrolling" EFFECT (which I hope can be used two or three times)

You now have three images from the Photo Series #1 in the the three full-screen alternating pictures, at the top of the pages. This is very nice.

The images in Photo Series #2 are for use INSIDE the text (essay).

The images in Photo Series #3 can be used for a Photo Gallery 片品村照片集錦 area, after
the end of the text (essay) part of the webpage


4) For the Menu, I think
Home
Photo Gallery
Links


5) I forsee two links at the bottom of the page

[Hartzell]

March 9, 2016
10:45 pm

1) The wording of
Photo series #1
does not need to appear.

2) The separation of the Photo images into different series is just to facilitate communication between you and me.

3) In your collage you need one more picture, or one of the pictures needs to be of a bigger height. If you want to add another picture, you could choose one from Photo Series #2.

4) I am not adding captions to the pictures. You do not need the words --
Flowers
Katashina scenes
Waterfall

And, as regards these three pictures, they should be moved to AFTER the first paragraph of text.

5) For the full screen background (full-width of the screen), you should pick a photo image from Photo Series #1. I don't think that the banana flower picture is from Photo Series #1.

6) You don't need to repeat the
片品村
after this full screen image (which is now the banana flower, but should be something else).

7) Social links at the end of the page are a good idea. You can add some more.

8) I expect to have two links at the bottom. Perhaps these can be placed ABOVE the social links.
新連結一
新連結二

9) The fixed images are good. Will those disappear behind different areas of TEXT ??

That effect was illustrated in the Youtube video of --
Fixed Background Scrolling Site
https://www.youtube.com/watch?v=PWoOpJtkyjI

[Hartzell]

March 11, 2016
11:25 pm
Katashina webpage

REFERENCE subdirectory http://www.taiwanbasic.com/farmculture/katashina/temp/

1) See menu-icon.jpg

I believe the size of this icon should be reduced to about 20% of its current size.

Note: When pressing this icon
a menu comes up with three selections
Home
Photo Gallery
Links


HOWEVER, it seems to me that "internal links" on the current webpage page should be established for the Photo Gallery and Links selections.

CURRENTLY, these selections are linking to an index-1 page and an index-2 page.

Do we actually need those two index___ pages? Or what are your thoughts?

2) See kata-screen0.jpg

Two pictures are added. These are the only pictures on the page that have captions.

http://www.taiwanbasic.com/farmculture/ ... ation2.jpg

http://www.taiwanbasic.com/farmculture/ ... lower1.jpg

坐禪草


芭蕉花


ADDITIONALLY, the wording of
片品村
Katashina-mura

IS MOVED UP

and the

簡介

IS ENLARGED


3) See kata-screen1.jpg

Please replace picture 5 with
http://www.taiwanbasic.com/rec-temp/and ... 010316.JPG


4) See kata-screen2.jpg

Replace picture 7 with
http://www.taiwanbasic.com/rec-temp/and ... 010330.JPG

Replace picture 8 with
http://www.taiwanbasic.com/rec-temp/and ... 010388.JPG

I also want to add a
作者：

(in slightly smaller typeface/typefont)

= = = = = = = = = = =
NOTE: I also wonder if the reddish-pink background color on the webpage here can be a bit of a lighter shade.
= = = = = = = = = = = =


5) See kata-screen3.jpg

Replace picture 11 with
http://www.taiwanbasic.com/rec-temp/and ... 009410.jpg


6) See kata-screen4.jpg

Replace picture 15 with
http://www.taiwanbasic.com/rec-temp/and ... C_0029.JPG


7) See kata-screen5.jpg

Replace picture 16 with
http://www.taiwanbasic.com/rec-temp/and ... 010353.JPG

[Hartzell]

March 13, 2016
9:28 pm
Katashina webpage
taiwanadvice.com/japan/tour


1) Links for social media buttons at the bottom of the page

https://www.facebook.com/

https://plus.google.com/

https://twitter.com/?lang=zh-tw

Linked in
https://www.linkedin.com/

Pinterest
https://www.pinterest.com/


2) The typeface/typefont of
坐禪草
芭蕉花
should be smaller.


3) I still think that the reddish-pink background could still be in another LIGHTER SHADE.


4) Possible good choices for additional pictures to use (if necessary) --

(I don't think that these are repeats . . . . please skip any one that is a repeat)

http://www.taiwanbasic.com/rec-temp/and ... 010398.JPG

http://www.taiwanbasic.com/rec-temp/and ... 010382.JPG

http://www.taiwanbasic.com/rec-temp/and ... 010366.JPG

http://www.taiwanbasic.com/rec-temp/and ... 010314.JPG

http://www.taiwanbasic.com/rec-temp/and ... 010420.JPG

http://www.taiwanbasic.com/rec-temp/and ... 010312.JPG

http://www.taiwanbasic.com/rec-temp/and ... 010374.JPG


5) When I was in an internet cafe two days ago, there was a very wide, very large monitor. On that monitor, the three circles appeared UNDER the main picture(s) at the top of the page.

However, on the smaller monitors which I have at home and in the office, the three circles appear to overlay the main picture(s) at the top of the page.

Does this have something to do with the SIZE of the monitor ???


6) The names of the two links, and their URLs can be as follows --

水草奇緣
http://www.taiwanbasic.com/farm/watergrass.html


出走&健康
http://www.taiwanbasic.com/health/index.html


7) The size of the "LETTER" in the social media buttons at the bottom is too small.

[Hartzell]

March 14, 2016, 10:43 pm
taiwanadvice.com/tour/japan/

1) In the html coding, these words --
Integer convallis orci vel mi nelaoreet, at ornare lorem consequat. Phasellus era nisl auctor vel veliterol. sed,pharetra venenatis nulla. Vestibulum volutpat turpis ut massa commodo, quis aliquam massa facilisis.Integer convallis orci vel mi nelaoreet, at ornare lorem consequat. Phasellus era nisl auctor vel veliterol. sed,pharetra venenatis nulla.

Could be replaced with --
Text goes here.


2) In the html coding, in the meta data, you need an
author
statement

(The author is 陳燕銀)


3) In the html coding, in the meta data, please insert a
keywords
statement

(You can leave the content blank and I will fill it in later.)


4) Here is a screen shot taken tonight on my office computer.
http://www.taiwanbasic.com/farmculture/ ... ge0314.jpg

Maybe you can figure out something about the location of the three circles.

Sorry about the trouble.

[Hartzell]

March 22, 2016
11:57 pm

Heart webpage
(desired page name and location is -- )
http://www.taiwanadvice.com/life/heart.html

Subsidiary files (and subdirectories) should be put here --
http://www.taiwanadvice.com/life/h1/

Image files go here --
http://www.taiwanadvice.com/life/h1/img/


I think that this template is nice --

https://freewebsitetemplates.com/previe ... index.html

==>It is not "responsive," however I looked at it on my cellphone and my office computers, and I think it is OK.

If you have any difficulty accessing it online, I have downloaded it as a ZIP file, and uploaded it to my website here --
http://www.taiwanadvice.com/life/temp/zip/

ESSAY
See -- http://www.taiwanadvice.com/life/temp/h ... TIONS.docx

Also see -- http://www.taiwanadvice.com/life/temp/h ... ent02.docx


(A)
Title
認識心血管疾病輕鬆談


(B)
See -- http://www.taiwanadvice.com/life/temp/t ... scene0.jpg

[ --- change header items ---- ]
HOME ---> HOME

ABOUT ---> MAIN ESSAY

SERVICES ---> VIDEOS 1, 2, 3

BLOG ---> VIDEOS 4, 5, 6

CONTACT ---> REMINDERS

The "linkage" for the above should be established as INTERNAL LINKS on this webpage.


(C)
RE: PICTURE OF girl, replace with Hospital buildings --
http://www.taiwanbasic.com/test/temp/pi ... ivHosp.jpg

Then on right-side, add heart picture --
http://www.taiwanbasic.com/test/temp/pi ... rt-img.png


Add lettering
衛教使用


* * = = * = For items below, see my mock-up image --
http://www.taiwanadvice.com/life/temp/t ... scene1.jpg = * = = * *

(D)
Three pictures in CIRCLES
LEFT: pic11

CENTER: pic02

RIGHT: pic07

Note: Green overlays should be removed, see --
http://www.taiwanadvice.com/life/temp/circles-MOD.jpg

For numbering codes, see -- http://www.taiwanadvice.com/life/temp/heart-PICLIST.txt


(E)
ABOUT US LATEST BLOG POSTS CONTACT INFORMATION

[ --- make into one column --- ]


* * = = * = For items below, also see my mock-up image --
http://www.taiwanadvice.com/life/temp/t ... scene1.jpg = * = = * *

Also see -- http://www.taiwanadvice.com/life/temp/heart-PICLIST.txt

(F-1)
LATEST VIDEOS (see styling as per this page -- )

https://freewebsitetemplates.com/previe ... index.html

If you have any difficulty accessing this template online, I have downloaded it as a ZIP file, and uploaded it to my website here --
http://www.taiwanadvice.com/life/temp/zip/


(F-2)
I am providing screen shots from these videos, which should be used as the LINK PICTURE(s) for the six videos that we have filmed.

When anyone clicks on a video link, it should open a new page and go directly to Youtube, and open up the video there on Youtube.

I seem to recall that the HTML coding for this is target="_blank"


(F-3)
As of March 21st, these six videos have been uploaded to Youtube.

The listing of six films is here --
http://www.taiwanbasic.com/cbs/viewtopi ... p=123#p123


(G)
Small inlay picture
http://www.taiwanbasic.com/test/temp/pi ... RAPHIC.png


(H)
PICTURES

The pictures placed in this webpage must be individual pictures. I think that in that way they can be successfully located by Google's "image search", and eventually will show up in Google's search results.


(I)
HTML coding

1) I think all the code for Google Analytics could be removed.
Do I really need that? I don't think so. I am not selling anything.


(J)
Add lettering (in bottom green bar)
衛教使用


(K)
One external link could be established before the 免責聲明 --

臺大醫院：讓臺灣的心導管治療技術站上世界的舞臺
http://host.cc.ntu.edu.tw/sec/schinfo/e ... 6&sn=14097

(L)
In the file http://www.taiwanadvice.com/life/temp/h ... TIONS.docx

The notations of
= == SECTION A begins = = =

= == SECTION B begins = = =

= == SECTION C begins = = =

etc., etc.
are for your reference only,
they do not appear on the heart.html webpage


(M-1)
There is one small additional webpage which needs to be designed. This can be called
main-essay.html
The content of this webpage will be two scanned pages of Chinese text.

http://www.taiwanbasic.com/test/temp/pi ... emp080.jpg

http://www.taiwanbasic.com/test/temp/pi ... emp081.jpg

In my preliminary thinking, there are no pictures on this main-essay.html webpage.

This webpage can be put inside the subdirectory of http://www.taiwanadvice.com/life/
but it is not linked to the heart.html webpage.

(M-2)
Hopefully, the theme and design of this main-essay.html can be based on
https://freewebsitetemplates.com/previe ... /blog.html

See http://www.taiwanadvice.com/life/temp/main-essay.docx for content/design.

(M-3)
main-essay.html

[ --- change header items ---- ] Three items plus two blanks

HOME ---> HOME

ABOUT ---> MAIN ESSAY

SERVICES ---> REMINDERS

BLOG --->

CONTACT --->

The "linkage" for the above should be established as INTERNAL LINKS on this webpage.

-