网站建设教程详解

目录

1 基础教程    4

1.1    更换模板    4

1.2    编辑/更换横幅    4

1.3    调整布局    4

1.4    移动模块    4

1.5    添加/删减模块    4

1.6    添加/删减栏目    5

2 中级教程    5

2.1    网站标志Logo    5

2.2    地址栏图标    6

2.3    网站背景    7

2.4    网站导航    8

2.4.1    隐藏/显示导航    8

2.4.2    编辑导航样式    9

2.5    网站横幅    10

2.5.1    隐藏/显示横幅    10

2.5.2    横幅FLASH特效    11

2.6    模块样式    12

2.6.1    模块标题栏    12

2.6.2    模块内容区/模块背景    13

2.6.3    模块边框    14

2.6.4    模块高度    15

2.6.5    模块透明    15

2.7    自由布局    16

2.7.1    模块移动到网站顶部    16

2.7.2    模块移动到网站底部    17

2.7.3    模块在中间区域任意地方    18

2.7.4    模块侧边停靠    18

2.7.5    锁定模块/固定模块在浏览器的固定位置    19

2.7.6    浮动模块的高度和宽度    19

3 高级教程    20

3.1    修改css样式    20

3.2    添加js效果    24

基础教程

首先选择自己合适的网站版本，点击立即注册

填写注册信息，然后提交

激活您的账号，进入企业网站，在首页顶部开始您的建站之旅。

更换模板

编辑/更换横幅

调整布局

移动/添加/删减模块

中级教程

网站标志Logo

（1）登录企业网站

（2）点击网站上方的“”按钮

（3）在展开的选项卡中，进入网站设置选项卡，选择显示网站logo（默认为隐藏）

（4）选择显示后，网站左上角会出现预置的logo图标，鼠标移动上去后，出现编辑Logo和隐藏Logo两个按钮

（5）点击编辑Logo，弹出编辑对话框

（6）在弹出的对话框中，点击“图片上传”按钮，选择你的Logo，并根据需求设置Logo位置与尺寸。

（7）Logo上传后，点击确定返回网站查看效果，可用鼠标拖拉图片调整位置。

（8）满意后，点击右上角的“保存”按钮，保存效果即可。

地址栏图标

（1）登录企业网站

（2）点击网站上方的“”图标

（3）进入网站设置——高级设置

（4）启用网站头像，选择“是”

（5）点击“文件上传”上传图标文件，文件格式为ico文件，大小为16*16像素

注：可到http://www.ico.la/ 上传图片文件，将生成的favicon.ico保存到本地，然后上传。

（6）上传后，点击保存按钮，保存后刷新页面即可看到效果了。

网站背景

（1）登录企业网站

（2）点击网站上方的“”按钮

（3）在展开的选项卡中，进入网站设置选项卡，点击设置网站背景

（4）在弹出的对话框中，选择“自定义背景”选项

（5）用户可以不使用背景图片，只选择自定义背景颜色；也可以点击“图片上传”按钮，上传自定义的图片作为背景，可选择背景图片的显示方式

（6）点击确定后即可返回网站查看网站背景的效果。

（7）设置完成后，点击网站右上方的保存按钮，保存效果即可。

网站导航

隐藏/显示导航

隐藏导航

（1）登录企业网站

（2）鼠标移动到导航上方，浮出导航编辑按钮

（3）点击隐藏按钮即可隐藏导航。

（4）隐藏后，点击网站右上角的保存按钮保存样式即可。

显示导航

（1）登录企业网站

（2）点击网站上方的“”按钮

（3）在展开的选项卡中，进入网站设置选项卡，点击显示网站导航

（4）显示后，在页面即可看到网站导航，点击网站右上方的“保存”按钮后，即可保存。

编辑导航样式

（1）登录企业网站

（2）鼠标移动到导航上方，浮出导航编辑按钮

（3）点击“设置样式”按钮

（4）在弹出的对话框中，可设置导航宽度、栏目项宽度和导航文字颜色

网站横幅

隐藏/显示横幅

隐藏横幅

（1）登录企业网站

（2）鼠标移动到横幅上，点击横幅左上角的“隐藏”按钮

（3）隐藏后，点击网站右上方的“保存”按钮，即可完成隐藏。

显示横幅

（1）登录企业网站

（2）点击网站上方的“”按钮

（3）在展开的选项卡中，进入“网站设置”选项卡，点击显示网站横幅

（4）点击网站右上方的“保存”按钮，即可完成设置

横幅FLASH特效

（1）登录企业网站

（2）鼠标移动到横幅上，点击横幅左上角的“编辑横幅”按钮

（3）在展开的选项卡中，进入“网站横幅”选项卡，点击“设置网站横幅特效”

（4）在弹出的对话框中，开启横幅特效后（默认是关闭状态），即可选择特效样式

（5）点击“确定”后返回网站查看效果，满意后点击网站右上方的“保存”按钮，即可保存设计。

模块样式

模块标题栏

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角的“设置”下拉菜单下的“设置模块样式”按钮

（3）在弹出的对话框中，进入“标题栏”选项卡

（4）在标题栏选项卡中，可设置标题栏文字样式、标题栏高度和标题栏背景

（5）也可以“常规”选项卡中，隐藏标题栏

模块内容区/模块背景

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角的“设置”下拉菜单下的“设置模块样式”按钮

