网站设计和页面布局技术(一).ppt

网站设计和页面布局技术(一).ppt

ID:48832176

大小:4.03 MB

页数:27页

时间:2020-01-31

网站设计和页面布局技术(一).ppt_第1页
网站设计和页面布局技术(一).ppt_第2页
网站设计和页面布局技术(一).ppt_第3页
网站设计和页面布局技术(一).ppt_第4页
网站设计和页面布局技术(一).ppt_第5页
资源描述:

《网站设计和页面布局技术(一).ppt》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、第六章网站设计和页面布局技术(一)回顾使用Dreamweaver在网页中如何插入Flash?使用表格如何对表单进行布局?如何实现细边框样式?2预习检查请大家叙述网站开发的大致流程?使用Dreamweaver创建站点有哪几步?页面布局有哪几种?3本章任务使用Dreamweaver创建淘宝网站点使用Dreamweaver设计首页的整体布局使用Dreamweaver制作首页的导航部分使用Dreamweaver制作首页的广告部分4能使用网站设计流程分析简单网站的设计能使用DIV层技术进行页面整体布局能使用表格进行图文内容的布局本章目标

2、5网站开发的流程介绍网站开发的4个步骤:1、需求分析客户需求确认需求业务背景设计风格网站内容提供样板6网站开发的流程介绍2、网站制作3、测试网页4、发布网站保证让InternetExplorer和MozillaFirefox浏览器能比较好地展示你的作品制作好的网站,经测试之后,就可以在服务器上发布,这样,能让更多的人知道您的网站创建站点制作首页制作模板制作样式7需求分析客户需求业务背景淘宝网提供了一个商品展示、在线购物、交互服务和管理的平台设计风格淘宝网具有鲜明、亮丽、明快、时尚的风格网站内容公司简介、商品分类、商品展示、价格

3、信息、商品搜索、网上订单、会员注册、客户服务等确认需求提供给客户一个前期静态的设计样板(可用photoshop制作)演示示例1:静态Demo演示大家想想淘宝网的业务背景8创建站点使用Dreamweaver创建站点的步骤如下:1、选择“新建站点”,然后为其命名2、选择“是否”使用服务器技术3、选择“编辑我的计算机上的本地副本…”选项4、选择用于存储网站文件的文件夹5、选择连接到远程服务器的选项6、在“文件”面板中创建名为images文件夹演示示例2:在Dreamweaver8中创建站点用于存储网站文件的本地根目录相关文件和文件夹

4、的集合9页面内容导航部分广告部分商品分类部分版权声明部分如何实现这样的页面布局?10页面布局之框架布局使用框架布局如何实现这样的页面布局?11框架布局使用Dreamweaver创建如下图所示的框架集页面演示示例3:框架布局演示素材框架布局演示答案12框架布局框架布局的优缺点和应用场合优点缺点应用场合支持滚动条,方便导航,节省页面下载时间等兼容性不好,保存时不方便,应用范围有限等小型商业网站、论坛、后台管理、学习教程等13小结1使用Dreamweaver制作如下图所示框架布局练习答案练习素材14页面布局之表格布局使用表格布局如何

5、实现这样的页面布局?15表格布局演示示例4:表格布局演示素材表格布局演示答案使用Dreamweaver创建如下图所示表格布局页面16表格布局表格布局的优缺点和应用场合优点缺点应用场合方便排列有规律、结构均匀的内容或数据产生垃圾代码、影响页面下载时间、灵活性不大难于修改内容或数据整齐的页面17小结2使用Dreamweaver制作如下图所示表格布局练习答案练习素材18页面布局之DIV布局应用了DIV布局的淘宝网主页如何实现这样的页面布局?19什么是DIVDIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。创建DIV的步

6、骤如下:1、新建一个空白文档2、选择“插入”“布局对象”“层”或者在“布局”插入栏使用“绘制层”按钮进行绘制层演示示例5:教员演示绘制层用Dreamweaver绘制如下图所示的3个层,并为每个层设置不同颜色20什么是DIV#Layer1{position:absolute;left:9px;top:12px;width:418px;height:58px;z-index:1;background-color:#FF0000;}…………

7、">

……查看源代码ID样式选择符,方便层引用绝对定位层距离浏览器左边界和上边界的距离层的宽度和高度层叠顺序编号层背景色层引用样式Id为Layer1的层所对应的效果21DIV层布局优点缺点应用场合代码精简、提高页面下载速度、表现和内容相分离等比较灵活难于控制复杂的不规则页面、业务种类较多的大型商业网站DIV布局的优缺点和应用场合22最佳布局如何实现这样的页面布局?head导航块层content内容块层foot版权块层表格表格表格表格表格表格表格表格使用DIV+TABLE,整体布局用DIV,每个块的内容用表格23最佳布

8、局创建如下图所示DIV+表格布局的页面演示示例6:演示素材演示答案24小结3使用Dreamweaver制作如下图所示布局页面练习答案练习素材25总结简述网站开发的流程。说明框架布局使用的场合。简述表格布局的优点与缺点。详述DIV布局的优点以及使用场合。2627

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。