项目七公开课教案教学设计课件资料.docx

《项目七公开课教案教学设计课件资料.docx》由会员分享，可在线阅读，更多相关《项目七公开课教案教学设计课件资料.docx（20页珍藏版）》请在第一文库网上搜索。

1、项目七任务一活动1布局淘宝PC端首页店铺的首页非常重要就和商场一样，如果你的店铺没有一点让人心跳的感觉，消费若凭什么买单?想要成为淘宝买家的朋友.在创建店铺首页前有很多工作需要准备，我们需要根据店铺销售的产品来确定店铺的风格、色彩搭配:需要根据店铺名称绘制店铺的1ogo,制作店招、店铺海报、导航、宝贝推荐和页尾等模块。首页是店铺的门面，是向买家传递店铺的整体风格和产品定位的，店铺首页就好比实体店的招牌，它决定了是否能让买家第一眼就记住我们的店铺。就如商场里会贴上明星产品的海报、布置商品的货架等，淘宝店铺的页面同样需要店招、海报展示、促销商品展示、主推商品展示客服和页脚等模块。当然，我们还需要知

2、道每个模块的尺寸，以方便作图。一般淘宝页面的通栏尺寸是950像素，双栏是190像素和750像素。作业助手小助手1:表格定义大小的技巧表格应尽量使用绝对像素定义其大小，以免浏览器分辨率不同时产生变形。一个网页要尽量避免将所有的内容都嵌套在一个大表格中，因为浏览器在解析页面元素时,是以表格为单位逐一显示，如果一个网页是嵌套在一个大表格中，那么，当浏览者输入网址浏览网页时，可能会在空白窗口停留很长时间以等待加载网页，加载完后所有的网页内容才同时出现。另外,在表格代码中添加标记，可使表格分块显示，从而加快网页下载时间，其写法zz.,o如果页面中添加表格只是为了布局页面，应该将表格边框设置为0,在浏览时

3、将不显示表格边框,从而使网页更美观。小助手2:表格属性与单元格属性表格属性与单元格属性会相互叠加，如果有相同的属性设置，单元格的属性优先于表格的属性。如设置表格背景颜色为红色，设置某个单元格背景颜色为白色，则该单元格的颜色为白色。小助手3:手动调整表格在某个单元格中插入内容后，为适应内容大小，将使其他单元格的宽度或高度发生改变，这时需要进行手动调整，如果需要在多个单元格中添加内容，应该将所有内容添加完后再统一进行调整。知识链接常见网页布局形式网页的布局除了实用性和审关性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆脱了HTM1时代，但是还没有完全做到挥酒自如，这就决定了网页的布

4、局是有一定规则的。1 .左右对称结构布局左右对称结构是网页布局中最为简单的一种。左右对称指的是在视觉上相对对称，而非几何意义上的对称。这种结构将网页分割为左右两个部分。一般使用这种结构的网站均把导航区设置在左半部或右半部，而对应部分被用作主体内容的区域。左右对称结构便于浏览者直观地读取主体内容，但是不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适。2 .“同字形结构布局“同”字形结构名副其实。采用这种结构的网页，往往将导航区置于页面顶端，将一些诸如广告条、友情链接、搜索引擎、注册按钮、登录面板、栏目条的内容置于页面两侧，中间为主体内容。这种结构比左右对称结构要复杂点，不但有

5、条理，而且直观，有视觉上的平衡感，但是这种结构给人一种死板、僵化的感觉。使用这种结构时，高超的用色技巧会规避“同字形结构的缺陷。3 .“回”字形结构布局“回”字形结构实际上是对同字形结构的一种变形，即在“同”字形结构的下面增加了一个横向通栏。这种变形将同字形结构不是很重视的页脚利用起来,增大了主体内容区域，合理地利用页面有限的面积,但往往使页面充斥着各种内容，显得拥挤不堪。4 .匡”字形结构布局和“回”字形结构一样，匡”字形结构其实也是“同字形结构的一种变形，也可以认为是将回字形结构的右侧栏目条去掉得出的新的结构。这种结构是“同”字形结构和“回”字形结构的折中，承载的信息量与同字形相同,而且改

