宁波网站设计专栏

宁波网站设计:通过CSS设置文字的大小

发布时间:2018-09-22 23:02:25

  通过CSS设置文字的大小
  首先,将工作窗口切换到设计页面,然后鼠标拖黑选中拟改变大小的文字,点选下面属性面板中的类文件,通过附加已有的样式文件来更改文字的大小。
  通过标签来更改文字的大小
  除了使用CSS外,也可以使用标签对文字的大小和颜色等格式进行设置。操作方法如下:

宁波网站设计:通过CSS设置文字的大小的图片265

  至于具体文字大小的增加或减小以多少为宜,可由网页设计者根据需要自由决定。
  设置文字的颜色
  通过面板来设置文字的颜色
  在Dreamweaver中,不仅可以进行字体和大小的设置,还可对文字进行相应的颜色设置,使页面的文字更加漂亮多姿。其具体的操作方法如下:

宁波网站设计:通过CSS设置文字的大小的图片271

  在设计窗口中,选择好需要设置颜色的文字,单击”属性“面板中的色块按钮,就可以打开一个颜色选择列表。这时会发现光标变成了吸取器的形状。可以在列表中单击所需颜色的色块来进行选择。
  如果颜色列表框中的颜色不适合,还可以单击色块列表右上方的小色球图形的按钮,打开”颜色“对话框。首先在”基本颜色“列表中选取需要的基本色调,然后在右侧的同色系渐变色彩中选择所需的具体的细腻颜色。
  实际”颜色“对话框
  选择好颜色后,单击”确定“按钮,关闭”颜色“对话框,设置便会立即生效,文字的颜色随之发生变化。
  通过标签来更改文字的颜色
  利用标签更改文字颜色的方法与更改文字大小的方法类似,也是使用标签来完成,不过标签属性变为”colors颜色值“”。
  首先,将工作窗口切换到代码页面,然后找到拟改变颜色的文字,在文字前方填写标签和属性即可。例如,假如在一段文字的前面加上“”,在文字的后方填写标签“
”D当把页面切换回设计页面时,就发现文字的颜色已经变为“#990000”所代表的红色了。
  课堂练习

宁波网站设计:通过CSS设置文字的大小的图片266

  练习内容
  制作一个散文网页。
  练习目标
  熟练掌握文字的各类编辑方法。
  具体要求
  新建一个站点,在站点中新建一个网页。
  在网页中复制进去一篇自己喜欢的散文。
  将散文标题进行字号加大、加粗显示。
  对散文正文进行合理的段落排版。

宁波网站设计:通过CSS设置文字的大小的图片269

  散文每段前空两格。
  将标题的字体设为“隶书”,将正文的字体设为“幼圆”。
  将标题文字的颜色设为杏黄色,将正文文字的颜色设为墨绿色。
  网页中图像的应用
  网页图像常识
  网页离不开图片的点缀。在网页中应用图片的方法,是很多网页制作新手都期待学习的重要内容。
  矢量图与位图
  矢量图-完美的几何图形
  矢量图是通过组成图形的一些基本元素的时候则通过这些数据去绘制人们定义的图像。

