从零开始的html教程(3):自定义网页的风格、认识属性

 更新时间:2016年12月21日 21:02  点击:1947
一聚教程网 从零开始的html教程(3),零基础也能轻松学会html,希望大家喜欢!

这节课我们来学习一下什么是属性,如何更改网页的背景吧。

一、网页DIY

1.我想把网页背景颜色改成黑色该怎么办呢?

试着把<body>改成<body style="background-color:#000000;">吧。

改完了么,呃……

背景改成黑色后因为文字也是黑色的,看不见文字了。<body style="background-color:#000000;">style定义了<body>,也就是网页主体的背景颜色为十六进制的#00000(黑色)。

2.顺便把文字颜色也改了吧。

<span>是用来控制小段字符的标签,<span style="color:#ffffff;">中style定义了<span>元素内文本的颜色为十六进制的#ffffff(白色)

二、html中的属性

属性通常以这样的形式出现(红色字体为属性):<span style="color:#ffffff;">,"style"就是<span>的属性。style属性用来将表现性质赋予一个特定元素,而且style无视任何全局样式设定而生效。其他的属性还有:id、class、title、lang、abbr等。

三、十六进制颜色

十六进制颜色代码以#号开头,三组16进制数字表示RGB三色,每组数字从0到FF。完全不懂十六进制的同学不用担心找不到自己想要的颜色,我们用的这款dreamweaver在输入"<color:#"后会跳出颜色选择框,选择自己想要的颜色,软件会自动帮你填好十六进制码。

四、怎么更改字体和颜色呢?

依然是通过style属性实现。在style属性中加入:

"font-famil:宋体;font-size:200%;”
font-famil:为设定字体,font-size是设置字体大小。

这篇教程介绍了html中怎么修改字体以及属性的含义,大家尝试自己修改喜欢的字体和颜色练习一下。下一课是如何结构化网页的教程,学习完成你就能脱离html菜鸟了,敬请期待!

一聚教程网 从零开始的html教程(1),零基础也能轻松学会html,希望大家喜欢!

前言

Html(HyperText Markup Language,超文本标记语言)是一门用来创建网页的语言,网页浏览器就是通过读取HTML文件,并将其渲染成可视化网页的。这篇是教程针对编程方面零基础的同学的,html属于编程语言相对简单的,我相信大家看了这篇教程后都能够亲手制作出自己的网页

一、如何设计出一个网页?

利用windows自带的文本编辑器或者HTML编辑器即可制作出一个网页。

网页通常由html、css、javascript这三种语言组成。我们要学习的html是网页的基本框架css(层叠样式表)是用来结构化文档添加样式的,通俗点说就是用来美化网页的;javascript是一门动态类型,面向对象的高级编程语言,我们平常上网在网页上看到的绚丽的特效与点击按钮提交数据等,就是用JS实现的。这篇教程建议大家使用Dreamweaver这款软件,语法高亮显示、自动完成等功能可以让大家不用强记一大堆HTML指令和更方便的编写HTML

二、我们先用Dreamweaver创建一个页面吧!

