网页设计的技术架构网页的结构设计

转载

mob64ca1402665b 2024-04-26 19:30:04

文章标签 网页设计的技术架构 html ide HTML 文章分类 架构后端开发

网站结构设计是网站设计的重要组成部分。

首先我们要设计首页：

首页主要分为四个部分：

1.网页标题部分

2.网页侧边栏

3.博客中文章摘要组成的文章列表

4.页面底部的版权信息显示部分

构建网页标题

输入：

<!DOCTYPE html >
<html>
    <head>
        <title>文章</title>
        <meta charset="UTF-8">
   
    </head>
    
   
</html>

执行后为：

网页设计的技术架构网页的结构设计_网页设计的技术架构

网页侧边栏

要设计要使用侧栏菜单，添加一个父元素，一个中间内容 <ion-

side-menu-content>，和一个或更多指令。

<ion-side-menus>
  <!-- 中间内容 -->
  <ion-side-menu-content ng-controller="ContentController">
  </ion-side-menu-content>

  <!-- 左侧菜单 -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- 右侧菜单 -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

博客中文章摘要组成的文章列表

为获取摘要，有必要先将HTML标签都剔除掉，在纯净的文字基础上去截取前

面300字符（Java String的substring()方法即可）。存储的话就是同样设立一个

摘要的目录，采取数据库本地读写的形式。文章实体类多加一个摘要字段，存

放摘要路径。之后主页显示的是Article实体类的摘要字段即可。查看文章内容

则显示Article实体类的文章内容字段.

下面是除去HTML标签的公共方法（借鉴网上）：

/*
     * clean all the tags of HTML
     */
    public static String removeTag(String htmlStr) {
        String regEx_script = "<script[^>]*?>[\\s\\S]*?<\\/script>"; // script
        String regEx_style = "<style[^>]*?>[\\s\\S]*?<\\/style>"; // style
        String regEx_html = "<[^>]+>"; // HTML tag
        String regEx_space = "\\s+|\t|\r|\n";// other characters

        Pattern p_script = Pattern.compile(regEx_script,
            Pattern.CASE_INSENSITIVE);
        Matcher m_script = p_script.matcher(htmlStr);
        htmlStr = m_script.replaceAll("");
        Pattern p_style = Pattern
            .compile(regEx_style, Pattern.CASE_INSENSITIVE);
        Matcher m_style = p_style.matcher(htmlStr);
        htmlStr = m_style.replaceAll("");
        Pattern p_html = Pattern.compile(regEx_html, Pattern.CASE_INSENSITIVE);
        Matcher m_html = p_html.matcher(htmlStr);
        htmlStr = m_html.replaceAll("");
        Pattern p_space = Pattern
            .compile(regEx_space, Pattern.CASE_INSENSITIVE);
        Matcher m_space = p_space.matcher(htmlStr);
        htmlStr = m_space.replaceAll(" ");
        return htmlStr;
    }

页面底部的版权信息显示部分

参见下面几个正确的格式：

请注意标点符号和大小写的用法

设计详细页

详细页分为四个部分：

1.页面头部

2.侧面

3.详情内容

4.页面尾部

在做详细页的时候，需要一个正确的思维方式，一个清晰的思路设计

在做详细页的时候我们要注意：

1.布局