No1网页设计基础知识.pptx

No1.网页设计基础知识,主讲教师：艾迪aidipub,网页设计基础知识,基本术语扫盲,HyperTextMarkupLanguage超文本标记语言超文本(文字+图片+音视+链接)标记语言(浏览器根据标记来显示内容)专门用于在Web上传递信息标记语言是一套标记标签(markuptag),HTML：Web的语言,HTML标记标签通常被称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如HTML标签通常是成对出现的，比如和标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签,HTML标签,HTML文档描述网页HTML文档包含HTML标签和纯文本HTML文档也被称为网页Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。,HTML文档=网页,任务1-1：查看网页源文件,任务1-2HTML实例,CSSCascadingStyleSheets样式定义如何显示HTML元素样式通常存储在样式表中外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中,CSS：层叠样式表,通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。,CSS：层叠样式表,任务2CSS实例,是属于网络的脚本语言被设计为向HTML页面增加交互性被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用是因特网上最流行的脚本语言很容易使用,JavaScript：脚本语言,任务3JS实例,UniformResourceLocator统一资源定位符用于定位万维网上的文档（或其他数据）当您点击HTML页面中的某个链接时，对应的标签指向万维网上的一个地址。,URL：网址,语法：scheme:/host.domain:port/path/filenamescheme-定义因特网服务的类型。最常见的是httphost-定义域主机（http的默认主机是www）domain-定义因特网域名，比如:port-定义主机上的端口号（http-80）path-定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。filename-定义文档/资源的名称,URL：网址,万维网，常常被当成因特网的同义词，其实万维网是靠着因特网运行的一项服务，是一个资料空间。它是一个以Internet为基础的计算机网络平台，允许用户的计算机通过Internet存取另一台计算机上的信息资源。,万维网|WorldWideWeb|WWW|W3,网站|Website,网站，是指在因特网上按照一定规则使用HTML等工具制作的，用于展示特定内容的相关网页集合。简单地说，网站是一种通讯平台，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。也可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。,网页|WebPage,网页是网站中的一“页”，是构成网站的基本元素。换句话讲，一个网站就是由若干个网页组成。网页是一个文件，它存放在某一台与互联网相连的计算机中，网页经由网址（URL）来识别与存取。人们上网时在浏览器中所看到的内容就是网页。,网页设计基础知识,网站的风格设计,包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。严肃庄重清爽温馨深沉厚重生动活泼古朴典雅。,简洁大方,简洁大方,风格独特，构图巧妙,生动活泼,色彩丰富,浓郁的文化气息,标题信息、栏目信息、内容信息、附加信息等，要进行合理的放置，让人看起来井井有条，主次分明。一般来说，屏幕中央最能引人注意，屏幕上方紧随其后，屏幕左右侧通常放置不太重要或固定信息，附加信息一般放在最下方。,网站的版面布局,常见网页布局类型,网站logo网站Logo也称为网站标志，网站标志是一个站点的象征，也是一个站点是否正规的标志之一。网站的标志应体现该网站的特色、内容及其内在的文化内涵和理念。成功的网站标志有着独特的形象表示，在网站的推广和宣传中将起到事半功倍的效果。网站Banner网站Banner即横幅广告，是互联网广告中最基本的广告形式。Banner可以位于网页顶部、中部或底部任意一处，一般横向贯穿整个或者大半个页面。,构成网页的基本元素,构成网页的基本元素,导航栏导航栏是网页的重要组成元素，它的任务是版主浏览者在站点内快速查找信息。好的导航系统应该能引浏览者浏览网页而不迷失方向。Flash动画Flash动画具有简单易学、灵活多变的特点，所以受到很多网页制作人员的喜爱,网页图像设计软件photoshopcs4网页动画制作软件flashcs4网页编辑排版软件dreamweavercs4,常用网页设计软件,网页设计基础知识,DreamweaverCS4操作界面,菜单栏,浮动面板,“插入”面板,“属性”面板,文档窗口,DreamWeaverCS4操作界面,文档窗口也称文档编辑区，在此可以进行Web页面的编辑。,DreamWeaverCS4操作界面,插入面板提供“常用”等8组面板视图，可以快速插入各种对象。,DreamWeaverCS4操作界面,属性面板用于显示或者修改所选对象的各种属性，当选择不同的对象时属性面板也会随之改变。,“文本”属性面板,“图像”属性面板,DreamWeaverCS4操作界面,Dreamweaver中还有很多各种功能的面板，可以根据用户需要展开或者折叠，还可以任意组合和移动，所以称之为“浮动面板”,浮动面板,面板组菜单,网页设计基础知识,手工直接编写记事本等，存成.htm.html格式使用可视化HTML编辑器Frontpage、Dreamweaver等由Web服务器（或称HTTP服务器）一方实时动态地生成。,HTML文档的编写方法,*.htm或*.html无空格无特殊符号（例如&符号）只可以有下划线“_”只可以为英文、数字区分大小写首页文件名默认为：index.htm或index.html,网页文件命名,HTML文件的正文,HTML文件结构|DocumentStructures,.是HTML语言的基本部分元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。,HTML标记元素,.文档的HTML部分.包含有关文档的信息.文档内容和HTML标记.应该分配给窗口的标题.一级标题.二级标题.三级标题.一个段落,HTML标记元素,HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。属性总是以名称/值对的形式出现属性总是在HTML元素的开始标签中规定。属性值应该始终被包括在引号内。align=“center”width=”33%”,HTML元素属性,HTML中的预留字符必须被替换为字符实体。在HTML中不能使用小于号（），这是因为浏览器会误认为它们是标签。小于号”结束。,HTML字符实体,HTML字符实体,