电子商务网页设计项目四网页元素的编辑.pptx

创建站点和管理本地站点 1 任务分析 创建一个名为“我的淘宝网站点”的本地站点,并管理该站点。 相关知识 1.站点 站点是一组具有共享属性的链接文档和资源,在Dreamweaver CS5中,站点通常指本地或远程的某个存储位置。 2.常用站点 Dreamweaver CS5提供了三种常用的站点:本地站点、远程站点和测试站点。 本地站点是指存放在本地计算机硬盘上的站点,一般是将本地计算机作为服务器进行测试时使用的站点。 远程站点是指存放在远程服务器上的网站站点,也就是网站文件通过本地站点的测试后,上传到远程服务器上的站点位置。 测试站点是测试动态网页的站点。 任务实施 (1)在本地磁盘E盘创建一个名为“Myweb”的文件夹,并在“Myweb”文件夹中新建两个子文件夹,分别命名为“images”和“pages”。 (2)在Dreamweaver CS5中选择菜单栏中的“站点”→“新建站点”,打开“站点设置对象”对话框,在该对话框中的“站点名称”文本框中输入站点的名称“我的淘宝站点”。点击“本地站点文件夹”对话框右边的 图标,在弹出的对话框中,选择E盘下面的“Myweb”文件夹,显示存储位置为“E:\Myweb\” (3)单击“保存”按钮,Dreamweaver CS5会自动默认生成了一个站点,在Dreamweaver CS5右侧的文件夹面板中即可查看新建的站点信息,如站点名称、站点结构、站点所在位置等 创建电子商务网站主页 2 任务分析 根据任务一创建的站点,使用Dreamweaver CS5创建一个电子商务网站主页index.html,如图所示。该网页比较简单,旨在掌握文档的创建、编辑、保存、预览、打开和关闭等基本操作,以及页面属性的设置等。 相关知识 1.创建文档 打开Dreamweaver CS5软件,选择“文件”→“新建”菜单项,打开“新建文档”对话框,选择“空白页面”,页面类型为“HTML”,布局选择“无”,单击“创建”即可新建一个空白文档。 2.保存文档 网页文件编辑完毕,需要对该文档进行保存,单击“文件”→“保存”菜单项,打开“另存为”对话框,选择相对应的保存路径,在“文件名”文本框中输入文件的名称,在“保存类型”下拉列表中选择要保存的文件类型,最后单击“保存”。 3.打开文档 要打开已有的文档,只需要单击“文件”→“打开”菜单项,即可打开选择文档的对话框,在“查找范围”依次展开目标文档的路径 4.关闭文档 文档编辑或者修改完毕后,可以单击编辑界面上方的关闭图标关闭当前文档,也可以选择“文件”→“关闭”菜单项关闭当前文档。如果要关闭所有文档,可以选择“文件”→“关闭所有”菜单项关闭所有文件。 5.预览页面效果 编辑页面后,可以单击文档上方的 按钮,选择适当的浏览器浏览,也可以按F12键浏览网页效果。 任务实施 (1)打开Dreamweaver CS5软件,新建一个空白页,在标题栏中输入“我的淘宝网站”,保存文件名为“index.html”,并保存到任务一所创建的“我的淘宝网站点”的根目录E:\Myweb下。 (2)在文档编辑区输入“您好!欢迎访问我的淘宝网站!” (3)单击属性面板中的“页面属性”,在弹出的“页面属性”对话框中,选择分类的标题(CSS),标题字体为华文新魏,标题1大小为36PX,颜色为 。 (4)选取文本“您好!欢迎访问我的淘宝网站!”,在属性面板里修改格式为标题1所示。 (5)保存网页。 (6)按F12键预览,页面显示效果所示。 电子商务网页的文本及图像编辑 3 任务分析 根据任务一,制作一个简单的电子商务网页。网页标题栏显示“我的淘宝网站”,网页背景色设置为粉红色,在网页中有文本、图像、Flash动画等元素,效果如图所示。 相关知识 1.网页的文本及文本编辑 文本是网页的基本组成元素之一,通过文本获取信息是用户浏览网页时获取信息最直接、最快捷的方式。恰当地在网页中使用文本不仅可以充分、准确地表达设计者的意图,还能使网页变得通俗易懂。 2.网页的图像及图像编辑 在网页中使用图像可以使网页的内容更加丰富多彩、形象生动,吸引浏览者。 目前,网页中常用的图像格式主要有jpg、gif或png格式,其中gif和jpg两种图像格式的文件较小,在网络上的装载速度很快,适合网络传输,而且能够被大多数的浏览器支持,是网页制作中最为常用的图像格式。 3.多媒体素材 在网页中还可以插入各种多媒体对象,如Flash动画、Flash文本、Flash按钮等,从而创建更加生动的多媒体网页。Flash动画可以直接从右侧的文件面板中拖到设计窗口中,或者通过菜单栏的“插入”→“媒体”→“SWF”选项的方式插入。 任务实施 (1)根据任务二所创建的站点,将素材文件夹images和flash文件复制到站点文件夹中。 (2)打开Drea