(如果还没有下载软件的同学请戳这里dreamweaver网盘下载与安装教程

1.打开软件后首先建议大家使用标准模式的拆分功能,打出代码的同时就会显示出网页的效果,方便学习。界面右上角可以切换模式,有两种模式,分别为:开发人员模式标准模式

2.点击左上角的文件后选择新建,出现如图示界面,什么都不用改,用默认的配置就行了。点击右下角的“新建”。

3.这就是我们创建的第一个网页了。我们可以看到,黑色框内容修改之后,白色框内及时反映了出来。

大家在学习的过程中一定要使用下面黑色框内的文本编辑器编辑,养成良好的代码习惯

以上就是html编辑器dreamweaver基础操作。下一课就要介绍到<html><head><body>等尖括号到底是什么意思,干什么用的。大家是不是摩拳擦掌等着编辑自己的网页了,敬请关注一聚教程网后续教程。

Banner设计中为什么要使用图形设计呢?小编分享的这篇文章为大家详细剖析了banner中的图形设计。

在Banner设计中,经常会使用一些图形,将文字或一些图片框选起来。为什么这样做,其实是无可奈何的。如果我们看一下除Banner之外的图片,几乎很少用图形的,当然有些Banner也不用图形的,都是有原因的,我们可以具体分析一下。

一:艺术图片为什么一般不用图形。

图形的目的就是引起注意,起到一个提示的作用。但是艺术片有它自己的方法。它们一般会使用色彩的明暗或大小等或一些特效来突出他们的主题。因为图形有分隔的作用,会破坏整体效果。再者艺术图片图是第一位的,文字非常少,可以做的很大,况且也不是主题,也就不需要图形框选了。

上面的几幅图,通过颜色的差异,主题的大小,特效的制作,就足以将作者的意图表现出来了,还用图形做什么。比如第一副图的色彩第二副的大手和纯黑背景第三幅的特写第四幅的排列都可以体现主题,其它的就不重要了。这里图形是主题,文字是次要的。

二:Banner为什么喜欢用图形

Banner是一般都是用于产品的宣传,所以不允许使用明暗度来表现,大部分都是比较亮的颜色(也不绝对,一些比如手机相机一类的会使用黑色),这样就要使用其它方法来表现图片。其二Banner文字较多,文字相对较小,(至少里面经常会出现小字),所以表现的难度进一步加大。只能使用图形(如三角形.矩形或圆形)来突出主题。这是一种无可奈何的选择。第三Banner人们关心的产品,对整体的艺术效果看得不重,所以可以容忍使用图形。最最重要的是,banner需要文字来解释,文字的重要性远远超过艺术图片。

上图使用方形的原因是框中的四个字太散,不整齐。离开方框会使整个画面乱。

这幅图也是,离开方框,图就是一张烂图。

文字有波浪,不用图形仍然会不整齐。况且文字太小,重视度也不够。

这幅最有意思,利用小旗子本身的框,太有创意了。

这幅一般吧,没什么说的

也是为了是文字的完整性。

圆形是最经典的。

上面几幅图,用什么图形,没有绝对的规律,最重要的是协调。整体协调了,就行。

三:什么时候Banner可以不用图形

如果文字较少,就可以放大,这是可以选用使用也可以选择不使用,第二,如果文字较长,一般不使用图形。因为较长的文字本身就可以提高吸引力。

文字稍大,其实也用了一点框,就是下面的红色。

文字较长,可以不用图形。

也是文字长

文字较大,又是较容易识别的。

文字颜色明亮,背后是黑色,容易识别。

下面这几幅,为什么不使用图形,文字比较长,根本就没有办法使用图形,而且长文字本身就有吸引力,有何必多此一举。

现在的设计师最忌雷同,都会有自己的创意在里面,这样就会出现各种各样的图,不会拘泥与任何的一种格式。

Dreamweaver是一款非常不错的软件设计工具了,如果你碰到在使用 Dreamweaver时 查找和替换窗口不见了我们可以来看看下面的办法。
最近用Dreamweaver8遇到了一种很抓狂的事,查找和替换窗口不显示了!
Dreamweaver8

 

按Ctrl+F调出查找和替换窗口,然后长时间不去激活这个窗口,或者把它拖到桌面边上,它就像隐身了一样,无论怎么按Ctrl+F就是不显示出来。我清除缓存、重装Dreamweaver8,还是不行啊!

 

按下Alt+Tab,发现窗口存在。但是整个桌面就是找不到。

 

Dreamweaver8 查找和替换窗口不见了解决办法

 

鼠标放在任务栏预览,发现查找和替换窗口拉长了、或者变大了。

 

左思右想就是不知道怎么弄出来,上班的时候电脑开的窗口很多,这时就需要把各个窗口拖到互相不影响的位置,这时突然灵机一动,鼠标可以移动,键盘不是也可以吗?

 

于是我把查找和替换窗口激活,按下Atrl+空格,再按下M,通过方向键移动窗口,尼玛,终于回到桌面上了!

以后遇到桌面上窗口消失,但Tab切换能显示出来,激活窗口,按下Atrl+空格,再按下M,方向键移动窗口

[!--infotagslink--]

相关文章

  • C#创建自定义控件及添加自定义属性和事件使用实例详解

    这篇文章主要给大家介绍了关于C#创建自定义控件及添加自定义属性和事件使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用C#具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
  • JS实现自定义简单网页软键盘效果代码

    本文实例讲述了JS实现自定义简单网页软键盘效果。分享给大家供大家参考,具体如下:这是一款自定义的简单点的网页软键盘,没有使用任何控件,仅是为了练习JavaScript编写水平,安全性方面没有过多考虑,有顾虑的可以不用,目的是学...2015-11-08
  • android自定义动态设置Button样式【很常用】

    为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
  • Android自定义WebView网络视频播放控件例子

    下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
  • 自定义jquery模态窗口插件无法在顶层窗口显示问题

    自定义一个jquery模态窗口插件,将它集成到现有平台框架中时,它只能在mainFrame窗口中显示,无法在顶层窗口显示. 解决这个问题的办法: 通过以下代码就可能实现在顶层窗口弹窗 复制代码 代码如下: $(window.top.documen...2014-05-31
  • 自定义feignClient的常见坑及解决

    这篇文章主要介绍了自定义feignClient的常见坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-10-20
  • pytorch 自定义卷积核进行卷积操作方式

    今天小编就为大家分享一篇pytorch 自定义卷积核进行卷积操作方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-06
  • PHP YII框架开发小技巧之模型(models)中rules自定义验证规则

    YII的models中的rules部分是一些表单的验证规则,对于表单验证十分有用,在相应的视图(views)里面添加了表单,在表单被提交之前程序都会自动先来这里面的规则里验证,只有通过对其有效的限制规则后才能被提交,可以很有效地保证...2015-11-24
  • Vue 组件复用多次自定义参数操作

    这篇文章主要介绍了Vue 组件复用多次自定义参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27
  • jquery自定义插件开发之window的实现过程

    这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下...2016-05-09
  • C#自定义事件监听实现方法

    这篇文章主要介绍了C#自定义事件监听实现方法,涉及C#事件监听的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • c#之用户定义的数据类型转换介绍

    c#允许定义自己的数据类型,这意味着需要某些工具支持在自己的数据类型间进行数据转换。方法是把数据类型转换定义为相关类的一个成员运算符,数据类型转换必须声明是隐式或者显式,以说明怎么使用它...2020-06-25
  • 基于Bootstrap实现Material Design风格表单插件 附源码下载

    Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载,感兴趣的朋友参考下...2016-04-19
  • 使用BindingResult 自定义错误信息

    这篇文章主要介绍了使用BindingResult 自定义错误信息,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-10-23
  • 在Vue中获取自定义属性方法:data-id的实例

    这篇文章主要介绍了在Vue中获取自定义属性方法:data-id的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
  • SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用

    今天在配置sql server 代理服务器的计划任务的时候发现了日志中提示这个SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用信息导致无法执行计划任务,那么可以按照下面的方法解决即可...2021-07-16
  • 微信小程序 Toast自定义实例详解

    这篇文章主要介绍了微信小程序 Toast自定义实例详解的相关资料,需要的朋友可以参考下...2017-01-23
  • pytorch 自定义参数不更新方式

    今天小编就为大家分享一篇pytorch 自定义参数不更新方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-29
  • thinkphp自定义权限管理之名称判断方法

    下面小编就为大家带来一篇thinkphp自定义权限管理之名称判断方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-04-03
  • Nginx自定义访问日志的配置方式

    Nginx日志主要分为两种:访问日志和错误日志。访问日志主要记录客户端访问Nginx的每一个请求,格式可以自定义。下面这篇文章主要给大家介绍了Nginx自定义访问日志的配置方式,需要的朋友可以参考学习,下面来一起看看吧。...2017-07-06