网页设计与制作

章节摘录

版权页：   插图：    4.页眉和页脚 页眉指的是页面上端的部分。有的页面划分得比较明显，有的页面则没有明确的区分页眉或者干脆没有页眉。 页眉的风格一般要求与页面的整体风格保持一致。一个富有个性特色的页眉将和网站标志一样起到标识的作用。由于页眉所处的位置可以吸引浏览者较多的注意力，因此其作用主要是定义页面的主题，如站点的名称多数都显示在页眉里，这样浏览者能很快知道这个站点是什么内容。页眉是整个页面设计的关键，它将涉及其后更多的设计和整个页面的协调性。在页眉中常放置含有站点名称的图片、标志、网站宗旨和广告语等，如图1—22所示。 页脚和页眉相呼应。页眉一般是放置站点主题的地方，而页脚则一般用来放置联系信息、版权信息等。 5.导航栏 导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说，网站中的导航栏在各个页面中出现的位置比较固定，而且风格也较为一致。导航栏的位置可以对网站的结构与页面的整体布局起到举足轻重的作用。 导航栏一般有4种常见的显示位置：页面左侧、右侧、顶部和底部。有的网站在同一个页面中运用了多种导航方式，如有的在顶部设置了主菜单，而在页面的左侧又设置了折叠式的菜单，同时又在页面的底部设置了多个超链接，这样便增强了网站的可访问性。当然，导航栏在页面中出现的次数并非越多越好，而是要合理地加以运用，使页面达到总体的协调一致。图卜22所示为一个典型的网站页眉与导航栏。 6.文本和图片 文本是网页传递信息的主要载体，文本不仅传递速度快，而且还可以设置其大小、颜色、段落及层次等属性，风格独特的网页文本会给浏览者带来赏心悦目的感受。 相对于文本来说，图像显得更加生动直观，可以给人较强的视觉冲击，因此使用图像可以使网页更具吸引力。图像在页面中充当各种角色，网站标志、网页背景和链接等都能使用图像，而且图像还可以传递一些文字难以表达的信息。 7.多媒体 在网页中可以使用的多媒体对象主要包括Flash动画、Flash按钮、FIash文本、Java小程序、音频和视频等。应用多媒体对象可以增强浏览者的视觉和听觉感受，使网页的内容显得更加丰富，表达信息的手段也变得更为动态和立体化。图1—23所示为综合的多媒体网页（国际知名品牌的化装品、服装、鞋等网站），图1—24为视频新闻页面中的视频部分（网络上还有流媒体的电影、连续剧、视频教程等）。

书籍目录

