网页制作-06-ds1PPT资料.ppt
《网页制作-06-ds1PPT资料.ppt》由会员分享,可在线阅读,更多相关《网页制作-06-ds1PPT资料.ppt(27页珍藏版)》请在冰豆网上搜索。
内嵌样式表、行内样式表、外部样式的区别?
2222南京航空航天大学南京航空航天大学预习检查预习检查请大家叙述网站开发的大致流程?
请大家叙述网站开发的大致流程?
使用使用Dreamweaver创建站点有哪几步?
创建站点有哪几步?
页面布局有哪几种?
3333南京航空航天大学南京航空航天大学本章任务本章任务使用使用Dreamweaver创建淘宝网站点创建淘宝网站点使用使用Dreamweaver设计首页的整体布局设计首页的整体布局使用使用Dreamweaver制作首页的导航部分制作首页的导航部分使用使用Dreamweaver制作首页的广告部分制作首页的广告部分4444南京航空航天大学南京航空航天大学本章目标本章目标能使用网站设计流程分析简单网站的设计能使用网站设计流程分析简单网站的设计能使用能使用DIV层技术进行页面整体布局层技术进行页面整体布局能使用表格进行图文内容的布局能使用表格进行图文内容的布局5555南京航空航天大学南京航空航天大学网站开发的流程介绍网站开发的流程介绍网站开发的网站开发的4个步骤:
个步骤:
1、需求分析、需求分析客户需求客户需求确认需求确认需求业务背景业务背景设计风格设计风格网站内容网站内容提供样板提供样板6666南京航空航天大学南京航空航天大学网站开发的流程介绍网站开发的流程介绍2、网站制作、网站制作3、测试网页、测试网页4、发布网站、发布网站创建站点创建站点制作首页制作首页制作模板制作模板制作样式制作样式保证让保证让InternetExplorer和和MozillaFirefox浏览器能比较浏览器能比较好地展示你的作品好地展示你的作品制作好的网站,经测试之后,就可以在服务器上发布,这制作好的网站,经测试之后,就可以在服务器上发布,这样,能让更多的人知道您的网站样,能让更多的人知道您的网站7777南京航空航天大学南京航空航天大学需求分析需求分析客户需求客户需求业务背景业务背景淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台设计风格设计风格淘宝网具有鲜明、亮丽、明快、时尚的风格淘宝网具有鲜明、亮丽、明快、时尚的风格网站内容网站内容公司简介公司简介、商品分类、商品分类、商品展示、商品展示、价格信息、价格信息、商品搜索、商品搜索、网上订单、网上订单、会员注册会员注册、客户服务等、客户服务等确认需求确认需求提供给客户一个前期静态的设计样板提供给客户一个前期静态的设计样板(可用可用photoshop制作制作)演示示例演示示例11:
静态静态DemoDemo演示演示大家想想淘宝网大家想想淘宝网的业务背景的业务背景8888南京航空航天大学南京航空航天大学创建站点创建站点使用使用Dreamweaver创建站点的步骤如下:
创建站点的步骤如下:
1、选择、选择“新建站点新建站点”,然后为其命名,然后为其命名2、选择、选择“是否是否”使用服务器技术使用服务器技术3、选择、选择“编辑我的计算机上的本地副本编辑我的计算机上的本地副本”选选项项4、选择用于存储网站文件的文件夹、选择用于存储网站文件的文件夹5、选择连接到远程服务器的选项、选择连接到远程服务器的选项6、在、在“文件文件”面板中创建名为面板中创建名为images文件夹文件夹演示示例演示示例22:
在:
在Dreamweaver8Dreamweaver8中创建站点中创建站点用于存储网站文件用于存储网站文件的本地根目录的本地根目录相关文件和文相关文件和文件夹的集合件夹的集合9999南京航空航天大学南京航空航天大学页面内容页面内容导航部分导航部分广告部分广告部分商品分类部分商品分类部分版权声明部分版权声明部分如何实现这样的如何实现这样的页面布局?
页面布局?
10101010南京航空航天大学南京航空航天大学页面布局之框架布局页面布局之框架布局使用框架布局使用框架布局如何实现这样如何实现这样的页面布局?
的页面布局?
11111111南京航空航天大学南京航空航天大学框架布局框架布局使用使用Dreamweaver创建如下图所示的框架集页面创建如下图所示的框架集页面演示示例演示示例33:
框架布局演示素材框架布局演示素材框架布局演示答案框架布局演示答案12121212南京航空航天大学南京航空航天大学框架布局框架布局框架布局的优缺点和应用场合框架布局的优缺点和应用场合优点优点缺点缺点应用场合应用场合支持滚动条,方便导支持滚动条,方便导航,节省页面下载时航,节省页面下载时间等间等兼容性不好,保存时兼容性不好,保存时不方便,应用范围有不方便,应用范围有限等限等小型商业网站、论坛、小型商业网站、论坛、后台管理、学习教程等后台管理、学习教程等13131313南京航空航天大学南京航空航天大学小结小结1使用使用Dreamweaver制作如下图所示框架布局制作如下图所示框架布局练习答案练习答案练习素材练习素材14141414南京航空航天大学南京航空航天大学页面布局之表格布局页面布局之表格布局使用表格布局使用表格布局如何实现这样如何实现这样的页面布局?
15151515南京航空航天大学南京航空航天大学表格布局表格布局使用使用Dreamweaver创建如下图所示表格布局页面创建如下图所示表格布局页面演示示例演示示例44:
表格布局演示素材表格布局演示素材表格布局演示答案表格布局演示答案16161616南京航空航天大学南京航空航天大学表格布局表格布局表格布局的优缺点和应用场合表格布局的优缺点和应用场合优点优点缺点缺点应用场合应用场合方便排列有规律、结方便排列有规律、结构均匀的内容或数据构均匀的内容或数据产生垃圾代码、影响页面产生垃圾代码、影响页面下载时间、灵活性不大难下载时间、灵活性不大难于修改于修改内容或数据整内容或数据整齐的页面齐的页面17171717南京航空航天大学南京航空航天大学小结小结2使用使用Dreamweaver制作如下图所示表格布局制作如下图所示表格布局练练习习答答案案练习素材练习素材18181818南京航空航天大学南京航空航天大学页面布局之页面布局之DIV布局布局应用了应用了DIV布局的布局的淘宝网主页淘宝网主页如何实现这样如何实现这样的页面布局?
19191919南京航空航天大学南京航空航天大学什么是什么是DIVDIV元素是用来为元素是用来为HTML文档内大块的内容提供结文档内大块的内容提供结构和背景的元素。
构和背景的元素。
创建创建DIV的步骤如下:
的步骤如下:
1、新建一个空白文档、新建一个空白文档2、选择、选择“插入插入”“布局布局对象象”“层”或者或者在在“布局布局”插入插入栏使用使用“绘制制层”按按钮进行行绘制制层演示示例演示示例55:
演示绘制层:
演示绘制层用用Dreamweaver绘制如绘制如下图所示的下图所示的3个层,并为个层,并为每个层设置不同颜色每个层设置不同颜色20202020南京航空航天大学南京航空航天大学什么是什么是DIV#Layer1position:
absolute;
left:
9px;
top:
12px;
width:
418px;
height:
58px;
z-index:
1;
background-color:
#FF0000;
查看源代码查看源代码ID样式选择符,样式选择符,方便层引用方便层引用绝对定位绝对定位层距离浏览器左边层距离浏览器左边界和上边界的距离界和上边界的距离层的宽度和高度层的宽度和高度层叠顺层叠顺序编号序编号层背景色层背景色层引用样式层引用样式Id为为Layer1的层的层所对应的效果所对应的效果21212121南京航空航天大学南京航空航天大学DIV层布局层布局DIV布局的优缺点和应用场合布局的优缺点和应用场合优点优点缺点缺点应用场合应用场合代码精简、提高页面代码精简、提高页面下载速度、表现和内下载速度、表现和内容相分离等容相分离等比较灵活比较灵活难于控制难于控制复杂的不规则复杂的不规则页面、业务种页面、业务种类较多的大型类较多的大型商业网站商业网站22222222南京航空航天大学南京航空航天大学最佳布局最佳布局如如何何实实现现这这样样的的页页面面布布局局?
head导导航块层航块层content内容块层内容块层foot版版权块层权块层表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格使用使用DIVTABLE,整体布局用,整体布局用DIV,每个块的内容用表格,每个块的内容用表格23232323南京航空航天大学南京航空航天大学最佳布局最佳布局创建如下图所示创建如下图所示DIV+表格布局的页面表格布局的页面演示示例演示示例66:
演示素材演示素材演示答案演示答案24242424南京航空航天大学南京航空航天大学小结小结3使用使用Dreamweaver制作如下图所示布局页面制作如下图所示布局页面练习素材练习素材练习答案练习答案25252525南京航空航天大学南京航空航天大学总结总结简述网站开发的流程。
简述网站开发的流程。
说明框架布局使用的场合。
简述表格布局的优点与缺点。
详述详述DIVDIV布局的优点以及使用场合。
布局的优点以及使用场合。
26262626南京航空航天大学南京航空航天大学谢金国:
ThankYou!
Sep.11,2008