《信息网络技术与网络出版发行04教学文稿》由会员分享，可在线阅读，更多相关《信息网络技术与网络出版发行04教学文稿（55页珍藏版）》请在金锄头文库上搜索。
1、第五章 网页编辑与设计,授课教师：刘爽,概览,学习资源: w3school 在线教程 了解：网页的制作流程以及常见的网页制作技术。 目的：能够熟练的制作简单网页与进行网页排版。 进阶：能够自主创建和管理动态ASP或ASP.net网站,超文本标记语言、脚本语言与动态网页,HTML 超文本标记语言 设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台
2、电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。,HTML超文本样例, 无标题文档 HTML代码 示范 斜体 加粗 缩进 Hello! 二次缩进 文件见HTML Sampl.html 简单的超文本可以用文本编辑器编写,头部 主体,Javascript样例：,使用下面的脚本可以在鼠标悬停和移出某区域时改变该区域CSS样式风格 该脚本可使TR行的样式在tr3 f_one和tr3 f_two之间变换 Java脚本
3、除了经常用于针对用户的鼠标与键盘操作，即时动态的改变显示内容或风格，也经常用于控制显示与隐藏重要的操作提示信息。 如：在进行用户注册的时候，输入密码结束时，提示 密码是否足够安全或密码中有系统禁止的非法字符，或提示邮件地址不符合规范等。,常见HTML标签,HTML Sample02.html,H1 H2 H3 H4 Size1 汉字 Size2 Arial 汉字 Size3 sans-serif 汉字,HTML Sample02.html,Size4 Tahoma 汉字 Size2 Tahoma 汉字 Size1 Tahoma 汉字 Size5 汉字 Size6 汉字,HTML Sample0
4、2.html, ABCDEF ABCDEF ABCDEF ABCDEF ABCDEF ABCDEF ,HTML Sample02.html,字体与特殊字符,网页中经常使用的中文字体有： 宋体、 微软雅黑、 仿宋、 黑体 微软雅黑、仿宋、黑体在启用操作系统的平滑字体特性时才有较好显示效果。网页中经常使用的英文字体有： Arial、 Tahoma、 sans-serif 特殊字符： 不断行空格： 断行字符：,字体与特殊字符,Dreamweaver CS4安装,安装主程序下载：AdobeDreamweaverCS4lite（精简版） 序列号1192-1014-7077-3383-4280-7435
5、安装CSS规则定义窗口汉化包 如Dreamweaver没有安装在默认路径下，必须注意选择正确的安装位置) 默认路径 C:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources 可能的路径 D:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources或D:Adobe Dreamweaver CS4zh_CNresources,搜狗搜索引擎 百度搜索引擎,建立网站管理,使用Dreamweaver建立网站切忌直接建立网页，必须先建立站点管理，在站点管理器中创建空白页面后，才开始正式的网页设计与编辑工
6、作。站点管理器使Dreamweaver的设计工作更加智能化，使网页排错工作和断链情况得到很大改善。 典型站点结构：,图片 样式表 留言簿程序,典型大型网站文件夹结构,图像 CSS样式 信息/公告/新闻（News） 产品信息 服务/案例(Projects) 下载 留言簿 动态网页程序 论坛 动态网页程序 后台管理程序 动态网页程序,建立网站管理的步骤,在站点菜单中选择“新建站点” 设置站点名，站点URL地址，下一步 选择不使用服务器技术，下一步 设置站点存储位置（整个路径必须全英文），下一步 设置如何连接到远程服务器为无，下一步，完成 在文件面板中右击站点根，新建“images”文件夹 在文件面
7、板中右击站点根，新建“styles”文件夹 在文件面板中右击站点根，新建index.html文件，此时可开始编辑该页，作为站点首页 创建站点文件或文件夹时必须使用英文或数字，忌用中文字符 中文字符在网站服务器中经常会导致不可预计的错误，所以很少用,在Dreamweaver中编写网页,认识基本操作区域 认识属性面板 输入文字 字体列表编辑 段落(回车) 断行(Shift+回车) 不断行空格(Ctrl+Shift+空格) 首行缩进(两个全角中文空格) 缩进 项目列表 编号列表 插入特殊字符 插入水平线 Dreamweaver手工编写网页代码的方法,课后练习：使用Dreamweaver创建网站结构,
8、正确安装Dreamweaver和CSS面板汉化包 创建网站结构 编辑恰当的字体列表 练习基本的文字排版 通过切分视图观察文字排版时出现的各种HTML编码 练习不断行回车、空格、首行缩进、版权商标符号的插入,图片, 图片需要使用相对地址或绝对地址来显示到网页中 图片可设置属性： 来源 src=“images/pic0free.jpg” 宽度与高度 width=500 height=300 边框 border=2 水平间距 vspace=16 垂直间距 hspace=16 提示文字 alt=“图1,链接、相对地址与绝对地址,超文本核心应用技术是链接，链接在网页中以相对地址与绝对地址的形式中使用与表
9、现。通过链接，简单的文本才得以链接到各种网络文件与资源，乃至显示图像和播放动画、视频、声音等媒体形式。 计算机在网络中寻找与打开网络资源时使用URL地址。但网页中并非单纯的使用URL作为网页制作网页时，需要正确理解和使用相对地址与绝对地址。例子： HTML代码例子1 HTML代码例子1 HTML代码例子1 HTML代码例子1,链接的制作,文字链接的插入 链接到外部网站时，使用URL（绝对地址）如: 邮件链接的插入 图像链接（修改边框为“0”可隐藏链接带来的蓝色边框） 图像上的热区链接 网页内的锚点链接,特殊的绝对地址,在使用Dreamweaver的F12快捷键预览时，经常会在地址栏出现这种绝对
10、地址，这种地址浏览正确的网页不一定在发布时能够正常显示，但如果在站点管理器的协调下，能够避免常见的低级错误。,表格, ,表格列合并, ,表格行合并, ,表格属性面板与单元格属性面板,表格排版,网页设计时，我们会发现文字、列表、图片、表格等内容经常是顺序往下排列 。如何让文字或图片能够在网页设计时放到指定的位置呢？ 最早的设计方法是使用透明表格，利用表格的单元格固定网页内可视化元素位置。如文字，图像，列表，水平线等。甚至可见的表格也经常通过透明表格指定位置。,表格排版示例,第二部分 层叠式样式表排版,用统一的方法规范网页设计，增强表现力,CSS样式表,CSS是Cascading Style Sh
11、eet 的缩写。译作层叠样式表单。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS样式表分为内部样式表和外部样式表，内部样式表只对所在网页的内容产生风格上的影响。外部样式表被保存为独立的文件，可以链接到多个网页并对这些网页的风格产生影响。 资料网站 ,常见的样式表定义,创建简单的类，使用类统一相似元素的显示风格。 如统一小标题的风格 重定义Body P TD H1 H2 H3 标签 重定义复合内容a:link a:hover a:visited a:active 技巧： BODY设置长条背景图可以快速美化网页画面 P设置像素单位的缩进，可以方便的控制段落样式
12、P设置行高，可使文字精确对齐 使块状元素水平居中对齐 margin:0 auto;/*水平居中*/,用CSS样式重定义链接（复合内容）效果,重定义a:link 黑色无下划线 重定义a:hover 黑色有下划线 重定义a:visited 灰色有下划线 重定义a:active 橙色无下划线 重定义a:link 褐色无下划线 重定义a:hover 褐色有下划线 重定义a:visited 红色有下划线 重定义a:active 蓝色无下划线,CSS美化技巧（1）,背景图居中纵向平铺（多数长版型网页使用） body background-attachment: fixed; background-colo
13、r: #FFF; background-image: url(/image/logo_home_c.png); background-repeat: repeat-y; background-position: center top; 背景图居中横向平铺（多数为短版型网页使用） body background-attachment: fixed; background-color: #FFF; background-image: url(/image/logo_home_c.png); background-repeat: repeat-x; background-position: left
14、 center;,创建与链接外部样式表,外部样式表是一个独立的样式表代码文件，我们可以通过链接网页到不同的样式表来改变网站的整体显示风格 我们甚至可以利用链接不同的精心设计好的样式表将网站的排版格局进行快速转换，包括将背景图，背景色彩进行整体转换，这样，在不同的节日或者季节，我们就可以快速装扮网页了。 通过灵活定义和选择外部样式表，网页的创作风格可以千变万化，学好网页的排版设计，样式表技术是一个必须完整掌握的内容。,结构与表现的分离,初学HTML的时候，我们经常用font标签定义文字的色彩、字体等控制表现的属性。 CSS，则将表现的工作完全包揽下来，统一进行控制，HTML代码只负责顺序与层次嵌
15、套关系。 简单理解来说，标准的CSS网页，在删除CSS代码后，只能显示文字和元素之间的简单位置，不具备丰富的色彩和修饰能力，也不能精确的定位元素 表现被分离后，网站风格的统一管理与高效的网页排版成为可能。也方便了网页设计人员、网页程序开发人员与图文编辑之间的协作 ,拓展：制作可更换皮肤的网页,资料来源 原理： 设置两个风格不同的网页外部样式，分别为a.css b.css 在测试网页的代码中加入这两个样式的链接，并定义title属性 利用JS程序遍历有title属性的样式 用按钮控制哪个样式产生作用 容易出错的地方： 资料中有小错误，注意参数的一一对应关系 注意JS代码中的大小写严格区分问题,盒
16、子模型1 尺寸,完整清晰的理解盒子模型，是学好CSS样式的首要条件,盒子模型2 层次关系,完整清晰的理解盒子模型，是学好CSS样式的首要条件,CSS“类型”样式,字体 大小 修饰（加粗、 下划线、 删除线、变体等） 行高 色彩,CSS“区块”样式,单词间距 字母间距 垂直对齐 文本对齐,CSS“背景”样式,背景色 背景图 背景图重复 背景图附加 背景图位置,CSS“方框”样式,宽 高 浮动 填充距离 边界距离,CSS“边框”样式,实线边框 虚线边框 边框线粗细 边框线色彩,CSS“列表”样式,列表样式 项目符号图像 位置,CSS“定位”样式,DIV标签 位置 显示 Z轴 溢出,文本内容,作业4：制作CSS修饰的单页,利用CSS样式对BODY H1、H2、P、a:link a:hover a:visited等标签进行重定义 使网页呈现如下图效果：鼠标悬停到链接上，背景变红色有虚线边框，小标题为深绿色 Body设置纵向 平铺的渐变图片背 景 作业格式： 站点文件夹压缩包,第三部分 导航条与DIV+CSS排版,用CSS样
