《HYLI5教程课件》_《HYLI5教程课件》_第二章 网站搭建与管理.pptxVIP

2021网站搭建与管理

04网页设计开发环境03导入项目站点02新建web项目站点01站点规划目录CONTENT05运用HBuilderX创建简单web网站

站点规划01

【任务目标】能根据网站的使用范围和用途，进行分析，准备和收集相关素材，包括文字、图片、动画以及其他多媒体素材等，再对所收集的相关资源进行分类，通过建立文件夹的方式管理不同类型素材，并合理规划站点结构。

【知识解析】1、站点概念 网站是由多个相互关联的文件组成的，为了合理管理这些文件和资源，可通过构建“站点”的形式进行分类管理和维护，同时，一个站点里的文件可以相互引用，从而给网站设计与制作者带来便捷。2、站点规划 如果将网站所需的全部资源都存放在一个目录下，当网站的资源越来越多时，就会增加管理的难度，为了提升站点管理工作的时效性，就必须要对站点进行有效的规划。

（1）站点目录规划 设置站点一般的做法是在本地磁盘创建一个站点文件夹，然后在这个站点文件夹中创建多个分类子文件夹，将所有收集使用的资源分类存储在相应的子文件夹中，或者根据实际开发的需求创建多级文件夹，建立站点常规的文件夹结构，如图所示。

（2）站点栏目规划 根据制作网站的使用范围和用途，设计站点栏目菜单的结构，如图1-2所示。电商站点主页面index.html家用电器数码产品生活服饰户外运动图书文具美食特产办公用品

新建web项目站点02

2.2.1开发工具——HBuilder1.安装HBuilderX访问HBuilder官方网站（http：//www.dcloud.io）,下载最新版的HBuilderX。可以看到HBuilderX的当前版本、历史版本以及各平台的不同版本，App开发版，包含大部分App开发插件。App开发，指的是手机应用开发。如果您是初学者或开发前端，建议下载标准版。后期如果学习App开发，可以到【插件安装】中，安装相关插件。读者再下载是根据自己的设备选择合适的版本即可。

HBuilderX下载完成，解压到指定的路径后，双击启动文件HBuilderX.exe

2.初识HBuilderXHBuilderX首次启动后，打开了一个HBuilderX自述文件.md,HBuilderX自述文件。md：是一个markdown文件，就是个文本语言。点击右上角的x，可以关闭此文件。

关闭后的页面右侧窗口，如图，提供【新建项目】、【主题切换】、【新建空白文件】、【快捷键方案切换】、【打开目录】、【入门教程】快捷菜单。单击【入门教程】，浏览器打开一个新窗口，该窗口显示HBuilderX官方的使用教程，提供了HBuilderX的详细使用方法。

2.2.2创建web站点1.新建项目首先，点击右侧窗口【新建项目】快捷菜单、或点击工具栏上第一个图标（就是带有红色+号）、或直接Ctrl+N，调出创建项目窗口，如下图所示。

在图中，选择“普通项目”，在A处填写新建项目的名称，B处填写（或选择）项目保存路径(更改此路径HBuilderX会记录，下次默认使用更改后的路径)，C处可选择使用的模板，选择“基本HTML项目”模板，单击“创建”按钮新建web项目。

新建项目后，如图所示。最后，编写项目中默认的文件index.html，利用HBuilderX提供的工具完成文件的运行。

2.代码助手HBuilderX拥有强大的代码助手提示，可以按“alt+数字”选择直接选择某个项目，类似中文输入法数字选词，可以帮您少敲很多代码，如图所示。

3..查看代码效果如图所示，点击【预览】可以查看代码效果。如果您首次点击【预览】，又没有安装【内置浏览器】，点击预览的时候，会提示您安装插件，点击确定即可。

4.安装插件点击菜单“工具”→“插件安装”，选择需要的插件点击安装，如图所示。

2.2.2调试工具——Chrome开发者工具【知识解析】前端开发中，经常需要调试代码，所以各种调试工具及浏览器控制台的使用会对开发起到很大的作用。下面对目前很受喜欢的Chrome开发者工具进行介绍。Chrome开发者工具是一套内嵌到Chrome浏览器的Web开发工具和调试工具，只要安装了Chrome浏览器，就可以使用。在Chrome浏览器中，开发者工具的打开方式主要有以下几种。p按F12键；pCtrl+Shift+I快捷键；p右击页面的任意位置，选择快捷菜单的“检查”命令。单击Chrome浏览器右上角的自定义图标，展开菜单，选择“更多工具”→“开发者工具”命令，如图2-16所示。

1.Element面板Elements面板即元素面板，使用该面板可以直接操作DOM元素和样式、包括查看元素属性或者修改元素属性、修改样式等，非常方便开发者调试HTML结构和CSS样式