5.2 Webpage Layout
Storyline
The interns begin discussing their website layout. Zhou Meng suggests a simple design, which the team agrees on.
Li Mei proposes starting with the homepage, including a navigation bar, company photo, website purpose, and team introductions. She shares her experience using Wix for inspiration. Diego sketches a sample layout on the whiteboard, featuring a top menu, side content list, and sections for cybersecurity content and practice exercises. He adds a footer with company information.
The team likes the plan and agrees to add a help section for user questions. They are excited to start building.
Text Recording (Part 1)
| 李梅: | 我们的实习工作是建立一个网站，大家希望它是什么样子的？ |
| 周萌: | 我希望网页设计简单一点儿，让用户很快找到他们想看的内容。 |
| 王杰丹: | 我同意。我们的网站用什么颜色呢？ |
| 张笛: | 我觉得网络安全内容的网站用黑色会很酷吧？ |
| 周萌: | 我觉得网页的背景颜色应该是黑色的，这样文字的颜色可以是浅色的，比如浅红色，黄色，或者绿色。白色也很好。你们看这个颜色图。 |
Text Recording (Part 2)
| 张笛: | 好，那网页的内容怎么排版呢？ |
| 李梅: | 我觉得我们需要先设计我们网站的主页。 在主页上，我们可以把导航栏放在网页的最上边，在主页的中间部分放一张公司的图片，简单说明我们网站的目的，怎么使用我们的资料， 和我们的自己的介绍 |
| 周萌: | 听起来很好，我喜欢这个设计。 李梅，你真厉害！ |
| 李梅: | 没有，没有。我以前自己做过网站，所以知道一点儿。 |
| 王杰丹: | 李梅， 你做过网站，太好了， 那网站的内容怎么排版呢？ |
| 李梅: | 我不会设计排版，因为我是用Wix 做的网站，他们有模板。 张笛，你的意见呢？ |
| 张笛: | (Diego is drawing on the whiteboard） 你们看，这个设计怎么样？上边是导航栏，点击以后会连接到不同的内容网页，左边是内容的目录。右边可以分成上下两个小部分，上面的部分我们可以放网络安全的内容，下面放练习题。 在页面的最下边写我们公司的地址，网站建立的日期， 内容更新日期什么的。 |
| 王杰丹: | 看起来真不错。 |
| 张笛: | 对，练习互动的设计会有很好的用户体验。我们一定要让用户知道怎么导航网站， 很快找到他们需要的信息。 |
| 周萌: | 我们还可以加上一个帮助部分，如果用户有问题， 他们可以给我们打电话或者发电子邮件。 |
| 张笛: | 好，那我们的网页会是这样的. (Diego added supporting features to the drawing) |
| 李梅: | 我很喜欢这个设计。大家的想法是我们设计的网站要有简单的排版，黑色背景，浅色文字，可以点击的导航，一些互动用户体验。 |
| 张笛: | 对的。那我们就开始做吧。 |
Downloadable Text with Yinyin and English
Unit 5.1 Text Annotation
Sentence Structures
Translation Exercise
Translate the following sentences from Chinese into English.
1. 我觉得深色的背景和浅色文字看起来更好看。
2. 你觉得我们应该先设计主页，再做其他页面吗？
3. 如果用户有问题，我们可以用电子邮件联系我们。
4. 因为她以前设计过网站，所以她知道怎么做这个网站。
to design; to plan； Shèjì
simple； jiǎndān
content； nèiróng
to agree; to consent; to approve； tóngyì
color；yánsè
black； hēisè
background； bèijǐng
should; must
red； hóngsè
typesetting； páibǎn
home page； zhǔyè
navigation bar； dǎoháng lán
above; overhead； shàngbian
between； zhōngjiān
part; section； bùfèn
image; picture； túpiàn
purpose; goal； mùdì
to use; to apply； shǐyòng
data; information
difficult to deal with； lìhài
idea; opinion； yìjiàn
to hit; to press； diǎnjī
to interact; interactive； hùdòng
user experience； yònghù tǐyàn
to add on；jiā shàng
