用户工具

站点工具


foreword:base

最好了解一下的进阶知识

HTML语言基础知识

打开任何一个网站,右键 - 查看网页源代码,所看到的便是HTML代码,如果想更多了解这些代码的详细信息,建议查看这里

本页内容简单的描述一下HTML语言的基础知识。

1. 使用文本编辑器,创建一个新文件,将以下代码输入,并保存为test.html或test.htm。

用浏览器打开test.html,浏览器上将会显示hello world!

test.html
<html>
<body>
hello world!
</body>
</html>

2. HTML标签是以尖括号标识的,如

<html>

;同时它必须有结束部分,如

</html>

。但也有例外,换行<br />、图片<img src=“imgage address” />、横线<hr>等不需要结束标签。

3. 早期几乎所有网站都使用表格来排版,现在几乎都使用

<div> ... </div>

元素的 HTML 布局排版,所以在学习HTML语言时,尽可能多的去理解 div 标签。

4. SEO话题中,最重要的两项HTML元素是<h1> 一级标题 </h1>和<strong> 加粗 </strong>,这在使用WordPress建站时,需要检查的部分,因为搜索引擎会认为这两项元素包含的内容是页面的重要部分。

当然,不能把所有内容都用这两个元素包含起来。通常每个页面只能使用一个h1元素,strong元素也不能滥用。

5. 可以给元素添加 id 和 class,方便给元素附加 css 样式,css 样式如何定义是下一节讨论的内容。

<div id="id_name" class="class_name"> contents... </div>

6. 如何添加链接和邮箱链接?

links.html
<html>
<body>
<a href="https://www.wpwiki.cn">链接到WPWIKI</a>
<a href="mailto:yunbotao@gmail.com">写邮件给我们</a>
</body>
</html>

CSS基础知识

上一节讲到 HTML 语言,可以将 HTML 理解为一个赤裸的身体,那么 CSS 就是其外的衣服、鞋子及饰品等。如果世界上所有人都是赤裸的,就毫无美好之言。同样的道理,如果所有网站都是赤裸的,就不需要网页设计师和自己建网站了,好的网站必然是有丰富的内容和可欣赏的外观。

CSS 的更多详细内容,请查看这里

1. 给上一节的两个链接改变一下颜色,链接颜色为cornflowerblue,当鼠标放上后,颜色变为brown;

links1.html
<html>
<style>
	a {color: cornflowerblue;font-size: 12px;}	
	a:hover {color: brown;}
</style>
<body>
<a href="https://www.wpwiki.cn">链接到WPWIKI</a>
<a href="mailto:yunbotao@gmail.com">写邮件给我们</a>
</body>
</html>

2. 给两个链接添加不一样的CSS,给第一个链接添加class=“link_one”,第二个链接添加class=“link_two”。

