资源描述
,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,LOGO,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,LOGO,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,LOGO,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,LOGO,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,LOGO,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,LOGO,*,单击此处编辑母版标题样式,网页设计与制作,第一章 网页与网站的基础知识,网页设计是一门综合技术，在制作网页之前应该了解网页的基础知识，同时还应掌握,Dreamweaver CS5.5,设计平台的工作界面结构以及各个部分所能完成的基本功能。,1.1,网页制作与网站建设基础,1.1.1,静态网页介绍,静态网页是标准的,HTML,文件，其文件的扩展名一般为,htm,、,html,、,shtml,、,xml,等。,静态网页工作原理图,1.1,网页制作与网站建设基础,1.1.1,静态网页介绍,静,态网页,的特点,静态网页每个网页都有一个固定的,URL,；,网页内容一经发布到网站服务器上，无论是否有用户访问，每,个静态网页的内容都是保存在网站服务器上的；,静态网页的内容相对稳定，容易被搜索引擎检索；,静态网页没有数据库的支持，在网站制作和维护方面工作量较,大；,静态网页的交互性较差，在功能方面有较大的限制；,静态网页页面浏览速度迅速，过程无需连接数据库。,1.1,网页制作与网站建设基础,1.1.2,动态网页介绍,动态网页是指跟静态网页相对的一种网页编程技术，是指网页文件里包含了程序代码，通过后台数据库与,Web,服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。,动,态网页工作原理图,1.1,网页制作与网站建设基础,1.1.2,动,态网页介绍,动,态网页,的特点,动态,Web,具有交互性，页面消息可以根据需求或用户的,浏览状况，实现与用户的交流和页面信息的自动更新。,动态,Web,具有,Web,数据库支持和远程动态维护功能。,动态,Web,的创建技术比较复杂，且对服务器的处理能力,要求也比较高。,动态,Web,一般使用数据库来存储信息，它担负着一个文,件服务器角色。,1.1,网页制作与网站建设基础,1.1.3,常见网站类型,1.,个人网站,个人网站是以个人名义开发创建的具有较强个性化的网站，一般是个人为了兴趣爱好或展开个人目的而创建的，具有较强的个性化特色，带有很明显的个人色彩，无论从内容、风格、样式上都形色各异。,1.1,网页制作与网站建设基础,1.1.3,常见网站类型,2.,企业类网站,企业网站，就是企业在互联网上进行网络建设和形象宣传的平台。,1.1,网页制作与网站建设基础,1.1.3,常见网站类型,3.,机构类网站,机构网站通常指机关、非营利性机构或相关社团组织建立的网站，网站的内容多以机构或社团的形象宣传和服务为主。,1.1,网页制作与网站建设基础,1.1.3,常见网站类型,4.,娱乐休闲类网站,随着互联网的飞速发展，不仅涌现出了很多个人网站和商业网站，同时也产生了很多娱乐休闲类网站,。,这些网站为广大网民提供了娱乐休闲的场所。,1.1,网页制作与网站建设基础,1.1.3,常见网站类型,5.,行业信息类网站,能够满足某一特定领域上网人群及其特定需要的网站叫做行业信息类网站。,1.1,网页制作与网站建设基础,1.1.3,常见网站类型,6.,购物类网站,随着网络的普及和人们生活水平的提高，网上购物已成为一种时尚，丰富多彩的网上资源，价格实惠的打折商品、服务优良送货上门的购物方式，其已成为人们休闲、购物两不误的首选方式。,1.1,网页制作与网站建设基础,1.1.3,常见网站类型,7.,门户类网站,门户类网站将无数信息整合、分类，为上网者打开方便之门，绝大多数网民通过门户类网站寻找自己感兴趣的信息资源。,1.2,网页布局设计与色彩搭配,1.2.1,网页版面布局的原则和方法,1.,网页版面布局的原则,（,1,）重点突出,（,2,）平衡协调,（,3,）图文并茂,（,4,）简洁清晰,1.2,网页布局设计与色彩搭配,1.2.1,网页版面布局的原则和方法,2.,网页版面布局的方法,（,1,）,手绘布局,（,2,）软件绘图布局,1.2,网页布局设计与色彩搭配,1.2.2,网页布局的结构形式,1.,传统“,T”,型布局,1.2,网页布局设计与色彩搭配,1.2.2,网页布局的结构形式,2.,上下对照式布局,1.2,网页布局设计与色彩搭配,1.2.2,网页布局的结构形式,3.“,上中下”“三”字布局,1.2,网页布局设计与色彩搭配,1.2.2,网页布局的结构形式,4.,左右对称型布局,1.2,网页布局设计与色彩搭配,1.2.2,网页布局的结构形式,5,“同”字型布局,1.2,网页布局设计与色彩搭配,1.2.2,网页布局的结构形式,6,“回”字型结构布局,1.2,网页布局设计与色彩搭配,1.2.2,网页布局的结构形式,7,“匡”字型结构布局,1.2,网页布局设计与色彩搭配,1.2.2,网页布局的结构形式,8.,自由式结构布局,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,1.,红色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,1.,红色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,2.,橙色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,2.,橙色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,3.,黄色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,3.,黄色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,4.,绿色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,4.,绿色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,5.,蓝色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,5.,蓝色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,6.,紫色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,6.,紫色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,7.,黑色与白色,1.2,网页布局设计与色彩搭配,1.2.3,网页配色基础,7.,黑色与白色,1.2,网页布局设计与色彩搭配,1.2.4,网站布局特点,1.,资讯类网站,1.2,网页布局设计与色彩搭配,1.2.4,网站布局特点,2.,电子商务类网站,1.2,网页布局设计与色彩搭配,1.2.4,网站布局特点,3.,互动游戏类网站,1.2,网页布局设计与色彩搭配,1.2.4,网站布局特点,4.,教育类网站,1.2,网页布局设计与色彩搭配,1.2.4,网站布局特点,5.,功能性网站,1.2,网页布局设计与色彩搭配,1.2.4,网站布局特点,6.,综合性网站,1.2,网页布局设计与色彩搭配,1.2.5,经典网页欣赏,1.2,网页布局设计与色彩搭配,1.2.5,经典网页欣赏,1.2,网页布局设计与色彩搭配,1.2.5,经典网页欣赏,1.2,网页布局设计与色彩搭配,1.2.5,经典网页欣赏,1.2,网页布局设计与色彩搭配,1.2.5,经典网页欣赏,1.2,网页布局设计与色彩搭配,1.2.5,经典网页欣赏,1.3 Dreamweaver,认知,1.3.1 Dreamweaver CS5.5,的新功能,1.CSS3/HTML5,支持,2.jQuery,集成,3.,借助,PhoneGap,构建本机,Android,和,IOS,应用程序,4.FTPS,、,FTPeS,支持,5.,移动,UI,构件,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,1.,标题栏,在,Adobe Dreamweaver CS5.5,的窗口标题栏上整合了网页制作中最常用的布局、,DW,扩展、站点管理器和设计器按钮，这些常用的命令按钮可以从菜单栏或者工具栏中找到与之相应的选项。,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,2.,菜单栏,Dreamweaver CS5.5,的主菜单共分,10,种，即文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助,。,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,3.,插入工具栏,在“设计器”布局模式下，,Dreamweaver CS5.5,将原先的插入栏默认呈现为插入面板形式。该面板包含成行的对象图标，用于创建和插入网页元素,。,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,4.,文档工具栏,文档工具栏包含一系列按钮，主要用于切换编辑区视图模式、设置网页标题、在浏览器中浏览网页以及检查浏览器兼容性等。,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,5.,文档窗口,文档窗口用来显示当前所创建和编辑的,HTML,文档内容。该窗口有代码、拆分和设计,3,种视图模式。,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,5.,文档窗口,文档窗口用来显示当前所创建和编辑的,HTML,文档内容。该窗口有代码、拆分和设计,3,种视图模式。,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,5.,文档窗口,文档窗口用来显示当前所创建和编辑的,HTML,文档内容。该窗口有代码、拆分和设计,3,种视图模式。,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,6.,标签选择器,标签选择器位于文档窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结构。,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,7.,属性面板,通过属性面板可以检查和编辑当前选定的页面对象的属性。,1.3 Dreamweaver,认知,1.3.2 Dreamweaver CS5.5,的工作界面,8.,浮动面板组,Dreamweaver CS5.5,通过一套面板和面板组系统来轻松处理不同的复杂界面。,1.4 HTML,基础,1.4.1 HTML,基本标记,1.,2.,3.,4.,1.4 HTML,基础,1.4.2,格式标记,1.,2.,3.,4.,、,、,5.,1.4 HTML,基础,1.4.3,文本标记,1.,2.,3.,、,、,4.,、,、,、,5.,1.4 HTML,基础,1.4.4,图像标记,1.,2.,1.4 HTML,基础,1.4.5,表格标记,1.,2.,、,3.,1.4 HTML,基础,1.4.6,链接标记,1.,2.,小结,本章从网页的基础知识入手，根据不同网站的特点，从颜色、布局结构等方面进行了一一阐述，同时全面展示和介绍了,DreamweaverCS5.5,的工作界面及其功能含义以及后台,HTML,代码的核心标记。,Thank You!,网页设计与制作,第二章 站点的搭建与管理,本章通过介绍,Dreamweaver CS5.5,站点创建、站点管理、创建页面、页面属性设置等知识点，让读者对使用,Dreamweaver CS5.5,进行网页设计时有一个基本的了解。,2.1,创建本地站点,2.1.1,规划站点,站点中通常包含各种不同类型的文件。,规划站点主要包括规划站点的栏目结构和资源结构。,规划站点时需要注意：站点文件夹下（包括站点文件夹）的所有子文件夹或文件在命名时需要遵循以下原则：见名识意；采用英文字母或数字命名，不要用汉字。,2.1,创建本地站点,2.1.2,创建站点,1.,启动,Dreamweaver CS5.5,程序，单击菜单“站点”中的“管理站点”命令，弹出“管理站点”对话框。,2.1,创建本地站点,2.1.2,创建站点,2.,单击“新建”按钮，弹出“站点设置对象”对话框，在“站点名称”文本框中输入要起的站点名称，在“本地站点文件夹”文本框中输入已建好的本地站点文件夹的正确路径名称。,2.1,创建本地站点,2.1.2,创建站点,3.,站点的名称和存储的文件夹设置好之后，可以对站点的,“,服务器”类别进行设置，用户指定远程服务器和测试服务器。,2.1,创建本地站点,2.1.2,创建站点,4.,设置“版本控制”选项，用户可以设置使用,Subversion,获取和存回文件。,2.1,创建本地站点,2.1.2,创建站点,5.,单击“高级设置”选项卡，包含“本地信息”、“遮盖”、“设计备注”、“文件视图列”、“,Contribute,”、模板和“,Spry,”选项。,2.1,创建本地站点,2.1.2,创建站点,6.,返回“管理站点”对话框。此时新建的站点出现在对话框中。,2.1,创建本地站点,2.1.2,创建站点,7.,新建的站点出现在“文件”面板上,。,2.2,管理本地站点,2.2.1,编辑站点,1.,打开本地站点,2.2,管理本地站点,2.2.1,编辑站点,2.,编辑站点,2.2,管理本地站点,2.2.2,复制站点,启动,Dreamweaver CS5.5,程序，在菜单栏中，单击“站点”中的“管理站点”命令，在“管理站点”对话框中，单击“复制”按钮，就会在列表中出现复制站点,。,2.2,管理本地站点,2.2.3,删除站点,如果不再需要利用,Dreamweaver,对某个本地站点进行操作，则可以将其从站点列表中删除。,2.2,管理本地站点,2.2.4,创建文件夹和文件,打开创建好的站点，在窗口右边的“文件”面板中，使用鼠标右键单击，准备创建文件夹和文件，在弹出快捷菜单中，选择“新建文件夹”选项，即可完成创建文件夹的操作,。,2.2,管理本地站点,2.2.4,创建文件夹和文件,在“文件”面板中，使用鼠标右键单击，在弹出快捷菜单中，选择“新建文件”选项，即可完成创建文件的操作。,2.2,管理本地站点,2.2.5,文件夹和文件的复制、删除或重命名,在“文件”面板中，用鼠标右键单击需要编辑的对象，在弹出的快捷菜单中选择“编辑”命令，在子菜单中选择“剪切”、“拷贝”、“删除”、“复制”或“重命名”命令即可。,2.2,管理本地站点,2.2.6,编辑站点文件,要编辑站点文件，可以双击“文件”面板上的该文件图标，如果是,HTML,文档就会载入,Dreamweaver,的“文档”窗口，编辑后保存文档，本地站点文件就会得到更新。如果是其他类型的文件，双击后会启动相应外部编辑器，然后可在其中进行编辑。,2.3,网页的基本操作,2.3.1,新建网页,1.,如果,Dreamweaver CS5.5,运行后显示起始页，则在起始页中直接选择“新建,HTML,文档”。,2.3,网页的基本操作,2.3.1,新建网页,2.,如果,Dreamweaver CS5.5,已运行后不显示起始页，则在“文件”菜单选择“新建”命令，打开“新建文档”对话框。在“页面类型”列表框中选择“,HTML,”选项，即创建了一个新的文档。,2.3,网页的基本操作,2.3.2,保存网页,1.,新建一个文件后，选择菜单“文件”中的“保存”命令，将打开“另存为”对话框,。,2.,在文档窗口中，也可以直接按,Ctrl+S,组合键，打开“另存为”对话框进行网页文件的保存。,2.3,网页的基本操作,2.3.3,打开与关闭网页,1.,启动,Dreamweaver CS5.5,程序，在起始页面中显示了最近编辑过的文件，点击目标文件，即可打开。,2.3,网页的基本操作,2.3.3,打开与关闭网页,2.,选择“文件”菜单中“打开”命令，出现“打开”对话框。在“查找范围”下拉列表框中选定要打开文档所在的位置，在“文件名”文本框中输入要打开的文件名或直接在上方的列表框中选中要打开的文件，单击“打开”按钮即可完成文档的打开。,2.3,网页的基本操作,2.3.3,打开与关闭网页,3.,在文档窗口中，也可以直接按,Ctrl+O,组合键，出现“打开”对话框。,4.,通过“文件”面板打开文档。在“文件”面板中找到相应的文档，双击即可打开。,2.3,网页的基本操作,2.3.3,打开与关闭网页,5.,选择“文件”菜单中“退出”命令，或者单击,Dreamweaver CS5.5,窗口右上角上的“关闭”按钮，即可关闭网页，退出,Dreamweaver CS5.5,程序。,2.3,网页的基本操作,2.3.4,页面属性的设置,在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。在编辑窗口下选择“修改”菜单中的“页面属性”，或在工作区单击鼠标右键，在快捷菜单中选择“页面属性”，打开“页面属性”对话框。,2.3,网页的基本操作,2.3.4,页面属性的设置,“页面属性”对话框中的各选项含义,：,1.,外观,(CSS),：在该选项中可以设置页面的一些基本属性，并且将设置的页面相关属性自动生成为,CSS,样式表写在页面头部,。,2.3,网页的基本操作,2.3.4,页面属性的设置,“页面属性”对话框中的各选项含义,：,2.,外观,(HTML),：该选项的设置与外观,(CSS),的设置基本相同，唯一的区别是外观,(HTML),设置的页面属性将会自动在页面主体标签,中添加相应的属性设置代码，而不会自动生成,CSS,样式。,2.3,网页的基本操作,2.3.4,页面属性的设置,“页面属性”对话框中的各选项含义,：,3.,链接,(CSS),：在该选项中可以设置一些与页面的链接效果有关的设置，在设置完成后，同样会将设置的页面相关属性自动生成为,CSS,样式表写在页面头部,。,2.3,网页的基本操作,2.3.4,页面属性的设置,“页面属性”对话框中的各选项含义,：,4.,标题,(CSS),：在该选项中可以设置标题字体等属性,。,2.3,网页的基本操作,2.3.4,页面属性的设置,“页面属性”对话框中的各选项含义,：,5.,标题,/,编码：“标题”显示在浏览器的标题栏和状态栏中，当网页被收藏时，标题显示在收藏夹中。“编码”用来设置当前网页字体采用的编码种类。中国大陆地区一般默认编码为简体中文,GB2312,。,2.3,网页的基本操作,2.3.4,页面属性的设置,“页面属性”对话框中的各选项含义,：,6.,跟踪图像：进行网页制作时插入用作参考的图像文件，如网页效果图等,。,小结,本章重点介绍了利用,Dreamweaver CS5.5,进行站点、页面等的创建和管理流程，为下一步网页制作打下良好的基础。,Thank You!,网页设计与制作,第三章 网页中的基本元素,通常情况下，构成网页的元素有文本、图像、多媒体等，这些基本元素可以通过表格的方式布局到网页上。网页的各构成要素在网页中担当着各自的角色，共同保证信息的有效传达，是网页发挥整体作用不可缺少的部分。,3.1,文本及其常用格式设置,3.1.1,复制和粘贴文本,1.,在文件面板中，找到要插入的文本所在的文件，在,Dreamweaver,中打开。,2.,选择要复制的内容，在网页中进行粘贴。,提示：建议事先准备好文字素材，这样有利于团队合作，能够做到分工明确。,3.1,文本及其常用格式设置,3.1.2,分段和换行,段落标签,换行标签,分段直接按,键即可，而换行要按,+,组合键。,3.1,文本及其常用格式设置,3.1.3,插入空格及文本缩进方法,1.,插入空格,Dreamweaver,在默认的状态下是不能连续输入空格的，可以通过下面的设置使页面可以输入连续空格：打开【编辑】菜单下的【首选参数】，在“常规”选项卡中把“允许多个连续空格”的复选框选中。,2.,文本缩进方式：可以使用文本凸出和文本缩进按钮,来缩进和调整段落和文本块的首行缩进。,3.2,图形图像及其常用设置,网页图像的格式主要有以下三种：,1.GIF,2.JPEG,3.PNG,3.2,图形图像及其常用设置,3.2.1,插入图像,1.,将插入点放置在要显示图像的地方。,2.,单击【常用】工具栏的【图像】按钮,，打开【选择图像源文件】对话框，从图像文件夹中选择图像文件，单击【确定】按钮,。,注意：插入的图像必须位于当前站点内，同时引用文件路径的文件夹层数最好不要超过三层，如果文件不在站点内或文件夹层数过多，会造成图像无法显示。,3.2,图形图像及其常用设置,3.2.2,设置图像属性,图像属性面板包括以下部分,1.【,图像标记名称,】,：在这个文本框中输入图像标记的名称。,2.【,宽,】,、,【,高,】,：设置图像的宽度和高度，单位为,px,（像素）。注意：这里只是网页中显示效果的大小的改变，图像文件并不发生变化，改变图像大小时，应当使用图像处理软件,Photoshop,或,Fireworks,来处理。,3.【,源文件,】,：指定图像的,URL,路径。当需要替换图片时，单击右侧的,【,浏览,】,按钮，打开对话框，从磁盘上选择文件来实现，也可拖动,【,指向文件,】,按钮 指向站点中要插入的图片。,3.2,图形图像及其常用设置,3.2.2,设置图像属性,4.,【,链接,】,：用来输入超链接的,URL,地址。,5.,使用图像编辑软件裁剪及美化图像,6.,【,替换,】,：当鼠标停留在图像上时，会显示替换文本框中输入的说明文字。,7.,【,类,】,：为图像设置,CSS,样式。,8.,【,热点地图,】,：用于在一幅图像上创建多个链接热区。,9.,【,垂直,】,、,【,水平,】,边距：设置图像垂直方向和水平方向上的空白间距。,10.,【,低解析度源,】,：指定在载入主图像之前应该载入的图像。,11.,【,边框,】,：设置图像边框的宽度，单位为,px,（像素），默认无边框。,12.,【,对齐,】,按钮：设置图像水平方向显示位置。,13.,【,对齐,】,下拉列表：对齐同一行上的图像和文本。,14.,【,折叠,】,按钮：可以展开和折叠属性面板。,3.2,图形图像及其常用设置,3.2.3,插入图像占位符,网站能够让用户免费访问，很大程度上依赖于广告来支撑成本。网页设计人员有时并不需要动手设计广告，只需给广告留下位置，等到专业设计师把广告设计完成，直接插入即可，这样可以很大程度上提高网站的开发效率。这个位置可以通过图像占位符来实现,。,3.2,图形图像及其常用设置,3.2.4,插入鼠标经过图像,鼠标经过图像也称“翻转图像”是当用户的鼠标指针经过时产生某种变化的,图像,，同时还可以在图像内加入链接，常用于点击时打开另一个网页的按钮。,3.3,动画及声音及其常用设置,3.3.1,插入,SWF,动画,3.3.2,插入,Flash,按钮,3.3.3,插入,Flash,文本,3.3,动画及声音及其常用设置,3.3.4,插入图片查看器,可以使用插入图片查看器的方法实现多张图片的循环播放，具体方法如下：,1.,双击打开文件，光标在页面行首定位，选择,【,插入记录,】【,媒体,】【,图像查看器,】,命令，打开,【,保存,flash,元素,】,对话框,2.,设置,flash,保存的路径和文件名，单击,【,保存,】,按钮，此时会自动在页面中生成一个,swf,文件。对应该文件，在右侧打开一个,FLASH,元素面板,，如右图所示进行设置：,3.3,动画及声音及其常用设置,3.3.5,插入视频及音频,网络中常见的视频格式有,MPEG,、,AVI,、,WMV,、,RM,和,MOV,等。,网络中常用的音频格式有,MIDI,、,MP3,和,RA,等。,设置视频或音频文件的属性,如右图：,3.4,表格及其设置,页面布局是进行网页设计的最基本最重要的工作之一，网页布局设计的常用控制工具是表格。,Dreamweaver,中的表格功能非常强大，所见即所得的表格控制、拖放调整大小、轻松组织行列以及快速的表格重新格式化，大大缩短网页开发的周期。尽管目前网页设计的趋势是基于,CSS,的布局（,Div+CSS,），但表格仍然是显示结构化信息的最佳方法。表格由行、列组成，单元格是表格的最小单位，是输入信息的地方。,3.4,表格及其设置,3.4.1,插入及选择表格,1.,插入表格,3.4,表格及其设置,3.4.1,插入及选择表格,2.,选中表格,（,1,）光标置于表格的任一单元格中，单击编辑窗口左下角【标签选择器】中的,标签,（,2,）选中行,（,3,）选定整列,3.,选定单元格,（,1,）选定一个单元格：光标在单元中定位，单击编辑窗口左下角【标签选择器】中的,标签。,（,2,）选定多个连续单元格,（,3,）选定不连续多个单元格,3.4,表格及其设置,3.4.2,调整表格和单元格的大小,在,Dreamweaver CS3,中编辑表格的内容时，如果没有设定单元格的宽度，当开始在单元格内输入内容时，表格的边界会自动扩展以适应数据的大小，与此同时其他单元格缩小，但在这些单元格内输入内容或图片时，它们也会自动适应内容大小,。,3.4,表格及其设置,3.4.3,添加和删除表格、行与列,1.,插入表格、行和列,2.,删除表格，行和列,选中表格、行或列，按【,Delete,】键删除，如果是进行了合并单元格操作，则删除该单元格行列，选择【编辑】【剪切】或【,Ctrl,】,+,【,x,】键，注意选中表格，行或列与其中填充的内容是不同的对象，最后，利用表格【属性】面板，通过修改,table,标记的行、列属性来插入或删除行与列。,3.4,表格及其设置,3.4.4,拆分和合并单元格,合并单元格指将两个以上或多个相邻单元格合并成一个单元格，拆分单元格指将一个单元格拆分或多个单元格,。,光标定位到要拆分的单元格中，单击【属性】面板中的【拆分单元格为行或列】按钮,，打开【拆分单元格】对话框，,如下图设置：,选中,需要合并的多个单元格,，单击【属性】面板中的【合并单元格为行或列】按钮,，将,多,个单元格合并为一个单元格，,3.4,表格及其设置,3.4.5,设置表格属性,选中表格后，利用表格属性面板来设置或修改表格的属性，属性面板如下图所示。,3.4,表格及其设置,3.4.6,设置单元格的属性,将光标放置在单元格中，在【属性】面板中设置单元格的属性，如图,3-23,所示，上半部分设置单元格内文本属性，下半部分设置单元格属性。单击【属性】面板右下角的,或,按钮可以折叠或展开面板。,3.4,表格及其设置,3.4.7,表格实例,使用表格设计如下图所示网页,3.5,本章小结,本章分别介绍了网页中的文本、图像、动画、视频和音频等元素的插入方法及各元素属性的设置，并介绍网页布局的主要方法表格的操作。通过本章的学习，使读者可以掌握使用表格来布局网页，并能在网页中插入各种网页元素，达到制作一个简单静态网页的目的。,第四章 超链接及表单,网络的灵魂是超级链接，没有超级链接，就没有万维网。超级链接能把,Internet,上众多的网站和网页联系起来，为畅游网络提供了方便，真正实现了网络无国界，是网页制作中使用得比较多的一种技术。,表单是用户和服务器交互的一个重要方式，利用表单，服务器可以收集用户信息，比如可以采集访问者的名字和,E-mail,地址、调查表、留言薄、搜索界面等等。,4.1,超级链接,绝对,URL,的超链接,从一个网站的网页链接到另一个网站的网页必须使用绝对路径，包括所使用的传输协议，如,相对路径的超链接,将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去，本书中的素材网页基本都是此类链接；最后，还可以利用锚记导航，在同一网页中创建超链接。,内部链接,内部链接是指链接的目标端点是本地站点中的文件,外部链接,外部链接则指链接的目标端点是本站点之外的,URL,4.1,超级链接,4.1.1,文本及图像超链接,1.,选择希望建立为链接的文本或图像。,2.,在,【,属性,】,面板中如下图所示 单击,【,链接,】,文本框右侧的,【,浏览文件,】,图标，打开,【,选择,】,文件对话框，选择目标件,单击,【,确定,】,按钮。,3,、选择被链接的文件显示的目标窗口，如图所示,4.1,超级链接,4.1.2,锚记链接,锚记链接又叫锚点链接。当一全页面的内容较多且内容较长时，为了方便用户浏览网页，可以使用锚点链接快速跳转到想要看的位置。锚点链接指在同一页面的不同位置的链接。,1,、单击,【,常用,】,工具栏中的,【,命令锚记,】,按钮或者选择,【,插入,】,-,【,命名锚记,】,命令，打开,【,命名锚记,】,对话框，命名。,2,、选择 超链接的目标在,【,属性,】,面板的,【,链接,】,文本框中输入“,#1,中所命名的锚记名称”,用同样方法，读者可以在页面中设置多个锚点和链接，实现在页面的跳转。,4.1,超级链接,4.1.3,其他超链接,1.e-mail,链接,为了方便网站维护人员获取用户的反馈意见,Dreamweaver,提供了电子邮件链接，当浏览者单击电子邮件时，系统会自动启用浏览器默认的电子邮件处理程序，其中的收件人的地址会自动更新为链接地址。,2.,文件下载链接,文件下载链接与普通链接的使用方法一样。当被链接的文件不被浏览器支持时，被浏览器直接下载，用户可以选择是不是保存到本地计算机中。,3.,空链接,空链接就是没有目标端点的链接，它具有链接的属性，但不会链接转到任何位置。,4.2,表单应用,4.2.1,表单及表单对象简介,表单（,Form,）技术可以实现浏览者同,Internet,服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。无论是电子商务、网上调查、还是留言板、聊天室，都要求网页能够接收浏览者输入的信息而表单就是网站获取用户信息最重要的手段之一。,表单域中可以插入任何,HTLM,对象，如文本、表格和图像。表单对象特指表单域中专门处理用户输入数据的元素，包括文本域、隐藏域、按钮、图像域、文件域，单选按钮及单选按钮组、复选框、列表、菜单、跳转菜单、标签和字段集以及,Spry,验证系列。,4.2,表单应用,4.2.2,插入表单域,1.,单击【插入】菜单中的【表单】【表单】或者在表单工具栏中单击按钮,此时在编辑窗口中显示红色虚线框，该区域即为插入的表单域，也称“表单”。,2.,在表单域的【属性】面板中设置属性，如图,4.2,表单应用,4.2.3,插入表单对象,1.,插入文本域,文本域是表单用来收集由用户输入文本信息的表单对象。,插入文本域如下图：,4.2,表单应用,4.2.3,插入表单对象,1.,插入文本域,文本域属性设置如下图：,4.2,表单应用,4.2.3,插入表单对象,2.,插入复选框,复选框是让用户可以选择的控件，可以从复选框组中选择多项。复选框的响应都可以进行“关闭”和“打开”状态切换。,属性设置如下图：,4.2,表单应用,4.2.3,插入表单对象,3,插入单选按钮,单选按钮在一组中只能选择一个选项。选中一组中某个单选按钮，则原来选中该组中的其他单选按钮会被取消选择。,属性设置如下图：,4.2,表单应用,4.2.3,插入表单对象,4.,插入单选按钮组,单选按钮组相当于多个名称相同的单选按钮,，属性设置如下图：,4.2,表单应用,4.2.3,插入表单对象,5.,列表,列表的属性设置如下图：,列表值的设置如下图：,4.2,表单应用,4.2.3,插入表单对象,6.,菜单,菜单的属性设置如下图：,列表值的设置和列表一样，两者预览的结果不同：（左列表，右菜单）,4.2,表单应用,4.2.3,插入表单对象,7.,插入文件域,文件域主要用于从磁盘上传文件的路径名称，在服务器上传文件时使用，如上传邮件、照片、程序等。,属性设置如下图：,4.2,表单应用,4.2.3,插入表单对象,8.,插入按钮,按钮常用作命令执行。在,Dreamweaver,网页中常见的按钮为【提交】和【重置】按钮。一般网页上的表单数据都是通过按钮提交给服务器的。,属性设置如下图：,4.2,表单应用,4.2.3,插入表单对象,9.,插入图像域,图像域实质上就是一个按钮，使用图像域可以达到美化网页的目的。,属性设置如下图：,4.2,表单应用,4.2.3,插入表单对象,10.,插入,/,隐藏域,隐藏域主要用于存储并提交浏览者输入的信息，它不会在浏览器中显示。只有在配置了动态网站后，才可以按,【,F12,】,键预览网页。属性设置如下图：,4.2,表单应用,4.2.3,插入表单对象,11.,插入跳转菜单,跳转菜单是一个下拉菜单，其中每个选项具有超链接的性质，但是它比超链接要节省很多空间。属性设置如下图：,4.2,表单应用,4.2.4,和提交表单相关的服务器端脚本处理知识,表单有两个重要的组成部分。一是由,Dreamweaver,生成的表单的,HTML,页面。二是用于处理表单域中输入的信息的服务器端应用程序或客户端脚本。,网页通常是使用表单来实现用户数据提交的，,Form,集合和,QueryString,集合可以用来获取用户提交的表单数据。使用表单提交数据的提交方式有,Get,和,Post,两种。,若用,Get,方式提交表单数据，用户要提交的数据信息将附加在,URL,的后面，作为查询字符串返回服务器端，此时要用,QueryString,数据集合来获取提交的数据信息；,用,Post,方式提交表单数据，表单数据将以放在,HTTP,标头的方式返回服务器端，此时要用,Form,集合获取提交的数据信息。,4.2,表单应用,4.2.4,和提交表单相关的服务器端脚本处理知识,1.Form,集合,用,Form,集合获取用户以,Post,方式提交的表单数据，语法如下：,Request.Form(“,表单元素名称”,),2.QueryString,集合,用,QueryString,集合获取用,Get,方式提交的表单数据，语法如下：,Request.QueryString(“,表单元素名称”,),4.3,本章小结,本章介绍创建各种超链接的方法，如站点内部链接、站点外部链接、锚记链接、电子邮件链接等。通过本章的学习，读者可以通过超链接将分散的网站或网页联系起来，构成一个机的整体；另外本章还介绍了如何在页面中插入表单和表单对象；各表单对象的属性设置以及如何用服务器脚本进行简单的表单提交处理。,网页设计与制作,第五章,DIV,简介,在网页设计中，,Div,和表格一样，主要应用在网页的布局设计中。利用本章所介绍的,Div,标签和,AP Div,，可以对文字和图像等进行精确定位，使页面保持一定的版式，页面风格更加丰富多彩。,5.1 div,基本语法及用法,5.1.1,关于,DIV,标签,Div,的全称是,division(,区分,),，在,HTML,语言中，,Div,标签被称为区隔标记，用来在页面中设置文字、图像和表格等的摆放位置。,Div,标签的使用方法和其他很多标签一样，需要成对出现，例如：,Div,标签,。,如果单独使用,Div,标签而不为其设置,CSS,规则，那么它在网页中的效果和,标签是一样的，因此，我们通常需要为,Div,标签设置,id,属性，以便通过,CSS,规则和,JavaScript,语句来控制它，例如，,Div,标签,。,5.1 div,基本语法及用法,5.1.2,插入,DIV,标签,在,Dreamweaver CS5,中有两种插入,Div,标签的方法：,执行,【,插入,】【,布局对象,】【Div,标签,】,菜单命令。,在,【,插入,】,面板的,【,布局,】,选项卡中单击,【,插入,Div,标签,】,命令。,Div,标签以一个框的形式出现在文档中，并带有占位符文本。将指针移到该框的边缘上时，,Dreamweav
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
