搜索
第五章网页编辑与设计授课教师：刘爽概览•学习资源:•w3school在线教程•了解：网页的制作流程以及常见的网页制作技术。•目的：能够熟练的制作简单网页与进行网页排版。•进阶：能够自主创建和管理动态ASP或ASP.net网站超文本标记语言、脚本语言与动态网页•HTML超文本标记语言•设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML超文本样例1.htmlxmlns=;charset=utf-8/4.title无标题文档/title5./head6.body7.pHTML代码br/8.示范/p9.palign=centerem斜体/em/p10.pstrong加粗/strong/p11.blockquote12.pfontface=Arial,Helvetica,sans-serif缩进Hello!/font/p13.blockquote14.p二次缩进/p15./blockquote16./blockquote17./body18./html文件见HTMLSampl.html简单的超文本可以用文本编辑器编写头部主体脚本语言•常见的网页脚本语言有JavaScript和VBScript两种，当初开发出来的主要目的是为了解决服务器终端语言，比如Perl，遗留的速度问题。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。•JavaScript的适应范围比VBScript更广泛，多数脚本采用Javascript，脚本语言能够使终端页面交互更为友好，增强用户的交互体验，便利用户的数据操作。脚本语言使静态的网页在与用户的鼠标或键盘输入的数据进行交互时，出现各种自动化的提示信息或页面动态。Javascript样例：•使用下面的脚本可以在鼠标悬停和移出某区域时改变该区域CSS样式风格•trclass=tr3f_oneonMouseOver=this.className='tr3f_two'onMouseOut=this.className='tr3f_one'•该脚本可使TR行的样式在tr3f_one和tr3f_two之间变换•Java脚本除了经常用于针对用户的鼠标与键盘操作，即时动态的改变显示内容或风格，也经常用于控制显示与隐藏重要的操作提示信息。•如：在进行用户注册的时候，输入密码结束时，提示密码是否足够安全或密码中有系统禁止的非法字符，或提示邮件地址不符合规范等。常见HTML标签名称属性样例效果段落pAlign对齐Align=center居中对齐（回车）断行br/无强制断行（Shift+回车）字体fontSize字号Size=3文字大小为3号字Face字体Face=宋体字体为宋体Color色彩color=#FF3366”色彩为亮红色标题h1…h6无项目列表ulliType类型Type=square方形项目列表符号编号列表olliType类型Type=I编号列表(罗马数字)水平线HRNoshade无阴影Color色彩Size粗细NoshadeColor=graySize=4水平线立体感消失水平线灰色4个像素粗HTMLSample02.html•h1H1/h1•h2H2/h2•h3H3/h3•h4H4/h4•pfontsize=1face=宋体Size1汉字/font/p•pfontsize=2face=ArialSize2Arial汉字/font/p•pfontsize=3face=sans-serifSize3sans-serif汉字/font/pHTMLSample02.html•pfontsize=4face=TahomaSize4Tahoma汉字/font•fontsize=2face=TahomaSize2Tahoma汉字/fontbr/•fontsize=1face=TahomaSize1Tahoma汉字/font/p•pfontsize=5Size5汉字/font/p•palign=centerfontsize=6Size6汉字/font/pHTMLSample02.html•ultype=square•liABCDEF/li•liABCDEF/li•liABCDEF/li•/ul•oltype=I•liABCDEF/li•liABCDEF/li•liABCDEF/li•/ol•p/pp/pp/pp/pp/pHTMLSample02.html字体与特殊字符•网页中经常使用的中文字体有：•宋体、微软雅黑、仿宋、黑体•微软雅黑、仿宋、黑体在启用操作系统的平滑字体特性时才有较好显示效果。网页中经常使用的英文字体有：•Arial、Tahoma、sans-serif•特殊字符：•不断行空格： •版权字符：©•注册商标字符：®•断行字符：br①③②字体与特殊字符DreamweaverCS4安装1.安装主程序下载：AdobeDreamweaverCS4lite（精简版）2.序列号1192-1014-7077-3383-4280-74353.安装CSS规则定义窗口汉化包•如Dreamweaver没有安装在默认路径下，必须注意选择正确的安装位置)•默认路径C:\ProgramFiles\Adobe\AdobeDreamweaverCS4\zh_CN\resources•可能的路径D:\ProgramFiles\Adobe\AdobeDreamweaverCS4\zh_CN\resources或D:\AdobeDreamweaverCS4\zh_CN\resources搜狗搜索引擎百度搜索引擎建立网站管理•使用Dreamweaver建立网站切忌直接建立网页，必须先建立站点管理，在站点管理器中创建空白页面后，才开始正式的网页设计与编辑工作。站点管理器使Dreamweaver的设计工作更加智能化，使网页排错工作和断链情况得到很大改善。•典型站点结构：站点根(X:\Sites\Site01)imagesstylesguestbookIndex.aspIndex.html图片样式表留言簿程序典型大型网站文件夹结构站点根imagesstylesInformationProductsServiceDownloadGuestbookForum/bbsManage/admin图像CSS样式信息/公告/新闻（News）产品信息服务/案例(Projects)下载留言簿动态网页程序论坛动态网页程序后台管理程序动态网页程序建立网站管理的步骤1.在站点菜单中选择“新建站点”2.设置站点名，站点URL地址，下一步3.选择不使用服务器技术，下一步4.设置站点存储位置（整个路径必须全英文），下一步5.设置如何连接到远程服务器为无，下一步，完成6.在文件面板中右击站点根，新建“images”文件夹7.在文件面板中右击站点根，新建“styles”文件夹8.在文件面板中右击站点根，新建index.html文件，此时可开始编辑该页，作为站点首页9.创建站点文件或文件夹时必须使用英文或数字，忌用中文字符中文字符在网站服务器中经常会导致不可预计的错误，所以很少用在Dreamweaver中编写网页•认识基本操作区域•认识属性面板•输入文字字体列表编辑•段落(回车)断行(Shift+回车)•不断行空格(Ctrl+Shift+空格)•首行缩进(两个全角中文空格)•缩进•项目列表•编号列表•插入特殊字符•插入水平线Dreamweaver手工编写网页代码的方法课后练习：使用Dreamweaver创建网站结构•正确安装Dreamweaver和CSS面板汉化包•创建网站结构•编辑恰当的字体列表•练习基本的文字排版•通过切分视图观察文字排版时出现的各种HTML编码•练习不断行回车、空格、首行缩进、版权商标符号的插入图片•imgsrc=“TestSite/Chrysanthemum.jpg”alt=“太阳花width=1024height=768hspace=16vspace=16border=2/•图片需要使用相对地址或绝对地址来显示到网页中•图片可设置属性：1.来源src=“images/pic0free.jpg”2.宽度与高度width=500height=3003.边框border=24.水平间距vspace=165.垂直间距hspace=166.提示文字alt=“图1链接、相对地址与绝对地址•超文本核心应用技术是链接，链接在网页中以相对地址与绝对地址的形式中使用与表现。通过链接，简单的文本才得以链接到各种网络文件与资源，乃至显示图像和播放动画、视频、声音等媒体形式。•计算机在网络中寻找与打开网络资源时使用URL地址。但网页中并非单纯的使用URL作为网页制作网页时，需要正确理解和使用相对地址与绝对地址。例子：•HTML代码ahref=sample1.html例子1/a•HTML代码ahref=/sample1.html例子1/a•HTML代码ahref=../../sample1.html例子1/a•HTML代码ahref=•文字链接的插入•链接到外部网站时，使用URL（绝对地址）如:•邮件链接的插入•图像链接（修改边框为“0”可隐藏链接带来的蓝色边框）•图像上的热区链接•网页内的锚点链接特殊的绝对地址在使用Dreamweaver的F12快捷键预览时，经常会在地址栏出现这种绝对地址，这种地址浏览正确的网页不一定在发布时能够正常显示，但如果在站点管理器的协调下，能够避免常见的低级错误。表格•tablewidth=400height=500border=3cellspacing=10cellpadding=10bgcolor=#000000bordercolor=#FF9900background=../../images/Penguins.jpg•trbgcolor=#FFCC00•tdbgcolor=#00CC00 /td•tdbordercolor=#3333CC /td•/tr•tr•td /td•td /td•/tr•/table表格列合并•tablewidth=300border=1cellspacing=5cellpadding=5•tr•tdcolspan=2 /td•/tr•tr•td /t