dreamwaver网页设计第4章4041.pptx
《dreamwaver网页设计第4章4041.pptx》由会员分享,可在线阅读,更多相关《dreamwaver网页设计第4章4041.pptx(54页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、人民邮电出版社 2012.2第4章 网页设计与美化网页设计与制作课件 2012.2第4章 网页设计与美化l 4.1 制作框架网站l 4.2 层与时间轴的应用l 4.3 利用行为制作动态页面l 4.4 制作表单页面网页设计与制作课件 2012.24.1 制作框架网站l 框架是一个比较早出现的HTML对象,框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页。使用框架可以非常方便的完成导航工作,而且各个框架之间决不存在干扰问题,所以在模板出现以前框架技术一直普遍应用于页面的导航,它可以使网站导航比较清晰。网页设计与制作课件 2012.24.1 制作框架网站l 使用框架建设网站
2、的最大的特点是使网站风格能够保持统一。一个网站的众多网页最好都有相同的地方,来做到风格统一。可以把这个相同的部分单独的制作一个页面,作为框架结构的各个子框架的内容给整个站点公用。通过这个方法达到了网站的风格的统一。网页设计与制作课件 2012.24.1 框架的基本操作l 创建框架集和框架l 选择框架和框架集l 保存框架和框架集l 设置框架集属性l 设置框架的背景色l 在框架中设置链接网页设计与制作课件 2012.2创建框架集和框架l 框架有两部分组成,即框架集和单个框架。框架集是在一个文档内定义一组框架结构的HTML网页,它定义了一个网页中的框架数目、每个框架的大小、载入每个框架的网页源和每个
3、框架的其他属性等;单个框架指在网页中定义的一个区域,每个区域可以分别显示不同的网页。创建框架集和创建框架是同步进行的。只要创建了框架就一定形成了框架集;同样,创建的框架集就一定具有框架。网页设计与制作课件 2012.2创建框架页面l 使用“新建文档”对话框l 使用菜单命令l 使用布局面板创建框架页面网页设计与制作课件 2012.2使用“新建文档”对话框网页设计与制作课件 2012.2网页设计与制作课件 2012.2使用菜单命令l 新建一个空白文档l 执行“插入”“HTML”“框架”命令,在弹出的子菜单中选择所需的选项网页设计与制作课件 2012.2使用布局面板创建框架页面以上方法既是创建框架集
4、也是创建框架的。网页设计与制作课件 2012.2创建框架集l 创建自定义框架集,可以执行“查看”“可视化助理”“框架边框”网页设计与制作课件 2012.2选择框架和框架集l 在文档窗口的设计视图中,在选定了一个框架后,其边框被虚线环绕;在选定了一个框架集后,该框架集内的框架的所有边框都被虚线环绕。l 选择框架按住Alt键选择框架使用框架面板选择框架l 选择框架集单击框架的边框单击“框架”面板中最外层的边框网页设计与制作课件 2012.2保存框架和框架集l 在浏览器中预览框架集前,必须保存框架集文件,以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档,也可以同时保存框架集文件
5、和框架中出现的所有文档。网页设计与制作课件 2012.2l 保存框架集选择框架集之后,进行保存。只保存框架集的框架结构页面是不能完全显示的,还必须将每个框架文档进行保存。l 保存框架鼠标单击框架文档,进行框架页保存。网页设计与制作课件 2012.2保存框架集和框架l 执行“文件”,“保存全部”,将整个框架集保存为index.htmll 接着保存下面的各框架。网页设计与制作课件 2012.2设置框架属性l 选定具体框架,利用“属性”面板进行设置。网页设计与制作课件 2012.2设置框架集属性l 选定框架集后,利用“属性”面板进行设置。网页设计与制作课件 2012.2设置框架的背景色l 将光标置于
6、要改变背景色的框架中l 执行“修改”“页面属性”命令,打开“页面属性”对话框进行设置网页设计与制作课件 2012.2在框架中设置链接l 应用一个框架的一个主要目的是实现框架之间的链接。网页设计与制作课件 2012.2浮动框架l。天气预报浮动框架网页设计与制作课件 2012.24.2 层与时间轴的应用l 层是一种HTML元素,可以将它定位到网页的任意位置。层可以包含文字、图像或其他任何可在HTML文档正文中放入的内容。层最主要的特性是它可以悬浮在网页内容之上。换句话说,可以在网页上任意改变层的位置,实现对层的精确定位。正是由于层的这种特性,才利用层实现对网页中的内容进行精确定位。l 层可以被显示
7、或隐藏,通过程序在网页中控制层的显示或隐藏,实现层上内容的动态交替显示,实现一些特殊的显示效果。层还可以被重叠,因此可以在网页中实现内容的重叠效果。网页设计与制作课件 2012.2层的基本操作l 在Dreamweaver 中可以直接在网页中插入层。l 通过“层”面板可以管理文档中的层。使用“层”面板可防止重叠,更改层的可见性,将层嵌套或层叠,以及选择一个或多个层。l 执行“窗口”“层”命令,或按F2 键,打开“层”面板,可以看到所有的层都显示在其中。l 要更改层的排列次序,可通过修改层的Z 值来实现。单击Z 列中的数字,为所选层输入新的Z 值,即可改变层的排列顺序。网页设计与制作课件 2012
8、.2层的基本操作l 插入层l 设置层的属性l 选择层l 调整层的大小l 移动层网页设计与制作课件 2012.2插入层l 将光标置于要插入层的位置,执行“插入”“布局对象”“层”命令 设置层的属性l 选择一个层,执行“窗口”“属性”命令,打开“属性”面板来更改层的属性。网页设计与制作课件 2012.2选择层l 选择层的三种方法是:将光标移动至需选择的层边框,光标变为,单击鼠标左键即可选择该层。在层的内部单击属性,显示层的选择柄,单击选择柄,即可选择层,如果选择柄不可见,可在该层中的任意位置单击以显示该选择柄。打开“层”面板,在“层”面板中选择层名称,即可选择该层。按shift可以选择多个层。网页
9、设计与制作课件 2012.2调整层的大小l 单击层的边框调整层的大小l 使用属性面板调整层的大小网页设计与制作课件 2012.24.3 利用行为制作动态页面l 一般说来,动态网页是通过JavaScript或基于JavaScript的DHTML代码来实现的。包含JavaScript脚本的网页,还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业,需要专门学习,而Dreamweaver 提供了“行为”的机制,虽然行为也是基于JavaScript来实现动态网页和交互的,但却不需书写任何代码。在可视化环境中单击几个按钮,填几个选项就可以实现丰富的动态页面效果,实现人与页面的简单交互。网页设计与制作
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- dreamwaver 网页 设计 4041
限制150内