网站建设与主页设计方案分析(ppt 68页).ppt

网站建设与主页设计 网站建设与主页设计 第六章网站建设与主页设计 主要内容 2 配置WebServer 1 组建Web站点基础知识 3 网页设计基础 熟悉 了解 掌握 第一节组建Web站点基础知识 网站就是在互联网上提供服务和存放数据的地方 由域名和网站空间构成 网站有政府 商业 企业网站和个人网站之分 企业建站可使企业开展电子商务 充分利用网络资源 增强与客户的互动往来 宣传企业形象 进行网上广告等 为企业制造了无限商机 个人拥有个人网站或个人主页 更是E时代的一种潮流和时尚 设计一个站点 首先遇到的问题就是定位网站主题 网站主题是网站的灵魂 第一节组建Web站点基础知识 1 网站规划 1 主题 名称及风格定位 选择题材 一般原则有 a 主题范围要小而精 定位要小 内容要精 b 题材最好是单位特点及优势或个人擅长及喜爱的内容 c 题材不要太滥或者目标太高 第一节组建Web站点基础知识 1 网站规划 确定了主题后 网站名称也是网站设计的重要部分 如 电脑学习室 和 电脑之家 显然后者简练 迷笛乐园 和 MIDI乐园 显然后者明晰 儿童天地 和 中国幼儿园 显然是后者大气 对于网站名称的名称建义要正气 响亮 易记 第一节组建Web站点基础知识 1 网站规划 a 名称要 正 正 就是要合法 合理 合情 不能用反动的 色情的 迷信的 危害社会安全的名词语句 b 名称要易记 根据中文网站浏览者的特点 除非特定需要 网站名称最好用中文名称 不要使用英文或者中英文混合型名称 c 名称要有特色 名称平实就可以接受 如果能体现一定内涵 给浏览者更多视觉冲击和空间想象力 则为上品 如 音乐前卫 网页陶吧 天籁绝音 等 第一节组建Web站点基础知识 1 网站规划 1 主题 名称及风格定位 风格是独特的 是站点不同与其他网站的地方 或者色彩 或者技术 或者是交互方式 能让浏览者明确分辨出这是你的网站独有的 网站风格 style 是抽象的 指的是站点整体形象给浏览者的综合感受 整体形象 包括站点的标志 色彩 字体 标语 版面布局 交互性 文字 语气 内容价值 存在意义 站点荣誉等等诸多因素 风格是有人性的 通过网站的外表 内容 文字 交流可以概括出一个站点的个性 情绪 是温文儒雅 是执著热情 是活泼易变 是放任不羁 第一节组建Web站点基础知识 1 网站规划 1 主题 名称及风格定位 区别 普通网站你看到的只是堆砌在一起的信息 你只能用理性的感受来描述 比如信息量大小 浏览速度快慢 但你浏览过有风格的网站后你能有更深一层的感性认识 比如站点有品位 和蔼可亲 是老师 是朋友 其实风格就是一句话 与众不同 树立网站风格可以分以下步骤 第一 确信风格是建立在有价值内容之上的 首先必须保证内容质量和价值性 这是最基本的 第二 需要彻底搞清楚自己希望站点给人的印象是什么 第三 在明确自己的网站印象后 开始努力建立和加强这种印象 第一节组建Web站点基础知识 1 网站规划 2 域名设计 国内网站的域名设计思路大致可以分为几类 1 模仿型模仿国外著名网站 如模仿yahoo的 hoo风格 与模仿ebay的 e 风格等 2 数字型除了跟中国电信有关的163 169 263之外 又如与世界之最喜马拉雅山有关的8848 与数学有关的3721 与 好兆头 有关的188 168等等 3 区域型区域型的域名未必是政府机关所有 以国家 地区名称作为域名 有利于提高网站知名度 象 4 拼音型中国人独有的 感觉平易近人 如 摇篮网 网站的 文学网站榕树下的 5 组合型如数字加英文的 51job 利用 51 的谐音译成 无忧 这种搭配可谓独具匠心 第一节组建Web站点基础知识 1 网站规划 2 域名设计 在设计域名时 主要有以下一些技巧及注意事项 1 有吸引力 2 简单明了但要有内涵 3 与网站内容相关 4 注意注册域名限制 第一节组建Web站点基础知识 1 网站规划 2 域名设计 一是完全自己建 这要求本单位有专业技术人员和专门设备 同时单位网络业务量很大 这种方式投资极大 适合类似 联想 等大公司 二是 主机托管 方式 这种方式投资比较大 也需要专业技术人员 所谓主机托管 就是用户将购置的网络服务器 托管于一些网络服务机构 该机构当然要有非常好的互联网接入环境 每年支付一定数额费用 第一节组建Web站点基础知识 1 网站规划 3 建站方式 三是采用虚拟主机技术建立网站 在别人的主机上 租用一定网站空间以架设自己的网站 网络公司不仅为客户提供存放网页的空间 同时也会开设数目不定的电子邮件帐号 此外 绝大部分公司还会提供网站策划 网页设计 程序编写 网站推广等一条龙服务 这种方式成本较低 不需要购买相关软硬设施 不需要招聘更多的专业人员 但只适合于一些小型 结构较简单的网站 第一节组建Web站点基础知识 1 网站规划 3 建站方式 在我国 网站建设和运营费用主要包括以下方面 1 域名注册 2 线路接入费用和合法IP地址费用 3 服务器硬件设备 4 若进行主机托管或租用虚拟主机 需支付托管费和主机空间租用费 5 系统软件费用 6 开发维护费用 7 网站市场推销和经营费用 用户建站 可列出所需硬件 软件 人员 接入Internet方式和服务清单 向专业人士咨询 第一节组建Web站点基础知识 1 网站规划 4 经费估算 在动手制作网站前 一定要考虑好网站结构组织 它包括以下两个方面 确定栏目和版块 确定网站的目录结构和链接结构 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 1 确定栏目栏目实质是一个网站的大纲索引 索引应该将网站的主体明确显示出来 在制定栏目时 要仔细考虑 合理安排 一定记住要紧扣你的主题将你的主题按一定的方法分类并将它们作为网站的主栏目 设一个最近更新或网站指南栏目 设定一个可以双向交流的栏目 设一个下载或常见问题回答栏目 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 栏目示例 1 确定栏目注意 尽可能删除与主题无关的栏目尽可能将网站最有价值的内容列在栏目上尽可能方便访问者的浏览和查询 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 2 确定版块 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 2 确定版块各版块要有相对独立性 各版块要有相互关联 版块的内容要围绕站点主题 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 3 文件的命名规则切忌随心所欲地为文件命名 不要怕麻烦 要有一套明确的命名规则 并一如既往地遵守它 这其实是所有软件设计的一个惯例 4 确定网站目录结构 不要将所有文件都存放在根目录下 按栏目内容建立子目录 子目录的建立 首先按主菜单栏目建立 其他的次要栏目 需要经常更新的可以建立独立的子目录 而一些相关性强 不需要经常更新的栏目 可以合并放在一个统一目录下 所有程序一般都存放在特定目录 在每个主目录下都建立独立的images目录 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 4 确定网站目录结构 目录层次不要太深 不要使用中文目录 不要使用过长目录 尽量使用意义明确的目录 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 5 确定网站链接结构网站链接结构是指页面之间相互链接的拓扑结构 它建立在目录结构基础之上 但可以跨越目录 如果说每个页面是一个点 链接则是两点之间的连线 一个点可以和一个点连接 也可以和多个点连接 更重要的是 这些点并不是分布在一个平面上 而是存在于一个立体空间中 总的原则 少而高效 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 5 确定网站链接结构 树状链接结构 一对一 首页链接指向一级页面 一级页面链接指向二级页面 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 5 确定网站链接结构 树状链接结构 一对一 优点条理清晰 访问者明确知道自己在什么位置 不会 迷 路 缺点浏览效率低 一个栏目下的子页面到另一个栏目下的子页面 必须绕经首页 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 5 确定网站链接结构 星状链接结构 一对多 每个页面相互之间都建立有链接 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 5 确定网站链接结构 星状链接结构 一对多 优点浏览方便 随时可以到达自己喜欢的页面 缺点链接太多 容易使浏览者迷路 搞不清自己在什么位置 看了多少内容 第一节组建Web站点基础知识 1 网站规划 5 网站结构组织 应用首页和一级页面之间用星状链接结构 一级和二级页面之间用树状链接结构 第一节组建Web站点基础知识 2 网站技术简介 1 HTML CSS 2 Script Applet HTML超文本标记语言 是最基本的网页制作技术 自1990年以来 一直是互联网上的信息表示语言 利用HTML可以完成基本网页布局和显示 缺点是缺乏动态功能和交互特性 CSS则可在HTML的基础上增加了动态效果和图文特效 现代应用中二者经常是紧密结合的 脚本 Script 和小应用程序 Applet 是客户端常用技术之一 脚本主要是指JavaScript VBScript等应用在客户端的技术 利用这些技术可为网页设计带来更大的灵活性和可交互性 3 XML 可扩展标记语言 是当今流行的WEB服务架构的主流技术之一 它以一种十分巧妙的方式实现了数据定义与数据内容的统一 给程序间的数据传递带来了极大的方便 第一节组建Web站点基础知识 2 网站技术简介 4 ASP 5 JSP SERVLET 6 CGI 活动服务器页面 是微软开发的基于WINDOWS平台的服务器端编程技术 以VBScript和JavaScript作为编程基础 实现了数据库操作等服务器端的技术 缺点是只能局限于Windows操作系统 并且速度较慢 JSP是一种实现普通静态HTML和动态HTML混合编码的技术 是SUN公司推出的类似于微软ASP的服务器端技术 由于它是基于JAVA虚拟机的 具有较好的可扩展性和可移植性 支持大多数系统平台 通用网关接口 是最早应用的服务器端技术之一 相比起来 使用难度比较大 用户可能要做大量基础性工作 CGI程序在不同服务器之间的移植也是一个很复杂的问题 第一节组建Web站点基础知识 2 网站技术简介 7 PHP 8 Perl 是嵌入HTML文件的一种脚本语言 其语法大部分是从C Java Perl语言中借来的 并形成了自己独有风格 有强大的操作数据库的能力 支持多平台 速度也比较快 很多大型网站都用它作为主要的服务器端技术 是一种最广泛应用于语法分析和WWW的编程语言 它在CGI编程和处理格式数据上的强大功能颇受关注 第一节组建Web站点基础知识 3 建设网站的一般步骤 网站的建设与维护是一个长期过程 总体可分为五个阶段 站点策划 站点设计 站点开发制作 测试和评价 站点宣传推广及站点运行和维护管理 对于个人网站和商业网站 或企业网站 具体步骤是不同的 建立商业 企业 网站一般步骤 1 确定网站建设目标 2 注册域名 3 建立主机 4 建设网站平台 5 规划网站内容并制作网页 6 网站测试 7 网站发布与推广 8 维护与更新网站 组建个人网站一般步骤 目标规划 申请空间 制作网页 文件上传 主页推广 第一节组建Web站点基础知识 4 网站推广策略 请确保已经做好了以下内容 网站信息内容丰富 准确 及时 网站技术具有一定专业水准 网站的交互性能良好 1 在搜索引擎上登记注册著名的搜索引擎站点是在技术上推广网站的第一步 要将网址提交到最合适的目录下面 要认真详细的介绍网站 千万不要有虚假 夸张的成分 2 网上广告收费广告 免费广告 第一节组建Web站点基础知识 4 网站推广策略 3 在网站排行榜上登记如果你的站点日访问人数很高 有幸进入排行榜的前100位 那么你的知名度会大大提高 访问的人数会更加多 4 友情链接虽然友情链接的有效链接率并不高 但是要记住 网络是人与人交流的新渠道 在网络上结识大量的网友 是一件令人兴奋和自豪的事 第一节组建Web站点基础知识 5 八种提高访问量的方法 1 调查 5 新闻 2 有奖活动 6 玩笑 3 原创材料 7 免费清单 4 小测验 8 目录 第二节配置WebServer Web服务器其实就是一台计算机 可以提供主页 E mail FTP等功能 Web服务器包括硬件和软件两大部分 Web服务器常见硬件平台有 UNIX工作站 PC服务器 普通PC Macintosh等 现在比较流行且非常实用的网络操作系统有 WindowsNT Windows2000 Linux等 而运行于操作系统平台的主流WebServer有 MicrosoftInternetInformationServices IIS Apache等 常用的操作系统与Web平台搭配方式有 1 WindowsNT 2000 IIS 2 Linux Apache 1 IIS基础 第二节配置WebServer IIS是InternetInformationServer的缩写 是微软公司主推的服务器 Windows2000Server包含的IIS版本为IIS5 0 IIS支持HTTP HypertextTransferProtocol 超文本传输协议 FTP FeleTransferProtocol 文件传输协议 以及SMTP协议 通过使用CGI和ISAPI IIS可以得到高度的扩展 用户可以在 开始 程序 管理工具 中看到并使用相关服务 2 IIS的安装 第二节配置WebServer 在 控制面板 窗口中的 添加 删除程序 中单击 添加 删除windows组件 2 IIS的安装 第二节配置WebServer 在对话框中选择 Internet信息服务 选项 若查看组件信息则单击 详细信息 2 IIS的安装 第二节配置WebServer 若要添加或删除某个组件 单击旁边的复选框 插上Windows安装光盘后 单击 确定 按钮 2 IIS的安装 第二节配置WebServer 返回到 Windows组件向导 对话框 单击 下一步 按钮 开始复制系统文件 同时安装相关信息等 2 IIS的安装 第二节配置WebServer 第三节网页设计基础 在网站设计上 主页的设计是一个网站成功与否的关键 人们往往看到第一页就已经对你的站点有一个整体的感觉 是不是能够促使浏览者继续点击进入 是否能够吸引浏览者留在站点上 全凭主页设计的 功力 了 所以 主页的设计和制作是绝对要重视和花心思的 一般主页设计和制作占整个制作时间的40 宁可多花些时间在早期 以免出现全部做好以后再修改 那将是最浪费精力的事 一般的步骤是 确定主页的功能模块主页的内容模块是指你需要在主页上实现的主要内容和功能 设计主页的版面最好方法是 找一张白纸 一支笔 先将你理想中的草图勾勒出来 然后再用网页制作软件实现 处理技术上的细节 第三节网页设计基础 1 创意 创意是网站生存的关键 创意到底是什么 如何产生创意呢 创意是引人入胜 精彩万分 出奇不意的 创意是捕捉出来的点子 是创作出来的奇招 创意是传达信息的一种特别方式 在很多时候 成功的网站就是设计者的一点灵感创造出来的 其绝妙的主题风格往往是价值连城的 创意并不是天才的灵感 而是思考的结果 第三节网页设计基础 2 布局设计 设计网页的第一步是设计版面布局 版面是指浏览器看到的完整页面 可以包含框架和层 布局 就是以最适合浏览的方式将图片和文字排放在页面的不同位置 版面设计就是组版元素在版面上的计划和安排 优秀的版面设计 都表现出其各构成因素间和谐的比例关系 达 芬奇说 美感完全建立在各部分之间神圣的比例关系上 可见 比例法则是实现形式美感的重要基础 网页版面设计 必须首先从版面结构入手 从整体布局做起 而形成版面结构基本条件 是正文 标题 图片质和量的关系 字体的变化 文字量的合理搭配 图片的恰当配备 其他特殊效果等等 第三节网页设计基础 2 布局设计 设计版面应该遵循的原则是 形式为内容服务 一般的步骤是 草案尽可能的发挥你的想象力 将你想到的 景象 画上去 这属于创造阶段 不讲究细腻工整 不必考虑细节功能 只以粗陋的线条勾画出创意的轮廓即可 粗略布局在草案的基础上 将你确定需要放置的功能模块安排到页面上 注意 必须遵循突出重点 平衡谐调的原则 定案将粗略布局精细化 具体化 第三节网页设计基础 2 布局设计 布局过程中 可以遵循的原则有 1 正常平衡 亦称 匀称 多指左右 上下对照形式 主要强调秩序 能达到安定 诚实 信赖的效果 2 异常平衡 即非对照形式 但也要平衡和韵律 当然都是不均整的 此种布局能达到强调性 不安性 高注目性的效果 1 2 3 对比 所谓对比 不仅利用色彩 色调等技巧来作表现 在内容上也可涉及古与今 新与旧 贫与富等对比 4 凝视 所谓凝视是利用页面中人物视线 使浏览者仿照跟随的心理 以达到注视页面的效果 一般多用明星凝视状 第三节网页设计基础 2 布局设计 3 4 5 空白 空白有两种作用 一方面对其他网站表示突出卓越 另一方面也表示网页品位的优越感 这种表现方法对体现网页的格调十分有效 6 尽量用图片解说 此法对不能用语言说服 或用语言无法表达的情感 特别有效 图片解说的内容 可以传达给浏览者更多的心理因素 第三节网页设计基础 2 布局设计 5 6 第三节网页设计基础 2 布局设计 常用的版面布局形式有 1 T 结构布局 所谓 T 结构 就是指页面顶部为横条网站标志 广告条 下方左面为主菜单 右面显示内容的布局 因为菜单条背景较深 整体效果类似英文字母 T 所以称之为 T 形布局 这是网页设计中用的最广泛的一种布局方式 优点页面结构清晰 主次分明 是初学者最容易上手的布局方法 缺点规矩呆板 如果细节色彩上不注意 很容易让人 看之无味 2 口 型布局 这是一个象形的说法 就是页面一般上下各有一个广告条 左面是主菜单 右面放友情连接等 中间是主要内容 也有将四边空出 只用中间的窗口型设计 第三节网页设计基础 2 布局设计 优点充分利用版面 信息量大 缺点页面拥挤 不够灵活 3 三 型布局 这种布局多用于国外站点 国内用的不多 特点是页面上横向两条色块 将页面整体分割为三部分 色块中大多放广告条 第三节网页设计基础 2 布局设计 4 对称对比布局 顾名思义 采取左右或者上下对称的布局 一半深色 一半浅色 一般用于设计型站点 第三节网页设计基础 2 布局设计 优点视觉冲击力强 缺点将两部分有机的结合比较困难 5 POP布局 POP引自广告术语 是指页面布局象一张宣传海报 以一张精美图片作为页面的设计中心 常用于时尚类站点 作为版面布局还是值得借鉴的 优点漂亮吸引人 缺点速度慢 第三节网页设计基础 2 布局设计 6 其他布局 更多的网站并没有一定的规律 只是在排版布局中加入各自的想法 因此 网站的布局也各有特色 在做这种网站时 哪里该放什么 哪里不该放什么 必须做到胸有成竹 否则就会乱掉 或者整个网站风格不统一 第三节网页设计基础 2 布局设计 建议 加强视觉效果加强文案的可视度和可读性统一感的视觉新鲜和个性是布局的最高境界 第三节网页设计基础 2 布局设计 第三节网页设计基础 3 色彩运用 1 网页色彩搭配的原则 a 色彩的鲜明性 网页的色彩要鲜艳 容易引人注目 b 色彩的独特性 要有与众不同的色彩 使得给人的印象强烈 c 色彩的合适性 就是说色彩和所表达的内容气氛相适合 如用粉色体现女性站点的柔性 d 色彩的联想性 不同色彩会产生不同的联想 蓝色想到天空 黑色想到黑夜 红色想到喜事等 选择色彩要和网页的内涵相关联 第三节网页设计基础 3 色彩运用 2 网页色彩掌握的过程 单色 五彩缤纷 标准色 单色 3 技巧 用一种色彩先选定一种色彩 然后调整透明度或者饱和度 使色彩变淡或加深 产生新的色彩 用于网页 这样的页面看起来色彩统一 有层次感 用两种色彩先选定一种色彩 然后选择它的对比色 如主页用蓝色和黄色就是这样确定的 整个页面色彩丰富但不花稍 第三节网页设计基础 3 色彩运用 3 技巧 用一个色系简单的说就是用一个感觉的色彩 例如淡蓝 淡黄 淡绿 或者土黄 土灰 土蓝 用黑色和一种彩色 4 网页配色忌讳 a 不要将所有颜色都用到 尽量控制在三种色彩以内 b 背景和前文的对比尽量要大 尽量不要用花纹繁复的图案作背景 以便突出主要文字内容 色彩运用举例 福克斯新闻网 白色调为主 加上蓝色与