页面属性
- 格式:ppt
- 大小:1.81 MB
- 文档页数:26
页面属性设置创建网页后,需首先对整修页面的属性进行设置,如外观、链接等。
外观主要是指网页中文本采用的字体、字号、颜色,网页背景的颜色,网页背景图像等。
下面我们讲解如何设置网页的外观。
选择修改菜单下的页面属性命令。
在弹出的页面属性对话框中即可进行页面属性的设置。
在外观栏大小下拉列表框中可以选择页面中文本字体的大小,这里选择12。
保持其后的下拉列表中的单位像素(pz)。
单击文本颜色按钮,打开颜色选择器。
使用滴管工具选择一种颜色作为文本的颜色,如蓝色(#0000FF)。
在背景颜色文本框中输入背景颜色,如“#FFFFFF”(白色)。
单击背景图像文本框后的浏览按钮。
弹出选择图像源文件对话框。
在查找范围下拉列表框中选择站点所在文件夹,在文件列表中双击放置图像的文件夹,如“pic”。
然后在文件列表中选择需要的图像,这里选择“pagebg.gif”图像。
在站点下可以先创建一个专门放置图像及动画素材的文件夹。
然后事先将需要的素材放在其中,再执行插入图像等操作时,就可以很好的避免浏览网页时不能显示图像的问题。
单击确定按钮完成背景图像的设置,返回到页面属性对话框中。
在左边距文本框中设置网页页面与浏览器左边界的距离。
一般设置为0。
在上边距文本框中设置网页页面与浏览器上边界的距离,一般设置为0。
单击确定按钮即可完成设置。
链接是指超级链接文本初始显示的颜色,当鼠标指向它时显示的颜色及单击它后显示的颜色等。
打开页面属性对话框后,选择其左侧的分类列表中链接选项。
切换至页面属性链接对话框。
单击加粗按钮可以将链接文本加粗显示。
在大小下拉列表框中选择9选项,在其后的下拉列表框中选择点数(pt)选项。
在链接颜色文本框中输入链接文本初始显示的颜色(#0000FF)在变换图像链接文本框中输入当鼠标指针位于时显示的颜色(#663399)。
在已访问链接文本框中输入当鼠标单击链接文本后显示的颜色(#FF0000)。
在活动链接文本框中输入当鼠标在链接文本上单击时显示的颜色(#9900FF)。
DW属性大全在Dreamweaver8的CSS样式里包含了W3C规范定义的所有CSS1的属性,DW8把这些属性分为Type(类型)、Background(背景)、Block(块)、Box(盒子)、Border(边框)、List(列表)、Positioning(定位)、Extensions(扩展)八个部分,如下图,下面我们分别详细讲解。
1、Type(类型)Type 面板主要是对文字的字体,大小,颜色,效果等基本样式进行设置。
设置时,我们只对要改变的属性进行设置,没有必要改变的属性就空着。
Font:设置字体系列。
什么叫字体系列呢?是指对文字设定几个字体,当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示。
相对应的CSS 属性是”font-family”。
注意: Dreamweaver8已经内置设定了6个系列的英文字体,一般英文字体我们用“Verdana, Arial, Helvetica, sans-serif”这个系列比较好看。
如果不用这些字体系列,你就需要自己编辑字体系列,你可以通过下拉框最下面的“Edit Font List”来创建新的字体系列,也可以直接手动在下拉框里写字体名,字体之间用逗号隔开。
中文网页默认字体是宋体,一般就空着不要选取任何字体。
Size:定义文字的大小。
你可以通过选取数字和度量单位来选择具体的字体大小,或者你也可以选择一个相对的字体大小。
最好使用 Pixels作为单位,这样不会在浏览器中文本变形。
一般小字体用比较标准的12px。
相对应的CSS属性是”font-size”。
注意:CSS 中长度的单位分绝对长度单位和相对长度单位,一般我们常用的绝对长度单位有:px:(象素)根据显示器的分辨率来确定长度。
pt:(字号)根据windows系统定义的字号大小来确定长度。
mm、cn、in:(毫米、厘米、英寸)根据显示的实际尺寸来确定长度。
此类单位不随显示器的分辨率改变而改变。
HTML网页设计(头部、主体属性设置)一、HTML文件的基本结构编写HTML文件的时候,必须遵循HTML的语法规则。
一个完整的HTML文件由标题、段落、列表、表格、单词的等嵌入的各种对象组成。
这些逻辑上统一的对象称为元素,HTML 使用标签来分割并描述这些元素。
实际上整个HTML文件就是由元素与标签组成的,HTML文档的组成包括定义文档内容的文本和定义文档结构及外观的标签。
HTML文档的结构很简单,是由最外层的<HTML>标签注销,里面是文档的头部和主体。
1.H TML 中的标签<html>标签<html>标签表示文档为HTML文档。
技术上,这个标签在<!doctype>标签之后显得多余,但对于不支持<!doctype>标签的旧式浏览器来说,这个标签是必要的。
它还能帮助人们阅读HTML代码,因此最好还是包括这个标签,以便其他工具尤其普通文字处理工具能够识别出文档是HTML文档。
<html>开始和结束标签的存在,可以保证用户不会无意中删掉文档的开始或者结束部分。
<head>标签<head>标签中包含文档的标题、文档使用的脚本、样式定义和文档名信息,并不是所有浏览器都要这个标签,但大多数浏览器都希望在<head>标签中找到关于文档的补充信息。
此外<head>标签还可以包含搜索工具和需哦因·索引程序需要的其他信息的标签。
<title>标签<title>标签是HTML 3.2和HTML 4规范所要求的,它包含文档的标题。
标题并不出现在浏览器的窗口中,而是显示在浏览器标题栏中。
在起始和结束标签之间,可以放置简述文档内容的标题。
<body>标签<body>标签放要在访问者浏览器中显示信息的所有标签和属性。
后面涉及的绝大多数内容都在<body>标签中。
第2章HTML5页面元素及属性《HTML5+CSS3网站设计基础教程》(第2版)学习目地/Target掌握结构元素地使用,可以使页面分区更明确理解分组元素地使用,能够建立简单地标题组。
掌握页面交互元素地使用,能够实现简单地交互效果。
理解文本层次语义元素,能够在页面突出所标记地文本内容。
掌握全局属性地应用,能够使页面元素实现相应地操作。
章节概述/SummaryHTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。
本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。
/Contents01 02 03列表元素结构元素分组元素04页面交互元素/Contents05 06文本层次语义元素全局属性07阶段案例—制作电影影评网01列表元素章节概述HTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。
本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。
为了使网页更易读,经常将网页信息以列表地形式呈现,例如,淘宝商城首页地商品服务分类,排列有序,条理清晰,呈现为列表地形式。
为了满足网页排版地需求,HTML语言提供了3种常用地列表元素,分别为ul元素(无序列表),ol元素(有序列表)与dl元素(定义列表),本节将对这3种元素进行详细讲解。
1.ul元素l 了解无序列表地概念,能够说出无序列表地特点。
l 掌握无序列表地基本语法格式,能够在网页定义无序列表。
学习目地1.ul元素无序列表是网页最常用地列表,之所以称为"无序列表",是因为其各个列表项之间没有顺序级别之分,通常是并列地。
DW属性大全在Dreamweaver8的CSS样式里包含了W3C规范定义的所有CSS1的属性,DW8把这些属性分为Type(类型)、Background(背景)、Block(块)、Box(盒子)、Border(边框)、List(列表)、Positioning(定位)、Extensions(扩展)八个部分,如下图,下面我们分别详细讲解。
1、Type(类型)Type 面板主要是对文字的字体,大小,颜色,效果等基本样式进行设置。
设置时,我们只对要改变的属性进行设置,没有必要改变的属性就空着。
Font:设置字体系列。
什么叫字体系列呢?是指对文字设定几个字体,当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示。
相对应的CSS 属性是”font-family”。
注意: Dreamweaver8已经内置设定了6个系列的英文字体,一般英文字体我们用“Verdana, Arial, Helvetica, sans-serif”这个系列比较好看。
如果不用这些字体系列,你就需要自己编辑字体系列,你可以通过下拉框最下面的“Edit Font List”来创建新的字体系列,也可以直接手动在下拉框里写字体名,字体之间用逗号隔开。
中文网页默认字体是宋体,一般就空着不要选取任何字体。
Size:定义文字的大小。
你可以通过选取数字和度量单位来选择具体的字体大小,或者你也可以选择一个相对的字体大小。
最好使用 Pixels作为单位,这样不会在浏览器中文本变形。
一般小字体用比较标准的12px。
相对应的CSS属性是”font-size”。
注意:CSS 中长度的单位分绝对长度单位和相对长度单位,一般我们常用的绝对长度单位有:px:(象素)根据显示器的分辨率来确定长度。
pt:(字号)根据windows系统定义的字号大小来确定长度。
mm、cn、in:(毫米、厘米、英寸)根据显示的实际尺寸来确定长度。
此类单位不随显示器的分辨率改变而改变。
⽹页的通⽤标签和属性2016年10⽉28⽇开学第⼀课,学习了⽹页制作,⽹页的基础知识(HTML:超⽂本标记语⾔)⽹页的分类:分为静态页⾯和动态页⾯;静态页⾯和动态页⾯在外观上是没有差别的;区别:静态页⾯不好修改,如果修改要修改原代码,不连接数据库。
动态页⾯好修改,直接从数据库连接出来。
做⼀个完善的⽹站需要:HTML--CSS--javascriptHTMl是做⽹站的基础,css是⽤来美化⽹页的,javascript是⽹页和浏览器的脚本语⾔,⽤来做⽹站特效的。
动态⽹页分:.C# ⽹页的后缀是.ASPX 说明使⽤C#做的动态页⾯;JSP 做java的动态页⾯后缀.jsp;php 做PHP的动态页⾯后缀.PHP。
在今天学习的HTML中知道了HTML的基础语⾔,在HTML最⼩的单元和核⼼的东西是标签,在<>⾥的内容是标签。
标签⼜分为单标签元素和双标签元素双标签的作⽤是⽤来作为内容的容器存在;两个相同名字的标签组成⼀个元素称为双元素;<>是开始标签,< />结束标签;然后可以在开始标签⾥⾯加⼀些属性,⽽属性是⽤来控制内容得格式是<标签名+空格+属性>;在开始标签和结束标签之间放要执⾏的内容;在标签中=左边放的是属性名=右边放属性值。
单标签是起控制性作⽤的;只有⼀个标签构成元素,单标签的表现格式<标签名+属性>,<标签名+属性/> < />< >尖括号⾥的斜杠有⽆都可;< />对于单标签来说既是开始标签⼜是结束标签。
还有注释语法:⽤来给代码作说明,<!--需要注释的⽂字--> 在程序中不执⾏,只给⼈看。
另⼀个⽅⾯学习了基础的标签:heml 是⽹页的开始与结束;head⽤来放⼀些控制性的内容,可⽤来控制⽹页的格式,⽹页的样式,产⽣特效;boby是主体标签在这⾥⾯放⼀些要显⽰出来的⽹页内容,content=text/heml代表⽹页是text/heml;charset=uft-8 这个是编码格式 charset是字符⼜有是编码格式=uft-8(值)国际编码格式uft-8,国内zbk ⼀般会默认为zbktitle⽤来设置⽹页的标题;写⽹页的标签规则:⼀定要先写开是标签,接着写结束标签,再写内容,最后写属性格式的属性;<boby的属性 bgcolcor="#(颜⾊)颜⾊代号">⽤来制作⽹页的背景颜⾊;颜⾊代号是16进制的,A表⽰10,B表⽰11,以此类推;text是⽤来修改⽹页中字体的颜⾊;background(背景图⽚)="这⾥是图⽚的路径"格式的控制类:font的属性:<font>⽂字</font>⽤来控制⽂字;face是⽤来设定⽂字的字体="字体";size可以⽤来调整⽂字的⼤⼩="+3";在FONT的color是⽤来控制⽂字的颜⾊="颜⾊"<b>⽂字</b>⽤来加粗⽂字;<i>⽂字</i>让⽂字变的倾斜;<u></u>给所写的⽂字加上下划线;如果让⼀段⽂字即加粗⼜倾斜可以⽤<i><b>需要加粗和倾斜的⽂字</b></i>控制格式:<br/>在每⾏代码结束的打上这个单元素代码可以让输⼊的⽂字实现分⾏的作⽤;在编写代码的时候⽆论敲多少个空格在浏览器显⽰的时候只显⽰⼀个空格,想要在浏览器中显⽰多个空格需要在代码中输⼊ 来代替空格,输⼊⼀次代表⼀个空格,<strong></strong>也具有加粗⽂字的作⽤;<em></em>也有让⽂字倾斜的作⽤;和代码<b><i>所不同的是⼜强调语⽓的作⽤;针对于搜索引擎,会最先注意带<strong><em>的代码,再就是内容的容器(通⽤的标签):在制作⽹页中<h1>--<h6>⽤来填写标题的,H1是最⼤号⽂字的标题H6是最⼩号⽂字的标题,这个可以⾃动⽂字加粗、⽂字⾃动换⾏;在标题中输⼊⼀些段落可以⽤<p></p>添加要输⼊的段落⽂字。
1、字体属性(type)font-family(使用什么字体)font-style(字体的样式,是否斜体):normal/italic/obliquefont-variant(字体大小写):normal/small-capsfont-weight(字体的粗细):normal/bold/bolder/lithterfont-size(字体的大小):absolute-size/relative-size/length/percentage2、颜色和背景属性(backgroud)color(定义前景色,例如:p{color:red})background-color(定义背景色)background-image(定义背景图片)background-repeat(背景图案重复方式):repeat-x/repeat-y/no-repeat background-attachment(设置滚动):scroll(滚动)/fixe(固定的) background-position(背景图案的初始位置):percentage/length/top/left/right/bottom3、文本属性:(block)定义间距:word-spacing(单词之间的距离)letter-spacing(字母之间的距离)text-decoration(定义文字的装饰):nore/underline/overline/line-through/blinkvertical-align(元素在垂直方向的位置):baseline(基线)/sub/super/top/text-top/middle/bottom/text-bottomtext-transform(使文本转换为其它方式):capitalize(大写)/uppercase(首字母大写)/lowercase(小写)/nonetext-align(文字的对齐):left/right/center/justifytext-indent(文本的首行缩进)length/percentageline-height(文本的行高):normal/numbet/lenggth/percentage(百分比)定义超链接:a:link {color:green;text-decoration:nore}(未访问过的状态)a:visited {color:ren;text-decoration:underline;16pt}(访问过的状态) a:hover {color:blue;text-decoration:underline;16pt}(鼠标激活的状态)4、块属性(block)边距属性:margin-top(设置顶边距)margin-right(设置右边距)margin-bottom(设置底边距)margin-left(设置左边距)填充距属性:padding-top设置顶端真充距)padding-right设置顶端真充距)padding-bottom设置顶端真充距)padding-left设置顶端真充距)5、边框属性(border)border-top-width(顶端边框宽度)border-right-width(右端边框宽度)border-bottom-width(底端边框宽度)border-left-width(d左边框宽度)border-width(一次定义边框宽度)border-color(设置边框颜色)border-style(设置边框样式)border-top(一次定义顶端各种属性)border-right(一次定义右端各种属性)border-bottom(一次定义底端各种属性)border-left(一次定义左端各种属性)图文混排:width(定义宽度属性)height(定义高度属性)float(文字环绕在一个元素的四周)clear(定义某一边是否有环绕)6、项目符号和编号(list)display(定义是否显示)white-space(怎样处理空白部分):normal/pre/nowraplist-style-type(在列表前加项目符号)disc(圆点)/circle(圈)/square(方形)/decimal(阿拉伯数字)/lower-roman(小写罗马数字)/upper-roman(大写罗马数字)/lower-alpha(小写英文字母)/upper-alpha(大写英文字母)/norelist-style-tyle(在列表前加图案):<url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style(一次性定义所有属性)7、定位(positioning)即层属性Type:设定对象的定位方式。
填空:1.网页可以分为(静态)网页和(动态)网页。
2.在Dreamweaver8中可以创建(本地站点),(远程站点)和(测试站点)3种站点。
3.Dreamweaver8的工作界面有(设计器)工作界面和(编码器)工作界面。
4.默认情况下,在界面中打开4个面板组,分别是(“应用程序”面板组)、(“文件”面板组)、(CSS面板组)和(“标签”面板组)。
5.在“页面属性”对话框中可以对5大类页面属性进行设置,分别是(外观)、(链接)、(标题)、(标题/编码)和(跟踪图像)。
6.常见的网页元素包括(文本)、(图片)和(多媒体)。
7.在输入文本是,可以按(Enter)键分段换行,按(Shift+Enter)键则不分段换行。
8.网页中最常见的图片格式有(GIF)、(JPEG)和(PNG)。
9.可以在两种视图下使用表格布局网页,分别是(布局)视图和(标准)视图。
10.设置表格宽度可以使用两种单位,分别是(像素)和(百分比)。
11.在网页的HTML代码中(<table>)标签标识表格、(<tr>)标签标识一行单元格、(<td>)标签标识一个单元格。
12.框架集由(<frameset>)标签标识,框架由(<frame>)标签标识。
13.在Dreamweaver 8中可以创建(预定义)框架集和(自定义)框架集。
14.框架集的边框有3个设置选项,分别是(边框)、(边框颜色)和(边框宽度)。
15.表单的提交方式有(默认)、(GET)和(POST)。
16.要使一组单选按钮是互斥的,必须(将同一组中的单选按钮的名字都设为相同的)。
17.按钮的“属性”面板提供了按钮的3种动作,分别是(提交表单)、(重设表单)和(无)。
18.层具有(可移动)、(可重叠)和(可隐藏)的特点。
19.层的可见性有4个选项,分别是(default)、(inherit)、(visible)和(hidden)。