手机移动网页制作:插入图片、标题、文字链接
经过新建网页、链接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语言实在很容易。