电子商务网站建设和维护：项目二 建设简单促销专题网站.ppt

项目2 建设简单促销专题网站 ;学习目标;任务1 创建与管理站点;知识链接;二、认识网页编辑工具 1. 视图模式： 设计模式、代码模式、分割模式 2. 工作界面：;三、设计网站的目录结构 网站目录是指在创建网站时建立的目录，通常网站的目录结构规划需要遵循以下几个原则： 1. 分别建立相应的文件夹 2. 文件夹最好用英文来命名 3. 网站资源应归类放到相对应的文件夹中 4. 对网站不同类型的图片进行分类 ;任务实施; ②输入站点名称、按“打开” 按钮、选择站点所要保存的盘符与文件夹，按“保存”按钮。 ;step 2 管理站点 1 . 规划网站目录结构 ; 2 . 多站点管理 ① 执行“站点”→“管理站点”命令，复制“农业园新春活动High 翻天专题网站”，将其主目录设置为自定义的一个文件夹。 ; ② 单击“导出”按钮导出“农业园新春活动High 翻天专题网站”站点。 ;任务2 确定网页布局;知识链接; 2.“国”字形 ; 3.“三”字形 ; 4.“川”字形 ; 5. Flash 布局 ;任务实施; （2 ）制作顶部logo 和banner ① Logo 部分的制作： 选择“文件”→“导入”命令。 文字、字体、字型、字号、颜色、字间距 ② Banner 部分的制作： 选择“文件”→“导入”命令。 缩放、透明度、魔术棒 ; （3）制作导航 提示：导航对象的对齐方法有两种： 一是利用参考线：“视图”→“标尺”，从“标尺”处拖出蓝色的参考线； 二是利用“对齐”控制面板里的“对齐”和“分配”。 ;参考线; 2. 网页中部设计 效果如右图。; step 3 切片规划和组合 1 .设计图切片分割 ① 去除设计图中纯内容性的占位符和文字： ; ② 切片分割的程度视具体情况而定。 ; ③ 切片分割最终效果： ; 2. 导出切片 ① 选中要导出的切片，右击打开快捷菜单，选择“导出所选切片”选项，保存并命名。 ② 逐一导出各切片，集中保存在网站的“images”文件夹中，文件命名按顺序编号。 ;导出切片文件操作; 3 . 组合切片 （1）设置站点与页面 ① 新建站点和主页，规划好文件夹。 将切片文件复制到“images”文件夹中，“index.html”复制到“images”文件夹外面。 ; ② 对页面的共同属性进行统一规划与设置。 选择“修改”→“页面属性”命令 ; （2） 设计表格 ① 插入表格布局（千层糕式） ; ② 设置表格在页面居中 单击标签选择器“table”，选定表格，设置对齐方式为“居中对齐”。 ; ③ 制作网页中部“表格4”（可灵活设置） ; （3） 导入切片 ①光标定位在网页头表格的第一个单元格上，选择“插入”→“图像”命令。 ; ②导入多张图片 打开“文件”浮动面板，通过拖拉的方式将图片逐一导入相应位置。 （单击“请更改辅助功能首选参数”链接，在弹出的对话框中取消勾选“图像”所对应的辅助功能属性） ; 表格进行布局网页时，表格一般原则是从上到下以________ 方式进行独立排列；而且还要注意外表格的宽度单位为________；嵌套的表格宽度单位应该为_______，数值一般为______。;任务3 编辑网页内容;知识链接; 站在引擎的角度： ① 确定网页的关键词及频繁程度。 ② 每个网页的关键词最好不超出3 个， 让内容可以围绕关键词展开。 ③ 让关键词出现在标题中。 ④ 突出关键词。 ; 二、简单认识HTML 语言 1. HTML 介绍和语法 HTML 是Hyper Text Mark－up Language 的简称，中文名称是超文本标记语言。 语法格式： HTML 标签名 属性名 =“对应的属性值” 属性名2 =“对应的属性值” 直接显示在网页 上的文字等/HTML 标签名 ;HTML 语法解析; 2. 学习HTML 语言的意义 （1）便于灵活修改网页代码； （2）有利于网页的优化； （3）可以对其他网站的源代码进行适当修改，做出所想要的效果。 （4）可以检查网站是否中了网页木马，便于预防。 ;任务实施; 之后切换到“拆分”视图模式，在/td”标签中加入“background”属性，通过“浏览 ”选中设置背景图片为此切片文件，再将原切片图片去除。 ; 2. 输入前景文字 ; step 2 用CCS 样式表进行文字编排 ① 对全局文本进行CCS 设计：宋体、“12 px”、“#333333”。 ; ② 新闻列表进行编排： 先选中表格，设置行高为“20