（中职）电子商务网页设计项目四 网页元素的编辑课件

1、YCF正版可修改PPT（中职）电子商务网页设计项目四 网页元素的编辑ppt课件创建站点和管理本地站点1任务分析创建一个名为“我的淘宝网站点”的本地站点,并管理该站点。相关知识1.站点站点是一组具有共享属性的链接文档和资源,在Dreamweaver CS5中,站点通常指本地或远程的某个存储位置。2.常用站点Dreamweaver CS5提供了三种常用的站点:本地站点、远程站点和测试站点。本地站点是指存放在本地计算机硬盘上的站点,一般是将本地计算机作为服务器进行测试时使用的站点。远程站点是指存放在远程服务器上的网站站点,也就是网站文件通过本地站点的测试后,上传到远程服务器上的站点位置。测试站点是测

2、试动态网页的站点。任务实施(1)在本地磁盘E盘创建一个名为“Myweb”的文件夹,并在“Myweb”文件夹中新建两个子文件夹,分别命名为“images”和“pages”。(2)在Dreamweaver CS5中选择菜单栏中的“站点”“新建站点”,打开“站点设置对象”对话框,在该对话框中的“站点名称”文本框中输入站点的名称“我的淘宝站点”。点击“本地站点文件夹”对话框右边的图标,在弹出的对话框中,选择E盘下面的“Myweb”文件夹,显示存储位置为“E:Myweb”(3)单击“保存”按钮,Dreamweaver CS5会自动默认生成了一个站点,在Dreamweaver CS5右侧的文件夹面板中即可

3、查看新建的站点信息,如站点名称、站点结构、站点所在位置等创建电子商务网站主页2任务分析根据任务一创建的站点,使用Dreamweaver CS5创建一个电子商务网站主页index.html,如图所示。该网页比较简单,旨在掌握文档的创建、编辑、保存、预览、打开和关闭等基本操作,以及页面属性的设置等。相关知识1.创建文档打开Dreamweaver CS5软件,选择“文件”“新建”菜单项,打开“新建文档”对话框,选择“空白页面”,页面类型为“HTML”,布局选择“无”,单击“创建”即可新建一个空白文档。2.保存文档网页文件编辑完毕,需要对该文档进行保存,单击“文件”“保存”菜单项,打开“另存为”对话框

4、,选择相对应的保存路径,在“文件名”文本框中输入文件的名称,在“保存类型”下拉列表中选择要保存的文件类型,最后单击“保存”。3.打开文档要打开已有的文档,只需要单击“文件”“打开”菜单项,即可打开选择文档的对话框,在“查找范围”依次展开目标文档的路径4.关闭文档文档编辑或者修改完毕后,可以单击编辑界面上方的关闭图标关闭当前文档,也可以选择“文件”“关闭”菜单项关闭当前文档。如果要关闭所有文档,可以选择“文件”“关闭所有”菜单项关闭所有文件。5.预览页面效果编辑页面后,可以单击文档上方的按钮,选择适当的浏览器浏览,也可以按F12键浏览网页效果。任务实施(1)打开Dreamweaver CS5软件

5、,新建一个空白页,在标题栏中输入“我的淘宝网站”,保存文件名为“index.html”,并保存到任务一所创建的“我的淘宝网站点”的根目录E:Myweb下。(2)在文档编辑区输入“您好!欢迎访问我的淘宝网站!”(3)单击属性面板中的“页面属性”,在弹出的“页面属性”对话框中,选择分类的标题(CSS),标题字体为华文新魏,标题1大小为36PX,颜色为。(4)选取文本“您好!欢迎访问我的淘宝网站!”,在属性面板里修改格式为标题1所示。(5)保存网页。(6)按F12键预览,页面显示效果所示。电子商务网页的文本及图像编辑3任务分析根据任务一,制作一个简单的电子商务网页。网页标题栏显示“我的淘宝网站”,网

6、页背景色设置为粉红色,在网页中有文本、图像、Flash动画等元素,效果如图所示。相关知识1.网页的文本及文本编辑文本是网页的基本组成元素之一,通过文本获取信息是用户浏览网页时获取信息最直接、最快捷的方式。恰当地在网页中使用文本不仅可以充分、准确地表达设计者的意图,还能使网页变得通俗易懂。2.网页的图像及图像编辑在网页中使用图像可以使网页的内容更加丰富多彩、形象生动,吸引浏览者。目前,网页中常用的图像格式主要有jpg、gif或png格式,其中gif和jpg两种图像格式的文件较小,在网络上的装载速度很快,适合网络传输,而且能够被大多数的浏览器支持,是网页制作中最为常用的图像格式。3.多媒体素材在网

