菜鸟自学建站 HTML 第四课 设置文档格式(1)_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:06:57
원래의
1172명이 탐색했습니다.

上一节课我们通过手打,复制粘贴,导入等几种方法创建了我们自学习以来的第一个网页。但是呢,跟我们平常浏览的网页比起来,它简直弱爆了,也丑爆了。不过毕竟是我们接触网页制作以来的第一个页面,怎么也得说句:我骄傲!是吧。

在文档中添加内容并不困难,接下来的工作是如何设置文本的大小、颜色、格式等属性以及文档的页面属性,这些呢,也是制作网页的基础工作。

在接下来的学习中,内容点会不断增加,大家还要多加练习才是王道。

1.设置浏览器的标题

标题其实就跟我们的姓名一样,比如我叫张三,那么一看到张三你就会联系到我这张苦逼的?丝脸跟我这个人。

标题的作用,就是让我们知道这个网页是什么内容,而且标题一定要跟内容相关,否则你看到一个网页的标题是香烟,可是打开却是卖茶叶的,这样就乱套了。

 

修改标题的方式有三种(上节课我们简单的教了2种)回顾一下:

(1)在文档的工具栏的标题文本框中输入,如

(2)选择修改?页面属性命令,或者单击属性面板中的页面属性按钮,打开页面属性对话框,然后选择标题/编码分类,在标题文本框中输入

2.设置段落格式

(1)分段和换行

在文档窗口里面,每按一次Enter,就会另起一个段落,但是段落之间会有一个空行间距。怎么样才能不让换行后没有间距呢?

一起动手做吧!

选择插入记录?HTML?特殊字符?换行符

或者按 Shift+Enter

或者工具栏中点文本,点换行符图标

 

一起来看看效果

 

(2)文档标题

在写文章时,我们都会有一个题目,这个题目就相当于浏览器的标题

而在文章里面,我们有时也会加一些小标题,这些小标题就是文档标题

举个例子:作文题目:我的游戏史

作文里面又分为两个部分: 魔兽世界  DOTA

然后魔兽世界里面又分为:部落 联盟

这里的作文题目,实际上就是我们的浏览器标题

魔兽世界 DOTA,是我们文档的1号标题

部落 联盟,是我们文档的2号标题

怎么设置这些标题的格式呢?

做个小例子:

先把上面的内容写到文档里

选中魔兽世界,点击属性栏的格式,选择标题1

我们会发现,代码里的

魔兽世界

已经变成了

魔兽世界

这里的就是我们的标题标签(俗称代码)

它代表的意思就是,这里是一个文档标题,不是文档段落或者其他

那如果我让这个标题换个字体,换个大小,怎么设置呢?

点击属性栏的页面属性,选择标题分类,就可以进行标题的样式设定了

设置好以后,按照刚才的方法进行标题的设置

 

(3)设置列表

我们平常可能会遇到这样一种情况,就是比如记录我们每天的日程

比如:1.早上7点半起床

      2.7点半~8点开始锻炼身体

      3.8点~8点半洗漱完毕吃早饭

      4.9点到达公司开始上班

像上面这个例子的1.2.3.4. 就是一种列表

在网页制作过程中,我们怎么样来做这样一种列表呢?

还是做个小例子:

老规矩,先输入文本

然后点击属性栏的列表项目符号

观察代码:

变成了
  • 就是列表的代码

    那如果我想要换成a,b,c,d来作为列表,可以么?

    我们将鼠标光标放到列表中,点击属性栏的列表属性,在列表类型,样式中修改即可。

     

    今天的学习就到这里。下面留个小作业。

    输入以下内容:

    新建一个文档,保存为菜鸟建站的一个作业.html

    设置浏览器标题为: 菜鸟建站的第一个作业

    根据作用对以下文本进行设置

    把以上三行话设定一个文档标题

    h1标题文字大小为18,颜色为#000

    h2标题文字大小为14,颜色为#00f

    h3标题文字大小为9,颜色为#ccc;

    字体为像素(px)

    输入一个换行符

    我是菜鸟,我喜欢建站,我喜欢设计,我喜欢编程,我会为了我的目标而努力

    我的追求是将来可以自己动手制作一个网站

     

    作业要求,1,将前四段话设置一个项目列表,列表样式为数字1.2.3.4.

    2.将第5~8段话,设置为3个文档标题。标题样式为话语本身

    3.在第9~10行话中加入一个换行符

    最终效果如下:

    by??午夜的猫

  • 원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