个人网站设计

1 目录目录 摘要 2 第一章前言 3 1 1 网站的发展 3 1 2 设计概述 4 1 3 个人网站的需求 4 1 4 使用软件 4 1 5 软件运行环境 5 第二章网站的建设 6 2 1 网站的基础知识 6 2 1 1 制作网页的步骤 6 2 1 2 网站建设流程 7 2 1 3 网页制作要素 7 2 2 CSS 样式表 9 2 2 1 创建 CSS 样式表 9 2 2 2 CSS 样式表的分类 10 2 3 网站制作 11 2 3 1 网站步骤 11 2 3 2 主页的要求 12 2 3 3 子页的要求 13 第三章总结 16 参考文献 17 2 摘要摘要 本论文将对个人网页设计与制作的方法 工具等展开研究和探讨 在介绍 网页设计与制作语言的基础上 着重对中文版的 Dream weaver MX 2004 Fireworks MX 2004 Flash MX 2004 的新增功能 使用方法及操作技巧 进行介绍 按照由浅入深 循序渐进的方式进行 从简单的网页设计制作开始 到网站建设中所需的网站建设与管理技术 图像处理技术 动画制作技术等都 进行理论联系实际的介绍 在网页设计中包含着主观和客观两方面的因素 在 确立了网页主题之后 首先要明确和熟悉设计的对象和构成的要素 网页设计 涉及的具体内容很多 可以概括为视听元素和版式设计两个方面 在制作网站 方面将进行详细的讲解 对工具的使用 语言的组合 CSS 样式表的使用进行 全面的探讨 并利用具体的实例进行验证 本设计将以详实的内容 清新的格 调 繁简适中的阐述 实用的操作方法和技巧 讲解本人对个人网站设计的看 法 关键词 关键词 网站建设 CSS 样式表 流程 步骤 3 第一章第一章前言前言 1 1 网站的发展网站的发展 21 世纪的到来 人们更深切地感受到计算机在生活和工作中的作用越来越 重要 越来越来的职业需要具有计算机的应用技能 掌握计算机是职业的需要 更是事业发展的需要 互联网成为人们快速获取 发布和传递信息的重要渠道 它在人们政治 经济 生活等各个方面发挥着重要的作用 网页设计伴随着网 络的快速发展而快速兴起 作为上网的主要依托 由于人们使用网络的频繁而 变得非常的重要 网页讲究的是排版布局 其功能主要就是提供一种形式给每 个上网者 让他们能够了解网站提供的信息 网页设计与制作是计算机能力的具体表现 许多人不再仅仅局限于网上冲 浪 而是参与到网站建设中 企业建站相当于在网上建立一个家 你就可以在 这里向客户介绍你的企业 展示你的实力 推销你的产品 网页制作作为网站 制作中一个重要的环节 相对于传统的平面设计而言 网页设计具有更多的新 颖性 更多可以表现的手法 在目前国内对此领域研究甚少的情况下 将网页 艺术设计与其他艺术设计形式进行比较 尝试从网页艺术设计的内容 原则和 特点等三个方面 对这个新的艺术设计领域进行初步的归纳总结和理论探讨 认为网页艺术设计是艺术与技术的高度统一 指出网页艺术设计包含视听元素 与版式设计两项内容 以主题鲜明 形式与内容相统一 强调整体为设计原则 具有交互性与持续性 多维性 综合性 版式的不可控性 艺术与技术结合的 紧密性等五个特点 在明确了网页艺术设计与网站主题的关系的基础上 提出了 美 和 功 都是为了更好地表达网站主题这一观点 网页艺术设计是伴随着计算机互联网 络的产生而形成的视听设计新课题 是网页设计者以所处时代所能获取的技术 4 和艺术经验为基础 依照设计目的和要求自觉地对网页的构成元素进行艺术规 划的创造性思维活动 必然要成为设计艺术的重要组成部分 随着网络技术的 发展而发展 表面上看 它不过是关于网页版式编排的技巧与方法 而实际上 它不仅是一种技能 更是艺术与技术的高度统一 1 1 2 2 设计概述设计概述 随着 Internet 的迅猛发展 HTML 被广泛应用 上网的人们当然希望网页 做得漂亮些 因此 HTML 排版和界面效果的局限性日益暴露出来 为了解决这个 问题 人们也走了不少弯路 用了一些不好的方法 比如给 HTML 增加很多的属 性结果将代码变得很臃肿 将文本变成图片 过多利用 Table 来排版 用空白 的图片表示白色的空间等 直到 CSS 出现 CSS 可算是网页设计的一个突破 它解决了网页界面排版的难题 1 1 3 3 个人网站的需求个人网站的需求 一个完整的网页是建立在各种各样的需求上面的 这种需求往往来自于个 人的实际需求或者是出于自身发展的需要 其中个人的实际需求也就是说这种 发展性质的需求占了绝大部分 面对网页设计拥有不同知识层面的客户 设计 的个人对用户需求的理解程度 在很大程度上决定了此类网页规划的成败 因 此如何更好地的了解 分析 明确个人的需求 并且能够准确 清晰以文档的 形式表达给需要的人 保证以需求为目的个人方向进行 是每个网页规划和网 页制作管理者需要面对的问题 1 1 4 4 使用软件使用软件 Dream weaver MX 2004 软件由美国著名的网站应用开发工具生产厂商 Adobe Macromedia 于最新推出并正式投入市场以来 已经发展得相当成熟 关 于 Dream weaver MX 2004 的技术介绍的相关书籍与网络信息相当丰富 通过大 5 学中软件开发环境课程的学习 对 Dream weaver MX 2004 有了比较深刻的认识 并比较轻松的掌握了 Dream weaver MX 2004 的操作 因此 软件技术可以完成 个人的要求 1 1 5 5 软件运行环境软件运行环境 Dream weaver MX 2004 是一款简体中文软件 可以在 Win2003 WinXP Win2000 Win9X 中安全运行 换句话说 它可以在任何家用微 机中运行 6 第二章第二章网站的建设网站的建设 2 2 1 1 网站的基础知识网站的基础知识 2 1 12 1 1 制作网页的步骤制作网页的步骤 再做网页之前 我上网浏览了做网页的五个步骤 一 确定网页主题 网页主题就是你创建网页所要包含的主要内容 一个 网页必须要有一个明确的主题 二 搜集材料 明确了网页的主题以后 你就要围绕主题开始搜集材料了 材料既可以从图书 报纸 光盘 多媒体上得来 也可以从互联网上搜集 然 后把搜集的材料去粗取精 去伪存真 作为自己制作网页的素材 三 规划网页 一个网页设计得成功与否 很大程度上决定于设计者的规 划水平 规划网页就像设计师设计一样 图纸设计好了 才能建成一座漂亮的 楼房 网页规划包含的内容很多 如网页的结构 栏目的设置 网页的风格 颜色搭配 版面布局 文字图片的运用等 你只有在制作网页之前把这些方面 都考虑到了 才能在制作时驾轻就熟 胸有成竹 也只有如此制作出来的网页 才能有个性 有特色 具有吸引力 四 选择合适的制作工具 尽管选择什么样的工具并不会影响你设计网页 的好坏 但是一款功能强大 使用简单的软件往往可以起到事半功倍的效果 五 制作网页 材料有了 工具也选好了 下面就需要按照规划一步一步 地把自己的想法变成现实了 这是一个复杂而细致的过程 一定要按照先大后 小 先简单再复杂来进行制作 所谓先大后小 就是说在制作网页时 先把大 的结构设计好 然后再逐步完善小的结构设计 所谓先简单后复杂 就是先设 计出简单的内容 然后再设计复杂的内容 以便出现问题时好修改 在制作网 页时要多灵活运用模板 这样可以大大提高制作效率 7 2 1 22 1 2 网站建设流程网站建设流程 1 定义合适的域名 由域名构成的网址会像商标一样 有助于将来塑造网 上的形象 域名除了要符合个人的性质以及信息内容的特征外 还要具有简洁 易记 具有冲击力的特点 2 租用虚拟服务器 有了域名后 就需要一个空间存放网站 这个空间就 是 Internet 上的服务器 一般虚拟主机提供商都能向用户提供大容量 高速度 的服务器 用户可根据网站的内容设置及其发展前景来选择 3 设计网页 网页的设计制作可以自己完成 也可以通过虚拟主机提供商 或专业的网页设计制作商来完成 设计网页前要收集所有需要放在网站上的文 本资料 图片等 并尽量用文字详细说明制作的框架结构 将收集的材料提供 给网页设计者 4 ICP 备案 网站备案的目的就是为了防止在网上从事非法的网站经营活 动 打击不良互联网信息的传播 如果网站不备案的话 很有可能被查处以后 关停 ICP 备案可以自主通过官方备案网站在线备案或者通过当地电信部门两 种方式来进行备案 2 1 32 1 3 网页制作要素网页制作要素 1 网页的整体布局设计 网页设计作为一种视觉语言 要讲究编排和布局 虽然主页的设计不等同 于平面设计 但它们有许多相近之处 应充分加以利用和借鉴 版式设计通过 文字图形的空间组合 表达出和谐与美 一个优秀的网页设计者也应该知道哪 一段文字图形该落于何处 才能使整个网页生辉 多页面站点页面的编排设计 要求把页面之间的有机联系反映出来 特别要处理好页面之间和页面内的秩序 与内容的关系 尤其是我们在利用网页效果体现在线营销的意图时 更要注意 8 为了达到最佳的视觉表现效果 而讲究整体布局的合理性 比如一家生产型的 企业 它所提供产品的名称 类别 型号 价格 功能介绍应怎样编排才能使 浏览者有一个流畅的视觉体验 从而方便他对产品的了解 促成最后的购买 2 网页设计中色彩的运用 色彩是艺术表现的要素之一 在网页设计中 根据和谐 均衡和重点突出 的原则 将不同的色彩进行组合 搭配来构成美丽的页面 根据色彩对人们心 理的影响 合理地加以运用 按照色彩的记忆性原则 因为我们这里做的是食 品中特产的专卖网 为了体现环保的原则 所以我们采用绿色为主调 色彩还 具有联想与象征的特质 如红色象征血 太阳 蓝色象征大海 天空和水面等 绿色象征健康 环保这类 所以如果我们在对一家出售食品的商店进行虚拟店 面的页面设计时 应使用淡雅而沉静的颜色 使人心理上感觉凉爽一些 增强 人们的购买心理 使得在线营销得到很好的实践效果 另要注意的是网页的颜 色应用虽没有限制 但不能毫无节制地运用多种颜色 一般情况下 先根据总 体风格的要求定出一至二种主色调 在已经有了完备的网站进行网页设计时 更应该按照其中的颜色进行色彩运用 在色彩的运用过程中 还应注意的一个 问题是 由于国家和种族 宗教和信仰的不同 以及生活的地理位置 文化修 养的差异等 不同的人群对色彩的喜恶程度有着很大的差异 如 儿童喜欢对 比强烈 个性鲜明的纯颜色 生活在草原上的人喜欢红色 生活在闹市中的人 喜欢淡雅的颜色 生活在 沙漠 中的人喜欢绿色 在设计中要考虑众多因素 3 网页形式与内容相统一 要将丰富的意义和多样的形式组织成统一的页面结构 形式语言必须符合 页面的内容 体现内容的丰富含义 运用对比与调和 对称与平衡 节奏与韵 律以及留白等手段 通过空间 文字 图形之间的相互关系建立整体的均衡状 9 态 产生和谐的美感 如对称原则在页面设计中 它的均衡有时会使页面显得 呆板 但如果加入一些富有动感的文字 图案 或采用夸张的手法来表现内容 往往会达到比较好的效果 点 线 面作为视觉语言中的基本元素 要使用点 线 面的互相穿插 互相衬托 互相补充构成最佳的页面效果 网页设计中点 线 面的运用并不是孤立的 很多时候都需要将它们结合起来 表达完美的设 计意境 图 2 1 1 爱书网的子页 自然 2 2 2 2 CSSCSS 样式表样式表 2 2 12 2 1 创建创建 CSSCSS 样式表样式表 CSS 是 CascadingStyleSheets 层叠样式表 的缩写 它的作用是定义网页 的外观 用到网页中相应的元素上 能够有效的提高用户设计网页和开发站点 的效率 创建 CSS 样式表步骤如下 步骤 1 创建一个新的 HTML 页面 将其命名为 网站分布 1 保存 在页 面中输入待排版的文本 排版前的效果 步骤 2 为标题创建相应的 CSS 样式表 选择 文本 菜单栏的 CSS 样 10 式表 中的 新建 命令 弹出 新建 CSS 规则 对话框 步骤 3 弹出 book 的 CSS 规则定义 对话框 在 类型 选项中设定 相关的文字属性 步骤 4 在 分类 选项组中选择 区块 文本对齐 属性设置为 居 中 单击 确定 按钮 完成了用于标题的 book CSS 类的创建 步骤 5 为分类网页名称创建相应的 CSS 样式表 选择 文本 菜单栏的 CSS 样式表 中的 新建 命令 弹出 新建 CSS 规则 对话框 步骤 6 弹出 web 的 CSS 规则定义 对话框 在 类型 选项中设定 相关的文字属性 步骤 7 选中标题 网站分布 在该文字 属性 面板中选定 样式 为 book 则定义的 book 的 CSS 规则就被用于该标题 步骤 8 选中网站分布名称 在该文字 属性 面板中选定 样式 为 web 则定义的 web 的 CSS 规则就被用于该段文字 步骤 9 单击 F12 在浏览器中预览效果 2 2 22 2 2 CSSCSS 样式表的分类样式表的分类 CSS 按其位置可以分成三种 内嵌样式 Inline Style 内部样式表 Internal Style Sheet 外部样式表 External Style Sheet 三种 内嵌样式 Inline Style Inline Style 是写在 Tag 里面的 内嵌样式 只对所在的 Tag 有效 例如 这个 Style 定义里面的文字是 20pt 字体 字体颜色是红色 内部样式表 Internal Style Sheet 内部样式表是写在 HTML 的 里面的 内部样式表只对所在的网页有效 例如 H1 mylayout border width 1 border solid text 11 align center color red 这 个标题使用了 Style 这个标题没有使用 Style 外部样式表 External Style Sheet 如果很多网页需要用到同样的样 式 Styles 就可以用这种方法 首先将样式 Styles 写在一个以 CSS 为后缀 的 CSS 文件里 然后在每个需要用到这些样式 Styles 的网页里引用这个 CSS 文件 使用外部 External 样式表 相对于内嵌 Inline 和内部式 Internal 的 有以下优点 样式代码可以复用 一个外部 CSS 文件 可以被很多网页共 用 便于修改 如果要修改样式 只需要修改 CSS 文件 而不需要修改每个网 页 提高网页显示的速度 如果样式写在网页里 会降低网页显示的速度 如 果网页引用一个 CSS 文件 这个 CSS 文件多半已经在缓存区 其它网页早已经引 用过它 网页显示的速度就比较快 2 2 3 3 网站制作网站制作 2 3 12 3 1 网站步骤网站步骤 网站是网页的集合 一个站点用的所有网页构成一个网站 网页是网站的 表现形式 网页设计是指对网站整体页面的设计 包括页面风格 配色 布局 内容等 网页设计包含的内容非常多 大体分为两个方面 一方面是纯网站本 身的设计 如文字 排版 图片制作 平面设计 静态图文和动态声音 影像 等 另一方面是网站的延伸设计 包括网站主题 浏览群的定位 智能交互 制作策划 形象包装和宣传营销等 设计页面的第一步就是设计片面布局 就像报刊杂志版面设计一样 我们 可以看作一张报约或者一份杂志来进行排版布局 12 1 草稿 新页面就像一张白纸 没有任何的约定俗成的东西 可以尽可能 地发挥想象力 创造力 将想象的布局到上面去 这是原创阶段 你不必讲究 细腻工整 你也可在草稿本上先画出整个布局框架 把多个块的位置先粗略的 布置上去以往下一步工作的展示 这一步也可以借住 PHOTOSHOP 或其他工具软 件来完成 2 粗略布局 在草稿的基础上 将需要的功能模块放到页面上去 这时要 遵循突出重点 整体协调的原则 首先将网站标志 导航条 广告条等最主要 的模块放在最突出位置 然后考虑其他模块的布局 3 定稿 定稿即将粗略布局精细化 具体化 完成整个页面的设计 页面的制作 首先在根据客户的要求下 完成首页的制作 在经客户确定 后 再制作其他的页面 制作完成后 交给客户验收 然后发给客户确定 待 所有的页面的都经客户确定后 完成网页的制作进程 交给程序员添加程序 2 3 22 3 2 主页的要求主页的要求 对于销售业务页面要求运行的工作环境稳定 易于操作 界面美观大方 对于前台展示界面要求系统便于维护 安全可靠 对于广大客户所要执行的操 作简单易懂 远程访问速度较快 界面友好美观 有基本的错误提醒功能 远 程操作数据库正确 要求和客户有一定的互动性 在主页上直观的就可以查看 浏览者所想要了解的东西 下面是我自己根据自己所学习的内容 做出自己的爱书网的主页 13 图 2 3 1 爱书网的主页 首页 2 3 32 3 3 子页的要求子页的要求 子页的工作就是子页的选择与链接 子页应该丰富多彩 内容充实 浏览 性强 比如说 想要销售一辆汽车 应该有它的