网页制作课件3.30

《网页制作课件3.30》由会员分享，可在线阅读，更多相关《网页制作课件3.30（107页珍藏版）》请在金锄头文库上搜索。

1、 点击进 入齐齐哈尔大学网 页 设 计 流 程1.搜集资料与规划网页架构2.网页制作与测试3.网页上传与推广4.网页维护与更新齐齐哈尔大学目 录第1章 网页基础知识 第2章 HTML语言概述 第3章 初识Dreamweaver3-1 网页制作软件概述3-2 DreamWeaver工作区3-3 创建本地站点管理站点资源和库3-4 插入页面元素 3-5 使用表单3-6 使用表格 3-7 层和时间轴3-8 使用框架3-9 使用模板和库 3-10 使用行为3-11 Dreamweaver ASP动态网页设计 第四章 Fireworks图像处理技术 第五章 Flash动画技术 主菜单主菜单取消取消齐齐哈

2、尔大学了 解:1.网页制作软件和语 言:2.空间和域名申请3. 静态网页与动态 网页齐齐哈尔大学1.网页制作软件和语言:(1)网页制作软件:n 一类是网站管理与网矾设计软件:FrontPage、Dreamweaver 、hotdog 、homesiten 一类是与网页设计相关的软件:Fireworks、 Photoshop、 Flash 、 CorelDRAWIllustrator 、FreeHand 、Cool3D、GIF Animator等。(2)语言: HTML、XHTML(可扩展标识语言 )、DHTML(动态)2.空间和域名申请(1)申请虚拟空间:网站内容所占用的连接到互联网上的服务器