6、善了回字形的封闭结构。除了上述4种常见的网页结构布局之外，网页结构布局还包括以下几种:自由式结构布局，如以图像、F1ash,视频为主题内容的化妆品网站等;“另类结构布局，如凸显前卫的设计类网站等;分栏型布局，如腾讯软件中心网页等;封面型布局，如百度首页等。活动2制作其他交易类电商网页淘宝网一一中国领先的个人交易电子商务平台，首页除了列有产品分类之外,还提供了热卖单品、精彩资讯、社区精华等相关内容。当会员进人其中某一产品分类后，.新网页里会有关于此类商品更为精细的分类，网页右侧还会出现掌柜热卖、最近浏览过的宝贝等提示,给会员在挑选商品时提供可选性和便捷性。同时，会员选中一件宝贝时,不但可以通过宝

7、贝描述了解该商品，还可以查看买家评价，综合评估这个商品是否值得购买。当当网一一全球知名的综合性网上购物商城，其网站布局设计较为合理，体现出了内容丰富、可视性强、图文并茂的特点。其网站的功能模块主要有商品分类区、产品展示区、商品服务区、商品搜索区、信息发布区等。对于这样一个融合了B2C、C2C、搜索引擎和门户网站的电子商务网站。作业助手小助手1:APDIV的创建APDIV具有可移动的特点，是DreamweaverCS6软件中最为灵活的网页元素,用户可以在页面中的任意位置对其进行创建和移动操作，也可在其中嵌套多个APDIV。可直接通过莱单栏进行插入，也可通过“布局选项卡进行绘制。小助手2:APDI

8、V的编辑操作“AP元素”面板显示了网页中所有的APD1V及各个APDIV之间的关系。在AP元素”面板中可以选择APDIV、设置APD1V的显示属性、设置APD1V的堆叠顺序和重命名APDIV等。小助手3:设置APDIV的堆叠顺序在DreamweaverCS6软件中创建多个APDIV且需要将其堆叠在一起时，可对其排列顺序（Z轴顺序）进行设置，控制需要显示的内容。通常先创建的APDIV的Z轴值低，而后创建的APDIV的Z轴值高，且Z轴值大的APD1V遮盖Z轴值小的APD1V的内容。设置APDIV的堆叠顺序可以在属性面板或AP元素面板中进行，也可以通过菜单命令来设置。小助手4:改变APDIV的可见性

9、通过设置APDIV的可见性可控制APDIV的隐藏与显示，以达到某些特殊的效果。如先在APDIV中创建需弹出的菜单，然后设置APDIV的可见性为隐藏,当单击某主莱单或将鼠标指针移到某莱单上时,改变弹出菜单APD1V的属性为可见，这样即可在APDIV中选择相应的莱单项。知识链接首页布局与色彩、字体的搭配设计站点结构和收集了足够的资源之后，就可以布局页面了。在DreamWeayVerCS6软件中，可以通过以下手段进行排版。（1）利用表格进行版面布局。表格主要有三个元素:表格、行和列及单元格。表格还可以安套，不过建议不要把所有的网页都放在一个大表格中，并且嵌套最好不要超过三层。国为这样做会使浏览器解析

10、的时间增加I,那么当浏览者访问时速度就慢。(2)利用层进行版面布局。层很适合形式自由的排版，现在Web标准建议排版时抛弃表格。不过初学者学习利用层排版时还要学习其他好多相关知识，其中最重要的是CSS和JavaScripto使用CSS来辅助层可以对网页实现排版，解决表格给我们带来的烦恼。(3)色彩的搭配。色彩是艺术表现的要素之一，它是光刺激眼睛再传导到大脑中枢而产生的一种感觉。而网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步，不同的色彩搭配会产生不同的视觉效果，并可能影响访问者的情绪。按照色彩的记忆性原则，一般暖色较冷色的记忆性强。红色一一一种激奋的色彩。具有刺激效果,能使人

