移动网站设计与模板使用全攻略

### 移动网站设计与模板使用全攻略 #### 1. 移动网站菜单与导航设计 在移动网站设计中，为用户提供便捷的导航至关重要。在左侧侧边栏设置菜单，能让移动用户更轻松地找到所需信息。与电脑屏幕菜单类似，手持设备的菜单若能让用户轻松识别为链接，使用效果会更佳。一种使菜单项或按钮易于识别的方法是设计反馈机制，例如当用户选择或切换到菜单项或按钮时，让它们改变颜色，呈现高亮效果。 #### 2. 创建可点击的按钮和文本链接 在网页设计中，`<a href>` 标签是创建超链接的常用方式。超链接能让按钮、图形或文本串变得可点击。例如，在菜单列表中，每个菜单项都包含一组 `<a href></a>` 标签。通过将代码中的占位符 `#` 替换为有效的 URL，可使每个菜单项链接到互联网上的任何页面或 URL。 除了普通超链接，还有两种非常实用的超链接：`mailto` 和 `tel`。 - `mailto`：用于创建可点击的电子邮件链接。当用户点击配置了 `mailto` 的对象时，浏览器会与计算机的默认邮件客户端（如 Windows 中的 Outlook 或 Mac OS X 中的 Mail）交互，打开新邮件窗口，并将指定的电子邮件地址填入“收件人”字段。示例代码如下： ```html <a href="mailto:[email protected]">[email protected]</a> ``` - `tel`：在手机上非常有用，它创建的链接在点击时会自动拨打超链接中配置的电话号码。其配置与 `mailto` 类似，示例代码如下： ```html <a href="tel:555-555-555">555-555-5555</a> ``` #### 3. 下划线识别文本链接 下划线也是一种识别文本为链接的有效方法。在创建侧边栏菜单以及页脚的电子邮件和电话链接时，可以使用 CSS 方法来格式化主页上的导航链接。 #### 4. 使用样式表创建菜单 使用样式表创建菜单有多种方法，这里介绍一种简单的方式，虽然创建的菜单外观较为朴素，但在移动网站设计中，简洁实用往往是更好的选择。 ##### 4.1 创建菜单列表 可以使用简单的 HTML 无序列表（`<ul>` 和 `<li>` 标签）来创建菜单项，具体步骤如下： 1. 打开 `index.html` 文件，找到 `<div class="sidebar1">` 标签，在 `<div>` 标签之间输入以下列表标签和文本： ```html <div class="sidebar1"> <ul class="nav"> <li><a href="#">Blog</a></li> <li><a href="#">Services</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> <!-- end .sidebar1 --> </div> ``` 这里的 `#` 是占位符，实际使用时可直接输入菜单项链接的 URL。`<ul>` 标签用于开始列表，`<li></li>` 标签对定义单独的列表项，`</ul>` 标签表示列表结束。注意，`<ul>` 标签调用了名为 `nav` 的类，这是一个标签选择器，告诉浏览器创建一个无序列表并使用 `nav` 类进行格式化。 2. 打开 `chapter7.css` 文件，在 `.container .sidebar p` 样式的闭合花括号下方插入一个空行，然后插入以下样式： ```css ul.nav { list-style: none; border-top: 1px solid #666; margin-bottom: 15px; } ul.nav li { border-bottom: 1px solid #666; } ul.nav a, ul.nav a:visited { padding: 5px 5px 5px 15px; display: block; text-decoration: none; background: #666666; color: #CCCCCC; } ul.nav a:hover, ul.nav a:active, ul.nav a:focus { background: #999999; color: #FFF; } ``` 这些样式将无序列表转换为按钮。其中，`ul.nav a, ul.nav a:visited` 控制用户访问链接后菜单项的显示效果；`ul.nav a:hover, ul.nav a:active, ul.nav a:focus` 控制按钮在鼠标悬停或在移动设备上激活时的显示效果。 #### 5. 创建页脚链接 网站导航方案的两个重要部分是页脚中的电子邮件和电话链接。创建这些链接的步骤如下： 1. 打开 `index.html` 文件，在页脚容器标签之间插入以下标签和文本： ```html <p><a href="mailto:[email protected]">[email protected]</a> - <a href="tel:555-555.5555">555-555.5555</a></p> ``` 2. 打开 `chapter1.css` 文件，在 `.container .content h1` 样式下方添加以下复合样式： ```css .container .footer p a { font-size: small; color: #CCC; } ``` #### 6. 在布局中添加图像 为了完善布局，可以在页面顶部添加横幅图像。头部容器设计为可适应任何高度的图像，但为了保持头部与其他布局部分的比例协调，图像高度最好不超过 70 像素，长度最好不超过 320 像素，以免用户需要滚动查看横幅。具体步骤如下： 1. 打开 `chapter7.css` 文件，在第一个容器样式上方添加以下样式： ```css a img { border: none; } ``` 此样式确保如果将图像设置为可点击，浏览器不会在其周围显示边框。 2. 打开