电子商务网站建设与维护项目二建设简单促销专题网站的知识

2建设简单促销专题网站学习目标 1.熟悉网站建设的一般流程，学会有效沟通，通过讨论等方法了解用户的需求。 2.能够从用户需求出发整理材料，对部分素材进行合理处理。 3.能够选择合适的网页编辑工具，根据用户需求和素材情况完成网站框架设计。 4.能够运用网页编辑工具完成多种形式内容元素的编辑，并能按照页面的逻辑关系将网页合理组织起来。 5.能够使用FTP工具管理网站文件，能够借助服务器平台有效发布网站，并能保障网站正常运行。任务1创建与管理站点

任务目标: 1.能够运用Dreamweaver软件创建站点、新建主页、规划站点的目录文件结构； 2.能对站点文件实施管理，并对素材进行相应的整理归类。知识链接一、常用软件MicrosoftFrontPageMacromediaDreamweaver二、认识网页编辑工具

1.视图模式：

设计模式、代码模式、分割模式

2.工作界面：三、设计网站的目录结构

网站目录是指在创建网站时建立的目录，通常网站的目录结构规划需要遵循以下几个原则：

1.分别建立相应的文件夹 2.文件夹最好用英文来命名 3.网站资源应归类放到相对应的文件夹中 4.对网站不同类型的图片进行分类任务实施step1新建站点

①启动Dreamweaver，在菜单栏中执行“站点”→“新建站点”。

②输入站点名称、按“打开”按钮、选择站点所要保存的盘符与文件夹，按“保存”按钮。站点设置对象“新建站点”效果图step2管理站点

1.规划网站目录结构

2.多站点管理

①执行“站点”→“管理站点”命令，复制“农业园新春活动High翻天专题网站”，将其主目录设置为自定义的一个文件夹。

②单击“导出”按钮导出“农业园新春活动High翻天专题网站”站点。任务2确定网页布局任务目标： 1.能够使用Fireworks进行网页版面的编排，以及网页各元素的处理； 2.能够对已经设计成型的网站版面图进行合理分割，并使用切片工具导出分块图片。 3.能够熟练使用Dreamweaver等工具对已经导出的切片按照页面的结构进行合理组合。知识链接

一、网页布局的基本类型

1.“厂”字形

2.“国”字形

3.“三”字形

4.“川”字形

5.Flash布局任务实施

step1确定版面布局方式 “三”字型

step2版面设计

1.网页顶部设计 (1)新建文档，设置画布

启动Fiveworks软件，选择“文件”→“新建”选项。

（2）制作顶部logo和banner

①Logo部分的制作：

选择“文件”→“导入”命令。

文字、字体、字型、字号、颜色、字间距 ②Banner部分的制作：

选择“文件”→“导入”命令。

缩放、透明度、魔术棒

（3）制作导航

提示：导航对象的对齐方法有两种：

一是利用参考线：“视图”→“标尺”，从“标尺”处拖出蓝色的参考线；

二是利用“对齐”控制面板里的“对齐”和“分配”。参考线对齐面板

2.网页中部设计

效果如右图。

step3切片规划和组合

1.设计图切片分割

①去除设计图中纯内容性的占位符和文字：

②切片分割的程度视具体情况而定。

③切片分割最终效果：

2.导出切片

①选中要导出的切片，右击打开快捷菜单，选择“导出所选切片”选项，保存并命名。

②逐一导出各切片，集中保存在网站的“images”文件夹中，文件命名按顺序编号。导出切片文件操作切片命名

3.组合切片

（1）设置站点与页面

①新建站点和主页，规划好文件夹。

将切片文件复制到“images”文件夹中，“index.html”复制到“images”文件夹外面。

②对页面的共同属性进行统一规划与设置。

选择“修改”→“页面属性”命令外观（CSS）链接（CSS）下划线样式标题/编码

（2）设计表格

①插入表格布局（千层糕式）

②设置表格在页面居中

单击标签选择器“<table>”，选定表格，设置对齐方式为“居中对齐”。

③制作网页中部“表格4”（可灵活设置）

第一列嵌套3行1列子表格第二列嵌套2行1列子表格 （3）导入切片

①光标定位在网页头表格的第一个单元格上，选择“插入”→“图像”命令。

②导入多张图片

打开“文件”浮动面板，通过拖拉的方式将图片逐一导入相应位置。（单击“请更改辅助功能首选参数”链接，在弹出的对话框中取消勾选“图像”所对应的辅助功能属性）

表格进行布局网页时，表格一般原则是从上到下以________方式进行独立排列；而且还要注意外表格的宽度单位为________；嵌套的表格宽度单位应该为_______，数值一般为______。任务3编辑网页内容任务目标：

1.能够将设计图转换成网页文件； 2.能够在网页里编辑文字、图片等内容。知识链接一、编辑网页内容的注意事项

站在浏览者的角度：

①获得认同及信任。

②内容越短越好。

③内容要强调主要的重点。

④内容要图文并茂。

站在引擎的角度：

①确定网页的关键词及频繁程度。

②每个网页的关键词最好不超出3个，让内容可以围绕关键词展开。

③让关键词出现在标题中。

④突出关键词。