11、产生冲动、愤怒、热情、活力的感觉。绿色一一介于冷暖两种色彩的中间，具有和睦、宁静、健康、安全的感觉。它和金黄、淡白搭配，可以产生优雅、舒适的气氛。橙色一一也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。黄色一一具有快乐、希望、智慧和轻快的个性,它的明度最高。蓝色一一是最具凉爽、清新、专业的色彩。它和白色混合，能体现柔顺、淡雅、浪漫的气氛（像天空的色彩）。白色一一具有洁白、明快、纯真、清洁的感觉。黑色一一具有深沉、神秘、寂静、悲哀、压抑的感觉。灰色一一具有中庸、平凡、温和、谦让、中立和高雅的感觉。（4）字体设置。和网站的色彩设计一样，设计网站的字体也是网页内涵的一种表现,得体的字体会

12、让人感觉美观、亲切，会让人心里感觉舒适。一般网页默认字体是宋体。如果你想体现出与众不同的风格，可以做一些特效的字体。使用特效字体只能用图片的形式。知识链接DIV+CSS布局流程1 .对页面进行整体规划在布局页面前，需要先对网页有一个整体的规划，确定网页的整体布局方式，如将页面分为5个部分，即头部、横幅、主要内容、链接和底部。2 .设置被分割的模块的位置对整个页面进行规划后，就可以对被规划的各模块的位置进行设置，确定页面的框架。如将头部信息放在网页最上方,将横幅放在头部下方，然后在下方左侧设置模块为链接,右侧模块为主要内容,而最下方则是底部。3 .使用CSS+DIV进行定位通过CSS对各个模块在

13、网页中的位置和大小进行确定，以设置页面的整体大小。4 .使用CSS进行美化确定布局后，就可以在其中添加页面内容，然后使用Css对页面元素进行美化,使网页效果更加美观。任务二活动1创建网页模板在制作店铺网站的过程中.如果每个店铺网站的每张页面都独立来制作，会浪费很多时间，因此必须充分利用DreamweverCS6软件的辅助功能来提高工作者的效率。模板的创建者可在模板中设计固定的页面布局，然后在模板中创建可编辑区域，方便修改。没有定义为可编辑区的部分就无法编辑其中的内容，这样,不可编辑区域就可以固定下来供多个文档共享。模板对包含大量具有相同布局的页面的站点来说，无疑是最高效的设计工具。模板文件与常

14、规网页文档有很大的区别，它使用专门的.dwt”格式，而非传统的.htm1“格式,并且对于含有多个网页文档的站点，其网站1OGO、页眉、导航栏以及页脚信息部分通常都是相同的,因此，可制作一个通用页面，在页面中把这些固定不变的部分锁定，而将其他不固定的区域（如正文部分）定义为可编辑部分。这样就可以在这个通用页面的基础上进行修改，从而制作出具有不同正文内容的子页面，这样不仅统一了整个网站的风格，同时也大大提高了工作效率。作业助手小助手1:创建网页模板的三种方式在DreamweaverCS6软件中有多种创建网页模板的方法，可根据实际情况和使用习惯选择适合自己的创建方式。使用新建文档对话框创建:在Dre

15、amweaverCS6软件中,单击文件/新建命令，打开新建文档对话框,在其中选择空模板选项卡,在模板类型列表框中选择HTM1模板选项,在布局列表框中选择一种布局样式,单击创建按钮，完成创建。在资源浮动面板中创建:执行窗口/资源命令，打开资源浮动面板，单击左侧的模板按钮切换到模板分类，再单击新建模板按钮，新建模板。使用插入浮动面板或菜单命令创建:新建或打开一个普通的HTM1文档，然后在插入浮动面板的常用分类列表中单击模板按钮，在弹出的下拉列表中选择创建模板选项或执行插入/模板对象/创建模板命令。小助手2:插入“可编辑区域的两种方法对于一个模板文档,其中至少应包含一个可编辑区域,否则将它套用到常规网页文档中将无法对任何区域进行编辑，使用模板也就变得没有任何意义。因此在模板中应该插入一个或一个以上的可编辑区域，对于其他几种区域可以根据设计需要进行添加，插入可编辑区域的方法有以下两种。通过莱单命令插入:在模板中目标位置定位插入点（或选中目标元素）,执行插入模板/可编辑区域命令（或按Cu1+A1t+V组合键）,打开新建可编辑区域对话框，在名称文本框中为添加的可编辑区域命名，单击确定按钮即可完成插入可编辑区域的操作。