《网页设计与制作》讲义-专题1 网页设计基础知识

专题专题 1 1 网页设计基础知识网页设计基础知识 1 11 1认识网站 网页与主页认识网站 网页与主页 1 1 11 1 1 什么是网页什么是网页 网页 Web 页 实际上就是 HTML 文件 是一种可以在 WWW 网上传输 并能被浏览器 认识和翻译成页面的文件 HTML 是 HyperText Markup Language 的缩写 意为 超文本标记语言 它是一 种规范 一种标准 它是纯文本格式的 用任何文本编辑器都可以打开编辑 网页包括的主要元素有 文本 图像 动画 声音 视频 超链接 表格 表单等 由于多数网页一般均有文字 图像 图形 动画 音频 视频等多媒体信息 具有 超链接 并可与网络链接 因此这就使人们登上站点以后 便可以看到五彩缤纷的界面 那么 这些五彩缤纷和千姿百态的 Web 网页是如何制作出来的 制作好网页以后又如何 将它发布到 Internet 上 这些问题正是本课程所要阐述的主题 1 1 21 1 2 什么是网站什么是网站 多个相互之间具有一定联系的网页就构成了一个网站 网站用于存储提供给用户浏览的网页文件 它也是一种文档的磁盘组织形式 由文 档和若干文件夹组成 文档经过组织分类分别放在不同的文件夹中 网站存储在服务器或服务器的虚拟主机上 接受访问者通过 WWW 域名的访问 网站是具有独立域名 独立存放空间的内容集合 这些内容可能是网页 也可能是 程序或其它文件 一个网站不一定要有很多网页 主要是有独立域名 独立存放空间 即使只有一个页面 也叫网站 网站按照其内容可以分为以下几类 1 企业网站 围绕企业 产品及服务信息进行网络宣传 通过网站树立企业网络形 象 2 个人网站 个人为了兴趣爱好或为了展示个人等目的而建的网站 具有较强的个 性化特色 3 门户网站 提供综合性互联网资源的网站 国内著名三大门户网站 网易 搜狐 新浪 4 机构网站 政府机关 相关社团组织或事业单位建立的网站 以机构或社团形象 宣传和政府服务为主 5 娱乐网站 提供娱乐信息 流行音乐 视频等娱乐内容为主的网站 6 电子商务网站 依靠因特网来完成商业活动的各个环节的网站 如卓越 当当 淘宝 易趣 拍拍等 7 行业信息网站 随着因特网的发展 网民数量的增加 上网不同兴趣群体的形成 门户网站已经明显不能满足不同上网群体的需要 行业信息网站应运而生 它是能够满 足某一特定领域上网人群及其特定需求的网站 如房地产行业网站 8 专业网站 专门以某个主题为内容而建立的网 如某某课程的网络课程 不同类型网站具有不同的风格和作用 在设计网站时 页面元素的设计 构图 色 彩搭配 多媒体信息的使用 文本格式等的设计 要考虑网站的类型 1 1 31 1 3 什么是主页什么是主页 主页又叫首页 主页是网站的第一页 既是一个网站的封面 也是该网站的目录 2 欣赏几个不同类型的网站主页 问题 问题 问题 问题 主页 网页与网站的关系 先规划土地还是先建房 先建房还是先买家具 先建网页还是先建网站 1 1 41 1 4 网页基本构成要素网页基本构成要素 不同性质的网站具有不同的页面元素 但是 一般的网页都会具备以下一些元素 1 1 标题 标题 标题用来说明网站的形式 内容等信息 2 2 站标 站标 LogoLogo 网站 Logo 也叫网站标志 它是一个站点的象征 也是一个站点是否正规的标志之 一 一个好的标志可以很好地树立公司形象 网站标志一般放在网站的左上角 访问者 一眼就能看到它 成功的网站标志有着独特的形象标识 在网站的推广和宣传中起到事 半功倍的效果 网站标志应体现该网站的特色 内容以及其内在的文化内涵和理念 3 3 bannerbanner Banner 是一种网络广告形式 Banner 广告一般是放在网页的顶部位置 在用户浏览 网页信息的同时 吸引用户对于广告信息的关注 Banner 广告有多种规格和形式 其中最常用的是 486 60 像素的标准广告 这种 标志广告有多种不同的称呼 如横幅广告 全幅广告 条幅广告和旗帜广告等 通常是 以 GIF JpG 等格式建立的图像文件或 Flash 文件 4 4 导航栏 导航栏 网站索引网站索引 导航栏既是网页设计中的重要部分 又是整个网站设计中的一个较独立的部分 一 般来说网站中的导航栏位置在各个页面中出现的位置是比较固定的 而且风格也较为一 致 导航栏的位置对网站的结构与各个页面的整体布局起到举足轻重的作用 5 5 内容 内容 网站的精神所在网站的精神所在 文本一直是人类最重要的信息载体与交流工具 网页中的信息也以文本为主 与图 像相比 文字虽然不如图像那样易于吸引浏览者的注意 但却能准确地表达信息的内容 和含义 图像在网页中具有提供信息 展示形象 美化网页 表达个人情趣和风格的作用 可以在网页中使用 GIF JpEG 和 pNG 等多种图像格式 其中使用最广泛的是 GIF 和 JpEG 两种格式 随着网络技术的发展 网页上出现了越来越多的 Flash 动画 Flash 动画已经成为 当今网站必不可缺少的部分 美观的动画能够为网页增色不少 从而吸引更多的浏览者 Flash 动画不仅需要对动画制作软件非常熟悉 更重要的是设计者独特的创意 6 6 页脚 页脚 页脚放置网页设计者的基本信息 思考题 网页的设计需要考虑哪些因素 标题 Logo 页眉 页脚 导航的设计 版面布局的设计 连接结构的设计 网页色彩的搭配设计 字体的设计 宣传标语的设 计等 1 1 51 1 5 网页的分类网页的分类 我们通常看到的网页 大都是以 HTM 或 HTML 后缀结尾的文件 除此之外 网页文件 还有以 CGI ASp pHp 和 JSp 后缀结尾的 目前网页根据生成方式 大致可以分为静态 网页和动态网页两种 1 1 静态网页 静态网页 静态网页是网站建设初期经常采用的一种形式 网站建设者把内容设计成静态网页 访问者只能被动地浏览网站建设者提供的网页内容 其特点如下 网页内容不会发生变化 除非网页设计者修改了网页的内容 不能实现和浏览网页的用户之间的交互 信息流向是单向的 即从服务器到浏览器 3 服务器不能根据用户的选择调整返回给用户的内容 静态网页的浏览过程如图 1 所示 我们使用 dreamweaver 和 html 制作的网页属于静态网页 2 2 动态网页 动态网页 网络技术日新月异 许多网页文件扩展名不 再只是 htm 还有 php asp 等 这些都是采用 动态网页技术制作出来的 动态网页其实就是建 立在 B S 架构上的服务器端脚本程序 在浏览器 端显示的网页是服务器端程序运行的结果 动态 网页是经过人与服务器对话的结果 如图网页上 的登录 注册 网上购物等都属于此类网站 静态网页与动态网页的区别在于 Web 服务器对它们的处理方式不同 当 Web 服务器 接收到对静态网页的请求时 服务器直接将该页发送给客户浏览器 不进行任何处理 如果接收到对动态网页的请求 则从 Web 服务器中找到该文件 并将它传递给一个称为 应用程序服务器的特殊软件扩展 由它负责解释和执行网页 将执行后的结果传递给客 户浏览器 应用程序服务器的作用是读取动态网页上的代码 根据代码中的指令完成网页 然 后将代码从网页上去掉 所得的结果将是一个静态网页 应用程序服务器将该网页传送 回网页服务器 网页服务器将网页发送到浏览器 浏览器得到的仍然是一个纯 HTML 的静 态网页 如图 2 所示为动态网页的工作原理图 图 2 动态网页的工作原理图 动态网页的一般特点如下 动态网页以数据库技术为基础 可以大大降低网站维护的工作量 动态网页以数据库技术为基础 可以大大降低网站维护的工作量 采用动态网页技术的网站可以实现更多的功能 如用户注册 用户登录 搜索查询 采用动态网页技术的网站可以实现更多的功能 如用户注册 用户登录 搜索查询 用户管理 订单管理等 用户管理 订单管理等 动态网页并不是独立存在于服务器上的网页文件 只有当用户请求时服务器才返回动态网页并不是独立存在于服务器上的网页文件 只有当用户请求时服务器才返回 一个完整的网页 一个完整的网页 搜索引擎一般不可能从一个网站的数据库中访问全部网页 因此采用动态网页的网搜索引擎一般不可能从一个网站的数据库中访问全部网页 因此采用动态网页的网 站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求 站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求 1 21 2网站制作基本流程网站制作基本流程 创建网站是一个系统工程 有一定的工作流程 只有遵循一定的步骤 按部就班地 来 才能设计出满意的网站 图 1 静态网页的浏览过程 4 1 2 11 2 1 前期策划前期策划 建立网站第一步就应该确定网站的目标 包括 1 网站的整体定位 是商务网站 科研网站 个人网站还是交流平台或者公司或企业的介绍性网站 2 网站要包含的主要 内容和方向等 在确定了目标和内容后 应该给自己的网站起一个响亮的名字 思考如 何使自己的网站在网络海洋里脱颖而出 一 确定网站主题一 确定网站主题 设计一个站点 首先遇到的问题就是定位网站主题 所谓主题也就是的网站的题材 网络上的网站题材千奇百怪 琳琅满目 常见的网站题材有 第 1 类 网上求职 第 2 类 网上聊天 即时信息 ICQ 第 3 类 网上社区 讨论 邮件列表 第 4 类 计算机技术 第 5 类 网页 网站开发 第 6 类 娱乐网站 第 7 类 旅行 第 8 类 参考 资讯 第 9 类 家庭 教育 第 10 类 生活 时尚 每个大类都可以继续细分 比如娱乐类再分为体育 电影 音乐大类 音乐又可以 按格式分为 Mp3 WMA Ra 等 按表现形式分古典 现代 摇滚等 以上都只是最常见的 题材 还有许多专业的 另类的 独特的题材可以选择 比如中医 热带鱼 天气预报 等等 同时 各个题材相联系和交叉结合可以产生新的题材 例如旅游论坛 旅游 讨论 经典入球播放 足球 影视 等 按这样分下去 题材可以有成千上万个 对于题材的选择 通常遵循以下原则 1 1 主题要小而精主题要小而精 定位要小 内容要精 如果想制作一个包罗万象的站点 把所有您认为精彩的东西 都放在上面 那么往往会事与愿违 给人的感觉是没有主题 没有特色 样样有却样样 都很肤浅 因为您不可能有那么多的精力去维护它 网络的最大特点就是新和快 目前 最热门的个人主页都是天天更新甚至几小时更新一次 最新的调查结果也显示 网络上 的 主题站 比 万全站 更受人们喜爱 就好比专卖店和百货商店 如果我需要买某 方面的东西 肯定会选择专卖店 2 2 题材最好是自己擅长或者喜爱的内容题材最好是自己擅长或者喜爱的内容 比如 您对擅长编程 就可以建立一个编程爱好者网站 对足球感兴趣 可以报道 最新的战况 球星动态等 这样在制作时 才不会觉得无聊或者力不从心 兴趣是制作 网站的动力 没有热情 很难设计制作出杰出的作品 3 3 题材不要太滥或者目标太高题材不要太滥或者目标太高 太滥 是指到处可见 人人都有的题材 比如软件下载 免费信息 目标太高 是指在这一题材上已经有非常优秀 知名度很高的站点 要超过它是很困难的 除非下 决心和有实力竞争并超过它 记住 在互联网上只有第一 人们往往只记得最好的网站 第二第三名的印象则会浅得多 二 定义网站名称二 定义网站名称 网站名称也是网站设计的一部分 而且是很关键的一个要素 比如 电脑学习室 和 电脑之家 显然是后者简练 迷笛乐园 和 MIDI 乐园 显然是后者明晰 儿 童天地 和 中国幼儿园 显然是后者大气 我们都知道 pIIICUp 的中文名称 奔腾 如果改为 奔跑 可能就没有今天这么 火 了 和现实生活中一样 网站名称是否正 气 响亮 易记 对网站的形象和宣传推广也有很大影响 一般的建议是 5 1 1 名称要正 名称要正 2 2 名称要易记 名称要易记 根据中文网站浏览者的特点 除非特定需要 网站名称最好用中文名称 不要使用英 文或者中英文混合型名称 例如 beyond studio 和超越工作室 后者更亲切好记 另外 网站名称的字数应该控制在六个字 最好四个字 以内 比如 XX 阁 XX 设计室 四 个字的可以用成语 如 一网打进 字数少还有个好处 一般友情链接的小 logo 尺寸 是 88X31 而六个字的宽度是 78 左右 适合于其他站点的链接排版 3 3 名称要有特色 名称要有特色 名称平实就可以接受 如果能体现一定的内涵 给浏览者更多的视觉冲击和空间想 象力 则为上品 如 音乐前卫 网页陶吧 天籁绝音 地球之殇 在体现出网站主题 的同时 能点出特色之处 1 2 21 2 2 站点规划与设计站点规划与设计 要想制作精彩的网页 吸引住浏览者 还要好好规划网站 规划站点就像设计一座 大楼一样 只有图纸设计好了 才能建成一座漂亮的楼房 在规划网站时 明确该网站 中需要包含哪些元素 网站的整体结构 同时将网站内容分类 确定各页的主题 各页 包含的内容 以及各页之间的层次结构和逻辑关系 以及每幅网页的布局 包括每幅网 页中图片和文字的排列 它们之间的相互关系 在页面中各部分的颜色如何选取 如果 是框架页面 还要设计页面框架的分布 页面中在什么位置放置链接点 页面中包含哪 些信息内容等等 一 栏目的设置一 栏目的设置 要将最好的 最吸引人的内容放在最突出的位置 让好东西在版面分布上占绝对优 势 那么栏目就是最好的工具 栏目的实质是一个网站的大纲索引 索引应该将网站的 主体明确显示出来 在制定栏目的时候 要仔细考虑 合理安排 一般的网站栏目安排 要注意以下几方面 1 1 要紧扣主题并突出主题要紧扣主题并突出主题 一般的做法是 将主题按一定的方法分类并将它们作为网站的主栏目 例如有一 个以提供网站动画和图片素材为主题的站点 可以将栏目设计如下 记住 主题栏目个数在总栏目中要占绝对优势 这样的网站显的专业 主题突出 容 易给人留下深刻印象 把主题栏目放在最显眼的地方 让访问者更快 更鲜明地知道网站所要表现的内容 2 2 设一个最近更新栏目或网站指南栏目设一个最近更新栏目或网站指南栏目 3 3 设定一个可以双向交流的栏目设定一个可以双向交流的栏目 比如论坛 留言本 邮件列表等 可以让浏览者留下他们的信息 4 4 设一个下载或常见问题回答栏目设一个下载或常见问题回答栏目 至于其他的辅助内容 如关于本站 版权信息等可以不放在主栏目里 以免冲淡主题 总结以上几点 我们得出划分栏目需要注意的是 尽可能删除与主题无关的栏目 尽可能将网站最有价值的内容列在栏目上 尽可能方便访问者的浏览和查询 二 版块二 版块的设置的设置 版块比栏目的概念要大一些 每个版块都有自己的栏目 6 举个例子 网易的站点分新闻 体育 财经 娱乐 教育等版块 每个版块下面又各 有自己的主栏目 一般的个人站点内容少 只有主栏目 主菜单 就够了 不需要设置版块 如果觉得的确有必要设置版块的 应该注意 各版块要有相对独立性 各版块要有相互关联 版块的内容要围绕站点主题 三 三 网站的目录结构网站的目录结构的设计的设计 网站的目录是指建立网站时创建的目录 例如 在用 DW 建立网站时都默认建立了 根目录和 images 子目录 目录的结构是一个容易忽略的问题 大多数站长都是未经规划 随意创建子目录 目录结构的好坏 对浏览者来说并没有什么太大的感觉 但是对于站 点本身的上传维护 内容未来的扩充和移植有着重要的影响 下面是建立目录结构的一 些建议 1 1 不要将所有文件都存放在根目录下 不要将所有文件都存放在根目录下 有人为了方便 将所有文件都放在根目录下 这样做造成的不利影响在于 文件管理混乱 常常搞不清哪些文件需要编辑和更新 哪些无用的文件可以删除 哪些是相关联的文件 影响工作效率 上传速度慢 服务器一般都会为根目录建立一个文件索引 当您将所有文件都放 在根目录下 那么即使只上传更新一个文件 服务器也需要将所有文件再检索一遍 建 立新的索引文件 很明显 文件量越大 等待的时间也将越长 所以 建议是 尽可能 减少根目录的文件存放数 2 2 按栏目内容建立子目录 按栏目内容建立子目录 子目录的建立 首先按主菜单栏目建立 例如 网页教程类站点可以根据技术类别分 别建立相应的目录 象 Flash Dhtm Javascript 等 企业站点可以按公司简介 产品 介绍 价格 在线定单 反馈联系等建立相应目录 而一些相关性强 不需要经常更新的栏目 例如 关于本站 关于站长 站点经历 等可以合并放在一个统一目录下 3 3 在每个主目录下都分别为图像建立独立的在每个主目录下都分别为图像建立独立的 imagesimages 目录 目录 默认的 一个站点根目录下都有一个 images 目录 为每个主栏目建立一个独立的 images 目录是最方便管理的 而根目录下的 images 目录只是用来放首页和一些次要栏目 的图片 4 4 目录的层次不要太深 目录的层次不要太深 目录的层次建议不要超过 3 层 原因很简单 维护管理方便 5 5 其它需要注意的其它需要注意的 不要使用中文目录 网络无国界 使用中文目录可能对网址的正确显示造成困难 不要使用过长的目录 尽管服务器支持长文件名 但是太长的目录名不便于记忆 新闻的主栏目新闻的主栏目 图网站板块举例 7 尽量使用意义明确的目录 上面的例子中 可以用 Flash Dhtml Javascript 来建立目录 也可以用 1 2 3 建立目录 但是哪一个更明确 更便于记忆和管理呢 显然是前者 四 四 网站的链接结构网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构 它建立在目录结构基础之上 但可以跨越目录 形象的说 每个页面都是一个固定点 链接则是在两个固定点之间的 连线 一个点可以和一个点连接 也可以和多个点连接 更重要的是 这些点并不是分 布在一个平面上 而是存在于一个立体的空间中 一般的 建立网站的链接结构有两种基本方式 1 1 树状链接结构 一对一 树状链接结构 一对一 这样的链接结构浏览时 一级级进入 一级级退出 优点是条理清晰 访问者明确 知道自己在什么位置 不会迷路 缺点是浏览效率低 一个栏目下的子页面到另一个栏 目下的子页面 必须绕经首页 2 2 星状链接结构 一对多 星状链接结构 一对多 类似网络服务器的链接 每个页面相互之间都建立有链接 这种链接结构的优点是 浏览方便 随时可以到达自己喜欢的页面 缺点是链接太多 容易使浏览者迷路 搞不 清自己在什么位置 看了多少内容 这两种基本结构都只是理想方式 在实际的网站设计中 总是将这两种结构混合起 来使用 我们希望浏览者既可以方便快速的达到自己需要的页面 又可以清晰的知道自 己的位置 所以 最好的办法是 首页和一级页面之间用星状链接结构 一级和二级页面之间用树状链接结构 首页和一级页面之间用星状链接结构 一级和二级页面之间用树状链接结构 例如 一个新闻站点的页面结构如下 图 新闻站点页面结构图 其中 首页 财经新闻页 娱乐新闻页 IT 新闻页之间是星状链接 可以互相点击 直接到达 而财经新闻页和它的子页面之间是树状连接 浏览财经新闻 1 后 必须回到 财经新闻页 才能浏览 IT 新闻 2 注意 如果的站点内容庞大 分类明细 需要超过三级页面 那么建议在页面里显示 导航条 可以帮助浏览者明确自己所处的位置 就是您经常看到许多网站页面顶部的 类似这样 关于链接结构的设计 在实际的网页制作中是非常重要一环 采用什么样的链接结构 直接影响到版面的布局 例如的主菜单放在什么位置 是否每页都需要放置 是否需要 用分帧框架 是否需要加入返回首页的链接 在连接结构确定后 再开始考虑链接的效 一级页面一级页面 二级页面二级页面 8 果和形式 是采用下拉表单 还是用 DHTML 动态菜单等等 五 网页的布局五 网页的布局 网页页面的版面布局是不可忽视的 一个网页是否精彩 与网页布局有重要关系 常见的网页布局类型常见的网页布局类型 国字型 匡字型 三字型 川字型 拐角型 厂字型 封面 型 flash 型等 此外还有骨骼型 满版型 分割型 中轴型 对称型 焦点型 自由型 等 国 字型布局 最上面是网站的标志 广告以及导航栏 接下来是网站的主要内 容 左右分别列出一些栏目 中间是主要部分 最下部是网站的一些基本信息 这种结 构是国内一些大中型网站常见的布局方式 优点是充分利用版面 信息量大 缺点是页 面显得拥挤 不够灵活 拐角型结构布局是指页面顶部为标志 广告条 下方左面为主菜单 右面显示正文信 息 这是网页设计中使用广泛的一种布局方式 一般应用于企业网站中的二级页面 这 种布局的优点是页面结构清晰 主次分明 是初学者最容易上手的布局方法 在这种类 型中 一种很常见的类型是最上面是标题及广告 左侧是导航链接 框架型布局 一般分成上下或左右布局 一栏是导航栏目 一栏是正文信息 复杂 的框架结构可以将页面分成许多部分 常见的是三栏布局 上边一栏放置图像广告 左 边一栏显示导航栏 右边显示正文信息 封面型布局 一般应用在网站的主页或广告宣传页上 为精美的图像加上简单的文 字链接 指向网页中的主要栏目 或通过 进入 链接到下一个页面 Flash 型布局 这种布局与封面型的布局结构类似 不同的是页面采用了 Flash 技 术 动感十足 可以大大增强页面的视觉效果 标题正文型 这种类型即最上面是标题或类似的一些东西 下面是正文 如一些文 章页面或注册页面等就是这种类 网页布局的技巧 网页布局的技巧 1 内容第一 形式第二 内容决定形式 形式表现内容 2 布局设计要综合运用对比与调和 对称与平衡 节奏与韵律 以及留白等手段 通 过空间 文字 图形之间的相互关系建立整体的均衡状态 使网页疏密有致 井井 有条 重点突出 平衡和谐 3 加强视觉效果 保持新鲜和个性 在浩瀚的网页中 如何使自己的网页吸引浏览者 的视线 增强网站的浏览量 强烈的视觉效果是必要手段 同时 只有那些具有个 性的 充满趣味且与众不同的网页 才能给人带来赏心悦目的感觉 4 页面风格的统一协调 包括布局结构 色彩搭配 等设计风格的统一 如网站标志 等设计性元素的一致性 网站导航的位置 形式的一致性 版权信息及色彩的一致 性 还要注意其它页面和首页的风格一致性等 网页布局的技术 网页布局的技术 1 表格布局 2 ApDiv 层 布局 3 Spry 布局对象 4 CSS Div 布局 5 框架布局 六 确定网站的整体风格和创意设计六 确定网站的整体风格和创意设计 网站的整体风格及其创意设计是设计者最希望掌握 也是最难以学习的 难就难在没 有一个固定的程式可以参照和模仿 给一个主题 任何两人都不可能设计出完全一样的 网站 1 风格风格 风格 style 是抽象的 是指站点的整体形象给浏览者的综合感受 这个 整体形象 9 包括站点的 CI 标志 色彩 字体 标语 版面布局 浏览方式 交互性 文字字体和 大小以及背景的使用 语气 内容价值等等诸多因素 举个例子 我们觉得网易是平易 近人的 迪斯尼是生动活泼的 IBM 是专业严肃的 这些都是网站给人们留下的不同感受 有风格的网站与普通网站的区别在于 普通网站看到的只是堆砌在一起的信息 只能 用理性的感受来描述 比如信息量大小 浏览速度快慢 但浏览过有风格的网站后能有 更深一层的感性认识 比如站点有品位 和蔼可亲 是老师 是朋友 如何树立网站风格呢 我们可以分这样几个步骤 第一 确信风格是建立在有价值内容之上的 一个网站有风格而没有内容 就好比绣 花枕头一包草 好比一个性格傲慢但却目不识丁的人 首先必须保证内容的质量和价值 性 这是最基本的 无须置疑 第二 需要彻底搞清楚自己希望站点给人的印象是什么 可以从以下几方面思考 第三 在明确自己的网站印象后 开始努力建立和加强这种印象 此时 需要进一步找出其中最有特色的东西 就是最能体现网站风格的东西 并以它 作为网站的特色加以重点强化 例如 再次审查网站名称 域名 栏目名称是否符合这 种个性 是否易记 审查网站标准色彩是否容易联想到这种特色 是否能体现网站的性 格等等 比如 定位网站定位网站 CICI 形象形象 所谓 CI corporate identity 是借用的广告术语 意思是通过视觉来统一企业的形象 现实生活中的 CI 策划比比皆是 杰出的例子如 可口可乐公司 全球统一的标志 色彩 和产品包装 给我们的印象极为深刻 更多的例子如 SONY 三菱 麦当劳等等 一个 杰出的网站 和实体公司一样 也需要整体的形象包装和设计 准确的 有创意的 CI 设 计 对网站的宣传推广有事半功倍的效果 1 1 设计网站的标志 设计网站的标志 logo logo 首先需要设计制作一个网站的标志 logo 就如同商标一样 logo 是站点特色和内涵 的集中体现 看见 logo 就让大家联想起的站点 即网站的标志 标志可以是中文 英文字母 可以是符号 图案 可以是动物或者人物等等 比如 新浪用字母 sina 眼睛作为标志 标志的设计创意来自网站的名称和内容 欣赏一些 网站 Logo 1 网站有代表性的人物 动物 花草 可以用它们作为设计的蓝本 加以卡通化和 艺术化 例如腾讯的企鹅 搜狐的卡通狐狸 10 2 网站有专业性的 可以以本专业有代表的物品作为标志 比如中国银行的铜板标 志 奔驰汽车的方向盘标志 3 最常用和最简单的方式是用自己网站的英文名称作标志 采用不同的字体 字 母的变形 字母的组合可以很容易制作好自己的标志 例如前面提到的新浪 以及迪斯 尼 2 2 设计网站的配色方案 设计网站的配色方案 打开一个网站 给用户留下第一印象的既不是网站丰富的内容 也不是网站合理的 版面布局 而是网站的色彩 一个网站设计成功与否 在某种程度上取决于设计者对色 彩的运用和搭配 因此 在设计网页时 必须要高度重视色彩的搭配 一般来说 适合网页标准色彩有 3 大色系 蓝色 橙色 黄色 黑 白 灰色系 不同 的色彩搭配会产生不同的效果 应该结合站点整体目标和内容来设计 红色 橙色温暖 兴奋 热情 橙色适用于视觉要求较高的时尚网站 属于注目 芳香的颜色 也常被用于味觉较高的食品网站 是容易引起食欲的颜色 但是 暖色调 容易造成人视觉疲劳 慎用 黑色神秘 高贵 在商业设计中 黑色是许多科技产品的用色 如电视 跑车 摄 影机 音响 仪器的色彩大多采用黑色 灰色具有柔和 高雅的意象 而且属于中间性格 男女皆能接受 所以灰色也是永 远流行的主要颜色 许多高科技产品 尤其是和金属材料有关的 几乎都采用灰色来传 达高级 高科技的形象 使用灰色时 大多利用不同层次的变化组合和与其他色彩搭配 才不会过于平淡 沉闷 呆板 僵硬 紫色具有强烈的女性化性格 在商业设计用色中 紫色受到相当的限制 除了和女 性有关的商品或企业形象外 其他类的设计不常采用紫色作为主色 黄色是阳光的色彩 具有活泼与轻快的特点 给人以十分年轻的感觉 象征光明 希望 高贵 愉快 它的亮度最高 和其他颜色搭配显得很活泼 有温暖感 具有快乐 希望 智慧和轻快的个性 有希望与功名等象征意义 黄色也代表着土地 象征着权力 并且还具有神秘的宗教色彩 浅黄色系明朗 愉快 希望 发展 它的雅致 清爽属性 较适合用于女性及化妆品类网站 中黄色有崇高 尊贵 辉煌 注意 扩张的心理感受 深黄色给人高贵 温和 稳重的心理感受 绿色所传达的是清爽 理想 希望 生长的意象 符合服务业 卫生保健业 教育 行业 农业 餐饮酒店的要求 在工厂中 为了避免操作时眼睛疲劳 许多机械也是采 用绿色 一般的医疗机构场所 也常采用绿色来做空间色彩规划 蓝色给人以沉稳的感觉 且具有智慧 准确的意象 在商业设计中强调高科技 效 率高的商品或企业形象 大多选用蓝色作为标准色 企业色 如电脑 汽车 影印机 摄影器材等 另外 蓝色也代表忧郁和浪漫 这个意象也常运用在文学作品或感性诉求 的商业设计中 举个实际的例子 IBM 的深蓝色 肯得基的红色条型 windows 视窗标志上的红蓝 黄绿色块 都使我们觉得很贴切 很和谐 如果将 IBM 改用绿色或金黄色 我们会有什 么感觉 色彩搭配既是一项技术性工作 同时也是一项艺术性很强的工作 因此在设计网页 时除了考虑网站本身的特点外 还要遵循一定的艺术规律 从而设计出色彩鲜明 性格 独特的网站 网页色彩搭配的技巧网页色彩搭配的技巧 到底用什么色彩搭配好看呢 下面是网页色彩搭配的一些常见技巧 1 运用相同色系色彩 使网页色彩趋于一致 塑造和谐统一的氛围 缺点是容易 造成单调 所以使用局部对比色增加变化 如局部地区加入一张与背景呈对比色彩 的图片 11 什么是相同色系 在 360 度色相环上位置相近 大约在 45 度左右的色彩 或同一色相不同明度的色 彩 2 使用邻近色 色带上向邻近的颜色 作用同上 3 使用对比色 对比色作为点缀 突出重点 画龙点睛 4 背景色的使用 采用素淡清雅的颜色 避免采用花纹复杂的图案和纯度很高的 色彩 背景要与文字的颜色对比强烈 5 把握色彩的数量 网站用色控制在 3 种以内 多了 显得花哨 杂乱 通过改 变色彩的各种属性 如明度 饱和度 来产生变化 3 3 设计网站的标准字体 设计网站的标准字体 和标准色彩一样 标准字体是指用于标志 标题 主菜单的特有字体 一般我们网 页默认的字体是宋体 为了体现站点的与众不同和特有风格 我们可以根据需要选择一 些特别字体 例如 为了体现专业可以使用粗仿宋体 体现设计精美可以用广告体 体 现亲切随意可以用手写体等等 需要说明的是 使用非默认字体只能用图片的形式 因为很可能浏览者的 pC 里没 有安装的特别字体 那么您的辛苦设计制作便付之东流啦 突出的标准字体 在关键的标题 菜单 图片里使用统一的标准字体 4 4 设计网站的宣传标语 设计网站的宣传标语 也可以说是网站的精神 网站的目标 用一句话甚至一个词来高度概括 类似实际 生活中的广告金句 例如 鹊巢的 味道好极了 麦斯威尔的 好东西和好朋友一起分 享 Intel 的 给一颗奔腾的芯 想一条朗朗上口宣传标语 把它做在的 banner 里 或者放在醒目的位置 告诉大家 的网站的特色是什么 以上四方面 标志 色彩 字体 标语 是一个网站树立 CI 形象的关键 确切的说 是网站的表面文章 设计并完成这几步 的网站将脱胎换骨 整体形象有一个提高 风格的形成不是一次定位的 需要在实践中不断强化 调整 修饰 2 创意创意 创意 idea 是网站生存的关键 那么创意到底是什么 如何产生创意呢 创意是引人入胜 精彩万分 出奇不意的 创意是捕捉出来的点子 是创作出来的奇 招等 这些讲法都说出了创意的一些特点 实质上 创意是传达信息的一种特别方式 比如 我们将其中的 E 字母大写一下 感觉怎么样 这其实 就是一种创意 创意是将现有的元素重新组合 比如 网络与电话结合 产生 Ip 电话 从这一点上 出发 任何人 包括和我 都可以创造出不同凡响的创意 而且 资料越丰富 越容易 产生创意 就好比万花筒 筒内的玻璃片越多 所呈现的图案越多 如果有心可以发现 网络上的最多的创意来自与现实生活的结合 或者虚拟现实 例如在线书店 电子社区 在线拍卖 关于风格和创意 又是一门学问 可以自己找一些广告设计方面的书阅读 通过以上步骤 最终会形成一个文件 策划方案 说明网站的用户群 定位网站主 题 风格 创意 主要内容 栏目 版块 目录结构和链接结构 以及网站形象策划 制作规范和后期推广宣传等方面的内容 1 2 31 2 3 规划和搜集素材规划和搜集素材 网站的主题内容是文本 图像和多媒体等 它们构成了网站的灵魂 否则再好的结 构设计都不能达到网站设计的初衷 也不能吸引浏览者 在对网站进行结构设计之后 需要对每个网页的内容进行一个大致的构思 如哪些网页需要使用模板 哪些网页需要 12 使用特殊设计的图像 哪些网页需要使用较多的动态效果 如何设计菜单 采用什么样 式的链接 网页采用什么颜色和风格等 这些都对资源收集具有指导性作用 要围绕主题开始搜集资料 资料既可以从图书 报纸 光盘 多媒体上获得 也可 以从网上搜集 然后再把搜集的材料去粗取精 去伪存真 作为自己制作网页的素材 1 使用图形图像软件设计与制作网页图像 LOGO 导航条 Banner 首页布局等 2 使用 flash 等软件制作网站动画 如 Banner 广告窗 1 2 41 2 4 网站的创建和网页的设计与制作网站的创建和网页的设计与制作 在全面考虑好网站的栏目 链接结构和整体风格之后 我们就可以正式动手创建网 站 制作网页了 1 创建站点 先建目录 在目录下建站点 2 设计并制作网页 先设计后制作 按照前期的策划方案 制定适当的标准 设计人员进行设计 根据前期的策划方案 设计具体的页面 包括页面布局 导航 背景颜色 文字颜色 链接颜色 页面间的链接结构 制作人员进行制作 按照先大后小 先简单后复杂的顺序进行制作 先设计制作大 结构 再逐步完善小结构和小细节 先建主页 再建子页 在建立超链接 开发动态网站模块 页面制作完成后 如果还需要动态功能 则需要开发动态功能 模块 网站中常用的功能模块包括搜索功能 留言板 新闻发布 在线购物和论坛及聊 天室等 3 测试站点和改进 1 2 51 2 5 申请域名和服务器空间并上传网页申请域名和服务器空间并上传网页 不论公司还是个人 制作网页的目的一般来说是为了将其发布到网上 这就涉及需 要在 WWW 上建立 Web 站点 以及将站点发布到某一个 WWW 的 Web 服务器上 申请域名和服务器空间申请域名和服务器空间 域名是企业或事业单位在因特网上进行相互联络的网络地址 在网络时代 域名是 企业 机构进入因特网必不可少的身份证明 找到一家合适的域名服务提供商 注册域名并付费 以获取服务器空间 测试与上传网页测试与上传网页 可以采用 Dreamweaver 自带的站点管理上传文件 也可以采用专门的 FTp 软件上 传 利用这些 FTp 工具 可以很方便地把网站发布到服务器上 网站上传以后 要在浏 览器中打开自己的网站 逐页逐个链接地进行测试 发现问题 及时修改 然后再上传 测试 1 2 61 2 6 网站的宣传 推广 维护与管理网站的宣传 推广 维护与管理 网页做好之后 还要不断地进行宣传 这样才能让更多的朋友认识它 提高网站的 访问率和知名度 推广的方法有很多 如到搜索引擎上注册 网站交换链接 添加广告 链等 互联网络的最大优势就是信息的实时性 只有快速的反映 准确的报道 才能吸引 更多的浏览者 并且严格来说 每一个站点都应该由专业人员定期更新维护 更新维护 不仅仅只局限于简单的更换文字稿 以企业网站为例来说 更新维护应该将企业的商业 动态和发展方向充分考虑进去 再结合现有的网站规划结构 迅速作出相应的改进 1 31 3网页制作的工具软件和技术网页制作的工具软件和技术 1 网页编辑软件 Dreamweaver frontpage 2 网页动画制作软件 Flash 13 3 网页图形 图像编辑软件 photoshop Fireworks 4 网页标记语言 HTML 5 网页脚本语言 JavaScript 6 动态网页编程语言 ASp 1 41 4DreamweaverDreamweaver 软件简介软件简介 1 4 11 4 1 安装与卸载安装与卸载 1 4 21 4 2 界面简介界面简介 一 标题栏和菜单栏一 标题栏和菜单栏 标题栏标题栏 标题条显示页面标题 并在括号中显示文件的路径和文件名 如果做了更改但仍未保 存 则在文件名后显示一个星号 观察 对网页进行编辑后 标题栏有何变化 观察 使用 文件 菜单中的 保存 命令保存文件 标题栏有何变化 归纳 如果对当前网页进行了编辑但未存盘 则在文件名右侧出现 号标记 保 存后 号消失 菜单区菜单区 和其它的软件一样 该软件所有的操作命令都可以从这一个区内找到 实例 演示使 用 查看 菜单中的标尺和网格命令进行工作环境的设置 二 工具栏二 工具栏 演示 工具条 的显示与隐藏 文档文档 工具栏工具栏 若要显示或隐藏工具条 选择 查看 工具栏 文档 点击带有向下小箭头的工具 会弹出更多选择 若要在 网页文档 窗口中只显示代码 点击 代码 按钮 若要显示包括 代码 和 设计 的视图 点击 拆分 按钮 若要只显示 设计 视图 点击 设计 按钮 若要为文档输入一个标题 使用 标题 域 如果文档已经有了标题 它将出现在该 域中 若要在浏览器中预览或者调试文档 点击 在浏览器中预览 调试 按钮 在弹出的菜 单中选择一种浏览器 若要添加或改变菜单中列出的浏览器 选择 编辑浏览器列表 若要刷新的 设计 视图 请点击 刷新设计视图 按钮 若要访问 参考 面板 点击 参考 按钮 参考 面板包括关于 HTML CSS 和 JavaScript 代码的参考信息 标准标准 工具栏工具栏 查看 工具栏 标准 三 状态栏三 状态栏 提供正在创建的文档的一些其他信息 组成状态栏的各个部分 窗口尺寸栏 下载 时间栏等 标签选择器显示控制选定文本或对象的 HTML 父标签 点击其中的一个标签就可以在 文档 窗口中高亮其内容 点击就可以选择该文档的整个主体部分 窗口大小 弹出式菜单可以将 网页文档 窗口调整到预先定义的大小或自定义的尺 寸 估计的文档大小和该页面的大概下载时间 该大小是包括所有相关文件如图象和其他 14 媒体文件以后的大小 四 插入浮动面板四 插入浮动面板 包含用于创建和插入对象的各种按钮 这些按钮被组织到选项卡中 显示或隐藏 插入 栏 选择 窗口 插入 展开或折叠 插入 栏 单击 插入 栏标题条左角处的展开箭头 插入项目插入项目 选择 窗口 插入 打开 插入面板 选中了某个项目 则会出现相应的 插入项目 简单介绍插入面板里各项的作用 五 文档编辑窗口五 文档编辑窗口 网页设计区 所设计的网页或代码将出现在该区 六 属性面板六 属性面板 属性区属性区 属性面板主要用于查看和编辑当前所选页面元素的各种属性 每种对象有不同的属 性 属性面板会随着选择对象的不同而变化 在文档窗口选择要编辑的对象元素之后 就可以在属性面板设置其属性了 显示或隐藏属性面板方法 选择 窗口 属性 菜单 单击属性面板右下角的箭头按钮可以展开或折叠面板 七 面板组七 面板组 面板组是组合在文档窗口右侧的相关面板的集合 展开或折叠一个面板组 直接单击面板标题 在展开的面板组中选择一个面板 单击该面板的选项卡 关闭一个面板组 从面板组标题条中的 选项 菜单中选择 关闭面板组 打开屏幕上不可见的面板组 从 窗口 菜单中选择一个面板的名称 将一个面板组停靠到其它面板组 打开该面板 右键点该面板名后选择 将资 源组合在 小提示 小提示 在菜单上看到的一些组合字母 如 CTRL N 就是该项操作的快捷键 日后熟练了 可 以使用 加快网页设计的速度 1 4 31 4 3 网页的视图网页的视图 三种试图 代码视图 设计视图 拆分视图 了解 XHTML 语言 1 4 41 4 4 网页文件的基本操作网页文件的基本操作 一 新建网页一 新建网页 二 打开网页二 打开网页 三 保存网页三 保存网页 四 在浏览器中预览网页四 在浏览器中预览网页 单击工具栏上预览按钮 或 F12 键 可以在浏览器中预览编辑的网页 五 设置页面头部内容五 设置页面头部内容 设计视图模式下 选择 查看 文件头内容 文件头内容会显示在设计视图的上部 如下图所示 15 设置网页标题设置网页标题 1 什么是网页标题 网页标题就是在浏览器中浏览网页时 浏览器窗口顶部显示的文本信息 网页标题可以简明地概括网页的内容 点明网页的主题 当网页被加入收藏夹时 网页标题又作为网页的名称 标签 出现在收藏夹中 网页标题也是搜索引擎 robots 搜索的主要依据 DW 在新建网页时 默认的页面标题为 无标题文档 2 设置网页标题的具体操作 法一 设计视图模式下 单击文件头内容窗口中的 标题 按钮 可以在 属性 面板中查看并修改网页标题属性 法二 在 文档 工具栏的 标题 文本框中直接输入网页的标题 六 设置网页基本属性六 设置网页基本属性 在开始制作具体的页面之前 先对整个网站的页面属性进行设置 这样在具体制作 时能够具有同一的风格 保证网页的协调性和整体性 选择 修改 页面属性 菜单命令 或者单击属性面板中的 页面属性 按钮 打开页面属性对话框 补充 什么是 CSS CSS 是 Cascading Style Sheet 的缩写 译作层叠样式表 是用于 增强 控制网页 样式并允许将样式信息与网页内容分离的一种标记性语言 具体应用将在后续章节详细 讲解 1 设置外观 设置外观 CSS 分类 列表下选择 外观 CSS 选项卡 可以设置页面字体 字号 背景图像 背景颜色 文本颜色 左边距 上边距等属性 重复 下拉列表用来设置背景图像的重 复方式 p120 李晓斌 2 设置外观 设置外观 HTML 外观 HTML 的设置与外观 CSS 大致相同 后期讲解区别 外观 HTML 选项中设置的属性会出现在页面主体标签中 不会自动生 成 CSS 样式 3 设置链接 对网页的链接样式进行详细设置 4 标题 标题 CSS 设置标题字体相关属性 5 标题 标题 编码编码 标题 设置在文档窗口和大多数浏览器窗口的标题栏中出现的页面标题 总结 标题的设置方法 页面属性对话框 标题编码分类 文件头内容窗口中的 标题 按钮 可以在 属性 面板中查看并修改网页标题属性 文档 工具栏 标 题 后面文本框直接输入 文档类型 可以在下拉列表选择文档类型 DWcs6 默认新建的文档为 XHTML1 0Transitional 作业 查资料 分析 HTML5 0 和 XHTML1 0 有什么区别 编码 网页的文字编码方式 DWcs6 默认文档编码方式为 Unicode UTF 8 也可 以选择简体中文 GB2312 6 跟踪图像 跟踪图像 16 设计页面的草图 作为背景铺在网页下面 用来引导网页的设计 跟踪图像 可以指定一幅图像作为页面创作时的草稿图 它显示在页面的背景上 一般是前期使用 pS 设计制作的网页布局效果图 便于在网页创作时进行网页元素的定 位与安放 在实际生成的网页中并不显示它 跟踪图像同背景图像唯一的相同之处在于 都是一幅存在于页面背景中的图像 但是跟踪图像不会被 Dreamweaver 平铺 对一个 背景图像来说 如果图像尺寸小于页面的尺寸就会被平铺 可以指定跟踪图像的透明 度 跟踪图像只在 Dreamweaver 中可见 在浏览器中它会被忽略 1 51 5 站点的创建与管理站点的创建与管理 问题 问题 问题 问题 网页与网站的关系 先规划土地还是先建房 先建房还是先买家具 先建网 页还是先建网站 讲述 讲述 讲述 讲述 先建网站 后建网页 1 5 11 5 1 定义站点的必要性和注意事项定义站点的必要性和注意事项 1 1 本地站点与远程站点 本地站点与远程站点 Dreamweaver 中 站点站点站点站点 Site 一词既可以指 Internet 上的一个网站 也可以指在 本地硬盘上的一个网站 更多的时候 本地硬盘的网站硬盘的网站硬盘的网站硬盘的网站实际上是一个文件夹 它作为我 们站点的根目录 里面包含了站点的所有页面 图像 声音 动画等 我们开发站点是 在本地