商丘网站设计制作的步骤示意图56
发表时间:2020-05-28 10:07作者:郑州做网站白杨网络 商丘网站建设公司白杨网络总结的网站建设的流程示意图: 一 网站策划设计阶段 1 策划构思及设计流程 1.1 了解客户需求 创建网站结构示意图。 1.2 网站策划: 1.2.1 按照功能对网站栏目分类。 1.2.2 栏目要表达的中心思想和主题。 1.2.3 网站页面基调。 1.3 网站结构规划, 1.3.1 确定制作网站要采取的技术。 1.3.2 制作网站页面布局草图。 1.4 准备必要的素材: 1.4.1 包括图片 1.4.2 动画 1.4.3 文字资料 2 网站设计初样制作 2.1 网站页面设计 利用用户提供的图片和参照网址,使用photoshop设计出网站页面样式。 2.2 页面样式采集 使用ImageReady切割图片为网页大小,并保证图片质量,用来和用户沟通设计样式。 二 网站创建 1 建立站点: 1.1 使用DreamWear工具建立站点。 1.2 新建站点目录结构。 1.2.1 Image文件夹。用来存放站点中的图片。 1.2.2 Style文件夹。用来存CSS样式表文件。 1.2.3 Html文件夹。 用来放置Html文件。 1.2.4 Flash文件夹。用来放置动画文件。 1.2.5 temp文件夹。 用来存放临时文件。 (注释:如果网站过大,可以根据栏目分类把Html文件夹按照功能划分,并且子目录存放对应功能的 Image,Style,flash,temp文件。) 2 创建样式表: 样式表分类: 2.1 元素样式: 2.1.1 Body样式 2.1.2 表样式。 1 单元格样式 2.1.3 表单样式 1 List元素样式 2 Select元素样式 3 input元素样式 4 Check元素样式 5 Textarea元素样式 6 p样式 7 a样式 2.2 类样式: 根据功能命名并填充 2.3 ID样式: #加上表识符声明的Html元素ID的样式 2.4 伪元素、伪类样式: 2.4.1 伪类: 1 伪类定义: 对元素进行分类是基于特征, 当用户和文档进行交互时一个元素可以获取或者失去一个伪类 2 伪类类型: :link用在为访问的连接上。 :visited用在已经访问过的连接上。 :active用于获得焦点(比如,被点击)的连接上。 :hover hover用于鼠标光标置于其上的连接。 :after after用于显示紧跟在元 素后面的内容 content。 3 伪类用途: Menu菜单,超链接 2.4.2 伪元素: 1 伪元素定义: 伪元素是创造关于文档语言能够指定的文档树之外的抽象。 例如文档语言不能提供访问元素内容**字或者**行的机制。 伪元素允许设计师引用它们,否则这是难以办到的。 伪元素还提供样式设计师给在源文档中不存在的内容分配样式。 2 伪元素类型: :first-line,:first-letter,:before,:after。 3 伪元素用途: 文档语言对象。 3 制作网站首页 3.1 导入样式表 3.2 设置页面标题 3.3 设置页面属性 3.4 制作头部表格 3.5 制作公告栏 4 制作正文表格 4.1 左侧栏制作。(一般包括:1 业务指南;2站内搜索;3 页面导航等) 4.2 制作Banner 4.3 制作新闻区 4.4 友情链接区 5 制作尾部版权 尾部导航 6 调整页面 6.1 表格与表格之间合理布局 6.2 层与层之间合理布局 7 制作网站模板 </p> 7.1 创建模板 7.1. 1 将首页另存为模板 7.1.2 创建模板可编辑区,并保存 7.2 使用库 7.2.1 把模板中的menu表格建成库文件,共给其它页面使用 7.2.2 把页脚文件建成库文件 8 应用模板创建子栏目(功能栏所在的页面是二级页面) 8.1 从模板新建网页 8.2 编辑可编辑区 9 应用模板制作三级页面(功能栏页面中的子页面为三级页面) 三级页面要以二级页面为基准而建立三 开发网站中需要注意的问题 1 准备相关素材 1.1 网站模板 1.2 CSS样式 1.3 动画(Flash,Swish2.0) 1.4 图片(photoshop) 2 定制CSS样式 3 如果更新页面布局,请更新网页模板
文章分类:
商丘网站建设公司
|