信息网络技术与网络出版发行04.ppt
《信息网络技术与网络出版发行04.ppt》由会员分享,可在线阅读,更多相关《信息网络技术与网络出版发行04.ppt(55页珍藏版)》请在三一办公上搜索。
1、第五章 网页编辑与设计,授课教师:刘爽,概览,学习资源:w3school 在线教程 http:/了解:网页的制作流程以及常见的网页制作技术。目的:能够熟练的制作简单网页与进行网页排版。进阶:能够自主创建和管理动态ASP或ASP.net网站,超文本标记语言、脚本语言与动态网页,HTML 超文本标记语言设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另
2、一台电脑中。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。,HTML超文本样例,无标题文档HTML代码示范 斜体加粗 缩进 Hello!二次缩进 文件见HTML Sampl.html 简单的超文本可以用文本编辑器编写,头部主体,脚本语言,常见的网页脚本语言有JavaScript和VBScript两种,当初开发出来的主要目的是为了解决服务器终端语言,比如Perl,遗留的速度问题。当时服务端需要对数据进行验证,由于网络
3、速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。JavaScript的适应范围比VBScript更广泛,多数脚本采用Javascript,脚本语言能够使终端页面交互更为友好,增强用户的交互体验,便利用户的数据操作。脚本语言使静态的网页在与用户的鼠标或键盘输入的数据进行交互时,出现各种自动化的提示信息或页面动态。,Javascript样例:,使用下面的脚本可以在鼠标悬停和移出某区域时改变该区域CSS样式风格该脚本可使TR行的样式在tr3 f_one和tr3 f_two之间变换Java脚
4、本除了经常用于针对用户的鼠标与键盘操作,即时动态的改变显示内容或风格,也经常用于控制显示与隐藏重要的操作提示信息。如:在进行用户注册的时候,输入密码结束时,提示 密码是否足够安全或密码中有系统禁止的非法字符,或提示邮件地址不符合规范等。,常见HTML标签,HTML Sample02.html,H1H2H3H4Size1 汉字Size2 Arial 汉字Size3 sans-serif 汉字,HTML Sample02.html,Size4 Tahoma 汉字Size2 Tahoma 汉字Size1 Tahoma 汉字Size5 汉字Size6 汉字,HTML Sample02.html,ABC
5、DEF ABCDEF ABCDEF ABCDEF ABCDEF ABCDEF,HTML Sample02.html,字体与特殊字符,网页中经常使用的中文字体有:宋体、微软雅黑、仿宋、黑体微软雅黑、仿宋、黑体在启用操作系统的平滑字体特性时才有较好显示效果。网页中经常使用的英文字体有:Arial、Tahoma、sans-serif特殊字符:不断行空格:断行字符:,字体与特殊字符,Dreamweaver CS4安装,安装主程序下载:AdobeDreamweaverCS4lite(精简版)序列号1192-1014-7077-3383-4280-7435安装CSS规则定义窗口汉化包如Dreamweave
6、r没有安装在默认路径下,必须注意选择正确的安装位置)默认路径 C:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources可能的路径 D:Program FilesAdobeAdobe Dreamweaver CS4zh_CNresources或D:Adobe Dreamweaver CS4zh_CNresources,搜狗搜索引擎百度搜索引擎,建立网站管理,使用Dreamweaver建立网站切忌直接建立网页,必须先建立站点管理,在站点管理器中创建空白页面后,才开始正式的网页设计与编辑工作。站点管理器使Dreamweaver的设计工作更加智能化
7、,使网页排错工作和断链情况得到很大改善。典型站点结构:,图片样式表留言簿程序,典型大型网站文件夹结构,图像CSS样式信息/公告/新闻(News)产品信息服务/案例(Projects)下载留言簿 动态网页程序论坛 动态网页程序后台管理程序 动态网页程序,建立网站管理的步骤,在站点菜单中选择“新建站点”设置站点名,站点URL地址,下一步选择不使用服务器技术,下一步设置站点存储位置(整个路径必须全英文),下一步设置如何连接到远程服务器为无,下一步,完成在文件面板中右击站点根,新建“images”文件夹在文件面板中右击站点根,新建“styles”文件夹在文件面板中右击站点根,新建index.html文
8、件,此时可开始编辑该页,作为站点首页创建站点文件或文件夹时必须使用英文或数字,忌用中文字符中文字符在网站服务器中经常会导致不可预计的错误,所以很少用,在Dreamweaver中编写网页,认识基本操作区域认识属性面板输入文字 字体列表编辑段落(回车)断行(Shift+回车)不断行空格(Ctrl+Shift+空格)首行缩进(两个全角中文空格)缩进项目列表编号列表插入特殊字符插入水平线 Dreamweaver手工编写网页代码的方法,课后练习:使用Dreamweaver创建网站结构,正确安装Dreamweaver和CSS面板汉化包创建网站结构编辑恰当的字体列表练习基本的文字排版通过切分视图观察文字排版
9、时出现的各种HTML编码练习不断行回车、空格、首行缩进、版权商标符号的插入,图片,图片需要使用相对地址或绝对地址来显示到网页中图片可设置属性:来源 src=“images/pic0free.jpg”宽度与高度 width=500 height=300边框 border=2水平间距 vspace=16垂直间距 hspace=16提示文字 alt=“图1,链接、相对地址与绝对地址,超文本核心应用技术是链接,链接在网页中以相对地址与绝对地址的形式中使用与表现。通过链接,简单的文本才得以链接到各种网络文件与资源,乃至显示图像和播放动画、视频、声音等媒体形式。计算机在网络中寻找与打开网络资源时使用URL
10、地址。但网页中并非单纯的使用URL作为网页制作网页时,需要正确理解和使用相对地址与绝对地址。例子:HTML代码例子1HTML代码例子1HTML代码例子1HTML代码例子1,链接的制作,文字链接的插入链接到外部网站时,使用URL(绝对地址)如:http:/邮件链接的插入图像链接(修改边框为“0”可隐藏链接带来的蓝色边框)图像上的热区链接网页内的锚点链接,特殊的绝对地址,在使用Dreamweaver的F12快捷键预览时,经常会在地址栏出现这种绝对地址,这种地址浏览正确的网页不一定在发布时能够正常显示,但如果在站点管理器的协调下,能够避免常见的低级错误。,表格,表格列合并,表格行合并,表格属性面板与
11、单元格属性面板,表格排版,网页设计时,我们会发现文字、列表、图片、表格等内容经常是顺序往下排列。如何让文字或图片能够在网页设计时放到指定的位置呢?最早的设计方法是使用透明表格,利用表格的单元格固定网页内可视化元素位置。如文字,图像,列表,水平线等。甚至可见的表格也经常通过透明表格指定位置。,表格排版示例,第二部分 层叠式样式表排版,用统一的方法规范网页设计,增强表现力,CSS样式表,CSS是Cascading Style Sheet 的缩写。译作层叠样式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS样式表分为内部样式表和外部样式表,内部样式表只对所在网页
12、的内容产生风格上的影响。外部样式表被保存为独立的文件,可以链接到多个网页并对这些网页的风格产生影响。资料网站 http:/,常见的样式表定义,创建简单的类,使用类统一相似元素的显示风格。如统一小标题的风格重定义Body P TD H1 H2 H3 标签重定义复合内容a:link a:hover a:visited a:active技巧:BODY设置长条背景图可以快速美化网页画面P设置像素单位的缩进,可以方便的控制段落样式P设置行高,可使文字精确对齐使块状元素水平居中对齐 margin:0 auto;/*水平居中*/,用CSS样式重定义链接(复合内容)效果,重定义a:link 黑色无下划线重定义
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 信息网络 技术 网络 出版发行 04
链接地址:https://www.31ppt.com/p-5486796.html