Web网页制作PPT课件下载推荐.ppt
- 文档编号:14311172
- 上传时间:2022-10-22
- 格式:PPT
- 页数:65
- 大小:1.41MB
Web网页制作PPT课件下载推荐.ppt
《Web网页制作PPT课件下载推荐.ppt》由会员分享,可在线阅读,更多相关《Web网页制作PPT课件下载推荐.ppt(65页珍藏版)》请在冰豆网上搜索。
记事本、EditPlus等,存成.htm或.html文件可视化编辑器:
Dreamweaver、Frontpage等由Web服务器实时动态地生成:
IIS、Tomcat等,1.HTML语言,HTML标签及其属性标签:
是HTML语言的基本组成部分,要用括起来。
双边标记:
头标与尾标。
如:
。
单边标记:
只有头标。
标签属性:
对标签的状态进行描述,出现在标签的内,属性值用“”或者引起来。
常见共有属性:
colorbgcolorbackgroundsizewidthheightalignsrc。
例:
这里是标题栏这里是网页文本的页面体部分,1.1文档结构,1.2字体和颜色,标题字体:
.#=1,2,3,4,5,6字体大小:
.#=1,2,3,字体名称:
.#=黑体,宋体字体颜色:
.字体形状:
今天天气真好!
1.3文字布局,段;
换行;
区域;
文字的对齐(Align).#=left,center,right#=left,center,right,1.4超级链接和书签,1.页面之间的链接,用URL:
文本及图像例如:
UPCReturntotopicUPC2.页内链接-书签,用锚:
例如:
AppendixADetailsareinAppendixA.,例如:
插入图片,图像格式,bmp,gif,jpg,标记,属性,src:
指定图片的位置Align:
指定图片与文本的对齐关系Alt:
提示信息Border:
图片边界宽度Height:
图片高度Width:
图片宽度,1.5图像,1.6表格,12.1.6表格,跨多列:
colspan=#跨多行:
rowspan=#表格边框的色彩:
bordercolor=#表元的背景色彩:
bgcolor=#和背景图象:
background=URL文字的对齐/布局:
align=#(#=left,center,right)valign=#(#=top,middle,bottom),表单.*=GET,POST表单控件*=text,password,checkbox,radio,image,hidden,submit,reset*=SymbolicNameforCGIscript,12.1.7表单与控件,1.7表单与控件,文字输入:
隐藏框:
密码输入:
复选框:
单选框:
列表框:
.文本区域:
.,姓名:
地址:
发送数据?
YesNo需要什么产品?
显示器键盘鼠标调制解调器是否会员?
属性,1.7表单与控件,帧:
在一个浏览器窗口中定义单独的窗框,每个帧包含了一个单独的网页可独立于其它帧滚动,1.8帧,1.9其他,插入直线:
插入移动的文字:
文字(#=left,right)插入对象:
空格:
注释:
1.10DIV专题,定义和用法可定义文档中的分区或节(division/section)。
标签可以把文档分割为独立的、不同的部分。
它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用id或class来标记,那么该标签的作用会变得更加有效。
是一个块级元素。
这意味着它的内容自动地开始一个新行。
实际上,换行是固有的唯一格式表现。
可以通过的class或id应用额外的样式。
实例文档中的一个部分会显示为绿色:
ThisisaheaderThisisaparagraph.,CSS盒子模式,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。
因为用这种方式排版的网页代码简洁,更新方便。
理解CSS盒子模型在网页设计中常听的属性名:
内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模式都具备这些属性。
CSS盒子模式这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。
那么内容就是盒子里装的东西;
而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;
边框就是盒子本身了;
至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。
在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。
填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。
网页盒子模型存在两种:
1:
标准W3C盒子模型;
宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)2:
IE盒子模型(IE浏览器默认的模型)。
在两种不同模型网页里,定义了相同CSS属性的元素显示效果是不一样的,下面就用公式来区分这两种不同的盒子模型。
宽=width+(border-left)+(border-right)高=height+(border-top)+(border-bottom),2.层叠样式表CSS,2.1CSS概述,CSS就是CascadingStyleSheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。
网页设计最初是用HTML标记来定义页面文档及格式,例如标题、段落、表格、链接等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在1997年W3C(TheWorldWideWebConsortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1,自CSS1的版本之后,又在1998年5月发布了CSS2版本,样式表得到了更多的充实。
W3C把DHTML(DynamicHTML)分为三个部分来实现:
脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括InternetExplorer、NetscapeNavigator等)和CSS样式表。
CSS可以精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。
使用CSS能够简化网页的格式代码,加快下载显示的速度,外部链接样式可以同时定义多个页面,大大减少了重复劳动的工作量。
注意:
CSS需要IE4(InternetExplorer4.0)和NC4(Netscape4.0)以上的浏览器支持,有些效果需要更高版本的浏览器支持。
用于(增强)控制网页样式将样式信息与网页内容分离一种标记性语言从Netscape4和IE4开始支持,W3C标准DHTML的一部分原来的HTML:
布局和内容紧紧绑定,不易修改DHTML:
布局和内容分开,可以动态(用脚本)修改,DHTML定义(InternetExplorer)DynamicStyles动态风格DynamicContent动态内容PositioningandAnimation定位和动画FiltersandTransitions过滤器和页面切换效果FontDownload字体下载DataBinding数据绑定DynamicHTMLObjectModel动态HTML对象模型(DOM)XSLExtensibleStylesheetLanguage可扩展样式语言CSS和XSL都可以用来对XML指定输出,2.2语法,1、基本语法:
CSS的定义是由三个部分构成:
选择符(selector),属性(properties)和属性的取值(value)。
基本格式如下:
selectorproperty:
value选择符属性:
值选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:
bodycolor:
black,bodycolor:
black选择符body是指页面主体部分,color是控制文字颜色的属性,blac
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 网页 制作