（3）在弹出的对话框中，进入“内容区”选项卡

（4）在内容区选项卡中，可设置内边距、文字样式、链接样式和背景

模块边框

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角的“设置”下拉菜单下的“设置模块样式”按钮

（3）在弹出的对话框中，进入“边框”选项卡

（4）在边框选项卡中，可设置边框样式

（5）也可以“常规”选项卡中，隐藏边框

模块高度

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角的“设置”下拉菜单下的“设置模块样式”按钮

（3）在弹出的对话框中，进入“常规”选项卡，模块高度默认为自动适应内容高度，可设置为固定高度

模块透明

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角的“设置”下拉菜单下的“设置模块样式”按钮

（3）在弹出的对话框中，进入“标题栏”选项卡，隐藏标题栏背景

（4）进入“内容区”选项卡，隐藏内容区背景

（5）点击确定后，即可返回网站看到效果，点击网站右上方的“保存”按钮，即可保存修改后的样式。

自由布局

模块移动到网站顶部

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角“布局”下拉菜单下的“浮动模块按钮

（3）模块浮动后，用鼠标拖拽模块，可直接拖拽到网站顶部

（4）拖拽到合适位置后，点击网站右上方的“保存”按钮，即可完成设计。

模块移动到网站底部

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角“布局”下拉菜单下的“浮动模块”按钮

（3）模块浮动后，点击模块右上角“布局”下拉菜单下的“跳到底部”按钮

（4）用鼠标拖拽模块，拖拽模块到网站底部合适的位置

（5）拖拽到合适位置后，点击网站右上方的“保存”按钮，即可完成设计。

模块在中间区域任意地方

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角“布局”下拉菜单下的“浮动模块”按钮

（3）模块浮动后，用鼠标拖拽模块，可直接拖拽到网站中间区域的任意地方

（4）拖拽到合适位置后，点击网站右上方的“保存”按钮，即可完成设计。

模块侧边停靠

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角“布局”下拉菜单下的“侧停模块”按钮

（3）模块侧停后，可在网页左侧/右侧看到侧停的模块，鼠标移动到模块上就可以弹出模块

（4）用鼠标拖拽模块，可直接拖拽到网站侧边的上下垂直位置

（5）拖拽到合适位置后，点击网站右上方的“保存”按钮，即可完成设计。

锁定模块/固定模块在浏览器的固定位置

（1）登录企业网站

（2）鼠标移动到模块上，点击模块右上角“布局”下拉菜单下的“锁定模块”按钮

（3）模块锁定后，可在网页上看到锁定的模块

（4）用鼠标拖拽模块，可直接拖拽到网站固定的位置

（5）拖拽到合适位置后，点击网站右上方的“保存”按钮，即可完成设计。

浮动模块的高度和宽度

（1）登录企业网站

（2）鼠标移动到模块右下角 图标，按住鼠标后拉动鼠标，可调整模块高度和宽度

高级教程

修改css样式

注意：

1、高级教程仅针对有css基础的设计人员，没有css基础的人士切勿尝试，容易造成页面混乱。

2、采用高级教程方式修改页面设计，是针对网站的修改，在更换模板之后，此修改仍然存在（例如把文章详情标题改为红色字体后，换另外一套模板之后，标题颜色仍然为红色字体），因此，最好是确定模板之后再采用高级教程的方式进行调整。

3、如需恢复模板样式，只需把添加的css样式删除即可。

以下为修改示例，分销商的设计人员参考以下方式进行修改即可。

示例：修改新闻详情标题颜色

（1）用chrome浏览器，打开你的企业网站

（2）右键点击需要修改的区域，点击“审查元素”，如图：

（3）在浏览器下方，可看到选中的div和css样式，记住你所需要修改的元素对应的css样式，此处示例对应的是.newsDetail .title 

（4）登录你的企业网站，在网站右上方点击网站管理，进入高级设置中的设置高级功能，如图所示：

（5）在“插入代码”输入框中，插入css代码，即可修改对应样式。本示例修改.newsDetail .title 的文字大小 ，在输入框中输入新的样式，覆盖原有样式即可，如：

（6）注意事项：css代码要在标签内，如果新加其他代码，也是放在内即可。例如：

（7）效果如图所示，标题的字体大小会被重置覆盖。

（8）如果需要加背景图片，可在资源库管理——管理文件中，上传图片，然后点击图片查看图片详情，点击复制图片地址，即可获得图片地址后。然后在写css的时候，设置背景路径即可。

设计人员参考以上方式即可修改所需修改的样式。

添加js效果

注意：

1、高级教程仅针对有Javascript基础的设计人员，没有Javascript基础的人士切勿尝试，容易造成页面混乱。

2、采用高级教程方式添加js效果，命名方式易冲突，建议命名的时候采用特殊命名方式，例如加入日期时间等。

3、如需取消js效果，只需把添加的js即可。

示例：添加select下拉框，选择下拉框的时候跳转到第三方页面

（1）添加图文展示模块

（2）在富文本编辑框中，点击编辑源码，如图所示：

（3）添加Javascript代码，并在添加的select下拉框中，引用Javascript代码，如图：

（4）点击保存按钮，效果如图所示：

选中一个选项后，即可跳转到对应的链接。

设计人员参考以上方式即可制作所需的效果。

360推广 http://www.pricedn.com/