资源预览内容
第1页 / 共17页
第2页 / 共17页
第3页 / 共17页
第4页 / 共17页
第5页 / 共17页
第6页 / 共17页
第7页 / 共17页
第8页 / 共17页
第9页 / 共17页
第10页 / 共17页
亲,该文档总共17页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
真诚为您提供优质参考资料,若有不当之处,请指正。 教你制作静态网页的方法一、网页设计基础1、熟悉Dreamweaver 8的工作环境2、创建新站点创建本地站点:站点-管理站点-新建-站点(前三步也可直接从“新建站点”进入下面的设置向导对话框)-跟随向导设置直至完成3、网页文件的基本操作a、创建、打开和保存网页文件创建:文件-新建-创建打开:文件-打开-选择欲打开的文件或者在右边的文件浮动面版中选择打开保存:文件-保存或另存为b. 设置网页的页面属性修改-页面属性-然后设置(标题、背景、背景图像、文本等)c. 设置网页对象的颜色网页对象,如页面背景、文字、链接都经常需要设置颜色。可在各自对应的属性面版中设置。d. 网页文本的输入和属性设置文本可键入、导入、粘帖文字可设置字体、大小、颜色、格式等。键入空格的方法:1、汉字输入法设置为全角方式,按空格键即可输入。2、属性面版格式中:预先格式化的换行:ENTER、SHIFT+ENTER实例练习:1、输入以下文字书签夹在诗集里,落叶夹在深秋里。喜悦夹在生活里,追求夹在人生里。2、第一次设置格式为“无”,字体为“华文行楷”,字体颜色为“红色”,字号为“5号”,添加项目符号。然后保存、预览。3、第二次设置格式为“标题一”,字体为“楷体”,字体颜色为“蓝色”,字号为“5号”,添加项目符号,对齐方式为“居中”。然后保存、预览。比较两次设置的效果。e. 网页图片的插入和属性设置插入图片,在对话框中选择图片。(最好在建立站点时将欲用的图片素材复制到本地站点目录中)插入图像占位符,在图片准备好后再加入图片。加入方法:1、双击图像占位符;2、点“属性面版”中的“指向文件”,拖到右边文件中要插入的文件处。在图像属性面版中设置f. 插入层方法: 1、点击插入面版中的“描绘层”;2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层;3、可以随意移动层的位置;4、可在层中插入图像、文字等。g. *插入表格,用表格定位方法:1、 先用鼠标点至欲插入表格的位置;2、 点插入面版中的“表格”“插入表格”;3、 确定行数、列数后确定即将表格插入到选定位置了;4、 可在表格中任何单元格里插入图像、文字等。h. 建立超链接方法: 1、选中要建立超链接的文字或图像;2、点右键“创建链接”打开的窗口或在属性的链接栏里,填入链接的目标。(如: 本网站另一个网页,或外部网页如http:/www.google.com,或电子邮件如:mailto:zdhwangji21cn.com)3、在页面属性里修改链接的属性: 修改-页面属性(链接、活动链接、访问过链接)二、制作实例1制作要求:(网页效果)1、 页面的背景图片为bg0100.jpg;2、 在合适的位置插入图片earth.gif;3、 在网页中输入横排带阴影的文字“欢迎访问网络工程08级3、4班主页”4、 将网页用index.htm为名保存在本地站点My site中。操作步骤:1、按下面操作建立站点:先新建一个文件夹My site(下面举例中是建立在桌面上)。l 选择“站点”-“新建站点”命令;l 在弹出的对话框中,在“站点名称”文本框中输入“应用实例1”,并点下一步;l 按下图选择“否,我不想使用服务器技术”,然后点“下一步”;l 按下图选择“编辑我的计算机上的本地副本, ”,并选择文件存放的目录路径,然后点“下一步”;l 在“您如何连接到服务器?”选项里选择“无”,然后点“下一步”;l 然后点“完成”。这样就已经建立好一个新的站点了,可以在Dreamweaver界面右边的“文件”窗口里看到新建立的站点信息。5、 2、在文件夹My site下创建文件夹images,以后此站点中用到的图像文件准备全部存放在images文件夹里;为方便,这里先把此例中需要用到的图片bg0100.jpg和earth.gif事先存放在此images文件夹里了。3、创建一个新网页:网页文件- 新建- 选“基本页”-创建;然后在网页编辑器窗口中,选择“修改”-“页面属性”命令,在“页面属性”对话框中设置各项参数; 在“标题”文本框中输入“实例1”;4、用index.htm为名保存文件到本地站点My site中,保存并按F12预览网页。5、选择“插入”“布局对象”“层”命令,或单击工具栏中 “布局”选项卡中的“绘制层”按钮,在工作区合适的位置上插入图片定位用的层Layer1,并将光标定位在层中。6、“插入”-“图像”命令,或 “常用”选项卡的“图像”按钮,在打开的对话框中选择文件earth.gif插入层中(若跳出“图像标签辅助功能属性”对话框,里面“替换文本”可填写“地球”或其他,或者不填),然后调整层及图像的位置至合适处;保存并按F12预览网页,若图像位置不合适,则调整到合适位置。7、在网页合适位置插入第二个层Layer2,在层中输入文字“欢迎访问网络工程08级3、4班主页”,并设置文字属性中的字体、大小等,颜色为黑色;然后保存并按F12预览,若文字属性及位置不合适,则调整到合适为止。8、选中层中的文字,将其复制到剪贴板中;在网页合适位置处插入第三个层Layer3, 并将文字粘贴到层Layer3中,将Layer3中的文字颜色改为白色,并适当调整层Layer3,使两个层中的黑白重叠文字产生阴影效果。然后保存并按F12预览,若效果不满意,则调整到满意为止。三、制作实例2要求:(网页效果) 1、网页名为exa.htm,网页的背景图片为bg0040.gif,网页保存在My site文件夹中;2、在网页的顶部区域输入标题文字“人生的伴侣.知识的源泉”,用HTM样式“标题1”将其格式化,预览页面效果;3、在网页的中部区域插入导航条,导航条的6个按钮对应的图片是a1.gif, a2.gif, a3.gif, .f2.gif, f3.gif, f4.gif(共有24个),每个按钮可以链接一个My site文件夹中的HTML文件。4、在网页的合适位置上插入图片t4_1.gif, t4-2.gif, t4-3.gif。5、在网页的底部区域插入图片wyfy.jpg,并为该图片建立电子邮件链接;6、预览页面效果后,修改保存网页文件。操作步骤:先将要用到的图片素材复制到My site文件夹里的images文件夹。1、新建一个网页,并将新网页取名为exa.htm,保存在My site文件夹中;在网页编辑器窗口中,选择“修改”-“页面属性”命令,在“页面属性”对话框中设置标题为”应用实例2”, 背景图片为bg0040.gif;2、在网页的顶部区域合适的位置上输入标题文字“人生的伴侣.知识的源泉”,并选中这些文字。在属性面板中,选择格式中“标题1”;3、在网页的中部区域合适的位置插入光标,选择菜单“插入”“图像对象”“导航条”命令,此时的网页编辑窗口中,会弹出“插入导航条”对话框。在“项目名称”文本框中设置第1个按钮的名称为a;在下面按钮4个状态的文本框中分别输入images文件夹中的a1.gif, a2.gif, a3.gif, a4.gif 4个文件的路径和名称;在“按下时,前往的URL”文本框中输入该按钮链接的对象名称和路径(因此实例站点中只有index.htm和exa2.htm两个网页文件,所以这里先填入index.htm来看看效果)。选中“预先载入图象”和“使用表格”选项;选择“插入”下拉列表框中的水平方向设置导航条;4、点“插入导航条”对话框最上面的“+”后,重复步骤3,可设置其他5个按钮(这里为简便,后五个按钮只对“状态图像”进行设置,其他三种图像不再设置了),设置完成后,效果如下:5、在网页合适的位置上插入3个用于图片定位的层,并在不同的层中插入images文件夹中的图片文件tu1.gif, tu2.gif, tu3.gif;6、在网页的底部区域插入带图片wyfy.jpg的层,选中图片,在图片“属性”面板的“链接”文本框中,输入mailto:+EMAIL地址,建立电子邮件链接;7、保存并预览网页,调整各方面属性及位置直至满意。最终效果如下:在预览中尝试点击“科学技术”按钮和“我要发言”图片。四、制作实例3: 用表格布局定位应用实例要求:页面效果 (1) 创建新网页名称为shu.htm, 网页的背景图片为本bg0040.gif, 网页文件保存在My site 文件夹中. (2) 在网页中插入7行6列的表格, 按照页面效果对网页中单元格进行合并调整,在表格上方合适位置的单元格里插入Flash文件shu.swt,在表格左边合适位置的单元格里分别插入图片文件t5-1.gif, t5-3. gif, t5-4. gif, t5-6. gif. 每个图片与My site 文件夹中的一个HTML文件或某一外部网站建立超链接,被链接的HTML文件在新窗口中打开,在表格右边合适位置的单元格中,插入逐帧动画文件shu-1.gif.(3) 预览页面效果后,保存网页文件.操作步骤:.(1) 新建一个页面,选择修改|页面属性命令,在页面属性对话框中设置背景图片为bg0040.gif, 并将网页取名为shu.htm保存在My site 文件夹中.(2) “插入”-“表格”, 在弹出的“表格”对话框中设置7行6列,表格宽度设为800像素,然后确定,则网页中插入了一个7行6列的表格。(3) 选定第一行,然后点右键,在菜单中选“表格”“合并单元格”;选定第五列的三、四、五行,然后点右键,在菜单中选“表格”“合并单元格”;(4) 在表格中的第一行单元格中插入光标,选择菜单中“插入”“媒体”“Flash”,此时可在表格顶部的单元格中,插入Flash文件shu.swf。若希望动画是透明的,则在属性中将“参数”设置入下图:(5) 在表格的第三行第二列、第四行第三列、第五行第二列、第六行第三列和第三行第五列的单元格中中分别插入光标,插入图像文件 shu1.gif, shu3.gif, shu5.gif, shu6.gif, shu-1.gif。将图像shu1.gif链接到exa.html页面(在下面图像shu1.gif的属性面板中“链接”项填入“exa.html”),将图像shu5.gif链接到一个外部的网站(比如链接到百度,在属性“链接”项中填入http:/www.baidu.com)。按F12键预览页面后,保存文件。下面是预览效果图:五、制作实例4: 框架集的使用要求:页面效果操作步骤:1、 新建站点名为 “框架集应用”的站点;2、 “文件”- “新建”- 选“框架集”- 选“左侧固定”- “创建”,然后在弹出的“框架标签辅助功能属性”对话框中按“确定”。3、 “文件”- “保存全部”:将框架集页面保存为index.htm,左侧框架页面保存为leftFrame.htm,右侧框架页面保存为rightFrame.htm。4、 在下面属性窗口中按如下进行设置,然后保存并
收藏 下载该资源
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号