宁波网站设计:通过CSS设置文字的大小的图片264

  矢量图的优点在于文件相对较小,并且放大、缩小时不会失真。其缺点是这些完美的几何图形很难表现自然度高的写实图像。
  需要强调的是,在Web页面上所使用的图像都是位图,即便有些称为矢量图形。
  位图--神奇的拼图
  位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图,只不过每个拼块都是一个纯色的像素点,当把这些不同颜色的像素点按照一定规律排列在一起的时候,就形成了人们所看到的图像。当放大一幅位图时,能看到这些拼片一样的像素点。
  位图的优点是利于显示色彩层次丰富的写实图像。其缺点是文件较大,放大和缩小图像时会失真。
  有损压缩和无损压缩
  尽管人们在Web页面中所使用的JPG、PNG格式的图像都是位图,即它们都是通过记录像素点的数据来保存和显示图像,但这些不同格式的图像在记录这些数据时的方式却不一样,这涉及有损压缩和无损压缩的区别。
  有损压缩——看到的不一定是真实的
  JPG是最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分解成8x8像素的栅格,然后对毎个栅格的数据进行压缩处理。当放大一幅图像的时候,会发现这些8x8像素栅格中很多细节信息被去除,而通过一些特殊算法用附近的颜色进行填充。这就是用PG格式存储图像有时会产生块状模糊的原因。
  无损压缩——最精确的拼图
  相对有损压缩无损压缩能真实地记录图像上每个像素点的数据信息,但为了压缩图像文件其会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的,哪些是不同的,然后把这些相同的数据信息进行压缩记录(例如对一片蓝色的天空只需要记录起点和终点的位置就可以了),而把不同的数据另外保存(例如天空上的白云和渐变等数据)。
  PNG是最常见的一种无损压缩的图片格式。无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的,为此需要对图像上出现的所有颜色进行索引,这些颜色称为索引色。索引色就好比绘制这幅图像的“调色板”,PNG格式在显示图像的时候会用“调色板”上的这些颜色去填充相应的位置。
  网页常用的图像格式
  GIF图片格式
  GIF是一种调色板型(或者说是索引型)的图片。它含有多达256种颜色。每一个像素点都有一个对应的颜色值。GIF是一种无损压缩的格式,这意味着在修改并且保存图片的时候,它的质量不会有任何损耗。GIF格式支持动画,如果有需要,就可以使用动画支持。GIF支持透明度,透明度的值是一种布尔类型数据。GIF图片里的一个像素要么完全透明,要么完全不透明。
  PNG图片格式
  PNG又分为PNG-8、PNG-24两种,其中,PNG-8与GIF类似,支持256色调色板,而PNG-24只支持48位真彩色,凡是GIF拥有的优势PNG-8都拥有,GIF所没有的优势PNG-8也有,同样的文件,PNG-8格式比GIF格式要小,PNG-8的特点使得它在网站设计的切图环节深受网站设计师的喜爱。PNG格式可以以任何颜色深度存储图像,也支持高级别的无损耗压缩,支持伽马校正,支持交错,得到最新Web浏览器的支持,能够提供长度比GIF格式小30%的无损压缩图像文件,最高支持48位真彩色图像以及16位灰度图像,可渐近显示和流式读写。其不足之处是较旧的浏览器和程序可能不支持PNG文件。
  JPEG图片格式
  JPEG是目前网络上最流行的图像格式,是可以把文件压缩到最小的格式。在Photoshop软件中以JPEG格式储存图像时,它提供11级压缩级別,以0——10级表示。其中0级压缩比最高,图像品质最差。即使采用细节几乎无损的W级质量保存时,压缩比也可达到5:1。经过多次比较,第8级压缩为存储空间与图像质量兼得的最佳比例。JPEG格式的应用非常广泛,在网络读物和光盘读物上,都能找到它的身影。目前各类浏览器均支持jPEG格式,因为JPEG格式的文件尺寸较小,下载速度快D7.2在网页中插入前端图像一个页面光有文本是无法吸引人的,插人图片会使页面更加生动、1nc为了保持良好的制作习惯,在站点所在目录“D:myweb”下建立一个名为“img”的文件夹,将主页中需要的图片都放在这个文件夹下。
  ‘可以用Photoshop、Fireworks等图形工具处理好一些图片,宁波网站设计将图片放在“img”文件夹下,为提髙主页下载速度,可将图片存为GIF或JPG格式。
  通过可视化工具插入图像

宁波网站设计:通过CSS设置文字的大小的图片268

  打开Dreamweaver后,将光标移动到待插入图片的位置,单击一下,进行当前焦点确认。
  在Dreamweaver上方的菜单栏中单击“插人”菜单,在弹出的二级菜单中选择“图像”子菜单。
  在接下来弹出的选择图片窗口中,选择图片来源于文件系统,然后单击“确定”按钮。
  在弹出的浏览框中单击进人存放图片的目录,并通过浏览查找拟插入到网页中的图片。在浏览时,可以通过右侧的图像预览来确定该文件是否是需要的图片文件。
  实际浏览查找图像文件
  选中需要的图片,单击“确定”按钮。
  如果选中的图片不在站点文件夹中,软件会弹出保存文档的提示,这时单击“确定”按钮,接下来把该图片文件复制到站点文件夹中。
  桌面_____OiJ9
  实际保存文档提示
  在弹出的文件信息中,单击“确定”按钮。

宁波网站设计:通过CSS设置文字的大小的图片273

  此时可发现,该图像已经插人到页面中了。
  实际图像插入效果
  通过标签插入图像
  在制作网页时,可以使用HTML语言中的<^^>标签将图像插人到网页中,从而达到美化页面的效果。
  语法:

宁波网站设计:通过CSS设置文字的大小的图片275

