网页播放器开发系列笔记(二)
(二)页面展示 各位朋友大家好,我们接着上文继续开发,这一节我们主要是把上一节最后的图片素材从新组合,用 web形式展现,我们用到的主要工具是:HBuilderX,这个工具我就不介绍了,上手很容易,很好用的,具体情况大家可以百度研究一下。 1.新建项目 首先启动 HBuilderX开发工具,新建一个项目,具体操作“文件”→“新建”→“项目”如图2-1所示。 图 2-1 新建项目 在弹出的对话框中选择普通项目,项目名称填入 “网页播放器”,选择存储路径,选择空项目,单击创建即可,如图2-2所示。 图 2-2 设置新项目 2.新建目录 在左侧的项目管理窗口,项目上单击右键选择 “新建”→“目录”,CSS文件夹,用于存放样式文件,如图2-3所示新建目录。新建images目录,存放我们上节剪切的图片素材,记得把所有需要的图片素材全部拷贝到该目录下,拷贝十分简单,在文件中复制图片,在项目管理images目录点击右键,选择粘贴,这样所复制的图片就全部拷贝到该目录下了;新建JS目录,用于存放Javascript文件。 图 2-3 新建目录 3.新建文件 新建文件与新建目录大同小异,在项目上点击右键依次选择 “新建”→“html文件”,命名为“index.html”,用于编写HTML代码;在CSS目录上点击右键依次选择“新建”→“css文件”,命名为“playMusic.css”