单元8 网站首页的设计与制作
网页设计与制作项目教程
第八单元
【任务8.1】北京大学网站首页的设计与制作
〖任务描述〗
本单元“模仿训练”网页index.html的浏览效果如图8-30所示。
图8-30 北京大学网站首页整体截图
网页设计与制作项目教程
第八单元
【任务8.1】北京大学网站首页的设计与制作
〖任务描述〗
1.创建所需的文件夹。
2.在文件夹中创建“images”子文件夹。
3.将所需的图像资源复制到“images”文件夹中。
4.将“网页骨架.html”文档拖拽到该文件夹中。
〖任务实施〗
1.建立文件夹“bjdx”。
2.建立子文件夹“images”。
3.将所需的图片资源复制到“images”文件夹中。
4.将“网页骨架.html”文档拖拽到“bjdx”文件夹中。
【任务8.1.1】北京大学网站首页整体页面结构的制作
【任务8.1.1.1】建立北京大学站点的目录结构
网页设计与制作项目教程
第八单元
【任务8.1】北京大学网站首页的设计与制作
〖任务描述〗
1.修改文件名。
2.编辑<title>标签中的内容。
3.保存文档，效果如图8-31所示。
〖任务实施〗
1.修改“网页骨架.html”文档名为“index.html”。
2.编辑<title>标签中的内容。双击“编辑器（Sublime Text）”图标，打开编辑器。将文
件夹中的“index.html”拖拽到编辑器的编辑窗口中，关闭其它网页文档。使“index.html”成
为当前文件。将<title>标签中的内容“网页骨架”修改为“北京大学-Peking University”。
3.保存网页文档。执行菜单命令：“文件”→“保存”,关闭“编辑器（Sublime Text）”
。
【任务8.1.1】北京大学网站首页整体页面结构的制作
【任务8.1.1.2】创建与保存首页文档index.html
图8-31 北京大学网站站点目录结构
网页设计与制作项目教程
第八单元
【任务8.1】北京大学网站首页的设计与制作
〖任务描述〗
1.分析整体页面结构，确定分为哪些大块的部分。
2.分别将这些部分以不同的色块表示。
3.分别标记上适合的HTML标签，整体结构的代码搭建。
〖任务实施〗
1.分析整体页面结构，如图8-32所示。
2.分别将各部分以不同的色块表示。
3.分别标记上适合的HTML标签，整体结构代码搭建。
【任务8.1.1】北京大学网站首页整体页面结构的制作
【任务8.1.1.3】北京大学网站首页整体页面结构分析
图8-32 北京大学网站首页整体页面结构分析
