29
NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Embed Size (px)

Citation preview

Page 1: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

NTT Communications Overseas Subsidiary Website

HTML Development Manual (For Other than English)ver.1.1

of 2009-05-06

Page 2: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

2

Table of Contents

1. About this Manual1-1. Aim and target users of this manual1-2. Framework of this manual

2. Development of Overseas Subsidiary Website HTML (Japanese)

2-1. Overview of the HTML development of overseas subsidiary website (Japanese)2-2. Things to prepare before starting the HTML development

2-2-1. Common model site HTML (Japanese ver.)2-2-2. Detailed screen design (Japanese ver.)

2-3. Determination of the web directory structure2-4. Development of common pages of the website

2-4-1. Creation of the header2-4-2. Creation of the global navigation2-4-3. Creation of the footer

2-5. Development of customized pages2-5-1. Home page2-5-2. 「サービス検索」 Products & Services: Home page2-5-3. 「サービス検索」 Products & Services: Service page2-5-4. 「お客さまサポート情報」 Customer support2-5-5. 「企業情報」 About us2-5-6. Content created by subsidiary2-5-7. 「お問い合わせ」 Contact us2-5-8. Other content

3. Development of Overseas Subsidiary Website HTML (Other Languages)

3-1. Overview of the HTML development of overseas subsidiary website (Other Languages)3-2. Determination of the web directory structure3-3. Development of the website in other languages

Page 3: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

1. About this Manual

Page 4: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

4

1-1. Aim and target users of this manual

Aim of the Manual = Written Procedures for HTML development of overseas subsidiary websites in Japanese and Local languages

This manual contains specific procedures to develop the HTML of the overseas subsidiary website in Japanese and other local languages (ex. Chinese, Portuguese, Russian, Thai, Vietnamese)

In general, by following this manual and executing each task, each overseas subsidiary will be able to complete and renew their website.

Note: Difference between this manual and the “Web Development Guideline”

NTT Communications Japan has sent each overseas subsidiary a separate “Web Development Guideline”. The guideline is a rulebook listing restrictions overseas subsidiary need to follow concerning their website.

In the meantime, this manual should be used to create the website itself, and in general it is not going to be used once the website has been created.

After the renewal, for operation and maintenance please use the separate “Web Development Guideline.”

Target Users= HTML programmers who will develop the overseas subsidiary website (English ver.)

This manual describes precisely the steps necessary to develop the HTML for the overseas subsidiary website renewal of 2009.

Therefore, this manual targets the HTML programmers who will actually develop the website, including:

• Employees of NTT Com’s overseas subsidiaries who are going to develop the HTML of the website.

• Third party vendors who are going to develop the HTML of the website.

Note: To use this manual, you need the “HTML Development Manual (for English ver.)”.

There are many parts in this manual where you need to refer the HTML Development Manual (for English ver.) ver.1.2, therefore please have it ready in front of you.

Page 5: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

5

1-2. Framework of this manual

Chapter 1. About this Manual

Chapter 1 gives an overview of the aim and target users of the manual.

Chapter 2. Development of Overseas Subsidiary Website HTML (Japanese)

Chapter 2 explains about the required procedures to develop the HTML of the Japanese website.

Chapter 3. Development of Overseas Subsidiary Website HTML (Other Languages)

Chapter 3 explains about the required procedures to develop the HTML of the website in local language.

Page 6: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

2. Development of Overseas Subsidiary Website HTML (Japanese)

Page 7: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

7

2-1. Overview of the HTML development of overseas subsidiary website (Japanese)

グローバル総合

ソリューション

(3)New page for the website変更

Detailed Screen DesignDuplicated HTML

Main files to be edited are the HTML and images.

During this website renewal, the main parts that need to be edited by the HTML programmers are only the html, and in general the CSS does not need to be added, edited, or deleted.

/template/

Index.html

/aboutus/

/products/

/images/

/css/

/js/

CSS

js

ImagesFlash

Overseas subsidiary common model site

・・

html

html

Files to be edited by each overseas subsidiary

As a general rule, subsidiary will not edit this part

Main work is going to be editing and copying the HTML files.

The common pages of the overseas subsidiary website have already been developed in the model site, therefore the work that has to be done is copying the HTML files (1) and editing the HTML source codes (2).

Home

About UsProducts &Services

CustomerSupport

GlobalPresence

Content created by the Subsidiary

Tem

pla

te p

ag

e

Pag

e

Pag

e・・・

Tem

pla

te p

ag

e

Pag

e

Pag

e・・・

Tem

pla

te p

ag

e

Pag

e

Pag

e・・・

Tem

pla

te p

ag

e

Pag

e

Pag

e・・・

Tem

pla

te p

ag

e

Pag

e

Pag

e・・・

New

Pag

e

(1) Copy a base HTML from the common model site(2) Edit the parts that are different in the screen design.

Page 8: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

2-2. Things to prepare before starting the HTML development

Page 9: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

9

