手机移动网页制作:插入图片、标题、文字链接

手机移动网页制作:插入图片、标题、文字链接

手机移动网页制作:插入图片、标题、文字链接
经过新建网页、链接CSS文件几个简单步骤,一个手机网页的模型已经初步建立了。接下来就是为这个页面添加更多的内容元素,本文将介绍插入图片、标题、文字链接等方法。
一般的手机网页的首页顶部都有一个logo图片或者广告图片,然后下面依次是“分类标题—内容;分类标题—内容;版权信息;”等,我们也按照这个结构进行制作。

三、插入内容
1、插入Div
首先是在页面顶部插入图片,用Dreamweaver插入图片,点击插入图片图标,然后选择要插入的图标即可。但是,在这之前要先给这个图片加个“外壳”,就是所谓的Div容器,也就是插入一个Div。具体操作方法:在工具栏中点击“插入Div标签”按钮,如图一,随后在弹出的对话框的ID中填入“head”,如图二所示。
其实,在上篇文章《链接CSS文件》中已经将是网页中可能用到的CSS罗列出来,但没有这个head的ID的CSS内容,现在添加的Div使用了head这个ID,但并不用给它做任何定义,仅仅为了以后方便程序调用才给它添加这个ID。

2、插入图片
插入Div后,删除Div中自动添加的文字,然后点击工具栏中的插入图像图标,如图三所示。
在随后弹出的对话框中选择要插入的图片,如图四所示,或者在URL处输入网络地址,如图四中2处。
点击确定后,又弹出了一个图像标签辅助功能属性对话框,在“替换文本”栏中输入图片的注解文字,如:LOGO,XXX网站等,然后点击确定,如图五。图片插入成功!如果需要调整图片,只需要点中它,在属性面板中修改即可。

3、插入标题
LOGO添加完毕,下面就是添加标题和内容了。
在head的Div后添加标题,点击工具栏中文本标签中的标题2(h2)按钮插入标题,如图六,然后在标题2中输入【分类名称一】。

4、添加文字链接
接下来,要给分类一添加一些内容。但给它添加内容之前,也要先给它添加一个“外壳”,所以重复第一步骤中插入Div的操作,只不过这次不要在ID中填入head,而改成在“类”中选择class或填入list。
然后将Div中自动添加的文字删除,输入链接文字,输入完毕后按Shift+Enter键添加一个折行标记<br />。这样做是让文本强制折行,避免由于手机屏幕过窄而造成错位,同理,下面每行宽度最好不超过200像素,都要添加折行标记<br />。
然后将全选文字全选,在属性面板中添加链接,目标一栏中留空不填,因为一般的手机网页都是在本页刷新的,所以保留。
重复以上操作,继续添加链接数条。

5、其它
按照以上3-4步操作,在页面中添加一些内容后你会发现,制作手机网页真的和普通网页没什么大区别,只不过需要稍微注意一下制作习惯而已。所以,诸如搜索框、版权信息的内容就不需要再介绍了吧。
再者,您也许也发觉了,这篇文章中所用到的Class和ID没有几个,都是上篇文章CSS里给出的,可见用Xhtml MP语言实在很容易。

 

推荐阅读

    Dreamweaver教程:使用空链接

    Dreamweaver教程:使用空链接,链接,教程,属性,对象,文档,输入,附加,Dreamweaver教程:使用空链接 使用空链接可以为页面上的对象或文本附加

    Dreamweaver教程: 创建导航链接

    Dreamweaver教程: 创建导航链接,导航,链接,文件,文档,教程,站点,选择,Dreamweaver教程: 创建导航链接 指向文档,图象

    Dreamweaver教程:创建电子邮件链接

    Dreamweaver教程:创建电子邮件链接,链接,电子邮件,教程,选取,输入,常用,工具,Dreamweaver教程:创建电子邮件链接 方法一:选取需要创建链接

    Dreamweaver闪动分隔线效果制作技巧

    Dreamweaver闪动分隔线效果制作技巧,制作,分隔线,属性,选择,时间轴,变换,单元,Dreamweaver闪动分隔线效果制作技巧 在网页制作中,多彩

    Fireworks教程:文字编辑(2)

    Fireworks教程:文字编辑(2),路径,文本,附加,教程,文字编辑,文字,属性,Fireworks教程:文字编辑(2) 3、文字附加到路径 Freworks中文字的输

    Fireworks教程:对象的操作

    Fireworks教程:对象的操作,对象,路径,选择,填充,教程,操作,滑块,Fireworks教程:对象的操作 对象的选择:用“指针” 工具可以对绘图对象进行

    Fireworks制作虚线(1)

    Fireworks制作虚线(1),虚线,制作,单击,选择,工具,选项,下拉框,Fireworks制作虚线(1) 操作步骤: 1.启动Fireworks MX,新建一个文件,文件宽和

    fireworks制作缺角矩形

    fireworks制作缺角矩形,制作,删除,按键,工具,选择,象素,点后,fireworks制作缺角矩形 1. 新建一个宽为150象素,高为100像素的文件,背景色任