html图片加标题加链接,手机移动网页制作：插入图片、标题、文字链接

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

经过新建网页、链接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键添加一个折行标记
。这样做是让文本强制折行，避免由于手机屏幕过窄而造成错位，同理，下面每行宽度最好不超过200像素，都要添加折行标记
。

然后将全选文字全选，在属性面板中添加链接，目标一栏中留空不填，因为一般的手机网页都是在本页刷新的，所以保留。

重复以上操作，继续添加链接数条。

5、其它

按照以上3-4步操作，在页面中添加一些内容后你会发现，制作手机网页真的和普通网页没什么大区别，只不过需要稍微注意一下制作习惯而已。所以，诸如搜索框、版权信息的内容就不需要再介绍了吧。

再者，您也许也发觉了，这篇文章中所用到的Class和ID没有几个，都是上篇文章CSS里给出的，可见用Xhtml MP语言实在很容易。

来源：互联网