电子商务网站设计与建设 教学课件 作者 商玮 项目四 电子商务网站静态网页设计与制作.pptVIP

项目四 电子商务网站静态网页设计与制作 本项目技能目标如图4-1所示。 网站表单的设计 创建简单HTML网页 前台主页的设计 电子商务网站网页设计 站点创建与管理 图4-1 电子商务网站网页设计项目技能目标 第一部分 项目学习引导 任务1 创建简单的HTML网页 一、创建简单HTML网页的流程及步骤（以记事本为例） 二、HTML文档基本架构 HTML 文档（即网页）主要由文档头（Head）和文档主体（Body）两部分组成。 启动“记事本” 输入HTML源代码 保存网页文件 运行网页文件 图4-6 创建简单HTML网页流程 三、HTML的使用规范 四、HTML的常用标记 1.标题标记Hn 2.逻辑风格字符 3.物理风格字符 4.文字标记FONT 5.无序号列表标记UL 6.序号列表标记OL 7.表格标记TABLE 8.表单标记form 9.超链接标记A 10.插入图像标记IMG 11.插入背景音乐BGSOUND 12.载入多媒体EMBED 任务2 站点创建与管理 一、站点的创建 二、站点管理的基本内容及操作 站点管理的基本内容包括站点的新建、切换、编辑、复制、删除、导出、导入等。 三、站点的作用 创建本地站点文件夹 运行Dreanweaver8 执行“站点/新建站点”命令 定义站点名称 定义站点使用的服务器技术 定义站点存储位置 定义站点远程服务器的连接 确认站点定义信息 图4-18 用Dreamweaver8创建站点的流程 任务3 网站前台主页的设计 一、布局模式设计 图4-37　网页的大体布局图 图4-39　“T”字型抽象图 图4-41　“口”字型抽象图 图4-43　常见布局形式汇总图 二、网站主页制作流程 主页的结构设计好之后就可以开始制作主页，具体步骤如下。 （1）将所需的网页素材拷贝到新建好的站点“ECWeb”下。 （2）在网页里插入一个1行2列的表格。 （3）将光标置于第一个表格的第1行第2列，插入一个3行1列的表格。 （4）接着在页面设计框里面写上“登录我 的商务中心”、“新用户注册”、“我的 账户”和“交易中心”与其图片。 （5）按照（4）中的制作方法，在头部表格的最后一行里面完成“商品热门类别关键字”的陈列。 （6）做好首页的头部之后，我们来完成最重要的导航栏和搜索模块。 （7）执行“窗口→ CSS样式”命令，打开“CSS样式”面板。 （8）保存之后，弹出自定义类body的CSS 规则定义窗口。 （9）除了表格可以实现首页模块的布局设计， div标签同样也可以，接下来我们将通过 div+css完成首页的其余部分。 （10）首页的下半部分实现类似步骤（9），同样需要div来控制。 （11）网站最后是底部链接与版权的设计，将光标置于页面的尾部，插入一个div 标签，在CSS中设置风格为foot，在两个 子div中输入链接与版权相关的内容。 （12）保存页面，预览效果。 任务4 网站表单的设计 一、新用户注册表单设计 二、表单的定义格式 三、常用表单域标记