网页设计 (1).ppt

1、今日主题,MIME格式 网站设计流程 HTML文件结构 网页头部元素 表格 文字 图像 表单 多媒体,1. MIME格式 MIME-多用途网际邮件扩充协议 常用的type/subtypes Text/plain、Text/html、 Text/richtext Image/gif、Image/jpeg、 Image/x-xbitmap Audio/basic、 Audio/x-wav video/mpeg、 video/quicktime、 video/x-msvideo Application/octet-stream,确定网站的主题 规划网站的整体结构 收集整合网页素材 确定网页版面布局。

2、 制作网页。 添加网页特效。 测试和发布网站。,2 .网站的设计流程,3. HTML文件的结构 My first HTML document Hello world! ,Strict DTD Transitional DTD Frameset DTD ,（1）围堵标记 格式： （2）单标记（HTML3） 格式： 只有起始标记，没有结束标记。最常用的单标记是, 它表示段内换行。 （3）标记属性 格式： 各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。,HTML文档的基本结构： 文件开始 标头区开始 .标题区 标头区结束 文件主体内容开始 文件主体内容 文件主体内容结束 文件结束 其

3、中之间表示这是个网页文件，是必有的标记。,HTML语法结构,HTML5.0： Example document Example paragraph ,4. 网页的头部元素 包括元数据汇总标记。 （1）标题 （2）样式 （3）脚本 （4）基底网址标记 archives （5）允许用户将当前文档连接到外部资源,（6）meta a.http-equiv “#”处填写的是语言的类型，如一般中国大陆基本上汉字用的是国标编码，则为 gb2312 ；而港台地区则是big5 ；美国则为us-ascii 。 注意：我们在做模板时，如果找的是一些韩国网站，则出现的是 如果你不修改此处为gb2312，则会页面出乱！

4、, b.Name 关键字 描述 作者 刷新 c. Charset d.Content,5.表格 网页布局的三种方式 表格 框架 层次,表格 表格的基本语法 . - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据),带边框的表格： FoodDrinkSweet ABC 不带边框的表格： FoodDrinkSweet ABC ,跨多行、多列的表元(Table Span) 跨多列的表元 Morning Menu Food Drink Sweet ABC 跨多行的表元 Morning MenuFoodA Drink B Sweet C ,表格尺寸设置 边框尺寸设置： FoodDri

5、nkSweet ABC 表格尺寸设置： FoodDrinkSweet ABC , 表元间隙设置： FoodDrinkSweet ABC 表元内部空白设置： FoodDrinkSweet ABC ,表格在页面中的对齐/布局(Floating Table) FoodDrinkSweet ABC #=space value N 表格的标题 IE . #=left, center, right,表格的色彩 表元的背景色彩和背景图象 #=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray,

6、 Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 表格边框的色彩 IE 表格边框色彩的亮度控制 ,表格的分组显示(Structured Table) 按行分组 . - 表的题头(Header) . - 表的正文(Body) . - 表的脚注(Footer) 按列分组 #=left, right, center 列的属性控制 #=从左数起，具有指定属性的列的列数 #=left, right, center,6.HTML文本使用,(1)标题字体 . #=1, 2, 3, 4, 5, 6 - 这些标记显示黑体字。 - 这些标记自动插

7、入一个空行，不必用 标记再加空行。因此在一行中无法使用不同大小的字体。,（2）物理字体 今天天气真好！ 今天天气真好！ 今天天气真好！ 今天天气真好！ 打印机字体 今天天气真好！ 今天天气真好！ 今天天气真好！ 划线 今天天气真好！,（3）逻辑字体 今天天气真好！ 强调 今天天气真好！ 特别强调 今天天气真好！ 码（显示原始码） 今天天气真好！ 样本 今天天气真好！ 键盘输入 今天天气真好！ 变数 今天天气真好！ 定义 今天天气真好！ 引用 今天天气真好！ 小字 今天天气真好！ 大字,（4）客户端字体 字体大小 . #=1, 2, 3, 4, 5, 6, 7 or +#, -# #=1, 2,

