网页设计基础.ppt

网页制作基础教程（DreamweaverCS4）电子教案,第一章网页设计基础,本章重点：了解网站建设中的基本概念，明确网站的开发流程，并对DreamweaverCS4的工作界面有所了解，为下一步的开发做准备。,第一章网页设计基础,1.1网页设计基础知识1.2网站开发流程1.3网站规划1.4网页基本元素1.5DreamweaverCS4工作环境,1.1.1网页网页最直观的解释就是上网时在浏览器里看到的一个页面。实际上网页是一个文件，他存放在世界某个角落的的某一台计算机（服务器）中，而这台计算机必须是与互联网相连的。,1.1网页设计基础知识,1.1.2网站网站（Website）是指在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。,1.1网页设计基础知识,1.1.3HTML超文本链接标识语言。它是制作网页的一种标准语言，以代码的方式来进行网页的设计，它们在设计过程上可以说它是以文本格式为基础，所以可以用任何编辑器和文字处理器来为网络创建或转换文本。,1.1网页设计基础知识,1.1.4服务器服务器实质上是一种高性能的计算机，作为网络的节点，用于存储和处理网络上80%的数据、信息。分为文件服务器数据库服务器应用程序服务器。,1.1网页设计基础知识,1.1.5超链接与URL超链接是网页的一部分，是允许同其他网页或站点之间进行链接的网页元素，如文字、图像等。URL（UniformResourceLocator）又叫统一资源定位器，是专门为标识Internet上的资源而设定的一种编址方式，即通常所说的网站地址。URL一般由三大部分组成：传输协议：/主机IP地址或域名地址/资源所在路径和文件名,1.1网页设计基础知识,1.1.6动态网站与静态网站在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”动态网站并不是指在网页上插入了动画元素的网站，而是指网站内容的更新和维护是通过基于数据库技术的内容管理系统完成。静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少,1.1网页设计基础知识,网站开发流程：1、确定网站主题2、搜集材料3、规划网站4、选择合适的制作工具5、制作网页6、上传测试7、推广宣传8、维护更新,1.2网站开发流程,网站规划：1确定站点目标2规划站点结构3规划站点内容4规划站点的导航机制5明确站点的风格,1.3网站规划,1网站LOGOLogo的中文含义是标志、标识，在网页设计中，Logo常作为公司或站点的标识出现，起着非常重要的作用，集中体现了这个网站的文化内涵和内容定位。,1.4网页基本元素,2.网站BannerBanner的中文含义是横幅、标语，通常被称为网络广告。,1.4网页基本元素,3导航栏导航栏实质上是一组超链接，通过这组超链接可以浏览到整个网站的其他页面。,1.4网页基本元素,4文本文本作为人类最重要的信息载体的交流工具，是最重要的网页元素之一。与图像、动画等其他网页元素相比，文本不易在第一时间吸引浏览者的注意，但文本能够更加准确详细地表达网页信息内容和含义，是对其他网页元素的补充。,1.4网页基本元素,5.图像图像在网页中起着非常重要的作用，适当的图像能够为网页增添生动性和活泼性，不仅丰富网页内容、提供更多更直接的信息，还能给浏览者视觉上的美感。,1.4网页基本元素,6动画动画能够形象生动地表现事物的变化发展过程，增加网页的动态效果，使网站更加生动有趣，因此，动画已经成为现代网站中不可缺少的元素之一。,1.4网页基本元素,7表单表单实质上是一个服务器程序，用户可以在网页上的表单域中输入文本或数据，提交表单，该表单程序在服务器上执行，并将执行结果反馈到相应的页面上，从而实现了用户与网站之间的交互。,1.4网页基本元素,8版权信息加入了伯尔尼公约的国家，版权保护是随着作品（无论是文字，还是图片）的问世的即刻就得到版权的保护的，并不是必须要声明。但是作为惯例，这一小行文字还是有很好加强意识，提醒浏览者，所观看的内容是受到版权保护的。下面举几个版权信息的正确写法:2003-2009,Inc.Allrightsreserved.2009bj-websiteCorporation.Allrightsreserved.Copyright2009Incorporated.Allrightsreserved.2003-2009EricA.andKathrynS.Meyer.AllRightsReserved.,1.4网页基本元素,1.5.1DreamweaverCS4的启动“开始”“程序”AdobeDreamweaverCS4”,1.5DreamweaverCS4工作环境,1.5.2DreamweaverCS4的工作环境,面板组,文件面板,文档编辑窗口,插入面板,文档工具栏,标签状态栏,属性检查器,1.5DreamweaverCS4工作环境,1.5.2DreamweaverCS4的工作环境应用程序栏,1.5DreamweaverCS4工作环境,1.5.2DreamweaverCS4的工作环境文档工具栏,1.5DreamweaverCS4工作环境,1.5.2DreamweaverCS4的工作环境文档窗口“文档”窗口显示当前文档。可以选择设计视图、代码视图、拆分代码视图、代码和设计视图之一进行网页的编辑和开发.当“文档”窗口处于最大化状态（默认值）时，“文档”窗口顶部会显示选项卡，上面显示了所有打开的文档的文件名。如果尚未保存已做的更改，则Dreamweaver会在文件名后显示一个星号。若要切换到某个文档，单击其选项卡即可。,1.5DreamweaverCS4工作环境,1.5.2DreamweaverCS4的工作环境面板组（1）插入面板,1.5DreamweaverCS4工作环境,插入面板,1.5.2DreamweaverCS4的工作环境面板组（2）CSS面板组包含“CSS样式”、“AP元素”和“标签检查器”面板三个浮动面板,1.5DreamweaverCS4工作环境,CSS面板组,1.5.2DreamweaverCS4的工作环境面板组（3）“应用程序”面板组包含“数据库”、“绑定”、“服务器行为”、“组件”4个浮动面板,1.5DreamweaverCS4工作环境,应用程序面板组,1.5.2DreamweaverCS4的工作环境面板组（4）“文件”面板组包含“文件”、“资源”2个浮动面板,1.5DreamweaverCS4工作环境,文件面板组,1.5.2Dreamwea