2-2-1. Common model site HTML (Japanese ver.) ( 1/2 )

These are the HTML files which cover all common pages of the overseas subsidiary websites.

Common model site HTML (English ver.) are the HTML files which include all common pages within the basic website structure. This does not include the customized pages of each overseas subsidiary.

Note: These html are the Japanese replicate pages of the English model site. (For details, please refer to P.10 of the HTML Development Manual (for English ver.) ver.1.2E.)

The common model site HTML is packaged in a zip file name “model_l_j.zip” or “model_s_j.zip”.

Please unzip and use the zip file you need for your website.

Note: Difference from the “Common model site HTML(English ver.)

The common model site HTML (Japanese ver.) is different in the following:

Generally, the html is all the same contents and structure, however they are all translated in Japanese.

Unlike languages written in alphabet, Japanese is hard to read in small font size. (Because it includes Chinese characters) Therefore, the font size and spacing is modified.

Including the worldwide content Not including the worldwide content

Page 10: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

10

2-2-1. Common model site HTML (Japanese ver.) ( 2/2 )

Root

index.html

index2.html

products

contact.html

coverage

case

branch

aboutus

strengths

support

template

copyright.html

privacy_policy.html

worldwide_sites.html

service.html

sitemap.html

「企業情報」 “ About Us” category

「支社」 “ Branch” category   (for NTT Com China, Europe, India)

「事例」 “ Case Study” category

「エリア・国別サービス概要」 “ Global Coverage” category

「サービス検索」 “ Product & Service” category

「強みコンテンツ」 “ Our Global Strengths” category

「お客さまサポート情報」 “ Customer Support” category

CSS, common images, JS

「お問い合わせ」 Contact Us page

「著作権について」 Copyright page

「プライバシーポリシー」 Privacy Policy page

「その他の地域」 Worldwide Sites page

「サービス一覧」 Service Index page

「サイトマップ」 Sitemap page

popup PopUp window

Structure within each category

Each category contains HTML files and at times another folder. Images are all contained in a separate “images” folder.

Note: For details, please refer to P.12 of the “HTML Development Manual (for English ver.) ver.1.2E”

Directory structure (Top layer)

The common model site HTML (Japanese ver.) is formed with the file and directory as listed below.

The package without worldwide content contains less files than listed below.

model_l_j.zip (Including worldwide content)

Home page (with a search box)

Home page (without a search box)

Page 11: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

11

2-2-2. Detailed screen design (Japanese ver.)

There is no customized power point screen design in Japanese as there was in English.

Support by NTT Com Japan for creating the detailed screen design will be provided only for the English version and not for Japanese.

If the website is going to be developed in Japanese, please translate the English version for pages needed.

Page 12: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

12

2-3. Determination of the web directory structure

Create the directory structure following the fixed website structure

In P.16-20 of the “HTML Development Manual (for English ver.) ver.1.2E”, the directory structure has been already fixed, therefore please follow this and place the html and CSS files for the Japanese website.

Be careful not to overwrite the CSS for the English website

Both contents in English and Japanese are created in the same name.

Therefore, be careful not to overwrite HTML, folders, CSS, etc. of the English website with the one of Japanese website.

As described on P.19 of the “HTML Development Manual (for English ver.) ver.1.2E”, create a directory for each language (in this case such as “jp”) and copy the files in there.

Page 13: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

2-4. Development of common pages of the website

Page 14: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

14

2-4-1. Creation of the header

Modifying the company name of the website ID image

For details, please refer to P.23 of the “HTML Development Manual (for English ver.) ver.1.2E”

Modifying the HTML source of the website ID

For details, please refer to P.24 of the “HTML Development Manual (for English ver.) ver.1.2E”

Modifying the website ID (For website not using the NTT Com logo)

For details, please refer to P.25 of the “HTML Development Manual (for English ver.) ver.1.2E”

Customizing the language selector

For details, please refer to P.26-27 of the “HTML Development Manual (for English ver.) ver.1.2E”

About the search window

For details, please refer to P.28-29 of the “HTML Development Manual (for English ver.) ver.1.2E”

Overwriting the header parts to all other HTML

For details, please refer to P.30 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 15: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

15

2-4-2. Creation of the global navigation

Creating the base of the global navigation

For procedures to create the base, please refer to P.33, 35 of the “HTML Development Manual (for English ver.) ver.1.2E”

Below is a list of already defined classes for the global navigation

Item name Class name of the CSS

ホーム home

Creating new item for the global navigation

For details, please refer to P.35 of the “HTML Development Manual (for English ver.) ver.1.2E”

Duplicating the global navigation to all other HTML

For details, please refer to P.37 of the “HTML Development Manual (for English ver.) ver.1.2E”

サービス検索 service

エリア・国別サービス概要 gs

お客さまサポート情報 support

企業情報 about

Page 16: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

16

2-4-3. Creation of the footer

For details, please refer to P.42 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 17: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

2-5. Development of customized pages

Page 18: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