宁波网站设计:通过CSS设置文字的大小的图片262

  说明:在该语法中,src参数用来设置图像文件所在的路径,这一路径可以是相对路径,也可以是绝对路径。
  实例代码如下:
  
  图像的编辑与设置
  通过属性面板进行编辑与设置
  在Dreamweaver的设计页面中,首先用鼠标点选拟修改的图片,然后下方的属性面板就会显示该图片的各类相关数据。可以通过修改这些数据来对图片进行编辑与设置。
  通过HTML标签进行编辑与设置

宁波网站设计:通过CSS设置文字的大小的图片274

  在Dreamweaver中,单击代码标签,将当前的工作页面切换至代码编写界面,然后通过对<img>标签进行属性配置,就能够实现不同的图像显示效果。
  图像高度--height
  通过height属性可以设置图片显示的高度,默认情况下,在改变高度的同时,其宽度也会等比例进行调整。
  语法:<imgsrc=11图像文件的地址”height=图像的高度>说明:在该语法中,图像的高度单位是像素。
  图像宽度--width

宁波网站设计:通过CSS设置文字的大小的图片263

  图像宽度的属性与图像高度类似,同样是用来调整图像大小的。
  语法:<imgsrc二“图像文件的地址”width=图像的宽度>说明:在该语法中,图像的宽度单位是像素。如果在使用属性的过程中,只设置了高度或宽度,则另外一个参数会等比例变化。

宁波网站设计:通过CSS设置文字的大小的图片267

  图像边框--border
  在默认情况下,页面中插人的图像是没有边框的,可以通过border属性为图像添加边框。
  语法:<imgsrc=“图像文件的地址”border=“图像边框的宽度”>说明:border的单位是像素。
  图像水平尚距——hspace
  图像与文字之间的水平胆离是可以通过hspace参数进行调整的。通过调整间距,可以使文字和图像的排版不那么拥挤,看上去更加协调。
  语法:<imgSrC=“图像文件的地址”hspace=“水平间距”>说明:水平间距心押⑶属性的单位是像素。
  图像垂直间距--vspace
  垂直间距参数vspace用来调整图像与文字的垂直距离。
  语法:<imgsrc=“图像文件的地址”vspace=“垂直间距11>说明:vspace属性的单位是像素。
  图像相对于文字基准线的对齐方式——align图像和文字之间的排列方式可以通过align参数来调整。图像的绝对对齐方式与相对文字的对齐方式不同,绝对对齐方式包括左对齐、右对齐和居中对齐3种,而相对文字对齐方式则是指图像与一行文字的相对位置。

宁波网站设计:通过CSS设置文字的大小的图片272

  语法:<imgsrc=”图像文件的地址“align=”相对文字的对齐方式“>7)图像的说明文字——alt兴図徬沿右奘哉511洳监毁卜时就全屁呆添他的诏昍j空而刖庙女図德7F赍子后,把鼠标停留在图像上方时也会显示提示文字,这一功能通过alt属性来实现3语法:
  在网页中插入背景图像
  在Dreamweaver中把一个漂亮的图片设置为页面背景是常用的设计技巧。对于一个新手来说,如何在DreamWeaverCS6中设置网站的背景图片呢?下面说明其设置步骤。
  打开DreamweaverCS6应用软件后,单击欢迎屏幕上”新建“项下的”HTML“。
  新建HTML页面后,单击菜单柱中的”文件“/”保存“命令,把新建的HTML页面保存好。
  保存好后,单击菜单栏中的”修改“命令,然后直接单击弹出菜单里的”页面属性“子菜单。
  打开”页面属性“对话框后,选择”外观“,然后单击”背景图像“后面的”浏览“,选择背景图片。
  在”选择图像源文件“对话框里,选择要设定的背景图片,然后单击”确定“按钮。
  设置背景图片后返回到”页面属性“对话框,此时可以看到”背景图像“处出现相应内容,单击”确定“按钮。
  背景图片添加成功。
  Dw文件3^(E?丝床ト耄―惨改格式命令站点index.html*x代码i.诉分r^ri买Bj视图或么标超课堂练习
  练习内容
  制作一个旅游景点网站D
  练习目标
  熟练掌握插入图片的方法。
  熟练掌握图片的各类属性的设置方法。
  具体要求
  新建一个站点,将其命名为”旅游景点“。

宁波网站设计:通过CSS设置文字的大小的图片270

  在站点中新建一个网页,作为首页。
  在首页中设置合适的背景图像。
  排列各景点的效果照片。
  使页面结构美观大方。
  网页中影音多媒体的应用
  本文转载自
  宁波网站设计www.leseo.net
  补充词条:宁波seo哪家好  宁波谷歌seo  宁波seo优化公司  宁波谷歌优化  宁波网站seo