3、空间 主机托管: 虚拟主机: 中资资网(http:)你好万维维网(http:/ 中国万网(http:/ p.flower background-image: url(/i/eg_bg_03.gif); padding: 20px; a.radio background-image: url(/i/eg_bg_07.gif); padding: 20px;我是一个有花纹背景的段落。我是一 个有放射性背景的链接。 注释：为了清晰地显示出段落和链接的背景图像，我们为它们设置了少 许内边距。返回目录齐齐哈尔大学3-4-4 使用项目符号和编号 项目符号或编号 常用属性：type(disc、square、

4、circle) 可通过菜单制作或输入内容后在属性面板中完成返回目录项目符号例：Coffee Milk 有序编号例：Coffee Milk 齐齐哈尔大学3-4-5 插入图像(如何对图文混排分栏?)1.网页中常见的图像文件格式JPEG（图像压缩格式，压缩比率高，颜色丰富） GIF（透明背景动态图形支持不含渐变色的图像和单色图像支持黑白阶和灰阶） PNG（提供灰阶全彩索引模式的色彩有较大的灵活性适合web图形，但要考虑浏览器）2.插入图像3.编辑图像：重点：图像的对齐方式（第四章：南极的精灵2.htm） 4.使用图像占位符5.热点地图（1）在中加入border=“0” usemap=“#Map”表示

5、此图形要链接 MAP位置对照表，同时自动生成标签的位置对照表， “shape=“rect”或=“poly” ”返回目录齐齐哈尔大学3-4-6 链接与导航(1)图像点位符 (2)制作鼠标经过图像(3) 创建超链接设置常规超链接 u 内部超链接或相对链接 (目标文件位于站点内部的链接) u 外部超链接或绝对链接（指链接到其它网站或网页上的链接） 设置图片链接和下载链接（将目标链接设置为图像文件或压缩文件就可以了，如打开大图像，则需要将目标设置为“blank”）(4) 链接到文档中的特定位置 又称为命名锚记 常用属性：name(用于指定书签名)、id、href （用于指定#所链接的英文书签名,写于u

6、rl处）、target同一页面内的书签链接（#）:第3章：南极的精灵不同页面间的书签链接 齐齐哈尔大学(5) 电子邮件链接：mailto:(6) 创建空链接：“javascript:;”(7) 创建脚本链接：javascript:window.print();或 javascript:window.close();(8)设置命名锚记链接及设置跳转菜单齐齐哈尔大学3-4-7 插入媒体插入Flash插入Flash按钮插入Flash文本插入Flash视频内容插入Shockwave影片实例：旅游网站齐齐哈尔大学1.为主页设置动画和背景音乐应用动画和多媒体 (1) 插入flash动画 (2)应用透明fl

7、ash动画（wmode=transparent）（背景11散落花swf） (3)插入flash按钮 (4)插入音频文件为主页设置背景音乐(媒体-插件hidden=true loop=true autostart = true) (5)插入视频文件齐齐哈尔大学第3-4-8章 使用表格1 在“标准”模式下创建表格1-1 插入表格1-2 设置表格元素属性1-3 选择表格元素1-4 调整表格、列和行的大小1-5 插入或删除行和列1-6 拆分、合并单元格1-7 表格嵌套1-8 格式化表格1-9 对表格进行排序 2 在“布局”模式下对页面进行布局2-1 模式切换2-1 在“布局”模式中创建表格2-2 设置

8、布局单元格和而已表格属性2-3 调整布局单元格和表格的大小及位 置2-4 设置列宽2-5 在布局单元格中添加内容2-6 清除自动设置的单元格宽度2-7 使用“扩展表格”模式表格的建立是利用4个标签完 成。 . 建立表标签 . 表格中的一行 表格的第一行或第一列标题 . 表格中的一个单元格 每个标签又都有各自的属性列表 返回目录齐齐哈尔大学1布局主页index.html-表格的基本应用 (1)插入表格 (2) 选择表格和单元格 (3)设置表格属性 （标题、表头） (4) 设置单元格属性 (5) 表格的高级应用 拆分与合并单元格在表格中添加或删除行或列、排序 设置表格的列（colgroup和col

9、标记） 圆角表格 细线表格齐齐哈尔大学1、表格属性如下： Width:表格宽度值。单位：像素或百分比（相对参考对象） Cellpadding：“填充” ：用来设置单元格边距 cellspacing ：“间距” ：用来设置单元格间距。 Align：表格对齐方式 Bgcolor：“背景颜色” Background：“背景图片” Border：表格边框宽度值 bordercolor:表格边框颜色bordercolordark：边框暗淡面的颜色bordercolorlight：边框明亮面的颜色frame属性:指定表格的外边框显示方式取值如下： void 无边框 above 仅有顶框 below 仅有底

10、框 hsides 仅有顶框和底框 vsides 仅有左右侧框 lhs 仅有左侧框 rhs 仅有右侧框 box 包含全部四个边框 border 包含全部四个边框rules属性：指定表格的内边框显示方式取值如下： none 无分隔线 groups 仅在行组和列组有分隔线 rows 仅有行分隔线 cols 仅有列分隔线 all 包含所有分隔线 齐齐哈尔大学2、单元格属性如下 “水平”文本框用来设置单元格内元素的水平排版方式，是居左、 居右或是居中。 “垂直”文本框用来设置单元格内的垂直排版方式，是顶端对齐、 底端对齐或居中对齐。 “高”、“宽”文本框用来设置单元格的宽度和高度。 “不换行”复选框可以

11、防止单元格中较长的文本自动换行。 “标题” 框使选择的单元格成为标题单元格，单元格内文字自动以 标题格式显示出来。 “背景”文本框用来设置表格的背景图像。 “背景颜色”文本框用来设置表格的背景颜色。 “边框”文本框用来色设置表格边框的颜色。齐齐哈尔大学第3-4-9章 使用框架 1. 创建框架和框架集 2. 选择框架和框架集 3. 在框架中打开文档 4. 保存框架和框架集文件 5. 设置框架和框架集属性 6.代码生成于头文件与主体文件之间http:/ 垂直框架 齐齐哈尔大学第3-4-10章 使用表单1.表单对象表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选

12、框、复选 框等等）输入信息的元素。表单使用表单标签（）定义。表单的动作属性（Action）和确认按钮当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作 属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收 到的输入数据进行相关的处理。2.创建表单 表单大小可用css来控制齐齐哈尔大学齐齐哈尔大学齐齐哈尔大学齐齐哈尔大学Method属性：用来设置数据提交方式。get:数据会被当作服务器处理程序的附加参数提交。post:数据是分开个别提交 Action属性:指定服务器处理程序的路径及名称。 单选或复选的value属性：当用户选择了某个按钮后，该按钮的 value 值就会指

13、定给此组单选按钮，提交数据时会将此值传递给服务处理程序，处 理 程序即根据此值来判断用户选择了哪一个选项。 Checked属性：表示默认选项。只有一种状态值。不设即表示没有选中 。l侧见双翠鸟，巢在三珠树l 矫矫珍木巅，得无金丸惧。l 美服患人指，高明逼神l 今我游冥冥，弋者何所利用div块元素可以不同行设置l侧见双翠鸟，巢在三珠树l 矫矫珍木巅，得无金丸惧。l 美服患人指，高明逼神l 今我游冥冥，弋者何所利用span行元素可以同一行设置l使用图片：flash动画韩国.jpg返回目录齐齐哈尔大学1.Z轴理解 2.使用层布局理解 3.精确调整层属性面板中手动调整键盘操作：方向键移1个像素Shif

14、t+方向键移动10个像素CTRL+方向键放大或缩小1个像素Shift+ CTRL+方向键放大或缩小10个像素 4.使用菜单创建层 插入布局对象：插入一个固定大小的层 5.层的嵌套 使用CTRL可同时创建多个层6.层属性 编辑/首先参数/分类/层（AP元素）7.使用层面板窗口菜单/层（AP元素） 8.图层的隐含和溢出9.可视化剪辑层技巧 10.标尺与辅助线使用技法 11.网格与辅助线的精确设置 12.实例： body:onload 文字：onmouseover onmouseout第3-4-11章 层齐齐哈尔大学第3-4-12章 使用模板 创建模板 添加模板区域 创建可编辑区域 创建重复区域 创

15、建可选区域 定义可编辑标签属性 创建嵌套模板 管理模板齐齐哈尔大学第3-11章 使用行为行为的概念和行为面板应用行为使用Dreamweaver自带的动作齐齐哈尔大学12.为首页添加伴随窗口-应用行为(1)认识“行为”面板 （轻松使用JavaScript语言，浮动广告，滚动字幕，收缩，放大图像等）(2) 应用行为 (3) 应用“弹出信息”行为 (4)应用“ 打开浏览器窗口”行为（首先设空链接#）(5) 对图像应用“效果”行为(6)应用“显示隐藏元素” 行为 (7)应用“设置状态栏文本”行为 (8)安装行为插件 扩展：制作弹出式下拉菜单（插入-布局对象-APdiv-设置背景色及对齐选中body-APdiv-行为-显示隐藏-onload-隐藏导航按钮-onmouseover-显示导航按钮-onmouseout-隐藏齐齐哈尔大学第3-12章 管理站点资源和库1.“资源”面板 2.库项目第3-13章 测试站点1.检测浏览器兼容性 2.检测链接 3.测试下载时间和文件大小 4.使用站点报告齐齐哈尔大学1.什么是CSS?级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，或层叠样式表。它是用来进行网页风格设计的。比如，如果想让链接字未