单元1 Web站点的配置与发布 引例描述 任务1配置Web站点 任务陈述 知识准备 1.1网络基本概念 1.1.1 Internet 1.1.2 WWW服务 1.1.3域名 1.1.4 IP地址 1.1.5统一资源定位符 任务实施 1.实施思路与方案 2.安装IIS 3.测试IIS 4.配置Web站点 任务拓展 1.虚拟目录的概念 2.通过虚拟目录搭建站点 项目实训企业网站的配置 任务2发布Web站点 任务陈述 知识准备 1.2网页与网站 1.2.1网页与网站的相关概念 1.2.2网页与网站的基本要素 任务实施 1.实施思路与方案 2.使用“记事本”编写一个简单的HTML页 3.用IIS测试、发布Web站点 任务拓展 1.编写HTML文件的注意事项 2.认识Dreamweaver CS5界面 3.使用虚拟实训平台进行测试 4.域名与空间 项目实训 免费域名的注册与空间申请 单元小结 单元2 HTML静态网页设计 引例描述 任务1文字段落与图片的设置 任务陈述 知识准备 2.1 HTML的基本概念 2.1.1 HTML简介 2.1.2 HTML的结构 2.1.3 HTML的标签 2.2、与标签 2.2.1标签 2.2.2标签 2.2.3标签 2.3文字与段落 2.3.1标题标签 2.3.2换行标签 2.3.3字体标签 2.3.4段落标签 2.3.5水平线标签 2.4标签 任务实施 1.实施思路与方案 2.HTML的基本结构文档编写 3.个人信息介绍页面的图文混排 4.其他页面HTML代码编写 任务拓展 1.特殊字符 2.使用Dreamweaver创建与保存网页 3.页面属性设置 4.网页的基本排版 项目实训数字油画艺术作品展示页面编写 任务2页面布局 任务陈述 知识准备 2.5列表 2.5.1 无序列表标签 2.5.2有序列表标签 2.5.3嵌套列表 2.5.4定义列表标签、、 2.6表格 2.6.1定义表格的基本语法 2.6.2表格标签的属性 2.6.3表格的标题标签和表头标签 2.6.4表格的边框显示状态 2.6.5设置分隔线的显示状态 2.6.6表格行的设置 2.6.7单元格的设置 任务实施 1.实施思路与方案 2.HTML基本文档与表格的编写 3.网站Logo、Banner与版权信息代码的编写 4.列表导航代码的编写 任务拓展 1.表格的嵌套 2.Dreamweaver中表格的控制 项目实训运用表格嵌套完成个人介绍页面 任务3超链接的使用 任务陈述 知识准备 2.7超链接 2.7.1超链接的概念 2.7.2超链接标签 2.7.3链接路径 2.7.4书签链接 2.7.5图像的热区链接 任务实施 1.实施思路与方案 2.使用表格布局与设置超链接制作书法作品页面 3.制作其他作品页面 任务拓展 1.外部链接的使用 2.下载文件的制作 项目实训企业网站主页设计 单元小结 单元3 HTML高级应用 引例描述 任务1表单页面设计 任务陈述 知识准备 3.1表单的基本概念 3.1.1表单简介 3.1.2表单的定义 3.2表单元素 3.2.1添加表单控件 3.2.2输入类表单控件 3.2.3菜单列表类表单控件 3.2.4文本域标签 任务实施 1.实施思路与方案 2.订单信息表单设计 3.作品评价表单设计 任务拓展 1.表单边框的应用 2.使用Dreamweaver进行表单设计 项目实训注册与留言表单设计 任务2窗口框架的使用 任务陈述 知识准备 3.3框架 3.3.1框架的含义与基本构成 3.3.2框架集标签 3.3.3子窗口标签的设定 3.3.4窗口的名称与链接 任务实施 1.实施思路与方案 2.定义主框架defauIt.html页面 3.定义顶部嵌套top.html页面 4.定义左侧嵌套left.html页面 5.定义右侧展示页面 任务拓展 1.浮动窗口标签的应用 2.使用Dreamweaver创建与编辑框架 项目实训专题学习网站框架设计 任务3多媒体页面设计 任务陈述 知识准备 3.4 多媒体对象的基本知识 3.4.1音频媒体的格式 3.4.2视频媒体的格式 3.5插入多媒体对象 3.5.1滚动字幕标签 3.5.2插入多媒体文件标签 3.5.3嵌入背景音乐 任务实施 1.实施思路与方案 2.插入背景音乐 3.插入Flash动画 任务拓展 1.认识Flash Swish软件 2.快速制作Flash文本动画 3.使用Dreamweaver插入Flash元素 项目实训软件界面设计 单元小结 单元4 CSS的应用 引例描述 任务l CSS的引用 任务陈述 知识准备 4.1 CSS简介 4.1.1 CSS的概念与功能 4.1.2 CSS的特点 4.2 CSS的使用 4。2.1样式表的规则 4.2.2选择符的分类 4.2.3添加CSS的方法 4.2.4 CSS的继承 4.2.5 CSS样式的冲突 4.2.6 CSS的注意事项 任务实施 1.实施思路与方案 2.创建并定义CSs样式表 3.链接样式表 任务拓展 1.类标签与id标签的应用 2.使用伪类定义超链接样式 项目实训使用样式表美化网页页面 任务2页面样式设置 任务陈述 知识准备 4.3字体、颜色、背景与文字属性 4.3.1设置CSS的字体属性 4.3.2颜色及背景属性 4.3.3文本属性 4.4边距、填充与边框属性 4.4.1边距与填充属性 4.4.2边框属性 4.5列表属性 任务实施 1.实施思路与方案 2.定义CSS样式表 3.编写并调用CSS文件代码 任务拓展 1.滤镜属性的使用 2.光标属性的使用 项目实训百度搜索页面样式设计 任务3区块与层的页面布局 任务陈述 知识准备 4.6 CSS布局基础 4.6.I CSS布局元素类型 4.6.2盒模型 4.6.3定位及尺寸属性 4.7常用布局结构 4.7.1单行、单列结构 4.7.2二列式布局结构 4.7.3三列式布局结构 …… 单元5 JavaScript编程 参考文献

编辑推荐

《高等职业教育专业教学资源库建设项目规划教材•高等职业教育软件技术专业教学资源库:网页设计与制作(HTML+CSS+JavaScript)》结构合理，内容丰富，实用性强，可以作为计算机类专业、商务类专业、艺术设计类专业的教学用书，也可以作为相关专业从业的自学用书。

 网页设计与制作下载