




已阅读5页,还剩52页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
网页设计复习大纲第1章 网页设计概述1.网页的构成元素(1)文本:是网页的信息主体,能准确的表达信息的内容和含义。占用的空间小,传输速率高。(2)图像:占用的空间大,传输速率慢。如果使用恰当比文字更具有说服力,使网页更生动,更具表现力和吸引力。网页中常用的图象文件格式有:GIF、JPEG、PNG等。(3)动画:占用的空间比图像还大,但是“动”比“静”更具生命力,更能打动人心。一般网站广告都以动画形式显示。(4)超链接:是网页的灵魂,是网络超文本体系结构的经络。在网站内网页之间的跳转或网站之间的跳转等都是靠超链接实现的。(5)音频:音频是多媒体网页重要组成部分。网页中常用的声音文件格式有:MIDI、WAV、MP3等,可使用音频文件作为网页的背景音乐,但会影响网页的下载速度。(6)视频:在网页中用作视频交流或直播,使网页变得生动、真实。常用的视频文件格式有:RealPlayer、MPEG、AVI等。(7)表格:用来控制网页信息的布局方式。可以使用表格来精确控制各种网页元素在网页中的显示位置。(8)表单:可以实现浏览者与站点之间的交互。网页中的表单通常用来接收用户在客户端的输入,然后将这些信息发送到服务器端。表单有不同功能的表单域组成。(9)导航条:是一组超链接,用于在站点的首页及其他重要网页中进行跳转。一般情况下,导航条应放在网页的醒目位置。(10)其他特殊元素:如悬停按钮、Java特效、AxtiveX组件等,可增强网页功能,使网页更有趣。2.网站建设流程网站(Web Site)建设是个系统工程,其基本工作流程可分为5个阶段:(1)网站策划:是在制作网站前对网站进行周密的计划,明确制作网站的目的以及怎么做。其工作主要包括:确定网站的主题:网站的题材,即做一个什么类型的网站?确定网站的用户群:以人为本确定网站的配色方案:根据网站的整体风格来选定网站的配色。收集网站的素材和内容:广泛收集、尽量全面,内容相关确定网站栏目及网站目录结构:l 栏目划分要服从并体现网站主题:将准备好的“原材料”按一定方法分类,为其设立专门的栏目。规划网站栏目的过程实际上就是网站内容细化的过程,一个网站栏目有可能就是一个专栏网页。l 不要将所有文件都存放在根目录下,按栏目内容建立子目录。l 每个目录下都建立独立的Images目录:通常一个站点根目录下都默认有一个Images目录,用来存放站点中用到的图片。设计时应为每个主栏目建立一个独立的Images目录,以方便管理。l 文件的命名要合理:由于受Web服务器识别限制,目录文件在命名时要使用简短文件名,以英文形式为主,一律以小写形式处理。确定网页的版式设计与布局:即确定网页首页和其他页面的结构形式。(2)网页设计:是实际设计网站的工作,包括如下几个步骤手绘草图:按照创意和设想绘制出网站首页与子页的草图,也可以加入一些设计的风格。设计效果图:将网站风格、创意设计和网站内容整合在一起的过程,就是根据草图在图像处理软件Photoshop 或Fireworks 中进行图像编辑处理 (3)网页制作:是实际的网站构建过程,是将设计的结果呈现给用户。选择一个网页编辑软件如Dreamweaver或FrontPage等,制作前面规划的网页内容。如果需要,用PhotoShop、Flash、Fireworks等图形软件设计网页的背景、标题和动画等。(4)网站测试与发布:主要检测各个网页及组件能否正确运行,测试无误后,将自己的网站上传到指定的主机服务器上。(5)网站宣传与维护:采取注册搜索引擎、交换链接、发送邮件等方式进行网站宣传推广工作,并负起维护与更新的责任,以吸引更多的浏览者。3.HTML代码结构HTML标记是由用尖括号括起来的标记符号(也称标签)组成,即标签封闭在小于尖括号()内。带有斜杠(/)的标签用来创建封闭标签,表示该标记说明结束。大多数标记符必须成对使用,以表示作用的起始和结束。大多数Web页面都具有至少3种基本元素:根(通常是)、头部和主体。根元素包含Web页面的所有代码和内容,用于声明浏览器、任何浏览器应用程序以及期望在页面内包含什么类型的代码元素。元素存放用于执行至关重要的后台任务的代码,包括样式、连接及其他信息。元素存放所有的可见内容,如文本、表格、图像和影片等。说明:(1)和标记该文档为Web文档, Web文档的所有内容都位于这两个标记之间。(2)和中包含一些与Web有关的特定信息,如网页的标题、样式定义(如CSS)及脚本等。常用的有标题标记符和(定义网页的标题)。(3)和指定HTML文件的主体,文字、图形、图像、链接、动画、色彩和音效等元素都位于该标记符内。(4)以上标记符都必须成对出现。4.HTML文档创建的方法(1)直接在文字编辑软件中编写html代码,如记事本、写字版、Word等,存为纯文档格式,扩展名为*.htm或*.html。(2)利用网页制作工具如Dreamweaver或FrontPage等的所见即所得功能制作好网页,其html代码自动生成。这种方法对用户来讲较简单。还可以再对html代码进行修改,比较常用。第2章 XHTML和CSS基础1.XHTML文档的基本结构(1)文档类型声明Document Type的简写,用来说明页面所使用的XHTML的版本,只有确定了一个正确的文档类型,才能决定页面中可以使用哪些元素和属性,以及级联样式能否实现。在XHTML1.0中有3种文档类型定义声明DTD可以选择。 过度的DTD:transitional是一种要求不很严格的DTD,允许在页面中使用HTML4.01的标识,其写法如下:严格的DTD:strict是一种要求严格的DTD,不允许在页面中使用任何表现层的标识和属性,如等。其写法如下:框架的DTD:frameset是一种专门针对框架页面所使用的DTD,当页面中包含有框架元素时,就要采用这种DTD。其写法如下:(2)标签和名字空间其语法结构如下:文档内容部分。是XHML文档中必须使用的标签,所有的文档内容(包括文档头部内容和文档主体内容)都要包含在标签中,一个XHTML文档总是以开始,以结束,两者成对出现,缺一不可。名字空间是标签的一个属性,用xmlns表示,用来定义识别页面标签的网址,写在标签起始标签里面,其在页面中的代码如下:(3)网页头部标签标签是XHTML文档中必须使用的标签,其作用是定义页面头部的信息,一般来说,位于头部的内容都不会在网页上直接显示,而是通过其他方式起作用。其语法结构如下:头部内容部分在头部内容部分包含了以下标签:l 辅助信息标记,除了提供文档字符集、使用语言、作者等基本信息外,还涉及对关键词和网页等级的设定。其作用是指定了当前文档所使用的字符编码为utf-8。l 文档标题标记l 链接外部文件标记l 内部样式标记l 脚本标记(4)页面主体标签标签是用于定义页面所要显示的内容,可以包含所有页面元素。其语法结构如下:页面主体。标签是XHTML文件的主体标记,绝大多数XTHML内容都放置在该区域里面,通常它在标记之后,在标记前。一个完整的XHTML页面必须包含以上几个标签。2.标签的书写格式(1)封闭类型的标签XHTML语言中的大多数标签都是封闭类型的,封闭类型的标签成对出现,在对象内容的前面以标签开始,后面在标签名称的前面加反斜杠结束,表示一个完整标签,结束对对象的控制,其表现形式如下:标签内容(2)非封闭的标签在非封闭类型的标签中,采用在“标签名称”之后添加英文空格和“/”的格式来结束标签,标签中不能包含内容,其表现形式如下:3.标签的属性属性是包含在标签之中,用来定义标签的各种显示效果和触发相应行为的部分,其语法结构如下:标签内容4.XHTML语法规范(1)区分大小写:XHTML对大小写是敏感的,使用相同字母大写和小写定义的元素是不同的。因此,规定所有标签的元素和属性的名字都必须使用小写;(2)正确嵌套所有标签:当标签进行嵌套时,必须按照打开标签的顺序进行关闭。(3)标签必须要封闭:所有页面标签都要有相应的结束标签。封闭标签成对出现,而非封闭标签也要有其结束标签。独立的标签的结束方法是在标签的右尖括号前加入一个“/”来结束标签,如果标签中还有属性,则“/”出现在所有属性的后面。(4)属性值必须加上双引号:包括数值。 (5)明确所有属性的值:每个属性必须有一个值,没有值的属性必须用自己的名称作为值。(6)特殊字符要用编码表示。 (7)推荐使用级联样式表控制外观,实现页面的结构和表现相分离。(8)使用页面注释:,以使文档结构更加清晰。二、CSS基础5.CSS的基本语法(1)CSS基本概念:CSS是Casading Style Sheets的缩写,译为层叠样式表,简称样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。(2)CSS基本语法:CSS样式规则由选择器和声明组成,基本语法表示如下:选择器属性:属性值 或选择器属性1:属性值1;属性2:属性值2;选择器:标识已经设置格式元素的术语。声明或声明块:定义样式属性,由两部分组成,即属性和属性值,用冒号“ :”隔开,属性与属性之间用英文分号“ ;”隔开。6.选择器类型(1)标签选择器:HTML中的所有标签都可以作为标签选择符,可对HTML标签重新定义。一个完整的HTML页面是由很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式。(2)类选择器:能够把相同的元素分类定义成不同的样式,对XHTML标签均可使用class=“ ”形式对类进行名称指派,定义类选择器时,在自定义类的名称前面要加上一个“ . ”号。(3)ID选择器:ID选择器可对页面内的特定元素定义单独的样式。定义ID选择器时,要在ID名称前加上磅标记“#”符号。对于一个网页而言,其中的每一个标签均可以使用id=“”的形式对ID属性进行名称的指派。(4)复合内容:两个或多个基本选择器,通过不同方式连接而成的选择器。7.使用CSS样式表控制页面元素CSS样式可以以多种方式灵活地应用到HTML页面中,选择方式根据对设计的不同要求来制定。(1)行内样式表:是所有样式中最为直接的一种,直接对HTML的标签使用style属性,然后将CSS代码直接写在其中,格式如下:内容文字1内容文字2(2)内部样式表:内部样式表与行内样式表的相似之处在于,它也是将CSS样式编写在页面之中,不同的是,所有CSS的代码部分被集中在了同一个区域,即将CSS写在与之间,并且用和标签进行声明,位于与标签之间的部分就是CSS内部样式表。(3)外部样式表:外部样式表是使用频率最高、应用最好的一种形式,它将CSS样式代码单独编写在一个独立文件之中,该文件扩展名为.css,由网页进行调用,多个网页可以调用同一个样式文件,使得网站的整体风格保持了统一,也实现了页面框架HTML代码与美工CSS代码的完全分离。与之间使用标签,也可以将link指定为stylesheet样式表方式,并使用href=”style.css”指明外部样式表文件的路径,这样只需要将样式表单独编写在style.css文件中,便可以使该页面应用在style.css中所定义的样式了。ref:是Relations的缩写,指关联到一个stylesheet(样式表单)type=text/css:告诉浏览器,这段标签内包含的内容是css或text。(4)导入样式表:在内部样式表的中导入一个外部样式表,导入时用import。其中import url(“style.css”);表示导入style.css样式表,并使用url(“style.css”)指明外部样式表文件的多路径。实质上该样式表相当于存在于内部样式表中。8设置CSS属性(1)认识【CSS样式】面板:使用【CSS样式表】面板,可以创建、查看和管理样式以及将样式应用到文档。选择【窗口】【CSS样式】命令或按Shift+F11快捷键,即可打开【CSS样式】面板。l 【全部】按钮:单击该按钮,可在面板中显示应用到当前文档的所有CSS规则,不管这些规则是在外部样式表中,还是在自身文档中。单击style样式,该样式中所定义的所有属性和值将显示在下面的属性窗格中。如果没有展开样式标签类别,可单击加号展开。l 【当前】按钮:可在面板中查看与当前所选内容相关联的样式属性。l 【显示类别视图】:在面板下面将显示所有可以定义的类别。l 【显示列表视图】:在面板下面将显示所有可以定义的样式列表。l 【只显示设置属性】:在面板中只显示当前设置的样式属性。l 【附加样式表】:打开【连接外部样式表】对话框,从中选择要连接或导入到当前文档中的外部样式表。l 【新建CSS规则】:打开【新建CSS规则】对话框,选择要创建的样式类型。l 【编辑样式】:打开【CSS规则定义】对话框,编辑当前的文档或外部样式表中的任何样式。l 【禁用/启用CSS属性】:可禁用或重新启用CSS属性,禁用CSS属性只会添加指定属性的注释,而不会实际删除该属性。l 【删除CSS样式/属性】:删除【CSS样式】面板中所选的CSS样式或属性,并删除应用了该样式的网页元素的格式设置。(2)创建新的CSS规则:在【CSS样式】面板中,单击【新建CSS规则】图标,打开【新建CSS规则】对话框。(3)设置CSS样式类型:选择【CSS规则定义】对话框中的【类型】,可以定义文本的基本属性。l font-family:用于设置当前样式所使用的字体;l font-size:用于定义文本字体的大小;l font-style:样式;l line-height:用于设置文本所在行的行高;l text-decoration:用于定义是否向文本添加修饰;l font-weight:对字体应用特定或相对的粗体量;l font-variant:用于设置文本的小型大写字母变量;l text-transform:用于指定文本中单词的大小写属性;l color:用于设置文本的颜色。(4)设置CSS样式背景:选择【CSS规则定义】对话框中的【背景】,可以设置网页元素的背景颜色或图像。l background-color:用于设置元素的背景颜色;l background-image:用于设置元素的背景图像;l background-repeat:确定是否及如何重复背景图像;l background-attachment:附件,用于设置背景图像是固定在原始位置,还是随内容一起滚动;l background-position(x)和background-position(y):用于指定背景图像相对于元素的初始位置。(6)设置CSS样式区块:选择【CSS规则定义】对话框中的【区块】,可以定义段落的间距和对齐属性。l word-spacing:用于设置单词间距;l letter-spacing:用于设置字母或字符的间距;l vertical-align:指定元素的垂直对齐方式;l text-align:用于设置元素中的文本对齐方式;l text-indent:用于指定第一行文本缩进的程度;l white-space:确定如何处理元素中的空白;l display:用于设置是否显示元素以及如何显示。(7)设置CSS样式方框:选择【CSS规则定义】对话框中的【方框】,可以定义方框的宽、高、浮动方式、填充和边界等。l width和height:用于设置元素的宽度、高度;l float:用于设置其他元素在哪个边缘围绕该元素浮动;l clear:清除,定义不允许出现层的边;l padding:填充,用于指定元素内容与元素边框之间的间距;l margin:边距,用于指定一个元素的边框与另一个元素之间的间距。(8)设置CSS样式边框:选择【CSS规则定义】对话框中的【边框】,可以定义元素周围边框的属性。l style:用于设置边框的样式外观;l width:用于设置元素边框的粗细;l color:用于设置边框的颜色。(9)设置CSS样式列表:选择【CSS规则定义】对话框中的【列表】,可以为列表标签定义列表设置。l list-style-type:类型,用于设置项目符号或编号的外观;l list-style-image:可以为项目符号指定自定义图像;l list-style-position:用于设置列表项文本是否换行和缩进以及文本是否换行到左边距(内部)。(10)设置CSS样式定位:选择【CSS规则定义】对话框中的【定位】,使用“层”首选参数定义层的默认标签,将标签或所选文本更改为新层。l position:类型,确定浏览器如何定位层;l width和height:指定元素的宽度和高度;l visibility:确定层的初始显示状态;l z-index:z轴,确定层的堆叠顺序,编号较高的层显示在编号较低的层的上面;l overflow:溢出,确定当层的内容超出其大小范围时如何处理;l placement:定位,指定层的位置和大小;l clip:剪辑,定义层的可见部分。(11)设置CSS样式扩展:选择【CSS规则定义】对话框中的【扩展】,可以设置过滤器、分页和光标等选项。l 分页:设置打印页面期间在样式所控制的对象page-break-before(之前)或page-break-after(之后);l 视觉效果:cursor:鼠标指针位于样式所控制的对象上时改变指正图像;filter:设置对样式所控制的对象应用特殊效果。9.管理CSS样式表(1)查看CSS样式:在【CSS样式】面板中,用户可以方便地看到应用于具体元素的CSS样式,从而能够轻松地确定在何处定义了属性。(2)编辑CSS样式:在【CSS样式】面板中,选择要编辑的CSS样式规则,然后单击面板右下角的【编辑样式】按钮,打开【CSS规则定义】对话框,进行编辑。(3)禁用或启用CSS属性:该功能可从【CSS样式】面板中注释掉部分CSS属性,而不必至直接在代码中做出更改,注释掉部分CSS后,即可看到特定属性和值在页面上的效果。操作方法:选择要禁用的属性,然后单击面板地步的【禁用/启用CSS属性】按钮。(4)删除与复制CSS样式:打开【CSS样式】面板,在【所有规则】窗格中选择要删除的CSS样式,或者在属性窗格中选择某个属性,然后单击面板右下角的【删除CSS样式/属性】按钮,或者直接按Delete键,即可删除所选CSS样式或属性。第3章 Dreamweaver CS5快速入门1.定义Dreamweaver CS5站点(1)站点的定义及类型: 也称网站,是一系列通过超链接而相互联系的网页集合,这些网页都具有一些共性,例如风格、布局、表现主题等。站点根据其存储位置可分为两种:本地站点:放置在本地磁盘上的站点,对于网页制作者来说,就是在制作网站过程中存放所有文件和资源(图像、声音等)的总文件夹;远程站点:是本地站点的复制,存放在可以连接网络并提供广大网民浏览的远程服务器上。(2)站点规划原则:站点是由文档和文档所在的文件夹组成,利用不同的文件夹,将不同内容的网页分门别类地保存起来,是设计网站的前提。l 将站点内容进行分类,然后把相关内容放在同一个文件夹中,以便对站点资源进行管理,文件夹的层次最好不要超过3层。如:D:mywebl 在对文件或文件夹命名时需注意:最好使用英文或汉语拼音作为文件或文件夹的名字;命名应有一定规律,不要使用过长的名称,尽量使用意义明确的名称。如Photo、works、iamgesl 合理分配各种类型的文件,对文件进行分类存放。(3)创建站点:在本地计算机某盘根目录下建立一个总的网站文件夹和总文件夹中的图像文件夹。选择【站点】【新建站点】命令,打开【站点设置对象】对话框。l 【站点名称】:设置站点名称,可以是中文或英文,此处输入“myweb”l 【本地站点文件夹】:设置本地磁盘中用来存储站点文件的总文件夹,单击文本框右侧“浏览”打开“选择根文件夹”对话框,导航到myweb文件夹。l 单击【高级设置】,设置各项参数: 【默认图像文件夹】文本框:用于输入本地站点的默认图像文件夹路径。 【链接相对于】单选按钮组:在站点中创建指向其他资源或页面的链接时,指定Dreamweaver创建的链接类型。 【Web URL】文本框:输入Web远程站点的URL。 【区分大小写的链接检查】复选框:在Dreamweaver中检查链接时,将检查链接的大小写与文件名的大小写是否匹配。 【启用缓存】:指定是否创建本地缓存以提高链接和站点管理任务的速度。(4)管理站点:选择【站点】【管理站点】命令,打开【管理站点】对话框。l 编辑站点:单击编辑按钮,可对选中站点进行重新设置。l 删除站点:单击删除按钮,可删除选中站点。l 注:此操作实际上只删除了Dreamweaver同本地站点之间的关系,并没有删除保存在本地计算机上的站点内容,用户可以重新创建指向其位置的信站点。l 复制站点:单击复制按钮,可将选中站点进行复制。l 导出站点:单击导出按钮,在导出站点对话框中设置导出位置,导出站点的扩展名为.ste。l 导入站点:单击导入按钮,在打开的对话框中选择扩展名为.ste的文件,单击确定按钮即可。(5)编辑站点内容站点建立后,Dreamweaver右侧的“文件”面板中会显示出该站点名称及其站点文件。如果“文件”面板没有打开,则可选择【窗口】|【文件】命令或按F8键,打开【文件】面板,它是Deamweaver CS组织和编辑站点的控制中心,在该面板中包含了许多重要功能。l 【文件】面板菜单:提供操作站点的全部功能。l 站点下拉列表:列出本地计算机的磁盘分区及所有存在的站点名称,可以提供站点的选择与切换功能。l 视图方式列表:列出【站点列表框】显示的四种视图方式。R 本地视图:显示在本地计算机中存储的网站文件。R 远程视图:显示在远程服务器中存储的网站文件。R 测试服务器:显示在测试服务器条件下存储的网站文件。R 地图视图:以站点地图的形式显示存储的网站文件。l 工具栏:提供7个快捷工具按钮。在【文件】下拉列表中选择要编辑的站点,打开此站点。l 创建文件夹:在【文件】面板的本地站点文件列表中,右击准备创建子文件夹的父文件夹,从快捷菜单中选择【新建文件夹】命令。文件夹反映网站结构,很多情况下文件夹代表网站的子栏目,每个文件夹对应一个子栏目。l 创建文件:在【文件】面板的本地站点文件列表中,右击准备创建文件的文件夹,从快捷菜单中选择【新建文件】命令。为网页文件命名时,应注意要带后缀“.htm”,网站中所有用到的文件、文件夹、多媒体、图像等内容的命名都应该以英文开头,后跟英文或数字。l 移动和复制文件或文件夹:命令法、鼠标拖动法、快捷键。l 重命名文件或文件夹:命令法、鼠标单击两次、快捷键。l 删除文件或文件夹:选中要删除的文件或文件夹,按Delete键。此操作会从磁盘上真正删除相应的文件或文件夹。l 编辑文件:双击要编辑的文件名即可。2.新建网页制作网页的第一步是从新建文件开始的。(1)选择【文件】【新建】命令或按Ctrl+N快捷键,打开【新建文档】对话框。(2)【新建文档】对话框共有5个类别,分别为【空白页】,【空模板】,【模板中的页】,【示例中的页】和【其他】,可直接创建一个空白的HTML网页文档或通过模板创建有格式的网页。从【页面类型】列表框中选择要创建的页面类型,【布局】列表框显示了CS5提供的16种预设CSS布局样式,从中选择1列固定,居中,标题和脚注,右侧预览区域会显示网页的基本布局,表示一个居中列,宽度以像素表示,带有标题和脚注。(3)在预览区域下方的【文档类型】下拉列表框中选择文档类型。(4)如果在【布局】列表框中选择CSS布局,则从【布局CSS位置】下拉列表框中为布局CSS选择一个位置。(5)保留其他选项的默认设置,单击“创建”按钮创建一个新页面,该页面分为3个部分,标题,正文和脚注,标识了一种布局样式,不同的部分都有一些预先设定的文字或图片,我们将这些称为占位符,在后续网页制作过程中,可以对其进行替换。这种预设的布局是通过各种的CSS规则定义实现的。打开“CSS样式”面,单击“全部”按钮,可查看当前页面上所应用的所有的CSS规则。(6)选择【文件】【保存】或按Ctrl+S组合键,打开“另存为”对话框,导航到站点文件夹,输入文档名称,单击“保存”按钮。在编辑网页的过程中,一般每510分钟需要保存一次,以防止因为停电或死机等意外而丢失文件。3.设置页面属性选择【修改】【页面属性】命令或按Ctrl+J快捷键,打开【页面属性】对话框,用于设置当前正在编辑的网页文档的整体属性。Dreamweaver CS5将页面属性设置分为5个类别。(1)【外观(CSS)】:采用CSS格式设置页面的一些基本属性。l 【页面字体】:指定在Web页面中使用的默认字体系列l 【大小】:指定Web页面中使用的默认字体大小l 【文本颜色】:指定显示字体时使用的默认颜色l 【背景颜色】:设置页面的背景颜色l 【背景图像】:设置页面背景图像l 【重复】:设置背景图像的重复方式,no-repeat(仅显示背景图像一次)、repeat(横向和纵向重复图像)、repeat-x/repteat-y(可横向/纵向重复图像)l 上下左右【边距】:设置页面元素同页面边缘的间距。(2)【外观(HTML)】:导致页面采用HTML格式l 【背景图像】/【背景】:用于设置页面的背景图像与背景色l 【文本】:显示字体时使用的默认颜色l 【链接】:应用于链接文本的颜色l 【已访问链接】:应用于已访问链接的颜色l 【活动链接】:当鼠标或指针在链接上单击时应用的颜色l 【左边距】/ 【上边距】 :指定页面左边距和上边距的大小l 【边距宽度】/【边距高度】:页面边距的宽度和高度。(3)【链接(CSS)】:用于设置CSS链接属性l 【链接字体】:指定链接文本使用的默认字体系列l 【大小】:指定链接文本使用的默认字体大小l 【链接颜色】:应用于链接文本的颜色l 【变换图像链接】:当鼠标或指针位于链接上时应用的颜色l 【已访问链接】 :访问过的链接的颜色l 【活动链接】:当鼠标或指针在链接上单击时应用的颜色l 【下划线样式】:指定用于链接的下划线样式(4)【标题(CSS)】:用于设置CSS内容标题属性l 【标题字体】:指定标题使用的默认字体系列l 【标题1】【标题6】:指定最多6个级别的标题标签使用的字体大小和颜色(5)【标题/编码】:用于指定制作Web页面时所使用的文档编码类型以及要用于该编码类型的Unicode方式。l 【标题】:在文档窗口和浏览器窗口的标题栏中出现的页面标题l 【文档类型(DTD)】:指定一种文档类型定义l 【编码】:文档中字符所用的编码l 【Unicode标准化表单】:仅在选择UTF-8作为文档编码时才启用(6)【跟踪图像】:可依照已经设计好的布局快速建立网页。l 【跟踪图像】:指定在复制设计时作为参考的图像l 【透明度】:确定跟踪图像的不透明度第4章 处理文本1.在网页中输入文本(1)直接输入法:在网页编辑窗口中直接用键盘输入文本。(2)复制法:使用Dreamweaver的文本复制功能,将其他应用程序生成的文本复制粘贴到网页编辑窗口来进行排版工作。2.输入文本时的注意事项(1)文本的编码方式:根据用户语言的不同,选择不同的文本编码方式,错误的文本编码方式将使中文字体显示为乱码,具体步骤如下:单击【属性】面板上的“页面属性”按钮,打开“页面属性”对话框,在左侧的“分类”列表中选择“标题/编码”选项,在“编码”下拉列表中可以选择页面的编码格式。在Dreamweaver CS5中新建的HTML页面,默认的页面编码格式为UTF-8,是一种被广泛应用的编码,致力于把全球的语言纳入一个统一的编码。如果是简体中文页面,还可以选择GB2312编码格式。(2)文本的分段与分行:分段:按下Enter键,标示段落结束。上一段与下一段会自动空出一行来分隔,不同的段落可以具有不同的样式。段落标记为与。强行分行,即插入换行符:按下Shift+Enter键,使文本落到下一行去,在这种情况下,被分行的文本任然在同一段落中,中间也不会留出空行。分割的两部分同属一段,具有相同的段落样式。换行标记为。3.插入特殊文本对象(1)插入特殊字符特殊字符指相对于传统或常用的符号,使用频率较少字符且难以直接输入的符号,比如数学符号;单位符号;制表符等。在HTML编码中,特殊字符的编码是以“&”开头和“;”结尾的特定数字或英文字母组成,被称为实体,其插入步骤为:将光标移至需要插入特殊字符的位置;在“插入”面板中选择“文本”选项,在“文本”选项卡中单击“字符”按钮中的三角符号;在弹出的菜单中选择需要插入的特殊字符;单击“其他字符”菜单项,在弹出的“插入其他字符”对话框中可以选择更多的特殊字符。(2)插入列表列表是一种非常实用的信息排列方式,它以条列式的模式来显示信息,使页面中的内容结构更加清晰,能够使读者一目了然。列表分为无序列表和有序列表。选中段落文本后,单击“属性”面板中的“项目列表”按钮,即可插入无序列表,打开代码视图,查看代码,与无序列表相关的标记有:与标记:父元素,用于开始和结束无序列表,其属性type用于设置项目符号的外观与标记:用于开始和结束一个列表项list item。选中段落文本后,单击“属性”面板中的“编号列表”按钮,即可插入有序列表:与标记:父元素,用于开始和结束有序列表,其属性type用于设置项目编号的外观与标记:用于开始和结束一个列表项list item。除了在代码视图中对列表的属性设置外,还可打开列表属性对话框对其进行设置。其方法是:列表属性设置:在设计视图中选中已有列表的其中一项,执行【格式】|【列表】|【属性】命令,弹出“列表属性”对话框,在该对话框中可对列表进行更深入的设置。l 【列表类型】:提供了“项目列表”、“编号列表”、“目录列表”和“菜单列表”4个选项,可以改变选中类表的列表类型,其中,“目录列表”和“菜单列表”类型只在较低版本的浏览器中起作用,在目前能用的高版本浏览器中已失去效果,如果在“列表类型”下拉列表中选择“项目列表”选项,则列表类型被转换为无序列表,此时“列表属性”对话框上除“列表类型”下拉列表框外,只有“样式”和“新建样式”下拉列表框可用。若选择“编号列表”,列表类型被转换为有序列表,此时对话框中的所有下拉列表框均可以使用。l 【样式】:根据列表类型,选择用于设置列表里每行开头的列表标志或编辑符号,若列表类型为项目列表,则“样式”下拉列表框中有3个选项:默认(圆点)、项目符号(圆点)、正方形。默认的列表标志就是项目符号,也就是圆点。也就是默认和项目符号都将设置列表标志为项目符号。若列表类型为编号列表,样式有6个选项,分别为:默认、数字、小写罗马字体、大写罗马字体、小写字母和大写字母,用来设置编号里每行开头的编辑符号。l 【开始计数】:设置编号列表的效果,在该选项后的文本框中输入一个数字,指定编号列表从几开始。l 【新建样式】:选择一个列表样式,则在该页面中创建列表时,将自动套用该样式,而不会使用默认列表样式l 【重设计数】:该页面中创建的编号列表中,将从设置的数开始有序排列列表(3)插入日期将光标移至需要插入日期的位置,单击“插入”面板中的“日期”按钮,弹出“插入日期”对话框,通过设置,插入日期,并使网页每次保存时,都能自动更新日期。【星期格式】:用于设置星期的格式,有7个选项,选择其中一个选项,则星期的格式会按照所选选项的格式插入到网页中,因为星期格式对中文的支持不是很好,一般都选择“不要星期”选项。【日期格式】:设置日期的格式,共有12个选项,选择其中一个,则日期的格式会按照所选选项的格式插入页面中。【时间格式】:设置时间的格式,有3个选项【存储时自动更新】:选中,每次网页保存时,自动更新为最新的日期。(4)插入水平线水平线可以起到分隔文本或元素的作用,在页面中,可以使用一条或多条水平线分隔文本或元素。将光标移至需要插入水平线的位置,单击“插入”面板中的“水平线”按钮,即可在页面中插入水平线。【水平线】:设置该水平线的ID值【宽】、【高】:设置水平线的宽度和高度【对齐】:水平线的对齐方式【阴影】:默认勾选,即为该水平线添加阴影效果【类】:可以选择已经定义的CSS样式为水平线应用(5)插入注释:单击“插入”面板中的“注释”按钮,打开“注释”对话框,输入注释文本,即可在页面中插入相关说明注释语句,打开代码视图,查看注释使用的标记。注释语句不会显示在浏览器中,有助于对源代码的整理。执行【编辑】|【首选参数】命令,打开“首选参数”对话框,在左侧的“分类”列表中选择“不可见元素”选项,切换到“不可见元素”窗口,勾选“注释”选项,并确认在“可视化助理”按钮的弹出菜单中的“不可见元素”选项为选中状态,在页面中便可以看见黄色的注释记号,选中该记号,在“属性”面板中可以查看并编辑注释内容。4.设置文本属性(1)HTML属性:选中需要设置属性的文字“疯狂体验之旅”,在“属性”面板上单击“HTML”按钮,切换到文字HTML属性设置面板中。格式:用于设置网页中内容标题的样式,从“标题1”到“标题6”分别表示各级标题,对应字体由大到小,同时文本全部加粗,使用和标记,n:16。在代码视图中,使用“标题1”是,文字两端应用标记;手动删除这些标记,文字样式随即消失。ID:为选中的文字设置ID值类:选择已经定义的CSS样式应用于被选中文本“粗体”和“斜体”按钮:设置加粗或斜体显示文本“文本格式控制”按钮:用于设置列表样式、“文本凸出”(设置当前段落文字向外扩展,即向左侧凸出一级)、“文本缩进”(设置当前段落文字向内缩进,即可向右侧缩进一级)。链接:为被选中的文本建立超练级目标:用于设置超链窗口打开方式。(2)CSS:单击“属性”面板上的CSS按钮,可以切换到文本CSS属性设置面板中,该面板主要包括:应用CSS样式:“目标规则”下拉列表时从“CSS样式”面板中脱离出来的,加入到“属性”面板中,是对CSS样式应用的一种快捷操作,在“目标规则”下拉列表中可以选择已经定义好的CSS样式。单击“编辑规则”按钮,即可对所选的CSS样式进行编辑设置,如果在下拉列表中选择是选项,单击“编辑规则”按钮,则打开“新建CSS规则”对话框,可以创建新的CSS规则。若当前环境中“CSS样式”面板没有打开,可在属性面板中单击“CSS面板”,即可在工作界面中显示出“CSS样式”面板。字体:给文本设置字体组合,选择“默认字体”,则在网页浏览时,文本字体显示为浏览器默认的字体;Dreamweaver CS5提供选择的字体组合有14种,若使用这14之外的字体,必须编辑新的字体组合:在“字体”下拉列表中选择“编辑字体列表”选项,打开“编辑字体列表”对话框,进行编辑。大小:设置字体大小文本颜色:设置文本颜色文本对齐方式:“左对齐”、“居中对齐”、“右对齐”和“两端对齐”粗体和斜体:设置加粗或斜体显示文本5.CSS设计文本样式(1)字体:在CSS中,字体通过font-family属性控制。下面是该属性的典型语句:p font-family:宋体,Arial,sans-serif;整句代码告诉浏览器首先在浏览者的计算机中寻找宋体,如果没有宋体,则继续寻找Arial字体,如果也没有Arial字体,则再寻找sans-serif字体。如果font-family在声明的所有字体都没有,则使用浏览器默认字体显示。(2)字号在CSS中,字体大小是通过font-size属性控制的,该属性的取值可以使用长度值,也可以使用百分比值。其百分比值是相对于父元素的大小来计算的。网页中的字体大小直接关系到阅读效果,页面容量以及美观程度,作为正文文本,有一个很好的经验值:11磅大小的文字最适合网页正文显示,而很多综合性网站使用9磅大小的文字,是因为页面中需要安排的文字内容较多。(3)颜色:在CSS中,用font-size属性控制。(4)字体粗细:在设计网页时,可以充分运用字体的粗细来体现网页中要表达的情感,粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,适合服装、化妆品、食品等行业的内容。在CSS中,用font-weight属性控制。其取值范围为:l normal:正常粗细l bold:粗体l bolder:特粗体l lighter:特细体l number:不是真正的取值,其范围100900,一般情况下都是整百的数字(5)斜体:斜体文字多用于注释、说明、日期或其他信息。在CSS中,用font-style属性控制。其取值范围为:l normal:正常默认字体l italic:表示以斜体显示文字l oblique:处于中间状体,属于偏斜体(6)下划线、上划线和删除线:在CSS中,用font-decoration属性控制。其取值范围为:l none:默认值l underline:对文字添加下划线l overline:对文字添加上划线l line-through:对文字添加删除线l blink:闪烁文字效果(8)英文字母大小写:在CSS中,用font-transform属性控制。其取值范围为:l none:默认值l capitalize:单词首字母大写l uppercase:全部大写l lowercase:全部小写6.CSS设计文本段落格式文本的段落样式用于定义整段文本的特性,在CSS中,段落样式主要包括行高、水平对齐、文本缩进、字间距等。(1)行高:用于设置文本所在行的高度,在CSS中,用line-height属性控制。行高值可以为长度、倍数和百分比。行距的变化会对文本的可读性产生很大影响,一般情况下,接近字号的行距设置比较适合正文,行距的常规比为10:12,即字号10点,行距12点。(2)水平对齐方式:控制网页中段落文字的对齐方式,在CSS中,用text-align属性控制。l left:左对齐l center:居中对齐l right:右对齐l justify:两端对齐在网页中,文本的对齐方式一般采用左对齐,标题或导航有时也采用居中对齐方式。(3)首行缩进:在HTML中,只能控制段落的整体向右或向左缩进,如果不进行设置,浏览器则默认为不缩进,在CSS中,使用text-indent属性,可以控制段落的首行缩进以及缩进的距离,缩进量必须是长度值或百分比。(4)字间距:在CSS中,由letter-spacing属性控制,其值可以为默认选项normal,正常的间隔,也可以使用长度值进行设置。(5)首字下沉:在CSS中,可用float属性设置,用于控制对象的浮动布局方式。p span color:#F60; font-weigh:bold; font-size:60px; float:left;
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 人美版四年级下册14.艳丽的大公鸡教案
- 管理评审会议记录
- 2024四川发展数字金沙科技有限公司招聘2人笔试参考题库附带答案详解
- 六年级数学下册 二 圆柱与圆锥(圆柱的体积)教学设计 西师大版
- 2024启明信息校园招聘丨令人心动笔试参考题库附带答案详解
- 七年级英语下册 Module 6 Around town Unit 2 The London Eye is on your right第4课时教学设计 (新版)外研版
- 初中英语人教新目标 (Go for it) 版八年级下册Section B教案及反思
- 人教版道德与法治七年级上册5.1《让友谊之树常青》教学设计
- 车间级岗前教育培训
- 人教版信息技术八年级下册教学设计:第七课 度量与计算(二、简单计算)
- 【素养目标】人教版数学八年级下册19.1.2.2 函数的表示方法教案
- 绿色建筑工程监理实施细则
- 中职数学基础模块下册8-1随机事件教案
- 汽车行业系列深度五:复刻手机高端之路 华为赋能智电未来
- 美观而安全的衣衫-包装设计 课件-2023-2024学年高中美术人美版(2019)选择性必修4 设计
- 垃圾填埋场运营合同范本
- CJT 289-2008 城镇污水处理厂污泥处置 制砖用泥质
- 湖南省常德市2023-2024学年八年级下学期期末考试历史试题(无答案)
- 挖掘铲运和桩工机械司机(技师)考试复习题库(含答案)
- 篮球智慧树知到期末考试答案章节答案2024年浙江大学
- 《归去来兮辞(并序)》课件
评论
0/150
提交评论