简单明了的网站结构设计呦！

最新推荐文章于 2024-01-21 20:29:51 发布

代码小小爱好者

最新推荐文章于 2024-01-21 20:29:51 发布

阅读量752

点赞数 1

分类专栏：日常

本文链接：https://blog.csdn.net/weixin_44799698/article/details/103298921

版权

日常专栏收录该内容

47 篇文章 0 订阅

订阅专栏

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

首先我们要设计首页：

首页主要分为四个部分：

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.布局

2.标题

3.主图

4.绝对词

网站结构设计的目标：

1.层次清楚，突出主题

理清网页内容及栏目结构的脉络，使链接结构、导航线路层次清晰；内容与结

构要突出主题。

2.体现特征，注重特色设计

3.方便用户使用

4.网页在功能分配上合理，且要功能强大

5.可扩展性能好

6.网页设计与结构在用户体验上的完美结合

7.面向搜索引擎的优化

代码小小爱好者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单明了的网站结构设计呦！

网站结构设计是网站设计的重要组成部分。首先我们要设计首页：首页主要分为四个部分：1.网页标题部分2.网页侧边栏3.博客中文章摘要组成的文章列表4.页面底部的版权信息显示部分构建网页标题输入：<!DOCTYPE html ><html> <head> <title>文章</title> ...
复制链接

扫一扫