18

2-5-1. Home page

Deleting unnecessary parts

Please delete unnecessary parts in the home page of the Japanese website, so that the contents become the same as the English home page.

Note: For details, please refer to P.44-46 of the “HTML Development Manual (for English ver.) ver.1.2E”

Customizing the “Products & Services” section

Please delete unnecessary parts in the home page of the Japanese website, so that the contents becomes the same as the English home page.

Note: For details, please refer to P.47-49 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 19: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

19

2-5-2. 「サービス検索」 Products & Services: Home page

Customizing the left navigation

Customize the navigation as it is created in the detailed screen design created within the subsidiary.

Note: For details, please refer to P.51-55 of the “HTML Development Manual (for English ver.) ver.1.2E”

Customizing the right content area

Customize the navigation as it is created in the detailed screen design created within the subsidiary.

Note: For details, please refer to P.56-57 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 20: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

20

2-5-3. 「サービス検索」 Products & Services: Service page

Creating the Service page

Create the HTML as it is in the detailed screen design created within the subsidiary.

Note: For details, please refer to P.58-62 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 21: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

21

2-5-4. 「お客さまサポート情報」 Customer support

Customizing pages in the 「お客さまサポート情報」 Customer support

Create the HTML as it is in the detailed screen design created within the subsidiary.

Note: For details, please refer to P.63-67 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 22: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

22

2-5-5. 「企業情報」 About us

Customizing pages in the 「企業情報」 About us

Create the HTML as it is in the detailed screen design created within the subsidiary.

Note: For details, please refer to P.68-72 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 23: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

23

2-5-6. Content created by subsidiary

Creating contents unique to the subsidiary

Create the HTML as it is in the detailed screen design created within the subsidiary.

Note: For details, please refer to P.73-78 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 24: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

24

2-5-7. 「お問い合わせ」 Contact us

Customizing the 「お問い合わせ」 Contact us page

Create the HTML as it is in the detailed screen design created within the subsidiary.

Note: For details, please refer to P.79-80 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 25: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

25

2-5-8. Other content

Note: For details, please refer to P.81-86 of the “HTML Development Manual (for English ver.) ver.1.2E”

Page 26: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

3. Development of Overseas Subsidiary Website HTML (Other

Languages)

Page 27: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

27

3-1. Overview of the HTML development of overseas subsidiary website in local languages

Development procedures are generally the same as the English/Japanese website

HTML development for languages other than English and Japanese could be created using the English html or Japanese html as the base.

Things to prepare before starting the HTML development

Things needed to develop HTML for local languages are the same as the English/Japanese HTML development, which are the common model site HTML and detailed screen design.

Common model site HTML (English and/or Japanese)

Detailed screen design (for local language)

How to use the common model site HTML

If the local language is alphabet based, please customize the HTML and CSS in the English common model site HTML to develop the website.

If the local language is not alphabet based (characters hard to read in small font size such as Chinese and Russian), please customize the HTML and CSS in the Japanese common model site HTML to develop the website.

There is no customized power point screen design in local language as there was in English.

Support by NTT Com Japan for creating the detailed screen design will be provided only for the English version and not for the local language.

If the website is going to be developed in a local language, please translate the English version for pages needed.

Page 28: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

28

3-2. Determination of the web directory structure

Create the directory structure following the fixed website structure

In P.16-20 of the “HTML Development Manual (for English ver.) ver.1.2E”, the directory structure has been already fixed, therefore please follow this and place the html and CSS files for the local language website.

Root

index.php

en

Create the appropriate directory and place the HTML in there.

Note: For details, please refer to P.16-20 of the “HTML Development Manual (for English ver.) ver.1.2E”

index.html

3columns

index2.html

branch

aboutus

・・

cn

xxxxxxxxxxx

Page 29: NTT Communications Overseas Subsidiary Website HTML Development Manual (For Other than English) ver.1.1 of 2009-05-06

Overseas Subsidiary Website: HTML Development Manual (For Other than English)

29

3-3. Development of the website in other languages

The development procedure is same as English/Japanese website

Developing the pages are the same as English and Japanese website.

For details, please refer to P.21-86 of the “HTML Development Manual (for English ver.) ver.1.2E”

Global navigation needs customization

The length of each item of the global navigation changes in the local language. To customize the CSS, please refer to P.35 of the “HTML Development Manual (for English ver.) ver.1.2E”

URL of the links in Worldwide Sites page

Worldwide Sites page (refer to P.82 of the “HTML Development Manual (for English ver.) ver.1.2E”) contains links to other overseas subsidiary website. If the other subsidiaries contains the same language, please change the URL of the link, so that the home page of the same language appears when it gets clicked.

Ex.) Situation of NTT Com Asia website (In Chinese)

・・

Chinese VersionWhen the user is in the Chinese version of the ComAsia website, and is thinking of going to Com China website, they definitely need to view the Chinese version. Therefore the link has to be to the Chinese home page, not the English home page as it is now.