网页的基本功能 - 主页index - 主页是一个网站的核心

发布时间:2018-06-30 16:58:01   来源:文档文库   
字号:

网页基本属性,要素,步骤,工具属性面板,视图,结构,标记符,标题,水平线

网页的基本功能 主页index 主页是一个网站的核心,进入一个网站后,首先引入眼帘的是该网站主页。主页的上部是含有该校中,英文名称的LOGO图片,网页的底部是版权区,在LOGO图片的下面,版权区的上面有两行横向导航菜单,包括概括设置资料等,每个子菜单都进行了超链接,浏览者可以根据需要浏览相应的内容,主页的中间部分是校内新闻,提供给浏览者一些最新新闻浏览者可以随意浏览任一条

网页的基本要素1文字(标题,字号,字型)2表格:具有容量大,结构严谨或效果直观等优点,表格还可以控制信息的布局方式。3图形:一般使用JPEG,GIF 4链接标志:有文字图像2 5交互功能6声音和视频

网页制作工具:一种是利用网页制作工具进行制作,例:frontpage,dreamweaver

另一种采用HTML超文本标识语言的专用格式来进行编制。

网页制作的基本步骤1网站定位,定位要小内容要精,网站题材,名称要正,易记,有特色。2整体规划:也就是组织网站的内容和设计其结构。收集整理资料,准备素材,内容规划整体规划中3常用结构类型:(1)层状结构,类似与目录系统的树型结构,很强层次性(2)线性结构,类似数据结构中的线性表,用在意义是平行的页面上(3WEB结构,类似Internet的组成结构,各网页之间形成网状链接,允许用户随意浏览。3网页的设计与制作,先静态后添加动态效果4测试网页:功能性测试和完整性测试5网页上传发布,服务器可以是远程或本地但必须支持ASP 6网站宣传推广 7网站的反馈与评价 8更新与维护

建立目录结构建议:1不要将所有文件都存放在根目录下,会造成文件管理混乱,很难搞清哪些文件需要编辑和更新,哪些无用,哪些想关联,影响工作效率。上传速度慢,文件量越大等待时间也越长。所以尽可能减少根目录文件存放数。2 在每个主栏目目录下都建立独立的images目录,最方便于管理,而根目录下的images目录只用来存放首页和一些次要栏目的图片。3 按栏目内容建立子目录。按主菜单的栏目建立子目录,一些关联性强不需要经常更新的栏目可以合并放在一个统一的目录下。4 目录的层次不要太深。建议不超过3层,维护管理方便。5不要使用过长的目录 6 不要使用中文目录。

DW界面。属性面板:要显示或隐藏属性面板,应单击窗口属性或者直接按CURL+F3,用户对属性进行的修改多数会立即在文档窗口中应用,但有些属性在修改完以后可能需要在属性编辑文本框之外的地方单击一下或者按TAB键转到其他属性后才能应用。

Dreamweaver的视图:单击工具栏上的视图切换按钮( ),即显示设计视图,使用工具栏中的按钮( )即可很方便的切换到代码视图,以便查看当前编辑网页的HTML源代码,如果需要同时查看代码视图和设计视图可以单击工具栏上的显示代码( )和设计按钮( )此时将同时在窗口中显示代码视图和设计视图

标记符又称标签,HTML是影响网页内容显示格式的标记符集合,浏览器根据标记符决定网页的实际显示效果

HTML标记符不区分大小写,但通常使用大写字母HTML文件被分为首部HEAD和体部BODY两大部分

四种标记符意义1HTML标记符:处于文档的最前端,表示文档的开始即浏览器从开始

位于文件的最后一行表示这一整份的文档都是HTML语法的文档。

2HEAD标记符,HTML文件头标记符,用来描述首部的内容说明文档的整体信息。

3TITLE标记符指的是份文档的标题,标题所在的位置虽然依照浏览器的不同而不同但大部分都位于浏览器的最上方。设计网页标题栏时不可以设计字体。

4BODY标记符:定义出一个HTML文档的体部。位于首部下面

标题处理:在HTML中,用户可以通过HN标记符来标识文档中的标题和副标题,其中N1-6的数字《H1>表示最大的标题,

表示最小的标题,使用标题样式时必须使用结束标记符

强制换段标记符:2个,1强制换段标记符:文字

P>标记不但能使后面的文字换到下一行还可以使两

端之间多一空行。由于一段的结束意味着新一段的开始,所以使用《P》也可省略结束标记符。一个强制标记符

p》可以看作是两个强制换行标记符《BR> 2设置段落标记符

对齐方式”>文字

其中属性align 用来设置段落的对齐方式,可以为left,centerright分别表示居左居右居中默认方式为LEFT

水平线:在页面中插入一条水平标尺线可以使不同功能的文字分隔开,看起来整齐明了。

水平标记符格式


对齐方式”size=”横线粗细”width=”横线长度”clolr=”横线颜色”noshade>

颜色 文字 页面属性 空格 表格构成 背景图像 超链接 路径 表格形式

十六种标准颜色:黑色BLACK #000000 蓝色BLUE#000FF 绿色GREEN#00ff000 红色red#FF0000

白色white #FFFFFF

文本格式文字设置FONT标记符设置文字样式,他是HTML的一个标记,具有3个常用的属性

1 SIZE属性:字号属性,控制文字的大小,取值即可是绝对值又可是相对值,

2 FACE属性。是字体标记符用来指定字体样式 3COLOR属性

设置页面属性1页面背景属性:在标记符中使用bgcolor属性可以为网页设置背景颜色

2设置背景图像:使用BODY标记符的background属性即可

特殊字符:输入空格的三种方法1按住CTRL+SHIIFT按一次空格键,键入半个空格

2将输入法由半角状态切换到全角状态,按一次空格键键入一个空格

3将编辑窗口切换到代码模式,在输入空格的地方输入代码δnbsp,输入一组δnbsp代码产生半个空格

表格的基本构成1 TABLE标记符:用于定义整个表格,表格内的所有内容都应该位于

HE
之间

2 CAPTION:如果表格需要标题,那么就应该使用CAPTION标记符将表格标题包括在,《/caption》之间。

3 TR标记符用于定义表格的行,对于每一个表格行都对应一个TR标记符。TR标记符的结束标记符可以省略

4 TDTH:一个TD表示有一列,用于标记表格的内容,其中包括文字图像或其他对象,TD表示普通表格数据,TH表示表格的行列标题数据,都可以省略,并可以不包括任何内容

插入图像,图像属性参数,热点区域的形状:可以为图像设置长方形,圆形,多边形热点

设置背景图像:(1选择“修改”“页面属性”命令,打开“页面属性”对话框(2单击“背景图像”右边的浏览按钮,打开“选定图像源文件”对话框(3选择一副图像后,单击确认按钮,所选择的图像作为网页背景图像。

网页中的超链接3种类型:1内部链接:即在同一个站点内的不同页面之间联系的超链接。(2)锚点链接:可以链接

到网页中某个特定位置的链接。(3)外部链接:把网页和INTERNET中的目标相联系的链接。如果按照使用对象的

不同,网页中链接又可分为文本超链接,图像超链接,E-MALL链接,锚点链接。多问题文件链接。空链接等。

文档路径类型及含意:在创建链接前,必须了解相对路径和绝对路径间的差异以及如何指定不同类型的路径。

1绝对路径:是包含服务器协议(对于网页来说通常是HTTP://FTP://)的完全路径,绝对路径包含的是精确地址而不用考虑源文件的位置。但如果目标文件被移动,则链接无效。创建外部超链接时必须使用绝对路径。

2》和根目录相对的路径:是从当前站点的根目录开始的路径。站点上所有可公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以告诉服务器从根目录开始。 3和文档相对的路径:是指和当前文档所在的文件夹相对的路径。这种路径通常是最简单的路径,可以用来链接和当前文档处于同以文件夹下的文档。

目标表示所链接的目标文件在浏览器中打开的方式,在下拉列表框中有4个选项

1—BLANK(空白窗口):在另一个新的窗口中显示链接的内容,这样可以保留现有的窗口文档内容。

2—PARENT(父窗口):在上一层的框架集中显示连接的内容,该选项只有在框架集中还包含另一个框架集的情况下才能产生效果。

3—SELF(当前窗口)在本身所在的框架中显示连接的内容,这样会覆盖当前框架中的所有内容,该目标是默认值。4—TOP(最高):在整个浏览器窗口中显示链接的内容,这样会覆盖当前框架中的所有内容。

其中-PARENT,--SELF,--TOP只有在使用框架页面时才有效,如果该页面无框架,则显示效果不变。

利用HTML创建超链接:1页面链接。 2锚记链接:如果要设置锚记超链接,首先应为页面中需要跳转到的位置命名。命名时应使用A标记符的NAME属性,在标记符之间可以包含内容,也可不包含内容。例可以在页面开始处用以下HTML语句进行标记:目录标记锚记,对页面进行标记后即可用A标记符设置指向这些标记位置的超链接,如果在页面开始处标记了“top”则可以使用以下HTML语句进行链接:返回目录用于链接。 3 电子邮件链接,如果将href属性的取值指定为‘mailto:电子邮件地址’,那么可以获得电子邮件链接的效果。代码:作者邮箱

创建空白表单前表格的形式:将光标置于文本后,按回车键,单击插入表单面板上的图标,此时将在网页中出现一个红色虚线围成的矩形边框,该红色边框即为空白表单的边框,在窗口的左下方出现一个FORM字样,同时属性面板变成表单的属性

文本框属性,框架网页,图层表格转换,轨迹运动播放,CSS, Selector,

设置文本框属性1文本框名称。2字符宽度。3类型:指文本框的类型,包含3选项。1单行,2多行,

3密码:选择此选项得到INOUT标记,其TYPE属性设置为PASSWARD.CHAR WIDTHMAX CHARS设置的映射与单行文本域相同,当用户在密码文本域中输入密码时,输入内容被显示为“*

保存框架网页输入文件名后单击保存按钮,接着出现第三个,第四个“保存为”对话框,分别保存左侧框架和右

底部框架,整个框架组就保存完毕了,如果有N个框架则必须保存N+1次,那么她的网页文件格式为N+1

认识图层,三个特征:可重叠性,透明,任意定位。 图层又称层,是DW里最有价值的对象之一,曾可以包含文本,图像,表单,插件,甚至层内还可以包含其他层,即在HTML文档的正文部分可以放置的元素都可以放入层内。由于层可以放置在网页的任何位置,从而能有效地控制网页中的对象,所以是经常用到的对象,它可重叠放置,制作出层叠效果,也可控制层的显示或隐藏,实现交互技术,配合时间轴的使用还可同时一个或多个层,出现动态效果。

层属性面板层编号,左,宽,Z轴,背景图像 !!上,高,显示,背景颜色!!标签,溢出,剪辑,左右上下

1 其中显示用于控制层的初始显示状态,有四个选项:default表示默认值,不指定层的可见性属性

inherit表示继承父图层的可见性属性 visible表示不考虑父图层的值,显示指定层的内容

hidden表示不考虑父图层的值,隐藏指定层的内容,图层可见不可见:层为眼睛时可见,闭眼时不可见

2(如果想使层的左和下面出现滚动条需设置属性层OVERFLOW=SCROLL

如何将图层转换为表格:步骤:先用图层来制作一个页面,在选择“修改转换---层到表格”命令,弹出转换层为表格对话框,根据需要对以上各项进行设置,设置完毕单击“确定”按钮,即可把页面中的所有图层转换为表格。

注意1隐藏的图层不能转换为表格。2重叠的炒年糕不允许转换为表格,因为表格的单元格是不能重叠的。3在模板文档或已应用模板的文档中,不能将层转换为表格或将表格转化为层,即应该在非模板文档中创建布局,然后将该文档另存为模板之前进行转换

将表格转换为图层:步骤选择需要转换的表格,执行“修改转换表格到层”命令,弹出“转换表格为层”对话框,在对话框中选择所需要的选项,单击确定,文档中的表格转换为层,但空表格单元不转换,表格之外的内容也被置于图层中。注意:如果文档应用了模板或模板文档,则不能把表格转为图层。如果确实需要转换,可在存为模板之前先进行转换。1,可以在一个表格的单元格当中输入层。2 当鼠标移动文字链接时,显示一个隐藏层(这个动作的触发事件是oermouseover

设计一个网页使图片随着任意轨迹运动,要求自动运行并循环播放,写出主要步骤:1 新建网页并保存,在网页中入层,并将层移动到动画起始位置。 2 在图层中插入一副图片。 3选定该层,选择“修改”菜单下的“时间轴”然后录制层路径,在页面上按住层的选择手柄,拖动层,随意画出一个路径,使图片在运动时沿始路径运动。4选择“时间轴”窗口中,“自动播放“和“循环”复选框。

CSS简介:Cascading style sheet,层叠样式表)CSS侧重于网页的继承性和效果的表现。CSS不是一种程序设计语言,只是一种用于网页排版的标识行语言,是对现有html语言功能的补充和扩展。主要功能是通过对HTML选择器进行设定来实现对网页中的字体,字号,颜色,背景,及其他元素的控制,使网页能完全按照设计者要求显示。

几种常见的Selector选择符8: 1HTML标记符Selector是最典型的Selector类型,网页设计者可以为某个或某些具体的HTML元素应用样式定义。2具有上下文关系的HTML标记符Selector:如果需要为位于某个标记符内的标记符设置特定的样式规则,则应用此标记符。3用户定义的类Selector:注意:类的名称可以是任意英文单词或英文字母(开头)和数字的组合。4用户定义的ID selector5 包含selector6样式表的层叠性selector 7虚类selector 所谓不同类型的超链接,是指访问过的(Avisited),未访问过的(A:link),激活的(A:active)以及鼠标指针悬停于其上的(A:hover)4种状态的超链接。 8注释selector,与HTML注释一样,CSS注释也以“/*”开头,以“*/”结尾

在网页中使用CSS三种常用方式(插入形式):将样式定义直接嵌入到标记符中(内联式),将样式定义嵌入到网页中(嵌入式),将样式定义包含在外部CSS样式文件中。(外部式)

CSS属性,字体属性:字体属性用于控制网页中文本字符的显示方式,字体属性包括:字体族科(FONT—FAMILY,字体风格(FONT—STYLE,字体变形(FONT—VARIANT,字体加粗(font—weight),字体大小(font-size5

另外还有文本属性,颜色与背景属性,布局属性,定位和显示属性,鼠标样式属性,列表样式属性,CSS滤镜(CSS的一种扩充,只用几句代码就可以把类似于PS中滤镜效果添加到图片,文本等HTML元素上)

模板和库,可编辑区域,库项目,插入音乐,Java script,动态网页

模板和库,相同,不同1模板和库有相同作用:都可批量设置网页(包括CSS

2模板主要作用:在外观相同而内容不同的网页中库主要运动在多个页面的相同部分

3 在应用了模板的网页文档中,不可以直接修改模板文件。在应用库的网页文档中,也不可直接修改库文件。

创建模板,保存模板:1DW中打开网页2选择“文件”“另存为模板”命令,或单击插入“模板”面板上的创建模板按钮,打开“另存模板” 3在站点下拉列表框中选择站点名称,在另存为中输入模板名称,如果选择“现存的模板”列表中的模板,则可以用新的模板覆盖已有模板 4单击保存,吧当前页面保存为模板,系统将自动在站点根目录下创建templates文件夹,并将创建的模板文件保存在该文件夹中,扩展名为.DWT,

可编辑区域的类型:可编辑,选择,重复区域

定义可编辑区域:模板创建完成后,要为模板定义可编辑区域,没有定义可编辑区域的模板是不能被使用的,因为他的所有部分都是锁定的。“可编辑区域”是指基于模板的页面中可以更改的内容,而基于模板的页面中不可更改的部分为“不可编辑区域”或“锁定区域”。应用了模板的网页中可可编辑区域可以在网页编辑状态被使用者编辑。

注意:1将已有内容转换为可编辑区时,必须选择成对的标签,例如常用的《table》《/table》,,《td> .

2,可以将整个表格或单个单元格定义为可编辑区域,但不能将多个单元格定义为一个可编辑区域。

3层和层内容是两个独立的元素,定义层为可编辑区域时,可以更改层的位置及其位内容,而定义层的内容为可编辑区域时,只能更改层的内容而不能更改层的位置。若要选择层的内容可以在该层内选择“编辑”---“全选”命令,若要选择该层,首先确保显示了不可见元素,然后单击代表层位置的图标。

创建库项目可以将文档body部分中的任意元素创建成库项目,这些元素包括文本,表格,表单,Java applets,插件,activeX元素,导航条和图像.也可以创建空白的库项目.CSS样式表文件不可以做为库文件。每个库项目都在站点本地根文件夹的“库”文件夹中保存为一个单独的文件(扩展名为.lbi,通常保存在本地站点的library(通用)文件夹下。

网页插入背景音乐的办法1打开DW新建并保存 2选择BODY标签,在行为面板中选择播放声音,单击浏览设置声音文件路径。3DW中选中插入的声音文件,打开参数窗口,设置参数中相应的播放参数,然后保存文件并预览。

什么是Java scriptJava scriptNetscape公司推出的跨平台,基于对象的脚本语言,用于客户端与服务器端的应用程序。是最通用的语言。Java scriptsJAVA在命名,结构和语言上都很相似但Java是一种比Java script复杂得多的语言,而Java script是一种脚本语言

Java script事件驱动有哪些Java script事件驱动中的事件是通过鼠标或热键的动作引发的,主要包括以下几种事件:1单击事件onCLICK 2改变事件onChange 3选中事件onSelect. 4聚焦事件onFocus

5失去焦点事件onBlur 6鼠标移动事件onMouseOver 7载入文件onLoad 8卸载文件onUnload

Java script定义:是一种基于对象和事件驱动并具有安全性能的脚本语言,他与HTML,CSS结合被人成为DHML

Java script具有以下基本特点1脚本编写语言。采用小程序段的方式实现编程,不需要编译,而是在程序运行过长中逐行的解释,方便用户的使用操作。2基于对象:他是一种基于对象的语言,但一般不看作是一种面向对象的语言,能自己创建或运用脚本环境内建对象3简单性:舍弃了复杂特性,而且语法要求不很严格方便书写。4安全性:不允许方位本地硬盘,不能将数据存入服务器,不允许修改,删除网络文档,从而有效防止数据丢失5动态性:是动态的,可直接对用户做出响应无须经过WEB服务程序。6 跨平台:依赖于浏览器,与操作系统无关。只要浏览器支持即可争取我执行.

在网页中使用Java script的三种方法:1 使用SCRIPT标记符插入脚本,方法是:吧脚本标记符,置于网页上的HEAD部分,或BODY部分,然后在其中加入脚本程序。尽管可以在网页中多个位置使用SCRIPT标记符。但最好还是将脚本代码放在HEAD部分,以确保容易维护。 2直接添加脚本 3 链接脚本文件

Java script的内部对象1 string对象,用来存放字符串,是静态对象。2date对象。3math对象

什么是动态网页“Dynamic HTML”称为动态网页或DHTML,它可以方便地在浏览器中实现动态更新网页的内容、格式及动画 Dreamweaver主要为我们提供了三种与动态网页相关的元素,它们分别是:图层、时间轴和行为

本文来源:https://www.2haoxitong.net/k/doc/f66037c408a1284ac85043be.html

《网页的基本功能 - 主页index - 主页是一个网站的核心.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档

文档为doc格式