网站静态页面设计.pptVIP

一、HTML简介（2） HTML页面文档的结构 一个简单的HTML页面 html head titleHTML文件结构/title /head body 在这里显示文件的主体内容。 /body /html * 第三十页，共五十页，2022年，8月28日 一、HTML简介（3） HTML标记的结构形态 标记页面元素内容/标记 如：p这是一个文本段落/p 标记 属性名=“属性值”页面元素内容/标记 如：font color=“red”红色字/font 标记 如：以内容下换行显示br第二行内容 * 第三十一页，共五十页，2022年，8月28日 二、创建HTML文档（1） 准备工作 新建一个用于保存网页及相关资料的文件夹 收集网页素材，复制保存在新建文件夹中 画出网页草图，安排页面元素 用工具软件创建HTML文档 利用Dreamweaver MX创建HTML文档 新建文档 查看代码 保存文档：文件扩展名 *.htm 或 *.html 用文本编辑软件创建HTML文档 用记事本进行HTML文档的编辑 注意：保存文件时，保存类型应选择“所有文件”，并输入文件全名 查看保存的HTML文档效果 打开IE浏览器，执行“文件—打开”菜单命令 * 第三十二页，共五十页，2022年，8月28日 二、创建HTML文档（2） 在浏览页面时修改HTML源文件 执行“查看—源文件”菜单，调用记事本打开源代码，欲重新查看修改后的效果只需单击IE工具栏“刷新”按钮。 三、文件标记（1） html/html标记：不是HTML文档必须，但最好保持文档的完整性 head/head标记：此标记中内容是提供给浏览器的，即文件头信息。 * 第三十三页，共五十页，2022年，8月28日 三、文件标记（2） body标记 可包括属性，由此决定页面内容的总体显示风格、背景等。 Text属性：用于设定文字颜色 Bgcolor属性：设定页面背景颜色 link，alink，vlink属性，分别用于设定页面中超级链接“访问前、正在按下时、访问后的颜色”，不设定时取默认值（蓝、红、紫）。 Background属性：用于设定背景图片 Scroll属性：设定浏览器滚动条是否显示，取值”yes”或 “no”，一般用于弹出式窗口 * 第三十四页，共五十页，2022年，8月28日 三、文件标记（2） title/title标记： 置于head区段，用于设定浏览器的标题 meta标记： 用于描述HTML文档相关信息。如编辑器类型，字符集等，通常用来为搜索引擎定义页面关键字 常见属性： Name和content属性：指定“网页描述”类型及相应值http-equiv和content属性：指定HTTP响应头标及相应值 举例： * 第三十五页，共五十页，2022年，8月28日 * 第六章 网站静态页面设计 * 网站静态页面设计 * 第一页，共五十页，2022年，8月28日 本章要点： 主页设计 栏目与版面设计 页面可视化设计 静态网页制作技术 * 第二页，共五十页，2022年，8月28日 确定主页的功能模块 设计主页的版面 处理技术上的细节 6.1 主页设计 * 第三页，共五十页，2022年，8月28日 1、确定主页的功能模块 网站名称、广告条、主菜单 新闻、搜索、友情链接 联系及版权信息 等 * 第四页，共五十页，2022年，8月28日 * 第五页，共五十页，2022年，8月28日 2、主页版面设计 勾画草图—软件实现 3、处理技术上的细节 风格、链接、图形、动画、文字、速度 * 第六页，共五十页，2022年，8月28日 栏目设计 版面设计 6.2 栏目与版面设计 * 第七页，共五十页，2022年，8月28日 紧扣网站的主题 设立一个最近更新或网站指南栏目 设定一个可以双向交流的栏目 设一个下载或常见问题回答栏目 栏目与版面设计 网站栏目安排要注意以下几方面： 栏目设计 * 第八页，共五十页，2022年，8月28日 版面设计 栏目与版面设计 版面设计的原则 版面布局的步骤 版面布局的形式 版面也称为版块：指的是浏览器看到的完整的一个页面（可以包含框架和层） * 第九页，共五十页，2022年，8月28日 主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得益彰 版面设计的原则 设计版面布局要做到： 正常平衡 异常平衡 对比 凝视 空白 尽量用图片解说 版面设计 布局原则： * 第十页，共五十页，2022年，8月28日 正常平衡 异常平衡 对比 凝视 空白 图片说明 * 第十一页，共五十页，2022年，8月28日 轮廓设计 布局设计 细节设计 版面布局的