ImageVerifierCode 换一换
格式:PPTX , 页数:15 ,大小:1.75MB ,
文档编号:4474939      下载积分:20 文币
快捷下载
登录下载
邮箱/手机:
温馨提示:
系统将以此处填写的邮箱或者手机号生成账号和密码,方便再次下载。 如填写123,账号和密码都是123。
支付方式: 支付宝    微信支付   
验证码:   换一换

优惠套餐
 

温馨提示:若手机下载失败,请复制以下地址【https://www.163wenku.com/d-4474939.html】到电脑浏览器->登陆(账号密码均为手机号或邮箱;不要扫码登陆)->重新下载(不再收费)。

已注册用户请登录:
账号:
密码:
验证码:   换一换
  忘记密码?
三方登录: 微信登录  
下载须知

1: 试题类文档的标题没说有答案,则无答案;主观题也可能无答案。PPT的音视频可能无法播放。 请谨慎下单,一旦售出,概不退换。
2: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。
3: 本文为用户(momomo)主动上传,所有收益归该用户。163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 本站仅提供交流平台,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

版权提示 | 免责声明

1,本文(《电子商务网页设计与制作》课件第八章.pptx)为本站会员(momomo)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!

《电子商务网页设计与制作》课件第八章.pptx

1、第八章设置DIV+CSS布局 随着Web 2.0网站的盛行,符合Web标准的设计成为目前网站设计所要遵循的首要原则。而基于Web标准的网站设计其核心在于实现内容与表现相分离,DIV+CSS恰恰是目前比较主流的一种网页布局方法,它有别于传统的表格布局模式,可以真正实现这一核心标准。本章即是基于“DIV+CSS”技术,使用Dreamweaver来实现“个人网站”的设计与制作。知识目标(1)掌握Web的标准。(2)了解XHTML的基础。(3)掌握DIV的概念。(4)掌握CSS语法规则。(5)了解模板和库的概念和应用。学习完本章后,学生应当能够依据前期的网站策划及效果图完成个人网站的DIV+CSS布局

2、,包括:(1)学会利用“DIV+CSS”完成页面的布局,灵活运用该技术的布局思路及方法。(2)学会使用“模板和库”进行网页的布局。第一节个人网站首页的制作本节的目标是依据“个人网站”的首页效果图,使用DIV+CSS技术,完成网站首页的制作一、绘制首页结构布局草图一、绘制首页结构布局草图根据首页效果图,利用Photoshop软件绘制首页的结构布局草图,效果如图8-2所示。对照布局草图,首页中各个版块的内容如下:(1)top,主要放置LOGO或者配套文字。(2)lan,设置欢迎语样式。(3)leftblank,设置区块样式。(4)pic,主要放置个人相册图片展示。(5)rightdiv,放置常用的

3、链接文字及首页导航条。(6)midmainleft,放置美文欣赏及一些标签文字链接。(7)xian,放置版块分割线。(8)rightcontent,放置音乐推荐及圈子好友推荐。(9)bottom,放置网页的版权信息。二、新建站点新建个人网站的站点“gerenwangzhan”,创建好的站点效果如图8-3所示。三、制作页面(1)执行“文件|新建”命令,在弹出的对话框中设置页面类型为“CSS”,点击“创建”按钮,如图8-4所示。(2)打开文件“Default.html”,切换到“代码”视图,在和之间输入代码:用于实现将CSS样式文件链接到当前的网页。(3)在新建的CSS文件中输入代码:(4)切换到

4、切换到“Default.html”的代码视图的代码视图,在在和和之间添加之间添加div,代代码如下码如下:(5)切换到切换到CSS文件文件,继续添加继续添加CSS样式样式,代码如下代码如下:(6)继续在网页的代码视图下添加代码,具体如下:圈子好友美文欣赏个人相册音乐推荐(7)切换到CSS文件,新建自定义样式“.leftblank”“.pic”“.rightdiv”“.rightdiv li”,代码如下:.leftblank width:36px;/*设置区块的宽度*/height:169px;/*设置区块的高度*/float:left;/*设置区块浮动方向为左*/background:#000

5、;/*设置区块背景色*/.picpadding-left:70px;/*设置区块左边距为70像素*/float:left;width:542px;height:169px;.rightdivpadding-top:7px;padding-left:l0px;width:245px;height:162px;float:left;background:#cac75e;.rightdiv lifont-family:黑体;/*设置字体*/padding-top:3px;/*设置上边距为3像素*/font-size:15px;/*设置字号*/font-weight:bold;/*设置字体加粗*/li

6、ne-height:31px;padding-left:50px;padding-bottom:5px;background:url(images/linews.jpg)no-repeat;/*设置背景色为图片,其相对路径为images/linews jpg*/width:188px;height:31px;第二节第二节个人网站子页面的制作个人网站子页面的制作一、创建网站与页面模板(1)打开网站的首页文件“Default.html”,执行“文件|另存为模板”命令,将网站保存为模板文件Default.dwt,如图8-12所示。(2)删除并调整模板文件中的Flash动画所在的div中的部分代码,修

7、改后的代码如图8-13所示。(3)将光标定位在“”中间,在菜单栏选择“插入”“模板对象”“可编辑区域”,在弹出的对话框中点击“确定”按钮,即可插入可编辑区域,名称为EditRegion3,二、通过模板生成“店铺公告”页面(1)执行“文件|新建”命令,在弹出的对话框中选择“模板中的页”选项,然后在站点列表中选择站点“gerenwangzhan”,接着选择模板文件“Default”,点击“创建”按钮即可基于模板创建网页,并将页面保存为mwxs.html,(2)将光标定位至网页文件“mwxs.html”的可编辑区域中,输入如下代码:治愈系图片欣赏查看更多美文打开样式表文件“Default.css”,

8、添加样式文件,具体代码如下:.xianlbackground:url(images/rightbian.jpg);width:22px;float:left;height:300px;.rightctpadding-left:15px;width:310px;float:left;height:300px;.middlwidth:521px;height:300px;float:left;padding-left:106px;.contentlline-height:18px;float:left;height:146px;width:518px;padding-left:0px;.litlepiclwidth:124px;height:124px;float:left;border:0px;margin-left:2px;border:1px#000 solid;(3)切换到网页文件的代码窗口,在“”之间嵌套代码,具体如下:1.DIV+CSS布局的优势有哪些?2.简述Web标准及其发展趋势。3.简述对CSS盒子模式的理解。4.简述SPAN元素和DIV元素的区别与用法,并分别写出一个例子。

侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|