links2.html
<html>
<style>
	a.link_one {color: cornflowerblue;font-size: 12px;}	
	a.link_one:hover {color: brown;}
 
	a.link_two {color: #000;font-size: 12px;}	
	a.link_two:hover {color: #ccc;}
 
</style>
<body>
<a class="link_one" href="https://www.wpwiki.cn">链接到WPWIKI</a>
<a class="link_two" href="mailto:yunbotao@gmail.com">写邮件给我们</a>
</body>
</html>

3. 稍加修改以上HTML代码,CSS 的样式写法又会不一样;

links3.html
<html>
<style>
	.link_one a {color: cornflowerblue;font-size: 12px;}	
	.link_one a:hover {color: brown;}
 
	.link_two a {color: #000;font-size: 12px;}	
	.link_two a:hover {color: #ccc;}
 
</style>
<body>
<div class="link_one"><a href="https://www.wpwiki.cn">链接到WPWIKI</a></div>
<div class="link_two"><a href="mailto:yunbotao@gmail.com">写邮件给我们</a></div>
</body>
</html>

以上仅仅是 CSS 的冰山一角,在使用WordPress建站时,并不会需要自己去写 CSS,以下讲到如何去修改主题的CSS,这才是我们重点要了解的地方。


4. 使用Chrome浏览器,右键 - 查看,就可以看到鼠标所在位置的 HTML 代码,右侧是 CSS 样式,在Chrome里,便可以实时查看修改的效果。修改后,需要把修改的代码复制到后台自定义 CSS 文件内,或子主题的CSS文件内。

5. 给网站所有内容替换字体为微软雅黑,添加以下代码到自定义CSS里:

* {font-family: '微软雅黑', Arial;}

JavaScript语言基础知识

JavaScript 是属于网络的脚本语言! 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。 是因特网上最流行的脚本语言。更多详细内容,请查看这里

网站有很多很的JS代码,通常不需要自己去写JS代码,但是需要了解如何引用JS代码。

1. 这是引用外部的JS文件进来:

<script type="text/javascript" charset="utf-8" src="JS文件的地址"></script>

2. 这是将JS代码置入HTML代码内:

test.js
<html>
<head>
</head>
<body>
 
<script type="text/javascript">
...
</script>
 
</body>
</html>

初识PHP语言

PHP 语言是服务器端运行的脚本语言,所以在浏览器右键查看源代码只能看到执行后的 HTML 代码,而不会看到 PHP 代码。由于使用的 WordPress 程序是由 PHP 开发的,所以有必要了解一下 PHP 语言的基本知识。

1. PHP 代码是以 <?php 开始,以 ?> 结束的。如下:

test1.php
<?php
  echo "hello world!";
?>

其中 echo 是在网页上输出文本。

2. PHP 代码可以任意插入 HTML 代码内:

test2.php
<html>
<body>
 
<p>我是第1段内容!</p>
<?php echo "我是第2段内容!"; ?>
<p>我是第3段内容!</p>
<?php echo "我是第4段内容!"; ?>
<p>我是第5段内容!</p>
<p>我是第6段内容!</p>
 
</body>
</html>

注意:下载test2.php后,用浏览器打开后,是不会看到 PHP 代码输出的内容,因为 PHP 是服务器端执行的代码,本地服务器可以将此 test2.php 文件放置在 G:\xampp\htdocs 目前内,通过 http://localhost/test2.php 访问。

3. PHP 的变量是以美元符号$命名的,如下:

test3.php
<?php
 
  $my = 5;
  echo $my; 
 
?>

将输出 5 ,这里要特别注意的是,如果将 JS 代码嵌套在 PHP 代码内,需要注意 JS 的命名不要出现 $ 符号,如果出现冲突,应该在 JS 代码的 $ 前添加 \ ,以便其输出正确。

PhotoShop设计基础

网站在建设过程中,用的图片的地方非常多,譬如Logo、Banner和产品图片等。在制作图片之前需要了解以下基础:

  • 图片的大小:一般是指这个图片的占用磁盘空间,比如说200K和1M,后者就比前者大多了,通常在不影响图片清晰度的情况下,图片的大小是越小越好;
  • 图片的尺寸:是指图片的宽和高,单位以像素来描述,500×300的图片,其宽度是500像素,高度是300像素;
  • 图片的格式:常见三种格式,jpg、png和gif,png格式越来越受欢迎,而且其支持透明度,动画图片一定要保存为gif格式才可以;

PS能干的事儿很多,你想学什么?

其实,我们学习PS,仅仅是为了建站的需要,譬如:修改一下图片尺寸,在图片上加个文字什么的,把两张图片拼在一起等非常简单的操作。所以并不推荐去找PS视频教程去学习,那些视频是给想从事设计行业的人去学习的。

最好的办法是:找一个会PS的亲戚朋友或同学,花1-2小时学会就可以了。

如果学不会,那就不要学了,在建站时,遇到图片处理的事,还是交给他人来完成吧,把时间节省出来干别的事!

foreword/base.txt · 最后更改: 2017/03/19 21:06 由 Tony