网页制作的方法

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

网页制作produzioneWeb了解HTML•当我们访问某个站点时,会发现它是由一个个页面组成的,页面的本质是文件,页面文件是由HTML语言编写的,包含由HTML标签定义的各个页面元素,浏览器遇到这些标签会根据一定的格式进行处理。•HTML语言定义了可以处理的元素,怎样处理这些元素,页面与页面之间,页面与其它文件之间是相互关联的,在浏览器中可以实现页面之间的跳转,文件的调用。网站的所有文件中有一个是站点的入口页面,叫做主页。•HTML由浏览器解释执行并显示。可以往普通文档中加入一些标识符,文档中含有图像、声音和动画。•控制文档外观的是HTML标签。HTML语言的构成•HTML文件分为序、头部和主体。页面的第一行是序,显式本页面的HTML版本,头部定义整个文档,主体则是文档的主要部分。•可以用文本编辑器进行页面文件的编写,如Word2007,但要以纯文本方式保存,也可以用SharePointDesigner2007来编写页面文件。•一段HTML由元素和标签组成。元素是要处理的对象,一个元素可以包含另外的元素,具有相应的标志来区分。•标签由尖括号、标签名和属性。标签都是成对出现的,结束符在标签前面加了一个斜杠,两个标签之间为元素的内容。常用的HTML标签•常用的标签包括:表示HTML文件,其余标签放在这对标签之间——html。•文档的开头——head。•文件的标题,出现在浏览器顶端标题栏中——body。•各级标题——h1到h6。•划分段落的标签p。•链接标签a。•编号列表ol。•项目符号列表ul。•图像标签img。•表格标签table。•行tr。•列td。•表单form。•表单域input.•还有一些表示文字格式的标签。安装SharePointDesigner2007中文版•SharePointDesigner2007是一个集网页编辑、网站建设和管理、网页浏览为一体的集成软件,为设计者提供了全面的建站工具。•SharePointDesigner2007是作为Office2007的一部分进行发行和销售的。•把Office2007光盘放入光盘驱动器中,打开资源管理器,用鼠标双击光盘驱动器图标,双击Setup.exe文件,Office2007安装程序就会自动启动,在安装向导引导下,可以轻松地完成Office2007的安装。SharePointDesigner2007窗口•单击任务栏上的【开始】按钮,指向【所有程序】,选中【MicrosoftOffice】,再选择MicrosoftOfficeSharePointDesigner2007,即可启动SharePointDesigner2007。SharePointDesigner2007由标题栏、菜单栏、工具栏、文件夹列表、任务窗格、工作区和状态栏组成。网页编辑区•网页编辑区的左下角有三个选项卡,【设计】、【拆分】和【代码】,分别对应编辑区的设计和代码的视图模式,用鼠标单击其中一个选项卡,就会切换到相应的选项卡视图中。所有的页面编辑、修改都要在这里完成。在SharePointDesigner2007中打开一个文件时,文件的内容就会在这里显示。在网页编辑区,可以方便地插入各种页面元素,例如图像、表格、列表、窗体等。SharePointDesigner会在后台自动对HTML文件进行相应的修改,你所要做的只是调整那些页面元素的布局以及确定它们的一些属性而已。文件夹列表•文件夹列表区列出的是SharePointDesigner2007当前打开的站点以及站点下面的所有文件夹和页面文件,可以用鼠标双击相应的文件夹打开这个文件夹,双击一个页面文件就会打开这个文件。页面的建立•在网页编辑区、文件夹视图或导航视图中,选择【文件】菜单中的【新建】子菜单中的【网页】命令,出现【新建】对话框,在这个对话框的【常规】子目录中选择【HTML】选项,单击【确定】按钮即可。•新建的页面文件名称为new-page-*.htm,这个星号代表一个数字,这个数字是自动生成并按序排列的,文件处于修改状态,可以给这个页面起一个有意义的名字。•选中一个页面,按删除键,会弹出提示框提示是不是要删除,确认之后开始进行文件的删除。网页属性•在网页编辑区中打开一个页面,单击【文件】菜单的【属性】命令,打开【网页属性】对话框,可以进行网页常规、背景、边距、自定义、语言、工作组等属性的设置。使用文本•在Web页面中使用文本是一件很轻松的事情。用户在创建了一个空白页面后,屏幕上会有一个闪烁的光标,意味着你可以进行输入了。它的输入过程其实与在Word2007中的输入没有什么区别。•单击【格式】菜单,选择【字体】命令,弹出【字体】对话框,包含控制字体的所有工具,在这个对话框中,可以设置文字的字样、字号、颜色以及其它属性。•格式工具栏提供最常用的字体工具按钮,以及一些其它公用工具的按钮。•SharePointDesigner网页编辑功能是自动折行的,回车键是段落的开始,段落之间的间距与段落内各行的行距是不同的。如果不想把某一行与后面的段落分开,则要用上档键加回车键的组合键。插入图像•在页面中插入一幅已经存在于电脑中的图像是轻而易举的事情。在打开的页面中,把光标移动到要插入图像的地方,单击【插入】菜单,选择【图片】子菜单下的【来自文件】命令,弹出【图片】对话框,从文件目录结构中查找要插入的图片,找到文件后,单击【确定】按钮,这时对话框关闭,图像已经插入到光标所在的位置上。•同其它Office2007软件一样,在SharePointDesigner2007中可以直接使用Office2007提供的剪贴画,这些剪贴画都是GIF格式的图片。在打开的页面中,把光标移动到要插入图像的地方,选择【插入】菜单的【图片】子菜单的【剪贴画】命令,在任务窗格中单击【搜索】按钮,可在这个任务窗格中显示出Office2007中包含的所有类型的剪贴画。创建文本超级链接•超级链接是网站和网页的基本功能之一,根据超级链接目标地址的类型,可以分为链接、页面链接、电子邮件地址链接、一般文件链接和页面内部链接。超级链接在页面之中必须有一个载体,让访问者知道怎样和在哪里才能触发超级链接。这种载体有文本、列表、图像、图像热点和动画等。•首先在网页视图中,建立超级链接载体,用鼠标选中这个超级链接载体,单击常用工具栏上的【超链接】按钮,在文件目录中选择要链接的页面,单击【确定】按钮已完成超级链接的建立,在文字的下面自动加上一条横线,颜色变成蓝色。页面书签•书签功能上是链接的一种,然而它作用于页面的内部,可以在页面中进行跳转和定位。•打开要创建书签的页面,在页面中选择要转变成书签的文本,选择【插入】菜单中【书签】命令,出现【书签】对话框,在【书签名称】对话框中输入要建立的书签名称,文本下面打上一条下划线,如果使用光标位置•定义好书签后,要使用它,必须通过超级链接才能被访问者触发。创建图像热点•图像除了一般的超级链接方式外,还有一种特殊的链接方式——图像热点。用鼠标右键单击图像,在弹出的快捷菜单上,选择【超链接】命令,显示【插入超链接】对话框,输入超级链接的地址,按【确定】按钮,在浏览器中,把鼠标移动到这个图像上,鼠标指针会变成一只手的形状。•图像热点是图像上的某个定义好的区域,光标移动到这个区域内就可以触发超级链接,选中要建立热点的图像,图像被选中后,四周会出现八个控制方块,图片工具栏出现在窗口下方,在图片工具栏上选择热点的形状,把鼠标指针移动到图像上,这时鼠标指针变成一支笔的形状。建立矩形热点时,单击矩形热点的一个角,然后拖动鼠标到相应的角,有八个控制方块;建立圆热点,鼠标单击的第一个点为圆热点的圆心,拖动鼠标改变圆的大小,圆形热点有四个控制方块。建立多边形热点,鼠标单击的第一个点作为多边形的第一个顶点,移动鼠标时,一条线作指示,再次单击鼠标,作为第二个顶点,依次建立第三个顶点……最后单击第一个顶点来封闭多边形。•热点绘制完毕后,图像上会出现热点的边框,可以为热点定义超级链接,超级链接的形式和建立过程与文本超级链接相同。创建表格•表格可以用行和列组成的格子来显示信息。•在打开的页面中,把光标移动到要插入表格的地方,选择【表格】菜单的【插入表格】命令,出现【插入表格】对话框,在这个对话框中允许制定表格的大小,布局和宽度等。在【大小】栏中的【行】和【列】数字框中,输入表格的行数和列数,在【布局】栏内指定表格内容的对齐方式,边框线宽度、单元格的边距、单元格的间距等,单击【确定】按钮,对话框关闭,所需的表格在页面中出现。•用表格工具栏中的【绘制布局表格】和【绘制布局单元格】两个按钮,可以手工画出布局表格,画完后还可以套用系统自带的表格格式。创建框架页•框架是页面制作中一种技术,可以把浏览器窗口分为几个独立的部分,每个部分包含单独的页面。框架页确定框架的相互位置、组织结构和其它属性等,每个框架指向的页面叫做框架页面。•在SharePointDesigner中,选择【文件】菜单中的【新建】子菜单下的【网页】命令,弹出【新建】对话框,在左边的对话框里单击【框架网页】,中间的列表显示框架页的模板,选定一个模板后,单击【确定】按钮,框架的结构可以显示在SharePointDesigner中。•接着我们可以为每个框架指定对应的页面。在框架页中有一个框架具有深蓝色的边框,表示这个边框处于活动状态,编辑其它的框架页面,就用鼠标单击对应的框架。改变框架属性•用鼠标右键单击框架,并在快捷菜单中选择【框架属性】命令,弹出【框架属性】对话框,在对话框的【名称】文本框中,可以输入框架的名称,在【初始网页】文本框中,可以输入另外的页面文件名称,改变框架的初始页面。在【框架大小】栏的【列宽度】和【高度】文本框中,输入框架边框与框架内容页面之间的间距。如果允许访问者能在浏览器中改变框架的大小,选中【选项】栏的【在浏览器中可以调整大小】复选框,在【显示滚动条】下拉列表中确定滚动条的出现条件,单击【确定】按钮,关闭对话框。指定目标框架•目标框架是针对框架中的超级链接而言的,要实现框架的功能必须对超级链接设置目标框架。•一般在创建框架页时,框架模板会提供默认的超级链接目标框架。在框架页里选中要设定目标框架的框架,在框架页面上单击鼠标右键,从弹出的快捷菜单中选择【网页属性】命令,弹出【网页属性】对话框,单击【默认的目标框架】文本框右方的【改变目标框架】按钮,弹出【目标框架】对话框,用鼠标单击左上角的框架示意图的相应部分,选中的框架会变成深蓝色。根据需要,可以选择特殊目标框架区域,即右方的【公用的目标区】列表中显示的一些可以指定的特殊目标框架,单击【确定】按钮。使用字幕•在SharePointDesigner中,可以直接使用Office组件,以及它本身的活动元素,包括横幅广告、计数器、悬停按钮和字幕。字幕使文本在屏幕的水平方向上滚动。动态HTML效果•动态效果分为页面元素动态效果和网页动态效果(网页过渡)。•动态HTML效果是某个页面元素在页面中改变显示方式以动态响应某些事件,如单击鼠标。只要是页面上的元素,都可以具有动态效果。插入HTML•打开页面把光标移动到要插入HTML的地方,选择【插入】菜单的【高级】子菜单的【HTML标记】对话框中,写入要插入的HTML,单击左下角的HTML选项卡,直接修改HTML文件。

1 / 22
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功