推荐: LOGO设计微信开发包装设计游戏开发接口开发手机网站开发VI设计文字设计Web前端开发网页设计客厅装修情人节表白Oracle数据库网站建设个人网站建设微信客户端

热门搜索: LOGO设计微信开发VI设计网站建设网站推广

当前位置: 威客百科 > 网页开发 > 网页开发案例
免费发布需求,接收报价与方案

网页开发案例

什么是网页开发?

相关提示: 【网页开发工具】【网页开发学习】【网页开发语言】

下面来介绍一下如何创建一个简单的网页文件。帮助我们简单了解网页的开发。
制作要求:(网页效果) 
    1、 页面的背景图片为bg0100.jpg; 
    2、在合适的位置插入图片earth.gif; 
    3、 在网页中输入横排有阴影的文字 
    4、将网页用index.htm为名保存在本地站点My site中。


操作步骤:  
    1、按下面的操作建立站点:先新建一个文件夹My site(下面举例是建立在桌面上的)。  选择“站点”---“新建站点”命令;
    在所弹出的对话框中,在“站点名称”文本框中输入“应用实例1”,并点下一步。
    按下图选择“否,我不想使用服务器技术”,然后点“下一步”;
    按下图选择“编辑我的计算机上的本地副本,…… ”,并选择文件存放的目录路径,然后点“下一步”;
    在“您如何连接到服务器?”选项里选择“无”,然后点“下一步”;然后点“完成”。这样就已经建立好一个新的站点了,可以在Dreamweaver界面右边的“文件”窗口里看到新建立的站点信息。  
    
    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,在层中输入文字,并设置文字属性中的字体、大小等,颜色为黑色;然后保存并按F12预览,若文字属性及位置不合适,则调整到合适为止。
8、选中层中的文字,将其复制到剪贴板中;在网页合适位置处插入第三个层Layer3, 并将文字粘贴到层Layer3中,将Layer3中的文字颜色改为白色,并适当调整层Layer3,使两个层中的黑白重叠文字产生阴影效果。然后保存并按F12预览,若效果不满意,则调整到满意为止。