8、 3, 4, 5, 6, 7 指定颜色 . #=rrggbb 16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua White 3B 3E 40 5B 5C 5D 5E 60 7B |7C 7D ?3F &26 /2F =3D #23 %25,8 网页图像 (1)图像常用格式 图像压缩：无损压缩/有损压缩 PNG(portable network graphic)便携网络图像-无损压缩（8-32

9、） JPG/JPEG(joint photographic group)联合图像专家组-有损压缩（24） GIF(graphics interchange format)图像交换格式-无损压缩（8位）,图像格式较多并非适用于所有浏览器。图像可以包括静态位图（PNGs, GIFs, JPEGs），动态位图（APNGs, 动态GIFs），单页矢量文件（单页pdf，带有一SVG根元素的XML文件）和动态矢量图（使用已公的SMIL animation的带有一SVG根元素的XML文件）。 这就排除了带有脚本的SVG文件，多页的PDF文件，交互式的MNG文件，HTML文件，纯文本文件。,图像img有以下四

10、种状态： 不可用；部分可用；完全可用；坏图（图像数据可下载但浏览器无法解码） 图像导入算法本身存在漏洞，可以通过携带脚本进行端口扫描的攻击，客户端可以采用“交叉源访问控制策略”来减轻这种攻击，但是会损坏对web内容的兼容性。,位图与矢量图： 位图是指在空间和亮度上已经离散化了的图像，由计算机屏幕上的象素点组成。位图具有固定的分辨率。 矢量图是对图像依据某个标准进行分析而产生的结果，它不直接描述图像上的每一点，而是描述产生这些点的过程和方法。矢量图是以一组指令的形式存在的。,“图形API方面存在两个派系，即时模式（immediate-mode）和保留模式（retained-mode）”,(2)图

11、像插入 链入图象的基本语法 #=图象的 URL #=在浏览器尚未完全读入图象时，在图象位置显示的文字。 除了alt属性之外还有title属性可用。 Usemap属性指出图像联合着图像映射。 ismap 属性用来指出 它是a 标签 href属性的后裔，指明该元素提供服务端的图像映射。,(3) 客户端图象映射 # shape=rect coords=A,A,B,B (A,A)=Upper Left, (B,B)=Lower Right shape=circle coords=A,A,R (A,A)=Center, R=Radius shape=poly coords=A,A,B,B,C,C. (A

12、,A=First Corner, (B,B)=Second Corner, ., ,9 多媒体嵌入 嵌入多媒体文本(EMBED) 基本语法 #=URL 背景音乐 #=WAV 文件的 URL #=循环数 插入视频剪辑 何时开始播放 AVI #=fileopen, mouseover控制条 循环播放 延时 #=毫秒数,9 多媒体嵌入 嵌入多媒体文本(EMBED) 基本语法 #=URL 10 iframe元素 使用Iframe标签实现画中画。 src 属性给出画中画页面显示的地址. 非空 URL. srcdoc 属性 给出嵌套浏览包含的页面内容.属性值是srcdoc文档源文件.,11.audio元素

13、 44KHz是CD标准采样率，22KHz是调频广播的音质，11KHz是电话的音质，5KHz为说话声。 MP3（Motion Picture Experts Group1,audio layer3）由德国的音乐狂热分子于1997年发明的一种数字音乐压缩技术，可传输用此格式录制的音频文件，音效逼近CD格式录制的歌曲，所占空间仅为原来的1/12。内容是免费的，但外围装置必须付费。,Audio元素用于播放音频文件。 格式： 例： ,12 video元素 网页设计使用多媒体元素至少要提供两种格式-MP4和WebM，以支持主流浏览器最新版本。 MP4是一种视频压缩格式，与MP3音频格式一样由运动图像专家组(MPEG)定义。 WebM用VP8 codec压缩，是多个浏览器商支持的一个项目。,帧速率指的是动画播放的速度，也就是时间轴上播放指针移动的快慢。帧速率的单位是fps(帧/秒)，也就是每秒钟播放的帧数。帧速率决定了动画播放的连贯性和平滑性。 Quickti