购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

2.2 实训任务

2.2.1 实训内容

制作“习近平总书记考察清华大学并发表重要讲话”新闻页面,页面包括页头、正文、页脚三个部分。页面各部分包括如下内容:

①页头:包括“登录/注册”导航、新闻标题和水平线。

②正文:包括新闻图片和文字。

③页脚:包括新闻来源信息。

最终页面效果如图2-2所示。

图2-2 页面效果

2.2.2 设计思路

新闻页面一共包括三个部分,其中页头又分为两个部分,正文分为两个部分,页面结构如图2-3所示。

图2-3 页面结构

2.2.3 实施步骤

步骤一:创建新闻页面

①新建项目“chapter01”。

②在项目“chapter01”内创建新闻页面,并将它命名为“lesson1-after”,如图2-4所示。

图2-4 创建新文件

③修改标题为“‘习近平总书记考察清华大学并发表重要讲话’新闻页面”,并使用header、main和footer标签设置页面布局。

步骤二:添加新闻页面内容

①在header标签内添加“登录/注册”导航链接。

②在header标签内添加新闻标题及水平线。

③在main标签内添加新闻图片。

④在main标签内添加新闻文字内容。

⑤在footer标签内添加新闻编辑信息并设置contenteditable的属性值为“true”。

⑥页面中相关CSS样式的设置会在后续课程中进行讲解,在此不再赘述。任务完整代码见二维码2-1。 6l40QGWUV9TUZFEcxLuHpWHhCkVNQH+MFgZOVDmmlrNlVE34HP5lXvNmVTHvoXep

点击中间区域
呼出菜单
上一章
目录
下一章
×