HTML+CSS第五课:使用Dreamweaver工具制作网页、详细解读HTML头部标签、网页头部标签的SEO设置

版权声明:王迪 https://blog.csdn.net/dnruanjian/article/details/83660780

知识点:Dreamweaver工具的使用、HTML头部标签解读、网页头部标签的SEO设置

1、Dreamweaver工具

           Adobe Dreamweaver,简称“DW”,中文名称 "梦想编织者",最初为美国MACROMEDIA公司开发 ,2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持,设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

1.1  站点

        在 Dreamweaver 中,术语“站点”指属于某个网站的文档的本地或远程存储位置。利用 Dreamweaver 站点,可以组织和管理你的所有 Web 文档,将您的站点上传到 Web 服务器、跟踪和维护您的链接以及管理和共享文件。  

        Adobe Dreamweaver 站点是包含您的网站中所有文件和资源的集合。您可以在计算机上创建网页,可将网页上传到 Web 服务器,并可随时在保存文件后传输更新的文件来对站点进行维护。您也可以编辑和维护不是使用 Dreamweaver 创建的网站

1.2  在DW软件中定义站点的好处

您可以在 Dreamweaver 中工作而无需设置(或定义)站点。但是,定义站点有很多好处:

  • 它有助于防止断开的链接,如果您移动或重命名文件可在站点范围内自动更新文件。
  • 它可帮助您执行站点范围的查找和替换操作,这极大地提高了工作效率。
  • 它可以帮助您轻松发布站点,并在您的本地硬盘和 Web 服务器或中间服务器上的远程文件之间同步文件。

1.3  在DW中新建站点的方法

步骤一:在本地硬盘上建立一个用来存放站点的文件夹(文件夹命名为英文),这个文件夹就是本地站点的根目录。

步骤二:启动Dreamweaver,执行【站点>新建站点】菜单命令。

步骤三:在弹出的如图所示的站点定义对话框中设置新建站点的参数。

站点名称:输入网站名称,该名称会显示在站点面板的站点下拉列表中。

本地站点文件夹:点击后面文件夹按钮,浏览到自己提前新建好的文件夹即可。

步骤四(可选):设置【高级设置>本地信息】,选择默认图像文件夹和链接

默认图像文件夹:浏览到站点根目录即可

链接相对于:选择站点根目录

步骤五:单击【保存】后,会在DW软件界面看到你新建的站点

右键本地站点名称,选择【新建文件】——会新建一个.html文档,即可进行网页的编辑了。 

 

2、详细解读HTML头部标签(了解即可)

使用DW新建的HTML文档,会自动生成HTML基本文档结构。编写网页的时候主要在<head>标签和<body>标签里进行即可。

<!--注释1:<!DOCTYPE> 声明是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--注释2:在文档中的<html> 标签中使用 xmlns 属性,以指定整个文档所使用的主要命名空间。-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--注释3:meta是html中的元标签,其中包含了对应html的相关信息,客户端浏览器或服务器端的程序会根据这些信息进行处理。:-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>

</body>
</html>

具体解释:

1)本例中的<!DOCTYPE> 声明,声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Transitional//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

2)xmlns 属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。该属性的值类似于 URL,它定义了一个命名空间,浏览器会将此命名空间用于该属性所在元素内的所有内容。

3)meta标签
HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。
content(内容类型):重要!!这个网页的格式是文本的,网页模式
charset(编码):特别重要!!!这个网页的编码是utf-8,中文编码,需要注意的是这个是网页内容的编码,而不是文件本身的,其他类型的编码中文可能会出现乱码。
 

3、头部标签的SEO设置(了解即可)

       SEO(Search Engine Optimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。SEO的目的是:为网站提供生态式的自我营销解决方案,让其在行业内占据领先地位,获得品牌收益。

       良好的SEO设置包括在网站建设阶段,对网页的头部标签进行优化设置,主要从以下方面进行:

1)页面标题

<title>标题</title>

<title>标签成对出现,标签里的内容是对整个页面核心思想的高度概括。会显示在浏览器标题栏。同时也会和描述一起显示在搜索结果页面上。

2)页面描述

<meta name="description" content="不超过150个字符" /> 

页面描述,一般包含网页的3~4个关键词 

猜你喜欢

转载自blog.csdn.net/dnruanjian/article/details/83660780