二、简单认识HTML语言

1.HTML介绍和语法

HTML是HyperTextMark－upLanguage的简称，中文名称是超文本标记语言。

语法格式：

<HTML标签名属性名=“对应的属性值”属性名2=“对应的属性值”>直接显示在网页上的文字等</HTML标签名>HTML语法解析

2.学习HTML语言的意义 （1）便于灵活修改网页代码； （2）有利于网页的优化； （3）可以对其他网站的源代码进行适当修改，做出所想要的效果。 （4）可以检查网站是否中了网页木马，便于预防。任务实施step1将切片文件设置为背景

首先选中相应切片，然后再选中切片所在的单元格，设置与其“属性”面板中相同的宽和高；1.将切片文件设置为背景

之后切换到“拆分”视图模式，在"</td>”标签中加入“background”属性，通过“浏览”选中设置背景图片为此切片文件，再将原切片图片去除。

2.输入前景文字

step2用CCS样式表进行文字编排

①对全局文本进行CCS设计：宋体、“12px”、“#333333”。

②新闻列表进行编排：

先选中表格，设置行高为“20”。练一练

step3动画导入网页

单击“插入”→“媒体”→“SWF”命令。

step4文字滚动效果制作

1.简单的滚动字幕制作

单击“插入”→“Web组件”命令。插入字幕组件设置字幕属性

2.通过代码进行滚动字幕制作

<marqueescrollamount=“2”height=“17”width=“643”>我们公司的产品品种众多,规格齐全。本公司的产品主要出口北美洲，南美洲...</marquee>

3.含HTML代码的滚动字幕内容

①准备四张图片，名字改为“1.jpg”“2.jpg”“3.jpg”“4.jpg”。

②书写代码: <marqueescrollamount="2"height="17"width="643“><imgsrc="1.jpg”><imgsrc="2.jpg”><imgsrc="3.jpg"><imgsrc="4.jpg"></marquee>任务4超链接与子页制作

任务目标： 1.能够使用超级链接技术，实现网页之间的链接，建立页面之间的关联； 2.能够使用网页编辑工具，制作出与主页风格一致、图片并茂的内容网页。知识链接

一、认识超链接

超级链接简称超链接，是指从一个网页到另一个网页对象的链接关系。

按路径的不同，可以分为：内部链接、锚记链接、外部链接。

按照使用对象的不同，可分为：文本链接、图像链接、E-mail链接、锚记链接、空链接、脚本链接和热点链接等。

二、注意事项：

1.在当前页所对应的导航项链接应设为无效状态； 2.不要在一篇文章里提供太多的超链接； 3.超链接的字符串长短要适中； 4.超链接叙述性文字的颜色呈现多样； 5.在长篇文章里提供必要的页码链接； 6.在有段落标题的较长文字页面内提供目录表、标题和页内超链接； 7.在尚未完成的页面中暂时不提供超链接； 8.测试所有的超链接与导航按钮的真实可行性；

任务实施

step1制作超链接 1.选定“南雁开心农场”图片，在“属性”面板中按“链接”选项右侧的“文件浏览”按钮； 2.通过“选择文件”对话框，选择所要链接的网页“nykx”； 3.选择链接的“目标”： “_blank” “_new” “_self” “_parent” “_top” 4.图片链接设置之后的效果(图片周围会出现蓝色的边框)。 5.去除图片链接的蓝色边框线简单的方法：设置“属性”→“边框”为“0”。注意：去除所有图像链接的蓝色边框方法为：

1.单击CSS样式面板的“新建CSS规则”，设置选择器类型为“标签”，选择器名称为“img”，单击“确定”按钮。 2.在img的CSS规则定义中“边框”选项卡的style下Top设置为“none”。

step2编辑子页

1.插入表单和表格

单击“插入”→“表单”→“表单”选项。

2.编辑表单对象

（1）文本域 （2）文本区域 （3）列表/菜单 （4）单选框和复选框 （5）按钮 （6）表单 1.超级链接按路径划分：______、______、______。 2.表单对象有______

______、______、______、______、______、______。 3.表单的提交方式有______、______，其中前者是通过URL请求来传递用户的输入数据，后者是通过服务器端response方法来获取数据。 4.超链接的目标方式包括______（浏览器总在一个新找开的、未命名的窗口上显示链接页面)、______(在当前窗口显示链接页面）、______（使链接文档在父级窗口显示）、______（应用在框架中，清除框架来显示目标文档）。

练一练：任务5发布与运行网站

任务目标： 1.能够通过常用FTP客户端工具上传网站文件，实现网站对外发布; 2.能够进行网站文件的维护管理。

知识链接

一、认识FTP发布工具

FTP工具是指用于控制文件的双向传输。它包括上传和下载，使用下载工具可以自由自在地存取和管理服务器的资源，通过拖放即可完成文件或文件夹的上传。

常用的FTP工具有：

1.FlashFXP 2.CuteFTP 3.LeapFTP 4.TurboFTP

二、常见的FTP操作方式

1.命令方式

通过

，通过ls命令显示出网站文件清单。

2.Web方式

在浏览器中输入，在“登录身份”对话框中输入自己的用户名与密码。认证通过后，即可进入F