第1章网页设计基础.ppt

主讲 周改云 Dreamweaver8 0 网页设计与制作 内容要点 1 Dreamweaver的课程定位 重点 2 网页设计理念3 网页的结构 组成和网页的类型 重点 Internet基础知识和网页开发工具 难点 网站的开发流程 重点 典型网站分析 第1章网页设计基础 1 Dreamweaver的课程定位 什么是网页 1 网页就是以html语言为基础编写的 能够通过网络传输 并被浏览器翻译成可以显示出来的包含文字 图片 声音 动画等媒体形式的页面文件 网页由主页和其它链接页组成 2 主页 也叫首页 打开一个网站时 在屏幕上显示的第一个综合界面 它相当于网站的目录或封面 集成了指向下一级网页或进入其它网站的链接 用户进入主页就可以浏览到网站的重要信息 通过单击链接就可以进入到其它网页 主页的名称一般为index html或default html index asp或default asp 什么是网站 网站 一组具有共同属性 相关主题 类似的设计或共同目的 的链接文档和资源 平时所说的yahoo sohu等都是网站 主要是通过超级链接的形式将若干网页组织在一起 形成一个逻辑上的整体 网页包含在网站中 一个网站中的网页数 1 根据网页能否在服务器端运行 把网页分为静态和动态两种 补充 服务器是专指某些高性能计算机 安装不同的服务软件 能够通过网络 对外提供服务 如数据 文件的共享等 作为网络的节点 存储 处理网络上80 的数据 信息 客户机 用于访问服务器资料的计算机 静态网页 纯粹用html语言编写的网页 不能在服务器端运行 其特点有 参看p290 1 每个网页都有一个固定的url 且以htm html shtml xml等常见形式为后缀 2 发布在服务器上的静态网页是保存在服务器上的文件 每个网页都是一个独立的文件 内容相对稳定 容易被搜索引擎检索 3 没有数据库支持 制作和维护需要的工作量较大 4 交互性相对较差 动态网页 即采用动态网站技术动态生成的网页 能在服务器端运行 其特点有 1 以数据库为基础2 可以实现的功能较多 如用户注册 登陆 在线调查 用户管理 订单管理 站内搜索 歌曲下载 软件下载 即时更新新闻 可以留言或书写评论等 3 不是独立存于服务器上的网页文件 只有当用户请求服务器时才返回一个完整的网页 Dreamweaver可以做什么 做静态网页 Dreamweaver作为专业的网页制作工具 主要完成两大工作 一是制作网页 二是管理网站 利用网站管理功能使网页开发人员能够非常轻松的管理网站 并能保证在多人对网站进行维护时不会产生冲突 通过 登记 注销 系统可对站点内的文件的状态进行管理 避免了多人同时修改同一文件的可能性 保证了合作开发的安全 正常进行 若要完成一个带有数据库的动态网站的制作 需要具备以下知识ASP NetAccessDreamweaver 2 网页设计理念 2 1网页中的平衡 对比和连贯 平衡如果你的页面是平衡的 当用户浏览这个页面的时候就会感觉它们是一个整体 浏览时候目光的跳转也会很自然 对称平衡 非对称平衡 辐射平衡 实战平衡通过一个LOGO设计实例观察平衡的多种变化这是初稿判断其是否平衡的方法用色块代替LOGO中的元素 对比如果说平衡搭起了一个稳定的页面框架 那么对比就是这个框架中的动态点缀 动态的因素包括 大小 颜色 字体 重心 形状 纹理等等底版字体 大小 颜色都一样 单调枯燥 通过变化字体的大小来形成对比将字体大小对比和颜色对比结合起来使用 连贯对比会给页面带来活力 然而如果对比太多 页面就会显得零乱 因此在一个成功的页面设计中 有很多要素是必须保持一致的 这就是 连贯 这些要素通常包括 布局页面的上下 左右 页面与页面中间要保持布局一致字体字体的大小 颜色应当基本保持一致导航栏导航栏应当保持完全一样 通常应单独为导航栏建立一个框架页 这样就可以保证更新导航栏的时候 所有网页都会被自动更新 显然 连贯和上面说的对比是彼此矛盾 因此在进行网页设计时必须把握好度这是一个名片设计字体风格相似 颜色不繁杂 2 2网页中的色彩搭配 教材p352 总体要求过渡自然 色彩的三要素色相 色彩的相貌 是区分色彩种类的名称 知识纯粹的表示色彩相貌的差异 这种差异由光波的波长决定 明度 色彩的强度 只色彩的明暗度 纯度 色彩的饱和度 即颜色的深浅程度或浓淡程度 色彩心理与网页表现 p 不同的颜色有着不同的含义 给人各种丰富的感觉和联想 记住常用纯色的十六进制代码 ff0000为红色 00000为黑色 ffffff为白色 0000ff为蓝色 00ff00为绿色 红色 热情 奔放 喜悦 庄严 浪漫 火焰 暴力 侵略 具有刺激效果 容易使人产生冲动 是一种雄壮的精神体现 有愤怒 热情 活力的感觉红色在很多文化中代表的是停止的讯号 用于警告或禁止一些动作 黄色 亮度最高 有温暖感 具有快乐 高贵 富有 灿烂 活泼 明亮 光辉 疾病 懦弱 希望 智慧和轻快的个性 让人感觉灿烂辉煌 黑色 给人深沉 神秘 寂静 悲哀 精致 现代感 死亡 病态 邪恶 压抑的感觉 白色 纯洁 天真 洁净 简单 真理 和平 冷淡 贫乏 白色在中华文化中也代表着死亡的颜色 灰色 庄重 沉稳紫色 浪漫 富贵 创造 谜 忠诚 神秘 稀有 紫色在某些文化中与死亡有关 绿色 介于冷暖色中间 显得和睦 宁静 给人健康 安全的感觉 与金黄 淡白搭配 产生优雅 舒适的气氛 植物 生命 生机 自然 稳定 成长 忌妒 在北美文化中 绿色代表的是 行 与环保意识有关 也经常被连结到有关财政方面的事物 蓝色 天空 清爽 科技 忠诚 安全 保守 宁静 冷漠 悲伤 棕色 大地 厚朴 忠诚 安全 保守橙色 也是一种激奋的色彩 有轻快 欢欣 热烈 温馨 时尚的效果 设计用色举例大型NBA网站此网站用灰黑色RGB 48 48 48 为背景色 文章标题用色为RGB 203 201 153 菜单使用的RGB为 112 119 112 这样的配色可以显示独特的个性 又不失大型网站的风采 官方网站 如中国人民政府也以蓝色为主色调 娱乐类综合网站此网站背景色为黑色RGB 0 0 0 中嵌套RGB 0 0 82 字体白色RGB 255 255 255 菜单RGB 77 114 159 这样的虽以黑蓝为主色调 但是配以漂亮的图片 给人的感觉是生机盎然 充满了互动色彩和青春气息 微软公司网站微软不仅软件做的好 连网页制作也是世界一流 从网页可以看出微软公司的风格 作风 以及雄厚的实力 背景颜色使用蓝色RGB为 0 151 254 菜单为黑色RGB 0 0 11 菜单为灰色RGB 200 200 200 字体为黑色RGB 0 0 0 个人网站此网站相对简单 但是用色也别具匠心 虽然简单 但颜色搭配非常的科学合理整体上使用的是白色RGB 255 255 255 辅助色RGB 79 88 95 菜单色RGB 48 64 64 和RGB 0 81 111 字体使用的是RGB 83 86 91 公司网站1网站采用黄色调为主 很体现公司的个性 中间再配以抽象的图片 显得个性十足但又不单调主色调为黄色RGB 255 199 48 FFC730 辅助色调为RGB 49 102 46 字体为棕色RGB 153 103 0 公司网站2橘红色如果运用得当的话是一种非常使用于网页上的颜色 此种配色显得主人较为前卫 色彩热烈 给人的震慑力较强 主色调为RGB 255 151 0 辅助色调为RGB 255 103 4 菜单RGB 252 200 0 字体使用黑色RGB 0 0 0 在网页中运用色彩一般应遵循下列几个原则 1 一个页面中切忌采用过多的颜色 否则会给人一种繁杂的感觉 也烘托不了网页的主题 因此一种风格的网页选用颜色一般不要超过三四种 2 背景的颜色不要太深 显得过于厚重 因为这样会影响整个页面的显示效果 但也有例外 黑色的背景衬托出亮丽的文本和图像 会给人一种另类的感觉 3 要保持整个网页的色调统一 4 要围绕网页的主题选择颜色 色彩要能烘托出主题 综述 网页设计的颜色搭配需要在实践中不断的摸索和不断的创新 认真学习别人的先进方法和经验 可以快速地提高自己的制作水平 网页的结构 组成和网页的类型 网页的结构 页眉 导航 内容 页脚 网页的组成元素 文字 图片 动画 gif flash 表单 交互功能 音频 视频 超链接 表格 框架 导航等 文字 是网页中的主要信息 超链接 是网站的灵魂 从一个网页指向另一个目的端的链接 表格 是网页排版的灵魂 图像 是网页的最基本元素 可以使网页变得丰富多彩 图像种类很多 有Logo 标志 Banner 广告 导航图 一般图像等 Logo是代表企业形象或栏目内容的标志性图片 一般在网页的左上角 Banner是用于宣传站内某个栏目活动的横幅广告 一般要求制作成动画形式 表单是用来收集站点访问者信息的域集 框架是网页的一种组织形式 将相互关联的多个网页的内容组织在一个浏览器窗口中显示 网页的布局类型 参看备用网页 教材p353 1 布局相关概念版面指的是浏览器看到的完整的一个页面 因为每个人的显示器分辨率不同 所以同一个页面的分辨率可能出现800 600像素 1024 768像素等 布局 就是以最适合浏览的方式将图片和文字摆放在页面的不同位置 网页版面布局是指定网页内容在浏览器中的显示方式 例如徽标的位置 导航栏的显示 主要内容的排版等 图1 形结构 2 常见的布局样式有 1 形结构 顶部通常为标志 横幅广告和站内导航菜单 顶部下面分为左 中 右3栏结构 通常中间部分是页面的主题内容 如图1所示 2 口 同 国 字形结构 总体分为上 中 下3部分 中间部分又分为3栏 中间是网页的主内容区 如图2所示 图2口字形结构 3 T 厂 形结构 顶部通常为标志 横幅广告和站内导航菜单 顶部下面分为左 右2栏结构 通常左右不对称 栏宽的是页面的主题内容 如图3所示 图3T形结构 4 上下形结构 页面划分为上下2部分 可以对称 也可以不对称 如图4所示 图4上下形结构 5 左右形结构 页面划分为左右2部分 可以对称 也可以不对称 如图5所示 还有很多结构 详看网页 图5左右形结构 Internet基础知识和网页开发工具 教材p1 是专门传输 页面的一种网络协议 其特点 支持客户 服务器模式 简单快速 灵活 无连接 无状态 Cookie 电脑中记录用户在网络中的行为的文件 当浏览某些web站点时 这些站点会在用户的硬盘上用很小的文本文件存储一些信息 这些文件成为Cookie 中包含的信息与浏览者的爱好有关 统一资源定位系统 即上网时在浏览器地址栏中输入的网址 如ttp 第三部分是主机资源的具体地址 即路径 如目录和文件名等 第一部分和第二部分之间用 符号隔开 第二部分和第三部分用 符号隔开 第一部分和第二部分是不可缺少的 第三部分有时可以省略 其完整的组成格式为 protocol hostname port path parameters query fragment格式说明 1 protocol 协议 指定使用的传输协议 下表列出protocol属性的有效方案名称 最常用的是HTTP协议 它也是目前WWW中应用最广的协议 file资源是本地计算机上的文件 格式file ftp通过FTP访问资源 格式FTP gopher通过Gopher协议访问该资源 http通过HTTP访问该资源 格式HTTP https通过安全的HTTPS访问该资源 格式target blank HTTPS mailto资源为电子邮件地址 通过SMTP访问 格式mailto MMS通过支持MMS 流媒体 协议的播放该资源 代表软件 WindowsMediaPlayer 格式MMS ed2k通过支持ed2k 专用下载链接 协议的P2P软件访问该资源 代表软件 电驴 格式ed2k Flashget通过支持Flashget 专用下载链接 协议的P2P软件访问该资源 代表软件 快车 格式Flashget thunder通过支持thunder 专用下载链接 协议的P2P软件访问该资源 代表软件 迅雷 格式thunder news通过NNTP访问该资源 2 hostname 主机名 是指存放资源的服务器的域名系统 DNS 主机名或IP地址 有时 在主机名前也可以包含连接到服务器所需的用户名和密码 格式 username password 3 port 端口号 整数 可选 省略时使用方案的默认端口 各种传输协议都有默认的端口号 如http的默认端口为80 如果输入时省略 则使用默认端口号 有时候出于安全或其他考虑 可以在服务器上对端口进行重定义 即采用非标准端口号 此时 URL中就不能省略端口号这一项 4 path 路径 由零或多个 符号隔开的字符串 一般用来表示主机上的一个目录或文件地址 5 parameters 参数 这是用于指定特殊参数的可选项 6 query 查询 可选 用于给动态网页 如使用PHP JSP ASP ASP NET CGI ISAPI等技术制作的网页 传递参数 可有多个参数 用 符号隔开 每个参数的名和值用 符号隔开 7 fragment 信息片断 字符串 用于指定网络资源中的片断 例如一个网页中有多个名词解释 可使用fragment直接定位到某一名词解释 注意 Windows主机不区分URL大小写 但是 Unix Linux主机区分大小写 网页开发工具 制作和管理网页工具 dreamweaver word 记事本 frontpage javascript 网络编程工具 ultraedit 32 代码编程工具 主要编辑ASP等动态网页 制作和优化网页图像工具 ACDSee 获取 管理 浏览 优化 fireworks photoshop Imageready 图形分割 制作网页动画工具 flash SwishZone 文字动画特效制作 硕思闪客精灵 支持SWF导出为FLA文件 GIF动画制作软件等其中dreamweaver fireworks flash这三个软件合称为网页 三剑客 其他小工具软件 网页小秘书 网页魔法菜单 网页减肥茶 批量改网页的内容替换工具 网页特效大师等 网站的开发流程 教材p350 351 1 规划网站 确定网站的功能 归纳网站要涵盖的内容 进行总体的规划 确定网站的风格 主题 色调 网站的层次结构与链接结构 以及网页的大体布局 2 搜集素材 搜集网站中所需要的信息以及资料 并进可能多地为网页的制作搜集各种素材 3 建立站点 制作各级页面 一般先制作主页 创建超级链接 4 测试站点 申请域名空间 发布站点 补充 1 目前网站的题材主要有 新闻 体育 聊天 即时信息 ICQ 社区 邮件列表 计算机技术 网站开发 娱乐 旅行 参考 资讯 求职 家庭 教育 生活 时尚 电子商务以及一些体现个人特色和爱好的网站 2 选题注意事项 主题要小而精 题材不要太滥或者目标太高 体现自己的个性 3 一个好的站点规划 能使整个网站条理清晰 分类合理 从而给网站日后的维护和扩展带来便利 教学进程 网站的风格 色彩 版面布局 浏览方式 网站标志的设计 交互性 文字 价值 教学进程 确定网站风格注意事项 网站标志 网站标志要放在醒目位置 如左上角 而且要保持不变 网站标语 最好能够有一句反映网站精髓的标语 并能动态显示 导航部分 导航部分应该放在每一张网页的相同位置 便于访问者浏览网站的全部内容 教学进程 主体颜色 确定主体颜色 并注意颜色搭配要让人感觉舒服 不要太刺眼 也不能不突出需要强调的内容 页面布局 页面的布局是风格的一个重要标志 不要忘记考虑主页的可扩充性 以方便将来再添加栏目 内容结构 内容结构越简单越好 分类要简而精 一切都为访问者能够最快地找到访问的资料而考虑 设计草图