7、页中还可以插入各种多媒体对象,如Flash动画、Flash文本、Flash按钮等,从而创建更加生动的多媒体网页。Flash动画可以直接从右侧的文件面板中拖到设计窗口中,或者通过菜单栏的“插入”“媒体”“SWF”选项的方式插入。任务实施(1)根据任务二所创建的站点,将素材文件夹images和flash文件复制到站点文件夹中。(2)打开Dreamweaver CS5软件,选择“文件”“打开”菜单,打开任务二创建的站点下的index.html,在属性面板里选择“页面属性”,弹出“页面属性”对话框,选择“外观(HTML)”“背景”,将颜色设置为粉红色(#FFCCFFF),点击“确定”。(3)在编辑区内

8、选择之前已经编辑好的“您好!欢迎访问我的淘宝网站!”,选择属性面板左边的 图案。然后选择对齐方式中的居中对齐,就会弹出“新建CSS规则”对话框,在对话框中的“选择器名称”栏输入CSS样式名称为“ys01”,然后按“确定”按钮。(4)在标题下一行输入“首页”、“半身裙”、“连衣裙”、“针织裙”、“联系我们”,中间以空格分隔。文本之间只需一个空格时,按空格键即可;若需要插入多个空格时,可以使用快捷键Ctrl+Shift+空格键。选中这些文本,在“属性面板”设置目标规则为“.ys02”,字体为华文新魏,排列为居中,大小为24,颜色为#96F。(5)在“联系我们”后按回车键,选择“插入”“媒体”“SW

9、F”,会弹出“选择SWF”对话框,选择站点路径文件夹中的“dazhe.swf”文件,点击“确定”。点击“属性面板”中的“播放”按钮查看动画效果,动画效果是循环显示这一排文字。(6)在flash动画后按回车键,选择“插入”“图像”菜单项,打开“选择图像源文件”对话框,选择“图像1.jpg”,点击“确定”按钮,即可在网页中插入第一张图像。用同样的方法依次插入另外五张图像,并调整为两行显示。(7)选中第一张图像,在“属性面板”的“边框”文本框里输入2,垂直边距和水平边距均设置为10。最后,将其余五张图像按照上述方法依次设置即可。设置完成后,六张图像之间即有了一定的距离,且图像边缘均出现黑色边框,如图

10、424所示。(8)选择“文件”“保存”,保存文件。按F12键预览,即可显示页面效果。使用超链接创建链接页面4任务分析在任务三创建的“我的淘宝网站”主页的基础上,继续创建“半身裙”、“连衣裙”、“针织裙”、“联系我们”四个超链接页面。相关知识1.超链接所谓超链接就是浏览者可以通过点击设置超链接的文字、图像等网页元素来访问与其对应的页面、网站或其他元素,通过超链接可以将各个相关的页面联系在一起,构成一个完整的网页或网站。在网页中使用超链接可以使浏览者更加方便地访问各页面。2.URLURL(Uniform Resource Locator,统一资源定位器)也称为网页地址,可以表示互联网上任何一个文档

11、,甚至一个文档内部的某个点,也可以是互联网上的一个站点。3.超链接的路径超链接路径一般分为绝对路径和相对路径。在制作网页时,使用的多是本地资源,超链接一般选择相对路径,因为使用绝对路径不易于网站的移植,当网页上传到服务器后,使用绝对路径的文件无法被访问,链接必定会发生错误。而使用相对路径就可以方便地对网站文件进行移植,无须更改各页面的链接。4.超链接的分类超链接一般包括三种:站内链接、外部链接和本页链接。其中,链接到网站内部某个页面的称为站内链接;链接到其他网站的链接称为外部链接;链接到当前页面的指定位置的链接称为本页链接。任务实施(1)创建四个空白页,分别命名为“banshenqun.htm

12、l”、“lianyiqun.html”、“zhen-zhiqun.html”、“lianxi.html”,保存到根目录中的pages文件夹下。(2)在“banshenqun.html”页面的编辑区内,按照之前学习的方法,完成页面的前半部分。(3)在flash后面按回车键,选择“插入”“图像”菜单项,打开“选择源文件”对话框,选择半身裙图像“banshenqun1.jpg”,点击“确定”,在网页中插入第一张图像,并设置图像的水平和垂直边距均为10,边框为2。(4)按照上述方法,依次插入图像“banshenqun2.jpg”、“banshenqun3.jpg”、“banshenqun4.jpg”、

13、“banshenqun5.jpg”、“banshenqun6.jpg”,按两行显示。(5)选择“文件”“保存”,保存好制作的网页。(6)打开之前制作好的“index.html”页面,将光标置于文本“半身裙”上,右键打开快捷菜单,选择“创建链接”,打开“选择文件”对话框,查找并选择网页文件“banshenqun.html”，点击“确定”按钮。(7)设置好文本“半身裙”的超链接后,文本的颜色会加深,并且有下划线。可以通过“属性面板”的“页面属性”弹出菜单栏来修改超链接文本的状态,在菜单栏中,选择“链接CSS”可以修改链接文本的颜色、是否有下划线等。(8)按照上述步骤操作,依次创建网页“lianyiqun.html”、“zhenzhiqun.html”、“lianxi.html”,并且在主页中将文本“连衣裙”设置超链接到网页“lianyiqun.html”,文本“针织裙”设置超链接到网页“zhenzhiqun.html”,文本“联系我们”设置超链接到网页“lianxi.htm